/* =====================================================================================
   Home hero ("Hero slides") - Areas/Web/Views/Shared/Components/Slider/Default.cshtml.
   Loaded by the storefront home page AND by the admin hero builder / list, which do not load the
   storefront theme: everything here is scoped under .hs and resets what the theme forces.

   THREE DESIGN CANVASES, ONE DOM. The engine (Common/Helpers/HeroSlides/HeroSlideLayouts.cs +
   HeroStageStyles.cs; the builder runs the same in wwwroot/admin/scripts/hero-engine.js) lays each slide
   out on desktop 1200×480, tablet 820×440 and phone 360 wide. Every positioned element carries its three
   variants as custom properties: --d-* desktop, --t-* tablet, --p-* phone, ALL IN cqw of the content canvas
   (x and y alike). The .hs-v rules copy the variant in use into --hs-*, which the element's own rule reads.
   The variant follows the screen (phone < 576 ≤ tablet < 992 ≤ desktop), mobile-first. The admin forces one
   with hs--forced / hs--force-{tablet|desktop} on .hs (rules at the end of the variant section).

   THE BOX (tablet / desktop): as wide as the page container; .hs-canvas has the canvas's ratio, at most 600px
   tall; .hs-frame is the content canvas inside it - centred, at most 1500px wide, scaled to fit.
   THE PHONE: the canvas height FOLLOWS THE CONTENT. .hs-frame is in the flow: its top padding holds the covers
   area (a fixed height in cqw, so the height is reserved before any image loads; the engine centres the covers in it,
   16 design px above and below), the text block follows in the flow, the bottom padding closes it. The slides share
   one grid cell, so the band is as tall as the TALLEST slide; a shorter slide's content is centred in it (the slide
   is a flex column) and nothing moves when slides change.
   THE STAGE (.hs-stagearea > .hs-stage): covers and their decor. The whole content canvas, except a centred
   tablet / desktop slide (data-hs-cflow="1"): the frame becomes a vertical flow and the stage scales to the space
   the text leaves, so the text and buttons are never cut. Background, light and texture layers cover the FULL band.
   ONE MIRRORING SOURCE: the engine writes final physical positions (left / top) for Arabic too; nothing positioned
   here uses logical inline properties.

   COVERS are placed by their CENTRE (left / top) and HEIGHT; the picture takes the product art's own aspect ratio
   (--hs-ar, from the image) so nothing is ever cropped. A wide image gets a lower height so it is never wider
   than .95 × the slot's height.

   SWITCHES on the slide: data-hs-bg (background type), data-hs-grad, data-hs-pat, data-hs-entrance,
   data-hs-cloop (covers loop), data-hs-bloop (background loop), data-hs-wloop (giant word loop), data-hs-text
   (text entrance), data-hs-loops (looping motion on / off). hs-off hides an element the superset preview prints.

   --hs-px is one design pixel of the canvas in use (100cqw / canvas width): fixed design sizes (button heights,
   gaps, chips) are written as calc(N * var(--hs-px)) so they scale with it.
   ===================================================================================== */

/* ---- variant: phone (default) ---- */
.hs {
    --hs-px: calc(100cqw / 360);
    --hs-k: 11; --hs-s: 14; --hs-btnh: 46; --hs-bf: 14; --hs-gap: 10; --hs-pr: 16;
    --hs-cdw: 56; --hs-cdh: 54; --hs-cdf: 20;
    --hs-bdh: 22; --hs-bdf: 11;
    --hs-clamp: 3;
    --hs-chiph: 26; --hs-chipf: 11;
    --hs-pkh: 32; --hs-pkf: 12;
    --hs-stroke: 1px;
    --hs-btn2: none; --hs-btnrow-w: 100%; --hs-btn-grow: 1;
    --hs-only-wide: none; --hs-only-phone: block;
    /* The canvas: width / height for aspect-ratio, height ÷ width for the frame's fit (wide variants only). */
    --hs-canvas-ratio: auto; --hs-hw: 1.6667;
    /* The phone flow: the canvas grows with its content. */
    --hs-canvas-display: grid; --hs-canvas-max: none; --hs-canvas-ct: inline-size;
    --hs-slide-pos: relative;
    --hs-frame-pos: relative; --hs-frame-l: auto; --hs-frame-t: auto; --hs-frame-w: 100%; --hs-frame-ar: auto; --hs-frame-tr: none;
    --hs-text-pos: relative;
}

.hs .hs-v {
    --hs-l: var(--p-l); --hs-t: var(--p-t); --hs-w: var(--p-w); --hs-h: var(--p-h); --hs-b: var(--p-b);
    --hs-r: var(--p-r); --hs-ry: var(--p-ry); --hs-fs: var(--p-fs); --hs-rad: var(--p-rad); --hs-sh: var(--p-sh);
    --hs-flt: var(--p-flt); --hs-dsp: var(--p-dsp); --hs-bg: var(--p-bg); --hs-tf: var(--p-tf);
    --hs-sx: var(--p-sx, 0cqw); --hs-sy: var(--p-sy, 0cqw); --hs-spx: var(--p-spx, 50%); --hs-grot: var(--p-grot, 0deg);
    --hs-pt: var(--p-pt, 0px); --hs-pb: var(--p-pb, 0px);
    --hs-sw: var(--p-sw, 100cqw); --hs-sar: var(--p-sar, 1); --hs-rfl: var(--p-rfl, 0); --hs-rfo: var(--p-rfo, 1);
    --hs-cft: 0px; --hs-cfb: 0px; --hs-cfg: 0px;
}

/* ---- variant: tablet ---- */
@media (min-width: 576px) {
    .hs:not(.hs--forced) {
        --hs-px: calc(100cqw / 820);
        --hs-k: 12; --hs-s: 15; --hs-btnh: 48; --hs-bf: 14; --hs-gap: 14; --hs-pr: 18;
        --hs-cdw: 60; --hs-cdh: 60; --hs-cdf: 24;
        --hs-bdh: 26; --hs-bdf: 12;
        --hs-clamp: 3;
        --hs-chiph: 38; --hs-chipf: 14;
        --hs-pkh: 34; --hs-pkf: 13;
        --hs-stroke: 1.5px;
        --hs-btn2: inline-flex; --hs-btnrow-w: auto; --hs-btn-grow: 0;
        --hs-only-wide: block; --hs-only-phone: none;
        --hs-canvas-ratio: 820 / 440; --hs-hw: .5366;
        --hs-canvas-display: block; --hs-canvas-max: 600px; --hs-canvas-ct: size;
        --hs-slide-pos: absolute;
        --hs-frame-pos: absolute; --hs-frame-l: 50%; --hs-frame-t: 50%; --hs-frame-w: min(100cqw, 1500px, calc(100cqh / var(--hs-hw)));
        --hs-frame-ar: var(--hs-canvas-ratio); --hs-frame-tr: -50% -50%;
        --hs-text-pos: absolute;
    }

    .hs:not(.hs--forced) .hs-v {
        --hs-l: var(--t-l); --hs-t: var(--t-t); --hs-w: var(--t-w); --hs-h: var(--t-h); --hs-b: var(--t-b);
        --hs-r: var(--t-r); --hs-ry: var(--t-ry); --hs-fs: var(--t-fs); --hs-rad: var(--t-rad); --hs-sh: var(--t-sh);
        --hs-flt: var(--t-flt); --hs-dsp: var(--t-dsp); --hs-bg: var(--t-bg); --hs-tf: var(--t-tf);
        --hs-sx: var(--t-sx, 0cqw); --hs-sy: var(--t-sy, 0cqw); --hs-spx: var(--t-spx, 50%); --hs-grot: var(--t-grot, 0deg);
        --hs-pt: 0px; --hs-pb: 0px;
        --hs-sw: var(--t-sw, 100cqw); --hs-sar: var(--t-sar, 1); --hs-rfl: var(--t-rfl, 0); --hs-rfo: var(--t-rfo, 1);
        --hs-cft: var(--t-cft, 0px); --hs-cfb: var(--t-cfb, 0px); --hs-cfg: var(--t-cfg, 0px);
    }
}

/* ---- variant: desktop ---- */
@media (min-width: 992px) {
    .hs:not(.hs--forced) {
        --hs-px: calc(100cqw / 1200);
        --hs-k: 13; --hs-s: 17; --hs-btnh: 52; --hs-bf: 15; --hs-gap: 16; --hs-pr: 20;
        --hs-cdw: 70; --hs-cdh: 70; --hs-cdf: 28;
        --hs-canvas-ratio: 1200 / 480; --hs-hw: .4;
    }

    .hs:not(.hs--forced) .hs-v {
        --hs-l: var(--d-l); --hs-t: var(--d-t); --hs-w: var(--d-w); --hs-h: var(--d-h); --hs-b: var(--d-b);
        --hs-r: var(--d-r); --hs-ry: var(--d-ry); --hs-fs: var(--d-fs); --hs-rad: var(--d-rad); --hs-sh: var(--d-sh);
        --hs-flt: var(--d-flt); --hs-dsp: var(--d-dsp); --hs-bg: var(--d-bg); --hs-tf: var(--d-tf);
        --hs-sx: var(--d-sx, 0cqw); --hs-sy: var(--d-sy, 0cqw); --hs-spx: var(--d-spx, 50%); --hs-grot: var(--d-grot, 0deg);
        --hs-pt: 0px; --hs-pb: 0px;
        --hs-sw: var(--d-sw, 100cqw); --hs-sar: var(--d-sar, 1); --hs-rfl: var(--d-rfl, 0); --hs-rfo: var(--d-rfo, 1);
        --hs-cft: var(--d-cft, 0px); --hs-cfb: var(--d-cfb, 0px); --hs-cfg: var(--d-cfg, 0px);
    }
}

/* ---- forced variants (admin: builder frames, list thumbnails, previews). A forced phone is just hs--forced. ---- */
.hs.hs--force-tablet,
.hs.hs--force-desktop {
    --hs-k: 12; --hs-s: 15; --hs-btnh: 48; --hs-bf: 14; --hs-gap: 14; --hs-pr: 18;
    --hs-cdw: 60; --hs-cdh: 60; --hs-cdf: 24;
    --hs-bdh: 26; --hs-bdf: 12;
    --hs-clamp: 3;
    --hs-chiph: 38; --hs-chipf: 14;
    --hs-pkh: 34; --hs-pkf: 13;
    --hs-stroke: 1.5px;
    --hs-btn2: inline-flex; --hs-btnrow-w: auto; --hs-btn-grow: 0;
    --hs-only-wide: block; --hs-only-phone: none;
    --hs-canvas-display: block; --hs-canvas-max: 600px; --hs-canvas-ct: size;
    --hs-slide-pos: absolute;
    --hs-frame-pos: absolute; --hs-frame-l: 50%; --hs-frame-t: 50%; --hs-frame-w: min(100cqw, 1500px, calc(100cqh / var(--hs-hw)));
    --hs-frame-ar: var(--hs-canvas-ratio); --hs-frame-tr: -50% -50%;
    --hs-text-pos: absolute;
}

.hs.hs--force-tablet {
    --hs-px: calc(100cqw / 820);
    --hs-canvas-ratio: 820 / 440; --hs-hw: .5366;
}

.hs.hs--force-desktop {
    --hs-px: calc(100cqw / 1200);
    --hs-k: 13; --hs-s: 17; --hs-btnh: 52; --hs-bf: 15; --hs-gap: 16; --hs-pr: 20;
    --hs-cdw: 70; --hs-cdh: 70; --hs-cdf: 28;
    --hs-canvas-ratio: 1200 / 480; --hs-hw: .4;
}

.hs.hs--force-tablet .hs-v {
    --hs-l: var(--t-l); --hs-t: var(--t-t); --hs-w: var(--t-w); --hs-h: var(--t-h); --hs-b: var(--t-b);
    --hs-r: var(--t-r); --hs-ry: var(--t-ry); --hs-fs: var(--t-fs); --hs-rad: var(--t-rad); --hs-sh: var(--t-sh);
    --hs-flt: var(--t-flt); --hs-dsp: var(--t-dsp); --hs-bg: var(--t-bg); --hs-tf: var(--t-tf);
    --hs-sx: var(--t-sx, 0cqw); --hs-sy: var(--t-sy, 0cqw); --hs-spx: var(--t-spx, 50%); --hs-grot: var(--t-grot, 0deg);
    --hs-pt: 0px; --hs-pb: 0px;
    --hs-sw: var(--t-sw, 100cqw); --hs-sar: var(--t-sar, 1); --hs-rfl: var(--t-rfl, 0); --hs-rfo: var(--t-rfo, 1);
    --hs-cft: var(--t-cft, 0px); --hs-cfb: var(--t-cfb, 0px); --hs-cfg: var(--t-cfg, 0px);
}

.hs.hs--force-desktop .hs-v {
    --hs-l: var(--d-l); --hs-t: var(--d-t); --hs-w: var(--d-w); --hs-h: var(--d-h); --hs-b: var(--d-b);
    --hs-r: var(--d-r); --hs-ry: var(--d-ry); --hs-fs: var(--d-fs); --hs-rad: var(--d-rad); --hs-sh: var(--d-sh);
    --hs-flt: var(--d-flt); --hs-dsp: var(--d-dsp); --hs-bg: var(--d-bg); --hs-tf: var(--d-tf);
    --hs-sx: var(--d-sx, 0cqw); --hs-sy: var(--d-sy, 0cqw); --hs-spx: var(--d-spx, 50%); --hs-grot: var(--d-grot, 0deg);
    --hs-pt: 0px; --hs-pb: 0px;
    --hs-sw: var(--d-sw, 100cqw); --hs-sar: var(--d-sar, 1); --hs-rfl: var(--d-rfl, 0); --hs-rfo: var(--d-rfo, 1);
    --hs-cft: var(--d-cft, 0px); --hs-cfb: var(--d-cfb, 0px); --hs-cfg: var(--d-cfg, 0px);
}

/* =====================================================================================
   The box, the band and the content canvas
   ===================================================================================== */

.hs {
    position: relative;
    display: block;
    background: transparent;
    color: #eef0f3;
    margin: 0;
    padding: 0;
    text-align: start;
}

/* No live slide: the component renders nothing, and the home page's hero row takes no space. */
.home_slider_container:not(:has(.hs)) {
    display: none;
}

/* custom.css zeroes this row's side margin below 992px (for the old edge-to-edge slider) while every other
   .site-content keeps 0 10px: the hero box lines up with the SEO box under it. */
@media (max-width: 991px) {
    .site-content.home_slider_container:has(.hs) {
        margin-inline: 10px;
    }
}

/* Phones: 12px from the header's bottom hairline to the hero. The gap above the hero was the header's own
   margin (mb-2, 8px) stacked on this row's pt-2 (8px) = 16px; the row now adds only 4. */
@media (max-width: 575px) {
    .site-content.home_slider_container:has(.hs) {
        padding-top: 4px !important;
    }
}

/* An element of the superset preview that the slide does not use. */
.hs .hs-off {
    display: none !important;
}

/* The box: as wide as its column; wide screens: the canvas's ratio, never taller than 600px (the content canvas
   inside scales to fit); phones: as tall as its content. The same corner radius and hairline as the home page's
   SEO box (.dark_container). */
.hs-canvas {
    position: relative;
    display: var(--hs-canvas-display);
    width: 100%;
    aspect-ratio: var(--hs-canvas-ratio);
    max-height: var(--hs-canvas-max);
    container-type: var(--hs-canvas-ct);
    overflow: hidden;
    border-radius: var(--border-radius-defualt, 10px);
    outline: 1px solid #23272e;
    outline-offset: -1px;
    background: #0b0d10;
    isolation: isolate;
}

/* The content canvas. */
.hs .hs-frame {
    position: var(--hs-frame-pos);
    left: var(--hs-frame-l);
    top: var(--hs-frame-t);
    width: var(--hs-frame-w);
    aspect-ratio: var(--hs-frame-ar);
    translate: var(--hs-frame-tr);
    padding-top: var(--hs-pt);
    padding-bottom: var(--hs-pb);
    container-type: inline-size;
    z-index: 2;
}

/* ---- the stage: covers and their decor (giant word, glow, podium bars, layout shapes, floating chips, VS, glossy
   floor). Normally it IS the content canvas (the area fills the frame, the stage fills the area), so its positions in
   hundredths of its width equal the canvas's. A centred tablet / desktop slide (data-hs-cflow="1", rules below) turns
   the frame into a vertical flow: the area takes what the text block leaves, and the stage - the covers box at its
   own ratio - scales down to fit it. The text is never cut. */
.hs .hs-stagearea {
    position: absolute;
    inset: 0;
    container-type: size;
    pointer-events: none;
}

.hs .hs-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    container-type: inline-size;
    pointer-events: none;
}

.hs .hs-stage .hs-cover {
    pointer-events: auto;
}

/* A centred tablet / desktop slide: frame = vertical flow [padding, covers area, gap, text block, padding]. The area is
   a size container; the stage inside keeps the covers box's ratio (--hs-sar) at most its design width (--hs-sw) and
   shrinks with the area's height. Positions inside the stage stay in hundredths of its width, so everything scales. */
@media (min-width: 576px) {
    .hs:not(.hs--forced) .hs-slide[data-hs-cflow="1"] .hs-frame {
        display: flex;
        flex-direction: column;
        padding-top: var(--hs-cft);
        padding-bottom: var(--hs-cfb);
        /* An aspect-ratio box grows to fit its content by default: the frame would get taller than the canvas and
           spill out at both ends. It keeps the canvas's ratio; a too-tall text is scaled by the text fit instead. */
        min-height: 0;
    }

    .hs:not(.hs--forced) .hs-slide[data-hs-cflow="1"] .hs-stagearea {
        position: relative;
        inset: auto;
        flex: 1 1 0;
        /* The covers keep at least this share; a text block too tall for the rest is scaled by the text fit. */
        min-height: 38%;
    }

    .hs:not(.hs--forced) .hs-slide[data-hs-cflow="1"] .hs-stage {
        left: 50%;
        top: 50%;
        width: min(var(--hs-sw), calc(100cqh * var(--hs-sar)));
        height: auto;
        aspect-ratio: var(--hs-sar);
        translate: -50% -50%;
    }

    .hs:not(.hs--forced) .hs-slide[data-hs-cflow="1"] .hs-text {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        flex: 0 0 auto;
        margin: var(--hs-cfg) auto 0;
    }
}

.hs.hs--force-tablet .hs-slide[data-hs-cflow="1"] .hs-frame,
.hs.hs--force-desktop .hs-slide[data-hs-cflow="1"] .hs-frame {
    display: flex;
    flex-direction: column;
    padding-top: var(--hs-cft);
    padding-bottom: var(--hs-cfb);
    min-height: 0;
}

.hs.hs--force-tablet .hs-slide[data-hs-cflow="1"] .hs-stagearea,
.hs.hs--force-desktop .hs-slide[data-hs-cflow="1"] .hs-stagearea {
    position: relative;
    inset: auto;
    flex: 1 1 0;
    min-height: 38%;
}

.hs.hs--force-tablet .hs-slide[data-hs-cflow="1"] .hs-stage,
.hs.hs--force-desktop .hs-slide[data-hs-cflow="1"] .hs-stage {
    left: 50%;
    top: 50%;
    width: min(var(--hs-sw), calc(100cqh * var(--hs-sar)));
    height: auto;
    aspect-ratio: var(--hs-sar);
    translate: -50% -50%;
}

.hs.hs--force-tablet .hs-slide[data-hs-cflow="1"] .hs-text,
.hs.hs--force-desktop .hs-slide[data-hs-cflow="1"] .hs-text {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    flex: 0 0 auto;
    margin: var(--hs-cfg) auto 0;
}

/* Phone: every slide has the band's height (the tallest slide's - they share one grid cell); a shorter slide's content
   sits in the middle of it, so nothing moves when slides change. */
.hs .hs-slide {
    display: var(--hs-slide-display, flex);
    flex-direction: column;
    justify-content: center;
}

/* Horizontal swipes reach hero_slider.js; vertical ones still scroll the page. */
.hs--nav .hs-canvas {
    touch-action: pan-y;
}

/* Chrome has no UA rule for <source> (see list_product_themes.css). */
.hs source {
    display: none;
}

/* ---- one slide ---- */
.hs .hs-slide {
    position: var(--hs-slide-pos);
    inset: 0;
    grid-area: 1 / 1;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
    background: #0b0d10;
    line-height: 1.2;
    font-size: calc(14 * var(--hs-px));
    font-weight: 400;
    color: #eef0f3;
    letter-spacing: 0;
    text-align: start;
    user-select: none;
    -webkit-user-select: none;
}

.hs .hs-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility 0s linear 0s;
    z-index: 1;
}

/* The theme forces fonts, capitalisation and link colours with !important; the stage looks the
   same in the admin, which loads none of it. Icon fonts are not inside the slide. */
.hs .hs-slide,
.hs .hs-slide *,
.hs .hs-nav .hs-tab,
.hs .hs-nav .hs-tab * {
    font-family: "Poppins", "Source Sans Pro", system-ui, sans-serif !important;
    text-transform: none !important;
    box-sizing: border-box;
}

.hs .hs-slide[dir="rtl"],
.hs .hs-slide[dir="rtl"] *,
.hs--rtl .hs-nav .hs-tab,
.hs--rtl .hs-nav .hs-tab * {
    font-family: "Tajawal", system-ui, sans-serif !important;
}

.hs .hs-slide a,
.hs .hs-slide a:hover,
.hs .hs-slide a:focus {
    text-decoration: none !important;
}

.hs .hs-slide img {
    max-width: none;
}

/* =====================================================================================
   Backgrounds: the stack is background + pattern → giant word → covers → text.
   The colour layer (.hs-bg) is drawn by data-hs-bg; options are root variables (whitelisted colours / numbers):
   --hs-glow, --hs-tint, --hs-accent, --hs-gfrom / --hs-gto / --hs-gangle (gradient), --hs-isz / --hs-ix / --hs-iy
   (image size and position), --hs-pats (pattern strength), --hs-c1..3 / --hs-bgs / --hs-bgd (the newer types:
   colours, strength, density), --hs-dark (darkness).
   ===================================================================================== */

.hs .hs-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hs .hs-bg {
    background: linear-gradient(180deg, #111419, #0b0d10);
    overflow: hidden;
}

.hs .hs-bg::before,
.hs .hs-bg::after {
    content: none;
    position: absolute;
    pointer-events: none;
}

/* Spotlight: a glow behind the covers (x per device: --hs-spx). */
.hs .hs-slide[data-hs-bg="spotlight"] .hs-bg {
    background: radial-gradient(ellipse 55% 75% at var(--hs-spx) 45%, var(--hs-glow) 0%, color-mix(in srgb, var(--hs-glow) 40%, transparent) 40%, #0b0d10 80%);
}

/* Gradient: start colour (also the far end) → end colour; linear / radial / conic; angle. */
.hs .hs-slide[data-hs-bg="gradient"] .hs-bg {
    background: linear-gradient(var(--hs-gangle, 115deg), var(--hs-gfrom, #0b0d10) 18%, var(--hs-gto, var(--hs-glow)) 72%, var(--hs-gfrom, #0b0d10) 115%);
}

.hs .hs-slide[data-hs-bg="gradient"][data-hs-grad="radial"] .hs-bg {
    background: radial-gradient(ellipse 70% 95% at var(--hs-spx) 45%, var(--hs-gto, var(--hs-glow)) 0%, var(--hs-gfrom, #0b0d10) 82%);
}

.hs .hs-slide[data-hs-bg="gradient"][data-hs-grad="conic"] .hs-bg {
    background: conic-gradient(from var(--hs-gangle, 115deg) at var(--hs-spx) 55%, var(--hs-gfrom, #0b0d10), var(--hs-gto, var(--hs-glow)) 30%, var(--hs-gfrom, #0b0d10) 60%, var(--hs-gto, var(--hs-glow)) 85%, var(--hs-gfrom, #0b0d10));
}

/* Platform tint: the platform's colour from below, with a pattern (lines / dots / grid / none) at --hs-pats. */
.hs .hs-slide[data-hs-bg="platform"] .hs-bg {
    background: radial-gradient(circle at var(--hs-spx) 120%, var(--hs-tint) 0%, #0b0d10 70%);
}

.hs .hs-slide[data-hs-bg="platform"] .hs-bg::after {
    content: "";
    inset: 0;
    opacity: var(--hs-pats, .4);
}

.hs .hs-slide[data-hs-bg="platform"][data-hs-pat="lines"] .hs-bg::after {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .075) 0 2px, transparent 2px 18px);
}

.hs .hs-slide[data-hs-bg="platform"][data-hs-pat="dots"] .hs-bg::after {
    background: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.7px) 0 0 / 14px 14px;
}

.hs .hs-slide[data-hs-bg="platform"][data-hs-pat="grid"] .hs-bg::after {
    background:
        linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 26px 26px;
}

.hs .hs-slide[data-hs-bg="platform"][data-hs-pat="none"] .hs-bg::after {
    content: none;
}

/* Mesh: three soft colour fields (colour 1 / 2 / 3 = glow / accent / tint unless picked). */
.hs .hs-slide[data-hs-bg="mesh"] .hs-bg {
    background:
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) calc(var(--hs-bgs, .6) * 100%), transparent) 0, transparent calc(28% + var(--hs-bgd, .5) * 30%)),
        radial-gradient(circle at 84% 28%, color-mix(in srgb, var(--hs-c2, var(--hs-accent)) calc(var(--hs-bgs, .6) * 70%), transparent) 0, transparent calc(22% + var(--hs-bgd, .5) * 28%)),
        radial-gradient(circle at 62% 92%, color-mix(in srgb, var(--hs-c3, var(--hs-tint)) calc(var(--hs-bgs, .6) * 90%), transparent) 0, transparent calc(26% + var(--hs-bgd, .5) * 30%)),
        #0b0d10;
}

/* Aurora: blurred bands of colour across the top. */
.hs .hs-slide[data-hs-bg="aurora"] .hs-bg {
    background: linear-gradient(180deg, #0d1016, #0b0d10);
}

.hs .hs-slide[data-hs-bg="aurora"] .hs-bg::before {
    content: "";
    left: -20%;
    right: -20%;
    top: -30%;
    height: calc(70% + var(--hs-bgd, .5) * 30%);
    background: linear-gradient(100deg, transparent 12%, var(--hs-c1, var(--hs-glow)) 30%, transparent 46%, var(--hs-c2, var(--hs-accent)) 60%, transparent 76%, var(--hs-c3, var(--hs-tint)) 88%, transparent 98%);
    opacity: calc(.25 + var(--hs-bgs, .6) * .6);
    filter: blur(5cqw);
    transform: skewY(-8deg);
}

/* Spotlight pair: two cones of light from above (colour 1 left, colour 2 right). */
.hs .hs-slide[data-hs-bg="spotpair"] .hs-bg {
    background:
        radial-gradient(ellipse calc(14% + var(--hs-bgd, .5) * 18%) 95% at 30% -8%, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) calc(var(--hs-bgs, .6) * 100%), transparent) 0%, transparent 80%),
        radial-gradient(ellipse calc(14% + var(--hs-bgd, .5) * 18%) 95% at 70% -8%, color-mix(in srgb, var(--hs-c2, var(--hs-accent)) calc(var(--hs-bgs, .6) * 70%), transparent) 0%, transparent 80%),
        #0b0d10;
}

/* Perspective grid floor: lines in colour 1 running to the horizon. */
.hs .hs-slide[data-hs-bg="gridfloor"] .hs-bg {
    background: radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 55%, transparent), #0b0d10 70%);
    perspective: 60cqw;
}

.hs .hs-slide[data-hs-bg="gridfloor"] .hs-bg::before {
    content: "";
    left: -50%;
    right: -50%;
    bottom: -10%;
    height: 75%;
    background:
        linear-gradient(color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 80%, #ffffff) 1px, transparent 1px) 0 0 / calc(2.5cqw + (1 - var(--hs-bgd, .5)) * 4cqw) calc(2.5cqw + (1 - var(--hs-bgd, .5)) * 4cqw),
        linear-gradient(90deg, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 80%, #ffffff) 1px, transparent 1px) 0 0 / calc(2.5cqw + (1 - var(--hs-bgd, .5)) * 4cqw) calc(2.5cqw + (1 - var(--hs-bgd, .5)) * 4cqw);
    opacity: calc(.15 + var(--hs-bgs, .6) * .55);
    transform: rotateX(68deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}

/* Bokeh: soft out-of-focus lights. */
.hs .hs-slide[data-hs-bg="bokeh"] .hs-bg {
    background: radial-gradient(ellipse 70% 70% at var(--hs-spx) 50%, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 60%, #0b0d10), #0b0d10 75%);
}

.hs .hs-slide[data-hs-bg="bokeh"] .hs-bg::before {
    content: "";
    inset: 0;
    --hs-bk: calc(3cqw + var(--hs-bgd, .5) * 5cqw);
    background:
        radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--hs-c2, var(--hs-accent)) 70%, transparent) 0, transparent var(--hs-bk)),
        radial-gradient(circle at 28% 78%, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 80%, #ffffff) 0, transparent calc(var(--hs-bk) * .7)),
        radial-gradient(circle at 46% 14%, color-mix(in srgb, var(--hs-c2, var(--hs-accent)) 50%, transparent) 0, transparent calc(var(--hs-bk) * .5)),
        radial-gradient(circle at 64% 70%, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 80%, #ffffff) 0, transparent calc(var(--hs-bk) * .9)),
        radial-gradient(circle at 80% 24%, color-mix(in srgb, var(--hs-c2, var(--hs-accent)) 60%, transparent) 0, transparent calc(var(--hs-bk) * .8)),
        radial-gradient(circle at 92% 82%, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 70%, #ffffff) 0, transparent calc(var(--hs-bk) * .6));
    opacity: calc(.2 + var(--hs-bgs, .6) * .6);
    filter: blur(.6cqw);
}

/* Noise texture: a colour wash with fine grain (an inline SVG noise, part of this stylesheet). */
.hs .hs-slide[data-hs-bg="noise"] .hs-bg {
    background: linear-gradient(135deg, color-mix(in srgb, var(--hs-c1, var(--hs-glow)) 70%, #0b0d10) 0%, #0b0d10 80%);
}

.hs .hs-slide[data-hs-bg="noise"] .hs-bg::after {
    content: "";
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: calc(80px + var(--hs-bgd, .5) * 160px);
    opacity: calc(var(--hs-bgs, .6) * .35);
    mix-blend-mode: overlay;
}

/* Blurred cover / uploaded art: size, position, blur (0 = sharp) and colour intensity. */
.hs .hs-bgimg {
    position: absolute;
    width: var(--hs-isz, 120%);
    height: var(--hs-isz, 120%);
    left: calc((100% - var(--hs-isz, 120%)) * var(--hs-ix, .5));
    top: calc((100% - var(--hs-isz, 120%)) * var(--hs-iy, .5));
    max-width: none;
    object-fit: cover;
    filter: var(--hs-flt, none);
    pointer-events: none;
}

.hs .hs-dark {
    background: rgba(11, 13, 16, var(--hs-dark, .45));
}

.hs .hs-vignette {
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, calc(var(--hs-dark, .45) / 1.4)) 100%);
}

.hs .hs-scrim {
    display: var(--hs-dsp, block);
    background: var(--hs-bg);
}

/* Image slides: their own uploads. */
.hs .hs-fullimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    pointer-events: none;
}

.hs .hs-bgimg.hs-only-wide,
.hs .hs-bgimg.hs-only-phone {
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
}

.hs .hs-slide .hs-only-wide {
    display: var(--hs-only-wide);
}

.hs .hs-slide .hs-only-phone {
    display: var(--hs-only-phone);
}

.hs .hs-fit {
    position: absolute;
    inset: calc(20 * var(--hs-px)) 10%;
    z-index: 10;
    filter: drop-shadow(0 calc(30 * var(--hs-px)) calc(50 * var(--hs-px)) rgba(0, 0, 0, .6));
    pointer-events: none;
}

.hs .hs-fit img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hs .hs-vs-split {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .6;
    pointer-events: none;
}

/* The background-loop layer (light sweep, dust). */
.hs .hs-bgfx {
    overflow: hidden;
}

/* =====================================================================================
   Decor
   ===================================================================================== */

.hs .hs-giant {
    position: absolute;
    left: var(--hs-l);
    top: var(--hs-t);
    transform: translate(-50%, -50%) rotate(var(--hs-grot, 0deg));
    font-size: var(--hs-fs);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1), font-size .5s cubic-bezier(.2, .8, .2, 1);
}

/* Letters stay inline (the gradient / cover styles clip the background to the text); "Draw-on" lifts them,
   so it makes them inline blocks. */
.hs .hs-slide[data-hs-wloop="draw"] .hs-gl {
    display: inline-block;
}

/* Giant word styles (HeroSlideSettings.GiantStyles). The layered ones repeat the word through
   content: attr(data-text) in ::before / ::after. */
.hs .hs-giant--outline,
.hs .hs-giant--vertical {
    color: transparent;
    -webkit-text-stroke: var(--hs-stroke) rgba(255, 255, 255, .13);
}

.hs .hs-giant--faint {
    color: rgba(255, 255, 255, .06);
}

.hs .hs-giant--gradient {
    color: transparent;
    background: linear-gradient(180deg, var(--hs-accent) 0%, color-mix(in srgb, var(--hs-accent) 35%, transparent) 55%, transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .5;
}

.hs .hs-giant--neon {
    color: transparent;
    -webkit-text-stroke: var(--hs-stroke) var(--hs-accent);
    text-shadow: 0 0 calc(18 * var(--hs-px)) color-mix(in srgb, var(--hs-accent) 55%, transparent),
                 0 0 calc(48 * var(--hs-px)) color-mix(in srgb, var(--hs-accent) 30%, transparent);
    opacity: .7;
}

.hs .hs-giant--echo {
    color: transparent;
    -webkit-text-stroke: var(--hs-stroke) rgba(255, 255, 255, .18);
}

.hs .hs-giant--echo::before,
.hs .hs-giant--echo::after,
.hs .hs-giant--half::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
}

.hs .hs-giant--echo::before {
    -webkit-text-stroke: var(--hs-stroke) rgba(255, 255, 255, .1);
    transform: translate(.045em, .045em);
}

.hs .hs-giant--echo::after {
    -webkit-text-stroke: var(--hs-stroke) rgba(255, 255, 255, .05);
    transform: translate(.09em, .09em);
}

.hs .hs-giant--half {
    color: transparent;
    -webkit-text-stroke: var(--hs-stroke) rgba(255, 255, 255, .15);
}

.hs .hs-giant--half::after {
    color: rgba(255, 255, 255, .08);
    -webkit-text-stroke: 0;
    clip-path: inset(50% 0 0 0);
}

.hs .hs-giant--cover {
    color: transparent;
    background-image: var(--hs-gimg, none);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .55;
}

.hs .hs-glow {
    position: absolute;
    left: var(--hs-l);
    top: var(--hs-t);
    width: var(--hs-w);
    height: var(--hs-h);
    border-radius: 50%;
    /* The Glow colour (Auto = the hero cover's own colour, kept dark for backgrounds: lifted a little for the light). */
    background: color-mix(in srgb, var(--hs-glow) 72%, #ffffff);
    opacity: calc(var(--hs-gop, .22) * 1.6);
    filter: var(--hs-flt, none);
    z-index: 3;
    pointer-events: none;
    transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1), background .3s, opacity .3s;
}

.hs .hs-bar {
    position: absolute;
    left: var(--hs-l);
    top: var(--hs-t);
    width: var(--hs-w);
    height: var(--hs-h);
    background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
    border-top: 1px solid rgba(255, 255, 255, .24);
    border-radius: calc(6 * var(--hs-px)) calc(6 * var(--hs-px)) 0 0;
    pointer-events: none;
    transition: left .55s cubic-bezier(.2, .8, .2, 1), top .55s cubic-bezier(.2, .8, .2, 1), width .55s cubic-bezier(.2, .8, .2, 1), height .55s cubic-bezier(.2, .8, .2, 1);
}

/* Layout shapes: pedestal, split panel, halo, orbit ring, mirror floor, lean line, spotlight cones. */
.hs .hs-deco {
    position: absolute;
    left: var(--hs-l);
    top: var(--hs-t);
    width: var(--hs-w);
    height: var(--hs-h);
    pointer-events: none;
    transition: left .55s cubic-bezier(.2, .8, .2, 1), top .55s cubic-bezier(.2, .8, .2, 1), width .55s cubic-bezier(.2, .8, .2, 1), height .55s cubic-bezier(.2, .8, .2, 1);
}

/* The light of the layout shapes (pedestal, split panel, halo, orbit, cones) is the Glow colour, never the accent. */
.hs .hs-deco--pedestal {
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--hs-glow) 45%, rgba(255, 255, 255, .3)), rgba(255, 255, 255, .05) 55%, transparent 72%);
    box-shadow: 0 calc(4 * var(--hs-px)) 0 rgba(255, 255, 255, .06) inset;
    border-top: 1px solid rgba(255, 255, 255, .28);
}

.hs .hs-deco--split {
    border-radius: calc(18 * var(--hs-px));
    background: linear-gradient(160deg, color-mix(in srgb, var(--hs-glow) 60%, transparent), color-mix(in srgb, var(--hs-glow) 25%, transparent));
    opacity: .55;
}

.hs .hs-deco--halo {
    border-radius: 50%;
    border: calc(2 * var(--hs-px)) solid color-mix(in srgb, var(--hs-glow) 60%, #ffffff);
    box-shadow: 0 0 calc(40 * var(--hs-px)) color-mix(in srgb, var(--hs-glow) 70%, transparent), inset 0 0 calc(40 * var(--hs-px)) color-mix(in srgb, var(--hs-glow) 45%, transparent);
    opacity: .75;
}

.hs .hs-deco--orbit {
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--hs-glow) 45%, rgba(255, 255, 255, .5));
    transform: rotate(-8deg);
}

.hs .hs-deco--floor {
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.hs .hs-deco--lean {
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55), transparent 70%);
}

.hs .hs-deco--cone {
    background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--hs-glow) 70%, #ffffff) 55%, transparent), transparent 85%);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    opacity: .45;
    filter: blur(calc(6 * var(--hs-px)));
}

/* ---- covers: placed by their centre and height; the picture takes the art's own shape (--hs-ar, never cropped).
   Focus switching (hero_slider.js) animates them with the Web Animations API (.hs-swapping turns the CSS
   transitions off meanwhile); otherwise a change of slot glides with these transitions. */
.hs .hs-cover {
    position: absolute;
    display: block;
    margin: 0;
    left: var(--hs-l);
    top: var(--hs-t);
    height: min(var(--hs-h), calc(var(--hs-h) * .95 / var(--hs-ar, .75)));
    width: auto;
    aspect-ratio: var(--hs-ar, .75);
    transform: translate(-50%, -50%) perspective(calc(900 * var(--hs-px))) rotateY(var(--hs-ry, 0deg)) rotate(var(--hs-r, 0deg));
    filter: var(--hs-flt, none);
    transition: left .6s cubic-bezier(.2, .8, .2, 1), top .6s cubic-bezier(.2, .8, .2, 1),
                height .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}

.hs .hs-cover.hs-swapping {
    transition: none !important;
}

/* A cover that is not in front brings its product forward when clicked. */
.hs .hs-slide[data-hs-switch="1"] .hs-cover:not(.is-hero) {
    cursor: pointer;
}

/* The art: the <picture> fills the cover box; the image keeps its own shape. */
.hs .hs-cover__art {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.hs .hs-cover__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    border-radius: var(--hs-rad);
    box-shadow: var(--hs-sh);
    background: #14171c;
    transition: box-shadow .55s, border-radius .55s;
}

/* ---- floor reflection: a mirrored copy of the art right under the cover's own bottom edge, fading out. It lives inside
   the cover, so it follows its turn and inherits its depth (brightness / blur): back covers - higher up - reflect
   higher and weaker. --hs-rfl = its length (share of the cover height, already cut before the canvas edge),
   --hs-rfo = depth strength, --hs-rfs = the slide's Reflection strength. Never -webkit-box-reflect (not everywhere). */
.hs .hs-refl {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    height: calc(var(--hs-rfl, 0) * 100%);
    overflow: hidden;
    pointer-events: none;
    opacity: calc(var(--hs-rfs, .4) * var(--hs-rfo, 1));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 92%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 92%);
}

.hs .hs-cover--reflect .hs-refl {
    display: block;
}

.hs .hs-refl img {
    display: block;
    width: 100%;
    height: calc(100% / max(var(--hs-rfl, .35), .04));
    object-fit: contain;
    border-radius: var(--hs-rad);
    /* Flipped in place: the art's bottom row is now at the top, right under the cover. */
    transform: scaleY(-1);
}

/* A cover turned more than 4°: a soft contact shadow under it instead of a mirror. */
.hs .hs-cover--contact::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: calc(100% - 4%);
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, calc(.35 + var(--hs-rfs, .4) * .5)), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* "Glossy floor": a very soft light line and fade under all the covers. */
.hs .hs-gloss {
    position: absolute;
    left: var(--hs-l);
    top: var(--hs-t);
    width: var(--hs-w);
    height: var(--hs-h);
    pointer-events: none;
    z-index: 4;
    background:
        radial-gradient(ellipse 50% 2px at 50% 0, rgba(255, 255, 255, calc(.12 + var(--hs-rfs, .4) * .25)), transparent),
        linear-gradient(180deg, rgba(255, 255, 255, calc(var(--hs-rfs, .4) * .1)), transparent 85%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.hs .hs-vs-text {
    position: absolute;
    left: var(--hs-l);
    top: var(--hs-t);
    transform: translate(-50%, -50%);
    font-size: var(--hs-fs);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--hs-accent);
    letter-spacing: -.04em;
    z-index: 30;
    pointer-events: none;
}

.hs .hs-float {
    position: absolute;
    left: var(--hs-l);
    top: var(--hs-t);
    z-index: 30;
    pointer-events: none;
    height: calc(var(--hs-chiph) * var(--hs-px));
    padding: 0 calc(14 * var(--hs-px));
    border-radius: 999px;
    background: rgba(20, 23, 28, .9);
    border: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    font-size: calc(var(--hs-chipf) * var(--hs-px));
    font-weight: 600;
    white-space: nowrap;
    color: #ffffff;
    box-shadow: 0 calc(10 * var(--hs-px)) calc(30 * var(--hs-px)) rgba(0, 0, 0, .45);
    transition: left .55s cubic-bezier(.2, .8, .2, 1), top .55s cubic-bezier(.2, .8, .2, 1);
}

.hs .hs-float--price {
    color: var(--hs-accent);
}

.hs .hs-float--stock {
    color: #3ddc84;
}

/* =====================================================================================
   Full-band layers: the background loop "Light" and the texture. They cover the WHOLE band (edge to edge, the
   band's corner radius), never only the content canvas. Soft and premium: pre-blurred gradients, transform-only
   motion, no filter blur on big moving layers.
   ===================================================================================== */

/* ---- Light (Motion → Background loop → Light): --hs-lgi intensity, --hs-lgw width, --hs-lga angle, --hs-lgt interval;
   colour white / accent / glow (data-hs-lightc). The beam is the <i> inside the layer. */
.hs .hs-light {
    overflow: hidden;
    container-type: size;
    mix-blend-mode: screen;
    --hs-lc: rgba(255, 255, 255, .9);
    opacity: calc(.12 + var(--hs-lgi, .55) * .6);
}

.hs .hs-slide[data-hs-lightc="accent"] .hs-light { --hs-lc: var(--hs-accent); }
.hs .hs-slide[data-hs-lightc="glow"] .hs-light { --hs-lc: color-mix(in srgb, var(--hs-glow) 65%, #ffffff); }

.hs .hs-light i {
    position: absolute;
    top: -40%;
    left: 0;
    width: calc(8% + var(--hs-lgw, .4) * 40%);
    height: 180%;
    rotate: var(--hs-lga, 20deg);
    translate: 45cqw 0;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--hs-lc) 22%, transparent) 30%, color-mix(in srgb, var(--hs-lc) 34%, transparent) 50%, color-mix(in srgb, var(--hs-lc) 22%, transparent) 70%, transparent 100%);
}

.hs .hs-light i::before,
.hs .hs-light i::after {
    content: none;
    position: absolute;
    pointer-events: none;
}

/* Twin beams: two bands side by side. */
.hs .hs-slide[data-hs-light="twin"] .hs-light i {
    width: calc(16% + var(--hs-lgw, .4) * 50%);
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--hs-lc) 30%, transparent) 16%, transparent 34%, transparent 58%, color-mix(in srgb, var(--hs-lc) 24%, transparent) 76%, transparent 94%);
}

/* Glint: a thin sharp streak. */
.hs .hs-slide[data-hs-light="glint"] .hs-light i {
    width: calc(1.2% + var(--hs-lgw, .4) * 3%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hs-lc) 75%, transparent) 50%, transparent);
}

/* Spotlight scan: a soft round light drifting across the band. */
.hs .hs-slide[data-hs-light="scan"] .hs-light i {
    top: 50%;
    width: calc(30cqh + var(--hs-lgw, .4) * 90cqh);
    height: auto;
    aspect-ratio: 1;
    rotate: 0deg;
    translate: 40cqw -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--hs-lc) 34%, transparent), color-mix(in srgb, var(--hs-lc) 12%, transparent) 55%, transparent);
}

/* God rays: soft rays from above, turning slowly. */
.hs .hs-slide[data-hs-light="rays"] .hs-light i {
    top: -60%;
    left: 50%;
    width: 160cqw;
    height: 160cqw;
    rotate: 0deg;
    translate: -50% 0;
    transform-origin: 50% 0;
    background: repeating-conic-gradient(from calc(var(--hs-lga, 20deg) - 90deg) at 50% 0, color-mix(in srgb, var(--hs-lc) 16%, transparent) 0deg calc(1deg + var(--hs-lgw, .4) * 4deg), transparent calc(4deg + var(--hs-lgw, .4) * 6deg) 16deg);
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 0, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 0, #000, transparent 75%);
}

/* Edge rim: light travelling along the band's edge (a turning conic light seen through a thin ring, with the band's
   own corner radius). */
.hs .hs-slide[data-hs-light="rim"] .hs-light {
    border-radius: var(--border-radius-defualt, 10px);
}

.hs .hs-slide[data-hs-light="rim"] .hs-light i {
    inset: 0;
    top: 0;
    width: auto;
    height: auto;
    rotate: 0deg;
    translate: none;
    background: none;
    border-radius: inherit;
    padding: calc(1.5px + var(--hs-lgw, .4) * 2.5px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.hs .hs-slide[data-hs-light="rim"] .hs-light i::before {
    content: "";
    left: 50%;
    top: 50%;
    width: 150cqw;
    height: 150cqw;
    translate: -50% -50%;
    background: conic-gradient(from 0deg, transparent 0deg 300deg, var(--hs-lc) 340deg, transparent 360deg);
}

@keyframes hs-light-pass { 0% { translate: -60cqw 0; } 55%, 100% { translate: 130cqw 0; } }
@keyframes hs-light-scan { from { translate: 8cqw -50%; } to { translate: calc(92cqw - 100%) -50%; } }
@keyframes hs-light-rays { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes hs-light-rim { to { rotate: 360deg; } }

.hs .hs-slide.is-active[data-hs-loops="1"] .hs-light i {
    animation: hs-light-pass calc(var(--hs-lgt, 9s) / var(--hs-sp-b, 1)) cubic-bezier(.45, .05, .25, 1) infinite;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-light="scan"] .hs-light i {
    animation: hs-light-scan calc(var(--hs-lgt, 9s) / var(--hs-sp-b, 1)) ease-in-out infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-light="rays"] .hs-light i {
    animation: hs-light-rays calc(var(--hs-lgt, 9s) * 2 / var(--hs-sp-b, 1)) ease-in-out infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-light="rim"] .hs-light i {
    animation: none;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-light="rim"] .hs-light i::before {
    animation: hs-light-rim calc(var(--hs-lgt, 9s) / var(--hs-sp-b, 1)) linear infinite;
}

/* ---- Texture (Background → Texture): film grain (animated noise), static noise, dots, scanlines, halftone.
   --hs-txi intensity; size fine / medium / coarse (data-hs-texsz); data-hs-texanim moves the grain. */
.hs .hs-texture {
    overflow: hidden;
    opacity: calc(var(--hs-txi, .35) * .9);
    --hs-tx: 1;
}

.hs .hs-slide[data-hs-texsz="fine"] .hs-texture { --hs-tx: .6; }
.hs .hs-slide[data-hs-texsz="coarse"] .hs-texture { --hs-tx: 1.7; }

.hs .hs-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hs .hs-slide[data-hs-tex="grain"] .hs-texture::before,
.hs .hs-slide[data-hs-tex="noise"] .hs-texture::before {
    inset: -40%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: calc(200px * var(--hs-tx));
    mix-blend-mode: overlay;
}

.hs .hs-slide[data-hs-tex="dots"] .hs-texture::before {
    background: radial-gradient(rgba(255, 255, 255, .28) calc(.8px * var(--hs-tx)), transparent calc(1.3px * var(--hs-tx))) 0 0 / calc(5px * var(--hs-tx)) calc(5px * var(--hs-tx));
}

.hs .hs-slide[data-hs-tex="scanlines"] .hs-texture::before {
    inset: -10% 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px calc(3px * var(--hs-tx)), rgba(0, 0, 0, .18) calc(3px * var(--hs-tx)) calc(4px * var(--hs-tx)));
}

.hs .hs-slide[data-hs-tex="halftone"] .hs-texture::before {
    background: radial-gradient(circle, rgba(255, 255, 255, .34) 28%, transparent 31%) 0 0 / calc(7px * var(--hs-tx)) calc(7px * var(--hs-tx));
    -webkit-mask-image: linear-gradient(125deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
    mask-image: linear-gradient(125deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
}

@keyframes hs-grain { 0% { translate: 0 0; } 20% { translate: -5% 3%; } 40% { translate: 4% -4%; } 60% { translate: -3% -2%; } 80% { translate: 5% 4%; } 100% { translate: 0 0; } }
@keyframes hs-scan-drift { from { translate: 0 0; } to { translate: 0 calc(8px * var(--hs-tx)); } }

.hs .hs-slide.is-active[data-hs-tex="grain"][data-hs-texanim="1"] .hs-texture::before {
    animation: hs-grain 1s steps(5) infinite;
}
.hs .hs-slide.is-active[data-hs-tex="scanlines"][data-hs-texanim="1"] .hs-texture::before {
    animation: hs-scan-drift 1.6s linear infinite;
}

.hs .hs-imglink {
    position: absolute;
    inset: 0;
    z-index: 60;
}

/* =====================================================================================
   Text
   ===================================================================================== */

.hs .hs-text {
    position: var(--hs-text-pos);
    display: flex;
    flex-direction: column;
    left: var(--hs-l);
    width: var(--hs-w);
    /* The engine's left is physical and already mirrored for Arabic. In the phone flow (position: relative) an
       RTL block would start at the right edge and then move by that left again: pinning the box to the physical
       left keeps ONE mirroring source. (No effect on the absolute wide variants.) */
    margin: 0 auto 0 0;
    top: var(--hs-t, auto);
    bottom: var(--hs-b, auto);
    transform: var(--hs-tf, none);
    gap: 0;
    /* Above every cover and every decor layer: the text, picker and buttons always take the click. */
    z-index: 70;
    align-items: flex-start;
    text-align: start;
    transition: left .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1);
    --hs-rhythm: 1;
}

.hs .hs-text--center {
    align-items: center;
    text-align: center;
}

/* Text rhythm (fixed by the system, in design pixels so it scales): label, title and short text read as
   one group, then a clear step to the price and a larger one to the buttons. "Compact" tightens it. */
.hs .hs-sp-compact .hs-text {
    --hs-rhythm: .65;
}

.hs .hs-slide .hs-text > * {
    margin: calc(12 * var(--hs-rhythm) * var(--hs-px)) 0 0;
}

/* The first VISIBLE item has no top margin (the builder's superset preview keeps hidden badge / kicker
   elements in place with hs-off, so the rules skip them and the spacing equals the storefront's). */
.hs .hs-slide .hs-text > :first-child,
.hs .hs-slide .hs-text > .hs-off:first-child + *,
.hs .hs-slide .hs-text > .hs-off:first-child + .hs-off + * {
    margin-top: 0;
}

.hs .hs-slide .hs-text > .hs-badge:not(.hs-off) + .hs-kicker,
.hs .hs-slide .hs-text > .hs-kicker:not(.hs-off) + .hs-title,
.hs .hs-slide .hs-text > .hs-badge:not(.hs-off) + .hs-title,
.hs .hs-slide .hs-text > .hs-badge:not(.hs-off) + .hs-kicker.hs-off + .hs-title {
    margin-top: calc(6 * var(--hs-rhythm) * var(--hs-px));
}

.hs .hs-slide .hs-text > .hs-title + .hs-sub {
    margin-top: calc(10 * var(--hs-rhythm) * var(--hs-px));
}

.hs .hs-slide .hs-text > .hs-countdown,
.hs .hs-slide .hs-text > .hs-price {
    margin-top: calc(16 * var(--hs-rhythm) * var(--hs-px));
}

.hs .hs-slide .hs-text > .hs-chipsbox {
    margin-top: calc(14 * var(--hs-rhythm) * var(--hs-px));
}

.hs .hs-slide .hs-text > .hs-buttons {
    margin-top: calc(20 * var(--hs-rhythm) * var(--hs-px));
}

.hs .hs-badge {
    display: inline-flex;
    align-items: center;
    height: calc(var(--hs-bdh) * var(--hs-px));
    padding: 0 calc(10 * var(--hs-px));
    border-radius: calc(8 * var(--hs-px));
    background: var(--hs-accent);
    color: var(--hs-on-accent, #0b0d10);
    font-size: calc(var(--hs-bdf) * var(--hs-px));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* While hero_slider.js measures the text fit, the title's size transition would hand it the old size. */
.hs .hs-slide.hs-fitting .hs-title {
    transition: none;
}

.hs .hs-kicker {
    display: block;
    font-size: calc(var(--hs-k) * var(--hs-px) * var(--hs-tfit, 1));
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.3;
    color: var(--hs-accent);
}

.hs .hs-slide .hs-title {
    margin: 0;
    padding: 0;
    /* --hs-tfit: hero_slider.js scales a text block that still runs past the canvas (1 = as designed). */
    font-size: calc(var(--hs-fs) * var(--hs-tfit, 1));
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.06;
    color: #eef0f3;
    border: 0;
    transition: font-size .3s ease;
}

.hs .hs-tw {
    display: inline-block;
}

.hs .hs-slide[dir="rtl"] .hs-kicker,
.hs .hs-slide[dir="rtl"] .hs-title,
.hs .hs-slide[dir="rtl"] .hs-picker__label {
    letter-spacing: 0;
}

.hs .hs-slide[dir="rtl"] .hs-title {
    line-height: 1.25;
}

.hs .hs-slide .hs-sub {
    margin: 0;
    font-size: calc(var(--hs-s) * var(--hs-px) * var(--hs-tfit, 1));
    line-height: 1.6;
    color: #b9bfc6;
    display: -webkit-box;
    -webkit-line-clamp: var(--hs-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hs .hs-countdown {
    display: flex;
    gap: calc(8 * var(--hs-px));
}

.hs .hs-countdown__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(var(--hs-cdw) * var(--hs-px));
    height: calc(var(--hs-cdh) * var(--hs-px));
    border-radius: calc(12 * var(--hs-px));
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
}

.hs .hs-countdown__value {
    font-size: calc(var(--hs-cdf) * var(--hs-px));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    direction: ltr;
}

.hs .hs-countdown__label {
    font-size: calc(11 * var(--hs-px));
    color: #8b929b;
    margin-top: calc(5 * var(--hs-px));
    line-height: 1;
}

.hs .hs-price {
    display: var(--hs-dsp, inline-flex);
    align-items: baseline;
    gap: .35em;
    font-size: calc(var(--hs-pr) * var(--hs-px));
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.hs .hs-price__from {
    font-weight: 500;
    color: #b9bfc6;
}

/* "Show price" off: no price anywhere on the slide (the price line, the editions' prices, the floating chip). */
.hs .hs-noprice .hs-price,
.hs .hs-noprice .hs-chip__price,
.hs .hs-noprice .hs-pick__price,
.hs .hs-noprice .hs-float--price {
    display: none !important;
}

/* The site's one price format (list_product_themes.css .g2e-price), repeated for the admin. */
.hs .g2e-price { display: inline-flex; align-items: baseline; gap: .22em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs .g2e-price__cur { font-size: .68em; font-weight: 600; opacity: .78; }
.hs .g2e-price__int { font-weight: 800; }
.hs .g2e-price__num { direction: ltr; unicode-bidi: isolate; }
.hs .g2e-price__dec { font-size: .68em; font-weight: 700; }

/* ---- edition picker: chips (tablet / phone, or a centred desktop slide) ----
   One row that scrolls sideways. When it overflows (hero_slider.js: is-overflow) its far edge fades and a small
   arrow shows there; the arrow scrolls the row. */
.hs .hs-chipsbox {
    position: relative;
    display: var(--hs-dsp, flex);
    max-width: 100%;
    min-width: 0;
}

.hs .hs-chips {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: calc(6 * var(--hs-px));
    scroll-behavior: smooth;
}

.hs .hs-chips::-webkit-scrollbar {
    display: none;
}

.hs .hs-chipsbox.is-overflow .hs-chips {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40 * var(--hs-px)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40 * var(--hs-px)), transparent);
}

.hs .hs-slide[dir="rtl"] .hs-chipsbox.is-overflow .hs-chips {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40 * var(--hs-px)), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 40 * var(--hs-px)), transparent);
}

.hs .hs-chipsbox.is-overflow.is-end .hs-chips {
    -webkit-mask-image: none;
    mask-image: none;
}

.hs .hs-chips__more {
    display: none;
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    width: calc(22 * var(--hs-px));
    height: calc(22 * var(--hs-px));
    margin-top: calc(-11 * var(--hs-px));
    border-radius: 50%;
    background: rgba(20, 23, 28, .92);
    border: 1px solid rgba(255, 255, 255, .2);
    cursor: pointer;
    pointer-events: auto;
}

.hs .hs-chips__more::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 30%;
    border-top: 1.5px solid #ffffff;
    border-right: 1.5px solid #ffffff;
    transform: translate(-65%, -50%) rotate(45deg);
}

.hs .hs-slide[dir="rtl"] .hs-chips__more::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

.hs .hs-chipsbox.is-overflow:not(.is-end) .hs-chips__more {
    display: block;
}

.hs .hs-chipsbox--center {
    justify-content: center;
}

.hs .hs-slide .hs-chips .hs-chip {
    flex: 0 0 auto;
}

.hs .hs-slide .hs-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--hs-px));
    height: calc(var(--hs-pkh) * var(--hs-px));
    padding: 0 calc(12 * var(--hs-px));
    border-radius: 999px;
    font-size: calc(var(--hs-pkf) * var(--hs-px));
    color: #ffffff;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    margin: 0;
    line-height: 1;
    transition: background .2s, border-color .2s;
}

.hs .hs-slide .hs-chip:hover {
    border-color: rgba(255, 255, 255, .3);
}

.hs .hs-slide .hs-chip.is-selected {
    background: rgba(255, 255, 255, .12);
    border-color: var(--hs-accent);
}

.hs .hs-chip__price {
    color: #b9bfc6;
}

/* ---- buttons ---- */
/* Two long buttons in a narrow text box: the second one wraps under the first instead of running into the covers. */
.hs .hs-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 * var(--hs-px));
    width: var(--hs-btnrow-w);
    max-width: 100%;
}

.hs .hs-text--center .hs-buttons {
    justify-content: center;
}

.hs .hs-slide a.hs-btn,
.hs .hs-slide a.hs-btn:hover,
.hs .hs-slide a.hs-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-grow: var(--hs-btn-grow);
    height: calc(var(--hs-btnh) * var(--hs-px));
    padding: 0 calc(24 * var(--hs-px));
    border-radius: calc(14 * var(--hs-px));
    background: var(--hs-accent);
    /* Near-black on a light accent, white on a dark custom one (HeroSlideSettings.TextOnColour). */
    color: var(--hs-on-accent, #0b0d10) !important;
    font-size: calc(var(--hs-bf) * var(--hs-px));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 0;
}

.hs .hs-slide a.hs-btn:hover {
    filter: brightness(1.08);
}

.hs .hs-slide a.hs-btn2,
.hs .hs-slide a.hs-btn2:hover,
.hs .hs-slide a.hs-btn2:focus {
    display: var(--hs-btn2);
    align-items: center;
    justify-content: center;
    height: calc(var(--hs-btnh) * var(--hs-px));
    padding: 0 calc(22 * var(--hs-px));
    border-radius: calc(14 * var(--hs-px));
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #ffffff !important;
    font-size: calc(var(--hs-bf) * var(--hs-px));
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.hs .hs-slide a.hs-btn2:hover {
    border-color: rgba(255, 255, 255, .34);
}

.hs .hs-slide a:focus-visible,
.hs .hs-slide button:focus-visible,
.hs .hs-nav button:focus-visible {
    outline: 2px solid #f4b63d;
    outline-offset: 2px;
}

/* ---- edition picker: desktop list ---- */
.hs .hs-picker {
    position: absolute;
    display: var(--hs-dsp, flex);
    flex-direction: column;
    gap: calc(8 * var(--hs-px));
    z-index: 70;
    left: var(--hs-l);
    width: var(--hs-w);
    bottom: var(--hs-b);
}

.hs .hs-picker__label {
    font-size: calc(12 * var(--hs-px));
    color: #8b929b;
    letter-spacing: .16em;
    text-align: start;
}

.hs .hs-slide .hs-pick {
    height: calc(50 * var(--hs-px));
    border-radius: calc(14 * var(--hs-px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(16 * var(--hs-px));
    font-size: calc(15 * var(--hs-px));
    color: #ffffff;
    cursor: pointer;
    margin: 0;
    line-height: 1;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background .2s, border-color .2s;
}

.hs .hs-slide .hs-pick:hover {
    border-color: rgba(255, 255, 255, .26);
}

.hs .hs-slide .hs-pick.is-selected {
    background: rgba(255, 255, 255, .1);
    border-color: var(--hs-accent);
}

.hs .hs-pick__plat {
    display: inline-flex;
    align-items: center;
    gap: calc(9 * var(--hs-px));
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
}

/* The platform dot (picker rows and chips): PlayStation blue, Nintendo red, Xbox green, PC amber, else muted. */
.hs .hs-pdot {
    flex: 0 0 auto;
    width: calc(8 * var(--hs-px));
    height: calc(8 * var(--hs-px));
    min-width: 6px;
    min-height: 6px;
    border-radius: 50%;
    background: var(--hs-pc, #6f767f);
    box-shadow: 0 0 0 calc(3 * var(--hs-px)) color-mix(in srgb, var(--hs-pc, #6f767f) 22%, transparent);
}

.hs .hs-pick__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(4 * var(--hs-px));
    flex: 0 0 auto;
}

.hs .hs-pick__price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The status, only what is true: in stock (green), out in N days / pre-order (gold), few left (amber). With the price
   shown it is a small line under the price; without prices it is a chip at the row's end. */
.hs .hs-pstat {
    display: inline-flex;
    align-items: center;
    gap: calc(5 * var(--hs-px));
    font-size: calc(10.5 * var(--hs-px));
    font-weight: 600;
    line-height: 1;
    color: #9aa1a9;
    white-space: nowrap;
}

.hs .hs-pstat--instock { color: #8bd6a8; }
.hs .hs-pstat--preorder { color: #f4b63d; }
.hs .hs-pstat--few { color: #f0a35a; }

.hs .hs-pstat--instock::before {
    content: "";
    width: calc(6 * var(--hs-px));
    height: calc(6 * var(--hs-px));
    min-width: 5px;
    min-height: 5px;
    border-radius: 50%;
    background: #3ddc84;
}

.hs .hs-noprice .hs-pstat {
    height: calc(22 * var(--hs-px));
    padding: 0 calc(9 * var(--hs-px));
    border-radius: 999px;
    font-size: calc(11.5 * var(--hs-px));
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Without prices the rows fit their content (at least 200 design px) and show a quiet chevron on hover / selected. */
.hs .hs-noprice .hs-picker {
    align-items: flex-start;
}

.hs .hs-noprice .hs-pick {
    width: max-content;
    min-width: min(100%, calc(200 * var(--hs-px)));
    max-width: 100%;
    gap: calc(14 * var(--hs-px));
}

.hs .hs-noprice .hs-pick::after {
    content: "";
    flex: 0 0 auto;
    width: calc(7 * var(--hs-px));
    height: calc(7 * var(--hs-px));
    border-right: 1.5px solid #c9ced4;
    border-bottom: 1.5px solid #c9ced4;
    rotate: -45deg;
    opacity: 0;
    transition: opacity .2s;
}

.hs .hs-slide[dir="rtl"].hs-noprice .hs-pick::after {
    rotate: 135deg;
}

.hs .hs-noprice .hs-pick:hover::after,
.hs .hs-noprice .hs-pick.is-selected::after {
    opacity: 1;
}

/* =====================================================================================
   Motion. Only transform / opacity / filter animate (and one-shot clip-paths for a few text entrances).
   EACH GROUP HAS ITS OWN SPEED (0.5 slow … 2 fast, durations divide by it): --hs-sp-e covers entrance, --hs-sp-t
   text entrance, --hs-sp-c covers loop, --hs-sp-b background loop, --hs-sp-w giant word loop.

   ENTRANCE (data-hs-entrance) + TEXT ENTRANCE (data-hs-text): replayed by .hs-play on the slide - on every slide
   change, and on the first slide once its hero image has loaded (hero_slider.js lifts .hs-await then; a CSS
   fallback shows the covers after 3 s if the script never runs). The builder replays ONE group: .hs-play-c (covers
   entrance only) or .hs-play-t (text entrance only). The entrances animate the INDIVIDUAL transform properties
   (translate / scale / rotate), which compose with each cover's own transform.

   LOOPS (data-hs-cloop covers, data-hs-bloop background, data-hs-wloop giant word) run only on the active slide,
   only while data-hs-loops="1", and pause while the hero is off screen or the tab hidden (.hs-paused).
   ===================================================================================== */

@keyframes hs-fade { from { opacity: 0; } }
@keyframes hs-rise { from { opacity: 0; translate: 0 5.8cqw; } }
@keyframes hs-fan { from { opacity: 0; rotate: calc(var(--hs-r, 0deg) * -1); scale: .82; } }
@keyframes hs-zoom { from { opacity: 0; scale: 1.25; } }
@keyframes hs-slide-in { from { opacity: 0; translate: 13.3cqw 0; } }
@keyframes hs-slide-in-rtl { from { opacity: 0; translate: -13.3cqw 0; } }
@keyframes hs-cascade { from { opacity: 0; translate: 0 8cqw; scale: .94; } }
@keyframes hs-flip { from { opacity: 0; rotate: y -85deg; } }
@keyframes hs-blur-fade { from { opacity: 0; } }
@keyframes hs-blur-in { from { filter: blur(1.6cqw); } to { filter: blur(0); } }
@keyframes hs-drop { 0% { opacity: 0; translate: 0 -14cqw; } 70% { opacity: 1; translate: 0 .7cqw; } 100% { translate: 0 0; } }
@keyframes hs-spinfan { from { opacity: 0; translate: var(--hs-sx, 0cqw) var(--hs-sy, 0cqw); rotate: calc(var(--hs-r, 0deg) * -1); } 30% { opacity: 1; } }
@keyframes hs-pop { 0% { opacity: 0; scale: .55; } 60% { opacity: 1; scale: 1.06; } 100% { scale: 1; } }
@keyframes hs-unfold { from { opacity: 0; translate: var(--hs-sx, 0cqw) var(--hs-sy, 0cqw); scale: .9; } 25% { opacity: 1; } }
@keyframes hs-curtain { from { opacity: 0; scale: .04 1; } 40% { opacity: 1; } }
@keyframes hs-sides { from { opacity: 0; translate: calc(var(--hs-sx, 0cqw) * -1.6 + 0cqw) 0; } }
@keyframes hs-text { from { opacity: 0; translate: 0 1.5cqw; } }
@keyframes hs-text-fade { from { opacity: 0; } }
@keyframes hs-text-mask { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 1cqw; } to { clip-path: inset(0 0 0 0); } }
@keyframes hs-word { from { opacity: 0; translate: 0 .5em; } }
@keyframes hs-letter { from { opacity: 0; translate: 0 .6em; rotate: 8deg; } }
@keyframes hs-text-blur { from { opacity: 0; filter: blur(.35em); } to { filter: blur(0); } }
@keyframes hs-text-side { from { opacity: 0; translate: -1.2em 0; } }
@keyframes hs-text-side-rtl { from { opacity: 0; translate: 1.2em 0; } }
@keyframes hs-text-scale { from { opacity: 0; scale: .82; } }
@keyframes hs-text-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hs-text-wipe-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hs-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hs-type-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hs-underline { from { scale: 0 1; } }
@keyframes hs-await-show { to { opacity: 1; } }

.hs .hs-slide {
    --hs-ease: cubic-bezier(.2, .8, .2, 1);
    --hs-dur: calc(.8s / var(--hs-sp-e, 1));
    --hs-wait: calc(var(--hs-delay, 0ms) / var(--hs-sp-e, 1));
}

/* The first slide on page load (.hs-first): the HERO COVER is painted at once, in place - it is the page's LCP image,
   so it never starts at opacity 0 or off-screen and never plays the entrance. The text and the other covers wait for
   the hero image (.hs-await, or 3 s if the script never runs), then play their entrance. Later slides, and the
   builder's Replay, play the full entrance (hs-first is removed when the slide is left; the builder never sets it). */
.hs .hs-slide.hs-await .hs-cover:not(.is-hero),
.hs .hs-slide.hs-await .hs-anim {
    opacity: 0;
    animation: hs-await-show 0s linear 3s forwards;
}

.hs .hs-slide.hs-first.hs-play .hs-cover.is-hero,
.hs .hs-slide.hs-first.hs-play[data-hs-entrance="blur"] .hs-cover.is-hero .hs-cover__img {
    animation: none;
}

.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="fade"] .hs-cover { animation: hs-fade var(--hs-dur) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="rise"] .hs-cover { animation: hs-rise var(--hs-dur) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="fan"] .hs-cover { animation: hs-fan var(--hs-dur) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="zoom"] .hs-cover { animation: hs-zoom var(--hs-dur) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="slide"] .hs-cover { animation: hs-slide-in var(--hs-dur) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="slide"][dir="rtl"] .hs-cover { animation-name: hs-slide-in-rtl; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="cascade"] .hs-cover { animation: hs-cascade var(--hs-dur) var(--hs-ease) calc(var(--hs-wait) * 2.2) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="flip"] .hs-cover { animation: hs-flip var(--hs-dur) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="blur"] .hs-cover { animation: hs-blur-fade var(--hs-dur) ease var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="blur"] .hs-cover__img { animation: hs-blur-in var(--hs-dur) ease var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="drop"] .hs-cover { animation: hs-drop calc(var(--hs-dur) * 1.1) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="spinfan"] .hs-cover { animation: hs-spinfan calc(var(--hs-dur) * 1.2) var(--hs-ease) calc(var(--hs-wait) * .6) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="pop"] .hs-cover { animation: hs-pop var(--hs-dur) var(--hs-ease) calc(var(--hs-wait) * 1.3) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="unfold"] .hs-cover { animation: hs-unfold calc(var(--hs-dur) * 1.15) var(--hs-ease) calc(var(--hs-wait) * .4) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="curtain"] .hs-cover { animation: hs-curtain var(--hs-dur) var(--hs-ease) var(--hs-wait) backwards; }
.hs .hs-slide:is(.hs-play, .hs-play-c)[data-hs-entrance="sides"] .hs-cover { animation: hs-sides var(--hs-dur) var(--hs-ease) calc(var(--hs-wait) * .5) backwards; }

/* ---- text entrance (also when the covers' entrance is "None"). The block cascades in order - badge → kicker → title
   → sub → price / countdown → chips → buttons (--hs-step 0…6) - each entrance below only changes how one item comes in. */
/* Declared on every element of the text block, so each one computes it from its own (inherited) --hs-step. */
.hs .hs-text * {
    --hs-tdl: calc((220ms + var(--hs-step, 0) * 90ms) / var(--hs-sp-t, 1));
}
.hs .hs-slide[data-hs-entrance="cascade"] .hs-text * {
    --hs-tdl: calc((420ms + var(--hs-step, 0) * 120ms) / var(--hs-sp-t, 1));
}

.hs .hs-slide:is(.hs-play, .hs-play-t) .hs-anim {
    animation: hs-text calc(.6s / var(--hs-sp-t, 1)) ease var(--hs-tdl) backwards;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="fade"] .hs-anim { animation-name: hs-text-fade; }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="blur"] .hs-anim { animation-name: hs-text-blur; }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="scale"] .hs-anim { animation-name: hs-text-scale; }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="slide"] .hs-anim { animation-name: hs-text-side; }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="slide"][dir="rtl"] .hs-anim { animation-name: hs-text-side-rtl; }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="wipe"] .hs-anim { animation-name: hs-text-wipe; animation-duration: calc(.75s / var(--hs-sp-t, 1)); }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="wipe"][dir="rtl"] .hs-anim { animation-name: hs-text-wipe-rtl; }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="mask"] .hs-anim {
    animation-name: hs-text-mask;
    animation-duration: calc(.7s / var(--hs-sp-t, 1));
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

/* The word spans (kicker, title, sub - .hs-tw): stagger moves each word in after the one before it. The sub's words stay
   inline (its two-line clamp needs them), so they fade. */
.hs .hs-sub .hs-tw {
    display: inline;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="stagger"] :is(.hs-kicker, .hs-title, .hs-sub).hs-anim {
    animation: none;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="stagger"] .hs-tw {
    animation: hs-word calc(.55s / var(--hs-sp-t, 1)) cubic-bezier(.2, .8, .2, 1) calc(var(--hs-tdl) + var(--i, 0) * 70ms / var(--hs-sp-t, 1)) backwards;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="stagger"] .hs-sub .hs-tw {
    animation-name: hs-text-fade;
}

/* Letter cascade: the title letter by letter (Arabic, whose letters must stay joined, moves word by word). */
.hs .hs-tl {
    display: inline-block;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="letters"] .hs-title.hs-anim {
    animation: none;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="letters"] .hs-title .hs-tl {
    animation: hs-letter calc(.5s / var(--hs-sp-t, 1)) cubic-bezier(.2, .8, .2, 1) calc(var(--hs-tdl) + var(--j, 0) * 28ms / var(--hs-sp-t, 1)) backwards;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="letters"][dir="rtl"] .hs-title .hs-tw {
    animation: hs-word calc(.55s / var(--hs-sp-t, 1)) cubic-bezier(.2, .8, .2, 1) calc(var(--hs-tdl) + var(--i, 0) * 70ms / var(--hs-sp-t, 1)) backwards;
}

/* Typewriter: the kicker and the title type themselves out (one step per character); the rest fades in. */
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="typewriter"] .hs-anim { animation-name: hs-text-fade; }
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="typewriter"] :is(.hs-kicker, .hs-title).hs-anim {
    animation: hs-type calc(var(--hs-chars, 12) * 40ms / var(--hs-sp-t, 1)) steps(var(--hs-chars, 12)) var(--hs-tdl) backwards;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="typewriter"][dir="rtl"] :is(.hs-kicker, .hs-title).hs-anim {
    animation-name: hs-type-rtl;
}

/* Underline sweep: an accent bar wipes in under the kicker (it stays), the block rises. */
.hs .hs-slide[data-hs-text="underline"] .hs-kicker {
    position: relative;
    display: inline-block;
    align-self: flex-start;
}
.hs .hs-slide[data-hs-text="underline"] .hs-text--center .hs-kicker {
    align-self: center;
}
.hs .hs-slide[data-hs-text="underline"] .hs-kicker::after {
    content: "";
    position: absolute;
    left: 0;
    right: .16em;
    bottom: -.35em;
    height: 2px;
    border-radius: 2px;
    background: var(--hs-accent);
    transform-origin: left center;
}
.hs .hs-slide[data-hs-text="underline"][dir="rtl"] .hs-kicker::after {
    right: 0;
    transform-origin: right center;
}
.hs .hs-slide:is(.hs-play, .hs-play-t)[data-hs-text="underline"] .hs-kicker::after {
    animation: hs-underline calc(.6s / var(--hs-sp-t, 1)) cubic-bezier(.2, .8, .2, 1) calc(var(--hs-tdl) + 250ms / var(--hs-sp-t, 1)) backwards;
}

/* ---- covers loop: on the cover IMAGE (the box carries the entrance and the swaps), out of phase per slot.
   --hs-amp (0..1) scales the move, --hs-int is the cycle. */
@keyframes hs-loop-float { from { translate: 0 calc(.3cqw * var(--hs-amp, .5)); } to { translate: 0 calc(-.6cqw * var(--hs-amp, .5)); } }
@keyframes hs-loop-bob { 0%, 100% { translate: 0 0; } 45% { translate: 0 calc(-1.4cqw * var(--hs-amp, .5)); } 60% { translate: 0 calc(-1.1cqw * var(--hs-amp, .5)); } }
@keyframes hs-loop-sway { from { rotate: calc(-2.5deg * var(--hs-amp, .5)); } to { rotate: calc(2.5deg * var(--hs-amp, .5)); } }
@keyframes hs-loop-breathe { from { scale: 1; } to { scale: calc(1 + .045 * var(--hs-amp, .5)); } }
@keyframes hs-loop-glow { from { opacity: calc(.15 + .2 * var(--hs-amp, .5)); } to { opacity: calc(.35 + .5 * var(--hs-amp, .5)); } }

.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="float"] .hs-cover__img {
    animation: hs-loop-float calc(var(--hs-int, 6s) / var(--hs-sp-c, 1)) ease-in-out calc(var(--hs-delay, 0ms) * -9) infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="bob"] .hs-cover__img {
    animation: hs-loop-bob calc(var(--hs-int, 6s) / var(--hs-sp-c, 1)) ease-in-out calc(var(--hs-delay, 0ms) * -7) infinite;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="sway"] .hs-cover__img {
    animation: hs-loop-sway calc(var(--hs-int, 6s) / var(--hs-sp-c, 1)) ease-in-out calc(var(--hs-delay, 0ms) * -11) infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="breathe"] .hs-cover__img {
    animation: hs-loop-breathe calc(var(--hs-int, 6s) / var(--hs-sp-c, 1)) ease-in-out calc(var(--hs-delay, 0ms) * -9) infinite alternate;
}

/* ---- Shine sweep: a glossy highlight clipped to the cover's own rounded shape (.hs-shine), once per interval, staggered
   between covers, never a hard rectangle. Styles (data-hs-shine): gloss - a narrow skewed soft band (screen blend);
   foil - the same band with a subtle holographic hue shift; edge - a glint running round the cover's edge.
   --hs-sha angle, --hs-shw width (share of the cover), --hs-shi intensity, --hs-int interval (÷ --hs-sp-c). */
@keyframes hs-shine-pass { 0% { translate: -160% 0; } 28%, 100% { translate: 360% 0; } }
@keyframes hs-shine-edge { 0% { rotate: 0deg; opacity: 0; } 4% { opacity: 1; } 30% { rotate: 360deg; opacity: 1; } 34%, 100% { rotate: 360deg; opacity: 0; } }

.hs .hs-shine {
    display: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--hs-rad);
    pointer-events: none;
    mix-blend-mode: screen;
}

.hs .hs-slide[data-hs-cloop="shine"] .hs-shine {
    display: block;
}

.hs .hs-shine::before {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: var(--hs-shw, 28%);
    rotate: var(--hs-sha, 20deg);
    translate: -160% 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, calc(var(--hs-shi, .55) * .18)) 30%, rgba(255, 255, 255, calc(var(--hs-shi, .55) * .55)) 50%, rgba(255, 255, 255, calc(var(--hs-shi, .55) * .18)) 70%, transparent 100%);
}

.hs .hs-slide[data-hs-shine="foil"] .hs-shine::before {
    width: calc(var(--hs-shw, 28%) * 1.6);
    background: linear-gradient(90deg, transparent 0%,
        color-mix(in srgb, #ff7ad9 calc(var(--hs-shi, .55) * 40%), transparent) 22%,
        color-mix(in srgb, #7ae7ff calc(var(--hs-shi, .55) * 55%), transparent) 42%,
        rgba(255, 255, 255, calc(var(--hs-shi, .55) * .45)) 52%,
        color-mix(in srgb, #ffe37a calc(var(--hs-shi, .55) * 45%), transparent) 64%,
        transparent 100%);
}

/* Edge glint: a turning conic light seen through a thin ring at the cover's edge. */
.hs .hs-slide[data-hs-shine="edge"] .hs-shine {
    padding: 1.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.hs .hs-slide[data-hs-shine="edge"] .hs-shine::before {
    top: 50%;
    bottom: auto;
    left: 50%;
    width: 200%;
    aspect-ratio: 1;
    translate: -50% -50%;
    rotate: 0deg;
    opacity: 0;
    background: conic-gradient(from var(--hs-sha, 20deg), transparent 0deg 290deg, rgba(255, 255, 255, calc(.3 + var(--hs-shi, .55) * .7)) 345deg, transparent 360deg);
}

.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="shine"] .hs-shine::before {
    animation: hs-shine-pass calc(var(--hs-int, 6s) / var(--hs-sp-c, 1)) cubic-bezier(.45, .05, .2, 1) calc(var(--hs-delay, 0ms) * 6 / var(--hs-sp-c, 1)) infinite both;
}

.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="shine"][data-hs-shine="edge"] .hs-shine::before {
    animation-name: hs-shine-edge;
    animation-timing-function: ease-in-out;
}

/* Glow pulse: a blurred glow (the Glow colour) behind the cover. */
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="glowpulse"] .hs-cover::before {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: -1;
    border-radius: 18%;
    background: color-mix(in srgb, var(--hs-glow) 70%, #ffffff);
    filter: blur(2.4cqw);
    pointer-events: none;
    animation: hs-loop-glow calc(var(--hs-int, 6s) / var(--hs-sp-c, 1) / 2) ease-in-out calc(var(--hs-delay, 0ms) * -5) infinite alternate;
}

/* Mouse tilt: hero_slider.js writes --hs-mx / --hs-my (-1..1) on the slide while a mouse moves over it. */
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-cloop="tilt"] .hs-cover__img {
    transform: perspective(60cqw) rotateX(calc(var(--hs-my, 0) * -9deg * var(--hs-amp, .5))) rotateY(calc(var(--hs-mx, 0) * 12deg * var(--hs-amp, .5)));
    transition: transform .25s ease-out, box-shadow .55s, border-radius .55s;
}

/* ---- background loop ---- */
@keyframes hs-bg-zoom { from { scale: 1; } to { scale: 1.1; } }
@keyframes hs-bg-shift { from { translate: -6% 0; } to { translate: 6% 0; } }
@keyframes hs-bg-aurora { 0% { translate: -4% -2%; scale: 1.04; } 50% { translate: 3% 2%; scale: 1.1; } 100% { translate: -2% 3%; scale: 1.06; } }
@keyframes hs-bg-sway { from { rotate: -3deg; translate: -3% 0; } to { rotate: 3deg; translate: 3% 0; } }
@keyframes hs-bg-dust { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Loops that move the colour layer give it room to move (no bare edge shows). */
.hs .hs-slide[data-hs-loops="1"][data-hs-bloop="shift"] .hs-bg,
.hs .hs-slide[data-hs-loops="1"][data-hs-bloop="aurora"] .hs-bg,
.hs .hs-slide[data-hs-loops="1"][data-hs-bloop="sway"] .hs-bg,
.hs .hs-slide[data-hs-loops="1"][data-hs-bloop="zoom"] .hs-bg {
    inset: -12%;
}

.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="zoom"] .hs-bg,
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="zoom"] .hs-bgimg,
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="zoom"] .hs-fullimg {
    animation: hs-bg-zoom calc(22s / var(--hs-sp-b, 1)) ease-in-out infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="shift"] .hs-bg,
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="shift"] .hs-bgimg {
    animation: hs-bg-shift calc(16s / var(--hs-sp-b, 1)) ease-in-out infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="aurora"] .hs-bg,
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="aurora"] .hs-bgimg {
    animation: hs-bg-aurora calc(20s / var(--hs-sp-b, 1)) ease-in-out infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="sway"] .hs-bg {
    animation: hs-bg-sway calc(12s / var(--hs-sp-b, 1)) ease-in-out infinite alternate;
}

/* Dust: two layers of specks drifting up (CSS only). */
.hs .hs-slide[data-hs-bloop="dust"] .hs-bgfx::before,
.hs .hs-slide[data-hs-bloop="dust"] .hs-bgfx::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200%;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px);
    background-size: 9cqw 13cqw, 14cqw 9cqw;
    background-position: 0 0, 4cqw 6cqw;
    opacity: .5;
}
.hs .hs-slide[data-hs-bloop="dust"] .hs-bgfx::after {
    background-size: 17cqw 21cqw, 11cqw 16cqw;
    background-position: 7cqw 3cqw, 2cqw 11cqw;
    opacity: .3;
}

/* Phones (and the admin's forced phone preview). The tiles above are sized in cqw of the band: on a 360px canvas they
   shrink to about 33 × 48px, a dense lattice that reads as rows of dots - and the two lattices, moving at different
   speeds, beat against each other. Here every speck is its own layer instead: one tile as wide as the band, the speck
   at its own x and y in it, repeating every 1/2, 1/4 or 1/6 of the layer's height (the layer is two bands tall and
   travels one band, so the loop is seamless). About half the desktop's specks; the same dots, direction and speed. */
.hs .hs-bgfx {
    --hs-dust-a:
        radial-gradient(circle at 4% 62%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 9% 18%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 17% 81%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 21% 37%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 28% 9%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 34% 55%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 92%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 45% 27%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 49% 70%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 56% 44%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 63% 13%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 67% 86%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 73% 51%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 79% 23%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 84% 75%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 88% 5%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 93% 59%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 97% 33%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px);
    --hs-dust-a-size:
        100% 25%, 100% 50%, 100% 50%, 100% 16.6667%, 100% 25%, 100% 50%, 100% 25%, 100% 50%, 100% 16.6667%,
        100% 25%, 100% 50%, 100% 25%, 100% 50%, 100% 16.6667%, 100% 25%, 100% 50%, 100% 25%, 100% 50%;
    --hs-dust-b:
        radial-gradient(circle at 6% 30%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 13% 74%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 24% 48%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 30% 8%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 41% 88%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 47% 20%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 52% 63%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 60% 39%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 69% 95%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 77% 15%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 86% 56%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
        radial-gradient(circle at 95% 79%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px);
    --hs-dust-b-size:
        100% 50%, 100% 25%, 100% 50%, 100% 50%, 100% 25%, 100% 50%, 100% 16.6667%, 100% 50%, 100% 25%,
        100% 50%, 100% 25%, 100% 50%;
}

@media (max-width: 575px) {
    .hs:not(.hs--forced) .hs-slide[data-hs-bloop="dust"] .hs-bgfx::before {
        background-image: var(--hs-dust-a);
        background-size: var(--hs-dust-a-size);
        background-position: 0 0;
    }
    .hs:not(.hs--forced) .hs-slide[data-hs-bloop="dust"] .hs-bgfx::after {
        background-image: var(--hs-dust-b);
        background-size: var(--hs-dust-b-size);
        background-position: 0 0;
    }
}

.hs.hs--forced:not(.hs--force-tablet):not(.hs--force-desktop) .hs-slide[data-hs-bloop="dust"] .hs-bgfx::before {
    background-image: var(--hs-dust-a);
    background-size: var(--hs-dust-a-size);
    background-position: 0 0;
}
.hs.hs--forced:not(.hs--force-tablet):not(.hs--force-desktop) .hs-slide[data-hs-bloop="dust"] .hs-bgfx::after {
    background-image: var(--hs-dust-b);
    background-size: var(--hs-dust-b-size);
    background-position: 0 0;
}

.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="dust"] .hs-bgfx::before {
    animation: hs-bg-dust calc(40s / var(--hs-sp-b, 1)) linear infinite;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-bloop="dust"] .hs-bgfx::after {
    animation: hs-bg-dust calc(64s / var(--hs-sp-b, 1)) linear infinite;
}

/* ---- giant word loop ---- */
@keyframes hs-word-drift { from { translate: -2.5% 0; } to { translate: 2.5% 0; } }
@keyframes hs-word-draw { 0% { opacity: 0; translate: 0 .08em; } 12%, 70% { opacity: 1; translate: 0 0; } 85%, 100% { opacity: 0; } }
@keyframes hs-word-shimmer { 0%, 70%, 100% { opacity: 1; filter: brightness(1); } 35% { opacity: 1; filter: brightness(2.4); } }

.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-wloop="drift"] .hs-giant {
    animation: hs-word-drift calc(14s / var(--hs-sp-w, 1)) ease-in-out infinite alternate;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-wloop="draw"] .hs-gl {
    animation: hs-word-draw calc(7s / var(--hs-sp-w, 1)) ease-in-out calc(var(--i, 0) * 110ms / var(--hs-sp-w, 1)) infinite backwards;
}
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-wloop="shimmer"] .hs-gl {
    animation: hs-word-shimmer calc(4.5s / var(--hs-sp-w, 1)) ease-in-out calc(var(--i, 0) * 90ms / var(--hs-sp-w, 1)) infinite;
}
/* Mouse parallax: the word drifts against the pointer (hero_slider.js writes --hs-mx / --hs-my). */
.hs .hs-slide.is-active[data-hs-loops="1"][data-hs-wloop="parallax"] .hs-giant {
    translate: calc(var(--hs-mx, 0) * -2.4cqw) calc(var(--hs-my, 0) * -1.4cqw);
    transition: translate .35s ease-out, left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1), font-size .5s cubic-bezier(.2, .8, .2, 1);
}

/* Off screen or a hidden tab: every loop holds still (hero_slider.js sets .hs-paused on the section). */
.hs.hs-paused .hs-slide *,
.hs.hs-paused .hs-slide *::before,
.hs.hs-paused .hs-slide *::after {
    animation-play-state: paused !important;
}

/* =====================================================================================
   Navigation under the stage - the same height on every slide, so nothing jumps.
   Desktop: tabs with a gold progress line. Tablet: scrollable pills. Phone: story bars.
   ===================================================================================== */

.hs .hs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 28px;
    margin-inline: auto;
    padding: 0 12px;
    box-sizing: border-box;
}

.hs .hs-nav__list {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    height: 100%;
    align-items: center;
}

.hs .hs-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9aa1a9;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.hs .hs-tab__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hs .hs-tab__bar {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

/* The progress line only SHOWS the autoplay timer: hero_slider.js's timer decides when the next slide comes (it never
   waits for an animationend) and restarts this animation from the time already elapsed whenever it starts or resumes;
   .is-paused holds it (hover, keyboard focus, a hidden tab, off screen, the pause button, 6 s after an interaction). */
@keyframes hs-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The same line under the name hero_slider.js gives it: a new name starts a new animation, in step with its timer,
   without the script having to force a reflow. */
@keyframes hs-progress-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hs .hs-tab__fill {
    position: absolute;
    inset: 0;
    background: #f4b63d;
    transform: scaleX(0);
    transform-origin: left center;
}

.hs .hs-tab.is-active .hs-tab__fill {
    animation: hs-progress var(--hs-autoplay, 7s) linear forwards;
}

.hs.is-paused .hs-tab.is-active .hs-tab__fill {
    animation-play-state: paused;
}

.hs--rtl .hs-tab__fill {
    transform-origin: right center;
}

.hs .hs-tab.is-done .hs-tab__fill {
    transform: scaleX(1);
    background: rgba(255, 255, 255, .5);
}

.hs .hs-pause {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #23272e;
    background: #14171c;
    color: #9aa1a9;
    font-size: 10px;
    cursor: pointer;
}

.hs .hs-pause:hover {
    color: #ffffff;
}

@media (min-width: 576px) {
    .hs .hs-nav {
        height: 52px;
        padding: 0 16px;
    }

    .hs .hs-nav__list {
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .hs .hs-nav__list::-webkit-scrollbar {
        display: none;
    }

    .hs .hs-tab {
        flex: 0 0 auto;
        height: 36px;
        max-width: 240px;
        padding: 0 16px;
        border-radius: 999px;
        border: 1px solid #23272e;
        background: #14171c;
        font-size: 13px;
        overflow: hidden;
        transition: color .2s, border-color .2s;
    }

    .hs .hs-tab:hover {
        color: #ffffff;
    }

    .hs .hs-tab.is-active {
        color: #ffffff;
        border-color: rgba(255, 255, 255, .34);
    }

    .hs .hs-tab__name {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hs .hs-tab__bar {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px;
        border-radius: 0;
        background: transparent;
    }

    .hs .hs-tab.is-done .hs-tab__fill {
        transform: scaleX(0);
    }

    .hs .hs-pause {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }
}

/* Desktop: compact tabs - the slide's short name over a thin progress line, at most 240px each, from the start edge;
   muted text, the active one white. No box around the active tab (a focus ring only for keyboard focus). */
@media (min-width: 992px) {
    .hs .hs-nav {
        height: 52px;
        padding: 0 4px;
    }

    .hs .hs-nav__list {
        gap: 24px;
        overflow: hidden;
        justify-content: flex-start;
        align-items: center;
    }

    .hs .hs-tab {
        flex: 0 1 240px;
        max-width: 240px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #9aa1a9;
        font-size: 13px;
        font-weight: 500;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 9px;
        text-align: start;
        overflow: visible;
    }

    .hs .hs-tab:hover {
        color: #eef0f3;
        background: transparent;
    }

    .hs .hs-tab.is-active {
        color: #ffffff;
        border: 0;
        background: transparent;
    }

    .hs .hs-tab__name {
        text-align: start;
    }

    .hs .hs-tab__bar {
        position: relative;
        inset: auto;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: rgba(255, 255, 255, .12);
    }

    .hs .hs-tab.is-done .hs-tab__fill {
        transform: scaleX(0);
    }
}

/* =====================================================================================
   Reduced motion: no entrances, no loops, no transitions, no autoplay (hero_slider.js).
   ===================================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hs *,
    .hs *::before,
    .hs *::after {
        animation: none !important;
        transition: none !important;
    }

    .hs .hs-light,
    .hs .hs-shine {
        display: none !important;
    }

    .hs .hs-slide.hs-await .hs-cover:not(.is-hero),
    .hs .hs-slide.hs-await .hs-anim {
        opacity: 1;
    }

    /* Pointer-driven motion holds still too. */
    .hs .hs-slide .hs-cover__img,
    .hs .hs-slide .hs-giant {
        translate: none !important;
    }

    /* No autoplay: the active tab simply shows full. */
    .hs .hs-tab.is-active .hs-tab__fill {
        transform: scaleX(1);
    }
}