/* =========================================================
   VARIABLES
========================================================= */

.kx-shop{

    --kx-bg:#050505;
    --kx-card:#101010;
    --kx-card-hover:#131313;

    --kx-green:#a6ff00;

    --kx-white:#ffffff;

    --kx-gray:#858a92;
    --kx-gray-dark:#60656d;

    --kx-border:#232323;

}


/* =========================================================
   RESET
========================================================= */

.kx-shop,
.kx-shop *{

    box-sizing:border-box;

}


.kx-shop button,
.kx-shop input,
.kx-shop select{

    font-family:inherit;

}


/* =========================================================
   BASE
========================================================= */

.kx-shop{

    width:100%;

    min-height:100vh;

    background:var(--kx-bg);

    color:#fff;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


/* =========================================================
   HEADER
========================================================= */

.kx-shop-top{

    min-height:76px;

    padding:14px 30px;

    display:grid;

    grid-template-columns:
        200px
        minmax(280px,520px)
        200px;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    border-bottom:
        1px solid var(--kx-border);

}

.kx-shop-searchbar{
    min-height:auto;
    grid-template-columns:minmax(280px,620px);
    justify-content:center;
    padding:16px 30px;
}

.kx-header-bag-trigger{
    position:relative;
    min-height:44px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid #2a2a2a;
    border-radius:10px;
    background:#0d0d0d;
    color:#fff;
    cursor:pointer;
}

.kx-header-bag-trigger svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
}

.kx-header-bag-trigger strong{
    min-width:20px;
    height:20px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--kx-green,#a6ff00);
    color:#050505;
    font-size:10px;
}


/* LOGO */

.kx-shop-logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

    font-weight:900;

    letter-spacing:1.4px;

}


.kx-shop-logo span{

    width:36px;
    height:36px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:9px;

    background:
        var(--kx-green);

    color:#050505;

    font-size:13px;

}


/* =========================================================
   SEARCH
========================================================= */

.kx-search-wrap{

    height:46px;

    padding:0 15px;

    display:flex;

    align-items:center;

    gap:10px;

    border:
        1px solid var(--kx-border);

    border-radius:10px;

    background:#0e0e0e;

    transition:.2s;

}


.kx-search-wrap:focus-within{

    border-color:#4b7000;

}


.kx-search-wrap svg{

    flex:none;

    width:18px;

    fill:none;

    stroke:#686d75;

    stroke-width:1.7;

}


.kx-search-wrap input{

    width:100%;

    border:0;

    outline:0;

    background:transparent;

    color:white;

    font-size:14px;

}


.kx-search-wrap input::placeholder{

    color:#62666d;

}


/* =========================================================
   BOLSA HEADER
========================================================= */

.kx-bag-btn{

    justify-self:end;

    height:44px;

    padding:0 15px;

    display:flex;

    align-items:center;

    gap:9px;

    border:
        1px solid var(--kx-border);

    border-radius:9px;

    background:#0d0d0d;

    color:#c3c6ca;

    cursor:pointer;

    transition:.2s;

}


.kx-bag-btn:hover{

    border-color:
        #496c00;

    color:white;

}


.kx-bag-btn svg{

    width:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

}


.kx-bag-btn strong{

    min-width:21px;

    height:21px;

    padding:0 5px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:100px;

    background:var(--kx-green);

    color:#050505;

    font-size:10px;

}


/* =========================================================
   LAYOUT
========================================================= */

.kx-shop-layout{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:40px 30px 80px;

    display:grid;

    grid-template-columns:
        220px
        minmax(0,1fr);

    gap:42px;

}


/* =========================================================
   FILTROS
========================================================= */

.kx-filter-title{

    margin-bottom:15px;

    color:#686d75;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

}


.kx-category-list{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.kx-category-side{

    width:100%;

    padding:10px 12px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:0;

    border-radius:8px;

    background:transparent;

    color:#858a92;

    text-align:left;

    cursor:pointer;

    transition:.2s;

}


.kx-category-side span:last-child{

    color:#52575d;

    font-size:11px;

}


.kx-category-side:hover{

    color:white;

    background:#101010;

}


.kx-category-side.active{

    color:var(--kx-green);

    background:#172200;

}


.kx-filter-block{

    margin-top:38px;

}


.kx-max-price{

    margin-bottom:17px;

    color:var(--kx-green);

    font-size:21px;

    font-weight:900;

}


/* RANGE */

#kxPriceRange{

    width:100%;

    accent-color:
        var(--kx-green);

}


.kx-range-values{

    margin-top:8px;

    display:flex;

    justify-content:space-between;

    color:#50555c;

    font-size:11px;

}


/* MARCAS */

.kx-brand-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.kx-brand-item{

    display:flex;

    align-items:center;

    gap:9px;

    color:#858a92;

    font-size:13px;

    cursor:pointer;

}


.kx-brand-item:hover{

    color:#fff;

}


.kx-brand-item input{

    width:16px;
    height:16px;

    accent-color:
        var(--kx-green);

}


/* =========================================================
   PRODUCTOS HEAD
========================================================= */

.kx-products-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:25px;

}


.kx-products-head h2{

    margin:0;

    color:white;

    font-size:26px;

    letter-spacing:-.7px;

}


.kx-products-head > div > span{

    display:block;

    margin-top:6px;

    color:#60656d;

    font-size:12px;

}


.kx-products-head select{

    min-width:200px;

    height:43px;

    padding:0 14px;

    border:
        1px solid var(--kx-border);

    border-radius:9px;

    outline:none;

    background:#101010;

    color:#b7bbc0;

}


/* =========================================================
   TABS
========================================================= */

.kx-category-tabs{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:
        26px 0
        29px;

}


.kx-category-tab{

    padding:9px 15px;

    border:
        1px solid var(--kx-border);

    border-radius:100px;

    background:#101010;

    color:#858a92;

    font-size:12px;

    cursor:pointer;

    transition:.2s;

}


.kx-category-tab:hover{

    color:#fff;

}


.kx-category-tab.active{

    border-color:
        var(--kx-green);

    background:
        var(--kx-green);

    color:#050505;

    font-weight:800;

}


/* =========================================================
   GRID
========================================================= */

.kx-product-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:18px;

}


/* =========================================================
   PRODUCTO
========================================================= */

.kx-product-card{

    overflow:hidden;

    display:flex;

    flex-direction:column;

    background:
        var(--kx-card);

    border:
        1px solid var(--kx-border);

    border-radius:16px;

    transition:
        transform .25s,
        border-color .25s,
        background .25s,
        box-shadow .25s;

}


.kx-product-card:hover{

    transform:
        translateY(-5px);

    border-color:#486900;

    background:
        var(--kx-card-hover);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.22);

}


/* IMAGE */

.kx-product-image{

    position:relative;

    height:210px;

    overflow:hidden;

    background:#161616;

}


.kx-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .35s;

}


.kx-product-card:hover
.kx-product-image img{

    transform:scale(1.045);

}


/* BADGE */

.kx-badges{

    position:absolute;

    z-index:2;

    top:12px;
    left:12px;

}


.kx-badge{

    display:inline-flex;

    padding:5px 8px;

    border-radius:6px;

    font-size:10px;

    font-weight:900;

}


.kx-badge.green{

    border:
        1px solid
        rgba(166,255,0,.5);

    background:
        rgba(166,255,0,.16);

    color:
        var(--kx-green);

}


.kx-badge.red{

    border:
        1px solid
        rgba(255,65,65,.5);

    background:
        rgba(255,65,65,.15);

    color:#ff5b5b;

}


.kx-badge.orange{

    border:
        1px solid
        rgba(255,160,20,.5);

    background:
        rgba(255,160,20,.15);

    color:#ffad32;

}


/* BODY */

.kx-product-body{

    flex:1;

    padding:18px;

    display:flex;

    flex-direction:column;

}


.kx-product-brand{

    color:
        var(--kx-green);

    font-size:11px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.3px;

}


.kx-product-title{

    margin:7px 0 8px;

    color:white;

    font-size:16px;

    line-height:1.35;

}


.kx-product-specs{

    margin:0;

    min-height:40px;

    color:#72777e;

    font-size:12px;

    line-height:1.55;

}


.kx-old-price{

    min-height:17px;

    margin-top:16px;

    color:#565b61;

    font-size:11px;

    text-decoration:line-through;

}


.kx-product-bottom{

    margin-top:3px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}


.kx-price{

    color:
        var(--kx-green);

    font-size:22px;

    font-weight:900;

    letter-spacing:-.5px;

}


.kx-add-btn{

    height:39px;

    padding:0 15px;

    flex:none;

    border:0;

    border-radius:9px;

    background:
        var(--kx-green);

    color:#050505;

    font-weight:850;

    cursor:pointer;

    transition:.2s;

}


.kx-add-btn:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(166,255,0,.14);

}


/* =========================================================
   LOADING / VACIO / ERROR
========================================================= */

.kx-loading,
.kx-no-products,
.kx-error{

    grid-column:1/-1;

    min-height:250px;

    padding:50px 20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

    border:
        1px dashed #282828;

    border-radius:14px;

    color:#777c83;

    text-align:center;

}


.kx-loader{

    width:28px;
    height:28px;

    border:
        3px solid #222;

    border-top-color:
        var(--kx-green);

    border-radius:50%;

    animation:
        kxSpin .7s
        linear infinite;

}


@keyframes kxSpin{

    to{
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   BOLSA
========================================================= */

.kx-bag-backdrop{

    position:fixed;

    inset:0;

    z-index:999998;

    background:
        rgba(0,0,0,.68);

    opacity:0;

    visibility:hidden;

    backdrop-filter:
        blur(3px);

    transition:.25s;

}


.kx-bag-backdrop.open{

    opacity:1;

    visibility:visible;

}


.kx-bag-panel{

    position:fixed;

    z-index:999999;

    top:0;
    right:0;

    width:
        min(440px,100%);

    height:100dvh;

    display:flex;

    flex-direction:column;

    background:#0b0b0b;

    border-left:
        1px solid #282828;

    transform:
        translateX(100%);

    transition:
        transform .3s ease;

}


.kx-bag-panel.open{

    transform:
        translateX(0);

}


.kx-bag-header{

    padding:24px;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    border-bottom:
        1px solid #242424;

}


.kx-small-label{

    color:
        var(--kx-green);

    font-size:10px;

    font-weight:900;

    letter-spacing:1.2px;

}


.kx-bag-header h3{

    margin:5px 0 0;

    color:white;

    font-size:22px;

}


.kx-bag-header button{

    width:38px;
    height:38px;

    border:
        1px solid #252525;

    border-radius:9px;

    background:#121212;

    color:white;

    font-size:24px;

    cursor:pointer;

}


/* ITEMS */

.kx-bag-items{

    flex:1;

    overflow-y:auto;

    padding:17px 20px;

}


.kx-bag-empty{

    padding:60px 20px;

    text-align:center;

    color:#6c7178;

    line-height:1.6;

}


.kx-bag-item{

    display:grid;

    grid-template-columns:
        70px
        minmax(0,1fr)
        auto;

    gap:12px;

    padding:14px 0;

    border-bottom:
        1px solid #222;

}


.kx-bag-item img{

    width:70px;
    height:70px;

    object-fit:cover;

    border-radius:9px;

    background:#151515;

}


.kx-bag-item h4{

    margin:0 0 5px;

    color:#fff;

    font-size:13px;

    line-height:1.4;

}


.kx-bag-item-price{

    color:
        var(--kx-green);

    font-size:12px;

    font-weight:800;

}


.kx-qty{

    width:max-content !important;

    margin-top:9px !important;

    display:inline-grid !important;

    grid-template-columns:30px 20px 30px !important;

    align-items:center !important;

    justify-content:start !important;

    gap:6px !important;

}


.kx-qty button{

    position:static !important;

    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:28px !important;
    min-height:28px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:
        1px solid #303030 !important;

    border-radius:6px !important;

    background:#151515 !important;

    color:#fff !important;

    font-size:15px !important;
    font-weight:500 !important;
    line-height:1 !important;

    cursor:pointer !important;

    inset:auto !important;
    transform:none !important;

}


.kx-qty button:hover{

    border-color:var(--kx-green) !important;

    background:#1a1a1a !important;

    color:var(--kx-green) !important;

}


.kx-qty span{

    width:20px !important;

    min-width:20px !important;

    margin:0 !important;

    padding:0 !important;

    color:white !important;

    text-align:center !important;

    font-size:12px !important;

    font-weight:700 !important;

    line-height:28px !important;

}


.kx-bag-item > div{

    min-width:0;

}


.kx-remove-item{

    border:0;

    background:transparent;

    color:#676c73;

    cursor:pointer;

    font-size:19px;

}


/* FOOTER */

.kx-bag-footer{

    padding:20px;

    border-top:
        1px solid #242424;

    background:#0d0d0d;

}


.kx-bag-total{

    margin-bottom:15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.kx-bag-total span{

    color:#7a7f86;

    font-size:12px;

}


.kx-bag-total strong{

    color:
        var(--kx-green);

    font-size:22px;

}


.kx-whatsapp-order{

    min-height:50px;

    padding:10px 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:9px;

    background:
        var(--kx-green);

    color:#050505 !important;

    text-decoration:none !important;

    font-size:13px;

    font-weight:900;

}


.kx-whatsapp-order.disabled{

    opacity:.35 !important;

    pointer-events:none !important;

    cursor:not-allowed !important;

}


.kx-clear-bag{

    width:100%;

    margin-top:12px;

    border:0;

    background:transparent;

    color:#686d74;

    cursor:pointer;

    font-size:11px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

    .kx-product-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }

}


@media(max-width:820px){

    .kx-shop-top{

        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;

        gap:12px;

        padding:
            12px 18px;

    }


    .kx-shop-logo{

        font-size:0;

    }


    .kx-shop-logo span{

        font-size:13px;

    }


    .kx-shop-layout{

        grid-template-columns:
            1fr;

        padding:
            28px 18px
            65px;

    }


    .kx-filters{

        display:none;

    }

}


@media(max-width:600px){

    .kx-shop-top{

        gap:8px;

    }


    .kx-bag-btn{

        padding:0 11px;

    }


    .kx-bag-btn span{

        display:none;

    }


    .kx-search-wrap{

        min-width:0;

    }


    .kx-products-head{

        flex-direction:column;

        align-items:stretch;

    }


    .kx-products-head select{

        width:100%;

    }


    .kx-product-grid{

        grid-template-columns:1fr;

    }


    .kx-product-image{

        height:240px;

    }


    .kx-products-head h2{

        font-size:23px;

    }


    .kx-price{

        font-size:20px;

    }

}

.kx-bag-footer{
    padding:24px 20px 28px !important;
    background:#0b0b0b !important;
    border-top:1px solid #252525 !important;
}

.kx-bag-total{
    margin-bottom:20px !important;
}

.kx-bag-total strong{
    color:#ffffff !important;
}

.kx-whatsapp-order{
    width:100% !important;
    min-height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    padding:14px 20px !important;
    border-radius:10px !important;
    background:#a6ff00 !important;
    color:#050505 !important;
    font-size:14px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:transform .2s ease, box-shadow .2s ease !important;
}

.kx-whatsapp-order:hover{
    color:#050505 !important;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(166,255,0,.20);
}

.kx-clear-bag{
    width:100% !important;
    margin-top:12px !important;
    padding:10px !important;
    color:#858a92 !important;
}

@media(max-width:767px){
    .kx-bag-panel{
        width:100% !important;
        max-width:420px !important;
    }
}




.kx-shop-top.kx-shop-searchbar{
    grid-template-columns:minmax(0,620px) !important;
    justify-content:center !important;
}

.kx-mobile-filter-toggle,
.kx-mobile-filter-close{
    display:none;
}

.kx-customer-fields{
    display:grid;
    gap:8px;
    margin:0 0 12px;
}

.kx-customer-fields input,
.kx-customer-fields textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--kx-border,#292929);
    border-radius:8px;
    outline:none;
    resize:vertical;
    background:#121212;
    color:var(--kx-white,#fff);
    font:inherit;
    font-size:12px;
}

.kx-status-label{
    display:inline-flex;
    margin-top:8px;
    padding:5px 8px;
    border:1px solid var(--kx-border);
    border-radius:999px;
    color:var(--kx-gray);
    font-size:10px;
    font-weight:800;
}

.kx-add-btn[disabled]{
    opacity:.45;
    cursor:not-allowed;
    transform:none!important;
}

@media(max-width:600px){
    .kx-shop-top.kx-shop-searchbar{
        padding:12px 18px !important;
    }
}

@media(max-width:820px){
    .kx-mobile-filter-toggle{
        width:calc(100% - 36px);
        margin:20px 18px 0;
        padding:12px 16px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid var(--kx-border);
        border-radius:9px;
        background:var(--kx-card);
        color:var(--kx-white);
        font-weight:800;
    }
    .kx-filters.open{
        position:fixed;
        z-index:1000000;
        inset:0 auto 0 0;
        width:min(340px,90vw);
        padding:62px 24px 30px;
        display:block!important;
        overflow-y:auto;
        background:var(--kx-bg);
        border-right:1px solid var(--kx-border);
        box-shadow:20px 0 50px rgba(0,0,0,.45);
    }
    .kx-filters.open .kx-mobile-filter-close{
        position:absolute;
        top:16px;
        right:16px;
        width:36px;
        height:36px;
        display:grid;
        place-items:center;
        border:1px solid var(--kx-border);
        border-radius:8px;
        background:var(--kx-card);
        color:var(--kx-white);
        font-size:22px;
    }
}