/* ============================================================
   VENTACTIVE
   PRODUCT DISCOVERY
   PREMIUM / FUTURISTIC ECOMMERCE EXPERIENCE
============================================================ */

:root{

    --vc-discover-bg:#f5f8fb;

    --vc-discover-surface:#ffffff;

    --vc-discover-surface-soft:
        rgba(255,255,255,.78);

    --vc-discover-blue:#174d78;

    --vc-discover-blue-dark:#102f49;

    --vc-discover-blue-soft:#edf5fb;

    --vc-discover-orange:#ff8a00;

    --vc-discover-orange-dark:#ef7800;

    --vc-discover-green:#168659;

    --vc-discover-ink:#101820;

    --vc-discover-text:#46535f;

    --vc-discover-muted:#82909b;

    --vc-discover-line:
        rgba(16,47,73,.08);

    --vc-discover-line-strong:
        rgba(16,47,73,.13);

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

    --vc-discover-shadow-hover:
        0 30px 80px
        rgba(16,47,73,.14);

}


/* ============================================================
   SECTION
============================================================ */

.vcDiscover{

    position:relative;

    width:100%;

    padding:
        120px
        0
        125px;

    overflow:hidden;

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

}


.vcDiscoverInner{

    position:relative;

    z-index:2;

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

    margin:auto;

}


/* ============================================================
   AMBIENT BACKGROUND
============================================================ */

.vcDiscoverAmbient{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    overflow:hidden;

}


.vcDiscoverGlow{

    position:absolute;

    border-radius:50%;

    filter:
        blur(8px);

    opacity:.9;

}


.vcDiscoverGlowOne{

    width:650px;
    height:650px;

    top:-300px;
    right:-230px;

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

}


.vcDiscoverGlowTwo{

    width:600px;
    height:600px;

    left:-260px;
    bottom:-310px;

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

}


.vcDiscoverOrb{

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

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

    opacity:.28;

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

}


.vcDiscoverOrbOne{

    top:110px;
    left:8%;

}


.vcDiscoverOrbTwo{

    right:13%;
    bottom:85px;

}


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

.vcDiscoverHeader{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:40px;

}


.vcDiscoverHeading{

    max-width:760px;

}


.vcDiscoverEyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

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

    font-size:11px;

    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.vcDiscoverEyebrowDot{

    width:8px;
    height:8px;

    flex-shrink:0;

    border-radius:50%;

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

    box-shadow:
        0 0 0 6px
        rgba(255,138,0,.09);

}


.vcDiscoverHeading h2{

    margin:0;

    color:
        var(--vc-discover-ink);

    font-size:
        clamp(
            42px,
            5.2vw,
            74px
        );

    font-weight:450;

    line-height:.98;

    letter-spacing:-.055em;

}


.vcDiscoverHeading h2 strong{

    display:block;

    margin-top:5px;

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

    font-weight:720;

}


.vcDiscoverHeading p{

    max-width:610px;

    margin:
        24px
        0
        0;

    color:
        var(--vc-discover-muted);

    font-size:14px;

    line-height:1.75;

}


.vcDiscoverHeaderAction{

    min-width:235px;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:11px;

}


.vcDiscoverHeaderHint{

    color:
        var(--vc-discover-muted);

    font-size:10px;

    font-weight:650;

    letter-spacing:.02em;

}


.vcDiscoverAllLink{

    min-height:50px;

    padding:
        0
        8px
        0
        18px;

    display:inline-flex;

    align-items:center;

    gap:15px;

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

    border-radius:15px;

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

    backdrop-filter:
        blur(14px);

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

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

    font-size:11px;

    font-weight:750;

    text-decoration:none;

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

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

}


.vcDiscoverAllLink:hover{

    transform:
        translateY(-3px);

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

    background:#fff;

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

}


.vcDiscoverAllLinkIcon{

    width:35px;
    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

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

    color:#fff;

}


.vcDiscoverAllLinkIcon svg{

    width:16px;
    height:16px;

}


/* ============================================================
   CATEGORY NAV SHELL
============================================================ */

.vcDiscoverNavShell{

    position:relative;

    margin-bottom:22px;

    padding:
        8px;

    display:flex;

    align-items:center;

    gap:7px;

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

    border-radius:20px;

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

    backdrop-filter:
        blur(18px);

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

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

}


.vcDiscoverNav{

    flex:1;

    min-width:0;

    display:flex;

    align-items:center;

    gap:7px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

}


.vcDiscoverNav::-webkit-scrollbar{

    display:none;

}


.vcDiscoverCategory{

    flex-shrink:0;

    min-height:42px;

    padding:
        0
        13px
        0
        15px;

    display:flex;

    align-items:center;

    gap:9px;

    border:0;

    border-radius:13px;

    background:transparent;

    color:
        var(--vc-discover-text);

    font-family:inherit;

    font-size:11px;

    font-weight:650;

    cursor:pointer;

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

}


.vcDiscoverCategory small{

    min-width:22px;
    height:22px;

    padding:
        0
        6px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:
        rgba(16,47,73,.05);

    color:
        var(--vc-discover-muted);

    font-size:8px;

    font-weight:750;

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

}


.vcDiscoverCategory:hover{

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

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

}


.vcDiscoverCategory.is-active{

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

    color:#fff;

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

}


.vcDiscoverCategory.is-active small{

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

    color:#fff;

}


.vcDiscoverNavArrow{

    width:38px;
    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:0;

    border-radius:12px;

    background:
        rgba(245,247,249,.95);

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

    cursor:pointer;

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

}


.vcDiscoverNavArrow:hover{

    transform:
        scale(1.04);

    background:#fff;

}


.vcDiscoverNavArrow svg{

    width:16px;
    height:16px;

}


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

.vcDiscoverStatus{

    min-height:34px;

    margin-bottom:24px;

    display:flex;

    align-items:center;

    gap:13px;

}


.vcDiscoverStatusCopy{

    display:flex;

    align-items:baseline;

    gap:5px;

    white-space:nowrap;

}


.vcDiscoverStatusCopy span{

    color:
        var(--vc-discover-muted);

    font-size:10px;

}


.vcDiscoverStatusCopy strong{

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

    font-size:13px;

    font-weight:800;

}


.vcDiscoverStatusLine{

    flex:1;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--vc-discover-line),
            rgba(16,47,73,0)
        );

}


.vcDiscoverStatusMessage{

    color:
        var(--vc-discover-muted);

    font-size:9px;

    letter-spacing:.05em;

}


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

.vcDiscoverGrid{

    display:grid;

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

    gap:18px;

}


.vcProductCard{

    position:relative;

    min-width:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;

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

    border-radius:24px;

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

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

    transform:
        translateY(0);

    transition:
        transform .35s
            cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


.vcProductCard:hover{

    transform:
        translateY(-7px);

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

    box-shadow:
        var(--vc-discover-shadow-hover);

}


.vcProductCardHidden{

    display:none;

}


.vcProductCardAccent{

    position:absolute;

    top:0;
    left:24px;
    right:24px;

    z-index:3;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,77,120,.4),
            rgba(255,138,0,.55),
            transparent
        );

    opacity:0;

    transition:
        opacity .3s ease;

}


.vcProductCard:hover
.vcProductCardAccent{

    opacity:1;

}


/* ============================================================
   PRODUCT MEDIA
============================================================ */

.vcProductMedia{

    position:relative;

    height:285px;

    margin:
        10px
        10px
        0;

    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            150deg,
            #fafcfd 0%,
            #f0f4f7 100%
        );

}


.vcProductImageLink{

    position:absolute;

    inset:0;

    z-index:1;

    display:flex;

    align-items:center;

    justify-content:center;

}


.vcProductImageLink img{

    width:100%;
    height:100%;

    padding:24px;

    object-fit:contain;

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

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

}


.vcProductCard:hover
.vcProductImageLink img{

    transform:
        scale(1.04)
        translateY(-4px);

}


/* ============================================================
   MEDIA GLOW
============================================================ */

.vcProductMediaGlow{

    position:absolute;

    z-index:0;

    width:260px;
    height:260px;

    right:-120px;
    bottom:-135px;

    border-radius:50%;

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

    opacity:.7;

    pointer-events:none;

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

}


.vcProductCard:hover
.vcProductMediaGlow{

    transform:
        scale(1.25);

    opacity:1;

}


/* ============================================================
   PRODUCT BADGES
============================================================ */

.vcProductBadges{

    position:absolute;

    top:12px;
    left:12px;

    z-index:4;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:7px;

}


.vcProductBadge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    min-height:27px;

    padding:
        0
        9px;

    border-radius:999px;

    backdrop-filter:
        blur(10px);

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

    font-size:8px;

    font-weight:750;

    letter-spacing:.04em;

    text-transform:uppercase;

}


.vcProductBadgeOffer{

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

    color:
        var(--vc-discover-orange-dark);

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

}


.vcProductBadgeOffer strong{

    font-size:10px;

}


.vcProductBadgeOffer small{

    font-size:7px;

    font-weight:750;

}


.vcProductBadgeShipping{

    background:
        rgba(22,134,89,.92);

    color:#fff;

    box-shadow:
        0 7px 18px
        rgba(22,134,89,.12);

}


/* ============================================================
   PRODUCT QUICK BUTTON OVER IMAGE
============================================================ */

.vcProductQuickButton{

    position:absolute;

    z-index:5;

    left:50%;
    bottom:14px;

    transform:
        translateX(-50%)
        translateY(10px);

    min-height:38px;

    padding:
        0
        13px;

    display:flex;

    align-items:center;

    gap:8px;

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

    border-radius:999px;

    background:
        rgba(17,24,32,.78);

    backdrop-filter:
        blur(14px);

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

    color:#fff;

    font-family:inherit;

    font-size:9px;

    font-weight:700;

    opacity:0;

    cursor:pointer;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.15);

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

}


.vcProductCard:hover
.vcProductQuickButton{

    opacity:1;

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

}


.vcProductQuickButtonIcon{

    width:24px;
    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

}


.vcProductQuickButton svg{

    width:15px;
    height:15px;

}


/* ============================================================
   PRODUCT NO IMAGE
============================================================ */

.vcProductNoImage{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

}


.vcProductNoImageMark{

    width:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:.45;

}


.vcProductNoImageMark img{

    width:100%;

    display:block;

}


.vcProductNoImage small{

    color:
        var(--vc-discover-muted);

    font-size:9px;

}


/* ============================================================
   PRODUCT BODY
============================================================ */

.vcProductBody{

    flex:1;

    padding:
        20px
        19px
        18px;

    display:flex;

    flex-direction:column;

}


/* ============================================================
   PRODUCT META
============================================================ */

.vcProductMeta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:9px;

}


.vcProductCategory{

    min-width:0;

    overflow:hidden;

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

    font-size:8px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.vcProductSku{

    flex-shrink:0;

    color:
        var(--vc-discover-muted);

    font-size:7px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

}


/* ============================================================
   PRODUCT TITLE
============================================================ */

.vcProductTitle{

    margin:0;

}


.vcProductTitle a{

    display:-webkit-box;

    min-height:45px;

    overflow:hidden;

    color:
        var(--vc-discover-ink);

    font-size:16px;

    font-weight:670;

    line-height:1.4;

    letter-spacing:-.025em;

    text-decoration:none;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    transition:
        color .2s ease;

}


.vcProductTitle a:hover{

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

}


/* ============================================================
   PRODUCT RATING
============================================================ */

.vcProductRating{

    min-height:24px;

    margin-top:9px;

    display:flex;

    align-items:center;

    gap:6px;

}


.vcStars{

    position:relative;

    display:inline-block;

    line-height:1;

    font-size:12px;

    letter-spacing:1px;

}


.vcStarsBack{

    color:
        #d9dee2;

}


.vcStarsFront{

    position:absolute;

    top:0;
    left:0;

    overflow:hidden;

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

    white-space:nowrap;

}


.vcProductRating strong{

    color:
        var(--vc-discover-text);

    font-size:9px;

    font-weight:750;

}


.vcProductRating small{

    color:
        var(--vc-discover-muted);

    font-size:8px;

}


.vcProductRatingNew{

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:
        var(--vc-discover-muted);

    font-size:8px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}


.vcProductRatingNew::before{

    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

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

}


/* ============================================================
   DESCRIPTION
============================================================ */

.vcProductDescription{

    min-height:51px;

    margin:
        9px
        0
        0;

    display:-webkit-box;

    overflow:hidden;

    color:
        var(--vc-discover-muted);

    font-size:10px;

    line-height:1.65;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

}


/* ============================================================
   PRODUCT PRICE
============================================================ */

.vcProductPriceArea{

    margin-top:auto;

    padding-top:17px;

}


.vcProductOldPrice{

    min-height:18px;

    margin-bottom:4px;

    display:flex;

    align-items:center;

    gap:8px;

}


.vcProductOldPrice del{

    color:
        #98a3ac;

    font-size:9px;

}


.vcProductOldPrice > span{

    display:flex;

    align-items:center;

    gap:3px;

    color:
        var(--vc-discover-green);

    font-size:8px;

    font-weight:650;

}


.vcProductOldPrice > span strong{

    font-weight:800;

}


.vcProductCurrentPrice{

    display:flex;

    align-items:baseline;

    gap:5px;

}


.vcProductCurrentPrice > strong{

    color:
        var(--vc-discover-ink);

    font-size:24px;

    font-weight:780;

    letter-spacing:-.045em;

}


.vcProductCurrentPrice small{

    color:
        var(--vc-discover-muted);

    font-size:7px;

    font-weight:700;

    letter-spacing:.08em;

}


/* ============================================================
   PRODUCT ACTIONS
============================================================ */

.vcProductActions{

    margin-top:16px;

    display:grid;

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

    gap:8px;

}


.vcProductQuickIcon{

    width:44px;
    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:13px;

    background:
        #f8fafb;

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

    cursor:pointer;

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

}


.vcProductQuickIcon:hover{

    transform:
        translateY(-2px);

    background:#fff;

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

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

}


.vcProductQuickIcon svg{

    width:18px;
    height:18px;

}


/* ============================================================
   ADD TO CART
============================================================ */

.vcProductAddCart{

    position:relative;

    min-width:0;

    height:44px;

    padding:
        0
        8px
        0
        13px;

    display:flex;

    align-items:center;

    gap:8px;

    border:0;

    border-radius:13px;

    overflow:hidden;

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

    color:#fff;

    font-family:inherit;

    cursor:pointer;

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

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

}


.vcProductAddCart::before{

    content:"";

    position:absolute;

    top:-80%;
    left:-45%;

    width:80px;
    height:130px;

    transform:
        rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:
        left .45s ease;

}


.vcProductAddCart:hover::before{

    left:120%;

}


.vcProductAddCart:hover{

    transform:
        translateY(-2px);

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

}


.vcProductAddCart:active{

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

}


.vcProductAddCartIcon{

    width:25px;
    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:8px;

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

}


.vcProductAddCartIcon svg{

    width:15px;
    height:15px;

}


.vcProductAddCartText{

    min-width:0;

    flex:1;

    font-size:10px;

    font-weight:750;

    text-align:left;

}


.vcProductAddCartArrow{

    width:27px;
    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:8px;

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

}


.vcProductAddCartArrow svg{

    width:14px;
    height:14px;

    transition:
        transform .2s ease;

}


.vcProductAddCart:hover
.vcProductAddCartArrow svg{

    transform:
        translateX(2px);

}


/* ============================================================
   ADD CART STATES
============================================================ */

.vcProductAddCart.is-loading{

    pointer-events:none;

    opacity:.72;

}


.vcProductAddCart.is-success{

    background:
        linear-gradient(
            135deg,
            #1c9867,
            #126842
        );

}


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

.vcDiscoverEmpty{

    min-height:320px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

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

    border-radius:24px;

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

}


.vcDiscoverEmptyIcon{

    width:56px;
    height:56px;

    margin-bottom:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:17px;

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

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

}


.vcDiscoverEmptyIcon svg{

    width:24px;
    height:24px;

}


.vcDiscoverEmpty > span:not(.vcDiscoverEmptyIcon){

    color:
        var(--vc-discover-muted);

    font-size:10px;

}


.vcDiscoverEmpty strong{

    margin-top:4px;

    color:
        var(--vc-discover-ink);

    font-size:17px;

}


.vcDiscoverEmpty button{

    margin-top:18px;

    min-height:42px;

    padding:
        0
        16px;

    border:0;

    border-radius:12px;

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

    color:#fff;

    font-family:inherit;

    font-size:10px;

    font-weight:700;

    cursor:pointer;

}


/* ============================================================
   LOAD MORE
============================================================ */

.vcDiscoverMoreWrap{

    margin-top:30px;

    display:flex;

    justify-content:center;

}


.vcDiscoverMore{

    min-width:310px;

    min-height:62px;

    padding:
        7px
        8px
        7px
        18px;

    display:flex;

    align-items:center;

    gap:15px;

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

    border-radius:18px;

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

    color:
        var(--vc-discover-ink);

    font-family:inherit;

    cursor:pointer;

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

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

}


.vcDiscoverMore:hover{

    transform:
        translateY(-3px);

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

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

}


.vcDiscoverMoreText{

    min-width:0;

    flex:1;

    text-align:left;

}


.vcDiscoverMoreText small,
.vcDiscoverMoreText strong{

    display:block;

}


.vcDiscoverMoreText small{

    color:
        var(--vc-discover-muted);

    font-size:8px;

}


.vcDiscoverMoreText strong{

    margin-top:2px;

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

    font-size:11px;

}


.vcDiscoverMoreCount{

    text-align:right;

}


.vcDiscoverMoreCount strong,
.vcDiscoverMoreCount small{

    display:block;

}


.vcDiscoverMoreCount strong{

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

    font-size:12px;

}


.vcDiscoverMoreCount small{

    color:
        var(--vc-discover-muted);

    font-size:7px;

}


.vcDiscoverMoreIcon{

    width:40px;
    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

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

    color:#fff;

}


.vcDiscoverMoreIcon svg{

    width:16px;
    height:16px;

}


/* ============================================================
   QUICK VIEW ROOT
============================================================ */

.vcQuickView{

    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:28px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

}


.vcQuickView.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/* ============================================================
   QUICK VIEW BACKDROP
============================================================ */

.vcQuickViewBackdrop{

    position:absolute;

    inset:0;

    background:
        rgba(8,18,26,.58);

    backdrop-filter:
        blur(11px);

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

}


/* ============================================================
   QUICK VIEW PANEL
============================================================ */

.vcQuickViewPanel{

    position:relative;

    z-index:2;

    width:
        min(
            980px,
            100%
        );

    min-height:600px;

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

    display:grid;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(0,.92fr);

    overflow:hidden;

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

    border-radius:30px;

    background:#fff;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.32);

    transform:
        translateY(20px)
        scale(.975);

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

}


.vcQuickView.is-open
.vcQuickViewPanel{

    transform:
        translateY(0)
        scale(1);

}


/* ============================================================
   QUICK VIEW AMBIENT
============================================================ */

.vcQuickViewAmbient{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

}


.vcQuickViewGlow{

    position:absolute;

    width:460px;
    height:460px;

    right:-250px;
    top:-230px;

    border-radius:50%;

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

}


.vcQuickViewGrid{

    position:absolute;

    inset:0;

    opacity:.02;

    background-image:
        linear-gradient(
            rgba(16,47,73,.8)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16,47,73,.8)
            1px,
            transparent 1px
        );

    background-size:
        26px
        26px;

}


/* ============================================================
   QUICK VIEW CLOSE
============================================================ */

.vcQuickViewClose{

    position:absolute;

    top:16px;
    right:16px;

    z-index:10;

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:50%;

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

    color:
        var(--vc-discover-ink);

    cursor:pointer;

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

}


.vcQuickViewClose:hover{

    transform:
        rotate(90deg);

    background:#edf0f2;

}


.vcQuickViewClose svg{

    width:18px;
    height:18px;

}


/* ============================================================
   QUICK VIEW MEDIA
============================================================ */

.vcQuickViewMedia{

    position:relative;

    z-index:1;

    min-height:600px;

    padding:
        24px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:
        linear-gradient(
            160deg,
            #f9fbfc,
            #edf3f7
        );

}


.vcQuickViewMediaLabel{

    position:relative;

    z-index:2;

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

    font-size:8px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.vcQuickViewImageStage{

    position:relative;

    flex:1;

    min-height:0;

    display:flex;

    align-items:center;

    justify-content:center;

}


.vcQuickViewImageHalo{

    position:absolute;

    width:390px;
    height:390px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95),
            rgba(255,255,255,0)
        );

}


.vcQuickViewImageStage img{

    position:relative;

    z-index:2;

    width:100%;
    height:100%;

    max-height:435px;

    padding:35px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 25px 35px
            rgba(16,47,73,.12)
        );

}


.vcQuickViewNoImage{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

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

}


.vcQuickViewNoImage span{

    font-size:20px;

    font-weight:700;

}


.vcQuickViewNoImage small{

    color:
        var(--vc-discover-muted);

    font-size:9px;

}


.vcQuickViewMediaFoot{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    color:
        var(--vc-discover-muted);

    font-size:8px;

}


.vcQuickViewMediaFoot span:first-child{

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

    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* ============================================================
   QUICK VIEW DISCOUNT
============================================================ */

.vcQuickViewDiscount{

    position:absolute;

    top:20px;
    right:20px;

    z-index:5;

    min-height:32px;

    padding:
        0
        11px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

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

    color:#fff;

    font-size:9px;

    font-weight:800;

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

}


/* ============================================================
   QUICK VIEW CONTENT
============================================================ */

.vcQuickViewContent{

    position:relative;

    z-index:1;

    min-width:0;

    padding:
        46px
        38px
        32px;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

}


/* ============================================================
   QUICK META
============================================================ */

.vcQuickViewMeta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:10px;

}


.vcQuickViewCategory{

    min-width:0;

    overflow:hidden;

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

    font-size:9px;

    font-weight:800;

    letter-spacing:.09em;

    text-transform:uppercase;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.vcQuickViewSku{

    flex-shrink:0;

    color:
        var(--vc-discover-muted);

    font-size:8px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}


/* ============================================================
   QUICK TITLE
============================================================ */

.vcQuickViewTitle{

    margin:0;

    color:
        var(--vc-discover-ink);

    font-size:
        clamp(
            25px,
            3vw,
            34px
        );

    font-weight:650;

    line-height:1.13;

    letter-spacing:-.04em;

}


/* ============================================================
   QUICK RATING
============================================================ */

.vcQuickViewRating{

    min-height:28px;

    margin-top:13px;

    display:flex;

    align-items:center;

    gap:7px;

}


.vcQuickViewRating strong{

    color:
        var(--vc-discover-text);

    font-size:10px;

}


.vcQuickViewRating small{

    color:
        var(--vc-discover-muted);

    font-size:9px;

}


/* ============================================================
   QUICK DESCRIPTION
============================================================ */

.vcQuickViewDescription{

    margin:
        17px
        0
        0;

    color:
        var(--vc-discover-muted);

    font-size:11px;

    line-height:1.7;

}


/* ============================================================
   QUICK BENEFITS
============================================================ */

.vcQuickViewBenefits{

    margin-top:20px;

    display:grid;

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

    gap:9px;

}


.vcQuickViewShipping,
.vcQuickViewSecure{

    min-height:57px;

    padding:
        10px
        11px;

    display:flex;

    align-items:center;

    gap:10px;

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

    border-radius:14px;

    background:
        #f8fafb;

}


.vcQuickViewBenefitIcon{

    width:33px;
    height:33px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:10px;

    background:#fff;

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

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

}


.vcQuickViewBenefitIcon svg{

    width:17px;
    height:17px;

}


.vcQuickViewShipping > span:last-child,
.vcQuickViewSecure > span:last-child{

    min-width:0;

}


.vcQuickViewShipping strong,
.vcQuickViewShipping small,
.vcQuickViewSecure strong,
.vcQuickViewSecure small{

    display:block;

}


.vcQuickViewShipping strong,
.vcQuickViewSecure strong{

    color:
        var(--vc-discover-ink);

    font-size:9px;

}


.vcQuickViewShipping small,
.vcQuickViewSecure small{

    margin-top:2px;

    color:
        var(--vc-discover-muted);

    font-size:7px;

}


/* ============================================================
   QUICK PRICE
============================================================ */

.vcQuickViewPriceBlock{

    margin-top:24px;

    padding:
        18px
        0
        0;

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

}


.vcQuickViewPriceLabel{

    display:block;

    margin-bottom:5px;

    color:
        var(--vc-discover-muted);

    font-size:8px;

    font-weight:700;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.vcQuickViewOldPrice{

    min-height:20px;

    display:flex;

    align-items:center;

    gap:10px;

}


.vcQuickViewOldPrice del{

    color:
        var(--vc-discover-muted);

    font-size:10px;

}


.vcQuickViewOldPrice span{

    color:
        var(--vc-discover-green);

    font-size:9px;

    font-weight:700;

}


.vcQuickViewCurrentPrice{

    margin-top:3px;

    display:flex;

    align-items:baseline;

    gap:6px;

}


.vcQuickViewCurrentPrice strong{

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

    font-size:33px;

    font-weight:800;

    letter-spacing:-.055em;

}


.vcQuickViewCurrentPrice small{

    color:
        var(--vc-discover-muted);

    font-size:8px;

    font-weight:750;

    letter-spacing:.08em;

}


/* ============================================================
   QUICK ACTIONS
============================================================ */

.vcQuickViewActions{

    margin-top:24px;

    display:grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(0,.85fr);

    gap:9px;

}


.vcQuickViewAddCart{

    position:relative;

    min-height:58px;

    padding:
        7px
        8px
        7px
        10px;

    display:flex;

    align-items:center;

    gap:10px;

    overflow:hidden;

    border:0;

    border-radius:16px;

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

    color:#fff;

    font-family:inherit;

    cursor:pointer;

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

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

}


.vcQuickViewAddCart:hover{

    transform:
        translateY(-2px);

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

}


.vcQuickViewAddCartIcon{

    width:39px;
    height:39px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:12px;

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

}


.vcQuickViewAddCartIcon svg{

    width:19px;
    height:19px;

}


.vcQuickViewAddCartCopy{

    min-width:0;

    flex:1;

    text-align:left;

}


.vcQuickViewAddCartCopy small,
.vcQuickViewAddCartCopy strong{

    display:block;

}


.vcQuickViewAddCartCopy small{

    opacity:.62;

    font-size:7px;

}


.vcQuickViewAddCartCopy strong{

    margin-top:2px;

    font-size:10px;

}


.vcQuickViewAddCartArrow{

    width:33px;
    height:33px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:10px;

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

}


.vcQuickViewAddCartArrow svg{

    width:15px;
    height:15px;

    transition:
        transform .2s ease;

}


.vcQuickViewAddCart:hover
.vcQuickViewAddCartArrow svg{

    transform:
        translateX(2px);

}


.vcQuickViewAddCart.is-loading{

    opacity:.7;

    pointer-events:none;

}


.vcQuickViewAddCart.is-success{

    background:
        linear-gradient(
            135deg,
            #1b9866,
            #126743
        );

}


/* ============================================================
   QUICK SECONDARY BUTTON
============================================================ */

.vcQuickViewMainButton{

    min-height:58px;

    padding:
        0
        16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

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

    border-radius:16px;

    background:#fff;

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

    font-size:10px;

    font-weight:750;

    text-decoration:none;

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

}


.vcQuickViewMainButton:hover{

    transform:
        translateY(-2px);

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

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

}


.vcQuickViewMainButton svg{

    width:15px;
    height:15px;

}


/* ============================================================
   QUICK FOOTNOTE
============================================================ */

.vcQuickViewFootnote{

    margin-top:15px;

    display:flex;

    align-items:flex-start;

    gap:7px;

    color:
        var(--vc-discover-muted);

    font-size:7px;

    line-height:1.5;

}


.vcQuickViewFootnoteDot{

    width:6px;
    height:6px;

    margin-top:2px;

    flex-shrink:0;

    border-radius:50%;

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

}


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

@media(max-width:1300px){

    .vcDiscoverGrid{

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

    }

}


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

@media(max-width:1000px){

    .vcDiscover{

        padding:
            95px
            0
            100px;

    }


    .vcDiscoverHeader{

        align-items:flex-start;

    }


    .vcDiscoverHeading h2{

        font-size:
            clamp(
                38px,
                6vw,
                58px
            );

    }


    .vcDiscoverGrid{

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

    }


    .vcQuickViewPanel{

        grid-template-columns:
            1fr
            1fr;

    }


    .vcQuickViewMedia{

        min-height:560px;

    }

}


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

@media(max-width:760px){

    .vcDiscoverInner{

        width:
            calc(100% - 24px);

    }


    .vcDiscoverHeader{

        flex-direction:column;

        gap:24px;

    }


    .vcDiscoverHeaderAction{

        width:100%;

        align-items:flex-start;

    }


    .vcDiscoverAllLink{

        width:100%;

        justify-content:space-between;

    }


    .vcDiscoverStatusMessage{

        display:none;

    }


    .vcProductMedia{

        height:250px;

    }


    .vcQuickView{

        padding:10px;

        align-items:flex-end;

    }


    .vcQuickViewPanel{

        width:100%;

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

        grid-template-columns:1fr;

        border-radius:
            24px
            24px
            20px
            20px;

        overflow-y:auto;

    }


    .vcQuickViewMedia{

        min-height:340px;

    }


    .vcQuickViewImageStage img{

        max-height:260px;

        padding:20px;

    }


    .vcQuickViewContent{

        padding:
            28px
            22px
            25px;

    }


    .vcQuickViewActions{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:560px){

    .vcDiscover{

        padding:
            75px
            0
            80px;

    }


    .vcDiscoverHeading h2{

        font-size:40px;

    }


    .vcDiscoverHeading p{

        font-size:12px;

    }


    .vcDiscoverNavShell{

        margin-left:-4px;
        margin-right:-4px;

        border-radius:17px;

    }


    .vcDiscoverNavArrow{

        display:none;

    }


    .vcDiscoverCategory{

        min-height:40px;

        padding:
            0
            12px;

    }


    .vcDiscoverGrid{

        grid-template-columns:1fr;

        gap:14px;

    }


    .vcProductCard{

        border-radius:22px;

    }


    .vcProductMedia{

        height:285px;

    }


    .vcProductQuickButton{

        opacity:1;

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

    }


    .vcProductBody{

        padding:
            18px
            17px
            16px;

    }


    .vcProductTitle a{

        font-size:17px;

    }


    .vcProductDescription{

        font-size:10px;

    }


    .vcProductCurrentPrice > strong{

        font-size:25px;

    }


    .vcDiscoverMore{

        min-width:0;

        width:100%;

    }


    .vcQuickViewMedia{

        min-height:300px;

        padding:18px;

    }


    .vcQuickViewMediaFoot{

        display:none;

    }


    .vcQuickViewBenefits{

        grid-template-columns:1fr;

    }


    .vcQuickViewTitle{

        font-size:26px;

    }


    .vcQuickViewCurrentPrice strong{

        font-size:31px;

    }

}


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

body.vcQuickViewOpen{

    overflow:hidden;

}

/* ============================================================
   JS ENHANCEMENTS
============================================================ */

.vcDiscoverCartSpinner{

    width:15px;
    height:15px;

    display:block;

    border:
        2px solid
        rgba(255,255,255,.28);

    border-top-color:#fff;

    border-radius:50%;

    animation:
        vcDiscoverCartSpin
        .65s linear infinite;

}


@keyframes vcDiscoverCartSpin{

    to{

        transform:
            rotate(360deg);

    }

}


/* reveal */

.js .vcProductCard{

    opacity:0;

    transform:
        translateY(18px);

}


.js .vcProductCard.vcDiscoverRevealed{

    opacity:1;

    transform:
        translateY(0);

}


/* optional richer mouse depth */

@media(pointer:fine){

    .vcProductCard:hover
    .vcProductImageLink img{

        transform:
            translate(
                calc(
                    var(--vc-card-x,0) *
                    5px
                ),
                calc(
                    var(--vc-card-y,0) *
                    4px
                )
            )
            scale(1.04);

    }

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