/* ==================================================
   VEGA SFX EXPERIENCE V2
   ================================================== */

.vega-sfx-x{
    width:min(100% - 32px,1240px);
    margin:30px auto 42px;
}


/* HERO */

.vega-sfx-x__hero{
    position:relative;
    isolation:isolate;

    min-height:470px;

    overflow:hidden;

    border-radius:30px;

    background:
        radial-gradient(
            circle at 75% 42%,
            rgba(255,134,61,.24),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255,211,143,.12),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #151515 0%,
            #201b18 52%,
            #382216 100%
        );

    box-shadow:
        0 24px 70px
        rgba(17,17,17,.14);
}


.vega-sfx-x__hero::before{
    content:"";

    position:absolute;

    width:440px;
    height:440px;

    right:-150px;
    top:-190px;

    border-radius:50%;

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


.vega-sfx-x__hero::after{
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-250px;
    bottom:-330px;

    border-radius:50%;

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


.vega-sfx-x__copy{
    position:relative;
    z-index:5;

    width:48%;

    padding:
        66px 0 125px 58px;
}


.vega-sfx-x__eyebrow{
    display:inline-flex;

    margin-bottom:15px;

    padding:
        7px 11px;

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

    border-radius:999px;

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

    color:#ffc392;

    font-size:9px;

    font-weight:850;

    line-height:1;

    letter-spacing:.15em;
}


.vega-sfx-x__copy h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(44px,5vw,72px);

    line-height:.91;

    letter-spacing:-.055em;

    font-weight:800;
}


.vega-sfx-x__copy h2 strong{
    display:block;

    margin-top:5px;

    color:#ff9b5c;

    font-weight:800;
}


.vega-sfx-x__copy p{
    max-width:440px;

    margin:
        21px 0 18px;

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

    font-size:14px;

    line-height:1.6;
}


.vega-sfx-x__points{
    display:flex;
    flex-wrap:wrap;

    gap:
        7px 14px;

    margin-bottom:24px;
}


.vega-sfx-x__points span{
    color:
        rgba(255,255,255,.84);

    font-size:10px;

    font-weight:650;
}


.vega-sfx-x__cta{
    display:inline-flex;

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

    gap:14px;

    min-height:48px;

    padding:
        11px 18px;

    border-radius:13px;

    background:#fff;

    color:#171717!important;

    font-size:11px;

    font-weight:850;

    text-decoration:none!important;

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

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


.vega-sfx-x__cta span{
    font-size:18px;
}


.vega-sfx-x__cta:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.28);
}



/* FLOATING PRODUCTS */

.vega-sfx-x__visual{
    position:absolute;

    right:30px;
    top:30px;
    bottom:105px;

    width:49%;

    z-index:3;
}


.vega-sfx-x__float{
    position:absolute;

    display:flex;
    flex-direction:column;

    align-items:center;

    padding:13px;

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

    border-radius:22px;

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.25);

    transition:
        transform .28s ease;
}


.vega-sfx-x__float:hover{
    transform:
        translateY(-6px)
        rotate(0deg)!important;
}


.vega-sfx-x__float--1{
    width:210px;

    right:200px;
    top:22px;

    transform:
        rotate(-5deg);
}


.vega-sfx-x__float--2{
    width:190px;

    right:12px;
    top:105px;

    transform:
        rotate(5deg);
}


.vega-sfx-x__float--3{
    width:175px;

    right:230px;
    bottom:3px;

    transform:
        rotate(3deg);
}


.vega-sfx-x__float-img{
    display:flex;

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

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:16px;

    background:#fff;
}


.vega-sfx-x__float-img img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    padding:11px;
}


.vega-sfx-x__float-price{
    width:100%;

    margin-top:9px;

    color:#fff;

    font-size:12px;

    font-weight:850;
}


.vega-sfx-x__float-price del{
    opacity:.55;

    font-size:9px;
}



/* CATEGORY STRIP */

.vega-sfx-x__categories{
    position:absolute;

    z-index:8;

    left:20px;
    right:20px;
    bottom:18px;

    display:grid;

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

    gap:7px;
}


.vega-sfx-x__categories a{
    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;
    min-height:70px;

    padding:
        10px 12px;

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

    border-radius:14px;

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

    backdrop-filter:
        blur(10px);

    color:#fff!important;

    text-decoration:none!important;

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


.vega-sfx-x__categories a:hover{
    background:
        rgba(255,255,255,.14);

    transform:
        translateY(-2px);
}


.vega-sfx-x__categories strong{
    overflow:hidden;

    color:#fff;

    font-size:9.5px;

    line-height:1.25;

    white-space:nowrap;

    text-overflow:ellipsis;
}


.vega-sfx-x__categories span{
    margin-top:4px;

    color:#ffae75;

    font-size:8px;

    font-weight:750;
}



/* PRODUCTS AREA */

.vega-sfx-x__products{
    margin-top:20px;
}


.vega-sfx-x__heading{
    display:flex;

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

    gap:16px;

    margin-bottom:13px;

    padding:
        0 4px;
}


.vega-sfx-x__heading span{
    display:block;

    margin-bottom:5px;

    color:#b46438;

    font-size:9px;

    font-weight:850;

    letter-spacing:.15em;
}


.vega-sfx-x__heading h3{
    margin:0;

    color:
        var(--vega-text,#202020);

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

    line-height:1.04;

    letter-spacing:-.04em;
}


.vega-sfx-x__controls{
    display:flex;

    gap:7px;
}


.vega-sfx-x__controls button{
    display:grid;

    place-items:center;

    width:40px;
    height:40px;

    padding:0;

    border:
        1px solid #e6e5e2;

    border-radius:50%;

    background:#fff;

    color:#202020;

    font-size:17px;

    cursor:pointer;

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


.vega-sfx-x__controls button:hover{
    background:#f3f1ed;

    transform:
        translateY(-1px);
}


.vega-sfx-x__track{
    display:flex!important;

    gap:13px!important;

    overflow-x:auto!important;

    scroll-snap-type:
        x proximity;

    scrollbar-width:none;

    padding:
        4px 4px 15px;

    -webkit-overflow-scrolling:
        touch;
}


.vega-sfx-x__track::-webkit-scrollbar{
    display:none;
}


.vega-sfx-x__track >
.vega-product-card{
    flex:
        0 0
        calc(
            (100% - 39px) / 4
        )!important;

    min-width:0;

    scroll-snap-align:start;

    border-radius:18px!important;

    box-shadow:
        0 6px 22px
        rgba(20,20,20,.055)!important;

    border:
        1px solid
        rgba(25,25,25,.06)!important;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


.vega-sfx-x__track >
.vega-product-card:hover{
    transform:
        translateY(-3px);

    box-shadow:
        0 14px 34px
        rgba(20,20,20,.09)!important;
}


.vega-sfx-x__track
.vega-product-card__media{
    background:#faf9f7!important;
}


.vega-sfx-x__track
.vega-product-card__media img{
    object-fit:contain!important;

    padding:12px!important;
}


.vega-sfx-x__track
.vega-product-card h3{
    font-size:12px!important;
    line-height:1.3!important;
}


.vega-sfx-x__track
.vega-product-card__price{
    font-size:15px!important;
}


.vega-sfx-x__viewall{
    display:flex;

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

    width:max-content;

    margin:
        5px auto 0;

    min-height:42px;

    padding:
        9px 17px;

    border:
        1px solid
        rgba(20,20,20,.1);

    border-radius:999px;

    background:#fff;

    color:
        var(--vega-text,#202020)!important;

    font-size:10px;

    font-weight:800;

    text-decoration:none!important;
}



/* TABLET */

@media(max-width:1024px){

    .vega-sfx-x__copy{
        width:50%;

        padding:
            50px 0 120px 38px;
    }

    .vega-sfx-x__visual{
        right:10px;

        width:48%;
    }

    .vega-sfx-x__float--1{
        width:175px;

        right:150px;
    }

    .vega-sfx-x__float--2{
        width:160px;
    }

    .vega-sfx-x__float--3{
        width:145px;

        right:160px;
    }

    .vega-sfx-x__categories{
        grid-template-columns:
            repeat(3,1fr);
    }

    .vega-sfx-x__categories a:nth-child(n+4){
        display:none;
    }

    .vega-sfx-x__track >
    .vega-product-card{
        flex:
            0 0
            calc(
                (100% - 26px) / 3
            )!important;
    }
}



/* MOBILE */

@media(max-width:767px){

    .vega-sfx-x{
        width:100%;

        margin:
            18px auto 28px;
    }


    .vega-sfx-x__hero{
        width:
            calc(100% - 24px);

        min-height:500px;

        margin:
            0 auto;

        border-radius:22px;
    }


    .vega-sfx-x__copy{
        width:100%;

        padding:
            27px 20px 0;
    }


    .vega-sfx-x__copy h2{
        max-width:290px;

        font-size:43px;
    }


    .vega-sfx-x__copy p{
        max-width:300px;

        margin:
            14px 0 13px;

        font-size:11px;
    }


    .vega-sfx-x__points{
        gap:
            5px 10px;

        margin-bottom:16px;
    }


    .vega-sfx-x__points span{
        font-size:8.5px;
    }


    .vega-sfx-x__cta{
        min-height:41px;

        padding:
            8px 13px;

        font-size:9.5px;
    }


    .vega-sfx-x__visual{
        left:18px;
        right:18px;
        top:auto;
        bottom:90px;

        width:auto;
        height:180px;
    }


    .vega-sfx-x__float{
        padding:7px;

        border-radius:14px;
    }


    .vega-sfx-x__float--1{
        width:125px;

        left:0;
        right:auto;
        top:18px;

        transform:
            rotate(-5deg);
    }


    .vega-sfx-x__float--2{
        width:135px;

        left:50%;

        right:auto;
        top:2px;

        transform:
            translateX(-50%)
            rotate(2deg);
    }


    .vega-sfx-x__float--3{
        width:118px;

        right:0;
        left:auto;
        bottom:0;

        transform:
            rotate(5deg);
    }


    .vega-sfx-x__float-price{
        margin-top:5px;

        font-size:9px;
    }


    .vega-sfx-x__categories{
        left:12px;
        right:12px;
        bottom:12px;

        display:flex;

        overflow-x:auto;

        gap:6px;

        scrollbar-width:none;
    }


    .vega-sfx-x__categories::-webkit-scrollbar{
        display:none;
    }


    .vega-sfx-x__categories a{
        display:flex!important;

        flex:
            0 0 auto;

        min-height:46px;

        min-width:130px;

        padding:
            7px 9px;

        border-radius:11px;
    }


    .vega-sfx-x__categories strong{
        font-size:8px;
    }


    .vega-sfx-x__categories span{
        font-size:7px;
    }


    .vega-sfx-x__products{
        margin-top:18px;
    }


    .vega-sfx-x__heading{
        padding:
            0 14px;

        margin-bottom:10px;
    }


    .vega-sfx-x__heading h3{
        font-size:22px;
    }


    .vega-sfx-x__controls{
        display:none;
    }


    .vega-sfx-x__track{
        gap:10px!important;

        padding:
            3px 14px 14px;
    }


    .vega-sfx-x__track >
    .vega-product-card{
        flex:
            0 0
            57vw!important;

        max-width:215px!important;
    }


    .vega-sfx-x__viewall{
        margin-top:2px;

        font-size:9px;
    }
}


/* ==========================================================
   VEGA SFX V2.1
   THEME-AWARE COLORS + SFX PARTICLE EXPERIENCE
   ========================================================== */

.vega-sfx-x{

    --sfx-accent:
        var(--vega-accent,#d9783b);

    --sfx-ink:
        var(--vega-text,#20231f);

    --sfx-muted:
        var(--vega-muted,#74766f);

    --sfx-surface:
        var(--vega-surface,#ffffff);

    --sfx-cream:
        #f7f3eb;

    --sfx-cream-2:
        #fffdf9;

    --sfx-gold:
        #d69a46;
}


/* ==========================================================
   HERO — MATCH WEBSITE THEME
   ========================================================== */

.vega-sfx-x__hero{

    background:
        #f7f3eb;

    background:
        radial-gradient(
            circle at 78% 34%,
            color-mix(
                in srgb,
                var(--sfx-accent) 18%,
                transparent
            ),
            transparent 27%
        ),
        radial-gradient(
            circle at 98% 5%,
            rgba(214,154,70,.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--sfx-cream) 0%,
            var(--sfx-cream-2) 54%,
            color-mix(
                in srgb,
                var(--sfx-accent) 8%,
                #fff
            ) 100%
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--sfx-accent) 15%,
            #e8e2d8
        );

    box-shadow:
        0 18px 55px
        rgba(38,31,24,.09);
}


/* Decorative circles */

.vega-sfx-x__hero::before,
.vega-sfx-x__hero::after{

    border-color:
        color-mix(
            in srgb,
            var(--sfx-accent) 14%,
            transparent
        );
}


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

.vega-sfx-x__eyebrow{

    border-color:
        color-mix(
            in srgb,
            var(--sfx-accent) 24%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--sfx-accent) 8%,
            #fff
        );

    color:
        var(--sfx-accent);
}


.vega-sfx-x__copy h2{

    color:
        var(--sfx-ink);
}


.vega-sfx-x__copy h2 strong{

    color:
        var(--sfx-accent);
}


.vega-sfx-x__copy p{

    color:
        var(--sfx-muted);
}


.vega-sfx-x__points span{

    color:
        color-mix(
            in srgb,
            var(--sfx-ink) 78%,
            transparent
        );
}


/* CTA */

.vega-sfx-x__cta{

    background:
        var(--sfx-ink);

    color:
        #fff!important;

    box-shadow:
        0 10px 24px
        rgba(25,25,25,.16);
}


.vega-sfx-x__cta:hover{

    background:
        color-mix(
            in srgb,
            var(--sfx-ink) 88%,
            var(--sfx-accent)
        );

    box-shadow:
        0 14px 32px
        rgba(25,25,25,.2);
}



/* ==========================================================
   FLOATING PRODUCT CARDS
   ========================================================== */

.vega-sfx-x__float{

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

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

    box-shadow:
        0 18px 45px
        rgba(50,39,28,.13);

    backdrop-filter:
        blur(14px);

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


.vega-sfx-x__float-img{

    background:
        #fff;

    box-shadow:
        inset 0 0 0 1px
        rgba(20,20,20,.035);
}


.vega-sfx-x__float-price{

    color:
        var(--sfx-ink);
}


.vega-sfx-x__float-price del{

    color:
        var(--sfx-muted);
}



/* ==========================================================
   CATEGORY STRIP
   ========================================================== */

.vega-sfx-x__categories a{

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

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

    box-shadow:
        0 5px 16px
        rgba(35,30,24,.05);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.vega-sfx-x__categories a:hover{

    background:#fff;

    border-color:
        color-mix(
            in srgb,
            var(--sfx-accent) 30%,
            #eee
        );
}


.vega-sfx-x__categories strong{

    color:
        var(--sfx-ink);
}


.vega-sfx-x__categories span{

    color:
        var(--sfx-accent);
}



/* ==========================================================
   SFX PARTICLES LAYER
   ========================================================== */

.vega-sfx-fx{

    position:absolute;

    inset:0;

    z-index:2;

    overflow:hidden;

    pointer-events:none;

    border-radius:inherit;
}


.vega-sfx-fx__particle{

    position:absolute;

    left:
        var(--x,50%);

    top:
        -35px;

    opacity:0;

    pointer-events:none;

    animation-play-state:
        paused;
}


.vega-sfx-x__hero.is-sfx-playing
.vega-sfx-fx__particle{

    animation-play-state:
        running;
}



/* ==========================================================
   SPARK FALL
   ========================================================== */

.vega-sfx-fx__particle.is-spark{

    width:
        var(--size,2px);

    height:
        calc(
            var(--size,2px) * 8
        );

    border-radius:
        999px;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255,255,255,.95) 35%,
            var(--sfx-accent) 100%
        );

    box-shadow:
        0 0 7px
        color-mix(
            in srgb,
            var(--sfx-accent) 72%,
            transparent
        );

    animation:
        vegaSfxSparkFall
        var(--duration,4s)
        linear
        var(--delay,0s)
        infinite;
}


@keyframes vegaSfxSparkFall{

    0%{

        opacity:0;

        transform:
            translate3d(
                0,
                -35px,
                0
            )
            rotate(
                var(--rotation,8deg)
            );
    }

    8%{

        opacity:.9;
    }

    70%{

        opacity:.75;
    }

    100%{

        opacity:0;

        transform:
            translate3d(
                var(--drift,20px),
                610px,
                0
            )
            rotate(
                calc(
                    var(--rotation,8deg)
                    + 30deg
                )
            );
    }
}



/* ==========================================================
   CONFETTI
   ========================================================== */

.vega-sfx-fx__particle.is-confetti{

    width:
        var(--width,6px);

    height:
        var(--height,10px);

    border-radius:2px;

    background:
        var(
            --particle-color,
            var(--sfx-accent)
        );

    animation:
        vegaSfxConfettiFall
        var(--duration,6s)
        cubic-bezier(.2,.65,.35,1)
        var(--delay,0s)
        infinite;
}


@keyframes vegaSfxConfettiFall{

    0%{

        opacity:0;

        transform:
            translate3d(
                0,
                -40px,
                0
            )
            rotate(0deg);
    }

    8%{

        opacity:.9;
    }

    80%{

        opacity:.8;
    }

    100%{

        opacity:0;

        transform:
            translate3d(
                var(--drift,30px),
                590px,
                0
            )
            rotate(
                var(--spin,420deg)
            );
    }
}



/* ==========================================================
   SOFT SNOW / SHIMMER FLAKES
   ========================================================== */

.vega-sfx-fx__particle.is-flake{

    width:
        var(--size,4px);

    height:
        var(--size,4px);

    border-radius:
        50%;

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

    box-shadow:
        0 0 8px
        rgba(255,255,255,.75);

    animation:
        vegaSfxFlakeFall
        var(--duration,8s)
        ease-in
        var(--delay,0s)
        infinite;
}


@keyframes vegaSfxFlakeFall{

    0%{

        opacity:0;

        transform:
            translate3d(
                0,
                -20px,
                0
            );
    }

    12%{

        opacity:.62;
    }

    75%{

        opacity:.45;
    }

    100%{

        opacity:0;

        transform:
            translate3d(
                var(--drift,-15px),
                580px,
                0
            );
    }
}



/* ==========================================================
   GLOW PULSES
   ========================================================== */

.vega-sfx-x__lights{

    pointer-events:none;
}


.vega-sfx-x__lights i{

    position:absolute;

    display:block;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        color-mix(
            in srgb,
            var(--sfx-accent) 14%,
            transparent
        );

    filter:
        blur(42px);

    opacity:.38;

    animation:
        vegaSfxGlow 6s
        ease-in-out
        infinite alternate;
}


.vega-sfx-x__lights i:nth-child(1){

    right:18%;
    top:4%;
}


.vega-sfx-x__lights i:nth-child(2){

    right:2%;
    bottom:15%;

    animation-delay:
        -2s;
}


.vega-sfx-x__lights i:nth-child(3){

    left:36%;
    bottom:-50px;

    animation-delay:
        -4s;
}


@keyframes vegaSfxGlow{

    from{

        transform:
            scale(.85);

        opacity:.22;
    }

    to{

        transform:
            scale(1.2);

        opacity:.46;
    }
}



/* ==========================================================
   PRODUCT SECTION ACCENT
   ========================================================== */

.vega-sfx-x__heading > div > span{

    color:
        var(--sfx-accent);
}


.vega-sfx-x__controls button:hover{

    color:
        var(--sfx-accent);

    border-color:
        color-mix(
            in srgb,
            var(--sfx-accent) 30%,
            #ddd
        );
}



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

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

    .vega-sfx-fx{

        display:none!important;
    }

    .vega-sfx-x__lights i{

        animation:none!important;
    }

    .vega-sfx-x__float{

        transition:none!important;
    }
}



/* ==========================================================
   MOBILE FX OPTIMIZATION
   ========================================================== */

@media(max-width:767px){

    .vega-sfx-x__hero{

        background:
            linear-gradient(
                145deg,
                #f7f3eb 0%,
                #fffdf9 64%,
                color-mix(
                    in srgb,
                    var(--sfx-accent) 8%,
                    #fff
                ) 100%
            );
    }


    .vega-sfx-x__copy{

        z-index:6;
    }


    .vega-sfx-x__float{

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


    .vega-sfx-x__categories a{

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


    .vega-sfx-fx__particle.is-spark{

        opacity:.7;
    }
}