/* ==========================================================================
   Moovia — brand page styles (scaffolding)
   --------------------------------------------------------------------------
   Scoped under `#moovia-page` / `.moovia`. FLUID-FIRST like Storm Audio: one
   clamp() type + space scale from ~360px to ~1600px — reach for the tokens
   before writing a one-off px value or @media query.

   Tokens:
     --mv-step--1 … --mv-step-6      fluid font sizes (step-0 = body)
     --mv-space-3xs … --mv-space-2xl fluid spacing
     --mv-gutter                     fluid page side-gutter
     --mv-shell-max                  1024px content column
     --mv-header-shell               966px — the Elementor header's INNER
                                     content column (measured live); use for
                                     anything that must sit on the header line
   ========================================================================== */

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

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

  /* — Containers — */
  --mv-shell-max: 1024px;
  --mv-header-shell: 966px;      /* the header's inner column (measured live) */
  --mv-gutter: clamp(1rem, 0.4rem + 3vw, 4rem);

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

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

#moovia-page {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--mv-bg);
  color: var(--mv-fg);
  /* Clip the inline axis only — a blanket overflow:hidden would silently
     disable position:sticky (the pinned scenes + slider navs rely on it). */
  overflow-x: clip;
  overflow-y: visible;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--mv-step-0);
  line-height: 1.6;
}

/* Defensive: body{overflow-x:hidden} would make <body> a scroll container and
   kill sticky. Re-assert `clip` on this brand only. */
body.sonic-brand-moovia {
  overflow-x: clip !important;
}

/* SUB-PIXEL SEAM GUARD (same as Duvaltex): fractional section heights let
   the page's dark backdrop show through a hairline gap between sections —
   the "dark border at the top of Make it right". Overlap every section
   1px over the one above; solid backgrounds hide the overlap. */
#moovia-page section + section,
#moovia-page div + section,
#moovia-page section + div.mv-break,
#moovia-page div.mv-break + section {
  margin-block-start: -1px;
}

/* --------------------------------------------------------------------------
   3. CONTENT SHELLS
   -------------------------------------------------------------------------- */
.mv-shell {
  width: 100%;
  max-width: var(--mv-shell-max);
  margin-inline: auto;
  padding-inline: var(--mv-gutter);
}
/* Align content to the HEADER's inner column (start-edge trick from Perlisten/
   Storm) — use on blocks that must sit exactly on the header's line. */
.mv-align-header {
  padding-inline: max(16px, calc((100% - var(--mv-header-shell)) / 2));
}

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

/* NO focus rings, ever, on this page's interactive elements — Safari's
   :focus-visible heuristics repaint the blue box on programmatic refocus
   (e.g. returning focus after the sheet closes), so the soft
   :not(:focus-visible) approach is not enough. Screen-reader users are
   unaffected (they navigate by their own cursor/highlight). */
#moovia-page a:focus,
#moovia-page button:focus,
#moovia-page [tabindex]:focus,
#moovia-page a:focus-visible,
#moovia-page button:focus-visible,
.mv-pers__modal :focus,
.mv-pers__modal :focus-visible {
  outline: none !important;
}
#moovia-page a,
#moovia-page button {
  -webkit-tap-highlight-color: transparent;
}

.mv-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) {
  #moovia-page *,
  #moovia-page *::before,
  #moovia-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. HERO — full-black stage. The clip's own background is black, so it melts
   into the stage; it is CONTAINED (~35% of the viewport, one rendition for
   all breakpoints), never full-bleed. Copy sits beneath it. Everything starts
   hidden; initHero() in js/moovia-scroll.js runs the reveal (and shows all
   instantly under reduced-motion / missing gsap).
   -------------------------------------------------------------------------- */
.mv-hero {
  position: relative;
  /* svh, NOT dvh: dvh grows when the mobile URL bar collapses mid-scroll,
     shifting the page (and the scrub range) under the user's finger. svh is
     stable; freezePinHeights() then pins it in px (data-mv-pin). */
  height: 100vh;                 /* fallback */
  height: 100svh;
  background: #000;
  overflow: hidden;
}
.mv-hero__stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Clear the fixed header (bottom ~117px @1440, taller on large screens). */
  padding-block-start: clamp(105px, 12vh, 160px);
  padding-block-end: clamp(2.5rem, 7vh, 5rem);
  padding-inline: var(--mv-gutter);
  /* Tight vertical rhythm — video, title, paragraph, and CTA must all fit
     one viewport. Per-element margins below fine-tune on top of this gap. */
  gap: clamp(0.75rem, 1.8vh, 1.25rem);
}
.mv-hero__videowrap {
  --mv-hero-video-h: 46vh;
  width: min(94vw, calc(var(--mv-hero-video-h) * 16 / 9), 1400px);
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  opacity: 0;                    /* initHero() melts it in */
}
.mv-hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Cover/contain is handled by the draw code (cover-fit onto a black fill;
     on the 16:9 desktop box cover == contain). */
}
/* Mobile: a 16:9 contain box maxes out at ~24vh — not present enough. Give
   the clip a TALLER stage and cover-crop the sides (the clip's bg is black,
   so the crop is invisible and the subject scales up). */
@media (max-width: 767px) {
  .mv-hero__stage {
    /* The mobile header pill reaches ~158px down. The clip's own frame has
       black headroom above the chair, so the box may start right under the
       pill — the visible gap stays small but real. Bottom padding is large
       so the centered cluster rides HIGH in the viewport. */
    padding-block-start: 140px;
    padding-block-end: clamp(4.5rem, 11vh, 7rem);
  }
  .mv-hero__videowrap {
    width: 100vw;
    aspect-ratio: auto;
    height: min(38vh, 100vw);    /* never scale past ~1:1 crop */
  }
}
.mv-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  /* Dedicated clamp (below step-5): sized so "The experience begins." holds
     ONE line even at 360px — the title must stay exactly two lines. */
  font-size: clamp(1.8rem, 1.15rem + 2.9vw, 3.7rem);
  line-height: 1.1;
  font-weight: 600;              /* hero title is the page's one 600 */
  letter-spacing: -0.015em;
}
.mv-hero__line {
  display: block;
  /* "Take a seat." sits QUIETER (400) than "Let the show begin." — the
     600 re-asserts itself on the last line only. */
  font-weight: 400;
  background: linear-gradient(180deg, #ffffff 30%, #9b9ba0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;                    /* initHero() reveals */
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}
.mv-hero__line:last-of-type { font-weight: 600; }
/* Opening line reads softer than the punch line. */
.mv-hero__line:first-child { font-weight: 400; }
.mv-hero__subtitle {
  /* Pull in tighter to the title than the stage gap. */
  margin: calc(-1 * clamp(0.25rem, 1vh, 0.6rem)) 0 0;
  max-width: 34em;
  color: var(--mv-muted);
  font-size: var(--mv-step-0);
  line-height: 1.6;
  font-weight: 400;
  opacity: 0;                    /* initHero() reveals */
  will-change: opacity, transform;
}
.mv-hero__cta {
  position: relative;            /* anchor for the "Or scroll down" hint */
  display: inline-flex;
  align-items: center;
  /* A touch higher than before — makes room for the hint below. */
  margin-block-start: clamp(0.25rem, 1.2vh, 0.9rem);
  /* Reserves the hint's band inside the centered column: the extra space
     below LIFTS the pill and opens air between pill and hint. */
  margin-block-end: 26px;
  padding: 0.8em 1.9em;
  border-radius: 999px;
  background: #0065ff;           /* the site-wide CTA blue, no border */
  border: 0;
  color: #ffffff !important;             /* beat the theme/kit link color */
  font-size: var(--mv-step-0);
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  opacity: 0;                    /* initHero() reveals */
  transition: background-color 0.3s ease;
}
/* Quiet "Or scroll down" hint hanging UNDER the pill — absolute, so it
   never changes the hero's layout; opacity rides the pill (parent). */
.mv-hero__scrollhint {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(235, 235, 245, 0.55);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.mv-hero__cta:hover {
  background: #0053d6;
}

/* --------------------------------------------------------------------------
   6. S2 — STORY. White pinned scene (CSS sticky, never ScrollTrigger pin),
   the StormAudio-S7 stanza mechanic verbatim: a caption TRACK travels upward
   through a masked band (emerge at the bottom, bright through the middle,
   fade out the top); the LAST stanza parks at HOLD_AT so the pin releases
   with zero dead scroll. The "Moovia" eyebrow parks below the header the
   whole ride.
   -------------------------------------------------------------------------- */
.mv-story {
  position: relative;
  /* Pin scroll length ~= the track's real travel distance, so scroll-to-motion
     stays ~1:1 (any longer and the stanzas feel heavy: at 400vh the track
     moved only ~0.7px per scrolled px, ~0.58 on mobile). Storm's 390vh worked
     because its stanzas were 3-4 lines each — this track is much shorter. */
  /* Budget covers the stanzas AND the merged logo moment (the standalone
     logo section is gone). */
  --mv-story-scroll: 470vh;
  height: var(--mv-story-scroll);
  background: #ffffff;
}
@media (max-width: 767px) {
  .mv-story { --mv-story-scroll: 440vh; }
}
.mv-story__stage {
  position: sticky;
  top: 0;
  /* Plain vh (the LARGE viewport unit) — NOT dvh (resizes mid-pin -> jumpy
     travel) and NOT svh (leaves a gap at the bottom once the mobile URL bar
     collapses mid-page). vh is stable during scroll and always covers the
     screen; while the bar is expanded the stage bottom sits slightly below
     the fold, which is invisible on a white stage. */
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
}
.mv-story__head {
  /* A hair below the header: its bottom is ~117px @1440 and grows with the
     viewport WIDTH on large screens — hence the vw-based middle term.
     (initStory() refines it live off the measured pill.) */
  position: relative;
  z-index: 2;
  padding-block-start: clamp(118px, 7.6vw, 134px);
}
@media (min-width: 768px) {
  .mv-story__head { text-align: center; }   /* mobile stays start-aligned */
}
.mv-story__eyebrow {
  margin: 0;
  color: #1a1a1a;
  font-size: var(--mv-step-1);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0;                    /* initStory() eases it in on approach */
  will-change: opacity, transform;
}
/* Emerge/brighten/fade mask — same idea as Storm S7, but the top fade ends
   BELOW the parked eyebrow (bottom ~18% desktop / ~26% mobile), so headlines
   are fully gone before they reach it. */
.mv-story__captions {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 24%, #000 36%, #000 68%, transparent 90%);
          mask-image: linear-gradient(to bottom, transparent 24%, #000 36%, #000 68%, transparent 90%);
}
@media (max-width: 767px) {
  .mv-story__captions {
    -webkit-mask-image: linear-gradient(to bottom, transparent 27%, #000 39%, #000 70%, transparent 90%);
            mask-image: linear-gradient(to bottom, transparent 27%, #000 39%, #000 70%, transparent 90%);
  }
}
/* Stanzas — START-aligned (left in EN, right in HE), on the header column. */
.mv-story__track {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;          /* JS drives translateY */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-inline: max(var(--mv-gutter), calc((100% - var(--mv-header-shell)) / 2));
  will-change: transform;
}
.mv-story__group { text-align: start; }
/* Thin light divider between stanzas, even air above/below (replaces flex gap
   so the line sits exactly midway). */
.mv-story__group + .mv-story__group {
  border-top: 1px solid #e3e3e6;
  margin-top: clamp(2rem, 1rem + 4vh, 5rem);
  padding-top: clamp(2rem, 1rem + 4vh, 5rem);
}
/* The gradient headline — Storm's s2 treatment with the Moovia deep-blue ramp.
   width:fit-content sizes the gradient box to the TEXT so the full ramp lands
   on the letters, not on empty track width. */
.mv-story__line {
  margin: 0;
  width: fit-content;
  max-width: min(100%, 24ch);
  font-size: clamp(1.45rem, 1rem + 1.9vw, 2.6rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  background: linear-gradient(90deg, #042640 0%, #346a92 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[dir="rtl"] .mv-story__line {
  background: linear-gradient(-90deg, #042640 0%, #346a92 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Desktop: the headlines run centered (mobile stays start-aligned). */
@media (min-width: 768px) {
  .mv-story__group { text-align: center; }
  .mv-story__line { margin-inline: auto; }
}
@media (max-width: 767px) {
  .mv-story__head { padding-block-start: 160px; }   /* mobile pill ~158px */
}
/* The merged LOGO MOMENT — hidden dead-center of the stage the whole ride;
   initStory() fades it in after the last stanza + eyebrow leave. */
.mv-story__logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: var(--mv-gutter);
  pointer-events: none;
  z-index: 1;
}
.mv-story__logo-img {
  width: clamp(200px, 38vw, 440px);
  max-width: 88%;
  height: auto;
  opacity: 0;                    /* initStory() drives */
  will-change: opacity, transform;
}

/* Reduced motion / no-JS: static white column, no mask, no pin. */
.mv-story--static { height: auto; }
.mv-story--static .mv-story__logo { display: none; }
.mv-story--static .mv-story__eyebrow { opacity: 1; }
.mv-story--static .mv-story__stage { position: relative; height: auto; overflow: visible; padding-block-end: var(--mv-space-2xl); }
.mv-story--static .mv-story__captions {
  position: relative;
  inset: auto;
  margin-block-start: var(--mv-space-l);
  -webkit-mask-image: none;
          mask-image: none;
}
.mv-story--static .mv-story__track { position: relative; transform: none; }

/* --------------------------------------------------------------------------
   7. S4 — FUNCTIONS. White 50/50 split on the header column: copy beside an
   ambient clip in a rounded card; stacked (copy first) on mobile.
   initFunctions() adds .is-in for the reveal and manages clip playback.
   -------------------------------------------------------------------------- */
.mv-func {
  position: relative;
  /* 100vh stage + pinned budget: head+card-1 entrance, then ~70vh of scroll
     per horizontal card transition (3 transitions). */
  --mv-func-scroll: 410vh;
  height: var(--mv-func-scroll);
  background: #ffffff;
}
@media (max-width: 767px) {
  /* ~90vh of scroll per card transition: one flick = one card, long smooth
     slides, and only a short beat on card 1 before the rail engages. */
  .mv-func { --mv-func-scroll: 430vh; }
}
.mv-func__stage {
  position: sticky;
  top: 0;
  height: 100vh;                 /* large unit — covers the collapsed-bar screen */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* TOP-anchored, never centered */
  gap: var(--mv-space-l);        /* head <-> rail */
  /* Same start line as "Get the highlights" (pill bottom + 32px, measured
     live by initFunctions()); fallback here. */
  padding-block: 190px var(--mv-space-l);
}
.mv-func__inner {
  width: 100%;
}
/* "Functions" + "Get comfort" — enter once, then PARKED above the rail for
   the whole horizontal ride. */
.mv-func__head { text-align: start; }
/* Horizontal card rail — FULL-BLEED, no margins of its own; JS slides it
   (translate3d) as the pinned scroll "turns horizontal". Every card is a
   viewport-wide slide that carries the page margins INSIDE it (padding
   split half-half between neighbors), so an aligned card reads like a
   normal padded block — rounded corners and spacing visible on both sides —
   and each card feels completely alone. Flex follows the writing direction,
   so RTL mirrors automatically. */
.mv-func__rail {
  width: 100%;
  display: flex;
  align-items: flex-start;
  will-change: transform;
}
.mv-func__card {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;                        /* explicit margins below control rhythm */
  text-align: start;
  /* The page margins, carried by the slide itself. */
  padding-inline: max(var(--mv-gutter), calc((100% - var(--mv-header-shell)) / 2));
}
/* Feature title: the eyebrow's size and ink. */
.mv-func__ftitle {
  margin: var(--mv-space-s) 0 0;
  max-width: 100%;
  font-size: var(--mv-step-1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.mv-func__eyebrow {
  margin: 0 0 var(--mv-space-2xs);
  color: #1a1a1a;
  font-size: var(--mv-step-1);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* The S2 gradient treatment, but display-sized — this is the section's hero
   statement, not a stanza. */
.mv-func__title {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.7rem, 1.05rem + 1.8vw, 2.7rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, #042640 0%, #346a92 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[dir="rtl"] .mv-func__title {
  background: linear-gradient(-90deg, #042640 0%, #346a92 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.mv-func__desc {
  margin: 0.4em 0 0;             /* hugs its feature title */
  max-width: 58ch;
  color: #888789;
  font-size: var(--mv-step-0);
  line-height: 1.6;
  font-weight: 400;
  text-wrap: pretty;
}
.mv-func__media {
  border-radius: clamp(18px, 2.5vw, 28px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  /* The clip's first frame rides as a background (inline style per card) so
     there is NEVER a black/blank card — the video crossfades in over it
     only once it has real data (.is-ready). */
  background: #000 center / cover no-repeat;
  /* Cap so head + card always fit the pinned stage on short desktops. */
  width: min(100%, calc(42svh * 16 / 9));
  margin-inline: auto;
  /* Safari: keep the rounded clip during the reveal transform. */
  isolation: isolate;
  transform: translateZ(0);
}
.mv-func__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                    /* hidden until it has decodable frames */
  transition: opacity 0.4s ease;
}
/* Image cards (Belongings) — same cover behavior as the clips. */
.mv-func__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-func__video.is-ready { opacity: 1; }
.mv-func--static .mv-func__video { opacity: 1; transition: none; }
/* Entrance is scroll-scrubbed by initFunctions() — one lerp, fully
   reversible. The parked head + the FIRST card start hidden; the other
   cards arrive by the rail slide, already composed. */
.mv-func__eyebrow,
.mv-func__title,
.mv-func__card:first-child .mv-func__media,
.mv-func__card:first-child .mv-func__ftitle,
.mv-func__card:first-child .mv-func__desc {
  opacity: 0;
  will-change: opacity, transform;
}
/* ===== DESKTOP (>=768px): no pin, no rail — a plain 2x2 feature grid with
   SQUARE clips, revealed once on entry (JS adds .is-in; initFunctions runs
   grid mode). Mobile keeps the pinned horizontal carousel. ===== */
@media (min-width: 768px) {
  .mv-func { height: auto; }
  .mv-func__stage {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    /* Generous clearance below the header — "Functions" must never hug it. */
    padding-block: clamp(170px, 19vh, 230px) var(--mv-space-2xl);
  }
  .mv-func__inner { margin-block-end: var(--mv-space-l); }
  .mv-func__rail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mv-space-xl) var(--mv-space-l);
    transform: none !important;          /* the mobile scrub must never leak */
    padding-inline: max(var(--mv-gutter), calc((100% - var(--mv-header-shell)) / 2));
  }
  .mv-func__card { padding-inline: 0; }
  .mv-func__media {
    aspect-ratio: 1 / 1;                 /* square, cover-cropped */
    width: 100%;
    max-width: none;
  }
  /* Reveal: everything starts hidden, .is-in brings the head then the four
     cards in a gentle stagger. */
  .mv-func__eyebrow,
  .mv-func__title,
  .mv-func__card .mv-func__media,
  .mv-func__card .mv-func__ftitle,
  .mv-func__card .mv-func__desc {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s linear, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mv-func.is-in .mv-func__eyebrow,
  .mv-func.is-in .mv-func__title,
  .mv-func.is-in .mv-func__card .mv-func__media,
  .mv-func.is-in .mv-func__card .mv-func__ftitle,
  .mv-func.is-in .mv-func__card .mv-func__desc {
    opacity: 1;
    transform: translateY(0);
  }
  .mv-func.is-in .mv-func__title { transition-delay: 0.08s; }
  .mv-func.is-in .mv-func__card:nth-child(1) > * { transition-delay: 0.16s; }
  .mv-func.is-in .mv-func__card:nth-child(2) > * { transition-delay: 0.28s; }
  .mv-func.is-in .mv-func__card:nth-child(3) > * { transition-delay: 0.40s; }
  .mv-func.is-in .mv-func__card:nth-child(4) > * { transition-delay: 0.52s; }
}

/* Reduced motion / no-JS fallback: plain static section, cards stacked. */
.mv-func--static { height: auto; }
.mv-func--static .mv-func__stage {
  position: relative;
  height: auto;
  overflow: visible;
  padding-block: var(--mv-space-2xl);
}
.mv-func--static .mv-func__rail {
  flex-direction: column;
  gap: var(--mv-space-xl);
}
.mv-func--static .mv-func__eyebrow,
.mv-func--static .mv-func__title,
.mv-func--static .mv-func__card .mv-func__media,
.mv-func--static .mv-func__card .mv-func__ftitle,
.mv-func--static .mv-func__card .mv-func__desc {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   7a. S4b — PARALLAX BREAK. Full-bleed photo band; the oversized image
   drifts slower than the scroll (initBreak() drives translateY). Without
   JS / reduced motion it is simply a static cover crop.
   -------------------------------------------------------------------------- */
.mv-break {
  position: relative;
  height: clamp(380px, 72vh, 760px);
  overflow: hidden;
  background: #0c0c0e;
}
.mv-break__img {
  position: absolute;
  inset-inline: 0;
  top: -14%;
  width: 100%;
  height: 128%;                  /* the parallax headroom (±14%) */
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
@media (max-width: 767px) {
  /* The screen + front seats live in the LEFT third of the photo — bias the
     narrow crop there, and keep the band shorter so the slice stays wide
     enough to read the room. */
  .mv-break { height: clamp(300px, 48vh, 460px); }
  .mv-break__img { object-position: 30% 50%; }
  /* Band 2 (dark cinema): the lit seats sit just left of center. */
  .mv-break--2 .mv-break__img { object-position: 42% 55%; }
  /* Band 3 (red seats): the row fills the frame, slight left bias. */
  .mv-break--3 .mv-break__img { object-position: 45% 50%; }
  /* Band 4 (bright living room): the sofa sits just past center. */
  .mv-break--4 .mv-break__img { object-position: 52% 55%; }
}

/* --------------------------------------------------------------------------
   7b. S5 — PERSONALIZATION. White pinned beat: three circular category
   cards fade in up under the head; the "+" on each opens a full-screen
   white/blur overlay (the Valerion pattern) with the material story.
   initPersonalization() drives the entrance scrub and the overlays.
   -------------------------------------------------------------------------- */
.mv-pers {
  position: relative;
  --mv-pers-scroll: 200vh;       /* 100vh stage + an "arrived" hold */
  height: var(--mv-pers-scroll);
  background: #ffffff;
}
.mv-pers__stage {
  position: sticky;
  top: 0;
  height: 100vh;                 /* large unit — covers the collapsed-bar screen */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Same start line as the other scenes (pill + 32px, measured live). */
  padding-block: 190px var(--mv-space-l);
}
.mv-pers__head { text-align: start; margin-block-end: var(--mv-space-xl); }
.mv-pers__eyebrow {
  margin: 0 0 var(--mv-space-2xs);
  color: #1a1a1a;
  font-size: var(--mv-step-1);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0;                    /* initPersonalization() drives */
  will-change: opacity, transform;
}
.mv-pers__title {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.7rem, 1.05rem + 1.8vw, 2.7rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, #042640 0%, #346a92 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;                    /* initPersonalization() drives */
  will-change: opacity, transform;
}
html[dir="rtl"] .mv-pers__title {
  background: linear-gradient(-90deg, #042640 0%, #346a92 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.mv-pers__lead {
  margin: var(--mv-space-s) 0 0;
  max-width: 58ch;
  color: #888789;
  font-size: var(--mv-step-0);
  line-height: 1.6;
  font-weight: 400;
  text-wrap: pretty;
  opacity: 0;                    /* initPersonalization() drives */
  will-change: opacity, transform;
}
/* Three circular category cards — they enter as ONE unit (the whole row
   rises together; no cheap per-item stagger). */
.mv-pers__cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: start;
  opacity: 0;                    /* initPersonalization() drives */
  will-change: opacity, transform;
}
#moovia-page .mv-pers__cat {
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;   /* beat the Elementor kit buttons */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline-offset: 6px;
  margin: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-s);
  font-family: inherit;
  cursor: pointer;
}
.mv-pers__catimg {
  display: block;
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);      /* Safari: keep the circle clip */
}
.mv-pers__catimg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#moovia-page .mv-pers__cat:hover .mv-pers__catimg img { transform: scale(1.05); }
.mv-pers__catlabel {
  color: #1a1a1a;
  font-size: var(--mv-step-0);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* The "+" — compact ghost chip: transparent, black plus, mid-gray ring. */
.mv-pers__catplus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid #98989d;
  background: transparent;
  color: #1a1a1a;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.mv-pers__catplus svg { width: 46%; height: 46%; }
#moovia-page .mv-pers__cat:hover .mv-pers__catplus,
#moovia-page .mv-pers__cat:focus-visible .mv-pers__catplus {
  transform: scale(1.12);
  border-color: #1a1a1a;
  background: rgba(0, 0, 0, 0.04);
}
#moovia-page .mv-pers__cat:active .mv-pers__catplus {
  transform: scale(0.96);
  border-color: #1a1a1a;
}
/* Desktop inline material story — hidden on mobile (the sheets serve it
   there). */
.mv-pers__inline { display: none; }

/* ===== DESKTOP (>=768px): no pin, no plus buttons, no sheets — the head
   plus the full material story inline, two columns. ===== */
@media (min-width: 768px) {
  .mv-pers { height: auto; }
  .mv-pers__stage {
    position: static;
    height: auto;
    overflow: visible;
    padding-block: clamp(170px, 19vh, 230px) var(--mv-space-2xl);
  }
  .mv-pers__cats { display: none; }
  .mv-pers__inline {
    display: block;
    opacity: 0;                  /* .is-in reveals */
  }
  /* #id specificity ON PURPOSE: the catblocks are <section> siblings, and
     the global seam guard (#moovia-page section + section { -1px }) was
     BEATING this rule — the Upholsteries->Components / Components->
     Finishings gaps collapsed to nothing. Same xl as head->Fabrics. */
  #moovia-page .mv-pers__catblock + .mv-pers__catblock { margin-block-start: var(--mv-space-xl); }
  /* Category heading — a clear step above the group titles. */
  .mv-pers__cattitle {
    margin: 0 0 var(--mv-space-m);
    color: #1a1a1a;
    font-size: var(--mv-step-2);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.012em;
  }
  /* Groups in 50% columns; a light vertical divider splits each pair. */
  .mv-pers__catgroups {
    --mv-cat-gap: clamp(2rem, 4.5vw, 4.5rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--mv-cat-gap);
    row-gap: var(--mv-space-l);
  }
  .mv-pers__catgroups .mv-pers__group {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* Beat the global sibling-margin rule (same trick, higher specificity) —
     without this the SECOND column of each pair gets shoved down and the
     titles misalign. The grid gap owns the rhythm here. */
  .mv-pers__catgroups .mv-pers__group + .mv-pers__group {
    margin-block-start: 0;
  }
  .mv-pers__catgroups .mv-pers__group:nth-child(even)::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(-0.5 * var(--mv-cat-gap));
    width: 1px;
    background: #e3e3e6;
  }
  /* Swatch rows align across a pair: the circles sit at the column bottom,
     with breathing space after a shorter paragraph. */
  .mv-pers__catgroups .mv-pers__swatches {
    margin-block-start: auto;
    padding-block-start: var(--mv-space-m);
  }
  /* Entry reveal (initPersonalization adds .is-in once on desktop). */
  .mv-pers__eyebrow,
  .mv-pers__title,
  .mv-pers__lead,
  .mv-pers__inline {
    transform: translateY(24px);
    transition: opacity 0.9s linear, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mv-pers.is-in .mv-pers__eyebrow,
  .mv-pers.is-in .mv-pers__title,
  .mv-pers.is-in .mv-pers__lead,
  .mv-pers.is-in .mv-pers__inline {
    opacity: 1;
    transform: translateY(0);
  }
  .mv-pers.is-in .mv-pers__title  { transition-delay: 0.08s; }
  .mv-pers.is-in .mv-pers__lead   { transition-delay: 0.16s; }
  .mv-pers.is-in .mv-pers__inline { transition-delay: 0.26s; }
}

/* ---- The overlays, Valerion pattern verbatim: one shared blurred scrim
   ABOVE the header (z 100010 — the blur smears the header beneath it) and
   a centered white panel card that never physically covers the header. ---- */
.mv-pers__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 100010;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;   /* breathes in with the sheet */
}
.mv-pers__scrim.is-active { opacity: 1; pointer-events: auto; }
/* BOTTOM SHEET: slides up from the bottom edge (the iOS sheet curve),
   internal scroll, drag-to-dismiss from the grip strip. Capped height keeps
   the (blurred) header visible above it. */
.mv-pers__modal {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  width: min(100%, 760px);
  margin-inline: auto;
  max-height: 86vh;
  max-height: 86dvh;
  background: #ffffff;
  z-index: 100011;
  border-radius: 22px 22px 0 0;
  padding: 0 clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vh, 3rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(102%);
  pointer-events: none;
  /* Long, soft ease-out (quint) — glides in and lands like an iOS sheet,
     no slam. */
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.mv-pers__modal.is-open {
  transform: translateY(0);
  pointer-events: auto;
}
.mv-pers__modal.is-dragging { transition: none; }
/* The grip strip — sticky so the handle + X survive internal scroll; it is
   also the drag-to-dismiss zone. */
.mv-pers__modal-grip {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-inline: calc(-1 * clamp(1.5rem, 4vw, 2.5rem));
  background: #ffffff;
  border-radius: 22px 22px 0 0;
  touch-action: none;            /* the drag owns this strip */
  cursor: grab;
}
.mv-pers__modal-handle {
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #d5d5d9;
}
#moovia-page .mv-pers__modal-close {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 12px;
  width: 32px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  color: #1a1a1a;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
#moovia-page .mv-pers__modal-close:hover { background: rgba(0, 0, 0, 0.12) !important; }
.mv-pers__modal-close svg { width: 44%; height: 44%; }
.mv-pers__modal-title {
  margin: 0 0 var(--mv-space-l);
  color: #1a1a1a;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: start;
}
/* ---- Material groups (inside the overlay). ---- */
.mv-pers__group { text-align: start; }
.mv-pers__group + .mv-pers__group { margin-block-start: var(--mv-space-xl); }
.mv-pers__gtitle {
  margin: 0;
  color: #1a1a1a;
  font-size: var(--mv-step-1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.mv-pers__gtext {
  margin: var(--mv-space-2xs) 0 0;
  max-width: 58ch;
  color: #888789;
  font-size: var(--mv-step-0);
  line-height: 1.6;
  font-weight: 400;
  text-wrap: pretty;
}
/* Swatches — IDENTICAL size, PERFECT circles, 4-up on EVERY breakpoint;
   a lone swatch (carbon) keeps exactly the same size as the rest. */
.mv-pers__swatches {
  margin-block-start: var(--mv-space-m);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 2vw, 1.75rem);
}
.mv-pers__swatch {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
}
.mv-pers__swatch img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  transform: translateZ(0);      /* Safari: keep the circle clip */
}
/* The material name, in ink, UNDER its circle. */
.mv-pers__slabel {
  text-align: center;
  color: #1a1a1a;
  font-size: clamp(0.72rem, 0.55rem + 0.8vw, 1rem);
  font-weight: 500;
  line-height: 1.25;
}
/* Reduced motion / no-JS fallback: plain static section, all visible. */
.mv-pers--static { height: auto; }
.mv-pers--static .mv-pers__stage {
  position: relative;
  height: auto;
  overflow: visible;
  padding-block: var(--mv-space-2xl);
}
.mv-pers--static .mv-pers__eyebrow,
.mv-pers--static .mv-pers__title,
.mv-pers--static .mv-pers__lead,
.mv-pers--static .mv-pers__cats,
.mv-pers--static .mv-pers__inline {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   7c. S9 — PRODUCTS ("Make it yours"). Storm's pattern minus the tabs:
   desktop = 3-column light card grid on the header column; mobile = one
   light sonic-slider. The renders are white-background studio shots ->
   white cards with a hairline border, contain-fit, dark titles.
   -------------------------------------------------------------------------- */
.mv-products {
  background: #ffffff;
  /* Tight to the Innovation release — no dead white stretch. */
  padding-block: clamp(2.5rem, 6vh, 4.5rem) var(--mv-space-2xl);
  --mv-white-pad: max(16px, calc((100% - var(--mv-header-shell)) / 2));
}
.mv-products__head {
  width: 100%;
  padding-inline: var(--mv-white-pad);
  margin-bottom: var(--mv-space-l);
  text-align: start;
}
.mv-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;
}
/* ---- The carousel runs on EVERY breakpoint: square light slides, white
   letterbox to match the renders, dark titles (the component's light
   defaults + goo/glass controls). ---- */
.mv-products .sonic-slider--shop { --ss-slide-aspect: 1 / 1; }
@media (min-width: 768px) {
  .mv-products .sonic-slider--shop { --ss-slide-w: 30%; }
}
.mv-products .sonic-slider--shop .sonic-slider__slide { background: #ffffff; border: 1px solid #e3e3e6; }
.mv-products .sonic-slider--shop .sonic-slider__img { background: #ffffff; object-fit: contain; }
.mv-products .sonic-slider__card-title { color: #1a1a1a; }
/* The model names are Latin — in THIS carousel only, the captions stay
   LEFT-aligned (LTR) in Hebrew too. */
.mv-products .sonic-slider__card-head,
[dir="rtl"] .mv-products .sonic-slider__card-head {
  direction: ltr;
  text-align: left !important;
  padding-inline: clamp(1.1rem, 4vw, 1.8rem);
  top: clamp(0.9rem, 3.5vw, 1.5rem);
}
[dir="rtl"] .mv-products .sonic-slider__card-title {
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   7d. S10 — OUTRO (#f5f5f7 band): Make it right | For dealers, then
   Contact us with the WhatsApp chip — the Storm outro, mv-scoped.
   -------------------------------------------------------------------------- */
.mv-outro {
  background: #f5f5f7;
  padding-block: var(--mv-space-xl) clamp(7rem, 15vh, 11rem);
  --mv-white-pad: max(16px, calc((100% - var(--mv-header-shell)) / 2));
}
.mv-wtitle--sm {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
}
@media (max-width: 767px) {
  .mv-outro .mv-wtitle--sm { font-size: 1.35rem; }
}
.mv-outro__inner {
  width: 100%;
  text-align: start;
  /* A touch more side padding than the rest of the page. */
  padding-inline: calc(var(--mv-white-pad) + 10px);
}
.mv-outro__cols { display: grid; gap: var(--mv-space-l); }
@media (min-width: 768px) {
  .mv-outro__cols { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
}
/* Light divider UNDER each top block (between the Make it right / For
   dealers row and Contact us) — restored: the "dark top border" complaint
   was the sub-pixel seam above the section, not these. */
.mv-outro__cols .mv-outro__block {
  padding-bottom: var(--mv-space-l);
  border-bottom: 1px solid #e3e3e6;
}
.mv-outro__block--contact { margin-top: var(--mv-space-xl); }
.mv-outro__text {
  margin: var(--mv-space-xs) 0 0;
  max-width: 58ch;
  color: #98989d;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.1rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.mv-outro__contact {
  list-style: none;
  margin: var(--mv-space-xs) 0 0;
  padding: 0;
  color: #98989d;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.1rem);
  line-height: 1.9;
}
/* Round WhatsApp chip above the phone number. */
#moovia-page .mv-outro__contact .mv-outro__wa-btn,
#moovia-page .mv-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;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
#moovia-page .mv-outro__contact .mv-outro__wa-btn:hover  { background: #1fb85a; transform: translateY(-2px); }
#moovia-page .mv-outro__contact .mv-outro__wa-btn:active { transform: translateY(0); }
.mv-outro__wa-btn svg { width: 20px; height: 20px; }
/* !important + the page id: the theme/Elementor kit paints links white,
   which would make these invisible on the light band. */
#moovia-page .mv-outro__contact a {
  color: #0066ff !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}
#moovia-page .mv-outro__contact a:hover { color: #0052d6 !important; }

/* --------------------------------------------------------------------------
   7e. STICKY BUY BUTTON — the Valerion design verbatim: fixed bottom-center
   blue pill, blur+fade+rise reveal. initBuyButton() toggles .is-visible
   (in with the logo moment, out just before "Make it yours").
   -------------------------------------------------------------------------- */
.mv-buy {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 2.2rem;
  background: #0065ff;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border-radius: 50px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  will-change: opacity, filter, transform;
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
.mv-buy.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.mv-buy:hover {
  background: #0052d6;
  transform: translateX(-50%) translateY(0) scale(1.05);
}
.mv-buy:active {
  transform: translateX(-50%) translateY(0) scale(0.97);
}
@media (max-width: 767px) {
  .mv-buy {
    font-size: 0.9rem;
    padding: 0.65rem 1.8rem;
  }
}
html[dir="rtl"] .mv-buy { letter-spacing: 0; }

/* --------------------------------------------------------------------------
   8. HEADER LIGHT SKIN — the proven Storm Audio recipe (see memory:
   feedback_header_light_swap; NEVER server-render header template 5861 — it
   fatals). initHeaderSwap() in js/moovia-scroll.js toggles body.mv-header-light
   while a [data-mv-header="light"] section sits under the header, tags the
   glass pill with .mv-hdr-pill, flips svg ink inline, swaps the logo, and sets
   the hamburger plugin's data-theme.
   -------------------------------------------------------------------------- */
[data-elementor-type="header"] a { transition: color 0.35s ease; }
body.mv-header-light [data-elementor-type="header"] a,
body.mv-header-light [data-elementor-type="header"] .elementor-item,
body.mv-header-light [data-elementor-type="header"] .elementor-nav-menu a {
  color: rgba(49, 49, 49, 0.97) !important;
}
body.mv-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. */
body.mv-header-light [data-elementor-type="header"] .dub-lang-current,
body.mv-header-light [data-elementor-type="header"] .dub-lang-toggle,
body.mv-header-light [data-elementor-type="header"] .dub-user-toggle,
body.mv-header-light [data-elementor-type="header"] .dub-cart-toggle {
  color: rgba(49, 49, 49, 0.97) !important;
}
body.mv-header-light [data-elementor-type="header"] .dub-input {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1d1d1f !important;
}
/* The glass pill (tagged .mv-hdr-pill by JS). Elementor's scrolled state uses
   !important — the doubled class + !important here wins. */
[data-elementor-type="header"] .mv-hdr-pill { transition: background-color 0.35s ease, border-color 0.35s ease; }
body.mv-header-light [data-elementor-type="header"] .mv-hdr-pill.mv-hdr-pill {
  background-color: rgba(255, 255, 255, 0.47) !important;
  border: 1px solid rgba(0, 0, 0, 0.11) !important;
}
/* Icon svgs that carry stroke/fill ATTRIBUTES; computed-white ones are flipped
   inline by the JS. */
body.mv-header-light [data-elementor-type="header"] svg [stroke],
body.mv-header-light [data-elementor-type="header"] svg[stroke] {
  stroke: rgb(26, 26, 26) !important;
}
body.mv-header-light [data-elementor-type="header"] svg [fill="white"],
body.mv-header-light [data-elementor-type="header"] svg [fill="#fff"],
body.mv-header-light [data-elementor-type="header"] svg [fill="#ffffff"] {
  fill: rgb(26, 26, 26) !important;
}
/* Mobile cart (FunnelKit shortcode) — white icon -> black ink; the count badge
   keeps its own red/white (scoped to the svg only). */
body.mv-header-light [data-elementor-type="header"] .fkcart-shortcode-container svg,
body.mv-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 styles via `#fkcart-modal ... !important`, so these
   must use the ID too. */
body.mv-header-light #fkcart-modal {
  --fkcart-primary-text-color: rgb(26, 26, 26);
}
body.mv-header-light #fkcart-modal .fkcart-preview-ui {
  background: rgba(250, 248, 255, 0.85) !important;
}
body.mv-header-light #fkcart-modal .fkcart-title,
body.mv-header-light #fkcart-modal .fkcart-zero-state-title {
  color: rgb(26, 26, 26) !important;
}
body.mv-header-light #fkcart-modal .fkcart-zero-state-text {
  color: rgb(99, 99, 102) !important;
}
body.mv-header-light #fkcart-modal .fkcart-modal-close,
body.mv-header-light #fkcart-modal .fkcart-modal-close svg,
body.mv-header-light #fkcart-modal .fkcart-modal-close svg * {
  color: rgb(26, 26, 26) !important;
  fill: rgb(26, 26, 26) !important;
}