/* ==========================================================================
   ZUZU — Component library
   Source of truth: Figma "Home" (node 985:53573). Loaded LAST on every page,
   after tokens/colors.css → tokens/foundation.css → style/visual/elements/
   pebble.css. Every component reads foundation roles (--zz-*) only.

   Contents
     0. Legacy bridge     — repoints the older palette variables to roles
     1. Base              — page surface, headings
     2. Layout            — wrap, section tones, stitched seam
     3. Type              — eyebrow, h2, lede, section heads
     4. Announce bar
     5. Site header       — floating tint bar, nav pills, cart button
     6. Buttons           — .btn, .pb-pill (+ arrow), sizes, tones
     7. Chips & tags      — .pb-tag, .pb-chip
     8. Icon buttons      — .pb-round, .icon-btn, .pb-card__add
     9. Product card      — .pb-card
    10. Rail              — .pb-rail + controls
    11. Category tile     — .pb-tile
    12. Stamp card        — .zz-stamp (philosophy)
    13. Letter            — .zz-letter (founder's note)
    14. Fields
    15. Site footer       — .pb-footer
    16. Reduced motion
    17. Inner-page header — full width, docked
    18. Breadcrumb
    19. Option pickers   — element pills, option rows
    20. Quantity stepper
    21. Trust cards
    22. Accordion
    23. Mini product row  — "Complete the ritual"
    24. Product page      — gallery + buy column
    25. Feature card
    26. Split            — image/text, text/form
    27. Surface card
    28. Chip row
    29. Stacked info list
    30. Form layout + choice chips
    31. Mega menus
    32. Help page pieces — link/media feature cards, table, steps
    33. Element brand    — tones, glyph, seal, spec strip, element card

   See components.html for a live preview of each component.
   ========================================================================== */

/* ---------- 0 · Legacy bridge ---------- */
/* style.css, visual.css, elements.css and pebble.css still reference these
   names; pointing them at the roles re-skins every page in one place. */
:root {
  --black: var(--zz-text);
  --charcoal: var(--zz-text);
  --dark-grey: var(--color-neutral-65);
  --mid-grey: var(--zz-text-muted);
  --grey: var(--zz-text-subtle);
  --light-grey: var(--zz-border);
  --off-white: var(--zz-surface-tint);
  --white: var(--zz-surface);
  --paper: var(--zz-surface);
  --forest: var(--color-botanical-500);
  --forest-deep: var(--color-botanical-700);
  --clay: var(--color-vermilion-700);
  --border: var(--zz-border);
  --border-strong: var(--zz-border-strong);
  --placeholder-fill: var(--zz-surface-tint);
  --placeholder-border: var(--zz-border);

  --color-text: var(--zz-text);
  --color-text-muted: var(--zz-text-muted);
  --color-text-faint: var(--zz-text-subtle);
  --color-text-on-ink: var(--zz-text-on-inverse);
  --color-text-on-inverse: var(--zz-text-on-inverse);
  --color-heading-on-inverse: var(--zz-text-on-inverse);
  --color-ink: var(--zz-text);
  --color-ink-hover: var(--color-neutral-80);
  --color-focus-ring: var(--zz-focus);
  --color-surface: var(--zz-surface);
  --color-surface-alt: var(--zz-surface-tint);
  --color-surface-inverse: var(--zz-surface-inverse);
  --color-border: var(--zz-border);
  --color-border-strong: var(--zz-border-strong);

  --font-display: var(--zz-font-display);

  --pb-dark: var(--zz-surface-inverse);
  --pb-dark-2: var(--color-neutral-80);
  --pb-on-dark: var(--zz-text-on-inverse);
  --pb-on-dark-muted: rgba(251, 247, 238, 0.72);
  --pb-accent: var(--zz-accent);
  --pb-accent-hover: var(--zz-accent-hover);
  --pb-sage: var(--color-botanical-100);
  --pb-wash: var(--zz-surface-tint);
  --pb-card: var(--zz-surface-tint);
  --pb-radius: var(--zz-radius-lg);
  --pb-radius-sm: var(--zz-radius-md);
  --pb-wrap: var(--zz-wrap);
  --pb-ease: var(--zz-ease);
  --radius: var(--zz-radius-sm);
  --radius-media: var(--zz-radius-lg);
}

/* ---------- 1 · Base ---------- */
body { background: var(--zz-surface); color: var(--zz-text); font-family: var(--zz-font-body); }
body::before { display: none; } /* the old paper-grain overlay — the new palette is flat */
h1, h2, .font-display { font-family: var(--zz-font-display); font-weight: 500; letter-spacing: var(--zz-ls-h2); color: var(--zz-text); }
.page--pebble h1, .page--pebble h2, .page--pebble .font-display, .page--pebble h3.font-display { font-weight: 500; }
h1 em, h2 em { font-style: normal; font-weight: inherit; color: var(--zz-text-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--color-dusty-lilac-500); color: var(--color-wine-velvet-900); }
:focus-visible { outline: 2px solid var(--zz-focus); outline-offset: 3px; }

/* ---------- 2 · Layout ---------- */
.pb-wrap, .zz-wrap { max-width: var(--zz-wrap); margin-inline: auto; padding-inline: var(--zz-gutter); }
.pb-section, .zz-section { position: relative; padding-block: var(--zz-section-y); }
.zz-section--base { background: var(--zz-surface); }
.zz-section--tint { background: var(--zz-surface-tint); }
.zz-section--inverse { background: var(--zz-surface-inverse); color: var(--zz-text-on-inverse); }
.zz-section--inverse :is(h1, h2, h3) { color: inherit; }
.zz-section + .zz-section--tint.zz-section--flush,
.zz-section--tint + .zz-section--tint { padding-top: 0; } /* stacked tint bands share one gap */

/* Perforated edge — where two different bands meet, the lower band's top
   edge is punched like a stamp. It overlaps the band above by one hole
   radius and masks round holes out of that strip, so the band above shows
   through. Applied automatically at every tone change (and the hero and
   footer); .zz-seam forces it anywhere else. */
.zz-seam,
.zz-hero + .zz-section,
.zz-pdp + .zz-section,
.zz-section--base + .zz-section--tint,
.zz-section--tint + .zz-section--base,
.zz-section:not(.zz-section--inverse) + .zz-section--inverse,
.zz-section--inverse + .zz-section:not(.zz-section--inverse),
.pb-footer {
  position: relative;
  margin-top: calc(-1 * var(--zz-perf-r));
  padding-top: calc(var(--zz-section-y) + var(--zz-perf-r));
  -webkit-mask:
    radial-gradient(circle var(--zz-perf-r) at 50% 0, #0000 calc(100% - 0.5px), #000) 50% 0 / var(--zz-perf-pitch) var(--zz-perf-r) repeat-x,
    linear-gradient(#000 0 0) 0 var(--zz-perf-r) / 100% calc(100% - var(--zz-perf-r)) no-repeat;
          mask:
    radial-gradient(circle var(--zz-perf-r) at 50% 0, #0000 calc(100% - 0.5px), #000) 50% 0 / var(--zz-perf-pitch) var(--zz-perf-r) repeat-x,
    linear-gradient(#000 0 0) 0 var(--zz-perf-r) / 100% calc(100% - var(--zz-perf-r)) no-repeat;
}
.pb-footer { padding-top: calc(var(--zz-space-9) + var(--zz-perf-r)); }

/* ---------- 3 · Type ---------- */
.pb-eyebrow, .zz-eyebrow {
  display: block; font-family: var(--zz-font-body); font-size: var(--zz-fs-small); line-height: var(--zz-lh-small);
  font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--zz-text-muted);
}
.pb-h2, .zz-h2 {
  font-family: var(--zz-font-display); font-weight: 500; color: var(--zz-text);
  font-size: var(--zz-fs-h2); line-height: var(--zz-lh-h2); letter-spacing: var(--zz-ls-h2); text-wrap: balance;
}
.pb-lede, .zz-lede {
  font-size: var(--zz-fs-lede); line-height: var(--zz-lh-relaxed); letter-spacing: var(--zz-ls-tight);
  color: var(--zz-text-muted); max-width: 30em; text-wrap: pretty;
}
.pb-head, .zz-head { display: grid; justify-items: center; gap: var(--zz-space-4); max-width: 760px; margin: 0 auto var(--zz-space-7); text-align: center; }
.zz-closing { margin: var(--zz-space-6) auto 0; max-width: 34em; text-align: center; font-family: var(--zz-font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.4; color: var(--zz-text); text-wrap: balance; }
.zz-closing em { font-style: italic; color: var(--zz-text); }
.pb-head .pb-lede, .zz-head .zz-lede { margin: 0 auto; max-width: 25em; }
.pb-head .pb-eyebrow { margin: 0; }
.pb-row-head, .zz-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--zz-space-5); margin-bottom: var(--zz-space-6); flex-wrap: wrap; }
.pb-link, .zz-link { display: inline-flex; align-items: center; gap: var(--zz-space-2); font-weight: 600; color: var(--zz-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pb-link .icon, .zz-link .icon { width: 16px; height: 16px; transition: transform var(--zz-dur) var(--zz-ease); }
@media (hover: hover) { .pb-link:hover .icon, .zz-link:hover .icon { transform: translateX(3px); } }

.zz-eyebrow--on-image { color: rgba(251, 247, 238, 0.82); }

/* ---------- 4 · Announce bar ---------- */
.announce, .page--pebble .announce, .home--pebble .announce {
  background: var(--zz-accent); color: rgba(245, 241, 234, 0.82);
  font-family: var(--zz-font-display); font-weight: 500; font-size: var(--zz-fs-small); line-height: 20px;
  letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 10px var(--zz-space-4);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- 5 · Site header ---------- */
.site-header, .page--pebble .site-header, .home--pebble .site-header {
  position: sticky; top: var(--zz-space-4); z-index: 60;
  margin: var(--zz-space-4); border: none; border-radius: var(--zz-radius-md);
  background: color-mix(in srgb, var(--zz-surface-tint) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--zz-text);
  transition: box-shadow var(--zz-dur) ease, border-radius var(--zz-dur) var(--zz-ease);
}
/* Home: the bar floats over the hero image instead of pushing it down. */
.home--pebble .site-header { margin-bottom: calc(-64px - var(--zz-space-4)); }
.pb-scrolled .site-header { box-shadow: 0 10px 30px -18px rgba(36, 26, 22, 0.45); }

.site-header__inner, .home--pebble .site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--zz-space-4);
  min-height: 64px; padding: 12px var(--zz-space-5);
}
.site-header .logo { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; color: var(--zz-text) !important; }
.site-header .zuzu-logo { width: 96px; height: 28px; }
.site-header .main-nav { grid-column: 2; grid-row: 1; justify-self: center; display: flex; gap: var(--zz-space-4); }
.site-header .header-actions { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: var(--zz-space-2); }

.main-nav > a, .site-header .main-nav a, .page--pebble .site-header .main-nav a, .home--pebble .site-header .main-nav a {
  display: inline-flex; align-items: center; gap: var(--zz-space-1);
  padding: 11px var(--zz-space-3); border: none !important; border-radius: var(--zz-radius-pill);
  font-family: var(--zz-font-body); font-size: var(--zz-fs-small); line-height: 18px; font-weight: 500; letter-spacing: var(--zz-ls-ui);
  color: var(--zz-text) !important; background: transparent;
  transition: background-color var(--zz-dur-fast) ease;
}
.main-nav > a[aria-expanded="true"], .main-nav > a.active, .main-nav > a[aria-current="page"] { background: var(--zz-surface); }
@media (hover: hover) { .main-nav > a:hover { background: color-mix(in srgb, var(--zz-surface) 70%, transparent); } }
.pb-caret { width: 16px; height: 16px; transition: transform var(--zz-dur) var(--zz-ease); }
.main-nav > a[aria-expanded="true"] .pb-caret { transform: rotate(180deg); }

.site-header .icon-btn, .page--pebble .site-header .icon-btn, .home--pebble .site-header .icon-btn {
  width: 40px; height: 40px; border: none; border-radius: 50%; color: var(--zz-text); background: transparent;
}
.site-header .icon-btn .icon { width: 18px; height: 18px; }
@media (hover: hover) { .site-header .icon-btn:hover { background: var(--zz-surface); } }
/* Cart: the one solid button in the bar, with a vermilion count. */
.site-header .icon-btn[href$="cart.html"], .site-header [data-cart-open] {
  background: var(--zz-surface-inverse); color: var(--zz-text-on-inverse);
}
.site-header .icon-btn[href$="cart.html"] .icon { width: 16px; height: 16px; }
@media (hover: hover) { .site-header .icon-btn[href$="cart.html"]:hover { background: var(--color-neutral-80); } }
.cart-count, .site-header .cart-count {
  position: absolute; top: -2px; inset-inline-end: -2px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--zz-badge); color: var(--zz-text-on-inverse);
  font-family: var(--zz-font-body); font-size: var(--zz-fs-micro); line-height: 1; font-weight: 400;
}
.cart-count:empty, .cart-count[data-zero] { display: none; }
.site-header .nav-toggle, .page--pebble .site-header .nav-toggle, .home--pebble .site-header .nav-toggle {
  display: inline-flex; align-items: center; line-height: 1; letter-spacing: 0; text-transform: none;
  min-height: 40px; padding: 0 var(--zz-space-4); border: var(--zz-hairline) solid var(--zz-border-strong); border-radius: var(--zz-radius-pill);
  background: transparent; color: var(--zz-text); font-size: var(--zz-fs-small); font-weight: 500;
}
@media (min-width: 961px) { .site-header .nav-toggle, .page--pebble .site-header .nav-toggle, .home--pebble .site-header .nav-toggle { display: none; } }
@media (max-width: 960px) {
  .site-header__inner, .home--pebble .site-header__inner { display: flex; justify-content: space-between; padding: 12px var(--zz-space-4); }
  .site-header .main-nav, .page--pebble .site-header .main-nav, .home--pebble .site-header .main-nav {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; padding: var(--zz-space-2);
    background: var(--zz-surface); border: none; border-radius: var(--zz-radius-md); box-shadow: var(--zz-shadow-float);
  }
  .site-header .main-nav.nav-open { display: flex; }
  .site-header .main-nav a { padding: 14px var(--zz-space-4); border-radius: var(--zz-radius-sm); font-size: var(--zz-fs-body); }
}

/* ---------- 6 · Buttons ---------- */
/* Primary: brick pill. Secondary: hairline outline. Light: on images. */
.btn, .page--pebble .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--zz-space-2);
  min-height: 48px; padding: 12px var(--zz-space-5); border: var(--zz-hairline) solid transparent; border-radius: var(--zz-radius-pill);
  font-family: var(--zz-font-body); font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; letter-spacing: var(--zz-ls-ui);
  text-transform: none; transition: background-color var(--zz-dur-fast) ease, color var(--zz-dur-fast) ease, border-color var(--zz-dur-fast) ease, transform var(--zz-dur-fast) ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary, .page--pebble .btn--primary, .page--pebble [data-story-add-to-cart].btn, .btn--on-inverse, .page--pebble .btn--on-inverse {
  background: var(--zz-accent); border-color: var(--zz-accent); color: var(--zz-on-accent);
}
.btn--secondary, .page--pebble .btn--secondary { background: transparent; border-color: var(--zz-border-strong); color: var(--zz-text); }
.btn--light { background: var(--zz-surface); border-color: var(--zz-surface); color: var(--zz-text); }
.btn--sm, .page--pebble .btn--sm { min-height: 40px; padding: 10px 20px; font-size: var(--zz-fs-small); line-height: 20px; }
@media (hover: hover) {
  .btn--primary:hover, .page--pebble .btn--primary:hover, .page--pebble [data-story-add-to-cart].btn:hover, .btn--on-inverse:hover { background: var(--zz-accent-hover); border-color: var(--zz-accent-hover); color: var(--zz-on-accent); }
  .btn--secondary:hover, .page--pebble .btn--secondary:hover { background: var(--zz-surface-inverse); border-color: var(--zz-surface-inverse); color: var(--zz-text-on-inverse); }
  .btn--light:hover { background: var(--zz-surface-tint); }
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Pill with a round arrow — the hero CTA. Brick by default; --light on images. */
.pb-pill, .zz-pill {
  position: relative; display: inline-flex; align-items: center; gap: var(--zz-space-2);
  min-height: 48px; padding: 8px 8px 8px var(--zz-space-4); border-radius: var(--zz-radius-pill); overflow: hidden; isolation: isolate;
  background: var(--zz-accent); color: var(--zz-on-accent);
  font-family: var(--zz-font-body); font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; letter-spacing: var(--zz-ls-ui); white-space: nowrap;
  transition: color var(--zz-dur) ease, background-color var(--zz-dur) ease;
}
.pb-pill::before { display: none; }
.pb-pill__arrow, .zz-pill__arrow {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--zz-surface); color: var(--zz-accent);
  transition: transform var(--zz-dur) var(--zz-ease);
}
.pb-pill__arrow .icon, .zz-pill__arrow .icon { width: 16px; height: 16px; }
.pb-pill--light, .zz-pill--light, .pb-hero .pb-pill { background: var(--zz-surface); color: var(--zz-text); }
.pb-pill--light .pb-pill__arrow, .zz-pill--light .zz-pill__arrow, .pb-hero .pb-pill__arrow { background: var(--zz-accent); color: var(--zz-on-accent); }
.pb-pill--sm { min-height: 40px; padding: 10px 20px; gap: var(--zz-space-3); font-size: var(--zz-fs-small); line-height: 20px; }
@media (hover: hover) {
  .pb-pill:hover, a:hover > .pb-pill { background: var(--zz-accent-hover); color: var(--zz-on-accent); }
  .pb-pill--light:hover, .pb-hero .pb-pill:hover { background: var(--zz-surface-tint); color: var(--zz-text); }
  .pb-pill:hover .pb-pill__arrow, a:hover > .pb-pill .pb-pill__arrow { transform: translateX(3px); background: var(--zz-surface); color: var(--zz-accent); }
  .pb-pill--light:hover .pb-pill__arrow, .pb-hero .pb-pill:hover .pb-pill__arrow { background: var(--zz-accent); color: var(--zz-on-accent); }
}

/* ---------- 7 · Chips & tags ---------- */
.pb-tag, .zz-chip, .pb-tile .pb-tag, .pb-tag--light {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--zz-space-1) 10px; border: none; border-radius: var(--zz-radius-pill);
  background: var(--zz-surface); color: var(--zz-text);
  font-family: var(--zz-font-body); font-size: var(--zz-fs-small); line-height: 20px; font-weight: 500; letter-spacing: var(--zz-ls-ui);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pb-chip, .zz-chip--tint { background: var(--zz-surface-tint); color: var(--zz-text); }
.zz-chip__dot, .pb-card__sw { width: 10px; height: 10px; border-radius: 50%; background: var(--el, currentColor); box-shadow: inset 0 0 0 1px rgba(36, 26, 22, 0.18); }

/* ---------- 8 · Icon buttons ---------- */
.pb-round, .zz-round {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: var(--zz-hairline) solid var(--zz-border-strong); background: transparent; color: var(--zz-text);
  transition: background-color var(--zz-dur-fast) ease, color var(--zz-dur-fast) ease, opacity var(--zz-dur-fast) ease, transform var(--zz-dur-fast) ease;
}
.pb-round .icon, .zz-round .icon { width: 16px; height: 16px; }
.pb-round:active, .zz-round:active { transform: scale(0.94); }
.pb-round[disabled], .zz-round[disabled] { opacity: 0.3; pointer-events: none; }
@media (hover: hover) { .pb-round:hover, .zz-round:hover { background: var(--zz-surface-inverse); color: var(--zz-text-on-inverse); } }
.zz-round--solid { border-color: var(--zz-surface-inverse); background: var(--zz-surface-inverse); color: var(--zz-text-on-inverse); }

/* ---------- 9 · Product card ---------- */
.pb-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start;
  background: var(--zz-surface); border-radius: var(--zz-radius-lg);
}
.zz-section--base .pb-card, .zz-on-base .pb-card { background: var(--zz-surface-tint); }
.pb-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--zz-surface-sunk); }
.pb-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pb-card__body { display: flex; flex-direction: column; gap: 2px; padding: var(--zz-space-4); }
/* The category reads as a chip pinned to the photo's top-left corner. */
.pb-card__cat {
  position: absolute; top: var(--zz-space-3); left: var(--zz-space-3); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: var(--zz-space-1) 10px; border-radius: var(--zz-radius-pill);
  background: var(--zz-surface); color: var(--zz-text);
  font-size: var(--zz-fs-small); line-height: 20px; font-weight: 500; letter-spacing: var(--zz-ls-ui);
}
.pb-card__name { margin: 0; font-family: var(--zz-font-body); font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; letter-spacing: var(--zz-ls-ui); color: var(--zz-text); }
.pb-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is the link target */
.pb-card__meta { font-size: var(--zz-fs-small); line-height: 20px; letter-spacing: var(--zz-ls-ui); color: var(--zz-text-muted); }
.pb-card__price {
  display: inline-flex; align-items: baseline; gap: 2px; margin-top: 10px;
  font-family: var(--zz-font-display); font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; color: var(--zz-text);
  font-variant-numeric: lining-nums tabular-nums;
}
.pb-card__price s { margin-left: 6px; font-family: var(--zz-font-body); font-weight: 400; color: var(--zz-text-subtle); }
.pb-card__price--sale { color: var(--zz-danger); }
.pb-card__badge { position: absolute; top: var(--zz-space-3); right: var(--zz-space-3); z-index: 2; padding: var(--zz-space-1) 10px; border-radius: var(--zz-radius-pill); font-size: var(--zz-fs-small); line-height: 20px; font-weight: 500; background: var(--zz-surface-inverse); color: var(--zz-text-on-inverse); }
.pb-card__badge--save { background: var(--zz-badge); }
.pb-card__add {
  position: absolute; right: var(--zz-space-2); bottom: var(--zz-space-2); z-index: 3;
  width: 40px; height: 40px; border: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--zz-surface-inverse); color: var(--zz-text-on-inverse);
  transition: transform var(--zz-dur) var(--zz-ease), background-color var(--zz-dur-fast) ease;
}
.pb-card__add .icon { width: 16px; height: 16px; }
.pb-card__add.is-added { background: var(--zz-success); }
.pb-card__media .pb-card__img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform 1s var(--zz-ease); }
@media (hover: hover) {
  .pb-card { transition: transform .5s var(--zz-ease), box-shadow .5s var(--zz-ease); }
  .pb-card:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow-lift); }
  .pb-card__media img { transition: transform 1s var(--zz-ease), opacity .5s ease; }
  .pb-card:hover .pb-card__media img:first-of-type { transform: scale(1.05); }
  .pb-card:hover .pb-card__img2 { opacity: 1; transform: scale(1.03); }
  .pb-card__add:hover { transform: scale(1.08); background: var(--zz-accent); color: var(--zz-on-accent); }
}

/* Tabs (cover switcher on Home): pills; the chosen one is outlined. */
.zz-row-head__title { display: grid; gap: var(--zz-space-4); }
.zz-tabs { display: flex; flex-wrap: wrap; gap: var(--zz-space-2); }
.zz-tab { min-height: 40px; padding: 8px var(--zz-space-4); border: none; border-radius: var(--zz-radius-pill); background: color-mix(in srgb, var(--zz-surface) 55%, transparent); color: var(--zz-text); font-size: var(--zz-fs-small); font-weight: 600; letter-spacing: var(--zz-ls-ui); transition: background-color var(--zz-dur-fast) ease, box-shadow var(--zz-dur-fast) ease; }
.zz-tab[aria-selected="true"] { background: var(--zz-surface); box-shadow: inset 0 0 0 var(--zz-select-w) var(--zz-border-strong); }
@media (hover: hover) { .zz-tab:not([aria-selected="true"]):hover { background: var(--zz-surface); } }
.pb-rail[role="tabpanel"]:not([hidden]) { animation: zzSlideIn .4s var(--zz-ease) both; }

/* ---------- 10 · Rail ---------- */
.pb-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: var(--zz-space-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room for a hovered card's lift and shadow (--zz-shadow-lift reaches
     ~36px below and ~12px to the sides), taken back with negative margins
     so the layout doesn't move. */
  padding: 8px 14px 40px; margin: -8px -14px -40px; scroll-padding-inline: 14px;
}
.pb-rail::-webkit-scrollbar { display: none; }
.pb-rail[hidden] { display: none; }
.pb-progress { display: none !important; } /* rails page with arrows; no progress bar in the design */
.pb-rail-nav__btns, .zz-rail-ctrl { display: flex; gap: var(--zz-space-2); }
@media (max-width: 760px) { .pb-rail { grid-auto-columns: 72%; } }

/* ---------- 11 · Category tile ---------- */
.pb-tiles, .zz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zz-space-4); }
.zz-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zz-tiles--4 .pb-tile { min-height: 420px; }
@media (max-width: 1100px) { .zz-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--zz-space-5);
  min-height: 460px; aspect-ratio: auto; padding: var(--zz-space-5); border-radius: var(--zz-radius-xl);
  color: var(--zz-text-on-image);
}
.pb-tile__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--zz-ease); }
.pb-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--color-neutral-100) 0%, var(--zz-scrim) 50%, rgba(36, 26, 22, 0) 100%); }
.pb-tile__top { display: grid; justify-items: start; gap: var(--zz-space-5); }
.pb-tile__title {
  max-width: 11ch; margin: 0; font-family: var(--zz-font-body); font-weight: 500; color: inherit;
  font-size: var(--zz-fs-title); line-height: var(--zz-lh-title); letter-spacing: var(--zz-ls-tight); text-wrap: balance; text-shadow: none;
}
.pb-tile__cta { display: inline-flex; align-items: center; gap: var(--zz-space-3); padding: 10px 20px; border-radius: var(--zz-radius-pill); background: var(--zz-accent); color: var(--zz-on-accent); font-size: var(--zz-fs-small); line-height: 20px; font-weight: 600; letter-spacing: var(--zz-ls-ui); transition: background-color var(--zz-dur-fast) ease, padding var(--zz-dur) var(--zz-ease); }
.pb-tile__cta .icon { width: 0; height: 16px; opacity: 0; transition: width var(--zz-dur) var(--zz-ease), opacity var(--zz-dur) ease; }
@media (hover: hover) {
  .pb-tile:hover .pb-tile__bg { transform: scale(1.05); }
  .pb-tile:hover .pb-tile__cta { background: var(--zz-accent-hover); }
  .pb-tile:hover .pb-tile__cta .icon { width: 16px; opacity: 1; }
}
@media (max-width: 900px) { .pb-tiles, .zz-tiles { grid-template-columns: 1fr; } .pb-tile { min-height: 380px; } }

/* ---------- 12 · Stamp card ---------- */
/* A postage stamp: paper with round perforations punched along every edge,
   a tilt, a tone. The paper is a masked ::before, so the shadow (a filter on
   the card itself) follows the perforated outline. */
.zz-stamps { display: grid; justify-items: center; gap: var(--zz-space-6); }
.zz-stamp {
  --stamp-bg: var(--color-dusty-lilac-500); --stamp-ink: var(--color-wine-velvet-900); --stamp-soft: var(--color-wine-velvet-400);
  --tilt: 0deg;
  --hole: var(--zz-perf-r);
  --pitch: var(--zz-perf-pitch);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--zz-space-7);
  width: min(390px, 100%); min-height: 480px; padding: var(--zz-space-7) 40px;
  color: var(--stamp-ink);
  transform: rotate(var(--tilt));
  filter: drop-shadow(0 1px 1px rgba(36, 26, 22, 0.12));
  transition: transform var(--zz-dur-slow) var(--zz-ease), filter var(--zz-dur-slow) var(--zz-ease);
}
.zz-stamp::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--stamp-bg);
  -webkit-mask:
    radial-gradient(circle var(--hole) at center, #0000 calc(100% - 0.5px), #000) calc(var(--pitch) / -2) calc(var(--pitch) / -2) / var(--pitch) var(--pitch) round,
    linear-gradient(#000 0 0) center / calc(100% - var(--pitch)) calc(100% - var(--pitch)) no-repeat;
          mask:
    radial-gradient(circle var(--hole) at center, #0000 calc(100% - 0.5px), #000) calc(var(--pitch) / -2) calc(var(--pitch) / -2) / var(--pitch) var(--pitch) round,
    linear-gradient(#000 0 0) center / calc(100% - var(--pitch)) calc(100% - var(--pitch)) no-repeat;
}
.zz-stamp--lilac { --stamp-bg: var(--color-dusty-lilac-500); --stamp-ink: var(--color-wine-velvet-900); --stamp-soft: var(--color-wine-velvet-400); }
.zz-stamp--botanical { --stamp-bg: var(--color-botanical-100); --stamp-ink: var(--color-botanical-900); --stamp-soft: var(--color-botanical-400); }
.zz-stamp--midnight { --stamp-bg: var(--color-midnight-blue-200); --stamp-ink: var(--color-midnight-blue-900); --stamp-soft: var(--color-midnight-blue-500); }
.zz-stamp--gold { --stamp-bg: var(--color-antique-gold-100); --stamp-ink: var(--color-antique-gold-900); --stamp-soft: var(--color-antique-gold-500); }
.zz-stamp--vermilion { --stamp-bg: var(--color-vermilion-100); --stamp-ink: var(--color-vermilion-900); --stamp-soft: var(--color-vermilion-700); }
.zz-stamp__icon { width: 48px; height: 48px; color: var(--stamp-ink); }
.zz-stamp__body { display: grid; gap: var(--zz-space-5); }
.zz-stamp__title { margin: 0; font-family: var(--zz-font-display); font-weight: 500; font-size: var(--zz-fs-h3); line-height: var(--zz-lh-h3); letter-spacing: var(--zz-ls-tight); color: var(--stamp-ink); text-wrap: balance; }
.zz-stamp__text { margin: 0; font-size: var(--zz-fs-lede); line-height: var(--zz-lh-relaxed); letter-spacing: var(--zz-ls-tight); color: var(--stamp-soft); text-wrap: pretty; }
@media (hover: hover) { .zz-stamp:hover { transform: rotate(0deg) translateY(-6px); filter: drop-shadow(0 24px 30px rgba(36, 26, 22, 0.28)); } }
/* Stack on scroll (Home): each stamp sticks a little lower than the one
   before, so later stamps slide up and land on the pile. */
.zz-stamps--stack { gap: var(--zz-space-8); padding-bottom: var(--zz-space-6); }
.zz-stamps--stack > .zz-stamp { position: sticky; top: calc(var(--zz-stack-top, 120px) + var(--i, 0) * 28px); }
.zz-stamps--stack > .zz-stamp:nth-child(2) { --i: 1; }
.zz-stamps--stack > .zz-stamp:nth-child(3) { --i: 2; }
.zz-stamps--stack > .zz-stamp:nth-child(4) { --i: 3; }
.zz-stamps--stack > .zz-stamp:nth-child(5) { --i: 4; }
@media (max-width: 600px) { .zz-stamps--stack { --zz-stack-top: 96px; } .zz-stamps--stack > .zz-stamp { top: calc(var(--zz-stack-top) + var(--i, 0) * 18px); } }
/* Reveal: each stamp drops in over-tilted and settles onto its angle. */
.pb-js .zz-stamp[data-motion="stamp"]:not(.is-in) { opacity: 0; transform: translateY(48px) rotate(calc(var(--tilt) * 3)); }
.pb-js .zz-stamp[data-motion="stamp"].is-in { transition: opacity .9s var(--zz-ease), transform 1.1s var(--zz-ease), filter var(--zz-dur-slow) var(--zz-ease); }
.pb-reduced .zz-stamp[data-motion] { transform: rotate(var(--tilt)) !important; } /* the tilt is layout, not motion */
@media (max-width: 600px) { .zz-stamps { overflow-x: clip; padding-block: var(--zz-space-2); } .zz-stamp { --hole: 6px; --pitch: 19px; width: calc(100% - 24px); min-height: 400px; padding: var(--zz-space-6) var(--zz-space-5); } }

/* ---------- 13 · Letter ---------- */
/* The founder's note: a white card and a brick envelope (Figma 1009:38701),
   built as separate layers so the card can sit *inside* it —
   back (stock + interior) → card → front pocket → flap (with the wax seal).
   Default = the settled composition: card in front, envelope tilted behind
   with its flap open. On Home (data-letter-scroll) pebble-home.js pins the
   section and scrubs it: flap lifts, card slides out, card settles. */
.zz-letter { position: relative; width: min(750px, 100%); margin-inline: auto; }
.zz-letter__stage { position: relative; padding-top: 7%; }
.zz-env { position: absolute; left: 0; top: 7%; width: 100%; aspect-ratio: 750 / 464.467; transform: translate(9.5%, -2%) rotate(8.87deg); transform-origin: 50% 50%; pointer-events: none; }
.zz-env--back { z-index: 1; }
.zz-env--front { z-index: 3; }
.zz-env--flap { z-index: 0; perspective: 1600px; }
.zz-env > *, .zz-env__flap { position: absolute; display: block; }
.zz-env__stock { inset: 0; border-radius: 2.44% / 3.93%; background: var(--zz-accent); }
/* Inside of the envelope: the back wall, seen through the opening. */
.zz-env__stock--inside { background: color-mix(in srgb, var(--zz-accent) 55%, #1b0c08); box-shadow: 0 30px 50px -30px rgba(36, 26, 22, .5); }
/* Front: the whole face except the triangle the flap closes over, so a
   card inside only shows through that opening. */
.zz-env__stock--front { clip-path: polygon(0 0, 50% 63%, 100% 0, 100% 100%, 0 100%); }
/* The side stitching is part of the front face too: same cut-out (its slot is
   rotated 180°, so the polygon is flipped), so it never crosses the letter. */
.zz-env--front .zz-letter__slot--inner { clip-path: polygon(0 100%, 50% 37%, 100% 100%, 100% 0, 0 0); }
.zz-letter__slot img { position: absolute; display: block; max-width: none; }
.zz-letter__slot--inner { left: 1.624%; top: 2.623%; width: 96.751%; height: 94.754%; mix-blend-mode: screen; transform: rotate(180deg); }
.zz-letter__slot--inner img { left: -0.16%; top: -0.26%; width: 100.32%; height: 100.52%; }
.zz-letter__slot--bottom { left: 0; top: 37.213%; width: 100%; height: 62.787%; }
.zz-letter__slot--bottom img { left: -1.62%; top: -1.83%; width: 103.24%; height: 107.05%; }
/* Flap: hinged on the top edge. Its outside carries the seal; its inside is
   the same fold, darker, seen once it's lifted. */
.zz-env__flap { left: 0; top: 0; width: 100%; height: 70.492%; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(180deg); }
.zz-env__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.zz-env__face img:first-child { position: absolute; left: -1.52%; top: -4.65%; width: 104.06%; height: 108.19%; max-width: none; }
.zz-env__face--in { transform: rotateX(180deg); filter: brightness(.62) saturate(.9); }
.zz-env__face--in img:first-child { transform: scaleY(-1); } /* the inside is the mirror of the outside */
.zz-env__seal { position: absolute; left: 39.899%; top: 70.94%; width: 20.305%; aspect-ratio: 1; object-fit: cover; }
.zz-letter__card {
  position: relative; z-index: 5; display: grid; align-content: start; gap: var(--zz-space-6);
  min-height: 464px; padding: 40px; border-radius: var(--zz-radius-lg); background: var(--zz-paper);
  box-shadow: 0 30px 60px -36px rgba(36, 26, 22, 0.55); transform-origin: 50% 100%;
}
.zz-letter__quote { position: absolute; left: 40px; top: 40px; width: 157.705px; height: 128px; mix-blend-mode: multiply; pointer-events: none; }
.zz-letter__text { position: relative; margin-top: 37px; max-width: 648px; font-weight: 500; font-size: var(--zz-fs-letter); line-height: var(--zz-lh-relaxed); letter-spacing: var(--zz-ls-tight); color: var(--zz-text); }
.zz-letter__text p { margin: 0 0 1.4em; text-wrap: balance; }
.zz-letter__text p:last-child { margin-bottom: 0; }
.zz-letter__sign { justify-self: end; width: min(306px, 100%); margin: 0 -8px 0 0; opacity: 0.9; color: var(--zz-text); }
.zz-letter__script { display: block; font-family: var(--zz-font-script); font-size: clamp(2.25rem, 2vw + 1.5rem, 3rem); line-height: 1.4; }
.zz-letter__name { display: block; font-family: var(--zz-font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.4; }

/* Scroll mode: a tall track; the stage sticks while the envelope opens. The
   stage keeps room above the envelope for the card to rise into. */
.zz-letter.is-live .zz-letter__stage { padding-top: 0; aspect-ratio: 750 / 760; }
.zz-letter.is-live .zz-env { top: auto; bottom: 0; transform: none; will-change: transform; }
.zz-letter.is-live .zz-letter__card { position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; height: calc(100% * 464.467 / 760); overflow: hidden; z-index: 2; will-change: transform; transform-origin: 50% 0; backface-visibility: hidden; }
.zz-letter.is-live .zz-env__flap { will-change: transform; }
.zz-founder.is-pinned { height: 320vh; padding-top: 0; padding-bottom: 0; overflow: visible; overflow-x: clip; }
.zz-founder.is-pinned > .zz-wrap { position: sticky; top: 80px; height: calc(100vh - 80px); display: grid; align-content: center; }
.zz-founder.is-pinned .zz-founder__head { margin-bottom: var(--zz-space-5); }
.zz-founder.is-pinned .zz-letter { width: min(680px, 100%, calc((100vh - 260px) * 750 / 760)); }
.zz-founder.is-pinned .zz-letter__card { padding: clamp(24px, 4%, 40px); gap: var(--zz-space-4); }
.zz-founder.is-pinned .zz-letter__text { font-size: clamp(0.95rem, 1.6vh + 0.4rem, 1.25rem); margin-top: 28px; }
.zz-founder.is-pinned .zz-letter__quote { width: 110px; height: 90px; left: clamp(24px, 4%, 40px); top: clamp(24px, 4%, 40px); }
.zz-founder.is-pinned .zz-letter__script { font-size: clamp(1.9rem, 3vh + 0.8rem, 2.75rem); line-height: 1.2; }
.zz-founder.is-pinned .zz-letter__name { font-size: 1rem; }
/* Compact scene (phones): laid out at 440px, zoomed to the column by JS,
   with tighter letter type so the card still fits inside the envelope. */
.zz-founder.is-pinned .zz-letter.is-compact { width: 440px; max-width: none; }
.zz-founder.is-pinned .zz-letter.is-compact .zz-letter__card { padding: 22px; gap: 10px; border-radius: 16px; }
.zz-founder.is-pinned .zz-letter.is-compact .zz-letter__quote { width: 64px; height: 52px; left: 22px; top: 22px; }
.zz-founder.is-pinned .zz-letter.is-compact .zz-letter__text { margin-top: 18px; font-size: 14px; line-height: 1.45; }
.zz-founder.is-pinned .zz-letter.is-compact .zz-letter__text p { margin-bottom: .7em; }
.zz-founder.is-pinned .zz-letter.is-compact .zz-letter__script { font-size: 30px; line-height: 1.1; }
.zz-founder.is-pinned .zz-letter.is-compact .zz-letter__name { font-size: 13px; }
.zz-founder.is-pinned .zz-letter.is-compact .zz-letter__sign { width: 200px; }
@media (max-width: 700px) {
  .zz-letter__card { min-height: 0; padding: var(--zz-space-5); }
  .zz-letter__quote { left: var(--zz-space-5); top: var(--zz-space-5); width: 96px; height: 78px; }
  .zz-letter__text { margin-top: 24px; }
  .zz-env { transform: translate(4%, -2%) rotate(8.87deg); }
}

/* ---------- 14 · Fields ---------- */
.field input, .field select, .field textarea,
.page--pebble .field input, .page--pebble .field select, .page--pebble .field textarea {
  min-height: 48px; padding: 12px 20px; border: var(--zz-hairline) solid var(--zz-border); border-radius: var(--zz-radius-pill);
  background: var(--zz-surface); color: var(--zz-text); font: inherit; font-size: var(--zz-fs-body);
  transition: border-color var(--zz-dur-fast) ease, box-shadow var(--zz-dur-fast) ease;
}
.zz-section--base .field :is(input, select, textarea) { background: var(--zz-surface-tint); border-color: transparent; }
.field textarea, .page--pebble .field textarea { min-height: 120px; border-radius: var(--zz-radius-md); }
.field :is(input, select, textarea):focus, .page--pebble .field :is(input, select, textarea):focus {
  outline: none; border-color: var(--zz-border-strong); background: var(--zz-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zz-focus) 18%, transparent);
}
.field [aria-invalid="true"], .page--pebble .field [aria-invalid="true"] { border-color: var(--zz-danger); }
.field label, .page--pebble .field label { font-size: var(--zz-fs-small); font-weight: 500; letter-spacing: var(--zz-ls-ui); color: var(--zz-text); }

/* ---------- 15 · Site footer ---------- */
/* Dark neutral with the ZUZU mark drawn as a giant stitched outline. */
.pb-footer {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--zz-space-9) 0 var(--zz-space-6);
  background: var(--zz-surface-inverse) url("../img/figma/footer.svg") center bottom / 1666px auto no-repeat;
  color: rgba(251, 247, 238, 0.68);
}
.pb-footer a { color: inherit; }
.pb-footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.6fr)); gap: var(--zz-space-6); padding-bottom: var(--zz-space-8); border-bottom: none; }
.pb-footer__logo, .pb-footer .pb-footer__logo { display: inline-flex; color: var(--zz-text-on-inverse) !important; }
.pb-footer__logo .zuzu-logo { width: 120px; height: auto; }
.pb-footer__tag { margin-top: var(--zz-space-5); font-family: var(--zz-font-display); font-weight: 500; font-size: var(--zz-fs-h3); line-height: 1.1; letter-spacing: var(--zz-ls-tight); color: var(--zz-text-on-inverse); }
.pb-footer .pb-footer__seal { display: block; width: 128px; margin-top: var(--zz-space-6); color: rgba(251, 247, 238, 0.7); }
.pb-footer__col h4 { margin-bottom: var(--zz-space-3); font-family: var(--zz-font-body); font-weight: 500; font-size: var(--zz-fs-small); letter-spacing: 1px; text-transform: uppercase; color: var(--zz-text-subtle); }
.pb-footer__col a { display: block; width: fit-content; padding: 6px 0; font-size: var(--zz-fs-body); color: var(--zz-text-on-inverse); }
.pb-footer__strip { display: none; } /* the image strip isn't part of the final design */
.pb-footer__bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--zz-space-4); flex-wrap: wrap; padding-top: clamp(160px, 22vw, 340px); font-size: var(--zz-fs-small); }
.pb-footer__pay { display: flex; gap: var(--zz-space-3); color: var(--zz-text-on-inverse); }
.pb-footer .tbd { color: var(--pb-on-dark-muted); background: rgba(255, 255, 255, 0.08); }
@media (hover: hover) { .pb-footer__col a:hover { color: var(--color-antique-gold-100); } }
@media (max-width: 900px) { .pb-footer__top { grid-template-columns: 1fr 1fr; } .pb-footer__brand { grid-column: 1 / -1; } }

/* ---------- 17 · Header behaviour ---------- */
/* Every page: the bar floats (inset, rounded) at the top of the page; once
   scrolled it expands to the full width and docks to the top edge. */
.site-header, .page--pebble .site-header, .home--pebble .site-header {
  transition: margin .45s var(--zz-ease), top .45s var(--zz-ease), border-radius .45s var(--zz-ease), box-shadow .3s ease, background-color .3s ease;
}
.pb-scrolled .site-header, .page--pebble.pb-scrolled .site-header, .home--pebble.pb-scrolled .site-header {
  top: 0; margin-left: 0; margin-right: 0; border-radius: 0;
  box-shadow: 0 10px 30px -18px rgba(36, 26, 22, 0.45);
}
.pb-scrolled .pb-mega { border-radius: 0 0 var(--zz-radius-md) var(--zz-radius-md); }
.pb-mega-open:not(.pb-scrolled) .site-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ---------- 18 · Breadcrumb ---------- */
.breadcrumb, .page--pebble .breadcrumb, .pb-buy .breadcrumb {
  padding: 0; font-family: var(--zz-font-body); font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--zz-text-muted);
}
.breadcrumb a, .page--pebble .breadcrumb a { padding: 0; color: var(--zz-text); }
@media (hover: hover) { .breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- 19 · Option pickers ---------- */
/* Label → element pills (swatch + name) or option rows (icon + name + note).
   Selected = filled neutral-100. Driven by [aria-pressed] from story.js. */
.zz-opt-group { display: grid; gap: var(--zz-space-3); }
.zz-opt-label { margin: 0; font-family: var(--zz-font-display); font-weight: 500; font-size: var(--zz-fs-body); line-height: 24px; letter-spacing: 0; color: var(--zz-text); }
.zz-opt-group[hidden] { display: none; }

.zz-pills { display: flex; flex-wrap: wrap; gap: var(--zz-space-3); }
.zz-pill-opt {
  flex: 1 1 calc(33.333% - 8px); min-width: 0; display: inline-flex; align-items: center; gap: var(--zz-space-3);
  padding: var(--zz-space-4); border: none; border-radius: var(--zz-radius-pill); background: var(--zz-surface-tint); color: var(--zz-text);
  font-family: var(--zz-font-body); font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; letter-spacing: var(--zz-ls-ui); text-align: start;
  transition: background-color var(--zz-dur-fast) ease, color var(--zz-dur-fast) ease, transform var(--zz-dur-fast) ease;
}
.zz-pills > .zz-pill-opt:nth-child(n + 4) { flex-grow: 0; flex-basis: calc(33.333% - 8px); }
.zz-pill-opt .opt-el__sw, .zz-pill-opt__sw { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--el); border: 1px solid var(--zz-surface); box-shadow: none; }
.zz-pill-opt .opt-el__space { display: none; }
.zz-pill-opt[aria-pressed="true"] { background: var(--zz-surface); color: var(--zz-text); box-shadow: inset 0 0 0 var(--zz-select-w) var(--zz-border-strong); }
.zz-pill-opt[aria-pressed="true"] .zz-pill-opt__sw { box-shadow: 0 0 0 2px var(--zz-surface), 0 0 0 3.5px var(--zz-border-strong); }
.zz-pill-opt:active { transform: scale(0.98); }
@media (hover: hover) { .zz-pill-opt:not([aria-pressed="true"]):hover { background: var(--zz-surface-sunk); } }

/* Element as picture tiles: the cover (or cloth) in that element, name below.
   Same selection pattern as the pills: tint card, outlined when chosen. */
.zz-pills--tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--zz-space-2); }
.zz-pills--tiles > .zz-pill-opt, .zz-pills--tiles > .zz-pill-opt:nth-child(n + 4) {
  flex-direction: column; align-items: stretch; gap: var(--zz-space-2);
  padding: var(--zz-space-2) var(--zz-space-2) var(--zz-space-3); border-radius: var(--zz-radius-md);
  font-size: var(--zz-fs-small); line-height: 20px; text-align: center;
}
.zz-pill-opt__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
/* …or the element's mark on its colour (DECISIONS.md #50) */
.zz-pill-opt__tile { display: grid; place-items: center; width: 100%; height: 36px; color: var(--el, var(--zz-text)); }
.zz-pill-opt__tile svg { width: 28px; height: 28px; }
@media (max-width: 480px) { .zz-pills--tiles > .zz-pill-opt, .zz-pills--tiles > .zz-pill-opt:nth-child(n + 4) { padding: 6px 6px var(--zz-space-2); } }

.zz-options { display: grid; gap: var(--zz-space-3); }
.zz-option {
  display: flex; align-items: flex-start; gap: var(--zz-space-4); width: 100%;
  padding: var(--zz-space-4); border: none; border-radius: var(--zz-radius-md); background: var(--zz-surface-tint); color: var(--zz-text);
  font-family: var(--zz-font-body); text-align: start; letter-spacing: var(--zz-ls-ui);
  transition: background-color var(--zz-dur-fast) ease, color var(--zz-dur-fast) ease;
}
.zz-option__icon { flex-shrink: 0; width: 24px; height: 24px; color: currentColor; }
/* Page-ruling glyphs from Figma, used as masks so they take the text colour. */
.zz-option__glyph { flex-shrink: 0; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.zz-option__glyph--ruled { --glyph: url("../img/figma/page-ruled.svg"); }
.zz-option__glyph--dotted { --glyph: url("../img/figma/page-dotted.svg"); }
.zz-option__glyph--plain { --glyph: url("../img/figma/page-plain.svg"); }
.zz-option__text { display: grid; min-width: 0; }
.zz-option__text strong { font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; }
.zz-option__text span { font-size: var(--zz-fs-small); line-height: 20px; color: var(--zz-text-muted); }
.zz-option { position: relative; padding-right: 56px; }
.zz-option[aria-pressed="true"] { background: var(--zz-surface); box-shadow: inset 0 0 0 var(--zz-select-w) var(--zz-border-strong); }
@media (hover: hover) { .zz-option:not([aria-pressed="true"]):hover { background: var(--zz-surface-sunk); } }
/* Pack rows: "3 Pack / 90 task cards" with that pack's price before the radio. */
.zz-options--packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zz-option__price { margin-left: auto; align-self: center; font-weight: 600; font-size: var(--zz-fs-body); font-variant-numeric: lining-nums tabular-nums; }
.zz-options--packs .zz-option { flex-direction: column; gap: var(--zz-space-1); padding-right: var(--zz-space-4); }
.zz-options--packs .zz-option::after { top: var(--zz-space-4); margin-top: 0; width: 18px; height: 18px; }
.zz-options--packs .zz-option__price { margin-left: 0; align-self: flex-start; }
@media (max-width: 480px) { .zz-options--packs { grid-template-columns: 1fr; } .zz-options--packs .zz-option { flex-direction: row; align-items: center; padding-right: 56px; } .zz-options--packs .zz-option::after { top: 50%; margin-top: -9px; } .zz-options--packs .zz-option__price { margin-left: auto; align-self: center; } }

/* Selection, everywhere: unselected = tint card + empty radio; selected =
   base card, dark outline, filled radio. The radio is drawn on the right. */
:root { --zz-select-w: 1.5px; }
.zz-option::after, .pb-co__payopt::before, .pb-co__method::before {
  content: ""; position: absolute; right: var(--zz-space-4); top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  border: 1.5px solid var(--zz-text-subtle); background: var(--zz-surface); box-sizing: border-box;
  transition: border-color var(--zz-dur-fast) ease, box-shadow var(--zz-dur-fast) ease, background-color var(--zz-dur-fast) ease;
}
.zz-option[aria-pressed="true"]::after, .pb-co__payopt:has(input:checked)::before, .pb-co__method::before {
  border-color: var(--zz-border-strong); background: var(--zz-border-strong); box-shadow: inset 0 0 0 4px var(--zz-surface);
}
.zz-opt-label__val { margin-left: 6px; font-family: var(--zz-font-body); font-weight: 400; color: var(--zz-text-muted); }
.zz-opt-label__val:not(:empty)::before { content: "· "; }

/* The same pattern on the remaining choice controls. */
.mix__opt, .page--pebble .mix__opt { border: none; background: var(--zz-surface-tint); color: var(--zz-text); font-weight: 600; }
.mix__opt.active, .mix__opt[aria-pressed="true"] { background: var(--zz-surface); color: var(--zz-text); box-shadow: inset 0 0 0 var(--zz-select-w) var(--zz-border-strong); }
.pb-coll__view { border: none; background: var(--zz-surface-tint); }
.pb-coll__view[aria-pressed="true"] { background: var(--zz-surface); color: var(--zz-text); border: none; box-shadow: inset 0 0 0 var(--zz-select-w) var(--zz-border-strong); }
.chip[aria-pressed="true"] { background: var(--zz-surface); color: var(--zz-text); box-shadow: inset 0 0 0 var(--zz-select-w) var(--zz-border-strong); }
.pb-fcheck input, .pb-co__check input { accent-color: var(--zz-border-strong); }

/* ---------- 20 · Quantity stepper ---------- */
.zz-stepper, .page--pebble .zz-stepper {
  display: inline-flex; align-items: center; gap: var(--zz-space-1); flex-shrink: 0;
  min-height: 0; padding: 6px; border: none; border-radius: var(--zz-radius-pill); background: var(--zz-surface-tint);
}
.zz-stepper button { width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: none; display: grid; place-items: center; transition: transform var(--zz-dur-fast) ease, background-color var(--zz-dur-fast) ease; }
.zz-stepper button img { width: 36px; height: 36px; display: block; }
.zz-stepper button:active { transform: scale(0.9); }
@media (hover: hover) { .zz-stepper button:hover { background: var(--zz-surface-sunk); } }
.zz-stepper__value { position: relative; width: 32px; text-align: center; font-family: var(--zz-font-display); font-weight: 600; font-size: var(--zz-fs-body); line-height: 24px; font-variant-numeric: tabular-nums; }
.zz-stepper__value::before, .zz-stepper__value::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--zz-border); }
.zz-stepper__value::before { left: -2px; } .zz-stepper__value::after { right: -2px; }

/* ---------- 21 · Trust cards ---------- */
.zz-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zz-space-3); margin: 0; padding: 0; list-style: none; }
.zz-trust li {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--zz-space-5); padding: var(--zz-space-4);
  border: 1px solid var(--zz-surface-tint); border-radius: var(--zz-radius-md); background: var(--zz-surface);
  font-size: var(--zz-fs-body); line-height: 20px; font-weight: 500; letter-spacing: var(--zz-ls-ui); color: var(--zz-text);
}
.zz-trust .icon { width: 24px; height: 24px; }

/* ---------- 22 · Accordion ---------- */
.accordion, .page--pebble .accordion { border-top: none; }
.accordion__item { border-bottom: 0.5px solid var(--zz-text-subtle); }
.accordion__head, .page--pebble .accordion__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--zz-space-4); width: 100%;
  padding: 20px 0; border: none; background: none; text-align: start;
  font-family: var(--zz-font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--zz-text);
}
.accordion__icon, .page--pebble .accordion__icon { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--zz-surface); }
.accordion__icon::before, .page--pebble .accordion__icon::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border: solid var(--zz-text); border-width: 0 1.1px 1.1px 0; background: none;
  transform: translate(-50%, -70%) rotate(45deg); transition: transform var(--zz-dur) var(--zz-ease);
}
.accordion__icon::after, .page--pebble .accordion__icon::after { display: none; }
.accordion__item.open .accordion__icon::before, .page--pebble .accordion__item.open .accordion__icon::before { transform: translate(-50%, -30%) rotate(-135deg); }
.accordion__body, .pb-buy .accordion__body { padding-bottom: var(--zz-space-5); font-size: 0.9375rem; line-height: 1.6; color: var(--zz-text-muted); }
.accordion__body ul.lives, .pb-buy .accordion__body ul.lives { list-style: none; padding: 0; margin: 0 0 var(--zz-space-4); display: grid; gap: 0; }
.accordion__body ul.lives li { padding: var(--zz-space-3) 0; border-bottom: 1px solid var(--zz-surface-tint); }
.accordion__body ul.lives li:first-child { padding-top: 0; }
.accordion__body strong { font-weight: 700; color: var(--zz-text); }
.accordion__body em { font-size: 0.8125rem; }
.accordion__body .pd-small { font-size: 0.8125rem; }
.accordion__body dt { font-weight: 600; color: var(--zz-text); margin-top: var(--zz-space-3); }
.accordion__body dt:first-child { margin-top: 0; }

/* ---------- 23 · Mini product row (cross-sell) ---------- */
.zz-ritual { display: grid; gap: var(--zz-space-3); }
.zz-ritual__title { margin: 0; font-family: var(--zz-font-display); font-weight: 600; font-size: 1.5rem; line-height: 32px; letter-spacing: 0; color: var(--zz-text); }
.zz-mini { position: relative; display: flex; align-items: center; gap: var(--zz-space-3); padding: var(--zz-space-3); border-radius: var(--zz-radius-md); background: var(--zz-surface-tint); transition: background-color var(--zz-dur-fast) ease, transform var(--zz-dur) var(--zz-ease); }
.zz-mini img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
.zz-mini__text { flex: 1; min-width: 0; display: grid; gap: var(--zz-space-1); letter-spacing: var(--zz-ls-ui); }
.zz-mini__text b { font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; color: var(--zz-text); }
.zz-mini__text b a::after { content: ""; position: absolute; inset: 0; }
.zz-mini__text span { font-size: var(--zz-fs-small); line-height: 20px; color: var(--zz-text-muted); }
.zz-mini .pb-card__add { position: relative; right: auto; bottom: auto; }
@media (hover: hover) { .zz-mini:hover { background: var(--zz-surface-sunk); transform: translateX(4px); } }

/* Collection builder (Pair, Five-Element Set): what's in it, what to add. */
.zz-coll { display: grid; gap: var(--zz-space-6); }
.zz-coll__list { display: grid; gap: var(--zz-space-2); }
.zz-mini--coll { padding: var(--zz-space-2) var(--zz-space-3) var(--zz-space-2) var(--zz-space-2); }
.zz-mini--coll img { width: 56px; height: 56px; }
.zz-mini--coll .zz-mini__text b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--zz-fs-small); line-height: 20px; }
.zz-mini__glyph { display: inline-flex; width: 14px; height: 14px; color: var(--tone-glyph); }
.zz-mini__act { width: 36px; height: 36px; position: relative; z-index: 1; }
.zz-mini__act .icon { width: 14px; height: 14px; }
.zz-mini--suggest { background: transparent; box-shadow: inset 0 0 0 var(--zz-hairline) var(--zz-border); }
@media (hover: hover) { .zz-mini--coll:hover { transform: none; } .zz-mini--suggest:hover { background: var(--zz-surface-tint); } }
.zz-coll__hint { margin: var(--zz-space-1) 0 0; font-size: var(--zz-fs-small); color: var(--zz-accent); }
.zz-coll__list .zz-mini { animation: zzSlideIn .35s var(--zz-ease) both; }

/* ---------- 24 · Product page ---------- */
/* Gallery (thumbs + one large view) beside a 48px-rhythm buy column. */
.zz-pdp { display: grid; grid-template-columns: minmax(0, 707fr) minmax(0, 501fr); gap: var(--zz-space-4); align-items: start; max-width: var(--zz-wrap); margin-inline: auto; padding: var(--zz-section-y) var(--zz-gutter); }
.zz-pdp .pb-gal { position: sticky; top: 96px; display: grid; grid-template-columns: 87px minmax(0, 1fr); gap: var(--zz-space-4); align-items: start; }
.zz-pdp .pb-gal__thumbs { position: static; display: grid; gap: var(--zz-space-2); }
.zz-pdp .pb-gal__thumb { width: 87px; height: 87px; border: 2px solid transparent; border-radius: var(--zz-radius-md); background: var(--zz-surface-tint); }
.zz-pdp .pb-gal__thumb[aria-current="true"] { border-color: var(--zz-accent); }
.zz-pdp .pb-gal__main { display: grid; gap: 0; }
.zz-pdp .pb-gal__item { grid-area: 1 / 1; aspect-ratio: 604 / 800; border-radius: var(--zz-radius-lg); background: var(--zz-surface-tint); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.zz-pdp .pb-gal__item.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.zz-buy { display: grid; gap: var(--zz-space-7); padding-inline: var(--zz-space-4); }
.zz-buy__head { display: grid; gap: var(--zz-space-5); }
.zz-buy__title { margin: 0; font-family: var(--zz-font-display); font-weight: 600; font-size: clamp(2rem, 1.2vw + 1.4rem, 2.5rem); line-height: 1.1; letter-spacing: -1.2px; color: var(--zz-text); text-wrap: balance; }
.zz-buy__need { display: flex; align-items: center; gap: var(--zz-space-2); margin: calc(-1 * var(--zz-space-3)) 0 0; font-family: var(--zz-font-display); font-weight: 500; font-size: 1.125rem; color: var(--zz-text-muted); }
.zz-buy__need:empty { display: none; }
.zz-buy__glyph { display: inline-flex; width: 22px; height: 22px; color: var(--tone-glyph); }
.zz-buy__price { display: flex; align-items: baseline; gap: var(--zz-space-1); font-family: var(--zz-font-display); font-weight: 600; font-size: 2rem; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; color: var(--zz-text); }
.zz-buy__price small { font-size: 1.25rem; }
.zz-buy__price s { margin-left: var(--zz-space-2); font-family: var(--zz-font-body); font-weight: 400; font-size: 1rem; color: var(--zz-text-subtle); }
.zz-buy__price .pb-buy__save { align-self: center; margin-left: var(--zz-space-2); padding: 2px 10px; border-radius: var(--zz-radius-pill); background: var(--zz-badge); color: var(--zz-on-accent); font-family: var(--zz-font-body); font-size: var(--zz-fs-small); font-weight: 600; }
.zz-buy__choices { display: grid; gap: var(--zz-space-7); }
.zz-buy__note { margin: 0; padding: var(--zz-space-4); border-radius: var(--zz-radius-md); background: var(--zz-surface-tint); font-size: var(--zz-fs-small); color: var(--zz-text-muted); }
.zz-buy__row { display: flex; gap: var(--zz-space-3); padding: var(--zz-space-4) 0 10px; }
.zz-buy__row .btn { flex: 1; }
.zz-buy__extra { display: grid; gap: var(--zz-space-3); }
.zz-buy__extra .gift-check, .zz-buy__extra label { display: flex; align-items: center; gap: var(--zz-space-2); font-size: var(--zz-fs-small); }
@media (max-width: 1000px) {
  .zz-pdp { grid-template-columns: 1fr; gap: var(--zz-space-6); }
  .zz-pdp .pb-gal { position: static; grid-template-columns: 1fr; }
  .zz-pdp .pb-gal__thumbs { order: 2; grid-auto-flow: column; justify-content: start; overflow-x: auto; }
  .zz-pdp .pb-gal__thumb { width: 64px; height: 64px; }
  .zz-pdp .pb-gal__item { aspect-ratio: 4 / 5; }
  .zz-buy { padding-inline: 0; gap: var(--zz-space-6); }
}
@media (max-width: 480px) { .zz-trust { grid-template-columns: 1fr; } .zz-trust li { flex-direction: row; align-items: center; gap: var(--zz-space-3); } .zz-pill-opt, .zz-pills > .zz-pill-opt:nth-child(n + 4) { flex-basis: calc(50% - 6px); flex-grow: 1; } }

/* ---------- 25 · Feature card ---------- */
/* Icon, title, one line. Used for product details and "what's in the box". */
.zz-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zz-space-4); }
.zz-features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .zz-features, .zz-features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .zz-features, .zz-features--4 { grid-template-columns: 1fr; } }
.zz-feature {
  display: grid; align-content: start; gap: var(--zz-space-2); padding: var(--zz-space-5);
  border-radius: var(--zz-radius-lg); background: var(--zz-surface);
  transition: transform var(--zz-dur) var(--zz-ease), box-shadow var(--zz-dur) var(--zz-ease);
}
.zz-section--base .zz-feature { background: var(--zz-surface-tint); }
.zz-feature .icon { width: 28px; height: 28px; margin-bottom: var(--zz-space-5); color: var(--zz-text); transition: transform var(--zz-dur-slow) var(--zz-ease); }
.zz-feature__n { margin-bottom: var(--zz-space-5); font-family: var(--zz-font-display); font-weight: 500; font-size: var(--zz-fs-small); color: var(--zz-text-muted); }
.zz-feature h3 { margin: 0; font-family: var(--zz-font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--zz-text); }
.zz-feature p { margin: 0; font-size: var(--zz-fs-body); line-height: 1.5; color: var(--zz-text-muted); }
@media (hover: hover) { .zz-feature:hover { transform: translateY(-4px); box-shadow: var(--zz-shadow-lift); } .zz-feature:hover .icon { transform: rotate(-8deg) scale(1.1); } }

/* ---------- 26 · Split ---------- */
/* Image (or text) beside text. --form puts a card on the right. */
.zz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--zz-space-6), 5vw, var(--zz-space-9)); align-items: center; }
.zz-split__media { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--zz-radius-xl); }
.zz-split__text { display: grid; gap: var(--zz-space-4); align-content: start; }
.zz-split__text .zz-lede { max-width: 26em; }
.zz-split__text > p:not(.zz-lede) { color: var(--zz-text-muted); line-height: 1.6; max-width: 40em; }
.zz-split--form { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 900px) { .zz-split, .zz-split--form { grid-template-columns: 1fr; } }

/* ---------- 27 · Surface card ---------- */
.zz-card { padding: clamp(var(--zz-space-5), 3vw, 40px); border-radius: var(--zz-radius-lg); background: var(--zz-surface); }
.zz-section--base .zz-card { background: var(--zz-surface-tint); }

/* ---------- 28 · Chip row (large) ---------- */
.zz-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zz-space-3); margin: 0; padding: 0; list-style: none; }
.zz-chip--lg { gap: var(--zz-space-3); padding: var(--zz-space-3) 20px var(--zz-space-3) var(--zz-space-3); font-size: var(--zz-fs-body); line-height: 24px; font-weight: 600; }
.zz-chip--lg .zz-chip__dot { width: 24px; height: 24px; border: 1px solid var(--zz-surface); }
.zz-chip--lg small { font-weight: 400; color: var(--zz-text-muted); }

/* ---------- 29 · Stacked info list ---------- */
.zz-trust--stack { grid-template-columns: 1fr; }
.zz-trust--stack li { flex-direction: row; align-items: center; gap: var(--zz-space-4); }
.zz-trust--stack li > span { display: grid; font-weight: 600; }
.zz-trust--stack small { font-size: var(--zz-fs-small); font-weight: 400; color: var(--zz-text-muted); }

/* ---------- 30 · Form layout + choice chips ---------- */
.zz-form { display: grid; gap: var(--zz-space-5); }
.zz-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-space-4); }
.zz-form .field { display: grid; gap: 6px; margin: 0; }
.zz-form .btn { justify-self: start; }
@media (max-width: 600px) { .zz-form .field-row { grid-template-columns: 1fr; } }
/* Radio groups read as chips: the checked one fills. */
.field--choice { display: flex; flex-wrap: wrap; gap: var(--zz-space-2); margin: 0; padding: 0; border: none; }
.field--choice legend { width: 100%; margin-bottom: var(--zz-space-2); font-size: var(--zz-fs-small); font-weight: 500; }
.field--choice label {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 8px var(--zz-space-4); border-radius: var(--zz-radius-pill);
  background: var(--zz-surface-tint); color: var(--zz-text); font-size: var(--zz-fs-small); font-weight: 600; letter-spacing: var(--zz-ls-ui); cursor: pointer;
  transition: background-color var(--zz-dur-fast) ease, color var(--zz-dur-fast) ease;
}
.zz-section--base .field--choice label, .zz-card .field--choice label { background: var(--zz-surface-tint); }
.zz-form .field--choice label { display: inline-flex; width: auto; flex: 0 0 auto; margin: 0; }
.field--choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.field--choice label:has(input:checked) { background: var(--zz-surface); color: var(--zz-text); box-shadow: inset 0 0 0 var(--zz-select-w) var(--zz-border-strong); }
.field--choice label:has(input:focus-visible) { outline: 2px solid var(--zz-focus); outline-offset: 2px; }

/* ---------- 31 · Mega menus ---------- */
/* Notebooks: groups on the left, that group's product cards on the right —
   image and text shown directly. Collections: the two collection cards. */
/* The panel hangs straight off the header — no gap — so the bar and the
   panel read as one surface and the pointer never crosses the page dim. */
.pb-mega { padding: 0; background: var(--zz-surface); border-radius: 0 0 var(--zz-radius-md) var(--zz-radius-md); box-shadow: var(--zz-shadow-float); }
.pb-mega .pb-mm__inner { background: none; border-radius: 0; box-shadow: none; }

.pb-mm__inner { padding: var(--zz-space-5) var(--zz-space-5) var(--zz-space-6); }
.pb-mm__inner--shop { grid-template-columns: 250px minmax(0, 1fr); gap: var(--zz-space-6); }
.pb-mm__side { display: grid; align-content: start; gap: var(--zz-space-1); padding-right: var(--zz-space-5); border-right: 1px solid var(--zz-border); }
.pb-mm__group { font-family: var(--zz-font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; white-space: nowrap; }
.pb-mm__all { margin-top: var(--zz-space-4); font-size: var(--zz-fs-small); }
.pb-mm__panes { min-width: 0; }
.pb-mm__pane { display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--zz-space-3); }
.pb-mm__pane.is-active { display: grid; animation: zzSlideIn .45s var(--zz-ease) both; }
@keyframes zzSlideIn { from { transform: translateY(10px); } to { transform: none; } } /* movement only — a pane is never left invisible */
.pb-card--compact { background: var(--zz-surface-tint); border-radius: var(--zz-radius-md); }
.pb-card--compact .pb-card__cat { top: 8px; left: 8px; padding: 2px 8px; font-size: 0.75rem; line-height: 18px; }
.pb-card--compact .pb-card__sw { width: 8px; height: 8px; }
.pb-card--compact .pb-card__body { padding: var(--zz-space-3) var(--zz-space-3) var(--zz-space-3); }
.pb-card--compact .pb-card__name { font-size: var(--zz-fs-small); line-height: 20px; }
.pb-card--compact .pb-card__meta { font-size: 0.75rem; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-card--compact .pb-card__price { margin-top: 6px; font-size: var(--zz-fs-small); }
.pb-card--compact .pb-card__add { width: 32px; height: 32px; right: 8px; bottom: 8px; }
.pb-card--compact .pb-card__add .icon { width: 14px; height: 14px; }
.pb-mm__inner--coll { grid-template-columns: 1fr; }
.pb-mm__promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zz-space-4); }
.pb-mm__promo { min-height: 280px; padding: var(--zz-space-5); border-radius: var(--zz-radius-lg); }
.pb-mm__promo::before { background: linear-gradient(180deg, rgba(36, 26, 22, .55), rgba(36, 26, 22, .1) 45%, rgba(36, 26, 22, .7)); }
.pb-mm__ptext { display: grid; gap: var(--zz-space-1); margin-top: auto; padding-right: 56px; }
.pb-mm__ptext b { font-family: var(--zz-font-display); font-weight: 500; font-size: var(--zz-fs-title); line-height: var(--zz-lh-title); letter-spacing: var(--zz-ls-tight); max-width: 14ch; }
.pb-mm__pprice { font-family: var(--zz-font-display); font-weight: 600; font-size: var(--zz-fs-body); font-variant-numeric: lining-nums tabular-nums; }
.pb-mm__pprice s { margin-left: 6px; font-family: var(--zz-font-body); font-weight: 400; opacity: .7; }
.pb-mm__go { right: var(--zz-space-5); bottom: var(--zz-space-5); width: 40px; height: 40px; background: var(--zz-surface); color: var(--zz-text); }
@media (max-width: 1200px) { .pb-mm__pane { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 32 · Help page pieces ---------- */
/* Feature card variants: a link with a go-arrow, and one led by a photo. */
.zz-feature--link { position: relative; color: inherit; padding-right: var(--zz-space-8); }
.zz-feature__go { position: absolute; right: var(--zz-space-5); bottom: var(--zz-space-5); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--zz-surface-tint); transition: transform var(--zz-dur) var(--zz-ease); }
.zz-section--base .zz-feature--link .zz-feature__go { background: var(--zz-surface); }
.zz-feature__go .icon { width: 16px; height: 16px; margin: 0; }
@media (hover: hover) { .zz-feature--link:hover .zz-feature__go { transform: translateX(4px); } }
.zz-feature--media { padding: var(--zz-space-3) var(--zz-space-3) var(--zz-space-5); }
.zz-feature--media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--zz-radius-md); margin-bottom: var(--zz-space-3); }
.zz-feature--media > :not(img) { padding-inline: var(--zz-space-3); }
.zz-feature--media .zz-feature__n { margin-bottom: 0; }
/* Smaller section title inside cards and splits. */
.zz-h2--sm { font-size: var(--zz-fs-h3); line-height: 1.1; }
.zz-card { display: grid; align-content: start; gap: var(--zz-space-3); }
.zz-card__note { margin: 0; color: var(--zz-text-muted); line-height: 1.6; }
.zz-split--even { grid-template-columns: 1fr 1fr; align-items: stretch; }
.zz-split--faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.zz-help-tile { min-height: 420px; }
/* Table */
.zz-table { width: 100%; border-collapse: collapse; font-size: var(--zz-fs-small); }
.zz-table th { padding: 0 0 var(--zz-space-2); text-align: left; font-weight: 500; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--zz-text-muted); border-bottom: 1px solid var(--zz-border); }
.zz-table td { padding: var(--zz-space-3) 0; border-bottom: 1px solid var(--zz-surface-tint); }
.zz-table th:last-child, .zz-table td:last-child { text-align: right; }
/* Numbered steps */
.zz-steps { display: grid; gap: var(--zz-space-2); margin: var(--zz-space-2) 0 0; padding: 0; list-style: none; }
.zz-steps li { display: flex; gap: var(--zz-space-3); align-items: baseline; padding: var(--zz-space-3) var(--zz-space-4); border-radius: var(--zz-radius-md); background: var(--zz-surface-tint); line-height: 1.5; }
.zz-section--base .zz-card .zz-steps li { background: var(--zz-surface); }
.zz-steps__n { flex-shrink: 0; font-family: var(--zz-font-display); font-weight: 600; color: var(--zz-text-muted); }
@media (max-width: 900px) { .zz-split--even, .zz-split--faq { grid-template-columns: 1fr; } }

/* ---------- 33 · Element brand: tones, glyph, seal, spec strip, element card ---------- */
/* From the packaging. A tone class sets --tone-paper / --tone-ink / --tone-glyph;
   everything below reads those. */
.zz-tone--earth { --tone-paper: var(--zz-earth-paper); --tone-ink: var(--zz-earth-ink); --tone-glyph: var(--zz-earth-glyph); }
.zz-tone--water { --tone-paper: var(--zz-water-paper); --tone-ink: var(--zz-water-ink); --tone-glyph: var(--zz-water-glyph); }
.zz-tone--fire  { --tone-paper: var(--zz-fire-paper);  --tone-ink: var(--zz-fire-ink);  --tone-glyph: var(--zz-fire-glyph); }
.zz-tone--air   { --tone-paper: var(--zz-air-paper);   --tone-ink: var(--zz-air-ink);   --tone-glyph: var(--zz-air-glyph); }
.zz-tone--ether { --tone-paper: var(--zz-ether-paper); --tone-ink: var(--zz-ether-ink); --tone-glyph: var(--zz-ether-glyph); }

/* Glyph: any [data-glyph] host; sized by font-size or width. */
.zz-glyph { display: block; width: 1em; height: 1em; }
[data-glyph] { display: inline-flex; }
[data-glyph] > .zz-glyph { width: 100%; height: 100%; }

/* Seal — "handmade with love". */
.zz-seal { display: inline-block; width: 120px; aspect-ratio: 1; color: var(--tone-ink, var(--zz-text)); }
.zz-seal__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zz-seal__text { font-family: var(--zz-font-display); font-weight: 500; font-size: 30px; letter-spacing: 4px; }
.zz-seal__glyph { color: var(--tone-glyph, currentColor); fill: var(--tone-glyph, currentColor); }
@media (hover: hover) { a:hover .zz-seal__svg, .zz-seal:hover .zz-seal__svg { animation: zzSealTurn 6s linear infinite; } }
@keyframes zzSealTurn { to { transform: rotate(360deg); } }

/* Spec strip — the packaging label's arrangement (a ruled frame of
   icon + value cells) in the site's own card style. The series cell takes
   the chosen element's glyph; value cells read big number over caption. */
.zz-specs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); margin-bottom: var(--zz-space-4);
  border: var(--zz-hairline) solid var(--zz-border); border-radius: var(--zz-radius-lg); background: var(--zz-surface); overflow: hidden;
}
.zz-section--base .zz-specs { background: var(--zz-surface-tint); border-color: transparent; }
.zz-specs__series { display: flex; align-items: center; gap: var(--zz-space-4); padding: var(--zz-space-5); border-right: var(--zz-hairline) solid var(--zz-border); }
.zz-specs__glyph { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; color: var(--tone-glyph, var(--zz-text)); }
.zz-specs__glyph [data-glyph], .zz-specs__glyph > .zz-glyph { width: 48px; height: 48px; }
.zz-specs__glyph .icon { width: 32px; height: 32px; }
.zz-specs__glyphs { display: flex; gap: 6px; }
.zz-specs__glyphs > span { width: 26px; height: 26px; color: var(--tone-glyph); }
.zz-specs__name { display: grid; gap: 2px; }
.zz-specs__name b { font-family: var(--zz-font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; }
.zz-specs__name span { font-size: var(--zz-fs-small); color: var(--zz-text-muted); }
.zz-specs__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.zz-specs__cells > div { display: grid; align-content: center; justify-items: center; gap: 2px; padding: var(--zz-space-5) var(--zz-space-3); text-align: center; }
.zz-specs__cells > div + div { border-left: var(--zz-hairline) solid var(--zz-border); }
.zz-specs__cells dt { font-family: var(--zz-font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--zz-text); }
.zz-specs__cells dd { margin: 0; font-size: var(--zz-fs-small); color: var(--zz-text-muted); }
@media (max-width: 900px) {
  .zz-specs { grid-template-columns: 1fr; }
  .zz-specs__series { border-right: none; border-bottom: var(--zz-hairline) solid var(--zz-border); }
}
@media (max-width: 480px) { .zz-specs__cells dt { font-size: 1.5rem; } }

/* Element card — a standard feature card led by the element's glyph. */
.zz-features--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zz-el-card__glyph { display: block; width: 44px; height: 44px; margin-bottom: var(--zz-space-5); color: var(--tone-glyph); transition: transform var(--zz-dur-slow) var(--zz-ease); }
@media (hover: hover) { .zz-el-card:hover .zz-el-card__glyph { transform: rotate(-8deg) scale(1.1); } }
@media (max-width: 1100px) { .zz-features--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .zz-features--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .zz-features--5 { grid-template-columns: 1fr; } }

/* Product-card chips show the element glyph in place of a colour dot. */
.pb-card__glyph, .zz-chip__glyph { display: inline-flex; width: 14px; height: 14px; color: var(--tone-glyph, currentColor); }

/* ---------- 16 · Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .zz-stamp, .zz-letter__card, .pb-card, .pb-tile__bg { transition: none !important; }
}

/* ---------- Product page: specifications as cards (DECISIONS.md #49) ----------
   Same card as the trust row; value over a muted label. */
.zz-trust--specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zz-trust--specs li { gap: var(--zz-space-3); }
.zz-trust--specs li[hidden] { display: none; }
.zz-trust--specs li > span { display: grid; gap: 2px; font-weight: 600; }
.zz-trust--specs small { font-size: var(--zz-fs-small); line-height: 18px; font-weight: 400; color: var(--zz-text-muted); }
.zz-trust--specs li { flex-direction: row; align-items: center; }
@media (max-width: 480px) { .zz-trust--specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zz-trust--specs li { flex-direction: column; align-items: flex-start; } }

/* Section heading set to the left (the ZUZU way) */
.zz-head--left { justify-items: start; text-align: left; margin-left: 0; }
.zz-head--left .zz-lede { margin: 0; }

/* Products menu: the group names are buttons (they switch the pane, they
   don't open a page) */
button.pb-mm__group { display: block; border: 0; background-color: transparent; text-align: left; cursor: pointer; }
.zz-option__price s { margin-left: 4px; font-weight: 400; font-size: var(--zz-fs-small); color: var(--zz-text-muted); }
.zz-option__save { font-weight: 600; color: var(--zz-accent); }