/* ==========================================================================
   NNP RAISINS — PRODUCTS PAGE, v3 (2026-09-21). Loaded by products/index.html
   only, after site.css.

   v3, his note on v2 ("i see you using same concepts, please make every
   page unique"): THE SPECIFICATION IS THE VISUAL. One pinned bench, the
   fruit on the left and the nine-line standard as six moving instruments on
   the right (products-standard.md); then the packing facts. His call the same
   night: no side-by-side sheet, no closing ask. The v2 chapters are in git.

   Keeps from the site: the palette, Bricolage 800 for display, IBM Plex Mono
   for eyebrows, `.btn`, the 1280 spine via `.wrap`. Shares its glass and
   masthead rules with about.css by copy, not by import: each page's own
   stylesheet is the one thing that page loads beyond site.css.

   ⚠ EVERY MOTION RULE IS `.js`-GATED. The stacked flow layout is the truth on
   a phone, under reduced motion, and without a script.
   ⚠ HIS LAPTOP IS 1270×680. Every chapter is sized in vh with a floor and was
   checked there.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.pd { --pd-bg: #07050d; --pd-line: rgba(242,237,248,.14); --pd-glass: rgba(242,237,248,.06); --pd-r: 14px;
      background: var(--pd-bg); color: var(--chalk); overflow-x: clip; }
/* The page owns the body ground and drops the masthead reserve, as about.css
   and home.css do (GOTCHAS: the paper bar was not the masthead). */
.pd-dark-page, .pd-dark-page body { background: #07050d; }
.pd-dark-page body { padding-top: 0; }

/* ------------------------------------------------------- masthead ----
   Transparent at the very top, glass on scroll: the home page's rule, the
   About page's values. Every band here is dark, so it is never violet. */
.pd-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.pd-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .pd-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.pd-dark-page .masthead .brand { color: #fff; }
.pd-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .pd-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .pd-dark-page .masthead .mainnav a:not(.btn):hover,
  .pd-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .pd-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .pd-dark-page .masthead .btn-primary::before { background: #fff; }
  .pd-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.pd-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 16px; }
  line-height: .94; letter-spacing: -.04em; margin: 0 0 22px; max-width: 12ch; }
.pd-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(38px, 8.6vh, 84px);
  line-height: .94; letter-spacing: -.04em; margin: 0 0 14px; max-width: 12ch; }
.pd-h2-sm { font-size: clamp(32px, 6.2vh, 60px); max-width: 16ch; }
.pd-sub, .pd-lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--chalk-dim); max-width: 54ch; margin: 0; }
.pd-word { display: inline-block; overflow: hidden; vertical-align: top; }
.pd-word > span { display: inline-block; will-change: transform; }

/* ------------------------------------------------------------ glass ---- */
.pd-glass { background: var(--pd-glass); border: 1px solid var(--pd-line); border-radius: var(--pd-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 30px 60px -30px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.btn-ghost-light { background: transparent; color: var(--chalk); border: 1px solid rgba(242,237,248,.38); }
.btn-ghost-light:hover { border-color: var(--chalk); background: rgba(242,237,248,.08); }

/* Reveal: hidden only once the script is confirmed present. */
.js .pd [data-rv] { opacity: 0; transform: translateY(26px); }
.js .pd [data-rv].is-rv { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .pd [data-rv] { opacity: 1; transform: none; } }

/* ============================================================ PACKED ==== */
.pd-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pd-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-bg-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,13,.92) 0%, rgba(7,5,13,.7) 40%, rgba(7,5,13,.85) 100%); }
.pd-pack { position: relative; overflow: hidden; min-height: 100vh; display: grid; align-items: center; padding: clamp(72px, 11vh, 120px) 0; }
/* min-width 0: the wrap is a grid item of .pd-pack and a grid item cannot
   shrink below its content's minimum width, so on a phone the two-column
   facts pushed it to 460px in a 390px screen (his report, 2026-09-21). */
.pd-pack > .wrap { min-width: 0; width: 100%; }
.pd-pack-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pd-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-facts li { padding: clamp(16px, 2.8vh, 24px) 22px; display: grid; gap: 6px; }
/* One mark per fact, his note 2026-09-21 ("the cards lack some icons"). */
.pd-ico { width: 26px; height: 26px; fill: none; stroke: var(--violet-lt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.pd-facts b { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 3.4vh, 28px); letter-spacing: -.03em; line-height: 1; color: #fff; }
.pd-facts span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }

/* ============================================================= BENCH ====
   v3, 2026-09-21. THE SPECIFICATION IS THE VISUAL. One pinned screen: the
   fruit on the left, the instrument panel on the right, the tabs above, a
   progress line at the foot. Scroll walks the five varieties; every
   instrument tweens to the new value (products.js). Without the script the
   bench shows variety 01 and does not pin; the sheet below has all five. */
.pb-bench { position: relative; background: var(--pd-bg); }
.pb-scene { position: relative; }
.pb-pin { position: relative; min-height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 84px 0 0;
  background: linear-gradient(180deg, #07050d 0%, #0c0716 100%); }
/* The glow takes the variety's colour; the script writes --vc and --vd. */
.pb-glow { position: absolute; left: 22%; top: 55%; width: 60vw; height: 80vh; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--vd, #2E1109) 90%, transparent) 0%, color-mix(in srgb, var(--vc, #E8A579) 12%, transparent) 40%, rgba(7,5,13,0) 70%);
  filter: blur(30px); transition: background 1s ease; }
/* The pin is a grid, and a .wrap inside a grid is a grid item: with its
   margin: 0 auto it shrank to its content and centred (the head came out
   1052px wide at 1270 while the stage stretched to the viewport edge).
   Width 100% puts both wrappers back on the spine. */
.pb-pin > .wrap { width: 100%; }
.pb-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.pb-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(30px, 4.4vh, 44px); line-height: 1; letter-spacing: -.035em; margin: 0; }
.pb-head .pd-kick { margin-bottom: 10px; }

/* ---- the tabs ---- */
.pb-tabs { display: flex; gap: 6px; }
.pb-tab { display: grid; justify-items: center; gap: 6px; padding: 8px 10px 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer;
  color: var(--chalk-dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.pb-tab img { width: clamp(34px, 6vh, 48px); height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); opacity: .55; transition: opacity var(--t-hover) ease, transform .4s var(--ease-out); }
.pb-tab:hover { color: #fff; }
.pb-tab:hover img { opacity: 1; }
.pb-tab.is-on { color: #fff; background: rgba(242,237,248,.06); border-color: rgba(242,237,248,.16); }
.pb-tab.is-on img { opacity: 1; transform: translateY(-2px) scale(1.08); }
.pb-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the stage ---- */
.pb-stage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 56px); align-items: center; padding: 12px var(--gut) 8px; }
/* THE SHOWROOM (his brief: the NFS Underground 2 car pick). The wrapper is
   the car: it slides in from one side and out the other, and its image turns
   slowly on the turntable the whole time it is on the floor. The reflection
   is the browser's own, faded off below the fruit; where it is not supported
   there is simply no reflection. Every animated property is composited. */
.pb-pile { position: relative; margin: 0; aspect-ratio: 1; width: min(38vw, 66vh); justify-self: center; overflow: visible; }
.pb-floor { position: absolute; left: 50%; bottom: -6%; width: 120%; height: 22%; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--vc, #E8A579) 28%, transparent) 0%, rgba(7,5,13,0) 70%); filter: blur(14px); transition: background 1s ease; }
.pb-car { position: absolute; inset: 0; z-index: 1; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.pb-car.is-on { opacity: 1; }
.pb-car img { width: 100%; height: 100%; display: block; will-change: transform, filter;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.65));
  -webkit-box-reflect: below -14% linear-gradient(rgba(0,0,0,0) 62%, rgba(0,0,0,.22)); }

/* ---- the panel ---- */
.pb-panel { padding: clamp(14px, 2.4vh, 22px) clamp(16px, 2vw, 24px); display: grid; gap: clamp(10px, 1.8vh, 16px); }
.pb-name { display: grid; gap: 4px; }
.pb-name .pd-kick { margin: 0; }
.pb-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(28px, 5.6vh, 48px); line-height: .96; letter-spacing: -.035em; margin: 0; }
.pb-desc { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(13.5px, 2vh, 16px); line-height: 1.4; color: var(--chalk); }
.pb-desc em { font-style: normal; color: var(--chalk-dim); }
/* minmax(0, 1fr), not 1fr: three plates in the certification cell forced
   that column wider and squeezed the other two until their labels wrapped. */
.pb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pb-inst { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 4px; padding: 10px 12px 10px; border: 1px solid var(--pd-line); border-radius: 10px; background: rgba(7,5,13,.35); min-height: 0; }
.pb-inst > b { font-family: var(--display); font-weight: 800; font-size: clamp(17px, 2.7vh, 22px); letter-spacing: -.02em; line-height: 1; color: #fff; }
.pb-cert > b { font-size: clamp(13px, 2.1vh, 16px); line-height: 1.2; }
.pb-inst > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-inst > span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); }
/* Every instrument's picture has the same box, so the six read as one set. */
.pb-inst > svg, .pb-dish-cup, .pb-gauge, .pb-months, .pb-plates { height: clamp(44px, 8vh, 64px); margin-bottom: 4px; }

/* caliber: the ring */
.pb-caliber svg { width: auto; display: block; }
.pb-ring-track { fill: none; stroke: rgba(242,237,248,.14); stroke-width: 1; stroke-dasharray: 2 3; }
.pb-ring-max { fill: none; stroke: rgba(242,237,248,.3); stroke-width: 1; }
.pb-ring-disc { fill: var(--vc, #E8A579); opacity: .85; }

/* berries per 100 g: the dish */
.pb-dish-cup { aspect-ratio: 1; width: auto; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, rgba(242,237,248,.14), rgba(242,237,248,.02) 70%); box-shadow: 0 0 0 1px rgba(242,237,248,.3) inset; }
.pb-dish-cup img { width: 100%; height: 100%; display: block; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }

/* moisture: the gauge */
.pb-gauge { position: relative; display: block; width: 100%; height: auto !important; min-height: clamp(44px, 8vh, 64px); }
.pb-gauge::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: rgba(242,237,248,.14); border-radius: 2px; }
.pb-gauge i { position: absolute; top: 50%; height: 9px; margin-top: -3px; left: 55%; width: 15%; border-radius: 5px; background: var(--vc, #E8A579); box-shadow: 0 0 14px color-mix(in srgb, var(--vc, #E8A579) 60%, transparent); }
.pb-gauge em { position: absolute; bottom: 0; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--chalk-dim); }
.pb-gauge em:first-of-type { left: 0; }
.pb-gauge em:last-of-type { right: 0; }

/* harvest: the month strip */
.pb-months { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 2px; }
.pb-months i { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; text-align: center; color: rgba(242,237,248,.35); padding-top: 22px; position: relative; }
.pb-months i::before { content: ''; position: absolute; left: 50%; top: 4px; width: 2px; height: 14px; margin-left: -1px; background: rgba(242,237,248,.14); border-radius: 1px; transition: background-color .4s ease, height .4s ease; }
.pb-months i.on { color: #fff; }
.pb-months i.on::before { background: var(--vc, #E8A579); height: 18px; top: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--vc, #E8A579) 70%, transparent); }
.pb-months i.half::before { background: color-mix(in srgb, var(--vc, #E8A579) 50%, transparent); }

/* drying: the mark */
.pb-dry-ico { width: auto; display: block; fill: none; stroke: var(--vc, #E8A579); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* One mark at a time. `hidden` is ignored on SVG groups; the script marks the
   live one with data-on (all three drew on top of each other, 2026-09-21). */
.pb-dry-ico g:not([data-on]) { display: none; }

/* certification: the plates */
.pb-plates { display: flex; gap: 5px; align-items: center; min-width: 0; }
/* The plate may shrink (flex-shrink 1) but its mark did not shrink with it,
   so the EU leaf stood out past the plate on a phone (his screenshot,
   2026-09-21). The mark is capped by the plate's own width as well as by
   pixels, and the plate clips as a belt. */
.pb-plate { display: grid; place-items: center; height: 100%; padding: 0 7px; background: #fff; border-radius: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.pb-plate img { max-height: 58%; max-width: min(72px, 100%); width: auto; height: auto; display: block; object-fit: contain; }
.pb-plate-text { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-dp); white-space: nowrap; }
.pb-plate[hidden] { display: none; }

/* the foot */
.pb-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.pb-uses { margin: 0; font-size: clamp(12.5px, 1.8vh, 14px); line-height: 1.4; color: var(--chalk); }
.pb-uses > span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); margin-right: 8px; }
.pb-uses em { font-style: normal; color: var(--chalk-dim); }

/* progress + hint */
.pb-progress { display: none; }
.pb-hint { display: none; }

/* ==================================================== pinned motion ==== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .pb-scene { height: 460vh; }
  .js .pb-pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .js .pb-progress { display: block; position: absolute; left: var(--spine); right: var(--spine); bottom: 22px; height: 2px; background: rgba(242,237,248,.14); z-index: 3; }
  .js .pb-progress i { display: block; height: 100%; width: 20%; background: var(--vc, #E8A579); transition: width .5s var(--ease-out), background-color .6s ease; }
  .js .pb-hint { display: block; position: absolute; right: var(--spine); bottom: 32px; margin: 0; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); transition: opacity .4s ease; }
  .js .pb-hint.is-off { opacity: 0; }
}
/* Short laptops: his is 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .pb-pin { padding-top: 74px; }
  .pb-h1 { font-size: 30px; }
  .pb-tab { padding: 6px 8px; font-size: 9px; }
  .pb-panel { gap: 10px; }
  .pb-inst { padding: 8px 10px; }
  .pb-inst > svg, .pb-dish-cup, .pb-months, .pb-plates { height: 46px; }
  .pb-gauge { min-height: 46px; }
}

/* ------------------------------------------------------------- phone ---- */
@media (max-width: 900px) {
  .pb-pin { min-height: 0; padding: 96px 0 32px; display: block; }
  .pb-glow { left: 50%; top: 30%; width: 120vw; height: 60vh; }
  .pb-head { grid-template-columns: 1fr; gap: 16px; }
  .pb-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
  .pb-tab { font-size: 9px; }
  .pb-stage { grid-template-columns: 1fr; gap: 8px; padding-top: 8px; }
  .pb-pile { width: 62vw; max-width: 320px; }
  .pb-car img { -webkit-box-reflect: none; }
  .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The certification cell takes the whole row on a phone: two plates in a
     half-width cell had no room. */
  /* Captions wrap on a phone; the desktop clips them to one line. */
  .pb-inst > span { white-space: normal; overflow: visible; text-overflow: clip; }
  .pb-cert, .pb-dry { grid-column: 1 / -1; }
  .pb-dry { grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
  .pb-dry > svg { grid-row: 1 / 3; margin: 0; }
  .pb-plate img { max-width: min(120px, 100%); }
  .pb-inst > svg, .pb-dish-cup, .pb-months, .pb-plates { height: 52px; }
  .pb-foot { grid-template-columns: 1fr; }
  .pb-foot .btn { justify-self: start; }
  .pd-h2 { max-width: none; }
  .pd-pack { min-height: 0; padding: 64px 0; }
  .pd-pack-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-facts li { padding: 16px 16px; }
  .pd-kick, .pd-facts span { font-size: 12px; }
}
@media (max-width: 520px) {
  /* One column of facts on a narrow phone: two columns of mono captions at
     165px each wrapped every second word. */
  .pd-facts { grid-template-columns: minmax(0, 1fr); }
}