/* =========================================================================
   Mushy Dates – cinematic scroll microsite
   Base rules = static normal-flow page (no JS, reduced motion).
   `.is-cinematic` rules = sticky 2.5D stage driven by main.js.

   Z-INDEX BANDS
     0–9    world layers (sky 0, far 1, mid 2, hero 3, front 4, stickers 5–6)
     10–19  reserved for cinematic framing (unused)
     20–29  narrative copy (intro 20, panels 21, flavour film 22)
     30–39  navigation and controls (header 30, enquiry bar 31)
     40+    overlays (loader 40, skip link 41, review toggle 42)
   ========================================================================= */

@font-face {
  font-family: "Biscuit Glitch";
  src: url("assets/fonts/Biscuit-Glitch.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/Fredoka-VariableFont_wdthwght.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  /* Brand colour (computed styles on mushydates.se) */
  --accent: #77d8df;          /* page / sky */
  --primary: #8dca49;         /* green */
  --primary-light: #daeec4;
  --ink: #113036;             /* --primary-dark */
  --secondary: #ffbb45;
  --paper: #fafafa;
  --black: #000;
  --background: var(--accent);

  /* Flavour accents sampled from the pouch renders */
  --flavour-jordgubb: #eb5556;
  --flavour-kardemumma: #aeaa75;
  --flavour-kakao: #5a382f;
  --flavour-ingefara: #f4d79d;
  /* dried fruit: sampled from the captain's packaging mockups (fruit art on each pouch) */
  --dried-mango: #f5a03a;
  --dried-spicy: #e4583a;
  --dried-jordgubb: #ea6a8e;
  --dried-apple: #b98a55;
  --dried-ananas: #f3d23c;
  --flavour-kokos: #2b8ec3;
  --flavour-paprika: #a45231;

  /* Type */
  --font-display: "Biscuit Glitch", "Fredoka", system-ui, sans-serif;
  --font-ui: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Type scale: five roles, nothing in between. Big display/heading against small, sparse copy.
     display  Biscuit Glitch   hero title
     heading  Biscuit Glitch   section headings, scene titles (scales with width and height)
     title    Fredoka 600/700  card titles, the rivlapp claim, scene lines, quote
     body     Fredoka 500      body copy, buttons, hooks (16px floor)
     small    Fredoka 500/700  metadata, card blurbs, ingredients; uppercase labels (--label-*) */
  --type-display: clamp(3rem, 0.5rem + 3.2vw + 3.2vh, 5.75rem);
  --type-heading: clamp(2rem, 1rem + 2.2vw + 1.2vh, 4.25rem);
  --type-title: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  --type-body: 1rem;
  --type-small: 0.875rem;
  --label-tracking: 0.06em;

  /* Space (4/8 rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gutter: clamp(20px, 4.5vw, 64px);

  /* Shape + depth (the brand's hard offset shadows) */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-pill: 999px;
  --shadow-hard: 4px 4px 0 0 var(--black);
  --shadow-hard-s: 2px 2px 0 0 var(--black);
  --shadow-paper: drop-shadow(0 1px 3px color-mix(in srgb, #111 60%, transparent));  /* paper layers only, never on text/images */
  --border: 2px solid var(--black);

  /* Motion tokens */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* motion spec: scene + hero arrivals */
  --ease-in-quick: cubic-bezier(0.4, 0, 1, 1);      /* motion spec: quick exits */
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-reveal: 480ms;

  --header-h: 76px;
  /* Copy never starts inside this band: header + a clear gap (the torn-paper filter
     displaces card edges by up to ~20px, so paper panels add --tear on top). */
  --header-clear: calc(var(--header-h) + var(--safe-top) + clamp(20px, 3.5svh, 36px));
  --tear: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 100%; /* user setting is the base */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
  html.is-cinematic:focus-within { scroll-behavior: auto; } /* engine owns cinematic jumps */
}
body { margin: 0; font-size: var(--type-body); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--paper);
  border-radius: 6px;
}

.skip-link {
  position: fixed; z-index: 41; inset-inline-start: var(--space-4); top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--paper); border: var(--border); border-radius: var(--radius-s);
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Buttons (brand: 2px black border, hard 4px shadow) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-5);
  border: var(--border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-hard);
  font: 600 var(--type-body)/1 var(--font-ui);
  color: var(--black); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}
.btn:active { transform: translate(2px, 2px) scale(0.98); box-shadow: var(--shadow-hard-s); }
.btn--paper { background: var(--paper); }
.btn--green { background: var(--primary); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--black); }
  .btn:active { transform: translate(2px, 2px) scale(0.98); box-shadow: var(--shadow-hard-s); }
}

/* ---------- Rivlapp: THE one device (concept §3.2) ----------
   A torn paper strip: paper, ink Fredoka 700, hard shadow, tilted. One per frame, one claim.
   The torn edge is a clip-path, which would cut a box-shadow, so the shadow is a drop-shadow on
   the wrapper. */
.rivlapp-wrap { display: inline-block; filter: drop-shadow(4px 4px 0 var(--black)); rotate: var(--tilt, -4deg); }
.rivlapp {
  display: inline-block; padding: 12px 26px 13px;
  background: var(--paper); color: var(--ink);
  font: 700 var(--type-title)/1.1 var(--font-ui); letter-spacing: 0.005em; white-space: nowrap;
  clip-path: polygon(0% 6%, 2.5% 0%, 97% 3%, 100% 0%, 98.5% 22%, 100% 40%, 97.8% 58%, 100% 78%, 98% 100%, 3% 96%, 0% 100%, 1.6% 80%, 0% 62%, 2% 44%, 0% 25%);
}

/* ---------- Header ---------- */
.site-header {
  position: absolute; z-index: 30; inset: 0 0 auto 0; /* static mode: scrolls away, never covers copy */
  height: calc(var(--header-h) + var(--safe-top));
  padding: var(--safe-top) var(--gutter) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.brand { justify-self: start; border-radius: 8px; }
.brand img { width: clamp(96px, 9vw, 124px); height: auto; }
.site-nav ul {
  display: flex; gap: var(--space-1);
  padding: var(--space-1);
  background: var(--ink); border-radius: var(--radius-m);
}
.site-nav a {
  display: flex; align-items: center; padding: var(--space-2) var(--space-4); min-height: 44px;
  color: var(--paper); text-decoration: none; font-weight: 500; border-radius: var(--radius-s);
  transition: color var(--dur-ui) ease;
}
.site-nav a[aria-current="true"] { color: var(--primary); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--primary); } }
.site-nav a:focus-visible { outline-color: var(--primary); box-shadow: none; }
.site-menu { display: flex; align-items: center; gap: var(--space-3); }
.header-tools { justify-self: end; display: flex; align-items: center; gap: var(--space-3); }
/* phone menu button (hidden on wider screens, where the menu is the inline bar) */
.menu-toggle {
  display: none; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: var(--ink); border: 0; border-radius: var(--radius-m); color: var(--paper);
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; } .menu-toggle__bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.menu-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--paper); }
.header-cta { min-height: 44px; }
/* language switcher: a real link per language (?lang=…); main.js swaps in place */
.lang-switch { display: flex; padding: 2px; background: var(--ink); border-radius: var(--radius-pill); }
.lang-switch a {
  display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0 var(--space-2);
  font: 700 var(--type-small)/1 var(--font-ui); letter-spacing: var(--label-tracking); color: var(--paper);
  text-decoration: none; border-radius: var(--radius-pill);
}
.lang-switch a[aria-current="true"] { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .lang-switch a:not([aria-current]):hover { color: var(--primary); } }
.lang-switch a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; box-shadow: none; }
/* a non-default language: the copy is swapped before the page shows (head script + main.js I18N) */
.is-i18n-pending body { visibility: hidden; }

.is-cinematic .site-header { position: fixed; transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, translate 250ms var(--ease-out); }
/* hidden while scrolling down (main.js HEADER); the film nav rides along so no empty band is left */
.is-cinematic.is-header-hidden .site-header { translate: 0 calc(-100% - 8px); box-shadow: none; }
.is-cinematic.is-header-hidden .film__head { translate: 0 calc(-1 * (var(--header-h) + var(--safe-top))); }
@media (prefers-reduced-motion: reduce) { .site-header, .film__head { transition: none !important; } }
/* Once the stage releases, the header gets a solid bar so it never sits on section copy. */
.is-cinematic .site-header.is-solid { background: var(--accent); box-shadow: 0 2px 0 0 var(--ink); }

/* Phones and tablets (below 960 px the inline nav no longer fits beside the logo and the tools): the logo keeps
   its size; nav + language fold into a menu panel under the bar, the B2B link stays in the bar next to the menu button. */
@media (max-width: 959px) {
  :root { --header-h: 68px; }
  .site-header { grid-template-columns: 1fr auto; gap: var(--space-2); }
  .brand img { width: 112px; }
  .menu-toggle { display: grid; }
  .header-cta { padding: 0 var(--space-3); font-size: var(--type-small); }
  .site-menu {
    position: absolute; top: calc(100% + var(--space-1)); inset-inline: var(--gutter);
    display: none; flex-direction: column; align-items: stretch; gap: var(--space-3);
    padding: var(--space-3); background: var(--ink); border-radius: var(--radius-m); box-shadow: var(--shadow-hard);
  }
  .site-header.is-menu-open .site-menu { display: flex; }
  .site-nav ul { flex-direction: column; padding: 0; gap: 0; }
  .site-nav a { min-height: 48px; padding: 0 var(--space-3); font-size: var(--type-title); font-weight: 600; }
  .lang-switch { align-self: start; border: 2px solid var(--paper); }
  .lang-switch a { min-width: 48px; min-height: 40px; }
}
@media (max-width: 359px) { .brand img { width: 96px; } .header-cta { padding: 0 var(--space-2); } }

/* ========================================================================
   WORLD (shared by both modes). Layers are full-stage boxes so every
   transform-origin refers to the same focal point on screen.
   ======================================================================== */
/* scene geometry, retuned per breakpoint below; on the stage (not the world) so the HTML panels that sit
   against the pouch group (the Populära smaker caption) share the same lines */
.cinematic-stage {
  --mid-line: 70%;                 /* ground line the pouches stand on */
  /* capped so the 2709 px trio is never upscaled on a 2x screen, even at full push-in */
  --hero-h: min(43svh, 40vw, 600px);
  --hero-sink: 9svh;
  --hero-shift-x: 23vw;
  --hero-shift-y: 0svh;
  --hero-push: 0.3;
  --focal-y: 74%;
}
.world {
  /* timeline outputs (0..1) written by main.js; static mode keeps them at 0 */
  --push: 0; --split: 0; --fgout: 0;
  --px: 0; --py: 0;

  position: relative;
  height: 100vh; height: 100svh; min-height: 520px;
  overflow: hidden; overflow: clip;
  background: var(--accent);
}
.layer { position: absolute; inset: 0; transform-origin: 50% var(--focal-y); pointer-events: none; }
/* Pouch shortcuts (site.js SHELF LANDING): a pouch in the world or the film ([data-shelf]) takes a tap / click to its
   spot on the shelf. The plates, stickers and logos let it through; the visible buttons stay the keyboard path. */
[data-shelf] { pointer-events: auto; cursor: pointer; }
.hero-claim, .hero-logo, .fscene__claim { pointer-events: none; }
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .world.is-split [data-shelf] { pointer-events: none; }   /* faded out under the story card */
}
/* Compositor hint only where the scroll film actually moves these (not in static mode). */
.is-cinematic :is(.layer, .hero-group) { will-change: transform; }
/* Hero set swap (SCENE.heroSets in main.js picks the set; the timing below is the motion):
   out: tilt + sink behind the front hill, 350 ms ease-in, 70 ms stagger (l, r, centre);
   in:  rise from behind the hill with a small overshoot, a light squash on landing and a
        settling rotation, 700 ms expo-out, same stagger, centre last. */
.is-cinematic .hero-set { visibility: hidden; }
.is-cinematic .hero-set:is(.is-active, .is-leaving) { visibility: visible; }
.is-cinematic .hero-set.is-leaving .hero-pouch__px {
  transform: translateY(118%) rotate(var(--sink-rot));
  transition: transform 350ms cubic-bezier(0.55, 0, 1, 0.45) calc(var(--i) * 70ms);
}
.is-cinematic .hero-set.is-active.is-swapping .hero-pouch__px {
  animation: hero-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(180ms + var(--i) * 70ms) both;
}
@keyframes hero-rise {
  0%   { transform: translateY(118%) rotate(var(--sink-rot)); }
  55%  { transform: translateY(-6%) rotate(calc(var(--sink-rot) * -0.4)); }
  78%  { transform: translateY(0) scale(1.03, 0.965) rotate(calc(var(--sink-rot) * 0.15)); }
  100% { transform: none; }
}
/* the logo and the claim of the Populära set slap on after the pouches have risen: --swap-t0 is when the rise
   starts (180 ms on a swap, 560 ms on the first arrival) */
.hero-set { --swap-t0: 180ms; }
.is-cinematic.is-entering .hero-set.is-active .hero-pouch__px { animation: hero-rise 750ms var(--ease-out-expo) calc(560ms + var(--i) * 70ms) both; }
.is-cinematic.is-entering.is-entered .hero-set .hero-pouch__px { animation-duration: 0ms; animation-delay: 0ms; }
.is-entering .hero-set { --swap-t0: 560ms; }
.is-cinematic .hero-set.is-active.is-swapping .hero-logo,
.is-cinematic.is-entering .hero-set.is-active .hero-logo { animation: f-slap 600ms var(--ease-out-expo) calc(var(--swap-t0) + 420ms) both; }
.is-cinematic .hero-set.is-leaving .hero-logo { opacity: 0; transition: opacity 250ms var(--ease-in-quick); }
.is-cinematic .hero-set.is-active.is-swapping .hero-claim,
.is-cinematic.is-entering .hero-set.is-active .hero-claim { animation: f-slap 520ms var(--ease-out-expo) calc(var(--swap-t0) + 600ms) both; }
.is-cinematic.is-entering.is-entered .hero-set :is(.hero-claim, .hero-logo) { animation-duration: 0ms; animation-delay: 0ms; }
/* reduced motion (if the mode switches live): an instant swap */
@media (prefers-reduced-motion: reduce) {
  .is-cinematic .hero-set :is(.hero-pouch__px, .hero-claim, .hero-logo) { animation: none !important; transition: none !important; }
  .is-cinematic .hero-set.is-leaving { visibility: hidden; }
}
.layer img { user-select: none; -webkit-user-drag: none; }

/* Background plates: all four layers of a set share one 3840x1648 canvas whose central
   16:9 part (2930x1648) is the design viewport, so each plate is sized to cover the stage
   with that part and anchored to the bottom; ~15% per side is parallax bleed. +16px of
   headroom keeps the pointer parallax from showing a sliver above the sky. */
.plate {
  position: absolute; left: 50%; bottom: 0;
  height: calc(max(100%, 56.25vw) + 16px); aspect-ratio: 3840 / 1648;
  translate: -50% 0;
}
.plate__img { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: 3840 / 1648; }

.layer--sky { z-index: 0; transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 4px), 0) scale(calc(1.02 + var(--push) * 0.03 - var(--fgout) * 0.02)); }
.layer--far {
  z-index: 1;
  transform: translate3d(calc(var(--px) * 4px), calc(var(--py) * 3px), 0)
             scale(calc(1 + var(--push) * 0.06 - var(--fgout) * 0.045));
}
.layer--mid {
  z-index: 2;
  transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px), 0)
             scale(calc(1 + var(--push) * 0.1 - var(--fgout) * 0.07));
}
.layer--front {
  z-index: 4;
  transform: translate3d(calc(var(--px) * -9px), calc(var(--py) * -5px), 0)
             scale(calc(1 + var(--push) * 0.14 - var(--fgout) * 0.1));
}

.layer--hero { z-index: 3; }
.hero-group {
  position: absolute; left: 50%;
  top: calc(var(--mid-line) + var(--hero-sink));
  height: var(--hero-h); aspect-ratio: 2709 / 1777;
  translate: -50% -100%;
  transform-origin: 50% 96%;
  transform:
    translate3d(
      calc(var(--split) * (1 - var(--fgout)) * var(--hero-shift-x) * var(--dir-x, 1) + var(--px) * -12px),
      calc(var(--split) * (1 - var(--fgout)) * var(--hero-shift-y) + var(--py) * -6px),
      0)
    scale(calc(1 + var(--push) * var(--hero-push) - var(--fgout) * (var(--hero-push) - 0.05)));
  /* where the story card covers the group (phones, portrait tablets) it fades out under the card, scrubbed with the
     same split, so no pouch label sits half under the card (interplay audit) */
  opacity: calc(1 - var(--split) * (1 - var(--fgout)) * var(--story-hide, 0));
}
/* Hero pouch sets, one per beat (hero / Vår historia / Populära Smaker). The group above carries
   push-in + parallax; each pouch's swap choreography lives on .hero-pouch (inner wrapper). */
.hero-set { position: absolute; inset: 0; clip-path: inset(-100% -60% -14% -60%); } /* ground line: sinking pouches vanish behind the hill */
.hero-pouch {
  --sink-rot: 0deg;
  position: absolute; bottom: 0; height: 86%; aspect-ratio: 1200 / 1713;
  translate: -50% 0; transform-origin: 50% 100%;
}
.hero-pouch__px { height: 100%; transform-origin: 50% 100%; }
.hero-pouch img { display: block; width: 100%; height: 100%; }
.hero-pouch--l { left: 24%; z-index: 1; --sink-rot: -9deg; rotate: -3deg; }
.hero-pouch--r { left: 76%; z-index: 1; --sink-rot: 9deg; rotate: 3deg; }
.hero-pouch--c { left: 50%; z-index: 2; height: 100%; --sink-rot: 5deg; }
/* dried fronts (~560 × 850 px; their own aspect ratio inline): never above 596 px tall, in front of the dates */
.hero-pouch--dried { height: min(92%, 596px); z-index: 3; }
/* Populära Smaker: five pouches shoulder to shoulder, outer pair furthest back */
/* a pyramid: inner pair 80 %, outer pair 76 %, so the "Börja här!" sticker on the Mango's top edge stays >= 16 px
   clear of the neighbouring tops (interplay audit: 7 px at 84 %) */
.hero-set--five .hero-pouch { height: 80%; }
.hero-set--five :is(.hero-pouch--l2, .hero-pouch--r2) { height: 76%; }
.hero-set--five .hero-pouch--dried { height: min(94%, 596px); }
.hero-set--five .hero-pouch--l { left: 30%; }
.hero-set--five .hero-pouch--r { left: 70%; }
.hero-pouch--l2 { left: 10%; z-index: 0; --sink-rot: -12deg; rotate: -6deg; }
.hero-pouch--r2 { left: 90%; z-index: 0; --sink-rot: 12deg; rotate: 6deg; }
/* Populära Smaker: the frame's one claim, standing on the centre pouch's top edge (interplay audit: on its shoulder it
   covered the dried Mango's badge and, on phones, the right-hand pouches' logos) */
.hero-claim { position: absolute; z-index: 4; left: 54%; top: 10%; translate: -50% -100%; margin: 0; --tilt: 6deg; }
/* Populära smaker: the Mushy logo (crisp SVG) heads the line-up, above the pouch tops, scaled with the group */
.hero-logo {
  position: absolute; z-index: 4; left: 50%; bottom: 104%; height: 34%; width: auto; max-width: none;
  translate: -50% 0; rotate: -3deg; filter: drop-shadow(6px 7px 0 rgb(0 0 0 / 0.22));
}
.hero-claim .rivlapp { font-size: var(--type-body); }
@media (max-width: 767px) {
  .hero-claim .rivlapp { font-size: 13px; padding: 7px 14px 8px; }
  .hero-logo { bottom: 110%; }
}
/* static mode: the first set stands, the rest stay hidden */
.hero-set:not([data-hero-set="a"]) { visibility: hidden; }

.loader { display: none; }

/* ========================================================================
   STATIC MODE (default): hero, then normal-flow story + film blocks.
   ======================================================================== */
.cinematic-stage { position: relative; background: var(--primary); }
.intro {
  position: absolute; z-index: 20; inset: 0 0 auto 0;
  padding: var(--header-clear) var(--gutter) 0;
  display: grid; justify-items: center; gap: var(--space-3); text-align: center;
}
.intro__title { font-size: var(--type-display); color: var(--ink); }
.intro__title .w-light { color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.intro__chip { margin-top: -6px; --tilt: -2deg; } /* the hero's rivlapp, tucked just under the title's last line */
.intro__chip .rivlapp { font-size: var(--type-body); padding: 10px 22px 11px; }
.intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); }

.panel { position: relative; z-index: 21; }
.panel h2 { font-size: var(--type-heading); }
.panel p + p { margin-top: var(--space-3); }

/* Vår historia (captain, inbox 043: no card): the copy is set straight on the paper-collage sky, ink on the sky colour,
   and only the headline sits on a torn black strip. In the film a soft scrim of the sky colour (.panel__scrim, below)
   keeps AA where the copy reaches the hills; the static page sets the section on the sky colour itself. */
.panel--a { padding: var(--space-8) var(--gutter); background: var(--accent); color: var(--ink); }
.panel__scrim { display: none; }
.panel__body { position: relative; z-index: 1; max-width: 34rem; margin: 0 auto; }
.panel--a h2 {
  display: inline-block; margin: var(--space-2) 0 var(--space-3);
  background: var(--black); color: var(--paper); padding: 8px 24px 12px; rotate: -3deg;
  clip-path: polygon(0% 8%, 3% 0%, 96% 4%, 100% 0%, 98.6% 26%, 100% 48%, 98% 70%, 100% 100%, 4% 95%, 0% 100%, 1.4% 74%, 0% 50%, 1.8% 28%);
}
.panel__kicker {
  display: inline-block; margin-bottom: var(--space-2);
  background: var(--secondary); padding: 2px var(--space-3); border-radius: var(--radius-s); rotate: -2deg;
  font: 700 var(--type-small)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: var(--label-tracking);
}
.panel__quote { font-family: var(--font-display); font-size: calc(var(--type-title) * 1.25); line-height: 1.15; margin: var(--space-2) 0 var(--space-4); color: var(--ink); }
/* the brand's three values: a row of three, icon over its words (one column on narrow screens) */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.values li { display: grid; gap: var(--space-2); align-content: start; font-size: var(--type-small); line-height: 1.35; }
.values img { width: 44px; height: 44px; }
.values strong { display: block; font-size: var(--type-body); font-weight: 600; }
@media (max-width: 599px) {   /* narrow: a list, icon beside its words */
  .values { grid-template-columns: 1fr; gap: var(--space-2); }
  .values li { grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: center; }
  .values img { width: 36px; height: 36px; }
}
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Flavour film: two chapters, 13 scenes ----------
   Static/reduced mode: stacked full-height colour blocks in their rest pose (= the key frames).
   Cinematic mode (below): one pinned stage, index-driven timed choreography. */
.film { position: relative; z-index: 22; display: flex; flex-direction: column; }
.film__head { order: -1; padding: var(--space-5) var(--gutter); background: var(--flavour-kardemumma); color: var(--ink); }
/* Flavour nav, SpyIt-minimal: unboxed names with a dot (dots only on phones); prev/next arrows while the track plays. */
.film__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.film__step { display: none; }
/* chapter switch (Dadlar / Torkad frukt): the flavour list of the active chapter follows it */
.film__chapters { display: flex; gap: var(--space-1); margin: 0; margin-inline-end: var(--space-3); padding: 0; padding-inline-end: var(--space-3); list-style: none; border-inline-end: 2px solid currentColor; }
.film__chapters a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2);
  color: inherit; font: 700 var(--type-body)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--label-tracking); text-decoration: none;
  white-space: nowrap;
}
.film__chapters a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.film__chapters a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; border-radius: var(--radius-s); box-shadow: none; }
/* both chapter lists share one grid cell and swap visibility: the row keeps its width, nothing shifts */
.is-cinematic .film__lists { display: grid; }
.is-cinematic .film__lists > .flavours { grid-area: 1 / 1; }
.is-cinematic .film:not([data-chapter="dadlar"]) .flavours[data-chapter="dadlar"],
.is-cinematic .film[data-chapter="dadlar"] .flavours[data-chapter="torkad"] { visibility: hidden; }
/* static mode: both lists, one per row */
.is-static .film__nav { flex-wrap: wrap; }
.flavours { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; }
.flavours a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2);
  color: inherit; font: 700 var(--type-small)/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--label-tracking); text-decoration: none;
}
.flavours__dot {
  flex: none; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%;
  transition: background-color var(--dur-ui) var(--ease-out), scale var(--dur-ui) var(--ease-out);
}
.flavours a[aria-current="true"] .flavours__dot { background: currentColor; scale: 1.2; }
.flavours a[aria-current="true"] .flavours__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .flavours a:hover .flavours__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}
.flavours a:focus-visible, .film__step:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; border-radius: var(--radius-s); box-shadow: none; }

/* ---------- Flavour scenes (concept v2 §3, captain round 5) ----------
   One mechanism per frame: the flavour's BACKDROP (its fruit along one side, calm paper elsewhere) ->
   POUCH on the calm side, next to the fruit -> ONE headline -> ONE claim on the rivlapp -> one button + one link.
   Template B = fruit left: fruit | pouch | copy. Template A = fruit right: copy | pouch | fruit. Nothing is ever
   placed on the fruit. Every length is in container units of the scene (cqw/cqh), so the cinematic stage, the static
   stacked blocks and the product-page hero render the same key frame; the geometry lives on .fscene__frame (a
   container query cannot restyle the container itself). Per scene (BACKDROPS in tools/build_site.py, measured by
   tools/scene_backdrops.py): --f = how far the fruit reaches into the backdrop (fraction of its width), --scene-bg =
   the backdrop's calm edge colour, --scene-on = the copy colour that keeps AA on it. */
.fscene {
  --c: 0;                                       /* scroll-scrubbed local progress - 0.5 (main.js) */
  container: scene / size;
  position: relative; overflow: hidden; overflow: clip;
  height: max(100vh, 600px); height: max(100svh, 600px);
  background: var(--scene-bg); color: var(--scene-on);
}
.fscene__frame {
  --top-clear: var(--space-6);                  /* cinematic: header + film nav (below) */
  --par: 0.7005;                                /* pouch width / height (1200 × 1713 renders) */
  --bw: calc(100cqh * 1672 / 941);              /* the backdrop is as tall as the frame */
  --fv: min(var(--f, 0) * var(--bw), var(--fruit-max, 26cqw));   /* the fruit band on screen: beyond it the backdrop slides outward */
  --gap: 2.5cqw;                                /* fruit -> pouch */
  --gap2: 3cqw;                                 /* pouch -> copy */
  --cw: min(34cqw, 32rem);                      /* copy column */
  --calm: calc(100cqw - var(--fv) - var(--gap) - var(--gutter));   /* the band the pouch and the copy share */
  --ph: min(78cqh, 91cqh - var(--top-clear), (var(--calm) - var(--gap2) - var(--cw)) / var(--par));  /* as big as it fits */
  --pw: calc(var(--ph) * var(--par));
  --slack: max(0px, (var(--calm) - var(--pw) - var(--gap2) - var(--cw)) / 4);   /* 1/4 of the spare width before the pouch */
  --base: clamp(var(--top-clear) + var(--ph), 53cqh + var(--ph) / 2, 91cqh);       /* the pouch's foot */
  --pt: calc(var(--base) - var(--ph));
  --pl: calc(var(--fv) + var(--gap) + var(--slack));          /* template B */
  --cl: calc(var(--pl) + var(--pw) + var(--gap2));
  position: absolute; inset: 0;
}
.fscene[data-template="a"] .fscene__frame {
  --pl: calc(100cqw - var(--fv) - var(--gap) - var(--slack) - var(--pw));
  --cl: calc(var(--pl) - var(--gap2) - var(--cw));
}

/* the backdrop: anchored at its fruit edge; the far (calm) end fades into --scene-bg, so wider frames continue the paper */
.fscene__backdrop {
  --shift: calc(var(--f, 0) * var(--bw) - var(--fv));     /* how far it slides out past the frame edge */
  position: absolute; z-index: 0; top: 0; height: 100%; width: var(--bw);
  left: calc(-1 * var(--shift)); transform-origin: var(--shift) 50%;     /* parallax scale pivots on the frame edge */
}
.fscene[data-template="a"] .fscene__backdrop { left: auto; right: calc(-1 * var(--shift)); transform-origin: calc(100% - var(--shift)) 50%; }
.fscene__bd {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 8%); mask-image: linear-gradient(to left, transparent, #000 8%);
}
.fscene[data-template="a"] .fscene__bd { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%); mask-image: linear-gradient(to right, transparent, #000 8%); }
.fscene__bd--tall { display: none; }

/* the pouch lies on the paper like the fruit: one soft shadow, light from the top left as in the backdrops */
.fscene__unit { position: absolute; z-index: 3; left: var(--pl); top: var(--pt); width: var(--pw); height: var(--ph); pointer-events: none; }
.fscene__pouch { position: absolute; inset: 0; z-index: 3; filter: drop-shadow(12px 20px 18px rgb(0 0 0 / 0.26)); }
.fscene__pouch > img { width: 100%; height: 100%; object-fit: contain; }
.fscene--soon .fscene__pouch { display: grid; place-items: center; }
.fscene--soon .soon-sign { width: 100%; }

/* copy column: on the calm paper beyond the pouch, centred on its optical centre */
.fscene__copy {
  position: absolute; z-index: 6; left: var(--cl); top: calc(var(--pt) + var(--ph) * 0.48); translate: 0 -50%;
  width: var(--cw); text-align: start;
}
.fscene__hook { font: 700 var(--type-body)/1.25 var(--font-ui); margin-bottom: var(--space-3); }
/* focus products: a small "Populär" sticker above the hook */
.fscene__popular {
  display: inline-block; margin-bottom: var(--space-2); rotate: -3deg;
  padding: 2px 10px 3px; background: var(--secondary); color: var(--ink);
  border: 2px solid var(--black); border-radius: var(--radius-s); box-shadow: var(--shadow-hard-s);
  font: 700 var(--type-small)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: var(--label-tracking);
}
.fscene__title { font: 400 min(var(--type-display), var(--cw, 100cqw) / 5.9)/0.98 var(--font-display); }
.fscene__line { font: 500 var(--type-title)/1.4 var(--font-ui); max-width: 25ch; margin-top: var(--space-5); }
.fscene__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.fscene__more {
  display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.fscene__copy :is(a, button) { pointer-events: auto; }

/* the ONE claim: the pouch's torn label, stuck to its right foot corner (interplay audit: at the top corner it ran
   into tall copy columns and the film nav; the left foot carries the date pouches' printed flavour name) */
.fscene__claim { position: absolute; z-index: 7; top: calc(var(--base) + 1cqh); left: calc(var(--pl) + var(--pw) * 1.02); translate: -100% -100%; margin: 0; --tilt: 5deg; }

/* Chapter 2 – Torkad frukt: the dried fronts are ~380 × 596 px, so the pouch never renders above its native size
   (--pouch-native, build_site.py; captain: size beats retina sharpness); it lies a little askew, mid-frame. */
.fscene--dried .fscene__frame {
  --par: 0.638;
  --ph: min(66cqh, var(--pouch-native), (var(--calm) - var(--gap2) - var(--cw)) / var(--par));
  --base: calc(52cqh + var(--ph) / 2);
}
.fscene--dried .fscene__pouch { rotate: -6deg; filter: drop-shadow(14px 22px 16px rgb(0 0 0 / 0.32)); }

/* Chapter openers: kicker + chapter title, the chapter's pouches fanned out over the film slot
   (Higgsfield chapter film: plays once, holds its final frame; the still is the slot until then). */
.fscene--opener .fscene__copy { left: 50%; top: var(--top-clear); translate: -50% 0; width: min(46rem, 92cqw); text-align: center; }
.fscene--opener .fscene__line { margin-inline: auto; max-width: 34ch; }
.fscene--opener .fscene__actions { justify-content: center; margin-top: var(--space-5); }
.fscene__film { position: absolute; inset: 0; z-index: 0; }
.fscene__film :is(video, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Cinematic: the clip's FIRST frame (an <img>) sits under the <video>; the video is revealed only once it is
   playing, on that same frame, so there is no swap; it then holds its last frame. If the clip is late, the
   first frame simply waits. Static / reduced motion / Save-Data: the clip's final frame, nothing plays. */
.fscene__film video { z-index: 1; opacity: 0; }
.can-film .fscene__film.is-playing video { opacity: 1; }
.can-film .fscene__film .fscene__still, html:not(.can-film) .fscene__film .fscene__first { display: none; }
.fscene__fan {
  --fan-h: min(40cqh, 30cqw, 596px * var(--fan-cap, 99));
  position: absolute; z-index: 3; left: 50%; bottom: 7cqh; translate: -50% 0;
  display: flex; justify-content: center; align-items: flex-end; pointer-events: none;
}
.fscene__fan img {
  height: var(--fan-h); width: auto; margin: 0 calc(var(--fan-h) * -0.12);
  rotate: calc(var(--f) * 7deg); translate: 0 calc(var(--fa) * 3cqh); transform-origin: 50% 100%;
}
.fscene[data-scene="torkad-frukt"] .fscene__fan { --fan-cap: 1; }
.fscene[data-scene="torkad-frukt"] .fscene__fan img:nth-child(3) { height: calc(var(--fan-h) * 1.08); z-index: 1; }
.fscene__fan img:nth-child(1) { z-index: 0; }

/* Phones and portrait tablets: the composition turns with the screen. The backdrop is the same photo turned a quarter
   (fruit edge on top, build_assets.py), full width; the pouch stands on the calm paper below the fruit, the copy runs
   full width below it: fruit / pouch / copy, the desktop's fruit | pouch | copy stood upright. */
/* narrower desktop frames: a shorter fruit band, so the pouch keeps its size next to the copy column */
@container scene (max-width: 1100px) {
  .fscene__frame { --fruit-max: 20cqw; }
}
/* short landscape frames: the opener's pouch fan stays clear of its CTA */
@container scene (min-width: 960px) and (max-height: 820px) {
  .fscene--opener .fscene__fan { --fan-h: min(34cqh, 30cqw, 596px * var(--fan-cap, 99)); bottom: 4cqh; }
}
@container scene (max-width: 959px) or (max-aspect-ratio: 23/20) {
  .fscene__frame {
    --bh: calc(100cqw * 1672 / 941);            /* the turned backdrop, full width */
    --fv: min(var(--f, 0) * var(--bh), var(--fruit-max-m, 22cqh));   /* the fruit band on screen: beyond it the backdrop slides up */
    /* the copy block's own height (--copy-h, measured by site.js; 296 px without JS) + its foot + 36 px, so the
       pouch's shadow (and a dried pouch's tilted corner) never falls on the hook */
    --copy-reserve: calc(var(--copy-h, 296px) + 36px + 4.5cqh + var(--safe-bottom));
    --ph: min(52cqh, 100cqh - var(--fv) - 48px - var(--copy-reserve), 84cqw / var(--par));
    --pt: calc(var(--fv) + 48px);                /* the claim sits in this gap, straddling the pouch's top edge */
    --base: calc(var(--pt) + var(--ph));
    --pl: calc(50cqw - var(--pw) / 2);
  }
  .fscene[data-template="a"] .fscene__frame { --pl: calc(50cqw - var(--pw) / 2); }
  .fscene--dried .fscene__frame { --ph: min(46cqh, var(--pouch-native), 100cqh - var(--fv) - 48px - var(--copy-reserve), 84cqw / var(--par)); }
  .fscene__backdrop, .fscene[data-template="a"] .fscene__backdrop {
    --shift: calc(var(--f, 0) * var(--bh) - var(--fv));
    left: 0; right: auto; top: calc(-1 * var(--shift)); width: 100%; height: var(--bh); transform-origin: 50% var(--shift);
  }
  .fscene__bd--wide { display: none; }
  .fscene__bd--tall, .fscene[data-template="a"] .fscene__bd--tall {
    display: block; -webkit-mask-image: linear-gradient(#000 92%, transparent); mask-image: linear-gradient(#000 92%, transparent);
  }
  .fscene[data-template] .fscene__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(4.5cqh + var(--safe-bottom)); translate: none; }
  .fscene__title { font-size: min(var(--type-display), (100cqw - 2 * var(--gutter)) / 5.9); }
  .fscene__line { font-size: var(--type-body); max-width: 34ch; margin-top: var(--space-3); }
  .fscene__hook { margin-bottom: var(--space-2); }
  .fscene__actions { margin-top: var(--space-4); }
  /* the claim straddles the pouch's top edge at its corner: under the fruit band, above the label window */
  .fscene[data-template] .fscene__claim { top: calc(var(--pt) - 34px); left: calc(var(--pl) + var(--pw) * 1.04); translate: -100% 0; --tilt: 5deg; }
  .fscene__claim .rivlapp { font-size: var(--type-body); padding: 9px 18px 10px; }
  .fscene__pouch { filter: drop-shadow(8px 14px 12px rgb(0 0 0 / 0.24)); }
  .fscene--dried .fscene__pouch { filter: drop-shadow(8px 14px 12px rgb(0 0 0 / 0.28)); }
  /* (+ the fan's own spread below its box: outer pouches sit 2.5 × 3 cqh lower and tilt ±17°) */
  .fscene--opener .fscene__fan { --fan-h: min(34cqh, 50cqw); bottom: calc(var(--copy-h, 260px) + 4.5cqh + var(--safe-bottom) + 24px + 7.5cqh + var(--fan-h) * 0.1); }
  .fscene--opener .fscene__copy { top: auto; bottom: calc(4.5cqh + var(--safe-bottom)); }
  /* the film is a top block on phones (cover would crop its pieces onto the copy); it fades into its own paper colour */
  .fscene__film { inset: 0 0 auto 0; height: 60cqh; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
  .fscene--opener .fscene__fan img { margin: 0 calc(var(--fan-h) * -0.2); }
}

/* short phones (≤ 760 px tall): fruit band 16 cqh, headline ≤ 2.4 rem, so the pouch keeps ~45 % of the width */
@container scene (max-height: 760px) and ((max-width: 959px) or (max-aspect-ratio: 23/20)) {
  .fscene__frame { --fruit-max-m: 16cqh; }
  .fscene__title { font-size: min(2.4rem, (100cqw - 2 * var(--gutter)) / 5.9); }
}

/* ---------- Arrival (concept §5.3–5.5) ----------
   One easing family, one order, settled by ≈ 1.4 s: colour (the film's background, 900 ms) →
   backdrop 0 ms (its fruit settles in from its own edge) → pouch 150 ms → copy 380–600 ms → claim slaps 840 ms.
   The rest pose IS the key frame: without JS or with reduced motion nothing moves.
   Triggers: the film's active scene (.is-active, --dir mirrors the paths when scrolling up),
   static blocks and the product-page hero on first view (.is-play, site.js). */
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__pouch { animation: f-pouch 1000ms var(--ease-out-expo) 150ms both; }
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__copy > * { animation: f-copy 600ms var(--ease-out-expo) 380ms both; }
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__copy > :nth-child(2) { animation-delay: 440ms; }
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__copy > :nth-child(3) { animation-delay: 520ms; }
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__copy > :nth-child(4) { animation-delay: 600ms; }
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__claim { animation: f-slap 520ms var(--ease-out-expo) 840ms both; }
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__backdrop { animation: f-settle 1100ms var(--ease-out-expo) both; }
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play)[data-template="a"] .fscene__backdrop { --from: 1; }
/* chapter 2: the pouch drops onto the table */
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play).fscene--dried .fscene__pouch { animation: f-drop 750ms var(--ease-out-expo) 120ms both; }
/* openers: the film's first frame is on screen at once (no fade over the bare field); the chapter's
   pouches spread from a stack */
:is(.is-cinematic .fscene.is-active, .motion-ok .fscene.is-play) .fscene__fan img { animation: f-fan 700ms var(--ease-out-expo) calc(200ms + var(--n, 0) * 40ms) both; }

@keyframes f-pouch { from { transform: translateY(calc(var(--dir, 1) * 24cqh)) scale(0.9) rotate(calc(var(--dir, 1) * -5deg)); opacity: 0; } 35% { opacity: 1; } }
@keyframes f-copy { from { transform: translateY(calc(var(--dir, 1) * 24px)); opacity: 0; } }
@keyframes f-slap { 0% { transform: scale(1.7) rotate(-16deg); opacity: 0; } 55% { transform: scale(0.94) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@keyframes f-fade { from { opacity: 0; } }
/* the backdrop's fruit slides in from its own frame edge (--from: -1 left, 1 right) while the camera settles */
@keyframes f-settle { from { transform: translateX(calc(var(--from, -1) * 6cqw)) scale(1.06); opacity: 0; } }
@keyframes f-drop { from { transform: scale(1.18) translateY(-3cqh); opacity: 0; } 30% { opacity: 1; } }
@keyframes f-fan { from { rotate: 0deg; translate: 0 0; opacity: 0; } 30% { opacity: 1; } }
/* Exit (film only, 250–450 ms ease-in): the pouch lifts away, everything else fades under the next scene's colour. */
.is-cinematic .fscene.is-leaving .fscene__pouch { animation: f-pouch-out 450ms var(--ease-in-quick) both; }
.is-cinematic .fscene.is-leaving :is(.fscene__copy, .fscene__claim, .fscene__fan, .fscene__film, .fscene__backdrop) { animation: f-fade-out 250ms var(--ease-in-quick) both; }
/* fast-scroll guard: skimming never leaves half-built scenes */
.is-cinematic .film.is-fast .fscene :is(.fscene__pouch, .fscene__copy > *, .fscene__claim, .fscene__backdrop, .fscene__film, .fscene__fan img) {
  animation-duration: 280ms !important; animation-delay: 0ms !important;
}
@keyframes f-pouch-out { to { transform: translateY(calc(var(--dir, 1) * -14cqh)) scale(0.92); opacity: 0; } }
@keyframes f-fade-out { to { opacity: 0; } }

/* static blocks + product hero: hidden until their first view starts the arrival (JS only) */
:is(.is-static, .is-page).motion-ok .fscene:not(.is-play) :is(.fscene__unit, .fscene__copy, .fscene__claim, .fscene__fan, .fscene__backdrop) { opacity: 0; }

/* short desktops: the trio sits a little lower so the hero CTAs stay clear of it */
@media (min-width: 768px) and (max-height: 800px) and (min-aspect-ratio: 4/5) { .cinematic-stage { --hero-sink: 13svh; --hero-h: min(40svh, 50vw, 600px); } }
/* tablets / small laptops: chapter switch + flavour names would wrap, so the names become dots */
@media (max-width: 1180px) {
  .is-cinematic .flavours { flex-wrap: nowrap; gap: 0; }
  .is-cinematic .flavours a { min-width: 32px; justify-content: center; padding: 0; }
  .is-cinematic .flavours__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* narrow phones (< 380 px): chapter switch + dots still on one row */
@media (max-width: 379px) {
  .is-cinematic .film__chapters { margin-inline-end: var(--space-1); padding-inline-end: var(--space-1); }
  .is-cinematic .film__chapters a { padding: 0 3px; letter-spacing: 0.02em; font-size: 13px; }
  .is-cinematic .flavours a { min-width: 24px; }
  .intro__actions .btn { padding-inline: var(--space-3); }   /* both CTAs stay on one row */
}
/* Panorama caption: the pouches peeking over the hill are the "popular flavours". */
.panel--pop { text-align: center; padding: var(--space-7) var(--gutter); background: var(--primary); }
.panel--pop h2 { font-size: var(--type-heading); }
.panel--pop p { font-size: var(--type-title); margin-top: var(--space-2); }

/* ---------- Sortiment: the range on a real shelf (normal flow after the stage) ----------
   Desktop: the v2 shelf photo (16:9) is the wall; pouches stand on its two planks and each
   product's shelf talker (name + "Lägg i förfrågan") hangs under the plank. Plank geometry is in
   cqw of the shelf width (measured on assets/sortiment/shelf-*.webp):
     top plank    41.7 %–45.4 % of the photo height = 23.45–25.54 cqw, free x 19–94.5 %
     bottom plank 85.3 %–90 %                       = 47.98–50.6 cqw, free x 5.5–76 %
   Phones / portrait: CSS tiles + CSS planks, three pouches per plank. */
.sortiment {
  --tile: #94cad0; --wood: #dcbb8c; --wood-edge: #b98d5a;
  position: relative; z-index: 1; background: var(--tile); color: var(--ink);
  padding-bottom: calc(var(--space-7) + var(--safe-bottom));
  scroll-margin-top: calc(var(--header-h) + var(--safe-top));
}
/* torn paper top edge: the shelf wall tears up over the stage's last frame */
.sortiment::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 22px;
  background: var(--tile);
  clip-path: polygon(0% 100%, 0.0% 49%, 1.5% 74%, 2.8% 65%, 4.8% 29%, 7.0% 28%, 9.1% 30%, 10.4% 57%, 13.3% 34%, 14.9% 72%, 18.0% 68%, 20.0% 98%, 21.3% 89%, 23.1% 36%, 24.5% 48%, 27.4% 39%, 29.7% 73%, 31.7% 66%, 33.0% 29%, 34.6% 76%, 36.7% 49%, 39.0% 59%, 40.8% 85%, 43.4% 43%, 45.8% 64%, 48.7% 80%, 50.5% 99%, 52.0% 56%, 54.7% 36%, 56.8% 28%, 59.4% 82%, 61.7% 91%, 63.6% 77%, 65.9% 68%, 68.1% 88%, 71.1% 61%, 73.7% 30%, 76.3% 74%, 79.5% 87%, 81.2% 54%, 83.8% 27%, 85.9% 38%, 87.3% 29%, 90.1% 35%, 91.8% 54%, 94.7% 31%, 96.8% 66%, 99.8% 86%, 100% 40%, 100% 100%);
}
.sortiment__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-6);
  padding: var(--space-8) var(--gutter) var(--space-5);
}
.sortiment__head h2 { font-size: var(--type-heading); }
.sortiment__head p { max-width: 46ch; margin-top: var(--space-2); font: 500 var(--type-title)/1.4 var(--font-ui); }
.sortiment__hint { padding: var(--space-4) var(--gutter) 0; text-align: center; font-weight: 600; }
.sortiment:has(.enquiry-bar:not([hidden])) .sortiment__hint { display: none; }   /* the bar says it now */

/* the shop sign straddles the top edge of the shelf wall (its lower 40 % on the tiles), ≥ 16 px above the pouch tops */
.sortiment__sign {
  position: relative; z-index: 3; display: flex; justify-content: center;
  margin: 0 auto calc(min(3.6vw, 58px) * -1); max-width: 1600px; padding-inline-start: min(13.5vw, 216px); /* centred over the dates plank */
}
.sortiment__sign img {
  height: min(9vw, 144px); width: auto; rotate: -3deg;
  filter: drop-shadow(5px 6px 0 rgb(0 0 0 / 0.22)) drop-shadow(0 10px 18px rgb(0 0 0 / 0.18));
}
.shelf { position: relative; container-type: inline-size; max-width: 1600px; margin: 0 auto; height: calc(50.6cqw + 112px); }
.shelf__wall { position: absolute; inset: 0 0 auto 0; }
.shelf__wall img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent); mask-image: linear-gradient(to bottom, #000 90%, transparent);
}
.shelf__row { position: absolute; }
.shelf__row--dates { left: 19cqw; right: 5.5cqw; top: 6cqw; height: 17.45cqw; }      /* bottom edge = top plank */
.shelf__row--dried { left: 5.5cqw; right: 24cqw; top: calc(25.54cqw + 112px); bottom: calc(100% - 47.98cqw); }
/* the row signs sit on the plank faces, clear of the plants */
.shelf__sign { position: absolute; z-index: 2; margin: 0; --tilt: -3deg; }
.shelf__sign .rivlapp { font-size: var(--type-body); padding: 6px 16px 7px; }
.shelf__row--dates .shelf__sign { right: calc(100% + 1.5cqw); top: calc(100% + 0.2cqw); }
.shelf__row--dried .shelf__sign { left: calc(100% + 3cqw); top: calc(100% + 0.6cqw); --tilt: 3deg; }
.shelf__items { display: flex; height: 100%; }
.shelf__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.shelf__pouch { position: relative; display: block; height: 100%; text-decoration: none; }   /* the Granola sign is text */
.shelf__pouch > img {
  display: block; height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 8px 6px rgb(40 30 20 / 0.28));
  transition: translate var(--dur-ui) var(--ease-out);
}
.shelf__item--dried .shelf__pouch { max-height: 596px; }   /* never above the native front */
.shelf__item--soon .shelf__pouch { height: 62%; }
.shelf__item--soon .soon-sign { height: 100%; transition: translate var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .shelf__item:hover .shelf__pouch > :is(img, .soon-sign) { translate: 0 -6px; }
  .shelf__name:hover { text-decoration: underline; }
}
/* Granola's "Coming soon!" sign (captain, inbox 050): the Mushy badge over the localised line in the display
   face (it was a drawing with the Swedish words baked in). A square sized by its container (cqw), so the same
   markup serves the shelf, the product pages' range and the Granola page. */
.soon-sign {
  container-type: inline-size;
  display: grid; justify-items: center; align-content: center;
  aspect-ratio: 1; color: var(--ink); text-align: center;
}
/* spacing on the children: cq units on the container itself would resolve against an outer container */
.soon-sign__logo { width: 52cqw; height: auto; margin-bottom: 4cqw; }
.soon-sign__text { max-width: 100cqw; font: 400 26cqw/0.92 var(--font-display); rotate: -9deg; text-wrap: balance; }   /* the words span the sign, like the drawing */
/* the product a pouch tap or a shelf link came for (site.js SHELF LANDING): it hops and its talker lights up */
.shelf__item.is-landed .shelf__pouch > :is(img, .soon-sign) { animation: shelf-landed 900ms var(--ease-out-expo) both; }
.shelf__item.is-landed .shelf__tag { animation: shelf-tag-landed 2000ms ease-out both; }
@keyframes shelf-landed {
  0% { translate: 0 0; scale: 1; }
  30% { translate: 0 -14px; scale: 1.05; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes shelf-tag-landed {
  0%, 55% { outline: 4px solid var(--secondary); outline-offset: 3px; }
  100% { outline: 4px solid transparent; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .shelf__item.is-landed .shelf__pouch > :is(img, .soon-sign) { animation: none; } }
.shelf__popular {
  position: absolute; z-index: 1; top: 6%; right: -10%; rotate: 8deg;
  padding: 2px 8px 3px; background: var(--secondary); color: var(--ink);
  border: 2px solid var(--black); border-radius: var(--radius-s); box-shadow: var(--shadow-hard-s);
  font: 700 12px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: var(--label-tracking);
}
/* the shelf talker hangs from the plank's lower edge */
.shelf__tag {
  position: absolute; top: calc(100% + 2.09cqw + 4px); left: 50%; translate: -50% 0; width: 94%;
  display: grid; justify-items: center; gap: 6px; padding: 8px 6px; text-align: center;
  background: var(--paper); border: 2px solid var(--black); border-radius: 4px 4px var(--radius-s) var(--radius-s);
  box-shadow: var(--shadow-hard-s);
}
.shelf__row--dried .shelf__tag { top: calc(100% + 2.62cqw + 4px); }
.shelf__name {
  display: grid; place-items: center; min-height: 2lh;   /* one- and two-line names: equal talkers */
  font: 700 14px/1.2 var(--font-ui); color: var(--ink); text-decoration: none; text-wrap: balance;
}
.shelf__add {
  min-height: 32px; width: 100%; padding: 4px 6px; cursor: pointer;
  font: 600 13px/1.15 var(--font-ui); color: var(--ink);
  background: var(--accent); border: 2px solid var(--black); border-radius: var(--radius-pill);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.shelf__add:active { transform: scale(0.97); }
.shelf__add[aria-pressed="true"] { background: var(--primary); }
.shelf__add[aria-pressed="true"] .shelf__add-off, .shelf__add[aria-pressed="false"] .shelf__add-on { display: none; }
.shelf__soon { font: 600 13px/1.15 var(--font-ui); min-height: 32px; display: grid; place-items: center; }
/* 768–1100 px: the talkers get tighter so the dried plank keeps its height */
@media (max-width: 1100px) {
  .shelf { height: calc(50.6cqw + 96px); }
  .shelf__row--dried { top: calc(25.54cqw + 96px); }
  .shelf__tag { padding: 6px 4px; gap: 4px; }
  .shelf__name { font-size: 13px; }
  .shelf__add { font-size: 12px; min-height: 28px; }
  .shelf__popular { font-size: 11px; }
}
/* Phones / portrait: tiled wall, CSS planks, three per plank. */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .sortiment__head { padding-top: var(--space-7); }
  .shelf {
    height: auto; container-type: normal; padding: var(--space-5) var(--gutter) 0;
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / 0.55) 0 2px, transparent 2px 64px),
      repeating-linear-gradient(0deg, rgb(255 255 255 / 0.55) 0 2px, transparent 2px 64px) var(--tile);
  }
  .shelf__wall { display: none; }
  .sortiment__sign { margin: 0 auto var(--space-2); padding: 0; }
  .sortiment__sign img { height: min(26vw, 120px); }
  .shelf__row { position: static; height: auto; }
  .shelf__row + .shelf__row { margin-top: var(--space-6); }
  .shelf__sign { position: static; margin-bottom: var(--space-4); }
  .shelf__items { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
  .shelf__item { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .shelf__pouch {
    display: flex; justify-content: center; align-items: flex-end; height: min(42vw, 260px);
    margin-inline: calc(var(--space-3) * -0.5); padding-inline: var(--space-1);
    border-bottom: 12px solid var(--wood); box-shadow: 0 4px 0 0 var(--wood-edge);
  }
  .shelf__pouch > img { height: 94%; max-width: 100%; object-fit: contain; }
  .shelf__item--dried .shelf__pouch > img { height: 86%; }
  .shelf__item--soon .shelf__pouch { height: min(42vw, 260px); }
  .shelf__item--soon .soon-sign { height: 72%; }
  .shelf__popular { right: 0; }
  .shelf__tag { position: static; translate: none; width: auto; margin-top: 10px; flex: 1; align-content: start; }
  .shelf__row--dried .shelf__tag { top: auto; }
  .shelf__name { font-size: 13px; }
  .shelf__add { font-size: 12px; min-height: 32px; }
}
/* phones: every pouch on the shelf equally tall - its visible height, whatever the render's transparent margin
   (--pouch-fill on the img, build_site.py; the dates' renders carry ~5 %, the dried fronts almost none) */
@media (max-width: 767px) {
  .shelf__pouch > img, .shelf__item--dried .shelf__pouch > img { height: calc(89% / var(--pouch-fill, 0.944)); }
}

/* Enquiry bar: sticks to the viewport bottom while the shelf is on screen, once something is picked. */
.enquiry-bar:not([hidden]) {
  position: sticky; z-index: 31; bottom: calc(var(--space-4) + var(--safe-bottom));
  display: flex; align-items: center; gap: var(--space-4); width: fit-content; max-width: calc(100% - 2 * var(--gutter));
  margin: var(--space-5) auto 0; padding: 8px 8px 8px var(--space-5);
  background: var(--paper); border: var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-hard);
  transition: opacity var(--dur-ui) var(--ease-out), translate var(--dur-ui) var(--ease-out);
}
.enquiry-bar.is-tucked { opacity: 0; translate: 0 12px; pointer-events: none; }
.enquiry-bar__count { font-weight: 700; }
.enquiry-bar .btn { min-height: 44px; border-radius: var(--radius-pill); }

/* ========================================================================
   B2B – reseller section (normal flow after the film). Same language as the scenes: a flavour
   field (brand green), real pouches, torn paper, hard shadows. Claims only as the live site makes them.
   ======================================================================== */
.b2b {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7) var(--space-5);
  padding: var(--space-8) var(--gutter) calc(var(--space-8) + var(--safe-bottom));
  background: var(--primary); color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + var(--safe-top)); /* the anchor jump lands below the header */
}
.b2b__head { grid-column: 1 / span 8; }
.b2b__kicker {
  display: inline-block;
  font: 700 var(--type-small)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: var(--label-tracking);
  background: var(--secondary); padding: 2px var(--space-3); border-radius: var(--radius-s); rotate: -2deg; margin-bottom: var(--space-3);
}
.b2b :is(h1, h2) { font-size: var(--type-heading); }
.b2b__intro { margin-top: var(--space-4); font: 500 var(--type-title)/1.45 var(--font-ui); max-width: 34ch; }
/* lifestyle scene (v2 series D): the café counter is the section's hero */
.b2b__scene {
  position: relative; grid-column: 1 / -1; margin: 0; aspect-ratio: 21 / 9;
  border: var(--border); border-radius: 22px; overflow: hidden; box-shadow: 6px 6px 0 0 var(--black); background: var(--accent);
}
.b2b__scene > picture { display: block; height: 100%; }
.b2b__scene > picture > img { width: 100%; height: 100%; object-fit: cover; }
/* real pouches on the clear left of the counter (base line ≈ 66 % of the frame; the photo shows no packaging) */
.b2b__pouches { position: absolute; left: 7%; bottom: 33%; display: flex; align-items: flex-end; height: 46%; }
.b2b__pouches img { height: 88%; width: auto; margin: 0 -2%; filter: drop-shadow(0 10px 10px rgb(0 0 0 / 0.3)); }
.b2b__pouches img:nth-child(1) { rotate: -6deg; } .b2b__pouches img:nth-child(3) { rotate: 6deg; }
.b2b__pouches img:nth-child(2) { height: 100%; z-index: 1; }
.b2b__values { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.b2b__values h3 {
  display: inline-block; margin-bottom: var(--space-3);
  background: var(--black); color: var(--paper); padding: 6px 14px 8px; border-radius: 12px 12px 12px 4px; rotate: -2deg;
  font: 400 var(--type-title)/1.1 var(--font-display);
}
.b2b__values li:nth-child(even) h3 { rotate: 2deg; }
.b2b__values p { max-width: 30ch; }
.pdp h2 { font: 400 var(--type-heading)/1 var(--font-display); margin-bottom: var(--space-5); }
/* the range on one shelf: every product links to its page */
.range {
  display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-3) 2px var(--space-4);
  border-bottom: 6px solid var(--ink); scrollbar-width: thin;
}
.range li { flex: 0 0 auto; }
.range a {
  display: grid; justify-items: center; gap: var(--space-2); width: 112px; padding: var(--space-2);
  color: var(--ink); text-decoration: none; font: 600 var(--type-small)/1.2 var(--font-ui); text-align: center; border-radius: var(--radius-m);
}
.range a > :is(img, .soon-sign) { transition: translate var(--dur-ui) var(--ease-out); }
.range a > img { height: 128px; width: auto; filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.22)); }
.range__soon .soon-sign { width: 112px; height: 112px; margin-top: 16px; }
@media (hover: hover) and (pointer: fine) { .range a:hover > :is(img, .soon-sign) { translate: 0 -6px; } .range a:hover span { text-decoration: underline; } }
.b2b__contact { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; }
.b2b__form {
  scroll-margin-top: calc(var(--header-h) + var(--safe-top) + var(--space-4)); /* every enquiry CTA lands here */
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5);
  padding: var(--space-7) var(--space-6) var(--space-6); background: var(--paper);
  border: var(--border); border-radius: 22px; box-shadow: 6px 6px 0 0 var(--black);
}
.b2b__form :is(h2, h3), .b2b__address :is(h2, h3) { grid-column: 1 / -1; font: 400 var(--type-title)/1.1 var(--font-display); }
.b2b__general { margin-top: var(--space-3); max-width: 34ch; }
.b2b__field { display: grid; gap: var(--space-1); }
.b2b__field--wide, .b2b__submit { grid-column: 1 / -1; }
.b2b__field label { font-weight: 600; font-size: var(--type-small); }
.b2b__field :is(input, textarea) {
  font: 500 var(--type-body)/1.4 var(--font-ui); color: var(--ink); background: #fff;
  min-height: 48px; padding: var(--space-2) var(--space-3); border: var(--border); border-radius: var(--radius-s);
}
.b2b__field :is(input, textarea):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--primary); }
.b2b__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.b2b__note { font-size: var(--type-small); }
.b2b__picked:not([hidden]) { grid-column: 1 / -1; display: grid; gap: var(--space-2); }
.b2b__picked-title { font-weight: 600; font-size: var(--type-small); }
.b2b__picked ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.b2b__picked li {
  display: inline-flex; align-items: center; gap: 2px; padding-inline-start: var(--space-3);
  background: var(--accent); border: 2px solid var(--black); border-radius: var(--radius-pill); font-weight: 600;
}
.b2b__picked-remove {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: none; color: var(--ink); font: 700 18px/1 var(--font-ui);
}
@media (hover: hover) and (pointer: fine) { .b2b__picked-remove:hover { background: rgb(0 0 0 / 0.1); } }
.b2b__address dl { display: grid; gap: var(--space-1); margin: var(--space-4) 0; }
.b2b__address dt { font-weight: 700; margin-top: var(--space-3); }
.b2b__address dd { margin: 0; }
.b2b__address a { font-weight: 600; }
.b2b__address dd a { display: inline-block; min-height: 32px; padding-block: 4px; }
@media (max-width: 1023px) {
  .b2b__head { grid-column: 1 / -1; }
  .b2b__values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2b__contact { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  /* one column: twelve tracks with 32 px gaps need 352 px and pushed the section past a 360 px screen */
  .b2b { grid-template-columns: minmax(0, 1fr); gap: var(--space-6) 0; padding-block: var(--space-7); }
  .b2b__values { grid-template-columns: 1fr; }
  .b2b__form { grid-template-columns: 1fr; padding: var(--space-6) var(--space-4) var(--space-5); }
  .b2b__scene { aspect-ratio: 3 / 4; }
  .b2b__scene .b2b__pouches { left: 6%; bottom: 30%; height: 26%; }
}

/* ========================================================================
   PRODUCT PAGES (produkter/<slug>/, generated by tools/build_site.py). The hero is the
   product's flavour scene (same template, verb and claim); below it, the full facts.
   ======================================================================== */
.is-page .site-header { position: relative; background: var(--accent); border-bottom: 2px solid var(--ink); }
.pdp { background: var(--accent); }
.pdp .fscene { height: clamp(600px, 100svh - var(--header-h), 900px); }   /* right under the header (no crumbs bar, inbox 047) */
.pdp__back { gap: var(--space-2); margin: var(--space-4) var(--gutter) 0; }
.pdp__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-7) var(--gutter) var(--space-8); max-width: 84rem; margin: 0 auto; }
/* the macro (16:9, calm left 40 %) with the facts on a paper card over that calm side */
.pdp__about { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.pdp__macro { grid-area: 1 / 1; margin: 0; aspect-ratio: 16 / 9; border: var(--border); border-radius: 22px; overflow: hidden; box-shadow: 6px 6px 0 0 var(--black); background: var(--flavour, var(--paper)); }
.pdp__macro img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.pdp__about-copy {
  grid-area: 1 / 1; align-self: center; justify-self: start; width: min(38%, 30rem); margin-inline-start: var(--space-6);
  padding: var(--space-6); background: var(--paper); border: var(--border); border-radius: 18px; box-shadow: var(--shadow-hard);
}
.pdp__desc { font: 500 var(--type-body)/1.55 var(--font-ui); max-width: 40ch; }
.pdp__about-copy h2 { font-size: var(--type-title); margin-bottom: var(--space-3); }
.pdp h3 { font: 700 var(--type-small)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: var(--label-tracking); margin: var(--space-6) 0 var(--space-3); }
.pdp__facts { display: grid; gap: var(--space-2); }
.pdp__facts li { position: relative; padding-inline-start: var(--space-5); }
.pdp__facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.4em; width: 12px; height: 12px; border-radius: 50%; background: var(--flavour, var(--primary)); border: 2px solid var(--black); }
.pdp__pack { display: flex; gap: var(--space-3); margin: var(--space-6) 0 0; }
.pdp__pack dt { font-weight: 700; }
.pdp__pack dd { margin: 0; }
.pdp__info {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7);
  padding: var(--space-7); background: var(--paper); border: var(--border); border-radius: 22px; box-shadow: 6px 6px 0 0 var(--black);
}
.pdp__info h2 { font-size: var(--type-title); }
.pdp__info p + p { margin-top: var(--space-3); }
.pdp__nutrition { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pdp__nutrition th, .pdp__nutrition td { padding: var(--space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); text-align: start; }
.pdp__nutrition td { text-align: end; font-weight: 600; }
.pdp__nutrition thead th { font-size: var(--type-small); text-transform: uppercase; letter-spacing: var(--label-tracking); border-bottom: 2px solid var(--ink); }
.pdp__nutrition thead th:last-child { text-align: end; }
.pdp__nutrition .is-missing { font-weight: 500; font-style: italic; }
.pdp__note, .pdp__missing { margin-top: var(--space-3); font-size: var(--type-small); }
.pdp__b2b {
  display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-7);
  background: var(--ink); color: var(--paper); border-radius: 22px; box-shadow: 6px 6px 0 0 var(--black);
}
.pdp__b2b h2 { margin: 0; color: var(--paper); }
.pdp__b2b p { max-width: 46ch; }
.pdp__b2b p.pdp__b2b-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); max-width: none; }
.pdp__more h2 { margin-bottom: var(--space-4); }
.range--more { border-bottom-color: var(--ink); }
.pdp__other { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); }
@media (max-width: 767px) {
  .pdp__info { grid-template-columns: 1fr; gap: var(--space-5); }
  .pdp__macro { aspect-ratio: 4 / 3; }
  .pdp__macro img { object-position: 75% 50%; }
  .pdp__about-copy { grid-area: auto; width: auto; margin: calc(var(--space-7) * -1) var(--space-3) 0; position: relative; }
  .pdp__info, .pdp__b2b { padding: var(--space-5); }
}

/* ========================================================================
   ABOUT (om-oss/, inbox 052) and CONTACT (kontakt/). About: the Dadlar opener's last frame (dates and
   their flavours at the edges, a calm turquoise centre) under a paper card, then the product-page cards.
   Contact: the B2B section on its own page (heading h1, form and contact block, the café scene).
   ======================================================================== */
.about-hero { display: grid; background: #88e0e5; border-bottom: 2px solid var(--ink); }
.about-hero__still { grid-area: 1 / 1; width: 100%; height: clamp(440px, 100svh - var(--header-h) - 160px, 720px); object-fit: cover; }
.about-hero__card {
  grid-area: 1 / 1; align-self: center; justify-self: center; width: min(30rem, 40%); text-align: center;
  padding: var(--space-6); background: var(--paper); border: var(--border); border-radius: 18px; box-shadow: var(--shadow-hard);
}
.about-hero__card .b2b__kicker { margin-bottom: var(--space-3); }
.about-hero h1 { font: 400 var(--type-heading)/1 var(--font-display); text-wrap: balance; }
.about-hero__lead { margin-top: var(--space-3); font: 500 var(--type-title)/1.4 var(--font-ui); text-wrap: pretty; }
.about .pdp__desc + .pdp__desc { margin-top: var(--space-3); }
.about .values { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: var(--space-4) 0 0; }
.about .values li { grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: var(--type-body); }
.about .values strong { display: inline; }
/* the origin is longer than a product's blurb: the card sits over the macro only where it fits */
@media (max-width: 1099px) {
  .about .pdp__macro { aspect-ratio: 16 / 9; }
  .about .pdp__about-copy { grid-area: auto; width: auto; margin: calc(var(--space-7) * -1) var(--space-4) 0; position: relative; }
}
@media (max-width: 767px) {
  .about-hero__still { height: auto; aspect-ratio: 16 / 9; }
  .about-hero__card { grid-area: auto; width: auto; margin: calc(var(--space-6) * -1) var(--gutter) var(--space-6); position: relative; }
  .about .pdp__about-copy { margin-inline: var(--space-3); }
}
.contact { background: var(--primary); }

/* ========================================================================
   NORMAL FLOW ON PHONES (inbox 055: the captain's Galaxy S23). Touch screens get the normal-flow page (main.js
   cinematicQuery): native scrolling only, every beat its own block, light in-view arrivals (.is-play, transform /
   opacity). Here the phone rhythm: one focal element per screen, a large pouch, body text 16 px, a sticky chip bar.
   ======================================================================== */
.pop-row { display: none; }
.is-static .pop-row {
  display: flex; justify-content: center; align-items: flex-end; margin: var(--space-6) auto 0; padding: 0; list-style: none;
  max-width: 40rem;
}
.is-static .pop-row li { flex: 1 1 0; min-width: 0; margin-inline: -2%; }
.is-static .pop-row li:nth-child(3) { flex-grow: 1.35; z-index: 1; }
.is-static .pop-row li:nth-child(odd):not(:nth-child(3)) { translate: 0 6%; }
.is-static .pop-row a { display: block; }
.is-static .pop-row img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgb(0 0 0 / 0.25)); }
@media (max-width: 767px) {
  /* the film nav: one sticky row of chips that scrolls sideways (both chapters), never a wrapped block */
  .is-static .film__head {
    position: sticky; top: 0; z-index: 30; padding: 0;
    overflow-x: clip;   /* its sideways-scrolling row otherwise widened the page to 1392 px (phones zoomed out) */
    background: var(--paper); border-bottom: 2px solid var(--ink); box-shadow: 0 2px 0 0 rgb(0 0 0 / 0.08);
  }
  .is-static .film__nav {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    padding: var(--space-1) var(--gutter); scrollbar-width: none;
  }
  .is-static .film__nav::-webkit-scrollbar { display: none; }
  .is-static .film__lists { display: flex; gap: var(--space-2); }
  .is-static .flavours { flex-wrap: nowrap; gap: 0 var(--space-1); }
  .is-static .flavours a, .is-static .film__chapters a { white-space: nowrap; }
  /* no white top bar (inbox 059): the film's chip row is gone on phones; the header floats over the page, its
     logo and B2B link leave with the hero, the round menu button stays (nav, chapters via the menu panel) */
  .is-static .film__head { display: none; }
  /* one scene per screen (inbox 062/063): native momentum scrolling settles on whole flavour / chapter scenes (CSS
     scroll-snap, no JS). Only the scenes are snap points; no snap-stop, so a fast flick may pass several. Proximity,
     not mandatory: the scenes share the page's one scroller with the shelf, the form and the footer, and mandatory
     would pull a reader stopped there back to the last scene. Everything else scrolls freely. */
  /* captain 2026-10-06: every natural swipe lands on a whole screen. Mandatory; the shelf, B2B and footer are snap
     areas too, taller than a screen, so they scroll freely inside (no pull-back); the footer snaps by its end. */
  html.is-static { scroll-snap-type: y mandatory; }
  /* from Our range on, plain native scrolling (captain 2026-10-06: the shelf felt laggy and different): site.js
     switches snapping off while the shelf, B2B or footer is on screen (.is-free-scroll) */
  html.is-static.is-free-scroll { scroll-snap-type: none; }
  .is-static :is(.world, .panel--a, .panel--pop, .fscene) { scroll-snap-align: start; }
  .is-static .site-header { position: fixed; background: none; border: 0; box-shadow: none; pointer-events: none; }
  .is-static .site-header > * { pointer-events: auto; }
  .is-static .site-header :is(.brand, .header-cta) { transition: opacity var(--dur-ui) var(--ease-out), visibility 0s var(--dur-ui); }
  .is-static.is-past-hero .site-header:not(.is-menu-open) :is(.brand, .header-cta) { opacity: 0; visibility: hidden; }
  /* the scene: more than one screen tall, so the pouch (sized from the scene's height) is the large focal element */
  /* exactly one phone screen on any model (inbox 062, captain on the device): lvh = the screen with the browser bar
     gone, as it is while you scroll; while the bar shows, the pouch keeps clear of it (--bar below) */
  .is-static .fscene { height: 100vh; height: 100lvh; }
  .is-static :is(.world, .panel--a, .panel--pop) { min-height: 100vh; min-height: 100lvh; }
  .is-static :is(.panel--a, .panel--pop) { display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--space-6) + 100lvh - 100svh); }
  .is-static .panel--pop { padding-block: var(--space-8); }
  /* the world panorama behind Popular flavours, as on desktop (inbox 068/069): front / mid / far hills over the sky */
  .is-static .panel--pop {
    background: url("assets/layers/bg-b/front-1600.webp") 50% 100% / 220% auto no-repeat,
                url("assets/layers/bg-b/mid-1600.webp") 50% 100% / 220% auto no-repeat,
                url("assets/layers/bg-b/far-1600.webp") 50% 92% / 220% auto no-repeat,
                url("assets/layers/bg-b/sky-1600.webp") 50% 50% / cover no-repeat var(--accent);
  }
  .is-static .panel--a { padding-block: var(--space-8); }
  .is-static .values li { font-size: var(--type-body); }
  /* Popular flavours: five equal pouches (captain 2026-10-06: same size), sized by the visible pouch, no larger centre */
  .is-static .pop-row { container-type: inline-size; width: 100%; }   /* a size container cannot shrink to fit */
  .is-static .pop-row li:nth-child(3) { flex-grow: 1; }
  .is-static .pop-row a { display: flex; justify-content: center; }
  .is-static .pop-row img { width: auto; max-width: none; height: calc(35cqw / var(--pouch-fill, 0.944)); }
}
/* Phones, normal flow (captain, inbox 057): the heading always ABOVE its pouch. The copy (hook, title, line, actions)
   sits right above the pouch, the claim straddling the pouch's top edge. Openers: copy over the still's calm centre,
   the pouch fan below.
   One pouch, one size, one spot in every scene (captain 2026-10-06: the pouches the same size, bigger; Pineapple's
   short copy left its pouch floating high): --pv is the visible pouch height shared by all scenes - the room between
   a slimmer fruit band and the foot line under the TALLEST copy block on the page (--copy-h-max, site.js), at most
   90cqw and 42cqh. The pouch's foot sits on one line (--foot) in every scene; copy and claim stack up from it, so a
   short copy shows more fruit instead of leaving the pouch high. Each box is the render's own proportions
   (--pouch-ar) grown by its transparent margin (--pouch-fill, build_site.py), so the pouch, not the image, matches. */
@media (max-width: 767px) {
  :is(.is-static, .is-page) .fscene__frame {
    --fruit-max-m: 18cqh;
    --gap-claim: 46px;                                              /* copy -> the pouch's visible top: the claim's room */
    --bar: calc(100lvh - 100svh);                                   /* the browser bar's height while it shows */
    --foot: calc(100cqh - 16px - var(--safe-bottom) - var(--bar));  /* the pouch's visible foot */
    --pv: min(42cqh, 90cqw, var(--foot) - var(--fruit-max-m) - 20px - var(--copy-h-max, var(--copy-h, 296px)) - var(--gap-claim));
    --vt: calc(var(--foot) - var(--pv));                            /* the pouch's visible top */
    --ct: calc(var(--vt) - var(--gap-claim) - var(--copy-h, 296px));   /* copy top */
    --par: var(--pouch-ar, 0.7005);
    --ph: calc(var(--pv) / var(--pouch-fill, 0.944));
    --pt: calc(var(--vt) - (var(--ph) - var(--pv)) / 2);            /* the margin is the same above and below */
    --base: calc(var(--pt) + var(--ph));
  }
  /* one placement for both chapters (inbox 060): same spot, the same slight tilt */
  :is(.is-static, .is-page) .fscene--date .fscene__pouch { rotate: -6deg; }
  :is(.is-static, .is-page) .fscene[data-template] .fscene__claim { top: calc(var(--vt) - 34px); }
  :is(.is-static, .is-page) .fscene[data-template] .fscene__copy, :is(.is-static, .is-page) .fscene--opener .fscene__copy { top: var(--ct); bottom: auto; }
  :is(.is-static, .is-page) .fscene--opener .fscene__frame { --ct: 9cqh; }
  :is(.is-static, .is-page) .fscene--opener .fscene__fan { bottom: calc(6cqh + var(--safe-bottom) + var(--fan-h) * 0.1); }
}
/* short phones (≤ 760 px tall): a slimmer fruit band still, so the pouch keeps its size */
@media (max-width: 767px) and (max-height: 760px) {
  :is(.is-static, .is-page) .fscene__frame { --fruit-max-m: 13cqh; }
}
/* Motion on phones: the once-per-screen arrival (.is-play, site.js) only - the scroll-driven drift and rise were
   removed (captain 2026-10-06: lag); nothing is computed per scroll frame. */

/* ========================================================================
   NATIVE FEEL ON TOUCH (captain 2026-10-06: the mobile version on par with the site; Emil Kowalski mobile-native)
   ======================================================================== */
html { -webkit-tap-highlight-color: transparent; }            /* no grey flash: every control has its own :active */
a, button, [role="button"], label { touch-action: manipulation; }  /* no double-tap-zoom wait on taps */
:is(.btn, .menu-toggle, .shelf__add, .film__chapters a, .flavours a, .lang-switch a, .pop-row a, .hero-pouch, .fscene__unit) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;   /* controls, not content */
}
@media (pointer: coarse) {
  /* press feedback the instant the finger lands (.btn and .shelf__add have theirs above) */
  :is(.menu-toggle, .pop-row a, .text-link):active { scale: 0.96; transition: scale 100ms var(--ease-out); }
}
@media (max-width: 767px) {
  /* product pages: the macro shows its dates; the facts card only tucks under its lower edge */
  .pdp__macro { display: none; }                     /* captain 2026-10-06: the About photo is desktop only */
  .pdp__about-copy { margin: 0; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: var(--space-7) var(--gutter) calc(var(--space-6) + var(--safe-bottom)); }
.site-footer__inner { display: grid; gap: var(--space-4); max-width: 72rem; margin: 0 auto; }
.site-footer img { width: 110px; height: auto; aspect-ratio: 151 / 63; }
.site-footer address { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.site-footer address a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.site-footer__nav a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.site-footer__legal { font-size: var(--type-small); opacity: 0.8; }

/* ========================================================================
   CINEMATIC MODE
   ======================================================================== */
.is-cinematic .cinematic-scroll {
  --travel: 10285px;               /* virtual timeline length (CSS px); the flavour film needs room */
  position: relative;
  height: calc(100vh + var(--travel));
  height: calc(100svh + var(--travel));
}
.is-cinematic .cinematic-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 520px;
  overflow: hidden; overflow: clip;
  isolation: isolate;
  background: var(--accent);
}
.is-cinematic .world { position: absolute; inset: 0; height: auto; min-height: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
.is-cinematic.is-loading .world { opacity: 0; }

/* Hero arrival (motion spec §4.6, adapted from Snozy): wrappers the scroll engine never writes
   start offset while decoding, then settle with staggered expo-out. ~1.9 s total, readable
   from ~0.6 s; any scroll/key/pointer input finishes it at once (.is-entered). */
.is-cinematic.is-loading .site-header { transform: translateY(-80px); opacity: 0; }
.is-cinematic.is-loading :is(.intro__title, .intro__chip, .intro__actions) { transform: translateY(80px); opacity: 0; }
.is-cinematic.is-entering .site-header { transition: transform 1000ms var(--ease-out-expo) 100ms, opacity 1000ms var(--ease-out-expo) 100ms; }
.is-cinematic.is-entering .intro__title { transition: transform 1200ms var(--ease-out-expo) 200ms, opacity 1200ms var(--ease-out-expo) 200ms; }
.is-cinematic.is-entering .intro__chip { animation: f-slap 520ms var(--ease-out-expo) 640ms both; } /* the hero's rivlapp slaps on (concept §5.1) */
.is-cinematic.is-entering.is-entered .intro__chip { animation-duration: 0ms; animation-delay: 0ms; }
.is-cinematic.is-entering .intro__actions { transition: transform 1200ms var(--ease-out-expo) 400ms, opacity 1200ms var(--ease-out-expo) 400ms; }
.is-cinematic.is-entering.is-entered :is(.site-header, .intro__title, .intro__chip, .intro__actions) { transition-duration: 0ms; transition-delay: 0ms; }
.is-cinematic.is-loading .loader { display: grid; }
.loader {
  position: absolute; inset: 0; z-index: 40; place-items: center; pointer-events: none;
  opacity: 0; animation: loader-in var(--dur-ui) var(--ease-out) 300ms forwards; /* only if decoding is slow */
}
.loader img { width: 120px; height: auto; animation: loader-bob 900ms var(--ease-in-out) 300ms infinite alternate; }
@keyframes loader-in { to { opacity: 1; } }
@keyframes loader-bob { to { translate: 0 -6px; rotate: -3deg; } }

/* Narrative layers: opacity + small translation only. --v is 0..1 visibility. */
.is-cinematic .intro {
  --t: 0;
  opacity: calc(1 - var(--t));
  transform: translate3d(0, calc(var(--t) * -12px), 0); /* small lift: never rises into the header band */
}
.is-cinematic .panel { position: absolute; }
.is-cinematic [data-panel].is-inactive { pointer-events: none; }

.is-cinematic .panel--a {
  --v: 0;
  inset: calc(var(--header-clear) + var(--space-3)) auto auto var(--gutter);
  width: min(31rem, 42vw);
  padding: 0; background: none;
  opacity: var(--v);
  transform: translate3d(calc((1 - var(--v)) * -24px), 0, 0);
}
/* the scrim: a haze of the sky colour from the screen edge to just past the copy, fading out to the right and below,
   so the hills under the lower lines read as distance, not as a box (the pouch group, stepped aside, stays clear) */
.is-cinematic .panel--a .panel__scrim {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  inset-block: -14% -22%; inset-inline: calc(-1 * var(--gutter) - 2px) -72px;
  background: linear-gradient(to right, color-mix(in srgb, var(--accent) 94%, transparent) calc(100% - 72px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
}
[dir="rtl"] .is-cinematic .panel--a .panel__scrim { background: linear-gradient(to left, color-mix(in srgb, var(--accent) 94%, transparent) calc(100% - 72px), transparent); }
.is-cinematic .panel--a .panel__body { max-width: none; margin: 0; }

.is-cinematic .film {
  --film-in: 0; --dir: 1;
  position: absolute; inset: 0; display: block;
  /* colour first; before a scene is active (the slide-in) the first opener's paper, so the nav never sits on ink */
  background-color: var(--scene-bg, #88e0e5);
  transition: background-color 900ms var(--ease-out-expo);
  /* the whole film slides over the world on the way in (scrubbed); it stays to the end of the track, where the
     Sortiment shelf tears up over its last scene */
  transform: translateY(calc((1 - var(--film-in)) * 100%));
}
.is-cinematic .film.is-fast { transition-duration: 280ms; }
/* No visibility:hidden on the film itself: the transform parks it off stage, and hiding it would
   drop its chips and scene links out of the tab order (onFocusIn scrolls there). */
.is-cinematic .fscene { position: absolute; inset: 0; height: auto; background: none; display: none; }
.is-cinematic .fscene.is-near { display: block; }           /* active ± 1: images load just in time */
.is-cinematic .fscene:not(.is-active, .is-leaving) { visibility: hidden; }
.is-cinematic .film .fscene__frame { --top-clear: calc(var(--header-h) + var(--safe-top) + 64px); }
/* scrubbed parallax on the backdrop only (--c = u − 0.5): a slow push-in on its fruit; the pouch stays put
   (phones: half of it, so the fruit band never grows into the claim under it) */
.is-cinematic .film .fscene__backdrop { scale: calc(1.02 + var(--c) * 0.04); }
@container scene (max-width: 959px) or (max-aspect-ratio: 23/20) {
  .is-cinematic .film .fscene__backdrop { scale: calc(1.01 + var(--c) * 0.02); }
}

.is-cinematic .film__head {
  position: absolute; z-index: 7; inset: calc(var(--header-h) + var(--safe-top) + 16px) var(--gutter) auto var(--gutter);
  padding: 0; background: none; color: var(--film-on, var(--ink)); pointer-events: none;
  transition: color 900ms var(--ease-out-expo), translate 250ms var(--ease-out);
}
.is-cinematic .film__head > * { pointer-events: auto; }
/* the nav floats over the backdrops' fruit: a pill in the scene colour keeps it legible */
.is-cinematic .film__nav {
  width: fit-content; margin-inline: auto; padding-inline: var(--space-3); border-radius: 999px;
  background: var(--scene-bg, transparent); transition: background-color 900ms var(--ease-out-expo);
}
.is-cinematic .film__step {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
}
.is-cinematic .film__step[aria-disabled="true"] { opacity: 0.35; cursor: default; }


.is-cinematic .panel--pop {
  --v: 0;
  inset: var(--header-clear) 0 auto 0; background: none; padding: 0 var(--gutter);
  opacity: var(--v);
  transform: translate3d(0, calc((1 - var(--v)) * 14px), 0);
}
/* Landscape: the Mushy logo heads the five pouches, so the caption moves under them, on a paper label over the
   hills (the pouches stand on --mid-line + --hero-sink; the stage is the containing block for both). */
@media (min-width: 768px) and (min-aspect-ratio: 4/5) {
  .is-cinematic .panel--pop {
    inset: calc(var(--mid-line) + var(--hero-sink) + 1.5svh) 0 auto 0; margin-inline: auto; width: fit-content;
    padding: var(--space-3) var(--space-6) var(--space-4); background: var(--paper);
    border: var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-hard);
  }
}
@media (min-width: 768px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  /* short screens: no room under the ground line (1280 × 720: 2 px to the bottom edge) and none above the logo,
     so the label moves to the top-left corner, where the story card stood a beat earlier */
  .is-cinematic .panel--pop {
    inset: calc(var(--header-clear) + var(--space-3)) auto auto auto; inset-inline-start: var(--gutter);
    margin-inline: 0; text-align: start; padding: var(--space-2) var(--space-5) var(--space-3);
  }
  .is-cinematic .panel--pop h2 { font-size: calc(var(--type-heading) * 0.8); }
  .is-cinematic .panel--pop p { font-size: var(--type-body); margin-top: var(--space-1); }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1100px) {
  /* the group steps fully clear of the story card (≤ 30 rem / 50 vw wide) and stays inside the frame */
  .cinematic-stage { --hero-h: min(36svh, 27vw); --hero-shift-x: 28vw; }
  .is-cinematic .panel--a { width: min(30rem, 50vw); }
}
@media (max-height: 760px) and (min-width: 768px) {
  .cinematic-stage { --hero-h: 40svh; --mid-line: 72%; }
  .is-cinematic .panel--a .values { margin: var(--space-4) 0 var(--space-2); }
}
/* Portrait tablets and phones: stack vertically instead of left/right. */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .cinematic-stage {
    --mid-line: 62%;                 /* the group stands under the CTAs, on the meadow (62 % + 13svh = 75 %, */
                                     /* ~5 % of the plate below the hill's torn edge; at 69 % it floated above it) */
    --hero-h: min(32svh, 66vw);       /* as wide as a phone allows (group ≈ 1.52 × its height) */
    --hero-sink: 13svh;
    --hero-shift-x: 0vw;
    --hero-shift-y: 28svh;           /* below the (tall) story card on phones */
    --hero-push: 0.18;
    --story-hide: 1;                 /* and fades out under it */
  }
  .is-cinematic .cinematic-scroll { --travel: 8121px; }
  .intro__actions { gap: var(--space-3); }   /* both CTAs on one row down to 360 px */
  .is-cinematic .panel--a { inset: calc(var(--header-clear) + var(--space-2)) var(--gutter) auto var(--gutter); width: auto; max-width: 36rem; margin-inline: auto; transform: translate3d(0, calc((1 - var(--v)) * 16px), 0); }
  /* stacked: the scrim runs the full width and fades out below the copy, over the hills */
  .is-cinematic .panel--a .panel__scrim, [dir="rtl"] .is-cinematic .panel--a .panel__scrim {
    inset: -24px calc(-1 * var(--gutter)) -20% calc(-1 * var(--gutter));
    background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 94%, transparent) 78%, transparent);
    -webkit-mask-image: none; mask-image: none;
  }
  .is-cinematic .panel--a .values { margin: var(--space-3) 0 var(--space-2); }
  /* Two rows (label, then CTA + controls) keep the bottom-anchored head short enough
     that it never grows up into the header. */
  /* phones: dots + arrows; the names stay as the links' accessible text */
  .is-cinematic .flavours { flex-wrap: nowrap; gap: 0; }
  .is-cinematic .flavours a { min-width: 24px; justify-content: center; padding: 0; } /* the 24 px target (WCAG 2.2) */
  .is-cinematic .flavours__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* phones: chapter switch + dots fit 360 px without the arrows */
  .is-cinematic .film__step { display: none; }
  /* chapter switch + six dots fit inside the band with ≥ 12 px to both edges (the last dot was cut at the edge) */
  .film__chapters { margin-inline-end: 6px; padding-inline-end: 6px; }
  .film__chapters a { padding: 0 3px; font-size: var(--type-small); letter-spacing: 0.02em; }
  /* phones: the flavour nav gets a band in the scene colour (the pouch block starts right below it) */
  .is-cinematic .film__head {
    inset: calc(var(--header-h) + var(--safe-top)) 0 auto 0; padding: var(--space-1) 12px var(--space-3);
    background: linear-gradient(var(--scene-bg, transparent) 78%, transparent);
    transition: color 900ms var(--ease-out-expo), translate 250ms var(--ease-out);
  }
  .is-cinematic .film .fscene__frame { --top-clear: calc(var(--header-h) + var(--safe-top) + 60px); }
}

/* short phones (e.g. 360 × 740): the title wraps once more, so the group stands lower (72 % + 7svh = 79 %) */
@media (max-width: 767px) and (max-height: 760px) {
  .cinematic-stage { --mid-line: 72%; --hero-sink: 7svh; --hero-h: min(28svh, 60vw); }
}
/* phones: the hero's three pouches equally tall (captain 2026-10-06), the side pair a little further out */
@media (max-width: 767px) {
  .hero-set:not(.hero-set--five) .hero-pouch { height: 92%; }
  .hero-set:not(.hero-set--five) .hero-pouch--l { left: 26%; }
  .hero-set:not(.hero-set--five) .hero-pouch--r { left: 74%; }
}

/* ---------- Right-to-left (dir="rtl", e.g. Arabic) ----------
   Components use logical properties (text-align: start/end, inset-inline-*, margin/padding-inline-*),
   so grids, the Sortiment shelf, B2B and the header mirror on their own. The art (world layers,
   pouches, bursts) stays put; only compositions with a side mirror: the story panel and the hero's
   step-aside. */
[dir="rtl"] .world { --dir-x: -1; }
@media (min-width: 768px) and (min-aspect-ratio: 4/5) {
  [dir="rtl"] .is-cinematic .panel--a { inset-inline: auto var(--gutter); }
}
[dir="rtl"] .film__step svg { scale: -1 1; }
/* brand faces first (Latin), Arabic faces as glyph fallback (Fredoka / Biscuit Glitch have no Arabic) */
:lang(ar) {
  --font-ui: "Fredoka", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Biscuit Glitch", "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --label-tracking: 0; /* letter-spacing breaks Arabic joining */
}
[data-i18n-fallback]:lang(en) { --label-tracking: 0.06em; }
:lang(ar) :is(.flavours a, .film__chapters a, .panel__kicker, .shelf__popular, .fscene__popular) { text-transform: none; letter-spacing: 0; }