/* ============================================================
   Vital Vybez, The Range (/flavours/)
   ------------------------------------------------------------
   The product page. One card per flagship: the checkered pair,
   the allergens, and the full per-100g nutrition panel, with the
   figures we hold shown and everything still in the lab marked
   as such rather than guessed.
   Loaded after brand.css + public.css, on /flavours/ only.
   Every colour is a token from brand.css. No raw hex.
   ============================================================ */

body.flav-page {
  /* Quiet ink, mixed from two tokens rather than imported as a grey. */
  --ink-quiet: color-mix(in srgb, var(--vv-dark-green) 66%, var(--vv-white));
  --ink-quiet-dark: color-mix(in srgb, var(--vv-cream) 74%, var(--vv-black));
}

/* ---------- Hero: the range, stated ---------- */
.hero-range {
  background: var(--vv-black); color: var(--vv-cream);
  position: relative; overflow: hidden; border-bottom: 3px solid var(--vv-black);
}
.hero-range__in {
  position: relative; z-index: 1;
  max-width: var(--max-width); margin: 0 auto;
  padding: clamp(56px, 9vw, 116px) clamp(20px, 5vw, 44px) clamp(48px, 8vw, 96px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-12); align-items: center;
}
@media (max-width: 900px) { .hero-range__in { grid-template-columns: 1fr; gap: var(--space-8); } }
.hero-range__title {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--track-display); line-height: 1.0;
  font-size: clamp(2.5rem, 7vw, 5.4rem); color: var(--vv-yellow);
}
.hero-range__title .accent { color: var(--vv-cream); }
.hero-range__sub { font-size: 1.1rem; max-width: 48ch; margin-top: var(--space-5); }
.hero-range__sub + .hero-range__sub { color: var(--ink-quiet-dark); font-size: 1rem; }
.hero-range__art { margin: 0; }
.hero-range__art img { display: block; width: 100%; height: auto; }
.hero-range__meta {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 2px solid color-mix(in srgb, var(--vv-cream) 26%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vv-cream);
}

/* ---------- The page-level honesty note ---------- */
.range-note { max-width: 88ch; }
.range-note strong { font-family: var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; }
.range-note__key {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  border: 2px dashed var(--vv-dark-green); border-radius: 3px;
  padding: 1px 6px; background: transparent; color: var(--vv-dark-green); white-space: nowrap;
}

/* ---------- Family key (the brand's own kitchen colour code) ---------- */
.fam-key {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6);
}
.fam-key__row {
  display: flex; align-items: center; gap: var(--space-2);
  border: 2px solid var(--vv-black); border-radius: var(--radius-sm);
  background: var(--vv-white); padding: 6px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vv-dark-green);
}
.fam-key__dot { width: 14px; height: 14px; border: 2px solid var(--vv-black); border-radius: 50%; background: var(--f); flex: none; }

/* ---------- Filter bar ----------
   Sticky under the site header. --bar-top is the measured header
   height, set by flavours.js, so the bar parks flush beneath it
   instead of sliding under it at any breakpoint. */
.range-bar {
  position: sticky; top: var(--bar-top, 0px); z-index: 20;
  background: var(--vv-cream); border-top: 3px solid var(--vv-black); border-bottom: 3px solid var(--vv-black);
}
.range-bar__in {
  max-width: var(--max-width); margin: 0 auto;
  padding: var(--space-3) clamp(20px, 5vw, 44px);
  display: flex; align-items: center; gap: var(--space-3) var(--space-6); flex-wrap: wrap;
}
.range-bar__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vv-dark-green);
}
.rg-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.rg-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: .82rem; line-height: 1;
  background: transparent; color: var(--vv-dark-green);
  border: 2px solid var(--vv-black); border-radius: var(--radius-pill);
  cursor: pointer; transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.rg-chip:hover { background: color-mix(in srgb, var(--vv-dark-green) 12%, var(--vv-cream)); }
.rg-chip[aria-pressed="true"] { background: var(--vv-dark-green); color: var(--vv-yellow); }
/* The kitchen colour code, carried into the filter (brand guide,
   System 1: red is meat, green is vegan, blue is fish). */
.rg-chip__dot {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  border: 2px solid var(--vv-black); background: var(--f, var(--vv-dark-green));
}
.rg-chip[aria-pressed="true"] .rg-chip__dot { border-color: var(--vv-yellow); }
.rg-chip__n {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0;
  background: var(--vv-yellow); color: var(--vv-black);
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
}
.rg-chip[aria-pressed="true"] .rg-chip__n { background: var(--vv-cream); color: var(--vv-black); }
.range-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet);
}
@media (max-width: 720px) { .range-count { margin-left: 0; flex-basis: 100%; } }

/* ---------- The grid of design cards ---------- */
.flgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--space-6);
}
@media (max-width: 520px) { .flgrid { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---------- One flavour card ---------- */
.fcard {
  --c: var(--vv-green);
  position: relative;
  display: flex; flex-direction: column;
  background: var(--vv-white);
  border: 3px solid var(--vv-black); border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .fcard:hover { transform: translateY(-3px); box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 30%, transparent); }
}
/* The flavour's own colour as a squared rule across the top edge. */
.fcard__rule { height: 8px; background: var(--c); flex: none; }

.fcard__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5) 0;
}
.fcard__no {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--ink-quiet);
}
.fcard__cat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  border: 2px solid var(--vv-black); border-radius: var(--radius-pill);
  padding: 2px 9px; color: var(--vv-black);
  background: color-mix(in srgb, var(--c) 22%, var(--vv-white));
}

/* The shot sits on the flavour's checkered band so every card is
   identifiable at a glance, the way the wrapping paper is. */
.fcard__shot { margin: var(--space-4) 0 0; padding: 0 var(--space-5); }
.fcard__shot img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--vv-cream); border: 2px solid var(--vv-black); border-radius: var(--radius-sm);
}
.fcard__band { height: 16px; margin-top: var(--space-4); border-top: 2px solid var(--vv-black); border-bottom: 2px solid var(--vv-black); }

.fcard__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; gap: var(--space-4); }
.fcard__name {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--track-display); line-height: 1.04;
  font-size: 1.5rem; color: var(--vv-dark-green); margin: 0;
}
.fcard__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.fcard__island { display: inline-flex; align-items: center; gap: 7px; }
.fcard__island img { display: block; width: 20px; height: 15px; border: 1px solid var(--vv-black); object-fit: cover; }

/* ---------- Allergens ---------- */
.al {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid var(--vv-black); border-radius: 3px; padding: 3px 7px;
}
.al--has { background: color-mix(in srgb, var(--vv-purple) 16%, var(--vv-white)); color: var(--vv-dark-green); border-color: var(--vv-purple); }
.al--may { background: transparent; border-style: dashed; color: var(--ink-quiet); }
.al-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.al-group + .al-group { margin-top: 6px; }
.al-group__k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-quiet); min-width: 74px;
}

/* ---------- Nutrition panel ---------- */
.fnut { border: 2px solid var(--vv-black); border-radius: var(--radius-sm); overflow: hidden; }
.fnut__cap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--vv-dark-green); color: var(--vv-cream);
  padding: 7px var(--space-3);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.fnut__cap b { color: var(--vv-yellow); font-weight: 400; }
.fnut__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--vv-black); gap: 1px;
}
@media (max-width: 400px) { .fnut__grid { grid-template-columns: repeat(2, 1fr); } }
.fnut__cell {
  background: var(--vv-white); padding: 9px 8px 10px;
  display: flex; flex-direction: column; gap: 3px; min-height: 58px;
}
.fnut__cell--fuel { background: color-mix(in srgb, var(--c) 16%, var(--vv-white)); }
.fnut__k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.fnut__v {
  font-family: var(--font-display); letter-spacing: var(--track-display);
  font-size: 1.22rem; line-height: 1; color: var(--vv-dark-green);
}
.fnut__v small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0; margin-left: 2px; color: var(--ink-quiet); }
/* Not held yet. Deliberately quiet, never dressed up as a number. */
.fnut__cell--test { background: color-mix(in srgb, var(--vv-cream) 46%, var(--vv-white)); }
.fnut__cell--test .fnut__v {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-quiet);
  border-bottom: 1px dashed var(--ink-quiet); padding-bottom: 2px; align-self: flex-start;
}

/* How much of this panel is signed off today, as a thin measure. */
.fnut__meter { height: 7px; background: var(--vv-cream); border-bottom: 2px solid var(--vv-black); }
.fnut__meter span {
  display: block; height: 100%; width: var(--done, 0%);
  background: var(--c);
  transition: width var(--dur-slow) var(--ease-standard);
}
/* The measure draws itself the first time the card arrives, so the
   panel reads as filling up rather than sitting there filled. */
.fcard.is-in .fnut__meter span { animation: vv-meter var(--dur-slow) var(--ease-standard) both; }
@keyframes vv-meter { from { width: 0; } }
.fcard__status {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-quiet); margin: 0;
}

/* ---------- Disclosure: ingredients and cooking ---------- */
.fcard__more {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  background: var(--vv-cream); color: var(--vv-dark-green);
  border: 2px solid var(--vv-black); border-radius: var(--radius-sm);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: .85rem; cursor: pointer;
  transition: background-color var(--dur-base) ease;
}
.fcard__more:hover { background: color-mix(in srgb, var(--c) 20%, var(--vv-cream)); }
.fcard__more svg { flex: none; transition: transform var(--dur-base) var(--ease-standard); }
.fcard__more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Animating grid-template-rows takes the panel from nothing to its
   own height without a hard guess at a max-height. */
.fcard__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
  opacity: 0; visibility: hidden;
}
.fcard__panel.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.fcard__panel > div { overflow: hidden; min-height: 0; }
.fcard__panel-in {
  padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}

/* Each part of the panel is its own labelled sub-card, edge-marked in
   the flavour's own colour, so the accordion reads as branded parts
   rather than one run of text. */
.fsub {
  border: 2px solid var(--vv-black); border-left: 6px solid var(--c);
  border-radius: 3px; background: var(--vv-cream);
  padding: var(--space-3);
}
.fsub__k {
  display: flex; align-items: center; gap: 7px; margin: 0 0 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vv-dark-green);
}
.fsub__k::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--c); border: 1px solid var(--vv-black); }
.fsub__b { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-quiet); }

/* ---------- Reheat: a symbol per method, then one line of guidance ---------- */
.reheat { display: flex; flex-wrap: wrap; gap: 8px; }
.reheat__way {
  flex: 1 1 132px; display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--vv-black); border-radius: 3px;
  background: color-mix(in srgb, var(--c) 12%, var(--vv-white));
  padding: 7px 9px;
}
.reheat__ic { display: inline-flex; color: var(--vv-dark-green); }
.reheat__ic svg {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.reheat__w {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.reheat__t {
  margin-left: auto; white-space: nowrap;
  font-family: var(--font-display); letter-spacing: var(--track-display);
  font-size: .82rem; color: var(--vv-dark-green);
}
.reheat__guide { margin-top: var(--space-2); }

/* The card's own CTA: this flavour can go in a box. */
.fcard__box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 44px; padding: 0 var(--space-4);
  background: var(--vv-yellow); color: var(--vv-black);
  border: 2px solid var(--vv-black); border-radius: var(--radius-sm);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: .82rem;
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.fcard__box:hover { background: var(--vv-black); color: var(--vv-yellow); }
.fcard__box span { transition: transform var(--dur-base) var(--ease-standard); }
.fcard__box:hover span { transform: translateX(3px); }

/* ---------- How to read this page ---------- */
.howto { background: var(--vv-dark-green); color: var(--vv-cream); border-top: 3px solid var(--vv-black); border-bottom: 3px solid var(--vv-black); }
.howto__in { padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(56px, 6vw, 84px); }
.howto__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.howto__item { border-left: 6px solid var(--vv-yellow); padding-left: var(--space-4); }
.howto__k { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display); font-size: 1.1rem; color: var(--vv-yellow); }
.howto__t { margin-top: var(--space-2); font-size: .94rem; color: var(--ink-quiet-dark); line-height: 1.65; }
.howto__t code {
  font-family: var(--font-mono); font-size: .82rem;
  background: color-mix(in srgb, var(--vv-cream) 16%, transparent);
  border-radius: 3px; padding: 1px 5px;
}

/* ---------- Close ---------- */
.range-close { background: var(--vv-yellow); border-top: 3px solid var(--vv-black); }
.range-close__in {
  max-width: var(--max-width); margin: 0 auto; padding: clamp(48px, 6vw, 76px) clamp(20px, 5vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.range-close__t {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.04; color: var(--vv-dark-green); max-width: 24ch;
}

/* ---------- CTA: from the range, into a box ---------- */
.range-boxcta { background: var(--vv-dark-green); color: var(--vv-cream); border-top: 3px solid var(--vv-black); border-bottom: 3px solid var(--vv-black); }
.range-boxcta__in {
  padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
}
.range-boxcta__t {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.04; color: var(--vv-yellow); max-width: 20ch;
}
.range-boxcta__p { margin-top: var(--space-4); max-width: 52ch; color: var(--ink-quiet-dark); font-size: .96rem; line-height: 1.65; }
.range-boxcta__acts { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Reveal (kept local so it cannot collide with the hub) ----------
   Opt-in, the same way home.css does it: the inline script on the page
   adds .vv-motion to the root, so with no JavaScript nothing is ever
   left invisible. A keyframe, not a transition, so the card's own
   transform/box-shadow hover transition stays untouched, and
   `translate` composes with `transform` instead of fighting it. */
.vv-motion .fr { opacity: 0; }
.vv-motion .fr.is-in { animation: vv-fr var(--dur-reveal) var(--ease-standard) var(--d, 0s) both; }
@keyframes vv-fr {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}
/* The hero states itself on arrival, the way the home hero does. */
.vv-motion .hero-range__in > * { animation: vv-fr 0.9s var(--ease-standard) both; }
.vv-motion .hero-range__in > *:nth-child(2) { animation-delay: 0.14s; }

/* Filtered-out cards are taken out of the flow, then eased back. */
.fcard.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vv-motion .fr { opacity: 1; animation: none; }
  .vv-motion .fr.is-in { animation: none; }
  .vv-motion .hero-range__in > * { animation: none; }
  .fcard:hover { transform: none; }
  .fcard__panel { transition: none; }
  .fnut__meter span { transition: none; animation: none; }
}