/* ============================================================
   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:88px;

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

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

.vcHeader,
.vcProductExplorer,
.vcMobileDrawer,
.vcCommerceDrawer{

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

    box-sizing:border-box;

}


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

    box-sizing:border-box;

}


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

.vcHeader{

    position:sticky;
    top:0;

    z-index:1000;

    width:100%;

    padding:10px 0;

    background:
        linear-gradient(
            180deg,
            rgba(246,249,251,.96) 0%,
            rgba(255,255,255,.86) 100%
        );

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

    backdrop-filter:
        blur(24px)
        saturate(170%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(170%);

    transition:
        padding .3s ease,
        background .3s ease;

}


.vcHeader.is-scrolled{

    background:
        rgba(248,250,252,.94);

}


.vcHeaderInner{

    position:relative;

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

    height:68px;

    margin:auto;

    padding:
        0
        14px
        0
        20px;

    display:flex;
    align-items:center;

    gap:24px;

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

    border:
        1px solid
        rgba(16,47,73,.075);

    border-radius:22px;

    box-shadow:
        0 8px 35px
        rgba(16,47,73,.065),
        0 1px 2px
        rgba(16,47,73,.03);

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

}


.vcHeader.is-scrolled
.vcHeaderInner{

    border-color:
        rgba(16,47,73,.1);

    box-shadow:
        0 15px 45px
        rgba(16,47,73,.11),
        0 1px 2px
        rgba(16,47,73,.04);

}


/* ============================================================
   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:46px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #f4f6f8,
            #f7f8f9
        );

    border:
        1px solid
        rgba(16,47,73,.04);

    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:4px;

    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:7px;

    flex-shrink:0;

}


.vcHeaderAction{

    appearance:none;

    position:relative;

    width:44px;
    height:44px;

    padding:0;

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

    flex-shrink:0;

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

    outline:0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafb 100%
        );

    color:
        var(--vc-blue);

    border-radius:14px;

    cursor:pointer;

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

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

}


.vcHeaderAction:hover{

    transform:
        translateY(-2px);

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

    background:#fff;

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

}


.vcHeaderAction.is-active{

    color:#fff;

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

    background:
        var(--vc-blue);

    box-shadow:
        0 10px 25px
        rgba(23,77,120,.2);

}


.vcHeaderAction svg{

    width:21px;
    height:21px;

}


.vcAccountStatus{

    position:absolute;

    right:5px;
    bottom:5px;

    width:9px;
    height:9px;

    border:
        2px solid #fff;

    border-radius:50%;

    background:#22a56a;

}


.vcCartCount{

    position:absolute;

    top:-5px;
    right:-5px;

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

    padding:
        0
        5px;

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

    border:
        2px solid #fff;

    border-radius:999px;

    background:
        var(--vc-orange);

    color:#fff;

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

    box-shadow:
        0 5px 12px
        rgba(255,138,0,.25);

}


.vcCartCount.is-visible{

    display:flex;

}


/* ============================================================
   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:98px;
    left:50%;

    z-index:1200;

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

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

    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 - 130px);

    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;

    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;

}


/* ============================================================
   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;

}


/* ============================================================
   COMMERCE BACKDROP
============================================================ */

.vcCommerceBackdrop{

    position:fixed;
    inset:0;

    z-index:3000;

    background:
        rgba(9,20,29,.38);

    backdrop-filter:
        blur(7px);

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

    opacity:0;
    visibility:hidden;

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

}


.vcCommerceBackdrop.is-visible{

    opacity:1;

    visibility:visible;

}


/* ============================================================
   COMMERCE DRAWER
============================================================ */

.vcCommerceDrawer{

    position:fixed;

    top:12px;
    right:12px;
    bottom:12px;

    z-index:3100;

    width:
        min(
            440px,
            calc(100vw - 32px)
        );

    display:flex;
    flex-direction:column;

    overflow:hidden;

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

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

    border-radius:30px;

    box-shadow:
        -25px 25px 80px
        rgba(7,26,40,.22);

    transform:
        translateX(
            calc(100% + 40px)
        );

    opacity:.7;

    visibility:hidden;

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

}


.vcCommerceDrawer.is-open{

    transform:
        translateX(0);

    opacity:1;

    visibility:visible;

}


/* ============================================================
   COMMERCE GLOW
============================================================ */

.vcCommerceDrawerGlow{

    position:absolute;

    z-index:0;

    top:-180px;
    right:-130px;

    width:390px;
    height:390px;

    border-radius:50%;

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

    pointer-events:none;

}


.vcCommerceDrawerGlowBlue{

    background:
        radial-gradient(
            circle,
            rgba(23,77,120,.18) 0%,
            rgba(23,77,120,0) 70%
        );

}


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

.vcCommerceDrawerHeader{

    position:relative;

    z-index:1;

    min-height:94px;

    padding:
        25px
        25px
        18px;

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

    gap:20px;

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

}


.vcCommerceEyebrow{

    display:block;

    margin-bottom:4px;

    color:
        var(--vc-orange);

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

    letter-spacing:.13em;

    text-transform:uppercase;

}


.vcCommerceDrawerHeader h2{

    margin:0;

    color:
        var(--vc-ink);

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

    letter-spacing:-.035em;

}


.vcCommerceDrawerClose{

    width:40px;
    height:40px;

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

    flex-shrink:0;

    border:0;

    border-radius:50%;

    background:
        rgba(244,246,248,.9);

    color:
        var(--vc-ink);

    cursor:pointer;

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

}


.vcCommerceDrawerClose:hover{

    transform:
        rotate(90deg);

    background:#edf0f2;

}


.vcCommerceDrawerClose svg{

    width:19px;
    height:19px;

}


/* ============================================================
   COMMERCE BODY
============================================================ */

.vcCommerceDrawerBody{

    position:relative;

    z-index:1;

    flex:1;

    min-height:0;

    padding:22px;

    overflow-y:auto;

}


/* ============================================================
   EMPTY CART
============================================================ */

.vcCartEmpty{

    min-height:100%;

    padding:
        50px
        25px;

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

    text-align:center;

}


.vcCartEmptyIcon{

    width:72px;
    height:72px;

    margin-bottom:22px;

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

    border-radius:23px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #eef4f8
        );

    color:
        var(--vc-blue);

    box-shadow:
        0 15px 40px
        rgba(16,47,73,.1);

}


.vcCartEmptyIcon svg{

    width:30px;
    height:30px;

}


.vcCartEmpty > span{

    color:
        var(--vc-muted);

    font-size:11px;

}


.vcCartEmpty strong{

    margin-top:5px;

    color:
        var(--vc-ink);

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

    letter-spacing:-.03em;

}


.vcCartEmpty p{

    max-width:290px;

    margin:
        12px
        0
        0;

    color:
        var(--vc-muted);

    font-size:12px;

    line-height:1.65;

}


/* ============================================================
   CART STATUS
============================================================ */

.vcCartWaiting{

    padding:16px;

    display:flex;
    align-items:center;

    gap:12px;

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

    border-radius:16px;

    background:
        var(--vc-soft);

}


.vcCartWaitingDot{

    width:9px;
    height:9px;

    flex-shrink:0;

    border-radius:50%;

    background:
        var(--vc-orange);

    box-shadow:
        0 0 0 5px
        rgba(255,138,0,.1);

}


.vcCartWaiting strong,
.vcCartWaiting span{

    display:block;

}


.vcCartWaiting strong{

    color:
        var(--vc-ink);

    font-size:13px;

}


.vcCartWaiting div span{

    margin-top:2px;

    color:
        var(--vc-muted);

    font-size:10px;

}


.vcCartLoadingArea{

    margin-top:15px;

    padding:25px;

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

    border-radius:16px;

    color:
        var(--vc-muted);

    font-size:11px;

    text-align:center;

}


/* ============================================================
   CART FOOTER
============================================================ */

.vcCartDrawerFooter{

    position:relative;

    z-index:1;

    padding:
        18px
        22px
        22px;

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

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

}


.vcCartDrawerSummary{

    margin-bottom:15px;

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

}


.vcCartDrawerSummary span{

    color:
        var(--vc-muted);

    font-size:11px;

}


.vcCartDrawerSummary strong{

    color:
        var(--vc-ink);

    font-size:14px;

}


.vcCartDrawerCheckout{

    width:100%;
    height:52px;

    padding:
        0
        18px;

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

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            var(--vc-blue),
            var(--vc-blue-dark)
        );

    color:#fff;

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

    text-decoration:none;

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

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

}


.vcCartDrawerCheckout:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 34px
        rgba(23,77,120,.24);

}


.vcCartDrawerCheckout svg{

    width:18px;
    height:18px;

}


.vcCartContinue{

    width:100%;

    margin-top:12px;

    padding:5px;

    border:0;

    background:transparent;

    color:
        var(--vc-muted);

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

    cursor:pointer;

}


/* ============================================================
   ACCOUNT WELCOME
============================================================ */

.vcAccountWelcome{

    min-height:100%;

    padding:
        35px
        12px;

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

}


.vcAccountWelcomeIcon{

    width:65px;
    height:65px;

    margin-bottom:25px;

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

    border-radius:21px;

    background:
        linear-gradient(
            145deg,
            var(--vc-blue),
            var(--vc-blue-dark)
        );

    color:#fff;

    box-shadow:
        0 18px 40px
        rgba(23,77,120,.2);

}


.vcAccountWelcomeIcon svg{

    width:28px;
    height:28px;

}


.vcAccountWelcome > span{

    color:
        var(--vc-muted);

    font-size:11px;

}


.vcAccountWelcome h3{

    margin:
        6px
        0
        12px;

    color:
        var(--vc-ink);

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

    line-height:1.15;

    letter-spacing:-.04em;

}


.vcAccountWelcome h3 strong{

    display:block;

    color:
        var(--vc-blue);

    font-weight:700;

}


.vcAccountWelcome p{

    max-width:330px;

    margin:0;

    color:
        var(--vc-muted);

    font-size:12px;

    line-height:1.65;

}


.vcAccountPrimary{

    width:100%;
    height:52px;

    margin-top:28px;

    padding:
        0
        18px;

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

    border-radius:15px;

    background:
        var(--vc-blue);

    color:#fff;

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

    text-decoration:none;

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

}


.vcAccountPrimary:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(23,77,120,.2);

}


.vcAccountPrimary svg{

    width:18px;
    height:18px;

}


/* ============================================================
   LOGGED ACCOUNT
============================================================ */

.vcAccountIdentity{

    padding:18px;

    display:flex;
    align-items:center;

    gap:14px;

    border-radius:19px;

    background:
        linear-gradient(
            135deg,
            var(--vc-blue),
            var(--vc-blue-dark)
        );

    color:#fff;

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

}


.vcAccountAvatar{

    width:48px;
    height:48px;

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

    flex-shrink:0;

    border-radius:15px;

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

}


.vcAccountAvatar svg{

    width:23px;
    height:23px;

}


.vcAccountIdentity span,
.vcAccountIdentity strong{

    display:block;

}


.vcAccountIdentity span{

    margin-bottom:3px;

    opacity:.68;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.08em;

}


.vcAccountIdentity strong{

    font-size:15px;

}


.vcAccountNavigation{

    margin-top:20px;

    display:flex;
    flex-direction:column;

    gap:8px;

}


.vcAccountNavigation > a{

    min-height:68px;

    padding:
        10px
        12px;

    display:flex;
    align-items:center;

    gap:12px;

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

    border-radius:16px;

    color:inherit;

    text-decoration:none;

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

}


.vcAccountNavigation > a:hover{

    transform:
        translateX(3px);

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

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

}


.vcAccountNavIcon{

    width:42px;
    height:42px;

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

    flex-shrink:0;

    border-radius:13px;

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

    color:
        var(--vc-blue);

}


.vcAccountNavIcon svg{

    width:20px;
    height:20px;

}


.vcAccountNavText{

    min-width:0;

    flex:1;

}


.vcAccountNavText strong,
.vcAccountNavText small{

    display:block;

}


.vcAccountNavText strong{

    color:
        var(--vc-ink);

    font-size:12px;

}


.vcAccountNavText small{

    margin-top:3px;

    color:
        var(--vc-muted);

    font-size:9px;

}


.vcAccountNavArrow{

    width:16px;
    height:16px;

    color:
        var(--vc-muted);

}


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

.vcExplorerCategories,
.vcExplorerSubcategories,
.vcMobileDrawerBody,
.vcCommerceDrawerBody{

    scrollbar-width:thin;

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

}


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

    width:7px;

}


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

    background:transparent;

}


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

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

    border-radius:999px;

}


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

@media(max-width:1350px){

    .vcHeaderInner{

        gap:18px;

    }


    .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;

    }


    .vcSearchResultsList{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:900px){

    :root{

        --vc-header-height:70px;

    }


    .vcHeader{

        padding:
            7px
            0
            0;

    }


    .vcHeaderInner{

        width:
            calc(100% - 20px);

        height:62px;

        padding:
            0
            9px
            0
            12px;

        gap:8px;

        border-radius:18px;

    }


    .vcLogo img{

        width:145px;

    }


    .vcHeaderSearch{

        display:none;

    }


    .vcHeaderActions{

        margin-left:auto;

        gap:5px;

    }


    /*
    |--------------------------------------------------------------------------
    | IMPORTANTE:
    | NO ocultamos el primer action.
    | Así el perfil sigue visible en responsive.
    |--------------------------------------------------------------------------
    */


    .vcMobileSearch{

        display:block;

        padding:
            8px
            10px
            10px;

    }


    .vcMobileSearch
    .vcSearchForm{

        height:44px;

    }


    .vcProductExplorer,
    .vcExplorerBackdrop{

        display:none !important;

    }


    .vcCommerceDrawer{

        top:8px;
        right:8px;
        bottom:8px;

        width:
            min(
                420px,
                calc(100vw - 16px)
            );

        border-radius:25px;

    }


    .vcCommerceDrawerHeader{

        padding:
            22px
            20px
            16px;

    }


    .vcCommerceDrawerBody{

        padding:18px;

    }


    .vcCartDrawerFooter{

        padding:
            16px
            18px
            18px;

    }

}


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

@media(max-width:500px){

    .vcHeaderInner{

        width:
            calc(100% - 12px);

        padding:
            0
            7px
            0
            8px;

        gap:4px;

    }


    .vcLogo{

        min-width:0;

    }


    .vcLogo img{

        width:128px;

    }


    .vcMobileMenuBtn{

        width:36px;
        height:38px;

        flex-shrink:0;

    }


    .vcMobileMenuBtn span{

        width:19px;

    }


    .vcHeaderActions{

        gap:3px;

    }


    .vcHeaderAction{

        width:38px;
        height:38px;

        border-radius:12px;

    }


    .vcHeaderAction svg{

        width:19px;
        height:19px;

    }


    .vcCartCount{

        top:-4px;
        right:-4px;

        min-width:18px;
        height:18px;

        font-size:8px;

    }


    .vcMobileSearch{

        padding:
            7px
            6px
            8px;

    }


    .vcMobileDrawerBody{

        padding:
            20px
            16px
            32px;

    }


    .vcCommerceDrawer{

        width:
            calc(100vw - 12px);

        top:6px;
        right:6px;
        bottom:6px;

        border-radius:22px;

    }


    .vcCommerceDrawerHeader h2{

        font-size:22px;

    }


    .vcAccountWelcome{

        padding:
            30px
            5px;

    }


    .vcAccountWelcome h3{

        font-size:24px;

    }

}


/* ============================================================
   EXTRA SMALL
============================================================ */

@media(max-width:380px){

    .vcLogo img{

        width:112px;

    }


    .vcHeaderAction{

        width:35px;
        height:35px;

    }


    .vcMobileMenuBtn{

        width:34px;

    }

}


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

body.vcMenuOpen,
body.vcCommerceOpen{

    overflow:hidden;

}

/* ============================================================
   ACCOUNT LOGIN
============================================================ */

.vcAccountLogin{

    min-height:100%;

    display:flex;
    flex-direction:column;

}


/* ============================================================
   INTRO
============================================================ */

.vcAccountLoginIntro{

    padding:
        8px
        4px
        25px;

}


.vcAccountLoginIntro
.vcAccountWelcomeIcon{

    width:58px;
    height:58px;

    margin-bottom:21px;

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

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            var(--vc-blue),
            var(--vc-blue-dark)
        );

    color:#fff;

    box-shadow:
        0 16px 34px
        rgba(23,77,120,.18);

}


.vcAccountLoginIntro
.vcAccountWelcomeIcon svg{

    width:26px;
    height:26px;

}


.vcAccountLoginEyebrow{

    display:block;

    color:
        var(--vc-muted);

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

    letter-spacing:.02em;

}


.vcAccountLoginIntro h3{

    margin:
        6px
        0
        10px;

    color:
        var(--vc-ink);

    font-size:25px;
    font-weight:480;

    line-height:1.13;

    letter-spacing:-.04em;

}


.vcAccountLoginIntro h3 strong{

    display:block;

    color:
        var(--vc-blue);

    font-weight:700;

}


.vcAccountLoginIntro p{

    max-width:320px;

    margin:0;

    color:
        var(--vc-muted);

    font-size:11px;

    line-height:1.55;

}


/* ============================================================
   FORM
============================================================ */

.vcAccountLoginForm{

    display:flex;
    flex-direction:column;

    gap:17px;

}


/* ============================================================
   FIELD
============================================================ */

.vcAccountField{

    width:100%;

}


.vcAccountField > label,
.vcAccountFieldLabelRow label{

    display:block;

    margin:
        0
        0
        7px;

    color:
        var(--vc-text);

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

}


.vcAccountFieldLabelRow{

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

    gap:15px;

}


.vcAccountForgot{

    margin-bottom:7px;

    color:
        var(--vc-blue);

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

    text-decoration:none;

}


.vcAccountForgot:hover{

    text-decoration:underline;

}


/* ============================================================
   FIELD CONTROL
============================================================ */

.vcAccountFieldControl{

    position:relative;

    height:52px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border:
        1px solid
        rgba(16,47,73,.1);

    border-radius:15px;

    background:
        #f7f9fa;

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

}


.vcAccountFieldControl:focus-within{

    background:#fff;

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

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

}


.vcAccountFieldControl > svg{

    width:19px;
    height:19px;

    margin-left:16px;

    flex-shrink:0;

    color:
        var(--vc-blue);

    opacity:.75;

}


.vcAccountFieldControl input{

    width:100%;
    min-width:0;

    height:100%;

    padding:
        0
        14px;

    border:0;
    outline:0;

    background:transparent;

    color:
        var(--vc-ink);

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

}


.vcAccountFieldControl input::placeholder{

    color:#a0a9b1;

}


/* ============================================================
   PASSWORD TOGGLE
============================================================ */

.vcAccountPasswordToggle{

    width:45px;
    height:45px;

    margin-right:3px;

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

    flex-shrink:0;

    border:0;

    border-radius:12px;

    background:transparent;

    color:
        var(--vc-muted);

    cursor:pointer;

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

}


.vcAccountPasswordToggle:hover{

    color:
        var(--vc-blue);

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

}


.vcAccountPasswordToggle svg{

    width:19px;
    height:19px;

}


/* ============================================================
   LOGIN BUTTON
============================================================ */

.vcAccountLoginSubmit{

    width:100%;
    height:54px;

    margin-top:3px;

    padding:
        0
        9px
        0
        18px;

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

    border:0;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #185987,
            var(--vc-blue-dark)
        );

    color:#fff;

    font-family:inherit;
    font-size:12px;
    font-weight:750;

    cursor:pointer;

    box-shadow:
        0 14px 30px
        rgba(23,77,120,.18);

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

}


.vcAccountLoginSubmit:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 36px
        rgba(23,77,120,.23);

}


.vcAccountLoginSubmit:active{

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

}


.vcAccountLoginSubmitIcon{

    width:38px;
    height:38px;

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

    border-radius:12px;

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

}


.vcAccountLoginSubmitIcon svg{

    width:18px;
    height:18px;

}


/* ============================================================
   REGISTER
============================================================ */

.vcAccountRegister{

    margin-top:18px;

    padding-bottom:20px;

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

    gap:5px;

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

    color:
        var(--vc-muted);

    font-size:10px;

}


.vcAccountRegister a{

    color:
        var(--vc-blue);

    font-weight:750;

    text-decoration:none;

}


.vcAccountRegister a:hover{

    text-decoration:underline;

}


/* ============================================================
   BENEFIT
============================================================ */

.vcAccountLoginBenefit{

    margin-top:20px;

    padding:14px;

    display:flex;
    align-items:center;

    gap:11px;

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

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(237,245,251,.7),
            rgba(255,255,255,.8)
        );

}


.vcAccountLoginBenefitIcon{

    width:37px;
    height:37px;

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

    flex-shrink:0;

    border-radius:11px;

    background:#fff;

    color:
        var(--vc-blue);

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

}


.vcAccountLoginBenefitIcon svg{

    width:19px;
    height:19px;

}


.vcAccountLoginBenefit strong,
.vcAccountLoginBenefit div > span{

    display:block;

}


.vcAccountLoginBenefit strong{

    color:
        var(--vc-ink);

    font-size:10px;

}


.vcAccountLoginBenefit div > span{

    margin-top:2px;

    color:
        var(--vc-muted);

    font-size:8px;

    line-height:1.4;

}


/* ============================================================
   ACCOUNT LOGIN MOBILE
============================================================ */

@media(max-width:500px){

    .vcAccountLoginIntro{

        padding-top:3px;

    }


    .vcAccountLoginIntro
    .vcAccountWelcomeIcon{

        width:52px;
        height:52px;

        margin-bottom:17px;

        border-radius:17px;

    }


    .vcAccountLoginIntro h3{

        font-size:22px;

    }


    .vcAccountFieldControl{

        height:50px;

    }


    .vcAccountLoginSubmit{

        height:52px;

    }

}

.vcCartDrawerCheckout{

    border:0;

    font-family:inherit;

    cursor:pointer;

}

/* ============================================================
   CART ITEMS
============================================================ */

.vcCartItems{

    display:flex;
    flex-direction:column;

    gap:11px;

}


.vcCartItem{

    min-width:0;

    padding:11px;

    display:grid;

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

    gap:13px;

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

    border-radius:18px;

    background:#fff;

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

}


.vcCartItem:hover{

    transform:
        translateY(-1px);

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

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

}


.vcCartItemImage{

    width:78px;
    height:78px;

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

    overflow:hidden;

    border-radius:14px;

    background:
        var(--vc-soft);

}


.vcCartItemImage img{

    width:100%;
    height:100%;

    padding:6px;

    object-fit:contain;

}


.vcCartItemInfo{

    min-width:0;

    display:flex;
    flex-direction:column;

}


.vcCartItemSku{

    display:block;

    margin-bottom:4px;

    color:
        var(--vc-muted);

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

    letter-spacing:.05em;

    text-transform:uppercase;

}


.vcCartItemTitle{

    display:-webkit-box;

    overflow:hidden;

    color:
        var(--vc-ink);

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

    line-height:1.35;

    text-decoration:none;

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

}


.vcCartItemTitle:hover{

    color:
        var(--vc-blue);

}


.vcCartItemBottom{

    margin-top:auto;

    padding-top:10px;

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

    gap:10px;

}


.vcCartItemQuantity{

    display:flex;
    align-items:center;

    gap:5px;

    color:
        var(--vc-muted);

    font-size:8px;

}


.vcCartItemQuantity strong{

    color:
        var(--vc-text);

    font-size:10px;

}


.vcCartItemPrice{

    color:
        var(--vc-blue);

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

    letter-spacing:-.02em;

}

/* ============================================================
   FREE SHIPPING REWARD
============================================================ */

.vcCartShippingReward{

    margin-bottom:14px;

    padding:
        12px
        13px
        11px;

    overflow:hidden;

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

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(237,245,251,.72),
            rgba(255,255,255,.96)
        );

}


.vcCartShippingReward[hidden]{

    display:none !important;

}


.vcCartShippingRewardTop{

    display:flex;
    align-items:center;

    gap:10px;

}


.vcCartShippingRewardIcon{

    width:32px;
    height:32px;

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

    flex-shrink:0;

    border-radius:10px;

    background:#fff;

    color:
        var(--vc-blue);

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

}


.vcCartShippingRewardIcon svg{

    width:17px;
    height:17px;

}


.vcCartShippingRewardCopy{

    min-width:0;

    flex:1;

}


.vcCartShippingRewardCopy strong,
.vcCartShippingRewardCopy span{

    display:block;

}


.vcCartShippingRewardCopy strong{

    color:
        var(--vc-ink);

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

}


.vcCartShippingRewardCopy span{

    margin-top:2px;

    color:
        var(--vc-muted);

    font-size:8px;

    line-height:1.35;

}


.vcCartShippingRewardAmount{

    flex-shrink:0;

    color:
        var(--vc-blue);

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

}


/* ============================================================
   FREE SHIPPING PROGRESS BAR
============================================================ */

.vcCartShippingProgress{

    position:relative;

    width:100%;
    height:4px;

    margin-top:10px;

    overflow:hidden;

    border-radius:999px;

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

}


.vcCartShippingProgress span{

    position:absolute;

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

    width:0;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--vc-blue),
            var(--vc-orange)
        );

    transition:
        width .45s
        cubic-bezier(.2,.8,.2,1);

}


/* ============================================================
   FREE SHIPPING ACHIEVED
============================================================ */

.vcCartShippingReward.is-complete{

    border-color:
        rgba(22,134,89,.12);

    background:
        linear-gradient(
            135deg,
            rgba(22,134,89,.075),
            rgba(255,255,255,.96)
        );

}


.vcCartShippingReward.is-complete
.vcCartShippingRewardIcon{

    color:#168659;

}


.vcCartShippingReward.is-complete
.vcCartShippingRewardCopy strong{

    color:#168659;

}


.vcCartShippingReward.is-complete
.vcCartShippingRewardAmount{

    color:#168659;

}


.vcCartShippingReward.is-complete
.vcCartShippingProgress span{

    background:#168659;

}
/* ============================================================
   CART TOTALS
============================================================ */

.vcCartTotals{

    margin-bottom:17px;

    display:flex;
    flex-direction:column;

    gap:7px;

}


.vcCartTotalRow{

    min-height:23px;

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

    gap:15px;

}


/* LABEL */

.vcCartTotalRow span{

    color:#566572;

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

    line-height:1.35;

}


/* VALUE */

.vcCartTotalRow strong{

    color:#344755;

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

    line-height:1.35;

}


/* DISCOUNT */

.vcCartDiscountRow strong{

    color:#168659;

    font-weight:750;

}


.vcCartDiscountRow.is-empty{

    display:none;

}


/* DIVIDER */

.vcCartTotalDivider{

    height:1px;

    margin:
        7px
        0
        6px;

    background:
        var(--vc-line);

}


/* ============================================================
   FINAL TOTAL
============================================================ */

.vcCartTotalFinal{

    min-height:32px;

}


.vcCartTotalFinal span{

    color:
        var(--vc-ink);

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

}


.vcCartTotalFinal strong{

    color:
        var(--vc-blue);

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

    letter-spacing:-.03em;

}

/* ============================================================
   CART ITEM HEADER
============================================================ */

.vcCartItemHeader{

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

    gap:7px;

}


.vcCartItemCopy{

    min-width:0;

    flex:1;

}


.vcCartItemRemove{

    width:27px;
    height:27px;

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

    flex-shrink:0;

    border:0;

    border-radius:8px;

    background:transparent;

    color:
        #a1a9b0;

    cursor:pointer;

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

}


.vcCartItemRemove:hover{

    color:#d34343;

    background:
        rgba(211,67,67,.07);

    transform:
        rotate(6deg);

}


.vcCartItemRemove svg{

    width:15px;
    height:15px;

}


/* ============================================================
   CART QUANTITY
============================================================ */

.vcCartQuantity{

    height:30px;

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

    overflow:hidden;

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

    border-radius:10px;

    background:
        var(--vc-soft);

}


.vcCartQtyButton{

    width:29px;
    height:100%;

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

    border:0;

    background:transparent;

    color:
        var(--vc-blue);

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

    cursor:pointer;

    transition:
        background .2s ease;

}


.vcCartQtyButton:hover{

    background:#fff;

}


.vcCartQtyValue{

    min-width:28px;

    padding:
        0
        3px;

    color:
        var(--vc-ink);

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

    text-align:center;

}


.vcCartItem.is-updating{

    opacity:.55;

    pointer-events:none;

}


/* ============================================================
   VENTACTIVE ACCOUNT FLOW
============================================================ */

.vcAccountFlow{
    position:relative;
    min-height:100%;
}

.vcAccountView{
    display:none;
    opacity:0;
    transform:translateX(18px);
}

.vcAccountView.is-active{
    display:block;
    animation:
        vcAccountViewIn
        .42s cubic-bezier(.2,.8,.2,1)
        forwards;
}

@keyframes vcAccountViewIn{

    from{
        opacity:0;
        transform:translateX(18px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


/* ============================================================
   FLOW INTRO
============================================================ */

.vcAccountFlowIntro{
    margin-bottom:28px;
    padding:4px 3px 0;
}

.vcAccountFlowStep{
    display:block;
    margin-bottom:8px;

    color:var(--vc-orange);

    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.vcAccountFlowIntro h3{
    margin:0;

    color:var(--vc-ink);

    font-size:27px;
    font-weight:500;
    line-height:1.15;

    letter-spacing:-.045em;
}

.vcAccountFlowIntro h3 strong{
    display:block;

    color:var(--vc-blue);

    font-weight:750;
}

.vcAccountFlowIntro p{
    max-width:330px;

    margin:12px 0 0;

    color:var(--vc-muted);

    font-size:11px;
    line-height:1.65;
}


/* ============================================================
   BACK
============================================================ */

.vcAccountBack{
    min-height:35px;

    margin-bottom:24px;
    padding:0 8px;

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

    gap:5px;

    border:0;

    border-radius:10px;

    background:transparent;

    color:var(--vc-muted);

    font-family:inherit;
    font-size:10px;
    font-weight:650;

    cursor:pointer;

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

.vcAccountBack:hover{
    color:var(--vc-blue);
    background:var(--vc-blue-soft);
    transform:translateX(-2px);
}

.vcAccountBack svg{
    width:16px;
    height:16px;
}


/* ============================================================
   TEXT BUTTONS
============================================================ */

.vcAccountTextAction,
.vcAccountInlineAction{
    padding:0;

    border:0;

    background:transparent;

    color:var(--vc-blue);

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

    cursor:pointer;
}

.vcAccountInlineAction{
    font-size:10px;
}

.vcAccountTextAction:hover,
.vcAccountInlineAction:hover{
    text-decoration:underline;
}


/* ============================================================
   NOTICES
============================================================ */

.vcAccountNotice{
    margin-bottom:2px;
    padding:11px 13px;

    border-radius:12px;

    font-size:10px;
    font-weight:600;
    line-height:1.45;
}

.vcAccountNotice[hidden]{
    display:none !important;
}

.vcAccountNotice.is-error{
    border:1px solid rgba(197,55,55,.12);
    background:rgba(197,55,55,.07);
    color:#b03737;
}

.vcAccountNotice.is-success{
    border:1px solid rgba(22,134,89,.12);
    background:rgba(22,134,89,.075);
    color:#168659;
}

.vcAccountNotice.is-info{
    border:1px solid rgba(23,77,120,.1);
    background:var(--vc-blue-soft);
    color:var(--vc-blue);
}


/* ============================================================
   CODE SCREEN
============================================================ */

.vcAccountCodeHero{
    padding-top:5px;
    text-align:center;
}

.vcAccountCodeIcon{
    width:61px;
    height:61px;

    margin:0 auto 20px;

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

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            var(--vc-blue),
            var(--vc-blue-dark)
        );

    color:#fff;

    font-size:24px;

    box-shadow:
        0 18px 40px
        rgba(23,77,120,.2);
}

.vcAccountCodeHero > span{
    color:var(--vc-orange);

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

    letter-spacing:.12em;
    text-transform:uppercase;
}

.vcAccountCodeHero h3{
    margin:8px 0 12px;

    color:var(--vc-ink);

    font-size:26px;
    font-weight:500;

    letter-spacing:-.04em;
}

.vcAccountCodeHero h3 strong{
    color:var(--vc-blue);
}

.vcAccountCodeHero p{
    max-width:300px;

    margin:0 auto 28px;

    color:var(--vc-muted);

    font-size:10px;
    line-height:1.6;
}

.vcAccountCodeHero p strong{
    color:var(--vc-text);
}


/* ============================================================
   OTP
============================================================ */

.vcAccountCodeInputs{
    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:7px;
}

.vcAccountCodeInputs input{
    min-width:0;
    height:58px;

    padding:0;

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

    outline:0;

    border-radius:14px;

    background:#f7f9fa;

    color:var(--vc-blue);

    font-family:inherit;
    font-size:21px;
    font-weight:800;

    text-align:center;

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

.vcAccountCodeInputs input:focus{
    border-color:rgba(23,77,120,.4);

    background:#fff;

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

    transform:translateY(-2px);
}


/* ============================================================
   RESEND
============================================================ */

.vcAccountResend{
    margin-top:18px;

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

    gap:5px;

    color:var(--vc-muted);

    font-size:9px;
}

.vcAccountResend button{
    padding:0;

    border:0;
    background:none;

    color:var(--vc-blue);

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

    cursor:pointer;
}


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

.vcAccountLoginSubmit.is-loading{
    opacity:.75;
    pointer-events:none;
}

.vcAccountLoginSubmit:disabled{
    cursor:wait;
}


/* ============================================================
   SUCCESS / LOGGED
============================================================ */

.vcAccountLoggedSuccess{
    min-height:100%;

    padding:35px 8px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.vcAccountLoggedSuccessIcon{
    width:68px;
    height:68px;

    margin-bottom:24px;

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

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            var(--vc-blue),
            var(--vc-blue-dark)
        );

    box-shadow:
        0 20px 45px
        rgba(23,77,120,.22);
}

.vcAccountLoggedSuccessIcon span{
    width:29px;
    height:29px;

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

    border-radius:50%;

    background:#fff;

    color:var(--vc-blue);

    font-size:15px;
    font-weight:900;
}

.vcAccountLoggedSuccess h3{
    margin:7px 0 12px;

    color:var(--vc-ink);

    font-size:28px;
    font-weight:500;

    letter-spacing:-.045em;
}

.vcAccountLoggedSuccess h3 strong{
    color:var(--vc-blue);
}

.vcAccountLoggedSuccess p{
    margin:0;

    color:var(--vc-muted);

    font-size:11px;
    line-height:1.65;
}

.vcAccountLoggedActions{
    margin-top:28px;

    display:grid;

    gap:9px;
}

.vcAccountLoggedActions a,
.vcAccountLoggedActions button{
    min-height:50px;

    padding:0 16px;

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

    border-radius:14px;

    font-family:inherit;
    font-size:11px;
    font-weight:750;

    text-decoration:none;

    cursor:pointer;
}

.vcAccountLoggedActions a{
    border:0;

    background:
        linear-gradient(
            135deg,
            var(--vc-blue),
            var(--vc-blue-dark)
        );

    color:#fff;
}

.vcAccountLoggedActions button{
    border:
        1px solid
        var(--vc-line);

    background:#fff;

    color:var(--vc-blue);
}


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

@media(max-width:500px){

    .vcAccountCodeInputs{
        gap:5px;
    }

    .vcAccountCodeInputs input{
        height:52px;
        border-radius:12px;
        font-size:18px;
    }

    .vcAccountFlowIntro h3,
    .vcAccountCodeHero h3{
        font-size:23px;
    }

}

/* ============================================================
   LOGGED ACCOUNT PANEL
============================================================ */

.vcAccountLoggedPanel{
    min-height:100%;
}

.vcAccountIdentityCopy{
    min-width:0;
}

.vcAccountIdentityCopy small{
    display:block;

    margin-top:4px;

    overflow:hidden;

    opacity:.68;

    font-size:9px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.vcAccountAvatar span{
    color:#fff;

    font-size:18px;
    font-weight:800;
}


/* ============================================================
   LOGGED INTRO
============================================================ */

.vcAccountLoggedIntro{
    padding:
        27px
        4px
        20px;
}

.vcAccountLoggedIntro > span{
    color:var(--vc-muted);

    font-size:10px;
    font-weight:650;
}

.vcAccountLoggedIntro h3{
    margin:
        6px
        0
        9px;

    color:var(--vc-ink);

    font-size:25px;
    font-weight:500;

    letter-spacing:-.04em;
}

.vcAccountLoggedIntro h3 strong{
    color:var(--vc-blue);

    font-weight:750;
}

.vcAccountLoggedIntro p{
    margin:0;

    color:var(--vc-muted);

    font-size:10px;
    line-height:1.55;
}


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

.vcAccountAdminOption{
    width:100%;
    min-height:68px;

    padding:
        10px
        12px;

    display:flex;
    align-items:center;

    gap:12px;

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

    border-radius:16px;

    background:#fff;

    color:inherit;

    font-family:inherit;

    text-align:left;

    cursor:pointer;

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

.vcAccountAdminOption:hover{
    transform:
        translateX(3px);

    border-color:
        rgba(255,138,0,.22);

    box-shadow:
        0 9px 22px
        rgba(16,47,73,.07);
}

.vcAccountNavIconAdmin{
    background:
        rgba(255,138,0,.09);

    color:
        var(--vc-orange);
}


/* ============================================================
   LOGOUT
============================================================ */

.vcAccountLogoutArea{
    margin-top:22px;

    padding-top:18px;

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

.vcAccountLogout{
    width:100%;

    padding:
        13px
        14px;

    display:flex;
    align-items:center;

    gap:12px;

    border:0;

    border-radius:15px;

    background:
        rgba(197,55,55,.045);

    color:#a33a3a;

    font-family:inherit;

    text-align:left;

    cursor:pointer;

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

.vcAccountLogout:hover{
    background:
        rgba(197,55,55,.085);

    transform:
        translateY(-1px);
}

.vcAccountLogout > span{
    width:38px;
    height:38px;

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

    flex-shrink:0;

    border-radius:11px;

    background:#fff;
}

.vcAccountLogout svg{
    width:19px;
    height:19px;
}

.vcAccountLogout strong,
.vcAccountLogout small{
    display:block;
}

.vcAccountLogout strong{
    font-size:10px;
}

.vcAccountLogout small{
    margin-top:3px;

    opacity:.65;

    font-size:8px;
}


/* ============================================================
   MERCADO PAGO PANEL
============================================================ */

.vcMercadoPagoPanel{
    margin-top:24px;

    padding:
        clamp(22px,3vw,30px);

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

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #ffffff 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.8);
}


.vcMercadoPagoPanel[hidden]{
    display:none !important;
}


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

.vcMercadoPagoPanelHeader{
    margin-bottom:22px;
}


.vcMercadoPagoPanelHeader > div{
    display:flex;
    flex-direction:column;
}


.vcMercadoPagoPanelHeader span{
    display:block;

    margin-bottom:5px;

    color:
        var(--vcCheckoutOrange);

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

    letter-spacing:.12em;

    text-transform:uppercase;
}


.vcMercadoPagoPanelHeader strong{
    display:block;

    color:
        var(--vcCheckoutInk);

    font-size:
        clamp(17px,1.6vw,22px);

    font-weight:750;

    letter-spacing:-.025em;
}


.vcMercadoPagoPanelHeader small{
    display:block;

    max-width:560px;

    margin-top:7px;

    color:
        var(--vcCheckoutMuted);

    font-size:10px;

    line-height:1.6;
}


/* ============================================================
   NOTICE
============================================================ */

.vcMercadoPagoNotice{
    margin-bottom:18px;

    padding:
        12px
        14px;

    border-radius:13px;

    font-size:10px;
    line-height:1.5;
}


.vcMercadoPagoNotice[hidden]{
    display:none !important;
}


.vcMercadoPagoNotice.is-error{
    background:
        rgba(183,50,50,.07);

    color:#ad3838;
}


.vcMercadoPagoNotice.is-success{
    background:
        rgba(26,135,89,.07);

    color:#168458;
}


.vcMercadoPagoNotice.is-info{
    background:
        var(--vcCheckoutBlueSoft);

    color:
        var(--vcCheckoutBlue);
}


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

.vcMercadoPagoFields{
    display:grid;

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

    gap:15px;
}


.vcMercadoPagoField{
    min-width:0;

    display:block;
}


.vcMercadoPagoFieldFull{
    grid-column:
        span 2;
}


.vcMercadoPagoField > span{
    display:block;

    margin:
        0
        0
        7px
        3px;

    color:
        var(--vcCheckoutText);

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


/* ============================================================
   INPUTS
============================================================ */

.vcMercadoPagoField input,
.vcMercadoPagoField select{
    width:100%;
    height:52px;

    box-sizing:border-box;

    padding:
        0
        14px;

    border:
        1px solid
        #dde4e9;

    outline:0;

    border-radius:14px;

    background:
        #f8fafb;

    color:
        var(--vcCheckoutInk);

    font:inherit;

    font-size:13px;

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


.vcMercadoPagoField input::placeholder{
    color:#a3adb5;
}


.vcMercadoPagoField input:focus,
.vcMercadoPagoField select:focus{
    border-color:
        rgba(23,77,120,.45);

    background:#fff;

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


.vcMercadoPagoField select{
    cursor:pointer;
}


/* ============================================================
   CARD NUMBER
============================================================ */

#form-checkout__cardNumber{
    letter-spacing:.08em;
}


/* ============================================================
   EXPIRATION / CVV
============================================================ */

#form-checkout__cardExpirationMonth,
#form-checkout__cardExpirationYear,
#form-checkout__securityCode{
    text-align:center;
}


/* ============================================================
   INSTALLMENTS
============================================================ */

#form-checkout__installments{
    appearance:none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #6f7d88 50%
        ),
        linear-gradient(
            135deg,
            #6f7d88 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 17px) 22px,
        calc(100% - 12px) 22px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

    padding-right:34px;
}


/* ============================================================
   MERCADO PAGO SECURITY BAR
============================================================ */

.vcMercadoPagoPanel::after{
    content:"Los datos de tu tarjeta son tokenizados directamente por Mercado Pago.";

    display:flex;
    align-items:center;

    margin-top:20px;

    padding-top:16px;

    border-top:
        1px solid
        var(--vcCheckoutLine);

    color:
        var(--vcCheckoutMuted);

    font-size:9px;
    line-height:1.5;
}


/* ============================================================
   WHEN PAYMENT METHOD IS ACTIVE
============================================================ */

.vcPaymentMethod input[value="mercadopago"]:checked +
.vcPaymentMethodVisual{
    border-color:
        rgba(0,158,227,.48);

    background:
        linear-gradient(
            180deg,
            #f4fbff 0%,
            #ffffff 100%
        );

    box-shadow:
        0 0 0 4px
        rgba(0,158,227,.055),
        0 18px 40px
        rgba(16,47,73,.07);
}


/* ============================================================
   LOADING STATE
============================================================ */

.vcMercadoPagoPanel.is-loading{
    pointer-events:none;

    opacity:.7;
}


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

@media(max-width:900px){

    .vcMercadoPagoFields{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .vcMercadoPagoFieldFull{
        grid-column:
            span 2;
    }

}


@media(max-width:620px){

    .vcMercadoPagoPanel{
        margin-top:18px;

        padding:
            20px
            16px;

        border-radius:18px;
    }


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

        gap:12px;
    }


    .vcMercadoPagoFieldFull{
        grid-column:
            1 / -1;
    }


    .vcMercadoPagoField input,
    .vcMercadoPagoField select{
        height:50px;

        font-size:12px;
    }

}


@media(max-width:420px){

    .vcMercadoPagoFields{
        grid-template-columns:
            1fr;
    }


    .vcMercadoPagoField,
    .vcMercadoPagoFieldFull{
        grid-column:
            1 / -1;
    }

}

/* ============================================================
   STRIPE
============================================================ */

.vcStripePanel{
    margin-top:24px;

    padding:
        clamp(22px,3vw,30px);

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

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #ffffff 100%
        );
}


.vcStripePanel[hidden]{
    display:none !important;
}


.vcStripePanelHeader{
    margin-bottom:20px;
}


.vcStripePanelHeader span{
    display:block;

    margin-bottom:5px;

    color:
        var(--vcCheckoutOrange);

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

    letter-spacing:.12em;

    text-transform:uppercase;
}


.vcStripePanelHeader strong{
    display:block;

    color:
        var(--vcCheckoutInk);

    font-size:
        clamp(17px,1.6vw,22px);

    font-weight:750;
}


.vcStripePanelHeader small{
    display:block;

    max-width:570px;

    margin-top:7px;

    color:
        var(--vcCheckoutMuted);

    font-size:10px;

    line-height:1.6;
}


.vcStripeElement{
    min-height:100px;
}


.vcStripeNotice{
    margin-bottom:17px;

    padding:12px 14px;

    border-radius:13px;

    font-size:10px;

    line-height:1.5;
}


.vcStripeNotice[hidden]{
    display:none !important;
}


.vcStripeNotice.is-error{
    background:
        rgba(183,50,50,.07);

    color:#ad3838;
}


.vcStripeNotice.is-info{
    background:
        var(--vcCheckoutBlueSoft);

    color:
        var(--vcCheckoutBlue);
}


.vcStripeNotice.is-success{
    background:
        rgba(26,135,89,.07);

    color:#168458;
}


/* ============================================================
   ACCOUNT NAVIGATION VIEWS
============================================================ */

.vcAccountNavigationView {
    display: none;
}

.vcAccountNavigationView.is-active {
    display: block;
}


/* ============================================================
   ADMIN BUTTON
============================================================ */

.vcAccountAdminOption {
    width: 100%;
    border: 1px solid #e1e8ed;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 24px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.vcAccountAdminOption:hover {
    transform: translateY(-1px);
    border-color: #ccdbe5;
    box-shadow: 0 12px 30px rgba(12, 52, 77, .08);
}

.vcAccountAdminOption .vcAccountNavText {
    flex: 1;
}


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

.vcAccountAdminHeader {
    margin-bottom: 28px;
}

.vcAccountAdminBack {
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    margin-bottom: 24px;
    cursor: pointer;
    color: #6f8190;
    font: inherit;
    font-weight: 700;
}

.vcAccountAdminBack svg {
    width: 18px;
    height: 18px;
}

.vcAccountAdminTitle > span {
    display: block;
    color: #f28a00;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 7px;
}

.vcAccountAdminTitle strong {
    display: block;
    color: #082a41;
    font-size: 27px;
    line-height: 1.15;
    margin-bottom: 7px;
}

.vcAccountAdminTitle small {
    display: block;
    color: #8394a1;
    font-size: 14px;
    line-height: 1.5;
}