/* ============================================================
   VENTACTIVE
   FEATURED PROMOTION
============================================================ */

.vcFeaturedPromotion {
    position: relative;
    padding:
        clamp(76px, 8vw, 125px)
        clamp(18px, 4vw, 70px);
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #fbfbfd 0%,
            #ffffff 100%
        );
}


.vcFeaturedPromotionInner {
    width: min(1560px, 100%);
    margin: 0 auto;
}


/* ============================================================
   TOP
============================================================ */

.vcFeaturedPromotionTop {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 30px;
    margin-bottom: 30px;
}


.vcFeaturedPromotionTop > div:first-child {
    max-width: 800px;
}


.vcFeaturedPromotionTop h2 {
    margin: 0;
    font-size:
        clamp(
            40px,
            4.5vw,
            68px
        );
    line-height: 1.01;
    letter-spacing: -0.052em;
    font-weight: 500;
    color: #171b23;
}


.vcFeaturedPromotionTop h2 strong {
    display: block;
    font-weight: 800;
}


/* ============================================================
   TOP META
============================================================ */

.vcFeaturedPromotionTopMeta {
    min-width: 145px;
    display: grid;
    gap: 4px;
    padding:
        15px
        18px;
    border:
        1px solid
        rgba(15, 23, 42, 0.07);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 15px 40px
        rgba(15, 23, 42, 0.05);
    text-align: right;
}


.vcFeaturedPromotionTopMeta span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #9ca3ae;
}


.vcFeaturedPromotionTopMeta strong {
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #ff4b70;
}


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

.vcFeaturedPromotionCard {
    position: relative;
    min-height: 610px;
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(400px, .88fr);
    overflow: hidden;
    border:
        1px solid
        rgba(255, 255, 255, 0.08);
    border-radius: 42px;
    background: #141821;
    box-shadow:
        0 38px 100px
        rgba(15, 23, 42, 0.18);
    isolation: isolate;
}


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

.vcFeaturedPromotionBackground {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}


.vcFeaturedPromotionBackground::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 19% 48%,
            rgba(255, 74, 111, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 86% 10%,
            rgba(120, 134, 255, 0.10),
            transparent 27%
        ),
        linear-gradient(
            125deg,
            #161a23 0%,
            #11151d 55%,
            #171b25 100%
        );
}


.vcFeaturedPromotionGlow {
    position: absolute;
    width: 620px;
    height: 620px;
    left: -120px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 85, 120, 0.20),
            rgba(255, 85, 120, 0.05) 40%,
            transparent 70%
        );
    filter: blur(5px);
}


.vcFeaturedPromotionGrid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size: 44px 44px;
    mask-image:
        linear-gradient(
            90deg,
            #000,
            transparent 75%
        );
}


/* ============================================================
   VISUAL
============================================================ */

.vcFeaturedPromotionVisual {
    position: relative;
    min-width: 0;
    min-height: 610px;
    display: grid;
    place-items: center;
    padding:
        60px
        55px;
}


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

.vcFeaturedPromotionImage {
    position: relative;
    z-index: 2;
    width: min(650px, 92%);
    height: 470px;
    display: grid;
    place-items: center;
    text-decoration: none;
}


.vcFeaturedPromotionImage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5%;
    width: 72%;
    height: 12%;
    transform:
        translateX(-50%);
    border-radius: 50%;
    background:
        rgba(0, 0, 0, 0.25);
    filter: blur(25px);
    opacity: .65;
}


.vcFeaturedPromotionImage img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(
            0 35px 35px
            rgba(0,0,0,.25)
        );
    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}


.vcFeaturedPromotionImage:hover img {
    transform:
        translateY(-7px)
        scale(1.035);
    filter:
        drop-shadow(
            0 42px 42px
            rgba(0,0,0,.32)
        );
}


/* ============================================================
   SAVINGS BADGE
============================================================ */

.vcFeaturedPromotionBadge {
    position: absolute;
    top: 34px;
    left: 34px;
    z-index: 5;
    display: grid;
    gap: 2px;
    padding:
        13px
        17px;
    border:
        1px solid
        rgba(255,255,255,.12);
    border-radius: 17px;
    background:
        rgba(255,255,255,.08);
    backdrop-filter:
        blur(15px);
    box-shadow:
        0 18px 45px
        rgba(0,0,0,.15);
}


.vcFeaturedPromotionBadge span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color:
        rgba(255,255,255,.55);
}


.vcFeaturedPromotionBadge strong {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -.03em;
    color: #ffffff;
}


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

.vcFeaturedPromotionContent {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(
            45px,
            5vw,
            80px
        );
    border-left:
        1px solid
        rgba(255,255,255,.07);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );
}


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

.vcFeaturedPromotionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}


.vcFeaturedPromotionLabel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ff6a87;
}


.vcFeaturedPromotionLabel::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5879;
    box-shadow:
        0 0 0 5px
        rgba(255, 88, 121, .10);
}


.vcFeaturedPromotionSku {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:
        rgba(255,255,255,.35);
}


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

.vcFeaturedPromotionContent h3 {
    margin: 0;
    max-width: 620px;
    font-size:
        clamp(
            36px,
            3.6vw,
            58px
        );
    line-height: 1.03;
    letter-spacing: -.05em;
    font-weight: 750;
    color: #ffffff;
}


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

.vcFeaturedPromotionPrice {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 27px;
}


.vcFeaturedPromotionPrice > span {
    font-size: 16px;
    font-weight: 650;
    color:
        rgba(255,255,255,.38);
    text-decoration: line-through;
}


.vcFeaturedPromotionPrice > strong {
    font-size:
        clamp(
            34px,
            3.4vw,
            50px
        );
    line-height: 1;
    letter-spacing: -.045em;
    color: #ff6683;
}


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

.vcFeaturedPromotionSaving {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 27px;
    padding:
        14px
        16px;
    border:
        1px solid
        rgba(255,255,255,.07);
    border-radius: 18px;
    background:
        rgba(255,255,255,.035);
}


.vcFeaturedPromotionSavingIcon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background:
        rgba(255, 91, 123, .11);
    color: #ff6683;
}


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


.vcFeaturedPromotionSaving > div {
    display: grid;
    gap: 2px;
}


.vcFeaturedPromotionSaving > div > span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color:
        rgba(255,255,255,.37);
}


.vcFeaturedPromotionSaving > div > strong {
    font-size: 13px;
    color:
        rgba(255,255,255,.88);
}


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

.vcFeaturedPromotionShipping {
    margin-top: 17px;
}


.vcFeaturedPromotionShipping > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding:
        7px
        11px;
    border:
        1px solid
        rgba(255,255,255,.06);
    border-radius: 999px;
    background:
        rgba(255,255,255,.045);
    font-size: 11px;
    font-weight: 700;
    color:
        rgba(255,255,255,.55);
}


.vcFeaturedPromotionShipping strong {
    color:
        rgba(255,255,255,.9);
}


.vcFeaturedPromotionShipping .is-free {
    border-color:
        rgba(63, 208, 143, .10);
    background:
        rgba(44, 190, 122, .09);
    color: #66d8a2;
}


.vcFeaturedPromotionShipping svg {
    width: 14px;
    height: 14px;
}


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

.vcFeaturedPromotionActions {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 10px;
    margin-top: 30px;
}


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

.vcFeaturedPromotionCart {
    min-width: 0;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding:
        0
        23px;
    border: 0;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #ff456c,
            #ff6985
        );
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    box-shadow:
        0 17px 38px
        rgba(255, 69, 108, .22);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}


.vcFeaturedPromotionCart:hover {
    transform:
        translateY(-2px);
    box-shadow:
        0 22px 44px
        rgba(255, 69, 108, .30);
}


.vcFeaturedPromotionCart:active {
    transform:
        translateY(0);
}


.vcFeaturedPromotionCart:disabled {
    cursor: default;
    opacity: .65;
    transform: none;
}


.vcFeaturedPromotionCartIcon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background:
        rgba(255,255,255,.14);
}


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


/* ============================================================
   VIEW PRODUCT
============================================================ */

.vcFeaturedPromotionView {
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding:
        0
        20px;
    border:
        1px solid
        rgba(255,255,255,.10);
    border-radius: 18px;
    background:
        rgba(255,255,255,.045);
    color:
        rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease;
}


.vcFeaturedPromotionView:hover {
    transform:
        translateY(-2px);
    border-color:
        rgba(255,255,255,.18);
    background:
        rgba(255,255,255,.08);
    color: #ffffff;
}


.vcFeaturedPromotionView svg {
    width: 15px;
    height: 15px;
    transition:
        transform .25s ease;
}


.vcFeaturedPromotionView:hover svg {
    transform:
        translateX(3px);
}


/* ============================================================
   BIG DISCOUNT
============================================================ */

.vcFeaturedPromotionDiscount {
    position: absolute;
    right: 28px;
    top: 24px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    pointer-events: none;
    user-select: none;
}


.vcFeaturedPromotionDiscount > span {
    margin-top: 11px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .15em;
    color:
        rgba(255,255,255,.18);
    writing-mode: vertical-rl;
}


.vcFeaturedPromotionDiscount > strong {
    display: flex;
    align-items: flex-start;
    font-size:
        clamp(
            68px,
            7vw,
            112px
        );
    line-height: .8;
    letter-spacing: -.075em;
    font-weight: 900;
    color:
        rgba(255,255,255,.035);
}


.vcFeaturedPromotionDiscount small {
    margin:
        5px
        0
        0
        3px;
    font-size: .35em;
}


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

.vcFeaturedPromotionCard {
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


.vcFeaturedPromotionCard:hover {
    transform:
        translateY(-4px);
    box-shadow:
        0 48px 120px
        rgba(15, 23, 42, .23);
}


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

.vcFeaturedPromotionEmpty {
    position: relative;
    padding:
        clamp(
            60px,
            8vw,
            100px
        )
        30px;
    overflow: hidden;
    border-radius: 38px;
    background:
        linear-gradient(
            135deg,
            #151922,
            #1d222c
        );
    text-align: center;
    box-shadow:
        0 30px 80px
        rgba(15, 23, 42, .16);
}


.vcFeaturedPromotionEmpty h2 {
    margin: 0;
    font-size:
        clamp(
            38px,
            4vw,
            58px
        );
    line-height: 1.04;
    letter-spacing: -.05em;
    font-weight: 500;
    color: #ffffff;
}


.vcFeaturedPromotionEmpty h2 strong {
    display: block;
    font-weight: 800;
}


.vcFeaturedPromotionEmpty p {
    margin:
        17px
        auto
        24px;
    color:
        rgba(255,255,255,.55);
}


.vcFeaturedPromotionEmpty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding:
        0
        21px;
    border-radius: 999px;
    background: #ffffff;
    color: #171b23;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}


.vcFeaturedPromotionEmpty a svg {
    width: 15px;
    height: 15px;
}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1200px) {

    .vcFeaturedPromotionCard {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, .9fr);
    }


    .vcFeaturedPromotionVisual {
        padding:
            50px
            35px;
    }


    .vcFeaturedPromotionImage {
        height: 420px;
    }


    .vcFeaturedPromotionContent {
        padding:
            48px
            42px;
    }

}


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

@media (max-width: 950px) {

    .vcFeaturedPromotionTop {
        grid-template-columns:
            1fr;
        align-items: start;
    }


    .vcFeaturedPromotionTopMeta {
        width: max-content;
        text-align: left;
    }


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


    .vcFeaturedPromotionVisual {
        min-height: 500px;
    }


    .vcFeaturedPromotionImage {
        width: min(580px, 90%);
        height: 400px;
    }


    .vcFeaturedPromotionContent {
        border-left: 0;
        border-top:
            1px solid
            rgba(255,255,255,.07);
        padding:
            48px
            42px;
    }


    .vcFeaturedPromotionDiscount {
        right: 24px;
    }

}


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

@media (max-width: 650px) {

    .vcFeaturedPromotion {
        padding:
            64px
            16px;
    }


    .vcFeaturedPromotionTop {
        gap: 18px;
        margin-bottom: 24px;
    }


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


    .vcFeaturedPromotionTopMeta {
        width: 100%;
    }


    .vcFeaturedPromotionCard {
        min-height: 0;
        border-radius: 29px;
    }


    .vcFeaturedPromotionVisual {
        min-height: 390px;
        padding:
            40px
            18px
            28px;
    }


    .vcFeaturedPromotionImage {
        width: 100%;
        height: 300px;
    }


    .vcFeaturedPromotionBadge {
        top: 18px;
        left: 18px;
        padding:
            10px
            13px;
    }


    .vcFeaturedPromotionBadge strong {
        font-size: 16px;
    }


    .vcFeaturedPromotionContent {
        padding:
            34px
            22px;
    }


    .vcFeaturedPromotionHeader {
        margin-bottom: 18px;
    }


    .vcFeaturedPromotionContent h3 {
        font-size:
            clamp(
                31px,
                9.5vw,
                42px
            );
    }


    .vcFeaturedPromotionPrice {
        margin-top: 22px;
    }


    .vcFeaturedPromotionPrice > strong {
        font-size: 34px;
    }


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


    .vcFeaturedPromotionCart,
    .vcFeaturedPromotionView {
        width: 100%;
    }


    .vcFeaturedPromotionDiscount {
        right: 16px;
        top: 18px;
    }


    .vcFeaturedPromotionDiscount > strong {
        font-size: 65px;
    }

}


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

@media (max-width: 430px) {

    .vcFeaturedPromotionVisual {
        min-height: 345px;
    }


    .vcFeaturedPromotionImage {
        height: 260px;
    }


    .vcFeaturedPromotionContent {
        padding:
            30px
            18px;
    }


    .vcFeaturedPromotionSaving {
        align-items: flex-start;
    }


    .vcFeaturedPromotionDiscount {
        opacity: .65;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .vcFeaturedPromotionCard,
    .vcFeaturedPromotionImage img,
    .vcFeaturedPromotionCart,
    .vcFeaturedPromotionView,
    .vcFeaturedPromotionView svg {
        transition: none;
    }

}