/* ==========================================================================
   Storm Audio — brand page styles (scaffolding)
   --------------------------------------------------------------------------
   Scoped under `#storm-page` / `.storm` so nothing leaks into the rest of the
   site. This file is built FLUID-FIRST: a single type + space scale (clamp())
   that interpolates smoothly from ~360px to ~1600px, so the SAME rules look
   right on mobile, tablet, AND desktop without a pile of breakpoints. Reach for
   the tokens below before writing a one-off px value or @media query.

   Tokens:
     --st-step--1 … --st-step-6   fluid font sizes (step-0 = body)
     --st-space-3xs … --st-space-2xl   fluid spacing (gaps, section padding)
     --st-gutter                  fluid page side-gutter
     --st-shell-max               content column width (aligns to the header)
     .st-shell                    centred content column (max-width + gutter)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — fluid type + space scale, colours, container
   -------------------------------------------------------------------------- */
#storm-page {
  /* — Fluid TYPE scale (≈1.25 ratio; min @360px viewport, max @1600px) — */
  --st-step--1: clamp(0.80rem, 0.76rem + 0.18vw, 0.94rem);
  --st-step-0:  clamp(1.00rem, 0.94rem + 0.27vw, 1.18rem);   /* body */
  --st-step-1:  clamp(1.20rem, 1.08rem + 0.55vw, 1.55rem);
  --st-step-2:  clamp(1.44rem, 1.22rem + 0.98vw, 2.05rem);
  --st-step-3:  clamp(1.73rem, 1.37rem + 1.60vw, 2.70rem);
  --st-step-4:  clamp(2.07rem, 1.50rem + 2.55vw, 3.55rem);
  --st-step-5:  clamp(2.49rem, 1.62rem + 3.85vw, 4.70rem);
  --st-step-6:  clamp(2.99rem, 1.55rem + 6.40vw, 6.50rem);   /* hero display */

  /* — Fluid SPACE scale — */
  --st-space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
  --st-space-2xs: clamp(0.50rem, 0.46rem + 0.18vw, 0.63rem);
  --st-space-xs:  clamp(0.75rem, 0.69rem + 0.27vw, 0.94rem);
  --st-space-s:   clamp(1.00rem, 0.91rem + 0.36vw, 1.25rem);
  --st-space-m:   clamp(1.50rem, 1.24rem + 1.16vw, 2.50rem);
  --st-space-l:   clamp(2.00rem, 1.48rem + 2.32vw, 4.00rem);
  --st-space-xl:  clamp(3.00rem, 1.96rem + 4.64vw, 7.00rem);
  --st-space-2xl: clamp(4.00rem, 2.43rem + 6.96vw, 10.00rem);  /* section block padding */

  /* — Container — content aligns to the site header's ~1024px column; the
       gutter grows with the viewport so wide screens get real breathing room. */
  --st-shell-max: 1024px;
  --st-gutter: clamp(1rem, 0.4rem + 3vw, 4rem);

  /* — Palette (placeholders — set the real brand values when the look is set) — */
  --st-bg: #0c0c0e;
  --st-fg: #ffffff;
  --st-muted: rgba(235, 235, 245, 0.72);
  --st-accent: #4c8dff;
}

/* --------------------------------------------------------------------------
   2. RESET & SCOPE
   -------------------------------------------------------------------------- */
#storm-page,
#storm-page *,
#storm-page *::before,
#storm-page *::after {
  box-sizing: border-box;
}

#storm-page {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--st-bg);
  color: var(--st-fg);
  /* Clip the inline axis only (kills sideways overflow from full-bleed scenes)
     while leaving the block axis VISIBLE — a blanket overflow:hidden/clip would
     silently disable position:sticky used by the carousel nav controllers. */
  overflow-x: clip;
  overflow-y: visible;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--st-step-0);
  line-height: 1.6;
}

/* Defensive: themes often set body{overflow-x:hidden}, which makes <body> a
   scroll container and disables sticky. Re-assert `clip` on this brand only. */
html:not(.storm-scroll-locked) body.sonic-brand-storm-audio {
  overflow-x: clip !important;
}
/* The page's own backdrop — explicit per brand (the global body-black
   was breaking the Gutenberg editor and is being phased out). */
body.sonic-brand-storm-audio {
  background-color: #000 !important;
}

/* --------------------------------------------------------------------------
   3. CONTENT SHELL — the reusable centred column
   -------------------------------------------------------------------------- */
.st-shell {
  width: 100%;
  max-width: var(--st-shell-max);
  margin-inline: auto;
  padding-inline: var(--st-gutter);
}

/* Headings flush to the header column's START edge (right in RTL, left in LTR)
   even when the parent is full-bleed: pad in by the header's own side margin,
   with the gutter as a floor. Use on a heading/intro block inside a full-bleed
   section so it lines up with the site nav (the trick that fixed Perlisten). */
.st-align-shell {
  padding-inline: max(var(--st-gutter), calc((100% - var(--st-shell-max)) / 2));
}

/* --------------------------------------------------------------------------
   4. A11Y — skip link + reduced motion baseline
   -------------------------------------------------------------------------- */
.storm-skip-link {
  position: absolute;
  inset-inline-start: var(--st-space-s);
  inset-block-start: var(--st-space-s);
  z-index: 1000;
  padding: var(--st-space-2xs) var(--st-space-s);
  background: var(--st-fg);
  color: var(--st-bg);
  border-radius: 8px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.storm-skip-link:focus { transform: translateY(0); }

.st-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  #storm-page *,
  #storm-page *::before,
  #storm-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. HERO — fullscreen video, content pinned to the bottom + revealed near the
      end of the clip (initHero owns the timing/scroll-lock).
   -------------------------------------------------------------------------- */
.st-hero {
  position: relative;
  width: 100%;
  /* dvh (live viewport): the bottom-pinned CTA never hides behind the mobile
     URL bar the way 100lvh let it. */
  height: 100dvh;
  background: #000;
  overflow: hidden;
  isolation: isolate;            /* keep the overlay + content above the video */
}
.st-hero__video {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: 100%;
  /* FIXED to the largest (bar-hidden) height, NOT 100% of the dvh hero. As the
     mobile URL bar collapses the hero grows — if the video tracked it, `cover`
     would re-fit and the clip looked like it "scaled in". Pinning it to 100lvh
     keeps the video a constant size; the growing hero just reveals more of it. */
  height: 100vh;            /* fallback for browsers without lvh */
  height: 100lvh;
  /* cover: the portrait clip fills portrait phones, landscape fills desktop. */
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  background: #000;
}
/* Overlay: the title sits a touch ABOVE the vertical centre (~40px up); the CTA
   is pinned near the bottom (absolute, so it stays put regardless of the title). */
.st-hero__overlay {
  position: absolute;
  inset: 0;                      /* dvh box — the CTA tracks the live bottom (stays visible) */
  z-index: 1;
  padding-inline: var(--st-gutter);
  text-align: center;
  pointer-events: none;          /* the pill re-enables once revealed */
}
.st-hero__overlay.is-visible { pointer-events: auto; }
/* The title is anchored to 50svh — a CONSTANT (the centre of the bar-SHOWN
   viewport, i.e. where the user lands) — NOT the dvh hero box. dvh grows when
   the URL bar collapses and used to re-centre the title, sliding it OVER the
   (lvh, fixed) video. svh never changes, so title + video stay locked: neither
   moves when the bar shows/hides, and the title keeps its on-screen position. */
.st-hero__top {
  position: absolute;
  top: 50vh;                     /* fallback for no-svh browsers */
  top: 50svh;
  inset-inline: 0;
  margin-inline: auto;
  width: 100%;
  max-width: 56rem;
  transform: translateY(calc(-50% - 112px));  /* centre on the anchor, then well above it */
}
.st-hero__title {
  margin: 0;
  font-weight: 400;              /* base weight; the blue word is heavier */
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3.5rem);  /* cap trimmed a touch for desktop */
  line-height: 1.18;
  letter-spacing: -0.02em;
}
/* Each title line is its OWN block + its OWN GRAY (Valerion) gradient, so it
   clips and SCALES cleanly as a single unit. `display:block` locks the exact
   break (line 1 / line 2). Hidden until JS fades + scales it up. */
.st-hero__line {
  display: block;
  background: linear-gradient(90deg, #fdfdfd, #e6e6e6, #fff, #cfcfcf, #9e9e9e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;                    /* JS fades + scales it in (reduced-motion CSS shows it) */
  transform-origin: 50% 50%;     /* grow from the centre */
  will-change: opacity, transform;
}
html[dir="rtl"] .st-hero__line {
  background: linear-gradient(-90deg, #fdfdfd, #e6e6e6, #fff, #cfcfcf, #9e9e9e);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Both title lines are the SAME size; a hair of breathing room between them. */
.st-hero__line:first-child {
  margin-block-end: 0.12em;
}
/* Subtitle under the title. */
.st-hero__subtitle {
  margin: var(--st-space-s) auto 0;
  max-width: 42ch;
  padding-inline: clamp(1rem, 6vw, 2rem);   /* clear side margins (was almost touching) */
  color: var(--st-muted);
  /* a touch smaller than --st-step-1, tighter leading — sits better under the title */
  font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.3rem);
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
  opacity: 0;
  will-change: opacity, transform;
}

/* CTA — the classic brand-blue pill (same blue as the buy/store buttons).
   Pinned to the bottom-centre (absolute) so it's independent of the title. */
.st-hero__cta {
  position: absolute;
  inset-block-end: calc(var(--st-space-xl) + env(safe-area-inset-bottom));
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: var(--st-space-2xs) var(--st-space-m);
  background: #0065ff;
  color: #fff;
  font-size: var(--st-step-0);
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  opacity: 0;
  transition: background 0.2s ease, transform 0.2s ease;
  will-change: opacity, transform;
}
.st-hero__cta:hover { background: #0052d6; transform: translateY(-2px); }
/* Quiet "Or scroll down" hint under the CTA pill — its own absolute
   anchor (the pill is absolute too), revealed with the same choreography. */
.st-hero__scrollhint {
  position: absolute;
  inset-block-end: calc(var(--st-space-xl) + env(safe-area-inset-bottom) - 34px);
  inset-inline: 0;
  margin: 0 auto;
  width: fit-content;
  color: rgba(235, 235, 245, 0.55);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
/* MOBILE: pill + hint ride a bit higher (there's room above the fold). */
@media (max-width: 767px) {
  .st-hero__cta {
    inset-block-end: calc(var(--st-space-xl) + env(safe-area-inset-bottom) + 26px);
  }
  .st-hero__scrollhint {
    inset-block-end: calc(var(--st-space-xl) + env(safe-area-inset-bottom) - 8px);
  }
}
.st-hero__noscript {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline: 0;
  text-align: center;
  color: #fff;
}

/* DESKTOP hero composition. On a wide screen the centred title/paragraph block
   sits right on the product shot in the video. Here we DECOUPLE the pieces:
   title up near the top, paragraph low, CTA a little lower — so text clears the
   device. (Desktop has no mobile URL bar, so plain vh is stable — no dvh/svh
   dance needed.) Below 1024px the mobile centred layout stands. */
@media (min-width: 1024px) {
  .st-hero__top {
    position: absolute;
    inset: 0;                    /* full-hero layer; children are placed by vh */
    top: 0;
    transform: none;             /* drop the mobile centre-anchor */
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .st-hero__title {
    position: absolute;
    inset-block-start: 19vh;     /* up near the top, but not glued to the header */
    inset-inline: 0;
  }
  .st-hero__subtitle {
    position: absolute;
    inset-block-start: 69vh;     /* low — well under the centred device */
    inset-inline: 0;
    margin-inline: auto;
    max-width: 46ch;
  }
  .st-hero__cta {
    inset-block-end: 7vh;        /* a touch lower */
  }
  .st-hero__scrollhint {
    inset-block-end: calc(7vh - 34px);
  }
}

/* Blue gradient text — the Valerion "apple-blue" treatment. Heavier than the
   gray base so "Powerful Brain" reads as the emphasis. */
.st-gradient-blue {
  /* The blue word inside line 2 — its own blue clip overrides line 2's gray.
     inline-block keeps "Powerful Brain" together (never breaks mid-phrase). It
     inherits line 2's fade+scale, so NO opacity of its own. */
  display: inline-block;
  font-weight: 600;
  background: linear-gradient(90deg, #7adfff 0%, #2ea8ff 45%, #0a5bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}
html[dir="rtl"] .st-gradient-blue {
  background: linear-gradient(-90deg, #7adfff 0%, #2ea8ff 45%, #0a5bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Hero scroll-lock — initHero() adds .storm-scroll-locked to <html> until the
   content reveal fires, swallowing scroll attempts so the clip plays first. */
html.storm-scroll-locked,
html.storm-scroll-locked body {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100%;
}
html.storm-scroll-locked { scrollbar-gutter: stable; }
html.storm-scroll-locked body { touch-action: none; }

/* Reduced motion: paint the hero content immediately (no fade). */
@media (prefers-reduced-motion: reduce) {
  .st-hero__line,
  .st-hero__subtitle,
  .st-hero__cta,
  .st-hero__scrollhint { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   6. SECTION 2 — pinned WebP scroll-story
   The section pins to the viewport; a canvas scrubs a WebP frame sequence with
   the scroll (initStory() in js/storm-audio-scroll.js). A bottom gradient
   darkens the lower band so the captions read as if they RISE OUT of the video.
   -------------------------------------------------------------------------- */
.st-seq {
  position: relative;
  background: #000;
  /* Scroll LENGTH of the section (the stage sticks inside it). Lower = faster to
     get through the whole sequence. Progress runs over (this - 100dvh). */
  --st-seq-scroll: 340vh;
  height: var(--st-seq-scroll);
  /* Caption legibility scrim — a SUBTLE darkening on the TOP edge only (where the
     captions live), never a layer over the amp at the bottom. Set --strength: 0
     to drop it entirely. */
  --st-seq-grad-height: 45%;
  --st-seq-grad-strength: 0.5;
}
@media (max-width: 767px) {
  .st-seq { --st-seq-scroll: 360vh; }
}
/* The stage is PINNED with native sticky (no ScrollTrigger pin → no jumps) and
   sized to the LIVE viewport, so it grows/shrinks with the mobile URL bar instead
   of leaving a hole or hiding under the bar. The canvas is bottom-anchored in JS,
   so the growth only ever reveals more black at the top. */
.st-seq__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;                 /* fallback */
  height: 100dvh;
  overflow: hidden;
  background: #000;
}
.st-seq__canvas,
.st-seq__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.st-seq__canvas { z-index: 1; }
.st-seq__fallback {
  object-fit: cover;
  object-position: center center;
  z-index: 2;                    /* above the canvas until the first frame paints */
  transition: opacity 0.25s ease;
}
.st-seq__fallback.is-hidden { opacity: 0; }

/* TOP-edge scrim only: a soft darkening at the top where the captions sit, fading
   to fully transparent well before the amp at the bottom — so NO layer covers the
   footage itself. Over the already-black top it's invisible; it only bites when a
   brighter frame scrolls up behind the text. Tune / disable via the vars on .st-seq. */
.st-seq__gradient {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: var(--st-seq-grad-height);
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, var(--st-seq-grad-strength)) 0%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Captions — an Apple-style vertical scroll: a column of gradient lines drifts
   UP as you scroll, revealed through a soft MASK (hidden at top + bottom, bright
   in the middle) so each line emerges from the footage, brightens through the
   centre, then fades as it rises. initStory() drives the track's transform. */
.st-seq__captions {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  /* Brightness envelope — bright band in the UPPER half so captions never sit on
     the amp at the bottom. Content below ~64% is hidden (that's where lines are
     parked on entry). Move the two middle stops to resize/shift the bright band;
     the last stop is where lines emerge (keep initStory's EMERGE just below it). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 24%, #000 50%, transparent 64%);
          mask-image: linear-gradient(to bottom, transparent 8%, #000 24%, #000 50%, transparent 64%);
}
/* Desktop: lift the bright band higher so the captions clear the animation. */
@media (min-width: 768px) {
  .st-seq__captions {
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 15%, #000 42%, transparent 56%);
            mask-image: linear-gradient(to bottom, transparent 4%, #000 15%, #000 42%, transparent 56%);
  }
}
.st-seq__caption-track {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;          /* JS drives translateY; no padding needed */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3.5rem, 1.5rem + 8vh, 10rem);   /* more air/time between captions */
  padding-inline: var(--st-gutter);
  will-change: transform;
}
.st-seq__caption {
  margin: 0;
  text-align: center;
  /* Readable size; text-wrap: pretty gives nice breaks (no orphans) when a
     caption does wrap to two lines. */
  font-size: clamp(1.35rem, 0.9rem + 2vw, 2.8rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  /* GRAY gradient — same treatment as the hero title. */
  background: linear-gradient(90deg, #fdfdfd, #e6e6e6, #fff, #cfcfcf, #9e9e9e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[dir="rtl"] .st-seq__caption {
  background: linear-gradient(-90deg, #fdfdfd, #e6e6e6, #fff, #cfcfcf, #9e9e9e);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Reduced motion / no-JS: no scroll animation — collapse the scroll length,
   un-stick the stage, centre the lines, drop the mask. */
.st-seq.is-static { height: auto; }
.st-seq.is-static .st-seq__stage { position: relative; }
.st-seq.is-static .st-seq__captions {
  -webkit-mask-image: none;
          mask-image: none;
}
.st-seq.is-static .st-seq__caption-track {
  inset: 0;
  transform: none;
  justify-content: center;
  padding-block: var(--st-space-xl);
}

/* --------------------------------------------------------------------------
   7. SECTION 3 — ROOM CALIBRATION (Before/After graphs over three seats)
   -------------------------------------------------------------------------- */
/* PINNED section: the .st-room is tall (the pin's scroll length); the .st-room__pin
   sticks to the viewport while the pinned scroll drives the sequence. */
.st-room {
  position: relative;
  background: #000;              /* pure black so the footage sits on it seamlessly */
  --st-room-scroll: 220vh;       /* pin scroll length (lower = faster through S3) */
  height: var(--st-room-scroll);
}
@media (max-width: 767px) {
  .st-room { --st-room-scroll: 205vh; }
}
.st-room__pin {
  position: sticky;
  top: 0;
  height: 100vh;                 /* fallback */
  height: 100dvh;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;       /* centres the scene + head group; tabs float on top */
  gap: var(--st-space-m);
  padding-top: clamp(2.5rem, 9vh, 4.5rem);   /* nudges the scene down, clear of the tabs */
}
.st-room__head {
  text-align: center;
  max-width: min(760px, 92vw);     /* wide enough that each title line stays on one line */
  flex: 0 0 auto;
  opacity: 0;                      /* revealed LAST by the pinned scroll */
  will-change: transform, opacity;
}
/* Tiny "Dirac ART" kicker above the title. */
.st-room__eyebrow {
  margin: 0 0 var(--st-space-2xs);
  font-size: clamp(0.7rem, 0.66rem + 0.16vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--st-accent);
}
.st-room__title {
  margin: 0;
  /* trimmed a touch from --st-step-4 */
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  font-weight: 500;
  line-height: 1.28;             /* a bit more air between the two lines */
  letter-spacing: -0.02em;
  color: var(--st-fg);
}
.st-room__intro {
  margin: var(--st-space-s) auto 0;
  max-width: 54ch;
  color: var(--st-muted);
  font-size: var(--st-step-1);
  line-height: 1.5;
  text-wrap: pretty;
}
/* Small technical caption under the paragraph. */
.st-room__caption {
  margin: var(--st-space-s) auto 0;
  max-width: 48ch;
  color: rgba(235, 235, 245, 0.48);
  font-size: clamp(0.72rem, 0.68rem + 0.16vw, 0.86rem);
  line-height: 1.4;
}

/* ---- Before/After tabs — the Perlisten goo-birth control, Storm-scoped ---- */
/* The tabs float at the TOP of the pinned stage (absolute inside .st-room__pin),
   just BELOW the site header. initRoom() measures the fixed Elementor header at
   runtime and sets --st-tabs-top so this clears it on every device. */
.st-tabs-wrap {
  position: absolute;
  top: var(--st-tabs-top, 120px);
  inset-inline: 0;
  z-index: 20;
  width: 100%;
  padding-inline: max(16px, calc((100% - var(--st-shell-max)) / 2));
}
.st-tabs {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5px;
  border-radius: 999px;
  background: transparent;      /* the dark surface is the __glass layer */
}
.st-tabs.st-tabs-prebirth { visibility: hidden; }
@media (min-width: 768px) {
  .st-tabs { width: fit-content; margin-inline: auto; }
}
.st-tabs__goo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#ss-goo);
}
.st-tabs__goo-a,
.st-tabs__goo-b {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: #2c2c31;
}
.st-tabs__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  background: rgba(44, 44, 49, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
}
.st-tabs__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;                     /* JS sets left + width to the active tab */
  z-index: 1;
  background: #f4f5f7;
  border-radius: 999px;
  /* Apple-style spring: slow wind-up, then it "attacks" the other side and
     overshoots slightly before settling. */
  transition: left 0.52s cubic-bezier(0.5, -0.16, 0.3, 1.42),
              width 0.52s cubic-bezier(0.5, -0.16, 0.3, 1.42);
}
.st-tab,
.st-tab:hover,
.st-tab:focus,
.st-tab:focus-visible,
.st-tab:active {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  text-align: center;
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0;
  padding: 0.5rem clamp(1.4rem, 5vw, 2.4rem);
  border-radius: 999px;
  font-size: clamp(0.9rem, 2.4vw, 1.05rem);
  font-weight: 500;
  line-height: 1.1;
  color: rgba(235, 235, 245, 0.6) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.st-tab.is-active { color: #262628 !important; }

/* ---- Scene: the seats photo + three floating graphs ---- */
.st-room__scene {
  position: relative;
  width: min(1100px, 92vw);
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  background: #000;
  transform: scale(1.06);        /* reads a touch bigger; graphs are children so they scale with it */
}
@media (max-width: 767px) {
  /* full-bleed + a touch of scale so the footage reads clearly bigger on mobile */
  .st-room__scene { width: 100vw; transform: scale(1.08); }
}
/* Desktop: size the scene by HEIGHT (vh) so tabs + scene + the tall head always
   fit the pinned viewport, even on short laptops — and the tabs sit clearly ABOVE
   the scene instead of floating over the movie screen. */
@media (min-width: 768px) {
  .st-room__pin { padding-top: clamp(118px, 15vh, 158px); }
  .st-room__scene {
    width: auto;
    height: clamp(230px, 33vh, 400px);
    max-width: 88vw;
    transform: none;            /* height-sized; drop the mobile up-scale */
  }
}
.st-room__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Each floating graph — centred over its seat via --seat-x / --graph-top. */
.st-graph {
  position: absolute;
  left: var(--seat-x, 50%);
  top: var(--graph-top, 28%);
  transform: translate(-50%, -50%);   /* centring — JS must NOT touch this transform */
  width: clamp(70px, 13vw, 140px);    /* smaller = reads as more separated */
  aspect-ratio: 200 / 90;
}
/* The INNER svg carries the entrance (fade + rise) so the graph's centring
   transform above is never clobbered by GSAP. */
.st-graph__svg {
  width: 100%;
  height: 100%;
  overflow: visible;            /* let the glow spill past the viewBox */
  opacity: 0;                   /* JS fades + rises it on section enter */
  will-change: transform, opacity;
}
/* Shared TARGET curve — thin, faint, no glow. Visible in both states. */
.st-graph__target {
  stroke: rgba(233, 240, 250, 0.26);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Live curve — thin, softly glowing, Apple-style (not puffy). */
.st-graph__curve {
  stroke: #eaf6ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(90, 170, 255, 0.5))
          drop-shadow(0 0 8px rgba(46, 168, 255, 0.25));
}

/* Reduced motion / no-JS: graphs visible immediately, tab surface static. */
@media (prefers-reduced-motion: reduce) {
  /* Un-pin: static flow, everything visible (JS paints the last frame). */
  .st-room { height: auto; }
  .st-room__pin {
    position: relative;
    height: auto;
    padding-block: var(--st-space-2xl);
  }
  .st-tabs-wrap { position: static; margin-inline: auto; }
  .st-graph__svg,
  .st-room__head { opacity: 1; }
  .st-tabs__glass { opacity: 1; }
  .st-tabs__goo { display: none; }
  .st-tabs__thumb { transition: none; }
}

/* --------------------------------------------------------------------------
   8. SECTION 4 — ROOM SCANNING (looping video + Section-3-style copy)
   -------------------------------------------------------------------------- */
/* PINNED: .st-scan is tall (the pin scroll length); .st-scan__pin sticks and the
   pinned scroll fades the copy up, then releases. */
.st-scan {
  position: relative;
  background: #000;
  --st-scan-scroll: 160vh;      /* pin scroll length (lower = releases sooner) */
  height: var(--st-scan-scroll);
  /* TUNING KNOBS: --pt = where the video TOP sits (just under the fixed header,
     like Section 3); --pull = how far the copy is dragged UP over the video's
     dead (dark) bottom band — keep modest so it never overlaps the visuals. */
  --st-scan-pt: clamp(102px, 13vh, 142px);   /* nudged ~8px up */
  --st-scan-pull: clamp(24px, 5vh, 60px);
}
/* Section 5 (speakers), mobile: a touch higher + copy a touch closer. */
@media (max-width: 767px) {
  #stormSpeakers {
    --st-scan-pt: calc(clamp(102px, 13vh, 142px) - 5px);
    --st-scan-pull: calc(clamp(24px, 5vh, 60px) + 5px);
  }
}
/* Section 5, desktop: a touch higher too. */
@media (min-width: 768px) {
  #stormSpeakers {
    --st-scan-pt: calc(clamp(102px, 13vh, 142px) - 14px);
  }
}
.st-scan__pin {
  position: sticky;
  top: 0;
  height: 100vh;                /* fallback */
  height: 100dvh;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* video anchored UP top (not centred low) */
  gap: 0;
  padding-top: var(--st-scan-pt);
}
/* Mobile: near full-bleed (the circular feather blends into black). Desktop: much
   smaller — a contained ~700px block so it doesn't dominate the wide viewport. */
.st-scan__media {
  width: min(700px, 100vw);
  margin-inline: auto;
  flex: 0 0 auto;
}
.st-scan__video {
  width: 100%;
  height: auto;
  max-height: 52vh;             /* never dominate the pin — leaves room for the copy */
  object-fit: contain;
  display: block;
  background: #000;
}
.st-scan__head {
  text-align: center;
  flex: 0 0 auto;
  margin-top: calc(var(--st-scan-pull) * -1);   /* pull UP over the video's dead area */
  opacity: 0;                   /* the pinned scroll fades it up */
  will-change: transform, opacity;
}
.st-scan__eyebrow {
  margin: 0 0 var(--st-space-2xs);
  font-size: clamp(0.7rem, 0.66rem + 0.16vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--st-accent);
}
.st-scan__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--st-fg);
  text-wrap: pretty;            /* no lone word stranded on the last line */
}
.st-scan__intro {
  margin: var(--st-space-s) auto 0;
  max-width: 54ch;
  padding-inline: var(--st-gutter);
  color: var(--st-muted);
  font-size: var(--st-step-1);
  line-height: 1.5;
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .st-scan { height: auto; }
  .st-scan__pin { position: relative; height: auto; padding-block: var(--st-space-2xl); }
  .st-scan__head { opacity: 1; }
}

/* --------------------------------------------------------------------------
   9. SECTION 6 — ZOOM BACK (pinned WebP scrub -> scale-out -> copy)
   The stage pins full-bleed; initZoom() scrubs the frames, then SCALES the
   whole frame down to a contained "card" and fades the copy up beneath it.
   -------------------------------------------------------------------------- */
.st-zoom {
  position: relative;
  background: #000;
  --st-zoom-scroll: 360vh;      /* pin scroll length (long tail = time to READ) */
  height: var(--st-zoom-scroll);
}
@media (max-width: 767px) {
  /* Mobile: shorter tail — the stretch from this copy to the next section's
     title felt too long. */
  .st-zoom { --st-zoom-scroll: 340vh; }
}
.st-zoom__pin {
  position: sticky;
  top: 0;
  height: 100vh;                /* fallback */
  height: 100dvh;
  overflow: hidden;
  background: #000;
}
/* Full-bleed frame; initZoom() drives transform (scale/translate) + radius. */
.st-zoom__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  will-change: transform;
}
.st-zoom__canvas,
.st-zoom__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.st-zoom__canvas { z-index: 1; }
.st-zoom__fallback {
  object-fit: cover;
  z-index: 2;                   /* over the canvas until the first frame paints */
  transition: opacity 0.25s ease;
}
.st-zoom__fallback.is-hidden { opacity: 0; }
/* Copy revealed beneath the scaled-down frame (typography = the scan head). */
.st-zoom__head {
  position: absolute;
  inset-inline: 0;
  inset-block-end: clamp(4rem, 11vh, 7.5rem);   /* raised a touch */
  text-align: center;
  padding-inline: var(--st-gutter);
  opacity: 0;                   /* the pinned scroll fades it up */
  will-change: transform, opacity;
}
/* Mobile: the frame stays FULL-SCREEN (no scale-out) and the processor sits in
   its upper band — so the copy sits ON the frame, right below the processor.
   --st-zoom-head-top is the tuning knob. */
@media (max-width: 767px) {
  .st-zoom { --st-zoom-head-top: 46%; }
  .st-zoom__head {
    inset-block-end: auto;
    inset-block-start: var(--st-zoom-head-top);
  }
}
/* Reduced motion: un-pin, show a contained end frame + the copy statically. */
@media (prefers-reduced-motion: reduce) {
  .st-zoom { height: auto; }
  .st-zoom__pin { position: relative; height: auto; padding-block: var(--st-space-2xl); }
  .st-zoom__frame {
    position: relative;
    inset: auto;
    width: min(700px, 92vw);
    aspect-ratio: 16 / 9;       /* initZoom overrides from the real frame */
    margin-inline: auto;
  }
  .st-zoom__head { position: static; margin-top: var(--st-space-l); opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. SECTION 7 — COMPLETE PLATFORM (Section-2-style caption stack, no video)
   Stanzas of gradient lines drift UP through a soft mask; emphasised lines are
   brand blue. initPlatform() drives the track transform.
   -------------------------------------------------------------------------- */
.st-plat {
  position: relative;
  background: #000;
  --st-plat-scroll: 390vh;      /* pin scroll length (title act + stanzas) */
  /* Content column = the Elementor header's INNER content column (measured live:
     a fixed 966px, logo at x237@1440 / x477@1920) so the stanzas align with it. */
  --st-plat-shell: 966px;
  height: var(--st-plat-scroll);
}
@media (max-width: 767px) {
  .st-plat { --st-plat-scroll: 410vh; }
}
.st-plat__stage {
  position: sticky;
  top: 0;
  height: 100vh;                /* fallback */
  height: 100dvh;
  overflow: hidden;
  background: #000;
}
/* Same emerge/brighten/fade mask idea as Section 2 — but with no product at the
   bottom, the bright band can sit closer to the middle. */
.st-plat__captions {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 24%, #000 64%, transparent 86%);
          mask-image: linear-gradient(to bottom, transparent 6%, #000 24%, #000 64%, transparent 86%);
}
/* Main title — hero-look: gray gradient, ONE weight for both lines, centred.
   initPlatform() fades it in up (slow + dramatic), holds, then out. */
.st-plat__title {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding-inline: var(--st-gutter);
  text-align: center;
  font-weight: 600;
  /* As big as the blue line can go while staying ONE line on desktop; on narrow
     phones it may wrap once — text-wrap:balance splits it "A complete" /
     "cinema platform" (never a stranded word). */
  font-size: clamp(1.75rem, 0.55rem + 4.8vw, 4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  opacity: 0;                   /* JS drives */
  will-change: opacity, transform;
}
/* Line 1 — eyebrow treatment (same as PROFESSIONAL CONNECTIVITY), but WHITE. */
.st-plat__title-line--sm {
  display: block;
  font-size: clamp(0.7rem, 0.66rem + 0.16vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-fill-color: #fff;
  margin-bottom: var(--st-space-2xs);
}
/* Line 2 — the big statement, hero apple-BLUE gradient. width:fit-content sizes
   the gradient box to the TEXT (like the hero's inline-block "Powerful Brain"),
   so the full light->deep-blue ramp lands on the letters — a full-width block
   would sample only the pale left end of the gradient. */
.st-plat__title-line--em {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-wrap: balance;            /* if it wraps: "A complete" / "cinema platform" */
  background: linear-gradient(90deg, #7adfff 0%, #2ea8ff 45%, #0a5bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[dir="rtl"] .st-plat__title-line--em {
  background: linear-gradient(-90deg, #7adfff 0%, #2ea8ff 45%, #0a5bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Stanzas — START-aligned (left in EN, right in HE), on the header column. */
.st-plat__track {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;         /* JS drives translateY */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Aligned to the HEADER's inner content column (966px, measured live). */
  padding-inline: max(var(--st-gutter), calc((100% - var(--st-plat-shell)) / 2));
  will-change: transform;
}
.st-plat__group { text-align: start; }
/* Thin dark divider between stanzas, with even air above/below it (this replaces
   the flex gap so the line sits exactly midway). */
.st-plat__group + .st-plat__group {
  border-top: 1px solid #2c2c2e;
  margin-top: clamp(2rem, 1rem + 4vh, 5rem);
  padding-top: clamp(2rem, 1rem + 4vh, 5rem);
}
/* Style 1 — the smaller, quiet gray. Weight 400 like the site's body copy. */
.st-plat__s1 {
  margin: 0;
  color: #86868b;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.45;
  max-width: 46ch;
  text-wrap: pretty;
}
/* Style 2 — the bigger statement, hero apple-BLUE gradient. Weight capped at
   500. width:fit-content sizes the gradient box to the TEXT (like the hero's
   inline-block "Powerful Brain") so the full light->deep ramp lands on the
   letters instead of the pale left slice of a full-width block. */
.st-plat__s2 {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.6rem);
  font-weight: 500;
  line-height: 1.32;             /* roomier — stacked blue lines breathe */
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #7adfff 0%, #2ea8ff 45%, #0a5bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[dir="rtl"] .st-plat__s2 {
  background: linear-gradient(-90deg, #7adfff 0%, #2ea8ff 45%, #0a5bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* A hair of air between a big blue line and the small line right under it. */
.st-plat__s2 + .st-plat__s1 { margin-top: 0.45em; }
/* The long closing description gets a breath of space above it. */
.st-plat__desc { margin-top: var(--st-space-2xs); }
/* Extra separation (e.g. "One ecosystem" after the big triple). */
.st-plat__gap { margin-top: var(--st-space-s); }
/* Reduced motion / no-JS: static column, no mask, no pin, title visible. */
.st-plat.is-static { height: auto; }
.st-plat.is-static .st-plat__stage { position: relative; height: auto; padding-block: var(--st-space-2xl); }
.st-plat.is-static .st-plat__title { position: relative; top: auto; transform: none; opacity: 1; margin-bottom: var(--st-space-xl); }
.st-plat.is-static .st-plat__captions {
  position: relative;
  inset: auto;
  -webkit-mask-image: none;
          mask-image: none;
}
.st-plat.is-static .st-plat__track { position: relative; transform: none; }

/* --------------------------------------------------------------------------
   12b. SECTION 9 — OUTRO (white): floating WhatsApp CTA + closing copy.
   -------------------------------------------------------------------------- */
.st-outro {
  background: #f5f5f7;           /* Apple-style light band, down to the footer */
  padding-block: var(--st-space-xl) clamp(7rem, 15vh, 11rem);
}
/* Make it right | For dealers side by side (desktop); Contact us below. */
.st-outro__cols { display: grid; gap: var(--st-space-l); }
@media (min-width: 768px) {
  .st-outro__cols { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
}
/* Hairline divider under each of the two blocks — a shade darker than the band. */
.st-outro__cols .st-outro__block {
  padding-bottom: var(--st-space-l);
  border-bottom: 1px solid #e3e3e6;
}
.st-outro__block--contact { margin-top: var(--st-space-xl); }
/* THIS section only: a touch more side padding than the rest of the page —
   at every width (mobile 16px -> 26px; desktop shell + 10px). */
.st-outro__inner { padding-inline: calc(var(--st-white-pad) + 10px); }
/* Mobile: slightly bigger outro headings. */
@media (max-width: 767px) {
  .st-outro .st-wtitle--sm { font-size: 1.35rem; }
}
.st-outro__text {
  margin: var(--st-space-xs) 0 0;
  max-width: 58ch;
  color: #98989d;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.1rem);  /* significantly smaller */
  line-height: 1.55;
  text-wrap: pretty;
}
/* Contact details — same quiet body style; phone/email are underlined blue links. */
.st-outro__contact {
  list-style: none;
  margin: var(--st-space-xs) 0 0;
  padding: 0;
  color: #98989d;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.1rem);
  line-height: 1.9;
}
/* Small round WhatsApp chip above the phone number — brand green, white glyph. */
#storm-page .st-outro__contact .st-outro__wa-btn,
#storm-page .st-outro__wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  margin-bottom: 4px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
#storm-page .st-outro__contact .st-outro__wa-btn:hover  { background: #1fb85a; transform: translateY(-2px); }
#storm-page .st-outro__contact .st-outro__wa-btn:active { transform: translateY(0); }
#storm-page .st-outro__contact .st-outro__wa-btn { text-decoration: none !important; }
.st-outro__wa-btn svg { width: 20px; height: 20px; }

/* !important + #storm-page: the theme/Elementor kit paints page links white,
   which made these invisible on the light band. */
#storm-page .st-outro__contact a {
  color: #0066ff !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}
#storm-page .st-outro__contact a:hover { color: #0052d6 !important; }

/* --------------------------------------------------------------------------
   11. HEADER LIGHT SKIN — rendering the light header template (5861) server-
   side FATALED (Elementor can't render a theme-builder header inside another
   document), so instead the EXISTING dark header is RESKINNED to the light
   look, with values measured off 5861 on /brands/lb-speakers/: white glass
   pill, dark text/icons, bright logo. initHeaderSwap() toggles
   body.storm-header-light while a [data-storm-header="light"] section sits
   under the header; it also swaps the pill bg / svg ink / logo inline
   (computed-style based, so the WPML Hebrew header works too). The rules
   below cover text + secondary surfaces. */
[data-elementor-type="header"] a { transition: color 0.35s ease; }
body.storm-header-light [data-elementor-type="header"] a,
body.storm-header-light [data-elementor-type="header"] .elementor-item,
body.storm-header-light [data-elementor-type="header"] .elementor-nav-menu a {
  color: rgba(49, 49, 49, 0.97) !important;
}
body.storm-header-light [data-elementor-type="header"] .dub-dropdown {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #1d1d1f !important;
}
/* Non-link labels (the "EN" language switcher is a span) + widget toggles, so
   their currentColor icons follow too. */
body.storm-header-light [data-elementor-type="header"] .dub-lang-current,
body.storm-header-light [data-elementor-type="header"] .dub-lang-toggle,
body.storm-header-light [data-elementor-type="header"] .dub-user-toggle,
body.storm-header-light [data-elementor-type="header"] .dub-cart-toggle {
  color: rgba(49, 49, 49, 0.97) !important;
}
body.storm-header-light [data-elementor-type="header"] .dub-input {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1d1d1f !important;
}
/* The glass pill (tagged .st-hdr-pill by initHeaderSwap). Elementor sets its
   scrolled bg with !important — the doubled class + !important here wins. The
   light pill also carries the hairline border measured off 5861. */
[data-elementor-type="header"] .st-hdr-pill { transition: background-color 0.35s ease, border-color 0.35s ease; }
body.storm-header-light [data-elementor-type="header"] .st-hdr-pill.st-hdr-pill {
  background-color: rgba(255, 255, 255, 0.47) !important;
  border: 1px solid rgba(0, 0, 0, 0.11) !important;
}
/* Mobile cart (FunnelKit shortcode) — white icon -> black ink like 5861. The
   count badge keeps its own red/white (scoped to the svg only). */
body.storm-header-light [data-elementor-type="header"] .fkcart-shortcode-container svg,
body.storm-header-light [data-elementor-type="header"] .fkcart-shortcode-icon-wrap svg {
  color: rgb(0, 0, 0) !important;
  fill: rgb(0, 0, 0) !important;
}
/* Cart DRAWER (FunnelKit, body-level) — light skin while in light mode: the dark
   glass panel goes to the same milky glass as the hamburger's light menu, white
   text/close flip to dark ink. Buttons/badges keep their own colors. The plugin
   styles via `#fkcart-modal ... !important`, so these must use the ID too. */
body.storm-header-light #fkcart-modal {
  --fkcart-primary-text-color: rgb(26, 26, 26);
}
body.storm-header-light #fkcart-modal .fkcart-preview-ui {
  background: rgba(250, 248, 255, 0.85) !important;
}
body.storm-header-light #fkcart-modal .fkcart-title,
body.storm-header-light #fkcart-modal .fkcart-zero-state-title {
  color: rgb(26, 26, 26) !important;
}
body.storm-header-light #fkcart-modal .fkcart-zero-state-text {
  color: rgb(99, 99, 102) !important;
}
body.storm-header-light #fkcart-modal .fkcart-modal-close,
body.storm-header-light #fkcart-modal .fkcart-modal-close svg,
body.storm-header-light #fkcart-modal .fkcart-modal-close svg * {
  color: rgb(26, 26, 26) !important;
  fill: rgb(26, 26, 26) !important;
}
/* Icon svgs that carry stroke/fill ATTRIBUTES (cart, search, user...) — the
   computed-style flips in JS cover CSS-colored ones. */
body.storm-header-light [data-elementor-type="header"] svg [stroke],
body.storm-header-light [data-elementor-type="header"] svg[stroke] {
  stroke: rgb(26, 26, 26) !important;
}
body.storm-header-light [data-elementor-type="header"] svg [fill="white"],
body.storm-header-light [data-elementor-type="header"] svg [fill="#fff"],
body.storm-header-light [data-elementor-type="header"] svg [fill="#ffffff"] {
  fill: rgb(26, 26, 26) !important;
}

/* --------------------------------------------------------------------------
   12. SECTION 8 — PRODUCTS (white). sonic-slider (light theme) behind
   Processors / Receivers / Amplifiers tabs.
   -------------------------------------------------------------------------- */
.st-products {
  min-height: 100vh;
  background: #fff;
  padding-block: clamp(7rem, 16vh, 11rem) var(--st-space-l);  /* tighter into the outro */
}
/* Shared white-section shell — the HEADER's inner content column (966px,
   measured live), NOT the 1024px shell: so "Make it yours" and everything
   under it sit exactly on the header's line. */
.st-products,
.st-outro {
  --st-white-shell: 966px;
  --st-white-pad: max(16px, calc((100% - var(--st-white-shell)) / 2));
}
.st-products__head,
.st-products__grid,
.st-outro__inner {
  width: 100%;
  padding-inline: var(--st-white-pad);
  text-align: start;
}
.st-products__head { margin-bottom: var(--st-space-l); }
.st-wtitle {
  margin: 0;
  color: #1a1a1a;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.st-wtitle--sm {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);   /* much smaller outro headings */
}
.st-wsub {
  margin: var(--st-space-2xs) 0 0;
  color: #86868b;
  font-size: var(--st-step-1);
  line-height: 1.5;
}

/* ---- DESKTOP product grid (replaces the slider+tabs from 768px up) ---- */
.st-products__grid { display: none; }
@media (min-width: 768px) {
  .st-products__grid { display: block; }
  .st-products__tabs-wrap,
  .st-products__panel { display: none; }
}
/* One full-width row per category; N cards share the row equally
   (grid-auto-flow column: 1 card = full width, 2 cards = 50/50). */
.st-pcol + .st-pcol { margin-top: var(--st-space-xl); }
.st-pcol__title {
  margin: 0 0 var(--st-space-s);
  color: #1a1a1a;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.st-pcol__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}
/* Simple card — WIDE: stretches with the row; height stays put (matches the
   old square cell height). Media fills edge-to-edge (cover, no letterboxing). */
.st-pcard {
  position: relative;
  display: block;
  height: clamp(200px, 16vw, 232px);
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  background: #0f0f11;
  text-decoration: none;
}
.st-pcard__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
a.st-pcard:hover .st-pcard__media { transform: scale(1.04); }
.st-pcard__head {
  position: absolute;
  top: clamp(0.8rem, 1.6vw, 1.2rem);
  inset-inline: 0;
  padding-inline: clamp(0.9rem, 1.8vw, 1.3rem);
  z-index: 1;
  text-align: start;
}
.st-pcard__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.2;
}
.st-pcard__sub { margin: 0.45em 0 0; }
.st-products__tabs-wrap {
  width: 100%;
  padding-inline: var(--st-white-pad);
  margin: 0 auto var(--st-space-l);
}
/* LIGHT tab bar — same goo-birth control as Before/After, reskinned for white:
   light goo ball, light glass track (birth fades it in), clean white thumb
   (NO shadow), dark labels, and a soft no-overshoot glide for the thumb. */
.st-tabs--light .st-tabs__goo-a,
.st-tabs--light .st-tabs__goo-b {
  background: #e7e7ea;
}
.st-tabs--light .st-tabs__glass {
  background: rgba(0, 0, 0, 0.055);   /* birth fades this in (opacity from base) */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.st-tabs--light .st-tabs__thumb {
  background: #fff;
  box-shadow: none;
  /* gentle glide, no spring overshoot — reads finer on the light control */
  transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.st-tabs--light .st-tab { color: rgba(60, 60, 67, 0.62) !important; font-weight: 400; }
.st-tabs--light .st-tab.is-active { color: #1a1a1a !important; font-weight: 500; }

.st-products__panel { width: 100%; }
.st-products__empty {
  margin: var(--st-space-2xl) auto;
  text-align: center;
  color: #b5b5ba;
  font-size: var(--st-step-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* "Coming soon" chip on cards — frosted light chip on the dark imagery. */
.st-products .st-soon {
  display: inline-block;
  padding: 0.25em 0.9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* SQUARE cards on ALL breakpoints. The Storm media is dark, so the card text is
   WHITE and the slide/letterbox backdrop goes dark (the component's --shop
   defaults are black-text-on-light for Perlisten). Specificity beats the
   component's own rules. */
.st-products .sonic-slider--shop {
  --ss-slide-aspect: 1 / 1;
}
.st-products .sonic-slider--shop .sonic-slider__slide { background: #0f0f11; }
.st-products .sonic-slider--shop .sonic-slider__img { background: #0f0f11; }
.st-products .sonic-slider__card-title { color: #fff; }
.st-products .sonic-slider__card-sub { color: rgba(255, 255, 255, 0.78); }
/* Titles sit START-aligned on the card (left in EN, right in HE). */
.st-products .sonic-slider__card-head {
  text-align: start;
  padding-inline: clamp(1.1rem, 4vw, 1.8rem);
  top: clamp(0.9rem, 3.5vw, 1.5rem);
}
@media (min-width: 768px) {
  .st-products .sonic-slider--shop {
    --ss-slide-w: 30%;
  }
}
/* SINGLE-card panels (Receivers / Amplifiers): the one card spreads across the
   whole slider — no peek/cut. The nav (dots + play) STAYS: one dot signals
   "there's just one card". (Placed AFTER the desktop block so it wins the
   cascade at every width.) */
.st-products .sonic-slider--single {
  --ss-slide-w: 100%;
}
/* The component pads the START edge only (the peek covers the end). A single
   full-width card needs the END padded too, so on mobile it sits on the same
   inline line as the tab bar (16px both sides). */
@media (max-width: 767px) {
  .st-products .sonic-slider--single .sonic-slider__viewport {
    padding-inline-end: var(--ss-edge);
  }
}
@media (min-width: 768px) {
  /* full-width square would be enormous — widescreen ratio on desktop */
  .st-products .sonic-slider--single { --ss-slide-aspect: 16 / 9; }
}