/* ==========================================================================
   FluoFit — design tokens + base styles
   Source of truth: the designer's brand kit (repo /assets: '2 copy.pdf', logo PNGs) for logo, colours and
   photography; brand/packaging-board.png for the packaging motifs. Rationale + usage: brand.md.

   Fonts: Barlow (DIN-style, matches the box type), normal width only. The box lettering
   measures as wide as Barlow 700 (CONSISTENCY / BUILDS / RESULTS width ÷ cap height:
   board 9.36 / 5.23 / 6.31, Barlow 9.28 / 4.80 / 5.94); a condensed cut reads too sporty.
   index.html may also add, before this stylesheet:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   The @import below keeps this file self-contained.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap");

:root {
  color-scheme: dark;

  /* ---------- Raw palette ----------
     Official brand kit (designer, 2026-11-05: assets/2 copy.pdf): black #000000 and green #9CCD72;
     the kit's print rich black #231F20 and logo white #F1F2F2 are taken from the same file.
     Supersedes the earlier values sampled from the packaging mock-up (charcoal #303436, lime #C3F65A).
     Token names stay (carton/lime…) so every component and the 3D story pick the new colours up. */
  --ff-carton:        #000000; /* Brand Black: page base, box print ground          */
  --ff-carton-side:   #161314; /* Black/Rich mix: alternate sections                 */
  --ff-crimp:         #000000; /* Brand Black: wells, deepest shade                  */
  --ff-carton-lit:    #231F20; /* Rich Black (print): raised panels                  */
  --ff-fold:          #3A3536; /* Fold Line: hairlines, folds (decorative only)      */
  --ff-fold-strong:   #7E7778; /* Score Line: input borders, 3:1 UI boundary         */

  --ff-lime:          #9CCD72; /* Brand Green: logo bolt, accents, CTA (11.4:1 on black) */
  --ff-lime-shade:    #86B95E; /* Green Shade: pressed, inner wall in half-shadow    */
  --ff-lime-deep:     #4E7A2E; /* Green Deep: 3D shading only, never for text        */

  --ff-paper:         #F1F2F2; /* Logo White: logo letters, text on black            */
  --ff-grey:          #A7A9AC; /* Grey: secondary text (8.8:1 on black, 6.8:1 on rich black) */
  --ff-ink:           #231F20; /* Rich Black: text on green (8.9:1)                  */
  --ff-ink-soft:      #34452A; /* Olive Ink: secondary text on green (5.5:1)         */
  --ff-signal:        #FF8F75; /* Signal: errors only                                */

  /* ---------- Semantic roles (exterior = charcoal; remapped by .ff-interior) ---------- */
  --ff-bg:            var(--ff-carton);
  --ff-surface:       var(--ff-carton-side);
  --ff-surface-raised:var(--ff-carton-lit);
  --ff-well:          var(--ff-crimp);
  --ff-text:          var(--ff-paper);
  --ff-text-muted:    var(--ff-grey);
  --ff-accent:        var(--ff-lime);
  --ff-on-accent:     var(--ff-ink);
  --ff-line:          var(--ff-fold);
  --ff-line-strong:   var(--ff-fold-strong);
  --ff-focus:         var(--ff-lime);
  --ff-logo-bolt:     var(--ff-lime);
  --ff-scrim:         rgb(0 0 0 / 0.78);

  /* ---------- Type ---------- */
  --ff-font-body:    "Barlow", "Bahnschrift", "DIN Alternate", "DIN Next", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ff-font-display: "Barlow", "Bahnschrift", "DIN Alternate", "DIN Next", "Helvetica Neue", Arial, sans-serif; /* at 700 */

  /* scale: 12 · 14 · 16 · 18 · 21 · 24 · 36 · 48/60 · 72/88 · 108 (classic typographic scale;
     the two display steps sit ~9% under 96/120 because the normal-width face sets wider) */
  --ff-text-2xs: 0.75rem;                                    /* 12  legal fine print only  */
  --ff-text-xs:  0.875rem;                                   /* 14  meta, captions         */
  --ff-text-sm:  1rem;                                       /* 16  UI, small body         */
  --ff-text-md:  clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);  /* 17→18 body                 */
  --ff-text-lg:  clamp(1.1875rem, 1.05rem + 0.5vw, 1.3125rem);/* 19→21 lead                */
  --ff-text-xl:  1.5rem;                                     /* 24  h3, card titles        */
  --ff-text-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);    /* 28→36 h3 large / numbers   */
  --ff-text-3xl: clamp(2.25rem, 1.3rem + 3.4vw, 3.75rem);    /* 36→60 h2 statements        */
  --ff-text-4xl: clamp(2.75rem, 1.5rem + 5.1vw, 5.5rem);     /* 44→88 display              */
  --ff-text-5xl: clamp(3.25rem, 1.15rem + 8vw, 6.75rem);     /* 52→108 hero/statement      */

  --ff-weight-regular: 400;
  --ff-weight-medium:  500;
  --ff-weight-semi:    600;
  --ff-weight-bold:    700;
  --ff-weight-heavy:   800;

  --ff-leading-display: 0.92;
  --ff-leading-heading: 1.0;
  --ff-leading-snug:    1.25;
  --ff-leading-body:    1.55;

  --ff-track-display: 0.005em;
  --ff-track-heading: 0.02em;   /* "CONSISTENCY BUILDS RESULTS"             */
  --ff-track-label:   0.14em;   /* buttons, "TEAR HERE", small stamps       */
  --ff-track-tagline: 0.32em;   /* "F U E L  Y O U R  N E X T  S E T"        */

  --ff-measure: 62ch;           /* body line length cap                     */

  /* ---------- Space (4 px base) ---------- */
  --ff-space-1:  0.25rem;  /*   4 */
  --ff-space-2:  0.5rem;   /*   8 */
  --ff-space-3:  0.75rem;  /*  12 */
  --ff-space-4:  1rem;     /*  16 */
  --ff-space-5:  1.5rem;   /*  24 */
  --ff-space-6:  2rem;     /*  32 */
  --ff-space-7:  3rem;     /*  48 */
  --ff-space-8:  4rem;     /*  64 */
  --ff-space-9:  6rem;     /*  96 */
  --ff-space-10: 8rem;     /* 128 */
  --ff-section-y: clamp(4.5rem, 2rem + 9vw, 10rem);

  /* ---------- Layout ---------- */
  --ff-container: 77.5rem;                         /* 1240 */
  --ff-container-narrow: 48rem;                    /*  768 */
  --ff-gutter: clamp(1rem, 0.4rem + 3vw, 3rem);    /* 16 → 48 */
  --ff-header-h: 72px;                             /* story keeps this clear */

  /* ---------- Shape ---------- */
  --ff-radius-0: 0;
  --ff-radius-1: 2px;      /* carton panels, inputs (a folded edge, not a pill) */
  --ff-radius-2: 4px;      /* phone / app frames                                 */
  --ff-radius-round: 999px;/* dots, avatars only                                  */
  --ff-chamfer: 9px;       /* 45° tuck-flap cut on primary buttons               */
  --ff-hairline: 1px;
  --ff-rule: 1.5px;        /* dashed sticker frame, fold lines                   */
  --ff-bar-w: 2.25rem;     /* lime underline bar                                 */
  --ff-bar-h: 4px;

  /* ---------- Depth: matte carton, no soft drop shadows ---------- */
  --ff-edge-fold: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 -1px 0 rgb(0 0 0 / 0.35);
  --ff-shadow-lift: 0 28px 48px -28px rgb(0 0 0 / 0.65);   /* floating overlays only */

  /* ---------- Motifs ---------- */
  --ff-slash-angle: 123deg;  /* CSS gradient angle → stripes rising at 57°, the pack-bolt slash angle */
  --ff-slash-skew: -33deg;   /* same angle as a skewX for slabs (90° − 57°) */
  --ff-hatch: repeating-linear-gradient(var(--ff-slash-angle), rgb(255 255 255 / 0.03) 0 1px, transparent 1px 6px);
  --ff-dots:  radial-gradient(circle, rgb(255 255 255 / 0.10) 0.9px, transparent 1.3px) 0 0 / 7px 7px;
  --ff-perf-dash: 12px;
  --ff-perf-gap:  7px;

  /* ---------- Icons ---------- */
  --ff-icon-sm: 16px;
  --ff-icon-md: 24px;
  --ff-icon-lg: 32px;
  --ff-icon-stroke: 1.75;

  /* ---------- Motion ---------- */
  --ff-dur-instant: 120ms;  /* press, toggle            */
  --ff-dur-quick:   200ms;  /* hover, focus, bar grow   */
  --ff-dur-move:    320ms;  /* card swap, panel         */
  --ff-dur-tear:    700ms;  /* perforation rip, once    */
  --ff-ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ff-ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --ff-ease-lid:  cubic-bezier(0.65, 0, 0.35, 1);   /* cinematic lid / box moves */
  --ff-ease-snap: cubic-bezier(0.3, 1.35, 0.5, 1);  /* a pop that settles (ingredient landing) */

  /* ---------- Layers ---------- */
  --ff-z-base: 0;
  --ff-z-raised: 10;
  --ff-z-story-ui: 20;
  --ff-z-header: 100;
  --ff-z-overlay: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ff-dur-instant: 0.01ms;
    --ff-dur-quick: 0.01ms;
    --ff-dur-move: 0.01ms;
    --ff-dur-tear: 0.01ms;
  }
}

/* Inside the box: the lime interior. Any element can carry it; components re-theme. */
.ff-interior {
  --ff-bg: var(--ff-lime);
  --ff-surface: var(--ff-lime-shade);
  --ff-surface-raised: var(--ff-ink);
  --ff-well: var(--ff-ink);
  --ff-text: var(--ff-ink);
  --ff-text-muted: var(--ff-ink-soft);
  --ff-accent: var(--ff-ink);
  --ff-on-accent: var(--ff-paper);
  --ff-line: rgb(30 33 34 / 0.28);
  --ff-line-strong: var(--ff-ink);
  --ff-focus: var(--ff-ink);
  --ff-logo-bolt: var(--ff-ink);
  background-color: var(--ff-lime);
  /* the inner wall: a crease and a soft shade where the box wall meets the lid */
  background-image: linear-gradient(to bottom, rgb(30 33 34 / 0.22) 0 1px, rgb(94 154 16 / 0.28) 1px, transparent 3rem);
  color: var(--ff-ink);
}

/* Back outside: a charcoal face nested inside the lime (the lid panel, the box's front wall,
   a sachet card). Restores the exterior roles. */
.ff-exterior {
  --ff-bg: var(--ff-carton);
  --ff-surface: var(--ff-carton-side);
  --ff-surface-raised: var(--ff-carton-lit);
  --ff-well: var(--ff-crimp);
  --ff-text: var(--ff-paper);
  --ff-text-muted: var(--ff-grey);
  --ff-accent: var(--ff-lime);
  --ff-on-accent: var(--ff-ink);
  --ff-line: var(--ff-fold);
  --ff-line-strong: var(--ff-fold-strong);
  --ff-focus: var(--ff-lime);
  --ff-logo-bolt: var(--ff-lime);
  background-color: var(--ff-carton);
  color: var(--ff-paper);
}

/* Darker side panel (alternate exterior surface). */
.ff-side {
  --ff-bg: var(--ff-carton-side);
  --ff-surface: var(--ff-carton);
  background-color: var(--ff-carton-side);
}

/* ==========================================================================
   Base (zero-specificity so components always win)
   ========================================================================== */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) {
  margin: 0;
  background: var(--ff-carton);
  color: var(--ff-text);
  font-family: var(--ff-font-body);
  font-size: var(--ff-text-md);
  font-weight: var(--ff-weight-regular);
  line-height: var(--ff-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(h1, h2) {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-weight-bold);
  line-height: var(--ff-leading-heading);
  letter-spacing: var(--ff-track-heading);
  text-transform: uppercase;
  text-wrap: balance;
}
:where(h3, h4) {
  font-family: var(--ff-font-body);
  font-weight: var(--ff-weight-semi);
  font-size: var(--ff-text-xl);
  line-height: var(--ff-leading-snug);
  text-wrap: balance;
}
:where(p) { max-width: var(--ff-measure); text-wrap: pretty; }
:where(img, svg, video, canvas) { display: block; max-width: 100%; }
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (hover: hover) {           /* hover styles only where a pointer can hover: a tap must not leave them painted */
  :where(a:hover) { text-decoration-color: var(--ff-accent); }
}
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button, [role="button"], a, summary, label[for]) { cursor: pointer; touch-action: manipulation; }
:where(strong, b) { font-weight: var(--ff-weight-semi); }
:where(small) { font-size: var(--ff-text-xs); }
:where(hr) { border: 0; border-top: var(--ff-hairline) solid var(--ff-line); margin: 0; }

:where(:focus-visible) {
  outline: 2px solid var(--ff-focus);
  outline-offset: 3px;
}
::selection { background: var(--ff-lime); color: var(--ff-ink); }

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

/* ==========================================================================
   Utilities + small components
   ========================================================================== */

/* Layout */
.ff-container {
  width: 100%;
  max-width: calc(var(--ff-container) + 2 * var(--ff-gutter));
  margin-inline: auto;
  padding-inline: var(--ff-gutter);
}
.ff-container--narrow { max-width: calc(var(--ff-container-narrow) + 2 * var(--ff-gutter)); }
.ff-section { padding-block: var(--ff-section-y); }

.ff-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ff-skip {
  position: fixed; left: var(--ff-space-4); top: var(--ff-space-4); z-index: var(--ff-z-overlay);
  padding: var(--ff-space-3) var(--ff-space-4);
  background: var(--ff-lime); color: var(--ff-ink);
  font-weight: var(--ff-weight-bold); text-decoration: none;
  transform: translateY(-200%);
}
.ff-skip:focus-visible { transform: none; outline-color: var(--ff-paper); }

/* Type roles */
.ff-display {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-weight-bold);
  font-size: var(--ff-text-4xl);
  line-height: var(--ff-leading-display);
  letter-spacing: var(--ff-track-display);
  text-transform: uppercase;
}
.ff-statement {           /* stacked side-panel statement: MORE ENERGY / MORE PROGRESS */
  font-family: var(--ff-font-display);
  font-weight: var(--ff-weight-bold);
  font-size: var(--ff-text-3xl);
  line-height: var(--ff-leading-heading);
  letter-spacing: var(--ff-track-heading);
  text-transform: uppercase;
}
.ff-title {               /* h3-level, sentence case */
  font-family: var(--ff-font-body);
  font-weight: var(--ff-weight-semi);
  font-size: var(--ff-text-xl);
  line-height: var(--ff-leading-snug);
}
.ff-lead { font-size: var(--ff-text-lg); line-height: 1.45; color: var(--ff-text); max-width: 54ch; }
.ff-muted { color: var(--ff-text-muted); }
.ff-fine { font-size: var(--ff-text-xs); line-height: 1.5; color: var(--ff-text-muted); }
.ff-num {                 /* "28" — sachet counts, days, price slots */
  font-family: var(--ff-font-display);
  font-weight: var(--ff-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}

/* The box tagline: wide-tracked uppercase sign-off. One per view, never an eyebrow. */
.ff-tagline {
  font-family: var(--ff-font-body);
  font-weight: var(--ff-weight-semi);
  font-size: clamp(0.9375rem, 0.8rem + 0.6vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: var(--ff-track-tagline);
  text-transform: uppercase;
  /* tracking adds a trailing gap after the last glyph; pull it back so centring stays true */
  margin-inline-end: calc(-1 * var(--ff-track-tagline));
}
.ff-tagline--sm { font-size: var(--ff-text-xs); letter-spacing: 0.24em; }

/* Stamp: the box's top-left block "28 SACHETS | DAILY PERFORMANCE SUPPORT".
   At most one per section, and only where the content has a real number or fact to stamp. */
.ff-stamp {
  display: inline-flex; align-items: center; gap: var(--ff-space-3);
  font-weight: var(--ff-weight-semi);
  font-size: var(--ff-text-2xs);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-text);
}
.ff-stamp__big {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-weight-bold);
  font-size: 2.25em;
  letter-spacing: 0;
  line-height: 0.9;
}
.ff-stamp__group { display: grid; justify-items: start; gap: 0.25em; }   /* "28" over "SACHETS" */
.ff-stamp__rule { align-self: stretch; width: 1px; background: var(--ff-line-strong); opacity: 0.6; }

/* Lime underline bar: the short bar printed under every box heading. */
.ff-bar::after {
  content: "";
  display: block;
  width: var(--ff-bar-w);
  height: var(--ff-bar-h);
  margin-top: 0.42em;
  background: var(--ff-accent);
}
.ff-bar--center::after { margin-inline: auto; }

/* Pipe-separated triad: ENERGY | FOCUS | RECOVERY (bottom face). Stays on one line down to 320 px. */
.ff-triad {
  --triad-gap: clamp(0.625rem, 0.2rem + 2.2vw, 1.5rem);
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  margin: 0; padding: 0; list-style: none;
  font-weight: var(--ff-weight-semi);
  font-size: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem);
  letter-spacing: clamp(0.16em, 0.06em + 0.7vw, 0.3em);
  text-transform: uppercase;
  white-space: nowrap;
}
.ff-triad > li + li::before {
  content: "";
  display: inline-block;
  width: 2px; height: 1.1em;
  margin-inline: var(--triad-gap);
  vertical-align: -0.2em;
  background: var(--ff-accent);
}

/* Buttons */
.ff-btn {
  --btn-bg: var(--ff-accent);
  --btn-fg: var(--ff-on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ff-space-3);
  min-height: 3rem;
  padding: 0 calc(var(--ff-space-5) + 2px);
  border: 0;
  color: var(--btn-fg);
  /* tuck-flap chamfers (top-left + bottom-right) cut with a gradient so the focus ring stays intact */
  background: linear-gradient(135deg, transparent var(--ff-chamfer), var(--btn-bg) var(--ff-chamfer) calc(100% - var(--ff-chamfer)), transparent calc(100% - var(--ff-chamfer)));
  font-family: var(--ff-font-body);
  font-weight: var(--ff-weight-bold);
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--ff-dur-instant) var(--ff-ease-out), filter var(--ff-dur-quick) var(--ff-ease-out);
}
@media (hover: hover) { .ff-btn:hover { filter: brightness(1.06) saturate(1.05); } }
.ff-btn:active { transform: translateY(1px); --btn-bg: var(--ff-lime-shade); }
.ff-btn .ff-icon { width: 20px; height: 20px; }
.ff-btn--lg { min-height: 3.5rem; font-size: 1.125rem; padding-inline: var(--ff-space-6); }
/* on the lime interior, the primary inverts to an ink slab (tokens already remap; this fixes hover + :active) */
@media (hover: hover) { .ff-interior .ff-btn:hover { filter: none; --btn-bg: #3A3536; } }
.ff-interior .ff-btn:active { --btn-bg: var(--ff-crimp); }
/* …but a charcoal face nested in the lime (a refill card, the lid) is outside again: keep the lime slab */
@media (hover: hover) { .ff-interior .ff-exterior .ff-btn:hover { --btn-bg: var(--ff-accent); filter: brightness(1.06) saturate(1.05); } }
.ff-interior .ff-exterior .ff-btn:active { --btn-bg: var(--ff-lime-shade); }

/* Secondary: a label that carries the lime underline bar; the bar runs out on hover/focus */
.ff-link {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.45em;
  min-height: 2.75rem; justify-content: center;
  padding: 0;
  border: 0; background: none;
  color: var(--ff-text);
  font-weight: var(--ff-weight-semi);
  font-size: 1.0625rem;
  text-decoration: none;
}
.ff-link::after {
  content: ""; display: block;
  width: var(--ff-bar-w); height: 3px;
  background: var(--ff-accent);
  transition: width var(--ff-dur-quick) var(--ff-ease-out);
}
.ff-link:focus-visible::after { width: 100%; }
@media (hover: hover) { .ff-link:hover::after { width: 100%; } }

/* Icon-only square control (story arrows, carousel) */
.ff-icon-btn {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem;
  padding: 0;
  border: var(--ff-rule) solid var(--ff-line-strong);
  border-radius: var(--ff-radius-1);
  background: transparent;
  color: var(--ff-text);
  transition: background-color var(--ff-dur-quick) var(--ff-ease-out), color var(--ff-dur-quick) var(--ff-ease-out), border-color var(--ff-dur-quick);
}
@media (hover: hover) {
  .ff-icon-btn:hover { background: var(--ff-accent); border-color: var(--ff-accent); color: var(--ff-on-accent); }
}
.ff-icon-btn:active { background: var(--ff-accent); border-color: var(--ff-accent); color: var(--ff-on-accent); }
.ff-icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Icons */
.ff-icon { width: var(--ff-icon-md); height: var(--ff-icon-md); flex: none; color: currentColor; }
.ff-icon--sm { width: var(--ff-icon-sm); height: var(--ff-icon-sm); }
.ff-icon--lg { width: var(--ff-icon-lg); height: var(--ff-icon-lg); --ff-icon-stroke: 1.5; }
.ff-icon--accent { color: var(--ff-accent); }

/* Logo: <svg class="ff-logo" viewBox="0 0 255.801 107.945" role="img" aria-label="FluoFit"><use href="assets/logo.svg#ff-logo"/></svg> */
.ff-logo { display: block; height: 34px; width: auto; aspect-ratio: 255.801 / 107.945; color: var(--ff-text); } /* bolt follows the theme: lime outside, ink inside */
.ff-logo--ink  { color: var(--ff-ink); --ff-logo-bolt: var(--ff-ink); }   /* on the lime interior */
.ff-logo--mono { --ff-logo-bolt: currentColor; }                          /* single colour, any ground */

/* Fold line: grey dashed score, the box's fold/score line */
.ff-fold {
  height: var(--ff-rule); border: 0; margin: 0;
  background: repeating-linear-gradient(90deg, var(--ff-line) 0 6px, transparent 6px 10px);
}

/* Tear strip: the one threshold between outside (charcoal) and inside (lime) */
.ff-tear {
  position: relative;
  display: grid; place-items: center;
  min-height: 4.5rem;
  padding-block: var(--ff-space-4);
  background: var(--ff-carton) var(--ff-hatch);
  color: var(--ff-paper);
}
.ff-tear::before,             /* fold line above (grey) */
.ff-tear::after {             /* perforation below (lime) */
  content: "";
  position: absolute; left: 0; right: 0;
  height: 2px;
}
.ff-tear::before { top: 10px; height: 1px; background: repeating-linear-gradient(90deg, rgb(244 246 243 / 0.28) 0 6px, transparent 6px 11px); }
.ff-tear::after  {
  bottom: 10px;
  background: repeating-linear-gradient(90deg, var(--ff-lime) 0 var(--ff-perf-dash), transparent var(--ff-perf-dash) calc(var(--ff-perf-dash) + var(--ff-perf-gap)));
  transform-origin: left center;
}
.ff-tear__label {
  display: inline-flex; align-items: center; gap: var(--ff-space-4);
  font-weight: var(--ff-weight-semi);
  font-size: var(--ff-text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ff-tear__label::before,
.ff-tear__label::after {
  content: ""; width: 9px; height: 11px; background: currentColor;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.ff-tear__label::after { clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* one-time rip when the strip enters view (add .is-torn from JS; static without it) */
@media (prefers-reduced-motion: no-preference) {
  .ff-tear.is-armed::after { transform: scaleX(0); }
  .ff-tear.is-torn::after  { transform: scaleX(1); transition: transform var(--ff-dur-tear) var(--ff-ease-lid); }
}

/* QR sticker slot: dashed frame for "scan here" moments and for numbers not decided yet */
.ff-slot {
  display: inline-grid; place-items: center; gap: var(--ff-space-2);
  padding: var(--ff-space-4) var(--ff-space-5);
  border: var(--ff-rule) dashed color-mix(in srgb, var(--ff-text) 55%, transparent);
  border-radius: var(--ff-radius-1);
  color: var(--ff-text);
  text-align: center;
  font-weight: var(--ff-weight-medium);
  font-size: var(--ff-text-xs);
  letter-spacing: var(--ff-track-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.ff-slot--value {               /* "— €" price / "— %" placeholders */
  padding: var(--ff-space-1) var(--ff-space-3);
  font-family: var(--ff-font-display);
  font-size: var(--ff-text-2xl);
  font-weight: var(--ff-weight-bold);
  letter-spacing: 0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* Carton panel: a flat box face with folded edges. Use for grouped content, not as a card grid. */
.ff-panel {
  background: var(--ff-surface-raised) var(--ff-hatch);
  border-radius: var(--ff-radius-1);
  box-shadow: var(--ff-edge-fold);
  padding: clamp(var(--ff-space-5), 3vw, var(--ff-space-7));
}

/* Textures */
.ff-hatch { background-image: var(--ff-hatch); }
.ff-dots  { background: var(--ff-dots); }

/* Bolt slash: decorative lime slashes at the box angle. Place on a positioned parent. */
.ff-slash {
  position: absolute; pointer-events: none;
  width: clamp(3rem, 8vw, 7rem); height: 140%;
  background: var(--ff-lime);
  transform: skewX(var(--ff-slash-skew));
}

/* Sachet rack: 28 stick sachets in two rows of 14, the Box as a supply meter */
.ff-rack {
  --rack-gap: clamp(3px, 0.5vw, 6px);
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: calc(var(--rack-gap) * 2.5) var(--rack-gap);
  max-width: 34rem;
  margin: 0; padding: 0; list-style: none;
}
.ff-rack > * {
  aspect-ratio: 1 / 3.4;
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 4px) top / 100% 9% no-repeat,
    var(--ff-surface-raised);          /* lit carton outside, ink sachets inside the lime */
}
.ff-rack > .is-used { background: transparent; box-shadow: inset 0 0 0 1px var(--ff-line); }
.ff-rack > .is-low { background-color: var(--ff-lime); }                          /* the last 7 */
.ff-interior .ff-rack > .is-low { background-color: var(--ff-ink); box-shadow: inset 0 0 0 2px var(--ff-paper); }

/* Form field */
.ff-input {
  width: 100%; min-height: 3rem;
  padding: 0 var(--ff-space-4);
  background: var(--ff-well);
  border: var(--ff-rule) solid var(--ff-line-strong);
  border-radius: var(--ff-radius-1);
  color: var(--ff-paper);
}
.ff-input::placeholder { color: var(--ff-grey); }
.ff-input:focus-visible { outline: 2px solid var(--ff-focus); outline-offset: 2px; border-color: transparent; }
.ff-error { color: var(--ff-signal); font-size: var(--ff-text-xs); }
.ff-interior .ff-error { color: var(--ff-ink); font-weight: var(--ff-weight-bold); }