/* ============================================================
   VENTACTIVE
   PROMOTIONS HERO
============================================================ */

.vcPromoHero {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    padding:
        clamp(120px, 10vw, 170px)
        clamp(22px, 5vw, 82px)
        46px;
    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(255, 225, 235, 0.95),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 22%,
            rgba(232, 238, 255, 0.9),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #fffafb 0%,
            #ffffff 45%,
            #f8f9ff 100%
        );
    isolation: isolate;
}


.vcPromoHero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.55) 48%,
            rgba(255,255,255,0) 100%
        );
    opacity: 0.8;
    z-index: -1;
}


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

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


.vcPromoHeroOrb {
    position: absolute;
    border-radius: 999px;
    filter: blur(20px);
    opacity: 0.52;
}


.vcPromoHeroOrbOne {
    width: 520px;
    height: 520px;
    top: -170px;
    right: 3%;
    background:
        radial-gradient(
            circle,
            rgba(255, 78, 112, 0.24),
            rgba(255, 78, 112, 0)
        );
}


.vcPromoHeroOrbTwo {
    width: 430px;
    height: 430px;
    bottom: -150px;
    left: 6%;
    background:
        radial-gradient(
            circle,
            rgba(86, 110, 255, 0.18),
            rgba(86, 110, 255, 0)
        );
}


.vcPromoHeroGrid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(15, 23, 42, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.035) 1px,
            transparent 1px
        );
    background-size: 46px 46px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.7),
            transparent 85%
        );
}


.vcPromoHeroNoise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(
            circle at 25% 25%,
            #000 0.6px,
            transparent 0.6px
        );
    background-size: 8px 8px;
}


/* ============================================================
   INNER
============================================================ */

.vcPromoHeroInner {
    width: min(1560px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(460px, 1.05fr);
    align-items: center;
    gap: clamp(60px, 7vw, 130px);
}


/* ============================================================
   COPY
============================================================ */

.vcPromoHeroCopy {
    position: relative;
    z-index: 3;
    max-width: 720px;
}


.vcPromoHeroEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding:
        8px
        13px;
    border:
        1px solid
        rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background:
        rgba(255,255,255,0.72);
    backdrop-filter:
        blur(12px);
    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, 0.05);
}


.vcPromoHeroEyebrowDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #ff456c,
            #ff7b93
        );
    box-shadow:
        0 0 0 5px
        rgba(255, 69, 108, 0.1);
}


.vcPromoHeroEyebrow span:last-child {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #5e6574;
}


.vcPromoHeroTitle {
    margin: 0;
    max-width: 760px;
    font-size:
        clamp(
            54px,
            5.3vw,
            92px
        );
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 500;
    color: #11151d;
}


.vcPromoHeroTitle strong {
    display: block;
    font-weight: 800;
    background:
        linear-gradient(
            100deg,
            #ff3d68,
            #ff6f88 45%,
            #ff8ea1
        );
    -webkit-background-clip:
        text;
    background-clip:
        text;
    color:
        transparent;
}


.vcPromoHeroDescription {
    width: min(630px, 100%);
    margin:
        28px
        0
        0;
    font-size:
        clamp(
            17px,
            1.25vw,
            21px
        );
    line-height: 1.72;
    color: #697180;
}


/* ============================================================
   STATS
============================================================ */

.vcPromoHeroStats {
    display: inline-flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 34px;
    padding:
        18px
        22px;
    border:
        1px solid
        rgba(15, 23, 42, 0.075);
    border-radius: 22px;
    background:
        rgba(255,255,255,0.68);
    backdrop-filter:
        blur(15px);
    box-shadow:
        0 18px 50px
        rgba(15, 23, 42, 0.05);
}


.vcPromoHeroStat {
    display: grid;
    gap: 2px;
}


.vcPromoHeroStat > span {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 700;
    color: #9299a5;
}


.vcPromoHeroStat strong {
    margin-top: 4px;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #161a22;
}


.vcPromoHeroStat small {
    margin-top: 2px;
    font-size: 12px;
    color: #818895;
}


.vcPromoHeroStatDivider {
    width: 1px;
    align-self: stretch;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(15, 23, 42, 0.13),
            transparent
        );
}


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

.vcPromoHeroActions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}


.vcPromoHeroPrimary,
.vcPromoHeroSecondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    border-radius: 999px;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.vcPromoHeroPrimary {
    padding:
        0
        18px
        0
        24px;
    background:
        #151922;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    box-shadow:
        0 14px 30px
        rgba(17, 24, 39, 0.18);
}


.vcPromoHeroPrimary:hover {
    transform:
        translateY(-2px);
    box-shadow:
        0 18px 36px
        rgba(17, 24, 39, 0.24);
}


.vcPromoHeroPrimaryIcon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:
        rgba(255,255,255,0.12);
}


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


.vcPromoHeroSecondary {
    padding:
        0
        22px;
    border:
        1px solid
        rgba(15, 23, 42, 0.1);
    color: #3f4653;
    background:
        rgba(255,255,255,0.66);
    backdrop-filter:
        blur(12px);
    font-size: 14px;
    font-weight: 700;
}


.vcPromoHeroSecondary:hover {
    transform:
        translateY(-2px);
    background:
        rgba(255,255,255,0.95);
    border-color:
        rgba(15, 23, 42, 0.16);
}


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


/* ============================================================
   TRUST
============================================================ */

.vcPromoHeroTrust {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    font-size: 12px;
    color: #8b929e;
}


.vcPromoHeroTrustIcon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        rgba(38, 177, 116, 0.09);
    color: #17925d;
}


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


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

.vcPromoHeroVisual {
    position: relative;
    min-height: 590px;
    display: grid;
    place-items: center;
    perspective: 1400px;
}


.vcPromoHeroVisualGlow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 97, 130, 0.14),
            rgba(255, 97, 130, 0.045) 45%,
            transparent 72%
        );
    filter: blur(2px);
}


/* ============================================================
   MAIN PRODUCT
============================================================ */

.vcPromoHeroMainProduct {
    position: relative;
    width:
        min(
            480px,
            74vw
        );
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding:
        34px
        34px
        30px;
    border:
        1px solid
        rgba(255,255,255,0.9);
    border-radius: 44px;
    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,0.95),
            rgba(248,249,253,0.83)
        );
    backdrop-filter:
        blur(22px);
    box-shadow:
        0 40px 110px
        rgba(46, 52, 66, 0.15),
        inset
        0 1px 0
        rgba(255,255,255,0.95);
    text-decoration: none;
    color: inherit;
    transform:
        rotateY(-5deg)
        rotateX(1.8deg);
    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.45s ease;
    z-index: 4;
}


.vcPromoHeroMainProduct:hover {
    transform:
        rotateY(-1deg)
        rotateX(0deg)
        translateY(-7px);
    box-shadow:
        0 52px 130px
        rgba(46, 52, 66, 0.21),
        inset
        0 1px 0
        rgba(255,255,255,1);
}


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

.vcPromoHeroDiscount {
    position: absolute;
    top: 26px;
    left: 26px;
    z-index: 5;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding:
        13px
        16px;
    border-radius: 18px;
    background:
        #161a22;
    color: #ffffff;
    box-shadow:
        0 14px 28px
        rgba(16, 20, 28, 0.2);
}


.vcPromoHeroDiscount span {
    font-size: 18px;
    font-weight: 500;
}


.vcPromoHeroDiscount strong {
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}


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

.vcPromoHeroMainImage {
    width: 100%;
    height: 330px;
    display: grid;
    place-items: center;
    padding:
        40px
        25px
        10px;
}


.vcPromoHeroMainImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(
            0 27px 27px
            rgba(37, 43, 56, 0.16)
        );
    transition:
        transform
        0.5s
        cubic-bezier(.2,.8,.2,1);
}


.vcPromoHeroMainProduct:hover
.vcPromoHeroMainImage img {
    transform:
        translateY(-5px)
        scale(1.035);
}


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

.vcPromoHeroProductInfo {
    padding-top: 14px;
}


.vcPromoHeroSku {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #9ba1ad;
}


.vcPromoHeroProductInfo h2 {
    margin: 0;
    max-width: 88%;
    font-size:
        clamp(
            22px,
            2vw,
            30px
        );
    line-height: 1.16;
    letter-spacing: -0.035em;
    color: #171b24;
}


.vcPromoHeroPrices {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 18px;
}


.vcPromoHeroPrices span {
    font-size: 14px;
    font-weight: 600;
    color: #9ca2ad;
    text-decoration: line-through;
}


.vcPromoHeroPrices strong {
    font-size: 28px;
    letter-spacing: -0.04em;
    color: #ff456c;
}


/* ============================================================
   PRODUCT ARROW
============================================================ */

.vcPromoHeroProductArrow {
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        #171b24;
    color: #ffffff;
    transition:
        transform
        0.25s
        ease;
}


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


.vcPromoHeroMainProduct:hover
.vcPromoHeroProductArrow {
    transform:
        translateX(4px);
}


/* ============================================================
   FLOATING PRODUCTS
============================================================ */

.vcPromoHeroFloating {
    position: absolute;
    width: 128px;
    height: 150px;
    display: grid;
    place-items: center;
    padding: 14px;
    border:
        1px solid
        rgba(255,255,255,0.95);
    border-radius: 28px;
    background:
        rgba(255,255,255,0.83);
    backdrop-filter:
        blur(18px);
    box-shadow:
        0 24px 60px
        rgba(47, 54, 70, 0.12);
    text-decoration: none;
    z-index: 6;
    transition:
        transform
        0.35s
        cubic-bezier(.2,.8,.2,1),
        box-shadow
        0.35s
        ease;
}


.vcPromoHeroFloating:hover {
    box-shadow:
        0 32px 74px
        rgba(47, 54, 70, 0.18);
}


.vcPromoHeroFloating1 {
    top: 47px;
    right: -8px;
    animation:
        vcPromoFloatOne
        5.5s
        ease-in-out
        infinite;
}


.vcPromoHeroFloating2 {
    left: -25px;
    top: 220px;
    animation:
        vcPromoFloatTwo
        6.5s
        ease-in-out
        infinite;
}


.vcPromoHeroFloating3 {
    right: 12px;
    bottom: 54px;
    animation:
        vcPromoFloatThree
        5.8s
        ease-in-out
        infinite;
}


.vcPromoHeroFloatingImage {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}


.vcPromoHeroFloatingImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(
            0 12px 14px
            rgba(20, 25, 35, 0.12)
        );
}


.vcPromoHeroFloatingDiscount {
    position: absolute;
    top: -9px;
    right: -8px;
    z-index: 2;
    padding:
        6px
        9px;
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            #ff426a,
            #ff758f
        );
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    box-shadow:
        0 10px 22px
        rgba(255, 66, 106, 0.25);
}


/* ============================================================
   SAVING BADGE
============================================================ */

.vcPromoHeroSavingBadge {
    position: absolute;
    left: 12px;
    bottom: 4px;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 11px;
    padding:
        12px
        15px;
    border:
        1px solid
        rgba(255,255,255,0.95);
    border-radius: 18px;
    background:
        rgba(255,255,255,0.9);
    backdrop-filter:
        blur(16px);
    box-shadow:
        0 20px 48px
        rgba(37, 43, 56, 0.13);
}


.vcPromoHeroSavingIcon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background:
        rgba(255, 69, 108, 0.09);
    color: #ff456c;
}


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


.vcPromoHeroSavingBadge > span:last-child {
    display: grid;
    gap: 2px;
}


.vcPromoHeroSavingBadge small {
    font-size: 10px;
    font-weight: 700;
    color: #959ba7;
}


.vcPromoHeroSavingBadge strong {
    font-size: 17px;
    line-height: 1;
    color: #171b23;
}


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

.vcPromoHeroEmpty {
    width:
        min(
            460px,
            100%
        );
    padding: 48px;
    border:
        1px solid
        rgba(15, 23, 42, 0.07);
    border-radius: 38px;
    background:
        rgba(255,255,255,0.72);
    backdrop-filter:
        blur(18px);
    text-align: center;
    box-shadow:
        0 28px 80px
        rgba(15, 23, 42, 0.08);
}


.vcPromoHeroEmpty > span {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a0a6b1;
}


.vcPromoHeroEmpty strong {
    display: block;
    font-size: 28px;
    color: #181c24;
}


.vcPromoHeroEmpty p {
    margin:
        14px
        auto
        20px;
    max-width: 320px;
    line-height: 1.65;
    color: #747c89;
}


.vcPromoHeroEmpty a {
    color: #ff456c;
    text-decoration: none;
    font-weight: 800;
}


/* ============================================================
   BOTTOM
============================================================ */

.vcPromoHeroBottom {
    width: min(1560px, 100%);
    margin:
        32px
        auto
        0;
    display: flex;
    align-items: center;
    gap: 14px;
}


.vcPromoHeroBottomLine {
    flex: 1;
    height: 1px;
    background:
        linear-gradient(
            to right,
            rgba(15, 23, 42, 0.02),
            rgba(15, 23, 42, 0.10),
            rgba(15, 23, 42, 0.02)
        );
}


.vcPromoHeroBottom > span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a2a8b2;
}


.vcPromoHeroBottom a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border:
        1px solid
        rgba(15, 23, 42, 0.08);
    color: #6d7480;
    background:
        rgba(255,255,255,0.7);
}


.vcPromoHeroBottom svg {
    width: 15px;
    height: 15px;
}


/* ============================================================
   FLOAT ANIMATIONS
============================================================ */

@keyframes vcPromoFloatOne {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(2deg);
    }

    50% {
        transform:
            translateY(-11px)
            rotate(-1deg);
    }

}


@keyframes vcPromoFloatTwo {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(10px)
            rotate(1deg);
    }

}


@keyframes vcPromoFloatThree {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(1deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(-2deg);
    }

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1500px) {

    .vcPromoHeroVisual {
        min-height: 620px;
    }


    .vcPromoHeroMainProduct {
        width: 510px;
        min-height: 585px;
    }


    .vcPromoHeroMainImage {
        height: 350px;
    }

}


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

@media (max-width: 1250px) {

    .vcPromoHeroInner {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(420px, 1.1fr);
        gap: 50px;
    }


    .vcPromoHeroTitle {
        font-size:
            clamp(
                50px,
                5.2vw,
                76px
            );
    }


    .vcPromoHeroMainProduct {
        width: 430px;
    }


    .vcPromoHeroFloating {
        width: 112px;
        height: 134px;
    }


    .vcPromoHeroFloating2 {
        left: -4px;
    }

}


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

@media (max-width: 1020px) {

    .vcPromoHero {
        min-height: auto;
        padding-top: 130px;
    }


    .vcPromoHeroInner {
        grid-template-columns:
            1fr;
        gap: 68px;
    }


    .vcPromoHeroCopy {
        max-width: 780px;
        margin: 0 auto;
        text-align: center;
    }


    .vcPromoHeroEyebrow {
        margin-left: auto;
        margin-right: auto;
    }


    .vcPromoHeroDescription {
        margin-left: auto;
        margin-right: auto;
    }


    .vcPromoHeroStats {
        justify-content: center;
    }


    .vcPromoHeroActions {
        justify-content: center;
    }


    .vcPromoHeroTrust {
        justify-content: center;
    }


    .vcPromoHeroVisual {
        min-height: 600px;
        width: min(720px, 100%);
        margin: 0 auto;
    }


    .vcPromoHeroMainProduct {
        transform: none;
    }


    .vcPromoHeroMainProduct:hover {
        transform:
            translateY(-6px);
    }


    .vcPromoHeroFloating1 {
        right: 4%;
    }


    .vcPromoHeroFloating2 {
        left: 3%;
    }


    .vcPromoHeroFloating3 {
        right: 8%;
    }

}


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

@media (max-width: 720px) {

    .vcPromoHero {
        padding:
            110px
            18px
            34px;
    }


    .vcPromoHeroGrid {
        background-size:
            34px
            34px;
    }


    .vcPromoHeroTitle {
        font-size:
            clamp(
                44px,
                13vw,
                62px
            );
        letter-spacing:
            -0.06em;
    }


    .vcPromoHeroDescription {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.62;
    }


    .vcPromoHeroStats {
        width: 100%;
        gap: 14px;
        justify-content: center;
        padding:
            16px
            12px;
    }


    .vcPromoHeroStat {
        flex: 1;
        min-width: 0;
    }


    .vcPromoHeroStat strong {
        font-size: 26px;
    }


    .vcPromoHeroActions {
        display: grid;
        grid-template-columns:
            1fr;
    }


    .vcPromoHeroPrimary,
    .vcPromoHeroSecondary {
        width: 100%;
    }


    .vcPromoHeroTrust {
        font-size: 11px;
    }


    .vcPromoHeroVisual {
        min-height: 500px;
    }


    .vcPromoHeroMainProduct {
        width: 100%;
        max-width: 420px;
        min-height: 485px;
        padding:
            28px
            24px
            24px;
        border-radius: 34px;
    }


    .vcPromoHeroMainImage {
        height: 280px;
        padding-top: 45px;
    }


    .vcPromoHeroDiscount {
        top: 20px;
        left: 20px;
    }


    .vcPromoHeroProductInfo h2 {
        max-width: 82%;
        font-size: 22px;
    }


    .vcPromoHeroPrices strong {
        font-size: 24px;
    }


    .vcPromoHeroProductArrow {
        right: 22px;
        bottom: 22px;
        width: 38px;
        height: 38px;
    }


    .vcPromoHeroFloating {
        width: 86px;
        height: 104px;
        border-radius: 22px;
        padding: 11px;
    }


    .vcPromoHeroFloating1 {
        top: 58px;
        right: -7px;
    }


    .vcPromoHeroFloating2 {
        top: 214px;
        left: -7px;
    }


    .vcPromoHeroFloating3 {
        right: 0;
        bottom: 20px;
    }


    .vcPromoHeroSavingBadge {
        left: 8px;
        bottom: -8px;
        padding:
            10px
            12px;
    }


    .vcPromoHeroBottom {
        margin-top: 38px;
    }

}


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

@media (max-width: 480px) {

    .vcPromoHero {
        padding-left: 14px;
        padding-right: 14px;
    }


    .vcPromoHeroEyebrow {
        padding:
            7px
            10px;
    }


    .vcPromoHeroEyebrow span:last-child {
        font-size: 10px;
    }


    .vcPromoHeroTitle {
        font-size:
            clamp(
                40px,
                12.5vw,
                52px
            );
    }


    .vcPromoHeroStats {
        gap: 8px;
    }


    .vcPromoHeroStat > span {
        font-size: 9px;
    }


    .vcPromoHeroStat strong {
        font-size: 23px;
    }


    .vcPromoHeroStat small {
        font-size: 10px;
    }


    .vcPromoHeroVisual {
        min-height: 470px;
    }


    .vcPromoHeroMainProduct {
        min-height: 450px;
        border-radius: 30px;
    }


    .vcPromoHeroMainImage {
        height: 245px;
    }


    .vcPromoHeroFloating {
        width: 74px;
        height: 90px;
        border-radius: 18px;
    }


    .vcPromoHeroFloatingDiscount {
        font-size: 9px;
        padding:
            5px
            7px;
    }


    .vcPromoHeroSavingBadge {
        transform:
            scale(0.9);
        transform-origin:
            left bottom;
    }


    .vcPromoHeroBottom > span {
        display: none;
    }

}


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

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

    .vcPromoHeroFloating1,
    .vcPromoHeroFloating2,
    .vcPromoHeroFloating3 {
        animation: none;
    }


    .vcPromoHeroMainProduct,
    .vcPromoHeroMainImage img,
    .vcPromoHeroPrimary,
    .vcPromoHeroSecondary {
        transition: none;
    }

}

/* ============================================================
   HERO REVEAL
============================================================ */

.vcPromoHeroEyebrow,
.vcPromoHeroTitle,
.vcPromoHeroDescription,
.vcPromoHeroStats,
.vcPromoHeroActions,
.vcPromoHeroTrust {
    transition:
        opacity .65s ease,
        transform .75s cubic-bezier(.16,1,.3,1);
}


.js .vcPromoHeroEyebrow,
.js .vcPromoHeroTitle,
.js .vcPromoHeroDescription,
.js .vcPromoHeroStats,
.js .vcPromoHeroActions,
.js .vcPromoHeroTrust {
    opacity: 0;
    transform: translateY(14px);
}


.js .vcPromoHeroEyebrow.is-revealed,
.js .vcPromoHeroTitle.is-revealed,
.js .vcPromoHeroDescription.is-revealed,
.js .vcPromoHeroStats.is-revealed,
.js .vcPromoHeroActions.is-revealed,
.js .vcPromoHeroTrust.is-revealed {
    opacity: 1;
    transform: translateY(0);
}