/* EROVYN storefront. One stylesheet for every public page and the internal
   sandbox. One token scale, mobile first, and three width transitions: 768,
   1024 and 1280 px. Written 2026-09-10 to replace erovyn-store.css and
   erovyn-pdp.css, which carried 2,176 rules and five generations of product
   page selectors. Gate G19 (build/lib/gates.py) refuses any other breakpoint,
   an undefined token, transition: all, and !important outside the
   reduced-motion block. Gate G13 checks every text and control colour pair. */

:root {
  /* The V2 palette (handoff 02). Semantic tokens below repeat these values as
     hex so gate G13 can measure every pair. */
  --bone-0: #fbf7f3;       /* reading canvas */
  --bone-1: #f4eae4;       /* cards and quiet sections */
  --ink: #21191e;          /* primary type */
  --night-plum: #170f16;   /* hero, campaign, footer fields */
  --aubergine: #2b1624;    /* depth gradient, product media stage */
  --oxblood: #63263a;      /* selected states, editorial marks */
  --heat-coral: #d55e57;   /* primary action, live interaction */
  --rose-mist: #e9cbc7;    /* halos, diagram fills */

  --c-ground: #fbf7f3;
  --c-surface: #fffcfa;
  --c-sunken: #f4eae4;
  --c-ink: #21191e;
  --c-ink-soft: #66535c;
  --c-line: #e6d9d3;
  --c-line-strong: #cbb7b0;
  --c-control-border: #8a757d;
  --c-accent: #63263a;
  --c-select: #63263a;
  /* Ink on heat coral is 4.56:1; white on it would fail AA. */
  --c-action: #d55e57;
  --c-action-hover: #e0766f;
  --c-action-ink: #21191e;
  --c-dark: #170f16;
  --c-deep: #2b1624;
  --c-on-dark: #f7efea;
  --c-on-dark-soft: #cbb7bf;
  --c-focus: #63263a;
  --c-focus-on-dark: #e9cbc7;
  --c-halo: #e9cbc7;
  --c-error: #9b1c2e;
  --c-error-soft: #fbeeee;
  --c-success: #2d5a47;
  --c-success-soft: #edf5f0;
  --c-brand-dot: #d55e57;
  --c-scrim: rgba(23, 15, 22, .45);
  --c-glass: rgba(251, 247, 243, .9);
  --c-glass-surface: rgba(255, 252, 250, .95);
  --c-rule-on-dark: rgba(247, 239, 234, .16);

  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --page-max: 1520px;
  --content-max: 1180px;
  /* Handoff 08: no text measure over 72 characters. Counted line by line in
     the sans face, 58ch held up to 83 characters and 48ch up to 73; 47ch keeps
     every line at 72 or under. Leads use the same token: ch scales with the font. */
  --prose-max: 47ch;
  --gutter: clamp(16px, 3vw, 48px);
  --section-y: clamp(56px, 7vw, 112px);
  --section-tight-y: clamp(32px, 4vw, 64px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --text-xs: clamp(.75rem, .72rem + .08vw, .8125rem);
  --text-sm: clamp(.875rem, .84rem + .1vw, .9375rem);
  --text-body: clamp(1rem, .95rem + .16vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1rem + .38vw, 1.375rem);
  --text-read: clamp(1.0625rem, .98rem + .22vw, 1.1875rem);
  --text-h3: clamp(1.5rem, 1.28rem + .65vw, 2rem);
  --text-h2: clamp(2rem, 1.55rem + 1.3vw, 3rem);
  --text-h1: clamp(2.25rem, 1.55rem + 2.2vw, 4rem);
  --text-display: clamp(2.75rem, 1.7rem + 3.2vw, 5rem);
  --text-product: clamp(2.25rem, 1.9rem + 1.2vw, 3.5rem);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  /* Handoff 02: 180 to 260 ms, one easing, nothing continuous. */
  --duration-fast: 180ms;
  --duration-ui: 220ms;
  --duration-panel: 260ms;

  --z-sticky: 40;
  --z-header: 50;
  --z-skip: 60;

  --header-h: 60px;
  --shadow-panel: 0 24px 64px rgba(37, 27, 32, .18);
}

@media (min-width: 1024px) {
  :root { --header-h: 68px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font: 400 var(--text-body)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
main:focus { outline: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -120px; z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  background: var(--c-action); color: var(--c-action-ink); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); color: var(--c-action-ink); }
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
html.has-dialog { overflow: hidden; }

/* ---------------------------------------------------------------- layout */
/* One left edge for the header, every section and the product page: the page
   container. Readable blocks inside it constrain themselves (prose 70ch,
   headings 760px, forms 880px), so wide screens get margins, never long lines. */
.wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-tight-y); }
.section--flush { padding-top: 0; }
.section--tint { background: var(--c-sunken); }
.section-heading { max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-heading__title { font: 400 var(--text-h2)/1.12 var(--font-serif); letter-spacing: -.01em; text-wrap: balance; }
.section-heading__lead { margin-top: var(--space-3); font-size: var(--text-lead); line-height: 1.5; color: var(--c-ink-soft); max-width: var(--prose-max); }
.section-heading__note { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--c-ink-soft); }
.section__more { margin-top: var(--space-6); }
.section__note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--c-ink-soft); max-width: var(--prose-max); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.eyebrow { margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.eyebrow--on-dark { color: var(--c-focus-on-dark); }
.notice { padding: var(--space-5); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-ground);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-ui) var(--ease-standard), background-color var(--duration-ui) var(--ease-standard);
}
/* Solid once the page scrolls: handoff 02 rules out glass surfaces. */
.site-header.is-scrolled { border-bottom-color: var(--c-line); background: var(--c-ground); }
/* The 1 px border sits inside --header-h, so the header measures exactly 60 or
   68 px (handoff 02: 56 to 60 mobile, 64 to 68 desktop). */
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-4);
  width: min(100% - 2 * var(--gutter), var(--page-max)); height: calc(var(--header-h) - 1px); margin-inline: auto;
}
.brand {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
  color: var(--c-ink); text-decoration: none;
  font: 400 20px/1 var(--font-serif); letter-spacing: .3em;
}
.brand:hover { color: var(--c-ink); }
.brand__dot { color: var(--c-brand-dot); letter-spacing: 0; }
.site-nav { display: none; }
.site-nav__list { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.site-nav__link, .site-header__utility {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.site-nav__link:hover, .site-header__utility:hover { background: var(--c-sunken); color: var(--c-ink); }
.site-nav__link[aria-current="page"], .site-header__utility[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-1); }
.site-header__utility { display: none; }
.icon-button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--c-ink);
  text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard);
}
.icon-button:hover { background: var(--c-sunken); color: var(--c-ink); }

@media (min-width: 1024px) {
  .site-header__inner { gap: var(--space-6); }
  .brand { margin-right: 0; font-size: 22px; }
  .site-nav { display: block; margin-right: auto; }
  .site-header__utility { display: inline-flex; }
  .site-header__menu { display: none; }
}

/* ---------------------------------------------------------------- header menus
   From 1024 px: a panel under the header per menu item, opened by hovering the
   item with a mouse or by its chevron button; the mobile menu carries the same
   groups. The panel hangs from the sticky header, so the header keeps its height. */
.site-nav__item { display: flex; align-items: center; }
.site-nav__toggle {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--c-ink-soft); cursor: pointer;
}
.site-nav__toggle:hover { background: var(--c-sunken); color: var(--c-ink); }
.site-nav__toggle .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__item.is-open > .site-nav__link { background: var(--c-sunken); color: var(--c-ink); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  background: var(--c-ground); box-shadow: var(--shadow-panel);
}
.mega[hidden] { display: none; }
.mega:not([hidden]) { animation: fade-in var(--duration-ui) var(--ease-out); }
.mega__inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-7);
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding: var(--space-6) 0;
}
/* Two groups: the first spans two of the three columns and lays its links out in
   two, so the panel is as full and as balanced as the three-group one. */
.mega__inner--2 > .mega__group:first-child { grid-column: span 2; }
.mega__inner--2 > .mega__group:first-child .mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
.mega__title {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft);
}
.mega__list { display: grid; gap: 2px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.mega__link {
  display: grid; gap: 2px; min-height: 44px; margin-inline: calc(-1 * var(--space-3)); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--c-ink); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.mega__link:hover { background: var(--c-sunken); color: var(--c-ink); }
.mega__link[aria-current="page"] .mega__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mega__name { font-weight: 500; }
.mega__note { font-size: var(--text-sm); color: var(--c-ink-soft); }
.mega__all { grid-column: 1 / -1; padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
@media (pointer: coarse) {
  .site-nav__toggle { width: 44px; height: 44px; margin-left: -14px; }
}

/* ---------------------------------------------------------------- dialogs */
.drawer {
  inset: 0 0 0 auto; width: min(420px, 100vw); height: 100%; max-width: 100vw; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: var(--c-surface); color: var(--c-ink);
  box-shadow: var(--shadow-panel);
}
.drawer::backdrop, .search-dialog::backdrop { background: var(--c-scrim); }
.drawer[open] { animation: panel-in var(--duration-panel) var(--ease-out); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 var(--space-3) 0 var(--space-5); border-bottom: 1px solid var(--c-line);
}
.drawer__title { font: 400 18px/1 var(--font-serif); letter-spacing: .08em; }
.drawer__nav { padding: var(--space-2) var(--space-5) var(--space-7); overflow-y: auto; }
.drawer__group-title {
  margin: var(--space-5) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft);
}
.drawer__list { margin: 0; padding: 0; list-style: none; }
.drawer__link {
  display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--c-line);
  font-size: var(--text-lead); text-decoration: none;
}
/* The mobile menu's groups are native disclosures: Shop open, the rest folded. */
.drawer__group { border-bottom: 1px solid var(--c-line-strong); }
.drawer__summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font: 400 20px/1.2 var(--font-serif); cursor: pointer; list-style: none;
}
.drawer__summary::-webkit-details-marker { display: none; }
.drawer__summary::after {
  content: ""; width: 9px; height: 9px; margin-right: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform var(--duration-fast) var(--ease-standard);
}
.drawer__group[open] > .drawer__summary::after { transform: translateY(2px) rotate(-135deg); }
.drawer__group > .drawer__group-title:first-of-type { margin-top: var(--space-2); }
.drawer__all { margin: var(--space-2) 0 var(--space-4); }
.drawer__all .drawer__link { border-bottom: 0; font-weight: 600; }
.search-dialog {
  width: min(640px, 100vw - 2 * var(--gutter)); margin: calc(var(--header-h) + 16px) auto auto;
  padding: clamp(20px, 4vw, 32px); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-panel);
}
.search-dialog[open] { animation: fade-in var(--duration-ui) var(--ease-out); }
.search-dialog__label { display: block; margin-bottom: var(--space-4); font: 400 var(--text-h3)/1.2 var(--font-serif); }
.search-field { position: relative; }
.search-field__input {
  width: 100%; min-height: 52px; padding: 0 52px 0 var(--space-4);
  border: 1px solid var(--c-control-border); border-radius: var(--radius-md); background: var(--c-surface);
  font-size: max(16px, 1rem);
}
.search-field__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-field__input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); }
.search-field__clear {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--c-ink-soft);
}
@keyframes panel-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- footer */
.site-footer { margin-top: 0; padding-top: clamp(48px, 6vw, 80px); background: var(--c-dark); color: var(--c-on-dark); }
.site-footer a { color: var(--c-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--c-on-dark); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--c-focus-on-dark); }
.site-footer__inner {
  display: grid; gap: var(--space-7);
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto;
}
.brand--footer { color: var(--c-on-dark); }
.brand--footer:hover { color: var(--c-on-dark); }
.site-footer__tagline { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--c-on-dark-soft); }
.site-footer__note { margin-top: var(--space-4); max-width: 44ch; font-size: var(--text-sm); color: var(--c-on-dark-soft); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.site-footer__heading {
  margin-bottom: var(--space-3); font: 600 var(--text-xs)/1.4 var(--font-sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-on-dark-soft);
}
.site-footer__list, .site-footer__legal { margin: 0; padding: 0; list-style: none; }
.site-footer__list a, .site-footer__legal a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--text-sm); }
.site-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin: var(--space-7) auto 0;
  padding-block: var(--space-5); border-top: 1px solid var(--c-rule-on-dark);
}
.site-footer__copy { font-size: var(--text-sm); color: var(--c-on-dark-soft); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
html.has-buy-bar .site-footer__base { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
  .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr); }
}

/* ---------------------------------------------------------------- navigation aids */
.crumbs { margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--c-ink-soft); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.crumbs__item { display: inline-flex; align-items: center; }
.crumbs__item:not(:last-child)::after { content: "/" / ""; margin-inline: var(--space-2); color: var(--c-line-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.toc { padding: var(--space-4) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.toc__title, .related__title {
  margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft);
}
.toc__list { display: grid; margin: 0; padding: 0; list-style: none; }
.toc__item a {
  display: flex; align-items: center; min-height: 36px; padding-left: var(--space-3);
  border-left: 2px solid var(--c-line); font-size: var(--text-sm); color: var(--c-ink-soft); text-decoration: none;
}
.toc__item a:hover { border-left-color: var(--c-accent); color: var(--c-ink); }
.related { margin-top: clamp(40px, 5vw, 64px); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.related__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: 0; padding: 0; list-style: none; }
.related__item a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Touch targets at least 44 by 44 px (handoff 08). The review link keeps its
   row height: negative margins take back what the taller box adds. */
@media (pointer: coarse) {
  .site-footer__list a, .site-footer__legal a, .crumbs a, .toc__item a { min-height: 44px; min-width: 44px; }
  .seal { min-height: 44px; }
  .rating__link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
}

/* ---------------------------------------------------------------- buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.button:active { transform: translateY(1px); }
.button--primary { background: var(--c-action); color: var(--c-action-ink); }
.button--primary:hover { background: var(--c-action-hover); color: var(--c-action-ink); }
.button--secondary { border-color: var(--c-ink); background: transparent; color: var(--c-ink); }
.button--secondary:hover { background: var(--c-ink); color: var(--c-surface); }
.button--ghost { border-color: var(--c-line-strong); background: transparent; color: var(--c-ink); }
.button--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }
.button--on-dark { background: var(--c-on-dark); color: var(--c-dark); }
.button--on-dark:hover { background: var(--c-surface); color: var(--c-dark); }
.button--block { width: 100%; }
.button[disabled], .button[aria-busy="true"] { opacity: .6; cursor: progress; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; text-decoration: none; color: var(--c-ink); }
.text-link .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- page head */
.page-head { padding-block: clamp(28px, 5vw, 72px) clamp(20px, 3vw, 40px); }
.page-head__title { max-width: 22ch; font: 400 var(--text-h1)/1.06 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; }
.page-head__lead { margin-top: var(--space-4); max-width: var(--prose-max); font-size: var(--text-lead); line-height: 1.5; color: var(--c-ink-soft); }
/* A guide's direct answer, first after its lead: the passage an answer engine quotes. */
.answer {
  max-width: var(--prose-max); margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--c-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--c-surface);
}
.answer__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.answer__text { margin-top: var(--space-2); }
.page-head__meta { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--c-ink-soft); }

/* ---------------------------------------------------------------- cards and grids */
.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface);
}
.card--link { transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-ui) var(--ease-out); }
.card__title { font: 400 var(--text-h3)/1.18 var(--font-serif); }
.card__text { color: var(--c-ink-soft); }
.card__cta { margin-top: auto; padding-top: var(--space-2); }
.card__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.card__media {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-2);
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--c-dark);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .card--link:hover { border-color: var(--c-line-strong); transform: translateY(-2px); }
}
.split { display: grid; gap: var(--space-6); }
.feature { padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--c-dark); color: var(--c-on-dark); }
.feature :focus-visible { outline-color: var(--c-focus-on-dark); }
.feature__title { font: 400 var(--text-h2)/1.1 var(--font-serif); }
.feature__text { margin-top: var(--space-3); max-width: 44ch; color: var(--c-on-dark-soft); }
.point-grid { display: grid; gap: var(--space-5); }
.point { padding-top: var(--space-4); border-top: 1px solid var(--c-line-strong); }
.point__title { font: 600 var(--text-body)/1.35 var(--font-sans); }
.point__text { margin-top: var(--space-2); color: var(--c-ink-soft); }
.point-list { display: grid; gap: var(--space-5); margin-top: var(--space-6); }

@media (min-width: 768px) {
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .point-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: stretch; }
  .split--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* ---------------------------------------------------------------- home */
/* Handoff 02: a 43/57 hero at clamp(580px, 76vh, 760px) with the owner render
   at 16:10 from 1024 px and a deliberate 4:5 crop below; then the shelf or the
   mechanism architecture, the sensation selector, the dark campaign, the
   confidence strip, guidance, the standard and the supplier invitation. */
.hero { padding-block: var(--space-4) var(--space-6); }
.hero__inner {
  display: grid; gap: clamp(24px, 4vw, 64px); align-items: center;
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto;
}
.hero__copy { max-width: 520px; }
.hero__title { font: 400 var(--text-display)/1.03 var(--font-serif); letter-spacing: -.02em; text-wrap: balance; }
.hero__lead { margin-top: var(--space-5); max-width: 44ch; font-size: var(--text-lead); line-height: 1.5; color: var(--c-ink-soft); }
.hero__media { overflow: hidden; aspect-ratio: 4 / 5; max-height: 70svh; border-radius: var(--radius-lg); background: var(--c-dark); }
.hero__art { display: block; width: 100%; height: 100%; }
.hero__image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.section--shelf { padding-top: var(--space-6); }
.mech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.mech-tile, .sense-tile {
  display: grid; align-content: start; gap: var(--space-2); border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-ink); text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), translate var(--duration-ui) var(--ease-out);
}
.mech-tile { min-height: 132px; padding: var(--space-4); border-radius: var(--radius-md); }
.sense-tile { padding: var(--space-5); border-radius: var(--radius-lg); }
.mech-tile:hover, .sense-tile:hover { border-color: var(--c-select); color: var(--c-ink); translate: 0 -2px; }
.mech-tile:hover .t-accent, .mech-tile:focus-visible .t-accent { stroke: var(--heat-coral); }
.mech-tile__name { font: 400 var(--text-h3)/1.15 var(--font-serif); }
.mech-tile__line, .sense-tile__text { font-size: var(--text-sm); color: var(--c-ink-soft); }
.sense-grid { display: grid; gap: var(--space-4); }
.sense-tile .sense-tile__art { max-height: 150px; color: var(--c-ink); }
.sense-tile__title { font: 400 var(--text-h3)/1.2 var(--font-serif); }
.campaign { position: relative; display: grid; overflow: hidden; background: var(--c-dark); color: var(--c-on-dark); }
.campaign :focus-visible { outline-color: var(--c-focus-on-dark); }
.campaign__art { display: block; aspect-ratio: 4 / 5; max-height: 70svh; }
.campaign__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.campaign__inner { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-6) var(--gutter) var(--space-7); }
.campaign__title { max-width: 16ch; font: 400 var(--text-h1)/1.05 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; }
.campaign .pulse-trace { color: var(--c-on-dark); }
.will-trace .pulse-trace__line { stroke-dashoffset: 1; }
.campaign__more, .campaign__more a { color: var(--c-on-dark); }
.confidence { padding-block: var(--space-2); border-block: 1px solid var(--c-line); background: var(--c-surface); }
.guide-grid { display: grid; gap: var(--space-5); }
.guide-card { position: relative; display: grid; align-content: start; gap: var(--space-2); }
.guide-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--c-dark); }
.guide-card__texture { display: block; width: 100%; height: 100%; }
.guide-card__mark {
  position: absolute; bottom: var(--space-4); left: var(--space-4); display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--c-surface); color: var(--c-ink);
}
.guide-card__title { margin-top: var(--space-2); font: 400 var(--text-h3)/1.2 var(--font-serif); }
.guide-card__link { text-decoration: none; }
.guide-card__link::after { content: ""; position: absolute; inset: 0; }
.guide-card__text { font-size: var(--text-sm); color: var(--c-ink-soft); }
.guide-card__cta { font-size: var(--text-sm); font-weight: 600; color: var(--c-accent); }
.guide-card:hover .guide-card__cta { text-decoration: underline; }
.standard { display: grid; border-top: 1px solid var(--c-line-strong); }
.standard__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--c-line-strong); }
.standard__n { grid-row: span 2; font: 400 var(--text-h2)/1 var(--font-serif); color: var(--c-accent); }
.standard__title { font: 600 var(--text-body)/1.35 var(--font-sans); }
.standard__text { margin-top: var(--space-2); max-width: var(--prose-max); font: 400 var(--text-lead)/1.45 var(--font-serif); }
/* The /shop hub and the category architecture. */
.shop-art { overflow: hidden; margin-top: var(--space-5); border-radius: var(--radius-lg); background: var(--c-dark); }
.shop-art__picture { display: block; aspect-ratio: 4 / 5; max-height: 60svh; }
.shop-art__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.mech-list { display: grid; gap: var(--space-6); }
.mech {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-5);
  border-top: 1px solid var(--c-line-strong); scroll-margin-top: calc(var(--header-h) + 16px);
}
.mech__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-sunken); color: var(--c-ink); }
.mech__title { font: 400 var(--text-h2)/1.1 var(--font-serif); }
.mech__line { margin-top: var(--space-2); font-size: var(--text-lead); color: var(--c-accent); }
.mech__text { margin-top: var(--space-3); max-width: var(--prose-max); }
.mech .cells { max-width: 820px; margin-top: var(--space-4); }
.mech__more { margin-top: var(--space-4); }
.feel-grid { display: grid; gap: var(--space-4); }
.feel-block { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); scroll-margin-top: calc(var(--header-h) + 16px); }
.feel-block .feel-block__art { max-height: 140px; color: var(--c-ink); }
.feel-block__title { font: 400 var(--text-h3)/1.2 var(--font-serif); }
.feel-block__text, .feel-block__links { font-size: var(--text-sm); color: var(--c-ink-soft); }
.launch-panel--quiet .launch-panel__title { font-size: var(--text-h3); }
.how__photo { display: block; overflow: hidden; margin-top: var(--space-4); aspect-ratio: 4 / 5; max-height: 60svh; border-radius: var(--radius-lg); background: var(--c-dark); }
.how__photo-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.proof { border-block: 1px solid var(--c-line); background: var(--c-surface); }
.proof__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4);
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin: 0 auto; padding: var(--space-4) 0;
  list-style: none; font-size: var(--text-sm); font-weight: 500; text-align: center;
}
.proof__item { display: flex; align-items: center; justify-content: center; }
.cta-band { padding-block: clamp(48px, 6vw, 88px); background: var(--c-dark); color: var(--c-on-dark); }
.cta-band :focus-visible { outline-color: var(--c-focus-on-dark); }
.cta-band__inner { display: grid; gap: var(--space-5); align-items: center; }
.cta-band__title { font: 400 var(--text-h2)/1.1 var(--font-serif); text-wrap: balance; }
.cta-band__text { margin-top: var(--space-3); max-width: var(--prose-max); color: var(--c-on-dark-soft); }
.cta-band + .site-footer { border-top: 1px solid var(--c-rule-on-dark); }

@media (min-width: 768px) {
  .mech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sense-grid, .guide-grid, .feel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign__art, .shop-art__picture { aspect-ratio: 1 / 1; }
  .proof__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) 0; }
  .proof__item + .proof__item { margin-inline-start: var(--space-5); padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--c-line-strong); }
}
@media (min-width: 1024px) {
  /* The hero fills the first viewport and leaves the next heading in view,
     down to 1280 x 720. */
  .hero { padding-block: 0; }
  .hero__inner { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); min-height: clamp(580px, 76vh, 760px); }
  .hero__media { aspect-ratio: 16 / 10; max-height: none; }
  .hero__image { object-position: 50% 50%; }
  .section--shelf { padding-top: var(--space-4); }
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .campaign > * { grid-area: 1 / 1; }
  .campaign__art { aspect-ratio: 3440 / 1160; max-height: 600px; }
  .campaign__inner { align-self: center; width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding: 0; }
  .campaign__title { max-width: 12ch; }
  .guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .standard { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .standard__item { grid-template-columns: minmax(0, 1fr); padding: var(--space-5) var(--space-6) var(--space-5) 0; border-top: 1px solid var(--c-line-strong); border-bottom: 0; }
  .standard__item + .standard__item { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--c-line-strong); }
  .standard__n { grid-row: auto; margin-bottom: var(--space-3); }
  .shop-art__picture { aspect-ratio: 3440 / 1160; }
  .mech-list { gap: var(--space-7); }
  .how__photo { aspect-ratio: 16 / 10; }
}
@media (min-width: 1280px) {
  .mech-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sense-grid, .feel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- prose, tables, reference */
/* Running text anywhere in a page keeps the measure unless a narrower one is set. */
main :is(p, dd, blockquote, figcaption) { max-width: var(--prose-max); }
/* A table cell ignores max-width, so its text carries the measure inside it. */
.table__text { display: block; max-width: var(--prose-max); }
.empty-results > * { margin-inline: auto; }
/* ---------------------------------------------------------------- long-form text
   Phones: one column, each heading above its text. From 64em (1024 px at the
   default text size, later when text is enlarged, so big text gets one wide
   column rather than two cramped ones): each section is a row across the content
   width, its number and heading in a left column that stays in view while the
   text scrolls, the text on the right at a larger reading size and the same
   72-character measure. A long page reads as a spread with an outline down its
   left instead of a narrow ribbon on one side of the screen. */
.longform__row { padding-block: var(--space-6); border-top: 1px solid var(--c-line); }
.longform__row:first-child { padding-top: 0; border-top: 0; }
.longform__num { margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.longform__title { font: 400 var(--text-h3)/1.22 var(--font-serif); text-wrap: balance; }
/* A glossary term reads like a question in the FAQ: a serif heading beside its definition. */
.longform__term { font: 400 var(--text-h3)/1.22 var(--font-serif); }
.longform__body { margin-top: var(--space-4); }
.longform__body > * + * { margin-top: var(--space-4); }
.longform__body a { color: var(--c-accent); }
.longform--terms .longform__row, .longform--qa .longform__row { padding-block: var(--space-5); }
.longform--terms .longform__row:first-child, .longform--qa .longform__row:first-child { padding-top: 0; }
.longform--terms .longform__body { margin: var(--space-2) 0 0; }
.toc__num { margin-right: var(--space-3); font-size: var(--text-xs); font-weight: 600; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.page-head__media { margin-top: var(--space-6); }
@media (min-width: 64em) {
  .longform__row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); column-gap: clamp(48px, 6vw, 112px);
    align-items: start; padding-block: clamp(40px, 3.5vw, 56px);
  }
  .longform__head { position: sticky; top: calc(var(--header-h) + 32px); }
  .longform__body { margin-top: 0; font-size: var(--text-read); line-height: 1.7; }
  .longform--qa .longform__head, .longform--terms .longform__head { position: static; }
  .longform--terms .longform__body { margin-top: 0; }
  .longform__row--contents { display: block; }
  .longform__row--contents .toc {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 35rem); column-gap: clamp(48px, 6vw, 112px);
    padding: 0; border: 0; background: transparent;
  }
  /* Contents fill down the first column, then the second: 01 to 05, then 06 on. */
  .longform__row--contents .toc__list { display: block; columns: 2; column-gap: var(--space-6); }
  .longform__row--contents .toc__item { break-inside: avoid; }
  .page-head__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 6vw, 112px); align-items: end; }
  .page-head__media { margin-top: 0; }
}
.guide-figure { overflow: hidden; aspect-ratio: 16 / 9; max-height: 420px; border-radius: var(--radius-lg); background: var(--c-dark); }
.guide-figure img { width: 100%; height: 100%; object-fit: cover; }
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-sm); }
.table__caption { caption-side: bottom; padding: var(--space-4); text-align: left; color: var(--c-ink-soft); }
.table th, .table td { padding: var(--space-4); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.table thead th { background: var(--c-sunken); font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); }
.table tbody th { font-weight: 600; }
.table tbody tr:last-child > * { border-bottom: 0; }
.inline-list, .promises, .included { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.inline-list__item, .promises__item, .included__item { display: inline-flex; align-items: center; }
/* Hairline dividers separate short runs. A middot or a dot drawn in ::before
   is a simulated bullet (handoff 02), and gate G23 refuses one. */
.inline-list__item + .inline-list__item,
.promises__item + .promises__item,
.included__item + .included__item,
.buy-bar__part + .buy-bar__part,
.availability__dispatch { margin-inline-start: var(--space-3); padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--c-line-strong); }
.promises { margin-bottom: var(--space-6); font-size: var(--text-sm); font-weight: 600; color: var(--c-ink-soft); }

@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}

/* ---------------------------------------------------------------- forms */
.form { position: relative; display: grid; gap: var(--space-5); max-width: 760px; }
.form__fields { display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__req { font-weight: 400; color: var(--c-ink-soft); }
.field__hint { font-size: var(--text-sm); color: var(--c-ink-soft); }
.field__control {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-control-border); border-radius: var(--radius-sm); background: var(--c-surface);
  font-size: max(16px, 1rem); line-height: 1.4;
}
.field__control--area { min-height: 144px; resize: vertical; }
.field__control--select {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23251b20' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field__control:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); }
.field__control[aria-invalid="true"] { border: 2px solid var(--c-error); }
.field__error { font-size: var(--text-sm); font-weight: 600; color: var(--c-error); }
.field__error:empty { display: none; }
.field--check { grid-template-columns: 24px minmax(0, 1fr); align-items: start; column-gap: var(--space-3); }
.field--check .field__error { grid-column: 2; }
.check { width: 24px; height: 24px; margin: 0; accent-color: var(--c-select); }
.check[aria-invalid="true"] { outline: 2px solid var(--c-error); outline-offset: 2px; }
.field__label--check { font-weight: 400; line-height: 1.5; }
.hp { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__summary { padding: var(--space-4) var(--space-5); border: 2px solid var(--c-error); border-radius: var(--radius-md); background: var(--c-error-soft); }
.form__summary-title { font-weight: 600; color: var(--c-error); }
.form__summary-list { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.form__summary-list a, .form__summary-item { color: var(--c-error); font-weight: 600; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.form__status { font-size: var(--text-sm); color: var(--c-ink-soft); }
.form__status:empty { display: none; }
.form__status.is-error { font-weight: 600; color: var(--c-error); }
.form__success { padding: var(--space-6); border: 1px solid var(--c-success); border-radius: var(--radius-md); background: var(--c-success-soft); }
.form__success-title { font: 400 var(--text-h3)/1.2 var(--font-serif); color: var(--c-success); }
.form__success p + p { margin-top: var(--space-2); }
.form-panel { max-width: 880px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.form-fallback { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--c-ink-soft); }
.form-result:empty { display: none; }
.launch-panel { display: grid; gap: var(--space-6); padding: clamp(24px, 4vw, 48px); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.launch-panel__title { max-width: 18ch; font: 400 var(--text-h2)/1.1 var(--font-serif); text-wrap: balance; }
.launch-panel__text { margin-top: var(--space-3); max-width: var(--prose-max); color: var(--c-ink-soft); }
.launch-panel__more { margin-top: var(--space-4); }
.launch-panel__form-title { margin-bottom: var(--space-3); font: 600 var(--text-body)/1.3 var(--font-sans); }
.route-grid { display: grid; gap: var(--space-4); }
.route-card { padding: var(--space-6) var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.route-card__title { font: 400 var(--text-h3)/1.2 var(--font-serif); }
.route-card__text { margin-top: var(--space-3); color: var(--c-ink-soft); }
.route-card__action { margin-top: var(--space-3); }
html:not(.js) [data-storage-control] { display: none; }
.storage-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.storage-control__status { font-size: var(--text-sm); color: var(--c-success); }

@media (min-width: 768px) {
  .form:not(.form--compact) .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__fields > [data-field="message"], .form__fields > [data-field="catalogue_link"] { grid-column: 1 / -1; }
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .launch-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); align-items: start; }
}

/* ---------------------------------------------------------------- partners */
.steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.steps__item { padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.steps__number { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-select); color: var(--c-on-dark); font-size: var(--text-sm); font-weight: 600; }
.steps__title { margin-top: var(--space-3); font: 600 var(--text-body)/1.35 var(--font-sans); }
.steps__text { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--c-ink-soft); }
.schematic__frame {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface);
}
.schematic__gallery { display: grid; place-items: center; aspect-ratio: 5 / 6; border-radius: var(--radius-md); background: var(--c-sunken); }
.schematic__summary { display: grid; align-content: start; gap: var(--space-2); }
.schematic__label, .schematic__bar { font-size: var(--text-xs); color: var(--c-ink-soft); }
.schematic__bar { display: block; padding: 6px 10px; border-radius: 6px; background: var(--c-sunken); }
.schematic__bar--short { width: 60%; }
.schematic__bar--title { font: 400 var(--text-body)/1.3 var(--font-serif); color: var(--c-ink); }
.schematic__action { display: block; margin-top: var(--space-2); padding: 10px; border-radius: var(--radius-pill); background: var(--c-action); color: var(--c-action-ink); font-size: var(--text-xs); font-weight: 600; text-align: center; }
.schematic__specs { grid-column: 1 / -1; padding: var(--space-3); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-sm); }
.schematic__caption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--c-ink-soft); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- finder, search */
html:not(.js) .finder { display: none; }
.finder { max-width: 880px; }
.finder__progress { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.finder__bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--c-line); }
.finder__fill { display: block; width: 20%; height: 100%; background: var(--c-action); transition: width var(--duration-ui) var(--ease-out); }
.finder__count { font-size: var(--text-sm); color: var(--c-ink-soft); white-space: nowrap; }
.finder__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.finder__question { padding: 0; font: 400 var(--text-h2)/1.12 var(--font-serif); }
.finder__note { margin-top: var(--space-2); color: var(--c-ink-soft); }
.finder__options { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.finder__option {
  display: grid; gap: var(--space-1); min-height: 72px; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface);
  text-align: left; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.finder__option:hover { border-color: var(--c-ink); }
.finder__option[aria-pressed="true"] { border: 2px solid var(--c-select); background: var(--c-sunken); }
.finder__option-title { font-weight: 600; }
.finder__option-text { font-size: var(--text-sm); color: var(--c-ink-soft); }
.finder__nav { margin-top: var(--space-5); }
.finder__result { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.finder__result-title { font: 400 var(--text-h2)/1.12 var(--font-serif); }
.finder__chosen { margin-top: var(--space-2); color: var(--c-ink-soft); }
.finder__result .table-wrap { margin-top: var(--space-5); }
.finder__subhead { margin-top: var(--space-6); font-weight: 600; }
.finder__launch { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--c-sunken); }
.finder__privacy { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--c-ink-soft); }
.search-page__form { display: grid; gap: var(--space-3); max-width: 720px; }
.search-page__count { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--c-ink-soft); }
.search-page__count:empty { display: none; }
.search-results { display: grid; gap: var(--space-3); max-width: 820px; margin-top: var(--space-4); }
.search-result { position: relative; padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.search-result__kind { font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.search-result__title { margin-top: var(--space-1); font: 400 var(--text-h3)/1.22 var(--font-serif); }
.search-result__title a { text-decoration: none; }
.search-result__title a::after { content: ""; position: absolute; inset: 0; }
.search-result__desc { margin-top: var(--space-2); color: var(--c-ink-soft); }
.search-empty { margin-top: var(--space-5); }

@media (min-width: 768px) {
  .finder__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-page__form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .search-page__form .field__label { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- collection */
html:not(.js) .filters, html:not(.js) .results-count { display: none; }
.js [data-filters-apply] { display: none; }
.filters { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.filters__title { font: 600 var(--text-body)/1.3 var(--font-sans); }
.filters__fields { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.filters__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.filters__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.results-count { margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--c-ink-soft); }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-5); }
.product-card { position: relative; display: grid; align-content: start; gap: var(--space-2); }
.product-card__media { overflow: hidden; aspect-ratio: 5 / 6; border-radius: var(--radius-md); background: var(--c-sunken); }
.product-card__media img { width: 100%; height: 100%; padding: 8%; object-fit: contain; }
.product-card__title { margin-top: var(--space-2); font: 400 var(--text-h3)/1.2 var(--font-serif); }
.product-card__link { text-decoration: none; }
.product-card__link::after { content: ""; position: absolute; inset: 0; }
.product-card__desc { font-size: var(--text-sm); color: var(--c-ink-soft); }
.product-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.product-card__price { font-size: var(--text-body); font-weight: 600; }
.product-card__availability { color: var(--c-ink-soft); }
.empty-results { padding: var(--space-6); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-md); text-align: center; }
.empty-results__text { margin-bottom: var(--space-4); }

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- product page */
/* Handoff 02 and 03. Desktop: media 1.12fr beside a panel of at least 390 px,
   a 4:5 stage capped at min(72vh, 760px) and an 84 px rail. Below 1024 px the
   frames swipe; on a phone the purchase box comes before the summary, so name,
   price, variant and the action sit inside 844 px. */
.pdp { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; padding-top: var(--space-3); }
.pdp__crumbs .crumbs { margin-bottom: var(--space-3); }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "buy"; gap: var(--space-4); }
.pdp__head { grid-area: head; }
.pdp__media { grid-area: media; min-width: 0; }
.pdp__buy { grid-area: buy; display: flex; flex-direction: column; min-width: 0; }
.pdp__buy > * { order: 2; }
.pdp__buy > .pdp__action { order: 0; }
/* Handoff 08 asks for a two- or three-line summary at 1440 px and no measure
   over 72 characters. Handoff 02's 52-character cap cannot also hold for a
   summary of handoff 03's 30 to 48 words, so the summary takes the panel's
   width, about 65 characters a line at 1440 px. */
/* The summary is set larger than body text, so the shared 47ch token wraps a
   187-character summary to four lines. Swept on every template and preview
   summary at 1440 px: 49.5ch keeps every line at 72 or under, and holds three
   lines for any summary of 190 characters or fewer (SUMMARY_MAX). */
.pdp__buy > .pdp__summary { order: 1; max-width: 49.5ch; margin-top: var(--space-5); }
.pdp__action { margin-top: var(--space-2); }
/* On a phone the current page drops out of the trail, so the trail keeps one line. */
.pdp__crumbs .crumbs__item:last-child { display: none; }
.pdp__crumbs .crumbs__item:nth-last-child(2)::after { content: none; }
.pdp__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.pdp__descriptor { margin-top: var(--space-2); max-width: 44ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--c-ink-soft); }
.pdp__title { margin-top: var(--space-2); font: 400 var(--text-product)/1.05 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-sm); }
.rating__stars { letter-spacing: .1em; color: var(--c-ink); }

.gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery__viewport { position: relative; }
.gallery__stage {
  position: relative; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; height: min(40svh, 125vw); border-radius: var(--radius-lg); background: var(--c-sunken);
}
.gallery__stage::-webkit-scrollbar { display: none; }
.gallery__frame { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.gallery__frame img { width: 100%; height: 100%; }
/* A 9% inset keeps an edge-to-edge cutout at 82% of the stage at most
   (handoff 08: the product fills 68 to 82% of the stage height). */
.gallery__frame[data-kind="packshot"] img, .gallery__frame[data-kind="detail"] img { padding: 9%; object-fit: contain; }
.gallery__frame[data-kind="lifestyle"] img { object-fit: cover; object-position: 50% 50%; }
.gallery__count {
  position: absolute; right: var(--space-3); bottom: var(--space-3); padding: 2px var(--space-2);
  border-radius: var(--radius-pill); background: var(--c-surface); font-size: var(--text-xs); font-weight: 600;
}
.gallery__thumbs { display: none; }
.gallery__thumb {
  position: relative; flex: 0 0 76px; width: 76px; aspect-ratio: 4 / 5; padding: 0; overflow: hidden;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-sunken);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-pressed="true"] { border: 2px solid var(--c-select); }
.gallery__check { position: absolute; top: 4px; right: 4px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-select); color: var(--c-on-dark); }
.gallery__thumb[aria-pressed="true"] .gallery__check { display: grid; }

.offer { display: grid; gap: var(--space-1); margin-top: var(--space-4); }
.price { font: 400 clamp(1.5rem, 1.35rem + .5vw, 1.875rem)/1.1 var(--font-serif); }
.offer__tax { font-size: var(--text-xs); color: var(--c-ink-soft); }
.availability { font-size: var(--text-sm); font-weight: 600; color: var(--c-success); }
.availability--unavailable, .availability--waitlist { color: var(--c-ink-soft); }
.availability__dispatch { font-weight: 400; color: var(--c-ink-soft); }
.variants { min-width: 0; margin: var(--space-4) 0 0; padding: 0; border: 0; }
.variants__legend { margin-bottom: var(--space-3); padding: 0; font-size: var(--text-sm); font-weight: 600; }
.variants__options { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.variant {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: var(--space-3); row-gap: 2px;
  min-height: 56px; padding: var(--space-3) var(--space-4); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md);
  background: var(--c-surface); cursor: pointer;
}
.variant:has(.variant__input:checked) { border: 2px solid var(--c-select); background: var(--c-sunken); }
.variant__input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-select); }
.variant__name { font-weight: 600; }
.variant__price { grid-column: 2; font-size: var(--text-sm); color: var(--c-ink-soft); }
.buy { display: grid; gap: var(--space-4); }
.buy .offer { margin-top: 0; }
.buy__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--space-3); }
.buy .button--block { min-height: 52px; font-size: var(--text-body); }
.buy__intro { font-size: var(--text-sm); color: var(--c-ink-soft); }
.qty { display: grid; gap: var(--space-1); }
/* The stepper explains itself on a phone; its label stays for assistive
   technology and shows from 768 px. */
.qty__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; font-size: var(--text-xs); font-weight: 600; color: var(--c-ink-soft); }
.qty__control {
  display: inline-grid; grid-template-columns: 44px 44px 44px; align-items: stretch; height: 52px;
  border: 1px solid var(--c-control-border); border-radius: var(--radius-pill); background: var(--c-surface);
}
.qty__step { border: 0; border-radius: var(--radius-pill); background: none; font-size: 1.25rem; line-height: 1; }
.qty__input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; text-align: center; font-weight: 600; appearance: textfield; -moz-appearance: textfield; }
.qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.payment-methods { margin-top: var(--space-4); }
.payment-methods__label { margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--c-ink-soft); }
.payment-methods__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.payment-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-2); border: 1px solid var(--c-line-strong); border-radius: 6px; background: var(--c-surface); font-size: var(--text-xs); font-weight: 600; color: var(--c-ink-soft); }
.trust-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-5) 0 0; border-top: 1px solid var(--c-line); }
.trust-strip__cell { display: grid; align-content: start; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
.trust-strip__cell:nth-child(even) { padding-inline: var(--space-3) 0; border-inline-start: 1px solid var(--c-line); }
.trust-strip__term { font-size: var(--text-sm); font-weight: 600; }
.trust-strip__text { margin: 0; font-size: var(--text-xs); color: var(--c-ink-soft); }
.seals { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.seal { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--c-ink); text-decoration: none; }
.seal:hover { color: var(--c-accent); }
.seal .seal__mark { flex: none; width: 28px; height: 28px; }
.seal__label { font-weight: 600; }
.seal__date { color: var(--c-ink-soft); }

.pdp-body {
  display: grid; gap: clamp(48px, 6vw, 88px);
  width: min(100% - 2 * var(--gutter), var(--page-max)); margin: clamp(48px, 6vw, 96px) auto 0; padding-bottom: var(--section-y);
}
/* Grid items keep their content's minimum width unless told otherwise, and one
   wide block (a code sample, a long value) would widen every section. */
.pdp-body > * { min-width: 0; }
.pdp-section__title { margin-bottom: var(--space-5); font: 400 var(--text-h2)/1.12 var(--font-serif); }
.pdp-section > p { max-width: var(--prose-max); }
.pdp-section > p + p { margin-top: var(--space-3); }
.pdp-section__more { margin-top: var(--space-4); }
.statements { display: grid; gap: var(--space-5); }
.statement { padding-top: var(--space-4); border-top: 1px solid var(--c-line-strong); }
.statement__title { font: 400 var(--text-h3)/1.2 var(--font-serif); }
.statement__text { margin-top: var(--space-2); max-width: 44ch; color: var(--c-ink-soft); }
.how { display: grid; gap: var(--space-5); align-items: center; }
.how .how__art { max-width: 640px; color: var(--c-ink); }
.how__text { max-width: var(--prose-max); }
.how__text > p + p { margin-top: var(--space-3); }
.two-col { display: grid; gap: var(--space-4) var(--space-7); max-width: 1040px; }
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--c-line); }
.cells__cell { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--c-line); }
.cells__cell:nth-child(even) { padding-inline: var(--space-4) 0; border-inline-start: 1px solid var(--c-line); }
.cells__term { font-weight: 600; }
.cells__text { margin: 0; font-size: var(--text-sm); color: var(--c-ink-soft); }
.care-steps { display: grid; gap: var(--space-5); }
.care-steps__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art number" "art title" "art text"; align-content: start; column-gap: var(--space-4); }
.care-steps .care-steps__art { grid-area: art; width: 96px; height: 72px; color: var(--c-ink); }
.care-steps__number { grid-area: number; font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; color: var(--c-accent); }
.care-steps__title { grid-area: title; font: 600 var(--text-body)/1.35 var(--font-sans); }
.care-steps__text { grid-area: text; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--c-ink-soft); }
.spec-grid { display: grid; margin: 0; border-top: 1px solid var(--c-line); }
.spec-grid__row { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); font-size: var(--text-sm); }
.spec-grid dt { font-weight: 600; }
.spec-grid dd { margin: 0; }
.spec-grid__verified { margin-left: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--c-success); white-space: nowrap; }
.spec-grid__note { margin-top: var(--space-4); max-width: var(--prose-max); font-size: var(--text-xs); color: var(--c-ink-soft); }
.included-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); border-top: 1px solid var(--c-line); }
.included-grid__item { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); font-size: var(--text-sm); }
.included-grid__n { min-width: 2ch; font-weight: 600; color: var(--c-accent); }
.reviews__summary { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.reviews__score { font: 400 var(--text-h1)/1 var(--font-serif); }
.reviews__note { font-size: var(--text-sm); color: var(--c-ink-soft); }
.review-dist { display: grid; gap: var(--space-1); max-width: 360px; margin: 0; }
.review-dist__row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: var(--text-xs); }
.review-dist__value { display: grid; grid-template-columns: minmax(0, 1fr) 2ch; align-items: center; gap: var(--space-2); margin: 0; }
.review-dist__track { display: block; overflow: hidden; height: 6px; border-radius: var(--radius-pill); background: var(--c-sunken); }
.review-dist__bar { display: block; width: 0; height: 100%; background: var(--c-select); }
.review-dist__bar--10 { width: 10%; } .review-dist__bar--20 { width: 20%; } .review-dist__bar--30 { width: 30%; }
.review-dist__bar--40 { width: 40%; } .review-dist__bar--50 { width: 50%; } .review-dist__bar--60 { width: 60%; }
.review-dist__bar--70 { width: 70%; } .review-dist__bar--80 { width: 80%; } .review-dist__bar--90 { width: 90%; }
.review-dist__bar--100 { width: 100%; }
.reviews__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.reviews__sort-label { font-size: var(--text-sm); font-weight: 600; }
.reviews__sort { width: auto; }
.review-list { display: grid; gap: var(--space-4); }
.review { padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.review__stars { letter-spacing: .1em; }
.review__title { margin-top: var(--space-2); font: 600 var(--text-body)/1.35 var(--font-sans); }
.review__body { margin-top: var(--space-2); color: var(--c-ink-soft); }
.review__meta { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--c-ink-soft); }
.review__verified { margin-left: var(--space-2); font-weight: 600; color: var(--c-success); }
.questions { margin-top: var(--space-6); }
.questions__title { margin-bottom: var(--space-3); font: 600 var(--text-body)/1.35 var(--font-sans); }
.question { padding-block: var(--space-4); border-bottom: 1px solid var(--c-line); }
.question__q { font-weight: 600; }
.question__a { margin-top: var(--space-2); color: var(--c-ink-soft); }
.product-grid--related {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--space-4)) / 2.2);
  gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2);
}
.product-grid--related > * { scroll-snap-align: start; }

/* The dock: solid, not glass (handoff 02), entering with opacity and an 8 px
   rise; the reduced-motion block below removes the movement. */
.buy-bar {
  position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-sticky);
  padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--c-line); background: var(--c-surface);
  box-shadow: 0 -12px 32px rgba(33, 25, 30, .08);
  transition: opacity var(--duration-ui) var(--ease-out), translate var(--duration-ui) var(--ease-out), display var(--duration-ui) allow-discrete;
}
@starting-style { .buy-bar { opacity: 0; translate: 0 8px; } }
.buy-bar[hidden] { display: none; opacity: 0; translate: 0 8px; }
.buy-bar__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  width: min(100% - 2 * var(--gutter), var(--page-max)); min-height: 76px; margin-inline: auto; padding-block: var(--space-2);
}
.buy-bar__thumb { display: none; width: 48px; height: 58px; border-radius: var(--radius-sm); background: var(--c-sunken); object-fit: contain; }
.buy-bar__info { min-width: 0; }
.buy-bar__name, .buy-bar__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-bar__name { font-size: var(--text-sm); font-weight: 600; }
.buy-bar__meta { font-size: var(--text-xs); color: var(--c-ink-soft); }
.buy-bar__cta { min-height: 48px; padding-inline: var(--space-5); }

@media (min-width: 768px) {
  .pdp__crumbs .crumbs__item:last-child { display: block; }
  .pdp__crumbs .crumbs__item:nth-last-child(2)::after { content: "/" / ""; }
  .qty__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .gallery__stage { height: min(56svh, 640px); }
  .gallery__count { display: none; }
  .gallery__thumbs { display: flex; order: 2; gap: var(--space-2); overflow-x: auto; padding: 2px; }
  .statements { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cells__cell, .cells__cell:nth-child(even) { padding-inline: var(--space-4); border-inline-start: 1px solid var(--c-line); }
  .cells__cell:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .care-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .care-steps__item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "number" "title" "text"; row-gap: var(--space-2); }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
  .included-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .review-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buy-bar__inner { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .buy-bar__thumb { display: block; }
}
@media (min-width: 1024px) {
  .pdp__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); grid-template-rows: auto 1fr;
    grid-template-areas: "media head" "media buy"; column-gap: clamp(32px, 3vw, 48px); row-gap: 0; align-items: start;
  }
  .pdp__buy > *, .pdp__buy > .pdp__action, .pdp__buy > .pdp__summary { order: 0; }
  .pdp__buy > .pdp__summary { margin-top: var(--space-4); }
  .pdp__buy { position: sticky; top: calc(var(--header-h) + 16px); }
  /* The stage is height-led, so the rail and stage centre in the media column
     rather than leaving the gap beside the panel. */
  .gallery { display: grid; grid-template-columns: 84px minmax(0, auto); justify-content: center; align-items: start; gap: var(--space-3); }
  .gallery--single { grid-template-columns: minmax(0, auto); }
  .pdp__action { margin-top: var(--space-5); }
  .gallery__thumbs { order: 0; flex-direction: column; overflow: visible; padding: 0; }
  .gallery__thumb { flex: 0 0 auto; width: 84px; }
  .gallery__stage { display: block; overflow: clip; height: min(72vh, 760px); aspect-ratio: 4 / 5; max-width: 100%; scroll-snap-type: none; }
  .gallery__frame { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--duration-ui) var(--ease-out), visibility 0s linear var(--duration-ui); }
  .gallery__frame.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .how { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); }
  .product-grid--related { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .buy-bar__inner { min-height: 68px; }
  .buy-bar__name { font-size: var(--text-body); }
}

/* ---------------------------------------------------------------- region */
/* The region control and sheet (handoff 02 and 07). Without script there is no
   sheet to open, so the control is not shown and every offer stays visible. */
/* On a phone the control is a 44 px medallion button like the icon buttons
   beside it (handoff 08: 44 x 44 touch targets), so the one-row header fits
   down to 320 px; from 768 px it also names the region. The button's label
   carries the name for assistive technology. */
.region-control {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); background: transparent; color: inherit;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
}
html:not(.js) .region-control { display: none; }
.region-control__mark { display: none; flex: none; width: 26px; height: 26px; object-fit: cover; }
/* The owner's flags sit in a 3:2 box with a hairline, so a white stripe never melts into the ground. */
.region-control__mark--us, .region-control__mark--eu {
  width: 27px; height: 18px; border-radius: 3px; outline: 1px solid var(--c-line-strong); outline-offset: -1px;
}
html:not([data-region]) .region-control__mark--any, html[data-region="US"] .region-control__mark--us,
html[data-region="EU"] .region-control__mark--eu { display: block; }
.region-control__code { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.region-sheet { width: min(100% - 2 * var(--gutter), 480px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-panel); }
.region-sheet::backdrop { background: var(--c-scrim); }
.region-sheet__form { display: grid; gap: var(--space-4); padding: var(--space-5); }
.region-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.region-sheet__title { font: 400 var(--text-h3)/1.2 var(--font-serif); }
.region-sheet__text, .region-sheet__note { font-size: var(--text-sm); color: var(--c-ink-soft); }
.region-sheet__options { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.region-option {
  display: grid; grid-template-columns: 24px 48px minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 72px;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); cursor: pointer;
}
.region-option:has(.region-option__input:checked) { border: 2px solid var(--c-select); background: var(--c-sunken); }
.region-option__input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-select); }
.region-option__mark {
  flex: none; width: 48px; height: 32px; border-radius: 5px; object-fit: cover;
  outline: 1px solid var(--c-line-strong); outline-offset: -1px;
}
.region-option__text { font-weight: 600; }
.region-note { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-sunken); }
.pdp__buy > .region-note { order: -1; }
/* A class that sets display outranks the browser's own rule for the hidden
   attribute, so hidden has to be restated for anything the script toggles. */
.region-note[hidden], .button[hidden] { display: none; }
.region-note__text { font-weight: 600; }
.region-note__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.has-region-mismatch .pdp__action, .has-region-mismatch .buy-bar { display: none; }
.product-card__region { padding: 0 var(--space-2); border: 1px solid var(--c-line-strong); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; color: var(--c-ink-soft); }
html[data-region="US"] .product-card[data-region="EU"], html[data-region="EU"] .product-card[data-region="US"] { display: none; }
@media (min-width: 768px) {
  .region-control { width: auto; padding: 0 var(--space-3) 0 var(--space-2); }
  .region-control__code { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 1024px) {
  .region-control { height: 44px; }
}

/* ---------------------------------------------------------------- supplier previews */
/* Private pages behind the Worker's key check (build/previews.py). The ribbon
   stays in view on every screen; each placeholder stage carries its label. */
.preview-ribbon {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky); margin: 0; padding: var(--space-2) var(--gutter);
  background: var(--c-dark); color: var(--c-on-dark); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .14em; text-align: center; text-transform: uppercase;
}
.preview-stage {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 5;
  max-height: min(72vh, 760px); border-radius: var(--radius-lg); background: var(--c-deep); color: var(--c-on-dark-soft);
}
.preview-stage .preview-stage__art { width: 70%; height: auto; }
.preview-stage__label {
  position: absolute; bottom: var(--space-4); left: 50%; translate: -50% 0; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-ink); font-size: var(--text-xs);
  font-weight: 600; white-space: nowrap;
}
.preview-stage__mark {
  position: absolute; top: var(--space-4); left: var(--space-4); color: var(--c-on-dark); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.preview-grid { display: grid; gap: var(--space-6) var(--space-5); }
.preview-card { position: relative; display: grid; align-content: start; gap: var(--space-2); }
.preview-card .preview-stage { aspect-ratio: 4 / 5; }
.preview-card__title { margin-top: var(--space-2); font: 400 var(--text-h3)/1.2 var(--font-serif); }
.preview-card__link { text-decoration: none; }
.preview-card__link::after { content: ""; position: absolute; inset: 0; }
.preview-card__desc { font-size: var(--text-sm); color: var(--c-ink-soft); }
.preview-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--c-ink-soft); }
.preview-card__meta .glyph { width: 24px; height: 24px; }
.preview-offer { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-md); background: var(--c-surface); }
.preview-offer .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdp__media > .preview-stage { max-width: calc(min(72vh, 760px) * .8); margin-inline: auto; }
.preview-offer__title { font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.preview-offer__text { font-size: var(--text-sm); color: var(--c-ink-soft); }
.preview-senses { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.preview-sense { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); color: var(--c-ink); }
.preview-sense__name { font-weight: 600; }
.preview-flag { display: inline-block; margin-left: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--c-error); }
.preview-code { overflow-x: auto; max-width: 100%; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--c-dark); color: var(--c-on-dark); font-size: var(--text-xs); line-height: 1.6; }
.preview-snippet { display: grid; gap: var(--space-1); max-width: 600px; padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); }
.preview-snippet__title { font-size: var(--text-lead); color: var(--c-accent); }
.preview-snippet__desc { font-size: var(--text-sm); color: var(--c-ink-soft); }
.checklist { display: grid; border-top: 1px solid var(--c-line); }
.checklist__item { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--c-line); font-size: var(--text-sm); }
.checklist__n { min-width: 2ch; font-weight: 600; color: var(--c-accent); }
.gap-groups { display: grid; gap: var(--space-6); }
.gap-group { display: grid; gap: var(--space-3); }
.gap-group__title { margin-top: var(--space-3); font: 600 var(--text-body)/1.35 var(--font-sans); }
@media (min-width: 768px) {
  .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
}
@media (min-width: 1024px) {
  .preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- temporary asset layer */
/* Inline SVG from public/assets/temp, drawn by bin/evtemp.py. Linework is
   currentColor; accents recolour here. Glyph accents stay one tone until
   their mechanism is active (handoff 04, section 2). */
.art { display: block; width: 100%; height: auto; }
.art .t-accent { stroke: var(--heat-coral); }
.art .t-accent-fill { fill: var(--heat-coral); }
.art .t-halo-line { stroke: var(--rose-mist); }
.glyph { display: block; flex: none; width: 32px; height: 32px; }
.glyph.is-active .t-accent, .is-active > .glyph .t-accent { stroke: var(--heat-coral); }
.glyph.is-active .t-accent-fill, .is-active > .glyph .t-accent-fill { fill: var(--heat-coral); }
.pulse-trace { display: block; width: 100%; max-width: 240px; height: auto; }
.pulse-trace__line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-tracing .pulse-trace__line { animation: ev-trace 1.2s var(--ease-out) both; }
@keyframes ev-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-4); }
.asset-grid--editorial-texture, .asset-grid--comparison-anatomy, .asset-grid--sensation-field { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.asset-tile { display: grid; align-content: start; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-md); background: var(--c-surface); color: var(--c-ink); }
.asset-tile--dark { border-color: var(--c-dark); background: var(--c-dark); color: var(--c-on-dark); }
.asset-tile__art { max-height: 200px; }
.asset-tile__caption { display: grid; gap: var(--space-1); font-size: var(--text-xs); }
.asset-tile__name { font-weight: 600; }
.asset-tile__label { color: var(--c-ink-soft); }
.asset-tile--dark .asset-tile__label { color: var(--c-on-dark-soft); }

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