/* ============================================================
   VENTACTIVE
   FEATURED PRODUCTS
============================================================ */

.vcFeatured{
    position:relative;
    overflow:hidden;

    padding:
        105px
        0
        100px;

    background:#151517;

    color:#fff;
}


.vcFeatured *{
    box-sizing:border-box;
}


.vcFeaturedInner{
    width:
        min(
            1440px,
            calc(100% - 72px)
        );

    margin:0 auto;
}


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

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

    gap:50px;

    margin-bottom:48px;
}


.vcFeaturedHeading{
    max-width:760px;
}


.vcFeaturedEyebrow{
    display:block;

    margin-bottom:17px;

    color:#aaaab0;

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

    letter-spacing:.14em;

    text-transform:uppercase;
}


.vcFeaturedHeading h2{
    margin:0;

    max-width:720px;

    color:#fff;

    font-size:
        clamp(
            39px,
            4.8vw,
            70px
        );

    font-weight:430;

    line-height:.99;

    letter-spacing:-.052em;
}


.vcFeaturedHeading h2 strong{
    font-weight:730;
}


.vcFeaturedHeading p{
    max-width:620px;

    margin:
        22px
        0
        0;

    color:#aaaab0;

    font-size:16px;

    line-height:1.65;
}


/* ============================================================
   ARROWS
============================================================ */

.vcFeaturedControls{
    display:flex;

    gap:9px;

    flex:none;
}


.vcFeaturedArrow{
    display:grid;
    place-items:center;

    width:49px;
    height:49px;

    padding:0;

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

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

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


.vcFeaturedArrow:hover{
    background:#fff;

    border-color:#fff;

    color:#171719;

    transform:
        translateY(-2px);
}


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


/* ============================================================
   VIEWPORT
============================================================ */

.vcFeaturedViewport{
    width:100%;

    overflow:hidden;
}


.vcFeaturedTrack{
    display:flex;

    gap:18px;

    overflow-x:auto;

    padding:
        2px
        1px
        8px;

    scroll-behavior:smooth;

    scroll-snap-type:
        x
        mandatory;

    scrollbar-width:none;
}


.vcFeaturedTrack::-webkit-scrollbar{
    display:none;
}


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

.vcFeaturedCard{
    flex:
        0
        0
        calc(
            (100% - 54px)
            / 4
        );

    min-width:0;

    scroll-snap-align:start;
}


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

.vcFeaturedMedia{
    position:relative;

    display:block;

    overflow:hidden;

    aspect-ratio:
        1
        /
        1.13;

    border-radius:22px;

    background:#222225;

    text-decoration:none;

    isolation:isolate;
}


.vcFeaturedMedia img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:
        scale(1.001);

    transition:
        transform
        .75s
        cubic-bezier(.2,.7,.2,1);
}


.vcFeaturedCard:hover
.vcFeaturedMedia img{
    transform:
        scale(1.055);
}


.vcFeaturedNoImage{
    display:grid;
    place-items:center;

    width:100%;
    height:100%;

    background:
        radial-gradient(
            circle
            at
            50%
            30%,
            #36363a,
            #202023
        );

    color:#747478;

    font-size:20px;

    font-weight:750;
}


.vcFeaturedMediaOverlay{
    position:absolute;

    z-index:1;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.45)
            0%,
            transparent
            48%
        );

    opacity:.55;

    transition:
        opacity .35s ease;
}


.vcFeaturedCard:hover
.vcFeaturedMediaOverlay{
    opacity:.9;
}


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

.vcFeaturedDiscount{
    position:absolute;

    z-index:5;

    top:14px;
    left:14px;

    display:flex;
    align-items:center;

    gap:7px;

    min-height:34px;

    padding:
        0
        12px;

    border-radius:999px;

    background:#fff;

    color:#161618;

    box-shadow:
        0
        10px
        30px
        rgba(0,0,0,.18);
}


.vcFeaturedDiscount strong{
    font-size:11px;

    font-weight:850;
}


.vcFeaturedDiscount small{
    font-size:9px;

    font-weight:650;

    color:#85858a;
}


.vcFeaturedTopBadge{
    position:absolute;

    z-index:5;

    top:14px;
    right:14px;

    padding:
        9px
        12px;

    border-radius:999px;

    background:
        rgba(20,20,22,.68);

    backdrop-filter:
        blur(12px);

    color:#fff;

    font-size:9px;

    font-weight:750;

    letter-spacing:.04em;
}


/* ============================================================
   SEE PRODUCT
============================================================ */

.vcFeaturedSee{
    position:absolute;

    z-index:5;

    left:18px;
    bottom:17px;

    display:flex;
    align-items:center;

    gap:9px;

    color:#fff;

    font-size:11px;

    font-weight:700;

    opacity:0;

    transform:
        translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.vcFeaturedCard:hover
.vcFeaturedSee{
    opacity:1;

    transform:
        translateY(0);
}


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


/* ============================================================
   INFO
============================================================ */

.vcFeaturedInfo{
    padding:
        17px
        3px
        0;
}


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

    gap:10px;

    margin-bottom:7px;
}


.vcFeaturedMeta > span{
    overflow:hidden;

    color:#85858b;

    font-size:9px;

    font-weight:730;

    letter-spacing:.08em;

    text-overflow:ellipsis;

    text-transform:uppercase;

    white-space:nowrap;
}


.vcFeaturedMeta small{
    flex:none;

    color:#77ba92;

    font-size:9px;

    font-weight:700;
}


.vcFeaturedInfo h3{
    margin:0;

    font-size:17px;

    line-height:1.3;

    letter-spacing:-.025em;
}


.vcFeaturedInfo h3 a{
    color:#fff;

    text-decoration:none;
}


.vcFeaturedInfo h3 a:hover{
    text-decoration:underline;

    text-underline-offset:4px;
}


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

.vcFeaturedRating{
    display:flex;
    align-items:center;

    gap:6px;

    margin-top:9px;
}


.vcFeaturedStars{
    position:relative;

    display:inline-block;

    width:66px;

    font-size:11px;

    line-height:1;

    letter-spacing:1px;
}


.vcFeaturedStarsBack{
    display:block;

    color:#454549;
}


.vcFeaturedStarsFront{
    position:absolute;

    top:0;
    left:0;

    overflow:hidden;

    color:#e0ad37;

    white-space:nowrap;
}


.vcFeaturedRating strong{
    color:#d7d7da;

    font-size:10px;
}


.vcFeaturedRating small{
    color:#737378;

    font-size:9px;
}


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

.vcFeaturedInfo p{
    display:
        -webkit-box;

    overflow:hidden;

    min-height:39px;

    margin:
        11px
        0
        18px;

    color:#818187;

    font-size:11px;

    line-height:1.55;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;
}


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

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

    gap:15px;
}


.vcFeaturedPrice > strong{
    display:block;

    color:#fff;

    font-size:21px;

    line-height:1;

    letter-spacing:-.025em;
}


.vcFeaturedPriceOffer{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:7px;
}


.vcFeaturedPriceOffer del{
    color:#77777c;

    font-size:10px;
}


.vcFeaturedPriceOffer span{
    color:#d5a74e;

    font-size:9px;

    font-weight:700;
}


.vcFeaturedGo{
    display:grid;
    place-items:center;

    flex:none;

    width:39px;
    height:39px;

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

    border-radius:50%;

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

    color:#fff;

    text-decoration:none;

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


.vcFeaturedGo:hover{
    background:#fff;

    color:#161618;

    transform:
        translateX(3px);
}


.vcFeaturedGo svg{
    width:17px;
    height:17px;
}


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

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

    gap:40px;

    margin-top:45px;
}


.vcFeaturedProgress{
    position:relative;

    width:min(500px, 50%);

    height:2px;

    overflow:hidden;

    border-radius:5px;

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


.vcFeaturedProgress span{
    position:absolute;

    inset:
        0
        auto
        0
        0;

    width:0;

    background:#fff;

    transition:
        width .25s ease;
}


.vcFeaturedExplore{
    display:flex;
    align-items:center;

    gap:12px;

    color:#fff;

    font-size:12px;

    font-weight:700;

    text-decoration:none;
}


.vcFeaturedExplore svg{
    width:17px;
    height:17px;

    transition:
        transform .25s ease;
}


.vcFeaturedExplore:hover svg{
    transform:
        translateX(4px);
}


/* ============================================================
   TABLET
============================================================ */

@media(max-width:1100px){

    .vcFeaturedCard{
        flex-basis:
            calc(
                (100% - 36px)
                / 3
            );
    }

}


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

@media(max-width:800px){

    .vcFeatured{
        padding:
            75px
            0
            80px;
    }


    .vcFeaturedInner{
        width:
            calc(
                100% - 34px
            );
    }


    .vcFeaturedHeader{
        display:block;

        margin-bottom:35px;
    }


    .vcFeaturedControls{
        margin-top:26px;
    }


    .vcFeaturedCard{
        flex-basis:
            min(
                74vw,
                330px
            );
    }


    .vcFeaturedMedia{
        border-radius:19px;
    }


    .vcFeaturedSee{
        opacity:1;

        transform:none;
    }


    .vcFeaturedFooter{
        margin-top:35px;
    }


    .vcFeaturedProgress{
        width:55%;
    }

}


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

@media(max-width:500px){

    .vcFeaturedHeading h2{
        font-size:
            clamp(
                38px,
                11vw,
                53px
            );
    }


    .vcFeaturedHeading p{
        font-size:14px;
    }


    .vcFeaturedCard{
        flex-basis:
            78vw;
    }


    .vcFeaturedFooter{
        display:block;
    }


    .vcFeaturedProgress{
        width:100%;

        margin-bottom:25px;
    }

}

.vcFeaturedNoImage{
    position:relative;

    display:grid;
    place-items:center;

    width:100%;
    height:100%;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            #29292d 0%,
            #202023 52%,
            #19191c 100%
        );
}


.vcFeaturedNoImage::before{
    content:"";

    position:absolute;

    width:60%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.055),
            transparent 70%
        );

    transition:
        transform .6s ease;
}


.vcFeaturedNoImageBrand{
    position:relative;
    z-index:2;

    width:31%;
    max-width:110px;

    opacity:.22;

    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.2,.7,.2,1);
}


.vcFeaturedNoImageBrand img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;

    filter:
        grayscale(1)
        brightness(3);
}


.vcFeaturedCard:hover
.vcFeaturedNoImageBrand{
    opacity:.34;

    transform:scale(1.06);
}