/* ============================================================
   VENTACTIVE
   PREMIUM ECOMMERCE HEADER
============================================================ */

:root{

    --vc-orange:#ff8a00;
    --vc-orange-dark:#f17400;

    --vc-blue:#174d78;
    --vc-blue-dark:#102f49;
    --vc-blue-soft:#edf5fb;

    --vc-ink:#111820;
    --vc-text:#42505c;
    --vc-muted:#7c8994;

    --vc-line:#e5e9ed;
    --vc-bg:#ffffff;
    --vc-soft:#f6f8fa;

    --vc-radius:18px;
    --vc-radius-lg:28px;

    --vc-shadow:
        0 20px 60px rgba(16,47,73,.12);

    --vc-header-height:82px;

}


/* ============================================================
   GLOBAL SAFETY
============================================================ */

.vcHeader,
.vcProductExplorer,
.vcMobileDrawer{

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    box-sizing:border-box;

}

.vcHeader *,
.vcProductExplorer *,
.vcMobileDrawer *{

    box-sizing:border-box;

}


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

.vcHeader{

    position:sticky;
    top:0;

    z-index:1000;

    width:100%;

    background:rgba(255,255,255,.92);

    border-bottom:
        1px solid rgba(17,24,32,.06);

    backdrop-filter:
        blur(20px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(160%);

    transition:
        box-shadow .3s ease,
        background .3s ease;

}


.vcHeader.is-scrolled{

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 8px 30px
        rgba(16,47,73,.08);

}


.vcHeaderInner{

    width:
        min(
            1500px,
            calc(100% - 48px)
        );

    height:
        var(--vc-header-height);

    margin:auto;

    display:flex;
    align-items:center;

    gap:30px;

}


/* ============================================================
   LOGO
============================================================ */

.vcLogo{

    display:flex;
    align-items:center;

    flex-shrink:0;

    text-decoration:none;

}


.vcLogo img{

    display:block;

    width:190px;
    max-height:55px;

    object-fit:contain;

}


/* ============================================================
   NAVIGATION
============================================================ */

.vcDesktopNav{

    display:flex;
    align-items:center;

    gap:4px;

    flex-shrink:0;

}


.vcNavLink{

    appearance:none;

    border:0;

    background:none;

    display:inline-flex;
    align-items:center;

    gap:7px;

    height:44px;

    padding:0 15px;

    color:
        var(--vc-ink);

    font-size:14px;
    font-weight:600;

    line-height:1;

    text-decoration:none;

    border-radius:12px;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}


.vcNavLink:hover{

    background:
        var(--vc-soft);

    color:
        var(--vc-blue);

}


.vcNavLink:active{

    transform:scale(.98);

}


.vcNavLink svg{

    width:17px;
    height:17px;

    transition:
        transform .25s ease;

}


.vcProductsTrigger.is-open{

    background:
        var(--vc-soft);

    color:
        var(--vc-blue);

}


.vcProductsTrigger.is-open svg{

    transform:rotate(180deg);

}


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

.vcHeaderSearch{

    flex:1;

    min-width:200px;

}


.vcSearchForm{

    position:relative;

    width:100%;
    height:48px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:#f4f6f8;

    border:
        1px solid transparent;

    border-radius:999px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.vcSearchForm:focus-within{

    background:#fff;

    border-color:
        rgba(23,77,120,.25);

    box-shadow:
        0 0 0 4px
        rgba(23,77,120,.07);

}


.vcSearchIcon{

    width:20px;
    height:20px;

    margin-left:18px;

    color:
        var(--vc-blue);

    flex-shrink:0;

}


.vcSearchInput{

    width:100%;
    min-width:0;

    height:100%;

    padding:0 15px;

    border:0;
    outline:0;

    background:transparent;

    color:
        var(--vc-ink);

    font-family:inherit;
    font-size:14px;

}


.vcSearchInput::placeholder{

    color:#929ca5;

}


.vcSearchSubmit{

    height:38px;

    margin-right:5px;

    padding:0 18px;

    border:0;

    border-radius:999px;

    background:
        var(--vc-blue);

    color:#fff;

    font-family:inherit;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.vcSearchSubmit:hover{

    background:
        var(--vc-blue-dark);

    box-shadow:
        0 8px 20px
        rgba(23,77,120,.15);

}


.vcSearchSubmit:active{

    transform:scale(.97);

}


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

.vcHeaderActions{

    display:flex;
    align-items:center;

    gap:6px;

    flex-shrink:0;

}


.vcHeaderAction{

    position:relative;

    width:46px;
    height:46px;

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

    color:
        var(--vc-blue);

    text-decoration:none;

    border-radius:50%;

    transition:
        background .2s ease,
        transform .2s ease;

}


.vcHeaderAction:hover{

    background:
        var(--vc-blue-soft);

    transform:
        translateY(-1px);

}


.vcHeaderAction svg{

    width:23px;
    height:23px;

}


.vcCartCount{

    position:absolute;

    top:0;
    right:-2px;

    min-width:20px;
    height:20px;

    padding:0 5px;

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

    border:
        2px solid #fff;

    border-radius:999px;

    background:
        var(--vc-orange);

    color:#fff;

    font-size:10px;
    font-weight:700;

}


/* ============================================================
   MOBILE MENU BUTTON
============================================================ */

.vcMobileMenuBtn{

    display:none;

    width:42px;
    height:42px;

    border:0;

    background:transparent;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    border-radius:12px;

    cursor:pointer;

}


.vcMobileMenuBtn:hover{

    background:
        var(--vc-soft);

}


.vcMobileMenuBtn span{

    width:21px;
    height:2px;

    background:
        var(--vc-ink);

    border-radius:10px;

}


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

.vcMobileSearch{

    display:none;

}


/* ============================================================
   EXPLORER BACKDROP
============================================================ */

.vcExplorerBackdrop{

    position:fixed;
    inset:0;

    z-index:1100;

    background:
        rgba(11,24,36,.36);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.vcExplorerBackdrop.is-visible{

    opacity:1;

    visibility:visible;

}


/* ============================================================
   PRODUCT EXPLORER
============================================================ */

.vcProductExplorer{

    position:fixed;

    top:92px;
    left:50%;

    z-index:1200;

    width:
        min(
            1500px,
            calc(100% - 48px)
        );

    /*
     * Dejamos siempre espacio entre
     * el menú y el borde inferior.
     */
    max-height:
        calc(100vh - 125px);

    transform:
        translateX(-50%)
        translateY(-18px)
        scale(.985);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .3s ease,
        transform .35s
            cubic-bezier(.2,.8,.2,1),
        visibility .3s ease;

}


.vcProductExplorer.is-open{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

}


.vcExplorerShell{

    overflow:hidden;

    max-height:
        calc(100vh - 125px);

    display:flex;
    flex-direction:column;

    background:#fff;

    border:
        1px solid
        rgba(17,24,32,.06);

    border-radius:30px;

    box-shadow:
        0 35px 100px
        rgba(8,31,48,.22);

}


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

.vcExplorerHeader{

    padding:
        28px
        32px
        18px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

}


.vcExplorerEyebrow{

    display:block;

    margin-bottom:4px;

    color:
        var(--vc-orange);

    font-size:11px;
    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.vcExplorerHeader h2{

    margin:0;

    color:
        var(--vc-ink);

    font-size:27px;
    font-weight:650;

    letter-spacing:-.035em;

}


.vcExplorerClose{

    width:42px;
    height:42px;

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

    flex-shrink:0;

    border:0;

    border-radius:50%;

    background:
        var(--vc-soft);

    color:
        var(--vc-ink);

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease;

}


.vcExplorerClose:hover{

    transform:
        rotate(90deg);

    background:#eceff2;

}


.vcExplorerClose svg{

    width:20px;
    height:20px;

}


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

.vcExplorerSearch{

    position:relative;

    height:58px;

    margin:
        0
        32px
        24px;

    display:flex;
    align-items:center;

    background:
        var(--vc-soft);

    border:
        1px solid transparent;

    border-radius:17px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.vcExplorerSearch:focus-within{

    background:#fff;

    border-color:
        rgba(23,77,120,.25);

    box-shadow:
        0 0 0 4px
        rgba(23,77,120,.07);

}


.vcExplorerSearch > svg{

    width:21px;
    height:21px;

    margin-left:19px;

    color:
        var(--vc-blue);

    flex-shrink:0;

}


.vcExplorerSearch input{

    flex:1;

    min-width:0;
    height:100%;

    padding:0 15px;

    border:0;
    outline:0;

    background:none;

    color:
        var(--vc-ink);

    font-family:inherit;
    font-size:15px;

}


.vcExplorerSearch input::placeholder{

    color:#8e99a3;

}


.vcSearchShortcut{

    width:27px;
    height:27px;

    margin-right:15px;

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

    flex-shrink:0;

    border:
        1px solid var(--vc-line);

    border-radius:7px;

    background:#fff;

    color:
        var(--vc-muted);

    font-size:12px;

}


/* ============================================================
   EXPLORER CONTENT
============================================================ */

.vcExplorerContent{

    min-height:0;

    /*
     * El contenido ocupa el espacio disponible
     * sin empujar el modal hasta abajo.
     */
    flex:1;

    display:grid;

    grid-template-columns:
        275px
        minmax(430px,1fr)
        365px;

    overflow:hidden;

    border-top:
        1px solid var(--vc-line);

}


/* ============================================================
   CATEGORIES
============================================================ */

.vcExplorerCategories{

    padding:
        24px
        18px;

    overflow:auto;

    background:#fafbfc;

    border-right:
        1px solid var(--vc-line);

}


.vcExplorerColumnTitle{

    margin:
        0
        12px
        13px;

    color:
        var(--vc-muted);

    font-size:11px;
    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;

}


.vcCategoryItem{

    width:100%;
    min-height:47px;

    padding:0 13px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    border:0;

    border-radius:12px;

    background:transparent;

    color:
        var(--vc-text);

    font-family:inherit;
    font-size:14px;
    font-weight:550;

    text-align:left;
    text-decoration:none;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.vcCategoryItem svg{

    width:17px;
    height:17px;

    flex-shrink:0;

    opacity:.5;

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.vcCategoryItem:hover{

    color:
        var(--vc-blue);

    background:#fff;

    transform:
        translateX(2px);

}


.vcCategoryItem.is-active{

    color:
        var(--vc-blue);

    background:#fff;

    box-shadow:
        0 6px 20px
        rgba(16,47,73,.07);

}


.vcCategoryItem.is-active svg{

    opacity:1;

    transform:
        translateX(2px);

}


.vcCategoryPromo{

    margin-top:12px;

    color:
        var(--vc-orange);

}


.vcPromoBadge{

    padding:
        4px
        7px;

    border-radius:6px;

    background:
        rgba(255,138,0,.12);

    color:
        var(--vc-orange);

    font-size:8px;
    font-weight:800;

    letter-spacing:.06em;

}


/* ============================================================
   SUBCATEGORIES
============================================================ */

.vcExplorerSubcategories{

    position:relative;

    padding:
        27px
        30px;

    overflow:auto;

}


.vcSubcategoryPanel{

    display:none;

    animation:
        vcPanelEnter
        .3s ease both;

}


.vcSubcategoryPanel.is-active{

    display:block;

}


@keyframes vcPanelEnter{

    from{

        opacity:0;

        transform:
            translateX(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


.vcSubcategoryHeading{

    margin-bottom:24px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

}


.vcSubcategoryHeading span{

    display:block;

    margin-bottom:3px;

    color:
        var(--vc-muted);

    font-size:12px;

}


.vcSubcategoryHeading h3{

    margin:0;

    color:
        var(--vc-ink);

    font-size:22px;
    font-weight:650;

    letter-spacing:-.025em;

}


.vcViewAll{

    display:inline-flex;
    align-items:center;

    gap:7px;

    flex-shrink:0;

    color:
        var(--vc-blue);

    font-size:12px;
    font-weight:650;

    text-decoration:none;

}


.vcViewAll svg{

    width:16px;
    height:16px;

    transition:
        transform .2s ease;

}


.vcViewAll:hover svg{

    transform:
        translateX(3px);

}


.vcSubcategoryGrid{

    display:grid;

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

    gap:10px;

}


.vcSubcategoryCard{

    min-height:63px;

    padding:
        10px
        12px;

    display:flex;
    align-items:center;

    gap:11px;

    border:
        1px solid var(--vc-line);

    border-radius:14px;

    color:
        var(--vc-text);

    font-size:13px;
    font-weight:550;

    text-decoration:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        color .2s ease,
        transform .2s ease;

}


.vcSubcategoryCard:hover{

    color:
        var(--vc-blue);

    border-color:
        rgba(23,77,120,.18);

    box-shadow:
        0 10px 25px
        rgba(16,47,73,.08);

    transform:
        translateY(-2px);

}


.vcSubcategoryIcon{

    width:38px;
    height:38px;

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

    flex-shrink:0;

    border-radius:11px;

    background:
        var(--vc-blue-soft);

    color:
        var(--vc-blue);

}


.vcSubcategoryIcon svg{

    width:21px;
    height:21px;

}


.vcSubcategoryArrow{

    width:15px;
    height:15px;

    margin-left:auto;

    flex-shrink:0;

    opacity:.3;

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.vcSubcategoryCard:hover
.vcSubcategoryArrow{

    opacity:1;

    transform:
        translateX(2px);

}


.vcEmptySubcategories{

    padding:30px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    border-radius:18px;

    background:
        var(--vc-soft);

}


.vcEmptySubcategories span{

    color:
        var(--vc-muted);

    font-size:13px;

}


.vcEmptySubcategories strong{

    margin:
        5px
        0
        20px;

    color:
        var(--vc-ink);

    font-size:22px;

}


.vcEmptySubcategories a{

    color:
        var(--vc-blue);

    font-size:13px;
    font-weight:700;

    text-decoration:none;

}


/* ============================================================
   PREMIUM PRODUCT PREVIEW
============================================================ */

.vcExplorerPreview{

    position:relative;

    min-width:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:
        linear-gradient(
            165deg,
            #f8fafc 0%,
            #eef3f7 100%
        );

    border-left:
        1px solid var(--vc-line);

}


/* ============================================================
   PREVIEW GLOW
============================================================ */

.vcPreviewGlow{

    position:absolute;

    width:320px;
    height:320px;

    top:-190px;
    right:-130px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(255,138,0,.18) 0%,
            rgba(255,138,0,0) 70%
        );

}


/* ============================================================
   PREVIEW IMAGE
============================================================ */

.vcPreviewImageWrap{

    position:relative;

    height:245px;

    margin:
        18px
        18px
        0;

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

    overflow:hidden;

    border:
        1px solid rgba(17,24,32,.04);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 12px 30px
        rgba(16,47,73,.05);

}


.vcPreviewImage{

    position:relative;

    z-index:1;

    width:100%;
    height:100%;

    padding:18px;

    object-fit:contain;

    opacity:0;

    transform:
        scale(.96)
        translateY(4px);

    transition:
        opacity .3s ease,
        transform .4s
            cubic-bezier(.2,.8,.2,1);

}


.vcPreviewImage.is-visible{

    opacity:1;

    transform:
        scale(1)
        translateY(0);

}


/* ============================================================
   PREVIEW BADGE
============================================================ */

.vcPreviewBadge{

    position:absolute;

    top:14px;
    left:14px;

    z-index:3;

    display:flex;
    align-items:center;

    gap:6px;

    padding:
        6px
        10px;

    border:
        1px solid
        rgba(17,24,32,.06);

    border-radius:999px;

    background:
        rgba(255,255,255,.9);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    color:
        var(--vc-text);

    font-size:9px;
    font-weight:750;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.vcPreviewBadge span{

    width:6px;
    height:6px;

    border-radius:50%;

    background:
        var(--vc-orange);

    box-shadow:
        0 0 0 4px
        rgba(255,138,0,.11);

}


/* ============================================================
   PREVIEW LOADER
============================================================ */

.vcPreviewImageLoader{

    position:absolute;

    inset:0;

    z-index:2;

    opacity:0;

    pointer-events:none;

    background:
        linear-gradient(
            100deg,
            transparent 20%,
            rgba(0,0,0,.035) 40%,
            transparent 60%
        );

    background-size:
        200% 100%;

}


.vcPreviewImageLoader.is-loading{

    opacity:1;

    animation:
        vcPreviewLoader
        1.1s linear infinite;

}


@keyframes vcPreviewLoader{

    from{

        background-position:
            200% 0;

    }

    to{

        background-position:
            -200% 0;

    }

}


/* ============================================================
   PREVIEW CONTENT
============================================================ */

.vcPreviewContent{

    position:relative;

    flex:1;

    padding:
        22px
        24px
        24px;

    display:flex;
    flex-direction:column;

    transition:
        opacity .18s ease,
        transform .25s ease;

}


.vcPreviewContent.is-changing{

    opacity:0;

    transform:
        translateY(5px);

}


/* ============================================================
   PREVIEW TEXT
============================================================ */

.vcPreviewEyebrow{

    display:block;

    margin-bottom:8px;

    color:
        var(--vc-blue);

    font-size:10px;
    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.vcPreviewTitle{

    display:-webkit-box;

    margin:0;

    overflow:hidden;

    color:
        var(--vc-ink);

    font-size:18px;
    font-weight:650;

    line-height:1.3;

    letter-spacing:-.025em;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

}


/* ============================================================
   PREVIEW PRICE
============================================================ */

.vcPreviewPrice{

    margin-top:18px;

    color:
        var(--vc-ink);

    font-size:24px;
    font-weight:720;

    letter-spacing:-.04em;

}


/* ============================================================
   PREVIEW SHIPPING
============================================================ */

.vcPreviewShipping{

    min-height:22px;

    margin-top:5px;

    color:#178450;

    font-size:11px;
    font-weight:650;

}


/* ============================================================
   PREVIEW ACTIONS
============================================================ */

.vcPreviewActions{

    margin-top:auto;

    padding-top:20px;

    display:grid;

    grid-template-columns:
        1fr
        auto;

    gap:9px;

}


.vcPreviewCart,
.vcPreviewView{

    height:44px;

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

    gap:7px;

    border-radius:12px;

    font-family:inherit;

    font-size:11px;
    font-weight:700;

    text-decoration:none;

    cursor:pointer;

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

}


.vcPreviewCart{

    border:0;

    background:
        var(--vc-orange);

    color:#fff;

}


.vcPreviewCart:hover{

    transform:
        translateY(-2px);

    background:
        var(--vc-orange-dark);

    box-shadow:
        0 10px 25px
        rgba(255,138,0,.24);

}


.vcPreviewCart:active{

    transform:
        translateY(0)
        scale(.98);

}


.vcPreviewCart svg{

    width:17px;
    height:17px;

    flex-shrink:0;

}


.vcPreviewView{

    padding:
        0
        13px;

    border:
        1px solid
        rgba(23,77,120,.13);

    background:#fff;

    color:
        var(--vc-blue);

}


.vcPreviewView:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(23,77,120,.22);

    box-shadow:
        0 10px 24px
        rgba(16,47,73,.08);

}


.vcPreviewView svg{

    width:14px;
    height:14px;

    flex-shrink:0;

    transition:
        transform .2s ease;

}


.vcPreviewView:hover svg{

    transform:
        translateX(2px);

}


/* ============================================================
   PREVIEW EMPTY STATE
============================================================ */

.vcPreviewEmpty{

    position:absolute;

    inset:0;

    padding:30px;

    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    background:
        linear-gradient(
            165deg,
            #f8fafc 0%,
            #eef3f7 100%
        );

}


.vcPreviewEmpty.is-visible{

    display:flex;

}


.vcPreviewEmptyIcon{

    width:54px;
    height:54px;

    margin-bottom:17px;

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

    border-radius:17px;

    background:#fff;

    color:
        var(--vc-blue);

    box-shadow:
        0 12px 30px
        rgba(16,47,73,.08);

}


.vcPreviewEmptyIcon svg{

    width:25px;
    height:25px;

}


.vcPreviewEmpty
> span:not(
    .vcPreviewEmptyIcon
){

    color:
        var(--vc-muted);

    font-size:11px;

}


.vcPreviewEmpty strong{

    margin-top:4px;

    color:
        var(--vc-ink);

    font-size:17px;

}
/* ============================================================
   EXPLORER LIVE SEARCH RESULTS
============================================================ */

.vcExplorerSearchResults{

    display:none;

}


.vcExplorerSearchResults.is-visible{

    display:block;

}


.vcExplorerSubcategories.is-searching
.vcSubcategoryPanel{

    display:none !important;

}


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

.vcSearchResultsHeader{

    margin-bottom:18px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

}


.vcSearchResultsHeader span{

    display:block;

    margin-bottom:4px;

    color:var(--vc-muted);

    font-size:11px;

}


.vcSearchResultsHeader h3{

    margin:0;

    color:var(--vc-ink);

    font-size:21px;
    font-weight:650;

    letter-spacing:-.025em;

}


.vcSearchResultsCount{

    color:var(--vc-muted);

    font-size:11px;

}


/* ============================================================
   RESULT LIST
============================================================ */

.vcSearchResultsList{

    display:grid;

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

    gap:10px;

}


.vcSearchResult{

    min-width:0;

    padding:10px;

    display:flex;
    align-items:center;

    gap:12px;

    border:
        1px solid var(--vc-line);

    border-radius:15px;

    background:#fff;

    color:inherit;

    text-decoration:none;

    cursor:pointer;

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

}


.vcSearchResult:hover,
.vcSearchResult.is-active{

    transform:
        translateY(-2px);

    border-color:
        rgba(23,77,120,.18);

    box-shadow:
        0 10px 25px
        rgba(16,47,73,.08);

    background:#fff;

}


.vcSearchResultImage{

    width:64px;
    height:64px;

    flex-shrink:0;

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

    overflow:hidden;

    border-radius:12px;

    background:var(--vc-soft);

}


.vcSearchResultImage img{

    width:100%;
    height:100%;

    padding:5px;

    object-fit:contain;

}


.vcSearchResultInfo{

    min-width:0;

    flex:1;

}


.vcSearchResultTitle{

    display:-webkit-box;

    overflow:hidden;

    color:var(--vc-ink);

    font-size:12px;
    font-weight:650;

    line-height:1.35;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

}


.vcSearchResultPrice{

    margin-top:5px;

    color:var(--vc-blue);

    font-size:13px;
    font-weight:750;

}


.vcSearchResultShipping{

    margin-top:2px;

    color:#178450;

    font-size:9px;
    font-weight:650;

}


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

.vcSearchLoading{

    min-height:240px;

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

    flex-direction:column;

    gap:13px;

    color:var(--vc-muted);

    font-size:12px;

}


.vcSearchLoadingSpinner{

    width:28px;
    height:28px;

    border:
        3px solid
        rgba(23,77,120,.12);

    border-top-color:
        var(--vc-blue);

    border-radius:50%;

    animation:
        vcSearchSpinner
        .7s linear infinite;

}


@keyframes vcSearchSpinner{

    to{
        transform:rotate(360deg);
    }

}


/* ============================================================
   NO RESULTS
============================================================ */

.vcSearchNoResults{

    min-height:250px;

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

    flex-direction:column;

    text-align:center;

}


.vcSearchNoResultsIcon{

    width:58px;
    height:58px;

    margin-bottom:15px;

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

    border-radius:18px;

    background:var(--vc-blue-soft);

    color:var(--vc-blue);

}


.vcSearchNoResultsIcon svg{

    width:26px;
    height:26px;

}


.vcSearchNoResults strong{

    color:var(--vc-ink);

    font-size:16px;

}


.vcSearchNoResults span{

    max-width:280px;

    margin-top:5px;

    color:var(--vc-muted);

    font-size:11px;

    line-height:1.5;

}


@media(max-width:1180px){

    .vcSearchResultsList{

        grid-template-columns:1fr;

    }

}

/* ============================================================
   MOBILE BACKDROP
============================================================ */

.vcMobileBackdrop{

    position:fixed;
    inset:0;

    z-index:2000;

    background:
        rgba(10,21,30,.45);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.vcMobileBackdrop.is-visible{

    opacity:1;

    visibility:visible;

}


/* ============================================================
   MOBILE DRAWER
============================================================ */

.vcMobileDrawer{

    position:fixed;

    top:0;
    left:0;
    bottom:0;

    z-index:2100;

    width:
        min(
            420px,
            92vw
        );

    background:#fff;

    transform:
        translateX(-105%);

    box-shadow:
        30px 0 80px
        rgba(0,0,0,.2);

    transition:
        transform .4s
        cubic-bezier(.2,.8,.2,1);

}


.vcMobileDrawer.is-open{

    transform:
        translateX(0);

}


.vcMobileDrawerHeader{

    height:75px;

    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid var(--vc-line);

}


.vcMobileDrawerLogo{

    display:flex;
    align-items:center;

    text-decoration:none;

}


.vcMobileDrawerLogo img{

    width:155px;

    display:block;

}


.vcMobileDrawerClose{

    width:40px;
    height:40px;

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

    border:0;

    background:
        var(--vc-soft);

    border-radius:50%;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease;

}


.vcMobileDrawerClose:hover{

    background:#eceff2;

    transform:
        rotate(90deg);

}


.vcMobileDrawerClose svg{

    width:19px;
    height:19px;

}


.vcMobileDrawerBody{

    height:
        calc(100% - 75px);

    padding:
        24px
        20px
        40px;

    overflow-y:auto;

}


.vcMobileLabel{

    margin-bottom:10px;

    color:
        var(--vc-muted);

    font-size:10px;
    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.vcMobileCategoryTrigger,
.vcMobileCategoryDirect,
.vcMobileMainLink{

    width:100%;

    min-height:52px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;

    background:transparent;

    color:
        var(--vc-ink);

    font-family:inherit;
    font-size:15px;
    font-weight:600;

    text-align:left;
    text-decoration:none;

    cursor:pointer;

}


.vcMobileCategoryTrigger svg{

    width:18px;
    height:18px;

    transition:
        transform .25s ease;

}


.vcMobileCategory.is-open
.vcMobileCategoryTrigger svg{

    transform:
        rotate(180deg);

}


.vcMobileSubcategories{

    display:none;

    padding:
        0
        0
        10px
        15px;

}


.vcMobileCategory.is-open
.vcMobileSubcategories{

    display:block;

}


.vcMobileSubcategory{

    min-height:41px;

    display:flex;
    align-items:center;

    color:
        var(--vc-text);

    font-size:13px;

    text-decoration:none;

}


.vcMobileSubcategory:hover{

    color:
        var(--vc-blue);

}


.vcMobileViewAll{

    color:
        var(--vc-blue);

    font-weight:700;

}


.vcMobileDivider{

    height:1px;

    margin:
        15px
        0;

    background:
        var(--vc-line);

}


.vcMobileCartLink{

    min-height:55px;

    margin-top:15px;

    padding:
        0
        18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-radius:14px;

    background:
        var(--vc-blue);

    color:#fff;

    font-size:14px;
    font-weight:700;

    text-decoration:none;

}


.vcMobileCartLink span:last-child{

    min-width:26px;
    height:26px;

    padding:
        0
        7px;

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

    border-radius:999px;

    background:
        var(--vc-orange);

    font-size:11px;

}


/* ============================================================
   SCROLLBARS
============================================================ */

.vcExplorerCategories,
.vcExplorerSubcategories,
.vcMobileDrawerBody{

    scrollbar-width:thin;

    scrollbar-color:
        rgba(23,77,120,.22)
        transparent;

}


.vcExplorerCategories::-webkit-scrollbar,
.vcExplorerSubcategories::-webkit-scrollbar,
.vcMobileDrawerBody::-webkit-scrollbar{

    width:7px;

}


.vcExplorerCategories::-webkit-scrollbar-track,
.vcExplorerSubcategories::-webkit-scrollbar-track,
.vcMobileDrawerBody::-webkit-scrollbar-track{

    background:transparent;

}


.vcExplorerCategories::-webkit-scrollbar-thumb,
.vcExplorerSubcategories::-webkit-scrollbar-thumb,
.vcMobileDrawerBody::-webkit-scrollbar-thumb{

    background:
        rgba(23,77,120,.18);

    border-radius:999px;

}


/* ============================================================
   RESPONSIVE - 1350
============================================================ */

@media(max-width:1350px){

    .vcHeaderInner{

        gap:20px;

    }


    .vcLogo img{

        width:175px;

    }


    .vcNavLink{

        padding:
            0
            11px;

    }


    .vcExplorerContent{

        grid-template-columns:
            255px
            minmax(390px,1fr)
            340px;

    }

}


/* ============================================================
   RESPONSIVE - 1180
============================================================ */

@media(max-width:1180px){

    .vcDesktopNav{

        display:none;

    }


    .vcMobileMenuBtn{

        display:flex;

    }


    .vcExplorerContent{

        grid-template-columns:
            235px
            1fr
            310px;

    }


    .vcExplorerSubcategories{

        padding:
            24px
            22px;

    }


    .vcSubcategoryGrid{

        grid-template-columns:
            1fr;

    }


    .vcPreviewImageWrap{

        height:220px;

    }

}


/* ============================================================
   RESPONSIVE - TABLET / MOBILE
============================================================ */

@media(max-width:900px){

    :root{

        --vc-header-height:70px;

    }


    .vcHeaderInner{

        width:
            calc(100% - 30px);

        gap:10px;

    }


    .vcLogo img{

        width:150px;

    }


    .vcHeaderSearch{

        display:none;

    }


    .vcHeaderActions{

        margin-left:auto;

    }


    .vcHeaderAction:first-child{

        display:none;

    }


    .vcMobileSearch{

        display:block;

        padding:
            0
            15px
            12px;

    }


    .vcMobileSearch
    .vcSearchForm{

        height:44px;

    }


    .vcProductExplorer,
    .vcExplorerBackdrop{

        display:none !important;

    }

}


/* ============================================================
   RESPONSIVE - SMALL MOBILE
============================================================ */

@media(max-width:500px){

    .vcHeaderInner{

        width:
            calc(100% - 20px);

    }


    .vcLogo img{

        width:138px;

    }


    .vcMobileMenuBtn{

        width:38px;
        height:38px;

    }


    .vcHeaderAction{

        width:40px;
        height:40px;

    }


    .vcHeaderAction svg{

        width:21px;
        height:21px;

    }


    .vcMobileSearch{

        padding-left:10px;
        padding-right:10px;

    }


    .vcMobileDrawerBody{

        padding:
            20px
            16px
            32px;

    }

}


/* ============================================================
   BODY LOCK
============================================================ */

body.vcMenuOpen{

    overflow:hidden;

}