/** Shopify CDN: Minification failed

Line 10576:27 Unexpected "*"

**/
/* ─────────────────────────────────────────────────────────────────────────
   PDP-PARITY-2J-B · Define --paper-2 as a Horizon-side token so the Archive
   PDP section rhythm has visible contrast. Value #EDE9DD is the canonical
   "alternate band" hex from design-specs/legacy-html/product-half-dome.html
   line 267 (legacy `--paper-warm`). NOT arbitrary — sourced from the HTML
   reference. The render spec v1.1 §1.3 names this token concept --paper-2.
   :root in he-design-system.css cannot be edited under this ticket's
   allowed-files scope, so the token is declared here. Once added to the
   design system globally, this declaration becomes redundant and can be
   removed by a token-consolidation ticket.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --paper-2: #EDE9DD;
}

/* ─────────────────────────────────────────────────────────────────────────
   APPLICATION STYLESHEET · Horizon Editions
   SI-16B-1 · Shell + Homepage visual CSS.

   Coverage:
     · Shell: nav, mobile-menu, topbar, premiere-bar, footer,
              international-modal, international-banner
     · Homepage: home-hero, home-trust, home-form, home-premiere,
                 home-worlds, home-recent, home-data, home-learn,
                 home-gift, home-community, home-signup
     · Shared product-card rules used by home-recent and home-premiere rails

   Tokens come from assets/he-design-system.css (--font-sans, --font-mono,
   --ink, --white, --off-white, --border, --muted, --earth*, --deep*,
   --space*, --space-N spacing scale, --max-width, --gutter, --shadow-*).

   Inline shell <style> in layout/theme.liquid remains the authority for
   .container, .mono, .visually-hidden, .skip-to-content-link.

   Naming: only Phase 2 BEM namespaces are used here. Legacy he-* component
   selectors stay in their original he-*.css files and are not duplicated.
   ───────────────────────────────────────────────────────────────────────── */


/* ============================================================
   1 · BASE TYPOGRAPHY / GLOBAL ELEMENTS
   ============================================================ */

/* SI-16D-3 · Prevent the off-canvas cart drawer (position: fixed; right: 0;
   transform: translateX(100%)) from inflating documentElement.scrollWidth.
   Chrome reports docW > viewportW at 1024 because the drawer's bounding box
   extends past the right edge of the viewport. overflow-x: clip clips at the
   viewport without disabling position: sticky on descendants (overflow:hidden
   would). Applied to both html and body so the clip extent reaches the doc
   root and scrollWidth is no longer inflated by the off-canvas drawer.
   The drawer is still revealable via JS toggling its transform. */
html,
body {
  overflow-x: clip;
}

img,
svg,
video,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* SI-16D-3 · Page-hero richtext titles ship from the schema with block-level
   wrappers (e.g. <h1>Answers, <em>by category</em>.</h1>). The Liquid section
   strips those wrappers so the outer <h1 class="…__title display"> is the
   only h1 in the DOM. This rule neutralises any remaining nested heading
   that survives (defensive — keeps the outer .display sizing intact even if
   a merchant pastes richtext with attributes we did not strip). */
.page-faq-hero__title.display > h1,
.page-faq-hero__title.display > h2,
.page-about-hero__title.display > h1,
.page-about-hero__title.display > h2,
.page-data-hero__title.display > h1,
.page-data-hero__title.display > h2 {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  display: contents;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: clamp(var(--text-32), 6vw, var(--text-64)); }
h2 { font-size: clamp(var(--text-24), 4vw, var(--text-44)); }
h3 { font-size: clamp(var(--text-18), 2.5vw, var(--text-24)); }
h4 { font-size: var(--text-18); }

p {
  margin: 0;
  line-height: 1.55;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
}

[hidden] {
  display: none !important;
}

/* Display utility — used by home-hero__title to render as oversized display type.
   SI-16D-1 · Clamp ceiling raised from 72px to 148px to match design-spec
   --fs-display: clamp(56px, 8vw, 148px). vw rate raised 7→8. Floor kept at
   --text-40 (40px) to preserve mobile readability. */
.display {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(var(--text-40), 8vw, 148px);
}

/* `.mono` is defined in the inline shell <style>. `.rule` extends it by
   spacing the leading em-dash glyph that the Liquid templates emit. */
.rule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}


/* ============================================================
   2 · SHARED CTA / BUTTON PRIMITIVES
   ============================================================ */

/* Primary action — filled in --earth, white text, square corners. */
.home-hero__cta-primary,
.home-premiere__cta,
.home-form__card-cta,
.home-community__cta--primary,
.home-signup__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.home-hero__cta-primary:hover,
.home-premiere__cta:hover,
.home-form__card-cta:hover,
.home-community__cta--primary:hover,
.home-signup__submit:hover {
  background: var(--earth-hover);
  border-color: var(--earth-hover);
}

/* Secondary action — outlined, ink text, square. */
.home-hero__cta-secondary,
.home-community__cta--secondary,
.home-recent__cta,
.home-data__cta,
.home-learn__cta,
.home-gift__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border: var(--border-width-thin) solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}

.home-hero__cta-secondary:hover,
.home-community__cta--secondary:hover,
.home-recent__cta:hover,
.home-data__cta:hover,
.home-learn__cta:hover,
.home-gift__cta:hover {
  background: var(--ink);
  color: var(--white);
}


/* ============================================================
   3 · SHELL · ANNOUNCEMENT BAR (topbar + premiere-bar)
   ============================================================ */

.premiere-bar {
  background: var(--ink);
  color: var(--white);
  border-bottom: var(--border-width-thin) solid rgba(255, 255, 255, 0.08);
}

.premiere-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

.premiere-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-pill);
  background: var(--earth-accent);
  display: inline-block;
}

.premiere-bar__arrow {
  margin-left: var(--space-2);
}

/* PARITY-GLOBAL-2 · topbar — DARK band, hairline dividers between items,
   center-aligned. Matches HTML reference treatment (was light cream). */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-wrap: wrap;
  line-height: 1.4;
}

.topbar__item {
  display: inline-block;
  white-space: nowrap;
}

/* HTML-ref pattern: hairline divider before every item after the first. */
.topbar__item + .topbar__item {
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 767px) {
  .topbar__item--desktop-only {
    display: none;
  }
  .topbar {
    padding: 8px 12px;
    font-size: var(--text-10);
    letter-spacing: 0.14em;
  }
  .topbar__item + .topbar__item {
    margin-left: 12px;
    padding-left: 12px;
  }
}


/* ============================================================
   4 · SHELL · HEADER NAVIGATION (.nav)
   ============================================================ */

/* PARITY-GLOBAL-2 · world accent token (defaults to Earth sage).
   PARITY-GLOBAL-2B · adds full bg/fg pairs per context for readability
   on dark world pages (deep / space / premiere). Set per-world via
   .nav--world-{slug}. Used by .nav__editions-dot, .nav__cart .dot, and the
   .nav__links a.is-active underline. */
/* PARITY-GLOBAL-2C · Sticky lives on the Shopify section wrapper
   (.section-header), NOT on .nav itself. Reason: when `position: sticky`
   lives on .nav, its containing block is the parent <section> which has
   the same height as .nav, so there is nothing to stick within and the
   header scrolls away with the page. Promoting sticky to .section-header
   (a direct child of <body>) gives the full page-scroll context. */
.section-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  background: var(--nav-bg, #F4F0E5);
  color: var(--nav-fg, var(--ink));
  /* NAV-DIVIDER-1 · Switched fallback + token from --border (#F0EEE9,
     ~5 RGB pts contrast against paper bg — invisible) to --line
     (#D8D3C5, matches legacy reference at design-specs/legacy-html/
     product-half-dome.html line 354: `border-bottom: 1px solid
     var(--line)`). Dark world contexts (.nav.nav--world-deep / -space
     / -premiere) below still set explicit --nav-border with rgba
     values for their own contrast, so they're unaffected. */
  border-bottom: var(--border-width-thin) solid var(--nav-border, var(--line));
  font-family: var(--font-sans);
  --world-accent: var(--earth-accent);
  --nav-bg: #F4F0E5;
  --nav-fg: var(--ink);
  --nav-border: var(--line);
  --nav-line: var(--ink);
}

/* PARITY-GLOBAL-2C · Light-bg / dark-fg contexts.
   Chained selector for specificity 0,2,0 — beats he-design-system.css's
   [data-world="earth"] rule (0,1,0) which sets background-color directly to
   #FFFFFF. Background applied as direct property + token (--nav-bg) kept
   in sync for any inherited references. */
.nav.nav--world-earth,
.nav.nav--world-archive,
.nav.nav--world-complete-editions,
.nav.nav--world-master-sets {
  background: #F4F0E5;
  color: var(--ink);
  --nav-bg: #F4F0E5;
  --nav-fg: var(--ink);
  --world-accent: var(--earth-accent);
}

/* PARITY-GLOBAL-2B · Dark-bg / light-fg contexts.
   Chained selector (.nav.nav--world-*) raises specificity to 0,2,0 so it
   beats he-design-system.css's [data-world="deep"|"space"] page-theming
   rules (specificity 0,1,0) which set --world-bg / background-color
   intended for body, not header. Background applied directly so it wins
   the property-level cascade outright. */
.nav.nav--world-deep {
  background: #0E2340;
  color: #ffffff;
  --nav-bg: #0E2340;
  --nav-fg: #ffffff;
  --nav-border: rgba(255, 255, 255, 0.3);
  --nav-line: #ffffff;
  --world-accent: var(--deep-accent, #48B4C8);
}

.nav.nav--world-space {
  background: #0A0A0A;
  color: #ffffff;
  --nav-bg: #0A0A0A;
  --nav-fg: #ffffff;
  --nav-border: rgba(255, 255, 255, 0.3);
  --nav-line: #ffffff;
  --world-accent: var(--space-moon, #E8D9C4);
}

.nav.nav--world-premiere {
  background: #1A1608;
  color: #B8956A;
  --nav-bg: #1A1608;
  --nav-fg: #B8956A;
  --nav-border: rgba(184, 149, 106, 0.4);
  --nav-line: #B8956A;
  --world-accent: #B8956A;
}

/* PARITY-GLOBAL-2B · Child elements need direct color overrides too, since
   he-design-system.css's body-level rules (e.g. body[data-world="deep"]
   .he-header-wrapper { ... }) and the document's general `color: var(--ink)`
   cascade beat token-based inheritance for specific selectors like
   .nav__brand / .nav__links > a / .nav__cart. */
.nav.nav--world-deep .nav__brand,
.nav.nav--world-deep .nav__links > a,
.nav.nav--world-deep .nav__cart,
.nav.nav--world-space .nav__brand,
.nav.nav--world-space .nav__links > a,
.nav.nav--world-space .nav__cart {
  color: #ffffff;
}

.nav.nav--world-deep .nav__hamburger-line,
.nav.nav--world-space .nav__hamburger-line {
  background: #ffffff;
}

.nav.nav--world-deep .nav__cart,
.nav.nav--world-space .nav__cart {
  border-color: rgba(255, 255, 255, 0.3);
}

.nav.nav--world-premiere .nav__brand,
.nav.nav--world-premiere .nav__links > a,
.nav.nav--world-premiere .nav__cart {
  color: #B8956A;
}

.nav.nav--world-premiere .nav__hamburger-line {
  background: #B8956A;
}

.nav.nav--world-premiere .nav__cart {
  border-color: rgba(184, 149, 106, 0.4);
}

/* PARITY-GLOBAL-2 · 3-column grid (brand left, nav center, cart right).
   Was flex with space-between (which pushed cart against nav and felt
   crowded). Matches HTML reference layout. */
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter-sm);
  min-height: 64px;
}

/* PARITY-GLOBAL-2B · brand renders ALL CAPS via CSS text-transform;
   underlying setting value stays "Horizon Editions" (no DB content edit).
   PARITY-GLOBAL-2C · letter-spacing tuned to .18em (premium-magazine
   tracking, matches HTML reference's uppercase-eyebrow rhythm). */
.nav__brand {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-14);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nav-fg);
  white-space: nowrap;
  justify-self: start;
}

/* PARITY-GLOBAL-2B · nav labels in Inter (was mono); kept uppercase
   tracking close to HTML reference. */
.nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: nowrap;
  font-family: var(--font-sans);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav__links > a {
  position: relative;
  color: var(--nav-fg);
  opacity: 0.82;
  padding: 6px 2px;
  transition: opacity 200ms ease;
  white-space: nowrap;
}

.nav__links > a:hover,
.nav__links > a.is-active {
  opacity: 1;
}

/* PARITY-GLOBAL-2 · current-page underline marker (HTML-ref pattern).
   Accent color is world-derived; falls back to ink on routes without a
   world context. */
.nav__links > a.is-active::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 1px;
  background: var(--world-accent);
}

.nav__editions-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: var(--border-radius-pill);
  background: var(--world-accent);
  vertical-align: middle;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-self: end;
}

/* PARITY-GLOBAL-2 · pill-shaped cart, HTML-ref dimensions + tracking.
   PARITY-GLOBAL-2B · uses --nav-fg + --nav-border so dark contexts get
   white text on a translucent-white border. */
.nav__cart {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nav-fg);
  padding: 8px 14px;
  border: var(--border-width-thin) solid var(--nav-border);
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.nav__cart:hover {
  background: var(--nav-fg);
  color: var(--nav-bg);
  border-color: var(--nav-fg);
}

.nav__cart .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--border-radius-pill);
  background: var(--world-accent);
  display: inline-block;
}

.nav__hamburger {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
}

/* PARITY-GLOBAL-2B · hamburger inherits --nav-line so it stays visible
   on dark contexts (deep / space / premiere). */
.nav__hamburger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--nav-line);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* Mobile breakpoint: hamburger appears, primary nav collapses to drawer.
   PARITY-GLOBAL-2 · at <=991px grid collapses to 2 cols (left | right);
   the brand still left-aligns next to the hamburger. */
@media (max-width: 991px) {
  .nav__hamburger {
    display: flex;
  }
  .nav__links {
    display: none;
  }
  .nav__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
  }
  .nav__brand {
    justify-self: start;
  }
  .nav__right {
    justify-self: end;
  }
}

@media (max-width: 600px) {
  .nav__brand {
    font-size: var(--text-15);
  }
  .nav__cart {
    padding: 6px 12px;
    font-size: var(--text-11);
    letter-spacing: 0.14em;
  }
}


/* ============================================================
   5 · SHELL · MOBILE MENU DRAWER
   ============================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: transform 250ms ease, opacity 250ms ease;
}

.mobile-menu[aria-hidden="true"] {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
}

.mobile-menu[aria-hidden="false"] {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* FIX-NAV-01 (2026-06-23): style the mobile-menu top bar. Markup exists
   in sections/header.liquid (.mobile-menu__topbar with .mobile-menu__brand
   + .mobile-menu__close[data-mobile-menu-close]); previously rendered
   unstyled — brand fell back to inherited sans-serif Title Case and the
   close button was the browser default. These rules bring the brand in
   line with the desktop .nav__brand (mono · uppercase · letter-spacing
   0.16em) and lift the close button to a 48×48 WCAG 2.5.5 AA tap target. */
.mobile-menu__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter-sm);
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
}

.mobile-menu__brand {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.mobile-menu__close {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-right: -12px;
  flex-shrink: 0;
}

.mobile-menu__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-16) var(--gutter-sm) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-14);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-y: auto;
  height: 100%;
}

.mobile-menu__inner > a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-thin) solid var(--border);
  color: var(--ink);
}

.mobile-menu__foot {
  margin-top: auto;
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-12);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.mobile-menu__foot > a {
  color: var(--muted);
}


/* ============================================================
   6 · SHELL · FOOTER
   ============================================================ */

.footer {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-20);
}

.footer .container {
  display: flex;
  flex-direction: column;
  /* PARITY-GLOBAL-1C · tightened gap between top + bottom rows
     (was var(--space-10) = 40px). Combined with reduced .footer__bottom
     padding-top below, the visible divider→bottom-row gap is ~24px,
     down from ~60px in PARITY-GLOBAL-1. */
  gap: var(--space-3);
}

/* PARITY-GLOBAL-1 · top row aligned with HTML reference:
   serif-feel brand on left, mono column heads + light body on the right;
   hairline divider between top + bottom rows. */
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--space-10);
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 32ch;
}

.footer__brand .mark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-20);
  letter-spacing: -0.01em;
}

.footer__brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-14);
  line-height: 1.7;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* PARITY-GLOBAL-1 · column heading: h3 element for a11y heading hierarchy
   (was h5 — see A11Y-1 §4.2 H2→H5 jump). Visual treatment kept identical
   to the HTML reference: mono uppercase, .18em tracking, low-opacity. */
.footer__col-heading {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  margin: 0 0 var(--space-3) 0;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col a {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-14);
  font-weight: 400;
  transition: color 200ms ease;
}

.footer__col a:hover {
  color: #fff;
}

/* PARITY-GLOBAL-1 · bottom row: mono uppercase, tighter scale.
   Divider lives on .footer__top (above), not duplicated here.
   PARITY-GLOBAL-1C · padding-top reduced from var(--space-5) → var(--space-3)
   to bring the row closer to the divider while preserving premium spacing. */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.footer__bottom a {
  color: rgba(255, 255, 255, 0.75);
}

.footer__bottom a:hover {
  color: #fff;
}

.footer__conservation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* SI-16D-2 · Footer collapses to 2-col earlier (≤1024px, matching the spec
   tablet breakpoint of 1024px — iPad landscape inclusive). At 992–1024px
   the prior 991 cutoff left the footer rendering as a 5-col grid with
   132px link columns, which read as visibly compressed. No other grid in
   the 992–1024 zone has the same compression so this change is scoped to
   footer only. */
@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer {
    padding: var(--space-12) 0 var(--space-6);
  }
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}


/* ============================================================
   7 · SHELL · INTERNATIONAL BANNER
   ============================================================ */

.international-banner {
  background: var(--deep);
  color: var(--white);
}

.international-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter-sm);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-14);
  line-height: 1.5;
}

.international-banner__icon {
  font-family: var(--font-mono);
  color: var(--deep-accent);
  font-size: var(--text-14);
}

.international-banner__text {
  flex: 1;
  min-width: 0;
}

.international-banner__text strong {
  display: block;
  font-weight: 500;
  color: var(--white);
}

.international-banner__cta {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-accent);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-thin) solid var(--deep-accent);
  transition: background 200ms ease, color 200ms ease;
  flex-shrink: 0;
}

.international-banner__cta:hover {
  background: var(--deep-accent);
  color: var(--deep);
}

.international-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.international-banner__close:hover {
  color: var(--white);
}

@media (max-width: 600px) {
  .international-banner__inner {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .international-banner__text {
    flex: 1 0 100%;
    order: 1;
  }
  .international-banner__icon {
    order: 0;
  }
}


/* ============================================================
   8 · SHELL · INTERNATIONAL WAITLIST MODAL
   ============================================================ */

.international-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  transition: opacity 200ms ease;
}

.international-modal[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.international-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.international-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.55);
}

.international-modal__panel {
  position: relative;
  background: var(--white);
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}

.international-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 200ms ease;
}

.international-modal__close:hover {
  color: var(--ink);
}

.international-modal__body {
  padding: var(--space-12) var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.international-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.international-modal__title {
  font-size: clamp(var(--text-24), 3.5vw, var(--text-32));
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.international-modal__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
}

.international-modal__lede {
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.6;
}

.international-modal__lede strong {
  color: var(--ink);
  font-weight: 500;
}

.international-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.international-modal__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.international-modal__input-row {
  display: flex;
  gap: var(--space-2);
}

.international-modal__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--border-mid);
  background: var(--white);
  font-size: var(--text-15);
  color: var(--ink);
  transition: border-color 200ms ease;
}

.international-modal__input:focus {
  outline: none;
  border-color: var(--earth);
}

.international-modal__input--disabled,
.international-modal__input[disabled] {
  background: var(--disabled);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.international-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
  transition: background 200ms ease;
  flex-shrink: 0;
}

.international-modal__submit:hover {
  background: var(--earth-hover);
}

.international-modal__disclaimer {
  font-size: var(--text-11);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: none;
}

.international-modal__placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--off-white);
  border: var(--border-width-thin) solid var(--border);
}

.international-modal__disabled-message {
  font-size: var(--text-13);
  color: var(--muted);
  line-height: 1.55;
  margin-top: var(--space-2);
}

.international-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) 0 var(--space-2);
  text-align: center;
}

.international-modal__success-title {
  font-size: var(--text-20);
  font-weight: 500;
  color: var(--ink);
}

.international-modal__success-text {
  color: var(--muted);
  font-size: var(--text-14);
  max-width: 360px;
}

.international-modal__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-width-thin) solid var(--border);
}

.international-modal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.international-modal__list li {
  font-size: var(--text-13);
  color: var(--muted);
  padding-left: var(--space-3);
  position: relative;
}

.international-modal__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--earth-accent);
}

@media (max-width: 600px) {
  .international-modal__body {
    padding: var(--space-10) var(--space-5) var(--space-6);
  }
  .international-modal__input-row {
    flex-direction: column;
  }
  .international-modal__submit {
    width: 100%;
  }
}


/* ============================================================
   9 · HOMEPAGE · SHARED SECTION RHYTHM
   ============================================================ */

.home-hero,
.home-trust,
.home-form,
.home-premiere,
.home-worlds,
.home-recent,
.home-data,
.home-learn,
.home-gift,
.home-community,
.home-signup {
  padding: var(--space-16) 0;
}

@media (max-width: 767px) {
  .home-hero,
  .home-trust,
  .home-form,
  .home-premiere,
  .home-worlds,
  .home-recent,
  .home-data,
  .home-learn,
  .home-gift,
  .home-community,
  .home-signup {
    padding: var(--space-10) 0;
  }
}

/* Shared `__head` patterns: eyebrow + h2 + lede stack. */
.home-form__head,
.home-premiere__head,
.home-worlds__head,
.home-recent__head,
.home-data__head,
.home-learn__head,
.home-gift__head,
.home-community__head,
.home-signup__head,
.home-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
  margin-bottom: var(--space-10);
}


/* ============================================================
   10 · HOMEPAGE · HERO (home-hero)
   ============================================================ */

.home-hero {
  padding: var(--space-20) 0 var(--space-16);
  background: var(--off-white);
}

.home-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.home-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 880px;
  margin-bottom: 0;
}

.home-hero__title {
  margin: 0;
}

.home-hero__sub {
  color: var(--muted);
  font-size: clamp(var(--text-16), 1.4vw, var(--text-20));
  line-height: 1.5;
  max-width: 640px;
}

.home-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--border-width-thin) solid var(--border);
  margin: 0;
}

.home-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-hero__stat-v {
  font-family: var(--font-sans);
  font-size: var(--text-28);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.home-hero__stat-k {
  color: var(--muted);
  font-size: var(--text-11);
  margin: 0;
}

@media (max-width: 600px) {
  .home-hero {
    padding: var(--space-12) 0 var(--space-10);
  }
  .home-hero__ctas .home-hero__cta-primary,
  .home-hero__ctas .home-hero__cta-secondary {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   11 · HOMEPAGE · TRUST STRIP (home-trust)
   ============================================================ */

.home-trust {
  padding: var(--space-8) 0;
  border-top: var(--border-width-thin) solid var(--border);
  border-bottom: var(--border-width-thin) solid var(--border);
  background: var(--white);
}

.home-trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.home-trust__glyph {
  color: var(--earth-accent);
  font-size: var(--text-13);
}

@media (max-width: 767px) {
  .home-trust__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}


/* ============================================================
   12 · HOMEPAGE · SHOP BY FORM (home-form) — format cards
   ============================================================ */

.home-form__title {
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
}

.home-form__lede {
  color: var(--muted);
  font-size: var(--text-16);
  max-width: 560px;
}

.home-form__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.home-form__card,
.home-form__card--disabled {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  height: 100%;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.home-form__card:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.home-form__card--disabled {
  background: var(--off-white);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}

.home-form__card .mono {
  color: var(--muted);
}

.home-form__card-title {
  font-size: var(--text-24);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.home-form__card--disabled .home-form__card-title {
  color: var(--muted);
}

.home-form__card p {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.home-form__card-foot {
  margin-top: auto;
  padding-top: var(--space-4);
}

.home-form__card-cta {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.home-form__card:hover .home-form__card-cta {
  color: var(--earth-hover);
}

@media (max-width: 991px) {
  .home-form__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .home-form__grid {
    grid-template-columns: 1fr;
  }
  .home-form__card,
  .home-form__card--disabled {
    padding: var(--space-6);
  }
}


/* ============================================================
   13 · HOMEPAGE · PREMIERE (home-premiere)
   ============================================================ */

.home-premiere {
  background: var(--white);
}

.home-premiere__eyebrow {
  color: var(--muted);
}

.home-premiere__title {
  font-size: clamp(var(--text-28), 3.5vw, var(--text-44));
}

.home-premiere__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
}

.home-premiere__lede {
  color: var(--muted);
  max-width: 560px;
}

.home-premiere__featured {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: var(--space-10);
  align-items: start;
}

.home-premiere__card-wrap {
  width: 100%;
}

.home-premiere__state {
  padding: var(--space-5);
  background: var(--off-white);
  border: var(--border-width-thin) solid var(--border);
}

.home-premiere__fallback {
  padding: var(--space-8);
  background: var(--off-white);
  border: var(--border-width-thin) solid var(--border);
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.55;
}

.home-premiere__cta {
  margin-top: var(--space-8);
}

@media (max-width: 991px) {
  .home-premiere__featured {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}


/* ============================================================
   14 · HOMEPAGE · THREE WORLDS (home-worlds)
   ============================================================ */

.home-worlds {
  background: var(--off-white);
}

.home-worlds__title {
  font-size: clamp(var(--text-28), 3.5vw, var(--text-44));
}

.home-worlds__lede {
  color: var(--muted);
  max-width: 600px;
}

.home-worlds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.home-worlds__tile {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-worlds__tile--earth { border-top: var(--border-width-accent) solid var(--earth); }
.home-worlds__tile--deep  { border-top: var(--border-width-accent) solid var(--deep); }
.home-worlds__tile--space { border-top: var(--border-width-accent) solid var(--space-teal); }

.home-worlds__tile-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.home-worlds__tile:hover .home-worlds__tile-link {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.home-worlds__tile-link--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.home-worlds__tile-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--off-white);
}

.home-worlds__tile-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.home-worlds__tile-code {
  color: var(--muted);
  font-size: var(--text-11);
}

.home-worlds__tile-title {
  font-size: var(--text-20);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.home-worlds__tile-descriptor {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

@media (max-width: 991px) {
  .home-worlds__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   15 · HOMEPAGE · RECENT (home-recent) — product rail
   ============================================================ */

.home-recent {
  background: var(--white);
}

.home-recent__title {
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
}

.home-recent__lede {
  color: var(--muted);
  max-width: 560px;
}

.home-recent__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.home-recent__cell {
  display: flex;
}

.home-recent__cta {
  margin-top: var(--space-8);
}

@media (max-width: 991px) {
  .home-recent__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .home-recent__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}


/* ============================================================
   16 · SHARED · PRODUCT CARD (used by home-recent + home-premiere)
   ============================================================ */

/* ============================================================
   SI-18-C · CARD ACCENT INTENT LAYER
   Card-level variables mirror the PDP intent layer. They default to the
   PDP world/subworld accents declared at :root by SI-18-A, so a card with
   no world/subworld data inherits the same gold fallback as a no-data PDP.
   Cards with data-world (set by snippet) automatically pick up the SI-18-A
   [data-world] and [data-world][data-subworld] swap rules.

   The `.product-card { --pdp-active-accent: var(--card-active-accent); }`
   shadowing rule below is the key wire: it makes SI-18-B-migrated consumers
   (.trophy-chip, .archive-id-badge__trophy) inside a card automatically
   read the card-local accent. Outside a card (e.g. on PDP), they keep
   reading --pdp-active-accent directly — no behavioral change for PDPs.
   ============================================================ */
/* Card vars are declared at .product-card scope (NOT :root) so var()
   references re-resolve at the card's cascade. Declaring them at :root
   would bake in the :root-level values per Chrome's computed-value model
   (see SI-18-C fix comment in he-design-system.css). The properties
   inherit normally — descendants of .product-card see card-tier accents. */
.product-card {
  --card-world-accent:    var(--pdp-world-accent);
  --card-subworld-accent: var(--pdp-subworld-accent);
  --card-active-accent:   var(--pdp-subworld-accent);
  /* Shadow --pdp-active-accent so SI-18-B-migrated consumers
     (.trophy-chip border-left, .archive-id-badge__trophy color,
     .pdp-provenance__block--method) inside the card pick up the
     card-local accent without any per-component edit. */
  --pdp-active-accent:    var(--card-active-accent);
}

/* Tier overrides for cards. Mirrors .pdp-main--premiere / .pdp-main--master-set
   rules from SI-18-A. The product-card variant class names are 'archive' /
   'premiere' / 'master' / 'gift' / 'compact' per snippets/product-card.liquid:14-16. */
.product-card--premiere               { --card-active-accent: var(--premiere-gold); }
.product-card--master                 { --card-active-accent: var(--premiere-gold); }
.product-card--master[data-world="deep"] { --card-active-accent: var(--deep); }

.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--white);
  transition: transform 200ms ease;
}

.product-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--ink);
}

.product-card__media {
  display: block;
  background: var(--off-white);
  overflow: hidden;
}

.product-card__media--portrait { aspect-ratio: 3 / 4; }
.product-card__media--square   { aspect-ratio: 1 / 1; }

.product-card__image,
.product-card__image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card__image-placeholder {
  background: linear-gradient(135deg, var(--off-white), var(--border));
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) 0;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-card__sep { color: var(--border-mid); }

.product-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.product-card__price {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-13);
  color: var(--ink);
  margin-top: 2px;
}

.product-card__price-compare {
  color: var(--muted);
  text-decoration: line-through;
}

.product-card__edition-state {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-card:hover .product-card__title {
  color: var(--earth);
}

/* PDP-RELATED-EARTH-2 · Inline trophy block (Trophy 1 + Trophy 2)
   rendered under the card title when `show_trophies` is true. Trophy
   1 is the big stat (e.g. "↑ 8,836 FT") — sans, slightly heavier;
   Trophy 2 is the descriptor (e.g. "Granite face · Yosemite Valley")
   — mono uppercase muted, lower visual weight to step down from
   Trophy 1. Each line hides independently when its source field is
   blank. */
.product-card__trophy {
  margin: 0;
}
.product-card__trophy--1 {
  font-family: var(--font-sans);
  font-size: var(--text-13, 13px);
  font-weight: 500;
  color: var(--ink);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.product-card__trophy--2 {
  font-family: var(--font-mono);
  font-size: var(--text-11, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

/* PDP-RELATED-EARTH-2 · Card hover state.
   PDP-RELATED-EARTH-3 · Added card-level lift (translateY -2px) so the
   hover read is more obvious — image scale alone is subtle. The
   existing baseline `transition: transform 200ms ease` (line ~1694)
   animates both the lift and the image scale (image gets its own
   transition for the scale specifically). No layout shift outside the
   card — adjacent cards in the grid don't reflow. */
.product-card {
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-2px);
}
.product-card__image {
  transition: transform 250ms ease;
}
.product-card:hover .product-card__image {
  transform: scale(1.02);
}
.product-card__link:focus-visible {
  outline: 2px solid var(--earth-accent, #B8956A);
  outline-offset: 4px;
}

/* PDP-RELATED-EARTH-3 (UPDATED) · Scoped typography + spacing for
   related-section cards. Operator-locked specs apply only to cards
   inside `.pdp-related` (the More from Earth section). Other product-
   card consumers (collection grids, home rail, gifts page, etc.)
   inherit the unchanged global rules.

   Per-card-element specs:
     - Title       — sans 18px (was 16px global, font already sans)
     - Trophy 1    — mono 14px (overrides IMPL-2's sans 13px tabular)
     - Trophy 2    — serif 16px (overrides IMPL-2's mono 11px caps)
     - Price       — sans 18px (overrides global mono 13px)
     - Body padding — 20px L/R
     - Vertical text gap — 12px (was 4px global) */

/* PDP-RELATED-EARTH-3 · UPDATE 12 · Related-card image height.
   Operator: "the height of the picture must be 350px minmax for desktop".

   Target on desktop = 350px. Card width on desktop is exactly 280px
   (locked by updates 10 + 11). aspect-ratio 4 / 5 (= 280 / 350) gives:
     · 280px card → 350px image (desktop · exact)
     · ~240px card (small desktop / large tablet) → 300px image
     · ~163px card (mobile portrait) → 204px image
   All values scale proportionally with the card-width minmax cap, so
   no awkward tall-image / narrow-card composition on mobile and no
   fixed pixel value that would mismatch the responsive card width.

   Overrides the global .product-card__media--portrait (3/4) and
   --square (1/1) modifiers inside .pdp-related only (specificity
   0,2,0 vs the modifier's 0,1,0). Other product-card consumers
   (collection grids, gifts, home rails) keep their original ratios. */
.pdp-related .product-card__media {
  aspect-ratio: 3 / 4;
}

/* PDP-RELATED-EARTH-3 FINAL · Card body layout.
   Lateral padding 20px L/R, top 12px (breathing room from the image
   edge), bottom 16px (per operator update — provides breathing room
   under the price/action row while keeping the card compact).
   Vertical flex gap 8px between text elements stays compact.
   The body is `display: flex; flex-direction: column` from the global
   `.product-card__body` rule — that lets `margin-top: auto` on the
   price element anchor it to the bottom of the body. */
.pdp-related .product-card__body {
  padding: 12px 20px 16px;
  gap: 8px;
}

/* PDP-RELATED-EARTH-3 FINAL · World + subworld meta line ABOVE title.
   Emitted by snippets/product-card.liquid when `show_world_above` is
   true. Mono 12px uppercase muted — operator: "use muted/dark world
   styling as appropriate." Stylistically subordinate to the title
   below it; same letter-spacing as the section eyebrow elsewhere. */
.pdp-related .product-card__world-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* PDP-RELATED-EARTH-3 FINAL · Title.
   `min-height: 48px` reserves 2 lines of 20px text at 1.2 line-height
   so all cards in the grid share the same title block height. Cards
   with short 1-line titles get a small empty bottom region; cards
   with longer 2-line titles fill the reserved space. This is what
   pins Trophy 1, Trophy 2, and the price/action row at consistent Y
   positions across the 4-card row. */
.pdp-related .product-card__title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.2;
  min-height: 48px;
}

/* PDP-RELATED-EARTH-3 · UPDATE 9 · Trophy 1.
   Earlier UPDATE 5 added `min-height: 34px` to reserve 2 lines of mono
   text so Trophy 2's Y position would lock when a 2-line Trophy 1
   appeared on any card. In practice ALL current Trophy 1 values are
   single-line (after §16 stripped Mount Baker's "· 95 FT IN ONE
   SEASON" tail), so the 34px reservation just left ~17px of empty
   space below the visible text — a visible "gap" between Trophy 1 and
   Trophy 2 that operator flagged.

   Fix: remove min-height. Trophy 1 collapses to its content height,
   the parent's `gap: 8px` (set on .pdp-related .product-card__body)
   becomes the only spacing between Trophy 1 and Trophy 2. Result is
   the compact, operator-approved 8px gap.

   Cross-card alignment in current data: all Trophy 1 strings are
   single-line so Trophy 2 top aligns organically. If future Trophy 1
   data introduces 2-line wraps the operator will re-evaluate — either
   reintroducing a smaller min-height equal to 1-line height, locking
   the combined [title + world-meta + Trophy 1] section, or shortening
   the longer string at the data layer. */
.pdp-related .product-card__trophy--1 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* PDP-RELATED-EARTH-3 FINAL · Trophy 2.
   serif 14px, weight 400, NOT italic (explicit font-style: normal —
   diverges from the brand title `em` pattern which IS italic; this is
   body trophy text, not a title emphasis). NOT uppercase via CSS
   (text-transform: none); rendering preserves whatever casing comes
   from the Shopify metafield data. Some legacy products store the
   trophy_stat_sub value in all-caps (e.g., "1,312 FT REMOVED IN A
   SINGLE ERUPTION") — that is a data-side casing decision, not a CSS
   transform; if mixed case is desired, the operator updates the
   metafield value in Shopify Admin. */
/* PDP-RELATED-EARTH-3 · UPDATE 6 · Trophy 2 force-override.
   Operator confirmed the global `.product-card__trophy--2` rule at
   line 1799 (mono / uppercase / mono-letter-spacing) was bleeding
   through despite the scoped rule's higher specificity. `!important`
   flags on the 5 operator-spec properties guarantee the override
   regardless of any other rule's specificity or load order.
   The additional layout properties (color, margin, line-height,
   min-height) intentionally do NOT carry !important — they remain
   overridable by any future scoped tweak. */
.pdp-related .product-card__trophy--2 {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif) !important;
  font-size: 14px !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400;
  color: var(--ink-2, #3A3A3A);
  margin: 0;
  line-height: 1.4;
  min-height: 40px;
}

/* PDP-RELATED-EARTH-3 FINAL · Price/action row.
   Price (sans 20px ink) sits on the left; ARCHIVE → CTA (mono 12px
   active-accent) sits on the right via margin-left:auto. The whole
   row is the existing .product-card__price flex container (display:
   flex; align-items: baseline).

   `margin-top: auto` on `.product-card__price` anchors the
   price/action row to the bottom of the card body. Combined with the
   title `min-height: 48px` (which reserves 2 lines), this ensures
   the price/action row aligns to the same Y position across all 4
   cards regardless of trophy line wrap. */
.pdp-related .product-card__price {
  margin-top: auto;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}
.pdp-related .product-card__price-current {
  font-family: var(--font-sans);
  font-size: 20px;
  color: var(--ink);
  margin: 0;
}

.pdp-related .product-card__archive-cta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}


/* ============================================================
   17 · HOMEPAGE · DATA / PROVENANCE (home-data)
   ============================================================ */

.home-data {
  background: var(--off-white);
}

.home-data__title {
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
}

.home-data__lede {
  color: var(--muted);
  max-width: 600px;
}

.home-data__sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.home-data__source {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-data__source-name {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
}

.home-data__source-owner {
  color: var(--muted);
  font-size: var(--text-11);
  margin: 0;
}

.home-data__source-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.home-data__source-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
  padding-top: var(--space-3);
}

.home-data__cta {
  margin-top: var(--space-8);
}

@media (max-width: 991px) {
  .home-data__sources {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .home-data__sources {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   18 · HOMEPAGE · LEARN (home-learn) — concept tiles
   ============================================================ */

.home-learn {
  background: var(--white);
}

.home-learn__title {
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
}

.home-learn__body {
  color: var(--muted);
  max-width: 600px;
}

.home-learn__concepts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.home-learn__concept {
  border: var(--border-width-thin) solid var(--border);
  background: var(--off-white);
}

.home-learn__concept-link,
.home-learn__concept-link--disabled {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  height: 100%;
  color: var(--ink);
  transition: background 200ms ease;
}

.home-learn__concept-link:hover {
  background: var(--white);
}

.home-learn__concept-link--disabled {
  cursor: not-allowed;
  color: var(--muted);
}

.home-learn__concept-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.home-learn__concept-title {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
}

.home-learn__cta {
  margin-top: var(--space-8);
}

@media (max-width: 991px) {
  .home-learn__concepts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .home-learn__concepts {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   19 · HOMEPAGE · GIFT (home-gift) — chip group
   ============================================================ */

.home-gift {
  background: var(--off-white);
}

.home-gift__title {
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
}

.home-gift__body {
  color: var(--muted);
  max-width: 600px;
}

.home-gift__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-gift__chip,
.home-gift__chip--disabled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 200ms ease, color 200ms ease;
}

.home-gift__chip:hover {
  border-color: var(--ink);
}

.home-gift__chip--disabled {
  color: var(--muted);
  background: var(--disabled);
  cursor: not-allowed;
}

.home-gift__chip-label { line-height: 1; }

.home-gift__chip-item { display: inline-flex; }

.home-gift__cta {
  margin-top: var(--space-6);
}


/* ============================================================
   20 · HOMEPAGE · COMMUNITY (home-community)
   ============================================================ */

.home-community {
  background: var(--ink);
  color: var(--white);
}

.home-community__head {
  margin-bottom: var(--space-6);
}

.home-community__head > .mono.rule {
  color: rgba(255, 255, 255, 0.65);
}

.home-community__title {
  font-size: clamp(var(--text-28), 3.5vw, var(--text-48));
  color: var(--white);
}

.home-community__body {
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  font-size: var(--text-16);
  line-height: 1.6;
}

.home-community__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.home-community__cta--primary {
  background: var(--earth-accent);
  border-color: var(--earth-accent);
  color: var(--ink);
}

.home-community__cta--primary:hover {
  background: var(--white);
  border-color: var(--white);
}

.home-community__cta--secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

.home-community__cta--secondary:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}


/* ============================================================
   21 · HOMEPAGE · SIGNUP (home-signup) — newsletter form
   ============================================================ */

.home-signup {
  background: var(--off-white);
}

.home-signup__title {
  font-size: clamp(var(--text-28), 3.5vw, var(--text-44));
}

.home-signup__body {
  color: var(--muted);
  max-width: 600px;
  font-size: var(--text-16);
  line-height: 1.6;
}

.home-signup__form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home-signup__chips {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-signup__chips-legend {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0;
}

.home-signup__chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-signup__chip-item { display: inline-flex; }

.home-signup__chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.home-signup__chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.home-signup__chip-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.home-signup__chip input[type="checkbox"]:checked + .home-signup__chip-label {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.home-signup__chip input[type="checkbox"]:focus-visible + .home-signup__chip-label {
  outline: 2px solid var(--earth-accent);
  outline-offset: 2px;
}

.home-signup__field {
  display: flex;
  gap: var(--space-2);
  max-width: 520px;
}

.home-signup__field input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--border-mid);
  background: var(--white);
  font-size: var(--text-15);
}

.home-signup__field input[type="email"]:focus {
  outline: none;
  border-color: var(--earth);
}

.home-signup__submit {
  flex-shrink: 0;
}

.home-signup__disclaimer {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.08em;
  text-transform: none;
}

.home-signup__success {
  padding: var(--space-6);
  background: var(--earth-light);
  border: var(--border-width-thin) solid var(--earth);
  color: var(--earth);
}

@media (max-width: 600px) {
  .home-signup__field {
    flex-direction: column;
  }
  .home-signup__submit {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   22 · SHELL · CART DRAWER (minimal CSS-only baseline)
   ============================================================ */

#CartDrawer,
[data-cart-drawer] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 420px);
  background: var(--white);
  z-index: 80;
  box-shadow: var(--shadow-cart-drawer);
  transform: translateX(100%);
  transition: transform 250ms ease;
}

#CartDrawer[aria-hidden="false"],
[data-cart-drawer][aria-hidden="false"] {
  transform: none;
}

#CartDrawer[aria-hidden="true"],
[data-cart-drawer][aria-hidden="true"] {
  pointer-events: none;
}


/* ============================================================
   23 · COLLECTIONS · SHARED (hero · empty · grid · pagination ·
        filters · chips) — used by all three collection sections
   ============================================================ */

/* Vertical rhythm — every collection section gets the same outer padding. */
.collection-archive,
.collection-world,
.collection-curated {
  padding: var(--space-12) 0 var(--space-16);
}

@media (max-width: 767px) {
  .collection-archive,
  .collection-world,
  .collection-curated {
    padding: var(--space-8) 0 var(--space-10);
  }
}

/* ── HERO (shared across all three sections) ── */

.collection-hero {
  padding: var(--space-8) 0 var(--space-10);
  border-bottom: var(--border-width-thin) solid var(--border);
  margin-bottom: var(--space-10);
}

.collection-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.collection-hero__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(var(--text-32), 5vw, var(--text-56));
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 300;
}

.collection-hero__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
}

.collection-hero__intro {
  max-width: 640px;
  color: var(--muted);
  font-size: var(--text-16);
  line-height: 1.6;
}

.collection-hero__intro p { margin: 0 0 var(--space-2); }
.collection-hero__intro p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .collection-hero {
    padding: var(--space-6) 0 var(--space-8);
    margin-bottom: var(--space-6);
  }
}

/* ── PRODUCT GRID (shared) ── */

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-grid__cell {
  display: flex;
}

.collection-grid__cell > .product-card {
  width: 100%;
}

@media (max-width: 991px) {
  .collection-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-4);
  }
}

/* ── EMPTY STATE (shared) ── */

.collection-empty {
  padding: var(--space-12) 0;
  text-align: center;
}

.collection-empty__message {
  font-size: var(--text-16);
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto var(--space-5);
  line-height: 1.5;
}

.collection-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}

.collection-empty__cta:hover {
  background: var(--ink);
  color: var(--white);
}

/* ── PAGINATION (shared) ── */

.collection-pagination {
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
}

.collection-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.12em;
}

.collection-pagination__item { display: inline-flex; }

.collection-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  color: var(--muted);
  border: var(--border-width-thin) solid transparent;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

a.collection-pagination__link:hover {
  color: var(--ink);
  border-color: var(--border-mid);
}

.collection-pagination__link--current {
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 500;
}

.collection-pagination__link--gap {
  color: var(--border-mid);
  pointer-events: none;
}

.collection-pagination__link--prev,
.collection-pagination__link--next {
  text-transform: uppercase;
  padding: 0 var(--space-4);
  border-color: var(--border);
  color: var(--ink);
}

a.collection-pagination__link--prev:hover,
a.collection-pagination__link--next:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

@media (max-width: 600px) {
  .collection-pagination__link--prev,
  .collection-pagination__link--next {
    padding: 0 var(--space-3);
  }
  .collection-pagination__link {
    min-width: 32px;
    height: 32px;
    font-size: var(--text-11);
  }
}

/* ── FILTERS (shared) ── */

.collection-filters {
  margin-bottom: var(--space-10);
  border-top: var(--border-width-thin) solid var(--border);
  border-bottom: var(--border-width-thin) solid var(--border);
  padding: var(--space-5) 0;
}

.collection-filters > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-6);
}

.collection-filters__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 220px;
}

.collection-filters__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.collection-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-filters__item,
.collection-filters__item-wrap {
  display: inline-flex;
}

.collection-filters__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-wrap: wrap;
}

.collection-filters__clear {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: var(--border-width-thin) solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

.collection-filters__clear:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.collection-filters__submit {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--ink);
  cursor: pointer;
  transition: background 200ms ease;
}

.collection-filters__submit:hover {
  background: var(--ink-2, #2a2a26);
}

/* Native price-range row (HTML5 inputs already wired by section) */
.collection-filters__price-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.collection-filters__price-range {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.collection-filters__price-range input[type="number"],
.collection-filters__price-range input[type="text"] {
  width: 96px;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--border-mid);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
}

.collection-filters__price-range input:focus {
  outline: none;
  border-color: var(--earth);
}

/* Mobile filter layout — full-width stack */
@media (max-width: 767px) {
  .collection-filters > .container {
    flex-direction: column;
    gap: var(--space-4);
  }
  .collection-filters__group {
    width: 100%;
  }
  .collection-filters__actions {
    margin-left: 0;
  }
}

/* ── CHIPS (shared) ── */

.collection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  min-height: 32px;
  background: var(--white);
  border: var(--border-width-thin) solid var(--border-mid);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  cursor: pointer;
  user-select: none;
}

a.collection-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.collection-chip__label { line-height: 1; }

.collection-chip__count {
  font-size: var(--text-10);
  color: var(--muted);
  padding-left: 4px;
}

.collection-chip__note {
  font-size: var(--text-10);
  color: var(--muted);
  padding-left: 4px;
  text-transform: none;
  letter-spacing: 0.04em;
}

.collection-chip--active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.collection-chip--active .collection-chip__count {
  color: rgba(255, 255, 255, 0.65);
}

.collection-chip--disabled {
  background: var(--disabled);
  color: var(--disabled-text);
  border-color: var(--disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.collection-chip--reserved {
  background: var(--off-white);
  color: var(--muted);
  border-style: dashed;
  cursor: not-allowed;
}

.collection-chip--reserved .collection-chip__label::after {
  content: '·';
  display: inline-block;
  margin-left: 6px;
  color: var(--earth-accent);
}


/* ============================================================
   24 · COLLECTIONS · ARCHIVE (collection-archive-main)
   ============================================================ */

.collection-archive {
  background: var(--white);
}

.collection-archive__hero {
  /* shared .collection-hero rules already apply */
}

.collection-archive__grid-wrap > .container,
.collection-archive__grid-wrap {
  margin-top: var(--space-6);
}

.collection-archive__empty {
  /* shared .collection-empty rules already apply */
  background: var(--off-white);
  margin-top: var(--space-8);
}


/* ============================================================
   25 · COLLECTIONS · WORLD (collection-world-main)
        Earth · Deep · Space — token-driven world coloring
   ============================================================ */

.collection-world {
  background: var(--world-bg, var(--white));
  color: var(--ink);
}

/* Earth world — green palette */
.collection-world--ea {
  --world-color:  var(--earth);
  --world-bg:     var(--white);
  --world-tint:   var(--earth-tint);
  --world-accent: var(--earth-accent);
}

/* Deep world — navy palette over pale tint */
.collection-world--dp {
  --world-color:  var(--deep);
  --world-bg:     var(--deep-tint);
  --world-tint:   var(--deep-light);
  --world-accent: var(--deep-accent);
  background: var(--world-bg);
}

/* Space world — dark mode */
.collection-world--sp {
  --world-color:  var(--space-teal);
  --world-bg:     var(--space);
  --world-tint:   #1A1A2E;
  --world-accent: var(--space-teal);
  background: var(--world-bg);
  color: var(--white);
}

.collection-world__hero {
  border-bottom-color: var(--world-color);
  border-bottom-width: var(--border-width-thin);
}

.collection-world--sp .collection-world__hero {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.collection-world__hero .collection-hero__eyebrow {
  color: var(--world-color);
}

.collection-world--sp .collection-world__hero .collection-hero__eyebrow {
  color: var(--world-accent);
}

.collection-world--sp .collection-hero__title {
  color: var(--white);
}

.collection-world--sp .collection-hero__intro {
  color: rgba(255, 255, 255, 0.75);
}

/* Subworld chip filters take the world accent for active state */
.collection-world .collection-chip--active {
  background: var(--world-color);
  border-color: var(--world-color);
  color: var(--white);
}

.collection-world--sp .collection-chip {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
}

.collection-world--sp a.collection-chip:hover {
  border-color: var(--world-accent);
  color: var(--world-accent);
}

.collection-world--sp .collection-chip--active {
  background: var(--world-accent);
  border-color: var(--world-accent);
  color: var(--space);
}

.collection-world--sp .collection-chip--disabled {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.1);
}

.collection-world--sp .collection-filters {
  border-color: rgba(255, 255, 255, 0.12);
}

.collection-world--sp .collection-filters__legend,
.collection-world--sp .collection-filters__clear {
  color: rgba(255, 255, 255, 0.7);
}

.collection-world--sp .collection-pagination__link {
  color: rgba(255, 255, 255, 0.7);
}

.collection-world--sp .collection-pagination__link--current {
  color: var(--white);
  border-color: var(--white);
}

.collection-world--sp a.collection-pagination__link:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.collection-world--sp .collection-pagination__link--prev,
.collection-world--sp .collection-pagination__link--next {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
}

.collection-world--sp a.collection-pagination__link--prev:hover,
.collection-world--sp a.collection-pagination__link--next:hover {
  background: var(--world-accent);
  color: var(--space);
  border-color: var(--world-accent);
}

.collection-world__grid-wrap {
  margin-top: var(--space-6);
}

/* Nominate cross-link block */
.collection-world__nominate {
  margin-top: var(--space-16);
  padding: var(--space-12) 0;
  background: var(--world-tint);
  border-top: var(--border-width-thin) solid var(--world-color);
  border-bottom: var(--border-width-thin) solid var(--world-color);
}

.collection-world--sp .collection-world__nominate {
  background: var(--world-tint);
  border-color: rgba(255, 255, 255, 0.18);
}

.collection-world__nominate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--world-color);
  margin-bottom: var(--space-3);
}

.collection-world--sp .collection-world__nominate-eyebrow {
  color: var(--world-accent);
}

.collection-world__nominate-title {
  margin: 0 0 var(--space-3);
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
  letter-spacing: -0.01em;
  font-weight: 400;
}

.collection-world__nominate-body {
  color: var(--muted);
  max-width: 600px;
  font-size: var(--text-15);
  line-height: 1.6;
}

.collection-world--sp .collection-world__nominate-body {
  color: rgba(255, 255, 255, 0.75);
}

.collection-world__nominate-body p { margin: 0 0 var(--space-2); }
.collection-world__nominate-body p:last-child { margin: 0; }

.collection-world__nominate-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-6);
  background: var(--world-color);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--world-color);
  transition: background 200ms ease, color 200ms ease;
}

.collection-world__nominate-cta:hover {
  background: transparent;
  color: var(--world-color);
}

.collection-world--sp .collection-world__nominate-cta {
  background: var(--world-accent);
  color: var(--space);
  border-color: var(--world-accent);
}

.collection-world--sp .collection-world__nominate-cta:hover {
  background: transparent;
  color: var(--world-accent);
}

.collection-world__empty {
  background: var(--world-tint);
  margin-top: var(--space-8);
}

.collection-world--sp .collection-world__empty {
  background: rgba(255, 255, 255, 0.04);
}

.collection-world--sp .collection-empty__message {
  color: rgba(255, 255, 255, 0.75);
}

.collection-world--sp .collection-empty__cta {
  border-color: var(--world-accent);
  color: var(--world-accent);
}

.collection-world--sp .collection-empty__cta:hover {
  background: var(--world-accent);
  color: var(--space);
}


/* ============================================================
   26 · COLLECTIONS · CURATED (collection-curated-main)
        Premiere · Master Sets · Complete Editions
   ============================================================ */

.collection-curated {
  background: var(--white);
}

.collection-curated__hero {
  /* shared .collection-hero rules apply */
}

.collection-curated__grid-wrap {
  margin-top: var(--space-6);
}

.collection-curated__empty {
  background: var(--off-white);
  margin-top: var(--space-8);
}

/* Variant-specific accent strips at the hero — picked up via the
   collection-curated--<variant> class set by the section. */
.collection-curated--premiere .collection-hero {
  border-bottom-color: var(--earth-accent);
}

.collection-curated--master .collection-hero {
  border-bottom-color: var(--earth);
}

.collection-curated--archive .collection-hero,
.collection-curated--compact .collection-hero,
.collection-curated--gift .collection-hero {
  /* default border-bottom from .collection-hero is fine */
}

/* ── INFO RAILS (curated only) ── */

.collection-curated__rails {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-16);
}

.collection-rail {
  padding: var(--space-12) 0;
  border-top: var(--border-width-thin) solid var(--border);
}

.collection-rail:first-child { border-top: 0; }

.collection-rail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.collection-rail__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
  letter-spacing: -0.01em;
  font-weight: 400;
}

.collection-rail__body {
  max-width: 640px;
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.65;
}

.collection-rail__body p { margin: 0 0 var(--space-2); }
.collection-rail__body p:last-child { margin: 0; }

.collection-rail__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 200ms ease, color 200ms ease;
}

.collection-rail__cta:hover {
  background: var(--ink);
  color: var(--white);
}

@media (max-width: 600px) {
  .collection-rail {
    padding: var(--space-8) 0;
  }
}

/* ── UTILITY · .h2 helper used by curated/world block titles ── */

.h2 {
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}


/* ============================================================
   27 · PAGES · SHARED RHYTHM + HEAD PATTERN
   Used by every Phase 2E page section + intl/nominate sections.
   ============================================================ */

.page-gifts-hero, .page-gifts-finder, .page-gifts-how-it-works,
.page-gifts-rails, .page-gifts-cart-note, .page-gifts-faq, .page-gifts-cta,
.page-editions-hero, .page-editions-ladder, .page-editions-archive,
.page-editions-premiere, .page-editions-master-set, .page-editions-compare,
.page-editions-faq, .page-editions-cta,
.page-master-sets-hero, .page-master-sets-definition, .page-master-sets-plates,
.page-master-sets-anatomy, .page-master-sets-numbering,
.page-master-sets-provenance, .page-master-sets-rails, .page-master-sets-faq,
.page-master-sets-cta,
.page-faq-hero, .page-faq-groups, .page-faq-contact-cta,
.page-about-hero, .page-about-origin, .page-about-method, .page-about-values,
.page-about-conservation, .page-about-cta,
.page-learn-hero, .page-learn-topics, .page-learn-terrain,
.page-learn-contours, .page-learn-worlds, .page-learn-process, .page-learn-cta,
.page-data-hero, .page-data-explainer, .page-data-lookup,
.page-data-record-example, .page-data-methods, .page-data-notices,
.page-data-cta,
.page-collectors-list-hero, .page-collectors-list-how-it-works,
.page-collectors-list-paths, .page-collectors-list-form,
.page-collectors-list-faq {
  padding: var(--space-12) 0;
}

@media (max-width: 767px) {
  .page-gifts-hero, .page-gifts-finder, .page-gifts-how-it-works,
  .page-gifts-rails, .page-gifts-cart-note, .page-gifts-faq, .page-gifts-cta,
  .page-editions-hero, .page-editions-ladder, .page-editions-archive,
  .page-editions-premiere, .page-editions-master-set, .page-editions-compare,
  .page-editions-faq, .page-editions-cta,
  .page-master-sets-hero, .page-master-sets-definition, .page-master-sets-plates,
  .page-master-sets-anatomy, .page-master-sets-numbering,
  .page-master-sets-provenance, .page-master-sets-rails, .page-master-sets-faq,
  .page-master-sets-cta,
  .page-faq-hero, .page-faq-groups, .page-faq-contact-cta,
  .page-about-hero, .page-about-origin, .page-about-method, .page-about-values,
  .page-about-conservation, .page-about-cta,
  .page-learn-hero, .page-learn-topics, .page-learn-terrain,
  .page-learn-contours, .page-learn-worlds, .page-learn-process, .page-learn-cta,
  .page-data-hero, .page-data-explainer, .page-data-lookup,
  .page-data-record-example, .page-data-methods, .page-data-notices,
  .page-data-cta,
  .page-collectors-list-hero, .page-collectors-list-how-it-works,
  .page-collectors-list-paths, .page-collectors-list-form,
  .page-collectors-list-faq {
    padding: var(--space-8) 0;
  }
}

/* Hero variants — taller padding, off-white background by default. */
.page-gifts-hero,
.page-editions-hero,
.page-master-sets-hero,
.page-faq-hero,
.page-about-hero,
.page-learn-hero,
.page-data-hero,
.page-collectors-list-hero {
  padding: var(--space-16) 0 var(--space-12);
  background: var(--off-white);
  border-bottom: var(--border-width-thin) solid var(--border);
}

@media (max-width: 767px) {
  .page-gifts-hero,
  .page-editions-hero,
  .page-master-sets-hero,
  .page-faq-hero,
  .page-about-hero,
  .page-learn-hero,
  .page-data-hero,
  .page-collectors-list-hero {
    padding: var(--space-10) 0 var(--space-8);
  }
}

/* Shared __head, __title, __lede, __eyebrow primitives.
   Every Phase 2E page section uses this exact stack. */

.page-gifts-hero__head, .page-gifts-finder__head, .page-gifts-how-it-works__head,
.page-gifts-rails__head, .page-gifts-cart-note__head, .page-gifts-faq__head, .page-gifts-cta__head,
.page-editions-hero__head, .page-editions-ladder__head, .page-editions-archive__head,
.page-editions-premiere__head, .page-editions-master-set__head, .page-editions-compare__head,
.page-editions-faq__head, .page-editions-cta__head,
.page-master-sets-hero__head, .page-master-sets-definition__head, .page-master-sets-plates__head,
.page-master-sets-anatomy__head, .page-master-sets-numbering__head,
.page-master-sets-provenance__head, .page-master-sets-rails__head, .page-master-sets-faq__head,
.page-master-sets-cta__head,
.page-faq-hero__head, .page-faq-groups__head, .page-faq-contact-cta__head,
.page-about-hero__head, .page-about-origin__head, .page-about-method__head,
.page-about-values__head, .page-about-conservation__head, .page-about-cta__head,
.page-learn-hero__head, .page-learn-topics__head, .page-learn-terrain__head,
.page-learn-contours__head, .page-learn-worlds__head, .page-learn-process__head, .page-learn-cta__head,
.page-data-hero__head, .page-data-explainer__head, .page-data-lookup__head,
.page-data-record-example__head, .page-data-methods__head, .page-data-notices__head,
.page-data-cta__head,
.page-collectors-list-hero__head, .page-collectors-list-how-it-works__head,
.page-collectors-list-paths__head, .page-collectors-list-form__head,
.page-collectors-list-faq__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
  margin: 0 0 var(--space-8);
}

/* Eyebrow (.mono.rule + section-specific eyebrow class) */
.page-faq-hero__eyebrow,
.page-gifts-finder__eyebrow,
.page-editions-compare__callout-eyebrow,
.page-data-explainer__step-eyebrow,
.page-learn-process__step-eyebrow,
.page-learn-topics__cell-eyebrow,
.page-learn-topics__lvd-eyebrow,
.page-collectors-list-paths__item-eyebrow,
.page-master-sets-anatomy__feature-eyebrow,
.page-about-cta__eyebrow,
.page-about-method__step-eyebrow,
.page-about-origin__note-eyebrow,
.page-about-values__eyebrow,
.page-faq-groups__group-eyebrow {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Title — large display-ish */
.page-gifts-hero__title,
.page-editions-hero__title,
.page-master-sets-hero__title,
.page-faq-hero__title,
.page-about-hero__title,
.page-learn-hero__title,
.page-data-hero__title,
.page-collectors-list-hero__title {
  font-size: clamp(var(--text-32), 5vw, var(--text-56));
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 300;
  margin: 0;
}

/* Hero title is already wrapped in <h1> via the section template */

.page-gifts-finder__title, .page-gifts-how-it-works__title, .page-gifts-rails__title,
.page-gifts-cart-note__title, .page-gifts-faq__title, .page-gifts-cta__title,
.page-editions-ladder__title, .page-editions-archive__title, .page-editions-premiere__title,
.page-editions-master-set__title, .page-editions-compare__title, .page-editions-faq__title,
.page-editions-cta__title,
.page-master-sets-definition__title, .page-master-sets-plates__title,
.page-master-sets-anatomy__title, .page-master-sets-numbering__title,
.page-master-sets-provenance__title, .page-master-sets-rails__title,
.page-master-sets-faq__title, .page-master-sets-cta__title,
.page-faq-groups__title, .page-faq-contact-cta__title,
.page-about-origin__title, .page-about-method__title, .page-about-values__title,
.page-about-conservation__title, .page-about-cta__title,
.page-learn-topics__title, .page-learn-terrain__title, .page-learn-contours__title,
.page-learn-worlds__title, .page-learn-process__title, .page-learn-cta__title,
.page-data-explainer__title, .page-data-lookup__title, .page-data-record-example__title,
.page-data-methods__title, .page-data-notices__title, .page-data-cta__title,
.page-collectors-list-how-it-works__title, .page-collectors-list-paths__title,
.page-collectors-list-form__title, .page-collectors-list-faq__title {
  font-size: clamp(var(--text-24), 3.5vw, var(--text-44));
  letter-spacing: -0.01em;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

.page-gifts-hero__title em, .page-editions-hero__title em,
.page-master-sets-hero__title em, .page-faq-hero__title em,
.page-about-hero__title em, .page-learn-hero__title em,
.page-data-hero__title em, .page-collectors-list-hero__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
}

/* Lede */
.page-gifts-hero__lede, .page-gifts-finder__lede, .page-gifts-how-it-works__lede,
.page-gifts-rails__lede, .page-gifts-cart-note__lede, .page-gifts-faq__lede, .page-gifts-cta__lede,
.page-editions-hero__lede, .page-editions-ladder__lede, .page-editions-archive__lede,
.page-editions-premiere__lede, .page-editions-master-set__lede, .page-editions-compare__lede,
.page-editions-faq__lede, .page-editions-cta__lede,
.page-master-sets-hero__lede, .page-master-sets-definition__lede, .page-master-sets-plates__lede,
.page-master-sets-anatomy__lede, .page-master-sets-numbering__lede,
.page-master-sets-provenance__lede, .page-master-sets-rails__lede, .page-master-sets-faq__lede,
.page-master-sets-cta__lede,
.page-faq-hero__lede, .page-faq-groups__lede, .page-faq-contact-cta__lede,
.page-about-hero__lede, .page-about-origin__lede, .page-about-method__lede,
.page-about-values__lede, .page-about-cta__lede,
.page-learn-hero__lede, .page-learn-topics__lede, .page-learn-terrain__lede,
.page-learn-contours__lede, .page-learn-worlds__lede, .page-learn-process__lede, .page-learn-cta__lede,
.page-data-hero__lede, .page-data-explainer__lede, .page-data-lookup__lede,
.page-data-record-example__lede, .page-data-methods__lede, .page-data-notices__lede, .page-data-cta__lede,
.page-collectors-list-hero__lede, .page-collectors-list-how-it-works__lede,
.page-collectors-list-paths__lede, .page-collectors-list-form__lede,
.page-collectors-list-faq__lede {
  color: var(--muted);
  font-size: var(--text-16);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

.page-gifts-hero__lede, .page-editions-hero__lede, .page-master-sets-hero__lede,
.page-faq-hero__lede, .page-about-hero__lede, .page-learn-hero__lede,
.page-data-hero__lede, .page-collectors-list-hero__lede {
  font-size: clamp(var(--text-16), 1.5vw, var(--text-20));
}

/* Hero CTA stacks */
.page-gifts-hero__ctas, .page-editions-hero__ctas, .page-master-sets-hero__ctas,
.page-faq-hero__ctas, .page-about-hero__ctas, .page-learn-hero__ctas,
.page-data-hero__ctas, .page-collectors-list-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Hero CTA buttons — reuse primary/secondary tokens */
.page-gifts-hero__cta--primary, .page-editions-hero__cta--primary,
.page-master-sets-hero__cta--primary, .page-faq-hero__cta--primary,
.page-about-hero__cta--primary, .page-learn-hero__cta--primary,
.page-data-hero__cta--primary, .page-collectors-list-hero__cta--primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
  transition: background 200ms ease;
}

.page-gifts-hero__cta--primary:hover, .page-editions-hero__cta--primary:hover,
.page-master-sets-hero__cta--primary:hover, .page-faq-hero__cta--primary:hover,
.page-about-hero__cta--primary:hover, .page-learn-hero__cta--primary:hover,
.page-data-hero__cta--primary:hover, .page-collectors-list-hero__cta--primary:hover {
  background: var(--earth-hover);
}

.page-gifts-hero__cta--secondary, .page-editions-hero__cta--secondary,
.page-master-sets-hero__cta--secondary, .page-faq-hero__cta--secondary,
.page-about-hero__cta--secondary, .page-learn-hero__cta--secondary,
.page-data-hero__cta--secondary, .page-collectors-list-hero__cta--secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  background: transparent;
  color: var(--ink);
  border: var(--border-width-thin) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 200ms ease, color 200ms ease;
}

.page-gifts-hero__cta--secondary:hover, .page-editions-hero__cta--secondary:hover,
.page-master-sets-hero__cta--secondary:hover, .page-faq-hero__cta--secondary:hover,
.page-about-hero__cta--secondary:hover, .page-learn-hero__cta--secondary:hover,
.page-data-hero__cta--secondary:hover, .page-collectors-list-hero__cta--secondary:hover {
  background: var(--ink);
  color: var(--white);
}

@media (max-width: 600px) {
  .page-gifts-hero__ctas .page-gifts-hero__cta--primary, .page-gifts-hero__ctas .page-gifts-hero__cta--secondary,
  .page-editions-hero__ctas .page-editions-hero__cta--primary, .page-editions-hero__ctas .page-editions-hero__cta--secondary,
  .page-master-sets-hero__ctas .page-master-sets-hero__cta--primary, .page-master-sets-hero__ctas .page-master-sets-hero__cta--secondary,
  .page-faq-hero__ctas .page-faq-hero__cta--primary, .page-faq-hero__ctas .page-faq-hero__cta--secondary,
  .page-about-hero__ctas .page-about-hero__cta--primary, .page-about-hero__ctas .page-about-hero__cta--secondary,
  .page-learn-hero__ctas .page-learn-hero__cta--primary, .page-learn-hero__ctas .page-learn-hero__cta--secondary,
  .page-data-hero__ctas .page-data-hero__cta--primary, .page-data-hero__ctas .page-data-hero__cta--secondary,
  .page-collectors-list-hero__ctas .page-collectors-list-hero__cta--primary, .page-collectors-list-hero__ctas .page-collectors-list-hero__cta--secondary {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   28 · PAGES · SHARED FAQ details/summary pattern
   Applies to: page-faq-groups, page-gifts-faq, page-editions-faq,
   page-master-sets-faq, page-learn-faq, page-data-faq,
   page-collectors-list-faq.
   ============================================================ */

.page-faq-groups__list, .page-gifts-faq__list, .page-editions-faq__list,
.page-master-sets-faq__list, .page-learn-faq__list, .page-data-faq__list,
.page-collectors-list-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--border-width-thin) solid var(--border);
  max-width: 800px;
}

.page-faq-groups__item, .page-gifts-faq__item, .page-editions-faq__item,
.page-master-sets-faq__item, .page-learn-faq__item, .page-data-faq__item,
.page-collectors-list-faq__item {
  border-bottom: var(--border-width-thin) solid var(--border);
}

.page-faq-groups__details, .page-gifts-faq__details, .page-editions-faq__details,
.page-master-sets-faq__details, .page-learn-faq__details, .page-data-faq__details,
.page-collectors-list-faq__details {
  display: block;
}

.page-faq-groups__summary, .page-gifts-faq__summary, .page-editions-faq__summary,
.page-master-sets-faq__summary, .page-learn-faq__summary, .page-data-faq__summary,
.page-collectors-list-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--ink);
}

.page-faq-groups__summary::-webkit-details-marker,
.page-gifts-faq__summary::-webkit-details-marker,
.page-editions-faq__summary::-webkit-details-marker,
.page-master-sets-faq__summary::-webkit-details-marker,
.page-learn-faq__summary::-webkit-details-marker,
.page-data-faq__summary::-webkit-details-marker,
.page-collectors-list-faq__summary::-webkit-details-marker {
  display: none;
}

.page-faq-groups__q, .page-gifts-faq__q, .page-editions-faq__q,
.page-master-sets-faq__q, .page-learn-faq__q, .page-data-faq__q,
.page-collectors-list-faq__q,
.page-faq-groups__question, .page-gifts-faq__question, .page-editions-faq__question,
.page-master-sets-faq__question, .page-learn-faq__question, .page-data-faq__question,
.page-collectors-list-faq__question {
  font-size: var(--text-16);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
  margin: 0;
}

.page-faq-groups__indicator, .page-gifts-faq__indicator, .page-editions-faq__indicator,
.page-master-sets-faq__indicator, .page-learn-faq__indicator, .page-data-faq__indicator,
.page-collectors-list-faq__indicator {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-16);
  color: var(--muted);
  transition: transform 200ms ease;
  display: inline-block;
  line-height: 1;
  margin-top: 2px;
}

details[open] > .page-faq-groups__summary .page-faq-groups__indicator,
details[open] > .page-gifts-faq__summary .page-gifts-faq__indicator,
details[open] > .page-editions-faq__summary .page-editions-faq__indicator,
details[open] > .page-master-sets-faq__summary .page-master-sets-faq__indicator,
details[open] > .page-learn-faq__summary .page-learn-faq__indicator,
details[open] > .page-data-faq__summary .page-data-faq__indicator,
details[open] > .page-collectors-list-faq__summary .page-collectors-list-faq__indicator {
  transform: rotate(45deg);
}

.page-faq-groups__a, .page-gifts-faq__a, .page-editions-faq__a,
.page-master-sets-faq__a, .page-learn-faq__a, .page-data-faq__a,
.page-collectors-list-faq__a,
.page-faq-groups__answer, .page-gifts-faq__answer, .page-editions-faq__answer,
.page-master-sets-faq__answer, .page-learn-faq__answer, .page-data-faq__answer,
.page-collectors-list-faq__answer {
  padding: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.65;
  max-width: 720px;
}

.page-faq-groups__a p, .page-gifts-faq__a p, .page-editions-faq__a p,
.page-master-sets-faq__a p, .page-learn-faq__a p, .page-data-faq__a p,
.page-collectors-list-faq__a p,
.page-faq-groups__answer p, .page-gifts-faq__answer p, .page-editions-faq__answer p,
.page-master-sets-faq__answer p, .page-learn-faq__answer p, .page-data-faq__answer p,
.page-collectors-list-faq__answer p { margin: 0 0 var(--space-2); }


/* FAQ groups (page-faq-groups specific — multi-group layout) */
.page-faq-groups__group {
  margin-bottom: var(--space-12);
}

.page-faq-groups__group:last-child { margin-bottom: 0; }

.page-faq-groups__group-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.page-faq-groups__group-eyebrow {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-faq-groups__group-title {
  font-size: clamp(var(--text-20), 2.5vw, var(--text-28));
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.page-faq-groups__group-lede {
  color: var(--muted);
  font-size: var(--text-15);
  max-width: 640px;
}

.page-faq-groups__group--orphan {
  padding-top: var(--space-5);
}


/* ============================================================
   29 · PAGES · GIFTS family
   ============================================================ */

/* Gift Finder paths */
.page-gifts-finder__paths,
.gift-finder__paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

@media (max-width: 991px) {
  .page-gifts-finder__paths,
  .gift-finder__paths {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .page-gifts-finder__paths,
  .gift-finder__paths {
    grid-template-columns: 1fr;
  }
}

.gift-finder__path-item { display: flex; }

.gift-finder__path,
.gift-finder__path--disabled {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  color: var(--ink);
  height: 100%;
  width: 100%;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

a.gift-finder__path:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.gift-finder__path--disabled {
  background: var(--off-white);
  color: var(--muted);
  cursor: not-allowed;
}

.gift-finder__path-eyebrow {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gift-finder__path-scenario {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.12em;
}

.gift-finder__path-title {
  font-size: var(--text-20);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.gift-finder__path--disabled .gift-finder__path-title { color: var(--muted); }

.gift-finder__path-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
  flex: 1;
}

.gift-finder__path-note {
  color: var(--muted);
  font-size: var(--text-11);
  text-transform: none;
  letter-spacing: 0.02em;
}

.gift-finder__path-cta {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

/* How-it-works steps reuse the shared "method/process step" pattern (§31 below).
   Rails reuse the product-card grid pattern. Cart-note + CTA are simple panels. */

.page-gifts-rails__head { margin-bottom: var(--space-6); }


/* ============================================================
   30 · PAGES · EDITIONS family
   ============================================================ */

.page-editions-ladder__head,
.page-editions-archive__head,
.page-editions-premiere__head,
.page-editions-master-set__head { margin-bottom: var(--space-6); }

/* Per-tier color accents */
.page-editions-tier {
  padding: var(--space-12) 0;
  border-top: var(--border-width-thin) solid var(--border);
}

.page-editions-tier--archive { border-top-color: var(--ink); }
.page-editions-tier--premiere { border-top-color: var(--earth-accent); }
.page-editions-tier--master-set { border-top-color: var(--earth); }

/* Compare table */
.page-editions-compare__table-wrap {
  overflow-x: auto;
  margin-top: var(--space-6);
}

.page-editions-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-14);
}

.page-editions-compare__row {
  border-bottom: var(--border-width-thin) solid var(--border);
}

.page-editions-compare__row-head {
  background: var(--off-white);
}

.page-editions-compare__row-label {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  width: 200px;
  vertical-align: top;
}

.page-editions-compare__cell {
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  vertical-align: top;
  line-height: 1.5;
}

.page-editions-compare__cell--archive { border-top: 2px solid var(--ink); }
.page-editions-compare__cell--premiere { border-top: 2px solid var(--earth-accent); }
.page-editions-compare__cell--master-set { border-top: 2px solid var(--earth); }

.page-editions-compare__col {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.page-editions-compare__col--archive { color: var(--ink); }
.page-editions-compare__col--premiere { color: var(--earth-accent); }
.page-editions-compare__col--master-set { color: var(--earth); }

.page-editions-compare__callout {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--off-white);
  border-left: var(--border-width-accent) solid var(--earth-accent);
}

.page-editions-compare__callout-eyebrow { color: var(--muted); }

.page-editions-compare__callout-title {
  font-size: var(--text-18);
  font-weight: 500;
  margin: var(--space-2) 0;
  color: var(--ink);
}

.page-editions-compare__callout-body {
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .page-editions-compare__row-label {
    width: 140px;
    font-size: var(--text-10);
  }
  .page-editions-compare__cell {
    font-size: var(--text-13);
    padding: var(--space-2) var(--space-3);
  }
}


/* ============================================================
   31 · PAGES · MASTER SETS family
   ============================================================ */

/* Anatomy features grid */
.page-master-sets-anatomy__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.page-master-sets-anatomy__feature {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-master-sets-anatomy__feature-eyebrow {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-master-sets-anatomy__feature-name {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.page-master-sets-anatomy__feature-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.page-master-sets-anatomy__feature-qualifier {
  color: var(--muted);
  font-size: var(--text-12);
  font-style: italic;
  padding-top: var(--space-2);
  border-top: var(--border-width-thin) solid var(--border);
  margin-top: var(--space-2);
}

@media (max-width: 991px) {
  .page-master-sets-anatomy__features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-master-sets-anatomy__features { grid-template-columns: 1fr; }
}

.page-master-sets-rails__head,
.page-master-sets-plates__head,
.page-master-sets-numbering__head,
.page-master-sets-provenance__head { margin-bottom: var(--space-6); }


/* ============================================================
   32 · PAGES · FAQ family (root section already covered by §28)
   ============================================================ */

.page-faq-groups__lede,
.page-faq-hero__lede { margin-bottom: var(--space-4); }

.page-faq-contact-cta {
  background: var(--off-white);
  border-top: var(--border-width-thin) solid var(--border);
}

.page-faq-contact-cta__head { margin-bottom: var(--space-3); }


/* ============================================================
   33 · PAGES · ABOUT family
   ============================================================ */

/* Method steps — numbered list */
.page-about-method__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
  counter-reset: about-method-step;
}

.page-about-method__step {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}

.page-about-method__step-index {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
}

.page-about-method__step-eyebrow {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-about-method__step-heading {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.page-about-method__step-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.page-about-method__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--ink);
  color: var(--ink);
}

.page-about-method__cta:hover { background: var(--ink); color: var(--white); }

@media (max-width: 991px) {
  .page-about-method__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-about-method__steps { grid-template-columns: 1fr; }
}

/* Origin notes — narrative panels */
.page-about-origin__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.page-about-origin__note {
  padding: var(--space-5) 0;
  border-top: var(--border-width-thin) solid var(--border);
}

.page-about-origin__notes .page-about-origin__note:first-child { border-top: 0; padding-top: 0; }

.page-about-origin__note-eyebrow {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-about-origin__note-heading {
  font-size: var(--text-20);
  font-weight: 500;
  color: var(--ink);
  margin: var(--space-2) 0;
}

.page-about-origin__note-body {
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.6;
  max-width: 720px;
}

/* Values list */
.page-about-values__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.page-about-values__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--off-white);
  border: var(--border-width-thin) solid var(--border);
}

.page-about-values__eyebrow {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-about-values__heading {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.page-about-values__body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .page-about-values__list { grid-template-columns: 1fr; }
}

/* Conservation block */
.page-about-conservation {
  background: var(--off-white);
}

.page-about-conservation__statement {
  font-size: clamp(var(--text-18), 2.4vw, var(--text-24));
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  max-width: 760px;
  letter-spacing: -0.01em;
}

.page-about-conservation__clarifications {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.page-about-conservation__clarification {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--space-4);
  border-left: var(--border-width-medium) solid var(--earth-accent);
}

.page-about-conservation__clarification-label {
  color: var(--ink);
  font-weight: 500;
  font-size: var(--text-15);
}

.page-about-conservation__clarification-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

/* About CTA list */
.page-about-cta {
  background: var(--ink);
  color: var(--white);
}

.page-about-cta__lede {
  color: rgba(255, 255, 255, 0.75);
}

.page-about-cta__title {
  color: var(--white);
}

.page-about-cta__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.page-about-cta__item {
  background: rgba(255, 255, 255, 0.04);
  border: var(--border-width-thin) solid rgba(255, 255, 255, 0.12);
}

.page-about-cta__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--white);
  transition: background 200ms ease;
  height: 100%;
}

.page-about-cta__link:hover { background: rgba(255, 255, 255, 0.06); }

.page-about-cta__eyebrow {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-about-cta__label {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--white);
}

.page-about-cta__body {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-14);
  line-height: 1.55;
}

@media (max-width: 991px) {
  .page-about-cta__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-about-cta__list { grid-template-columns: 1fr; }
}


/* ============================================================
   34 · PAGES · LEARN family
   ============================================================ */

.page-learn-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.page-learn-topics__cell {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
}

.page-learn-topics__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  color: var(--ink);
  height: 100%;
  transition: background 200ms ease, border-color 200ms ease;
}

.page-learn-topics__link:hover { background: var(--off-white); }

.page-learn-topics__cell-eyebrow {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-learn-topics__cell-title {
  font-size: var(--text-18);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.page-learn-topics__cell-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

/* Learn vs Data panel */
.page-learn-topics__lvd {
  margin-top: var(--space-10);
  padding: var(--space-8);
  background: var(--off-white);
  border-left: var(--border-width-accent) solid var(--earth);
}

.page-learn-topics__lvd-eyebrow {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-learn-topics__lvd-title {
  font-size: var(--text-20);
  font-weight: 500;
  margin: var(--space-2) 0;
  color: var(--ink);
}

.page-learn-topics__lvd-body {
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.6;
  max-width: 720px;
}

.page-learn-topics__lvd-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

@media (max-width: 991px) {
  .page-learn-topics__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-learn-topics__grid { grid-template-columns: 1fr; }
  .page-learn-topics__lvd { padding: var(--space-5); }
}

/* Learn process steps — numbered list */
.page-learn-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.page-learn-process__step {
  background: var(--white);
  border-top: var(--border-width-accent) solid var(--earth-accent);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-learn-process__step-index {
  font-size: var(--text-24);
  font-weight: 300;
  color: var(--earth-accent);
  letter-spacing: -0.02em;
}

.page-learn-process__step-eyebrow {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-learn-process__step-heading {
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.page-learn-process__step-body {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.55;
}

.page-learn-process__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

@media (max-width: 991px) {
  .page-learn-process__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-learn-process__steps { grid-template-columns: 1fr; }
}


/* ============================================================
   35 · PAGES · DATA family
   ============================================================ */

/* Explainer steps (similar layout to learn process) */
.page-data-explainer__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.page-data-explainer__step {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-data-explainer__step-index {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
}

.page-data-explainer__step-eyebrow {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-data-explainer__step-heading {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.page-data-explainer__step-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

@media (max-width: 991px) {
  .page-data-explainer__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-data-explainer__steps { grid-template-columns: 1fr; }
}

/* Data lookup module */
.page-data-lookup {
  background: var(--off-white);
}

.page-data-lookup__form,
.page-data-lookup__placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  max-width: 720px;
}

.page-data-lookup__label,
.page-data-lookup__label-text {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-data-lookup__input,
.page-data-lookup__input--disabled {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--border-mid);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-14);
  color: var(--ink);
}

.page-data-lookup__input:focus {
  outline: none;
  border-color: var(--earth);
}

.page-data-lookup__input--disabled,
.page-data-lookup__input[disabled] {
  background: var(--disabled);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.page-data-lookup__submit {
  align-self: flex-start;
  display: inline-flex;
  padding: var(--space-3) var(--space-6);
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
}

.page-data-lookup__submit:hover { background: var(--earth-hover); }

.page-data-lookup__disabled-message {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.55;
  margin-top: var(--space-2);
}

.page-data-lookup__format-note {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.6;
  margin-top: var(--space-4);
  max-width: 720px;
}

.page-data-lookup__format-note strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Record example table */
.page-data-record-example__table-wrap {
  overflow-x: auto;
  margin-top: var(--space-6);
}

.page-data-record-example__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-13);
}

.page-data-record-example__row {
  border-bottom: var(--border-width-thin) solid var(--border);
}

.page-data-record-example__col-field,
.page-data-record-example__col-value,
.page-data-record-example__col-note {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 500;
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--off-white);
  border-bottom: var(--border-width-thin) solid var(--border);
}

.page-data-record-example__field,
.page-data-record-example__value,
.page-data-record-example__note {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
  line-height: 1.55;
}

.page-data-record-example__field {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.page-data-record-example__value {
  color: var(--ink);
}

.page-data-record-example__note {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-13);
}

.page-data-record-example__disclaimer {
  color: var(--muted);
  font-size: var(--text-12);
  margin-top: var(--space-4);
  font-style: italic;
}

.page-data-methods__head,
.page-data-notices__head { margin-bottom: var(--space-5); }

.page-data-notices {
  background: var(--off-white);
  border-top: var(--border-width-thin) solid var(--border);
}


/* ============================================================
   36 · PAGES · COLLECTORS LIST family
   ============================================================ */

.page-collectors-list-paths__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.page-collectors-list-paths__list > * {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-collectors-list-paths__item-eyebrow {
  color: var(--earth-accent);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-collectors-list-paths__item-name {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.page-collectors-list-paths__item-body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.page-collectors-list-paths__item-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

@media (max-width: 991px) {
  .page-collectors-list-paths__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-collectors-list-paths__list { grid-template-columns: 1fr; }
}

/* Collectors List signup form / disabled state */
.page-collectors-list-form {
  background: var(--off-white);
}

.page-collectors-list-form__placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  max-width: 560px;
}

.page-collectors-list-form__label-text {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-collectors-list-form__input,
.page-collectors-list-form__input--disabled {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--border-mid);
  background: var(--white);
  font-size: var(--text-14);
  color: var(--ink);
}

.page-collectors-list-form__input--disabled,
.page-collectors-list-form__input[disabled] {
  background: var(--disabled);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.page-collectors-list-form__disabled-message {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.55;
  margin-top: var(--space-2);
}

.page-collectors-list-form__privacy-note {
  color: var(--muted);
  font-size: var(--text-12);
  margin-top: var(--space-4);
  font-style: italic;
}


/* ============================================================
   37 · PAGES · INTERNATIONAL family + intl-sec / intl-card primitives
   ============================================================ */

/* Shared section wrapper used across international-* sections */
.intl-sec,
.nom-sec {
  padding: var(--space-12) 0;
}

.intl-sec--paper,
.nom-sec--paper {
  background: var(--off-white);
}

.intl-sec--paper-warm,
.nom-sec--paper-warm {
  background: #EDE6D5;
}

.intl-sec__head,
.nom-sec__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
  margin: 0 0 var(--space-6);
}

.intl-sec__rule,
.nom-sec__rule {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.intl-sec__title,
.nom-sec__title {
  font-size: clamp(var(--text-24), 3vw, var(--text-40));
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}

.intl-sec__lede,
.nom-sec__lede {
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.6;
  max-width: 640px;
}

/* International hero (CL-046 renamed surface — uses the .international-
   prefix, replacing the legacy EU-scoped namespace) */
.international-hero,
.nominate-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: var(--deep-tint);
  overflow: hidden;
}

.international-hero__bg,
.nominate-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  pointer-events: none;
}

.international-hero__inner,
.nominate-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 880px;
}

.international-hero__eyebrow,
.nominate-hero__eyebrow {
  color: var(--deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.international-hero__title,
.nominate-hero__title {
  font-size: clamp(var(--text-32), 5vw, var(--text-56));
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 300;
  color: var(--ink);
  margin: 0;
}

.international-hero__lede,
.nominate-hero__lede {
  color: var(--muted);
  font-size: clamp(var(--text-15), 1.4vw, var(--text-18));
  line-height: 1.6;
  max-width: 640px;
}

.international-hero__ctas,
.nominate-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.international-hero__cta--primary,
.nominate-hero__cta--primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-6);
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
}

.international-hero__cta--primary:hover,
.nominate-hero__cta--primary:hover {
  background: var(--earth-hover);
}

.international-hero__cta--secondary,
.nominate-hero__cta--secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--ink);
  border: var(--border-width-thin) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.international-hero__cta--secondary:hover,
.nominate-hero__cta--secondary:hover {
  background: var(--ink);
  color: var(--white);
}

/* Shared "intl-card" / "nom-card" tile primitive */
.international-status__grid,
.international-opps__grid,
.nominate-guidelines__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.international-status__card,
.international-opps__card {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.intl-card__num,
.nom-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth-accent);
}

.intl-card__title,
.nom-card__title {
  font-size: var(--text-18);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.intl-card__body,
.nom-card__body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

@media (max-width: 991px) {
  .international-status__grid,
  .international-opps__grid,
  .nominate-guidelines__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .international-status__grid,
  .international-opps__grid,
  .nominate-guidelines__grid { grid-template-columns: 1fr; }
}

/* International roadmap — numbered milestone list */
.international-roadmap__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.international-roadmap__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: var(--border-width-thin) solid var(--border);
}

.international-roadmap__list .international-roadmap__item:first-child {
  border-top: 0;
}

.international-roadmap__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-13);
  color: var(--earth-accent);
  letter-spacing: 0.14em;
  width: 56px;
}

.international-roadmap__label {
  color: var(--ink);
  font-size: var(--text-15);
  line-height: 1.55;
}

/* International FAQ list (no <details>; static expanded layout) */
.international-faq__list,
.nominate-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
  border-top: var(--border-width-thin) solid var(--border);
  max-width: 800px;
}

.international-faq__item,
.nominate-faq__item {
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-thin) solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.international-faq__q,
.nominate-faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
}

.international-faq__q-icon,
.nominate-faq__q-icon {
  font-family: var(--font-mono);
  color: var(--earth-accent);
  flex-shrink: 0;
}

.international-faq__a,
.nominate-faq__a {
  color: var(--muted);
  font-size: var(--text-15);
  line-height: 1.65;
  max-width: 720px;
}

.international-faq__a p,
.nominate-faq__a p { margin: 0 0 var(--space-2); }

/* International — cross-link to Nominate */
.international-nominate {
  background: var(--earth);
  color: var(--white);
}

.international-nominate__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}

.international-nominate .intl-sec__rule { color: rgba(255, 255, 255, 0.7); }
.international-nominate .intl-sec__title { color: var(--white); }
.international-nominate .intl-sec__lede { color: rgba(255, 255, 255, 0.85); }

.international-nominate__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--earth-accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth-accent);
  align-self: flex-start;
}

.international-nominate__cta:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}


/* ============================================================
   38 · PAGES · NOMINATE family + nominate-process + Founding Archive
   ============================================================ */

.nominate-process__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.nominate-process__step {
  background: var(--white);
  border-top: var(--border-width-accent) solid var(--earth-accent);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nominate-process__step .nom-card__num { color: var(--earth-accent); }

.nominate-process__step-title {
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.nominate-process__caveat {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--off-white);
  border-left: var(--border-width-medium) solid var(--earth-accent);
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .nominate-process__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nominate-process__list { grid-template-columns: 1fr; }
}

.nominate-why__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}

.nominate-why__lede {
  color: var(--muted);
  font-size: var(--text-16);
  line-height: 1.6;
}

.nominate-why__support {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.6;
  padding-left: var(--space-4);
  border-left: var(--border-width-medium) solid var(--earth-accent);
}

/* Founding Archive cross-link block */
.nominate-founding {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-12) 0;
}

.nominate-founding__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 760px;
}

.nominate-founding .nom-sec__rule { color: rgba(255, 255, 255, 0.7); }
.nominate-founding .nom-sec__title { color: var(--white); }
.nominate-founding__body { color: rgba(255, 255, 255, 0.8); font-size: var(--text-15); line-height: 1.6; }

.nominate-founding__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.nom-cta--primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-6);
  background: var(--earth-accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth-accent);
}

.nom-cta--primary:hover {
  background: var(--white);
  border-color: var(--white);
}

.nom-cta--secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid rgba(255, 255, 255, 0.5);
}

.nom-cta--secondary:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}


/* ============================================================
   39 · SHARED FORM PRIMITIVE — .he-form
   Used by sections/international-waitlist-form.liquid and
   sections/nominate-form.liquid.
   ============================================================ */

.he-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
  max-width: 720px;
}

.he-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.he-form__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.he-form__optional {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--text-12);
  color: var(--muted);
  margin-left: 6px;
}

.he-form__hint {
  color: var(--muted);
  font-size: var(--text-12);
  line-height: 1.5;
}

.he-form__input,
.he-form__select,
.he-form__textarea {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--border-mid);
  background: var(--white);
  font-size: var(--text-15);
  color: var(--ink);
  width: 100%;
  font-family: var(--font-sans);
}

.he-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.he-form__input:focus,
.he-form__select:focus,
.he-form__textarea:focus {
  outline: none;
  border-color: var(--earth);
}

.he-form__input[disabled],
.he-form__select[disabled],
.he-form__textarea[disabled] {
  background: var(--disabled);
  color: var(--disabled-text);
  cursor: not-allowed;
}

/* Chip group */
.he-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0;
}

.he-form__chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.he-form__chip input[type="checkbox"],
.he-form__chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.he-form__chip-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border-mid);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.he-form__chip input:checked + .he-form__chip-label {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.he-form__chip input:focus-visible + .he-form__chip-label {
  outline: 2px solid var(--earth-accent);
  outline-offset: 2px;
}

/* Radio group */
.he-form__radios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.he-form__radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.he-form__radio input[type="radio"] {
  accent-color: var(--earth);
  width: 18px;
  height: 18px;
}

.he-form__radio-label {
  font-size: var(--text-14);
  color: var(--ink);
  line-height: 1.5;
}

/* Checkbox group */
.he-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.he-form__check input[type="checkbox"] {
  accent-color: var(--earth);
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.he-form__check-body {
  font-size: var(--text-14);
  color: var(--ink);
  line-height: 1.55;
}

/* Promises list */
.he-form__promises {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--off-white);
  border-left: var(--border-width-medium) solid var(--earth-accent);
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.55;
  list-style: none;
}

.he-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
  transition: background 200ms ease;
  cursor: pointer;
  min-height: 44px;
}

.he-form__submit:hover { background: var(--earth-hover); }

.he-form__submit[disabled] {
  background: var(--disabled);
  border-color: var(--disabled);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.he-form__success {
  padding: var(--space-6);
  background: var(--earth-light);
  border: var(--border-width-thin) solid var(--earth);
  color: var(--earth);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.he-form__success-title {
  font-family: var(--font-sans);
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--earth);
  margin: 0;
}

@media (max-width: 600px) {
  .he-form__submit {
    width: 100%;
  }
}


/* ============================================================
   40 · CTA SECTIONS — page-X-cta variants
   ============================================================ */

.page-gifts-cta,
.page-editions-cta,
.page-master-sets-cta,
.page-learn-cta,
.page-data-cta {
  background: var(--ink);
  color: var(--white);
}

.page-gifts-cta__title,
.page-editions-cta__title,
.page-master-sets-cta__title,
.page-learn-cta__title,
.page-data-cta__title {
  color: var(--white);
}

.page-gifts-cta__lede,
.page-editions-cta__lede,
.page-master-sets-cta__lede,
.page-learn-cta__lede,
.page-data-cta__lede {
  color: rgba(255, 255, 255, 0.75);
}

/* Gifts cart note callout */
.page-gifts-cart-note {
  background: var(--off-white);
  border-top: var(--border-width-thin) solid var(--border);
  border-bottom: var(--border-width-thin) solid var(--border);
}


/* ============================================================
   41 · PDP · SHARED LAYOUT (pdp-main · pdp-main__grid · below)
   Used by Archive, Premiere, and Master Set PDPs.
   ============================================================ */

/* PDP-PARITY-2A-R2 · Ported from design-specs/legacy-html/product-half-dome.html
   .pdp-main rule: padding: 32px 0 80px; background: var(--paper);
   .pdp-main__grid: grid 1.2fr/1fr, gap 64px, align-items: start.
   Mobile: single column, gap 32px, padding 48px 0 120px. */
.pdp-main,
.pdp-main--premiere,
.pdp-main--master-set {
  /* PDP-HERO-PADDING-AUDIT-1 · Desktop padding-top 32 → 64 to match
     legacy .pdp-main Rule 1 !important (line 1563-1566 of
     product-half-dome.html): `padding: 64px 0 80px !important`. Rule 2
     non-important (line 2736) says 32px 0 80px but !important wins.
     Horizontal padding 0 and bottom 80 already match. */
  padding: 64px 0 80px;
  background: #F4F0E5;
}

@media (max-width: 767px) {
  .pdp-main,
  .pdp-main--premiere,
  .pdp-main--master-set {
    padding: 48px 0 120px;
  }
}

/* PDP-GALLERY-1C + 1D · Desktop geometry LOCK + centering fix.
   Replaces flexible minmax(0, 1.2fr) / minmax(0, 1fr) with fixed pixel
   columns so the gallery and buy panel can't drift apart on wide
   screens. PDP-GALLERY-1D adds explicit padding-left/right: 0 to
   override any asymmetric inherited padding from the `.container`
   class (defined in layout/theme.liquid, out of CSS-only scope) — that
   asymmetry was making the 1170px grid sit left-of-center on wide
   viewports. With padding zeroed and `margin-left/right: auto`, the
   grid is now symmetric in the viewport.
   Computed at ≥1200px:
     gallery col width  = 608px  (matches .pdp-gallery__main max-width)
     column-gap         = 62px
     buy panel col      = 500px  (matches .pdp-buy__sticky max-width)
     total grid width   = 1170px (centered with auto margins)
     left margin = right margin = (viewport - 1170) / 2
   Below 1200px the grid collapses to single column (locked 1170 can't
   fit narrower viewports) and restores padding-inline: 16px gutter for
   mobile/tablet. */
.pdp-main__grid {
  display: grid;
  grid-template-columns: 608px 500px;
  column-gap: 62px;
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  align-items: start;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  .pdp-main__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    gap: 32px;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Full-width content rows below the hero — PDP-PARITY-2J-B WRAPPER FIX.
   Previously had margin-top + gap that created transparent gutters between
   every lower-section band, breaking the bg rhythm visually ("shifted
   bands"). Each section now stacks adjacent edge-to-edge; per-section
   padding handles internal vertical breathing room; per-section
   `border-top: 1px solid var(--line)` provides the visible section
   boundary. No flex/grid gap, no margin-top.
   ============================================================ */
.pdp-main__below {
  margin-top: 0;
  display: block;
}


/* ============================================================
   41b · PDP · BREADCRUMB — PDP-PARITY-2A-R2-AUDIT HTML-DERIVED
   Renders above the .pdp-hero band. Mono uppercase trail:
   ARCHIVE › WORLD › SUBWORLD › TITLE (last is .is-current).
   ============================================================ */

.pdp-breadcrumb {
  padding: 20px 0 0;
  background: #F4F0E5;
}

/* PDP-PARITY-2A.1 · breadcrumb font switched from mono to Inter per spec. */
.pdp-breadcrumb nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', var(--font-sans), -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
}

.pdp-breadcrumb nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease;
}

.pdp-breadcrumb nav a:hover {
  color: var(--ink);
}

.pdp-breadcrumb nav .is-current {
  color: var(--ink);
}

@media (max-width: 600px) {
  .pdp-breadcrumb {
    padding: 16px 0 0;
  }
  .pdp-breadcrumb nav {
    font-size: 10px;
    letter-spacing: 0.14em;
    gap: 6px;
  }
}


/* ============================================================
   42 · PDP · HERO (pdp-hero) — PDP-PARITY-2A-R2 HTML-DERIVED IMPLEMENTATION
   Full-width band ABOVE the gallery+buy grid. Ported from HTML reference
   product-half-dome.html. Anatomy: archive-id pill (top-right) +
   container .pdp-hero__inner (grid 1.2fr/1fr) where left = head (eyebrow +
   title + lede) and right = trophy chip.
   ============================================================ */

/* PDP-PARITY-2J-C · CASCADE FIX (specificity boost) preserved.
   Earlier 2J-B versions failed because he-design-system.css has a global
   `[data-world="earth"|"deep"|"space"] { background-color: var(--world-bg) }`
   rule (line 298+) where --world-bg for Earth resolves to #FFFFFF. That
   selector matched the hero `<section>` at specificity 0,1,0 — same as the
   prior `.pdp-hero` rule. Because he-design-system.css loads AFTER
   application.css, the global rule won source-order ties and the hero
   rendered white. Specificity raised to 0,2,0 via attribute-existence
   selector `.pdp-hero[data-world]` so it beats `[data-world="earth"]` (0,1,0)
   regardless of source order.

   PDP-PARITY-2J-D · VALUE CORRECTION. Hero bg + padding now match the
   operator-approved canonical values: `#F4F0E5` paper-white (PARITY-GLOBAL-2B
   locked paper bg for non-SPACE/non-DEEP contexts) and `padding: 64px` on all
   sides desktop. Mobile reduces to `padding: 32px 16px` for narrow viewports.

   Trophy card unchanged — `[data-world="earth"]` doesn't match it (the
   data-world attribute lives only on the hero element, not the trophy chip
   child). Product main band unchanged — `.pdp-main` has no data-world attr.
   Lower sections (Story/Trophy/Quality/etc.) unchanged. */
.pdp-hero,
.pdp-hero--tee,
.pdp-hero--print,
.pdp-hero--complete,
.pdp-hero--premiere,
.pdp-hero--master,
.pdp-hero[data-world],
.pdp-hero--tee[data-world],
.pdp-hero--print[data-world],
.pdp-hero--complete[data-world],
.pdp-hero--premiere[data-world],
.pdp-hero--master[data-world] {
  position: relative;
  background: #F4F0E5;
  /* PDP-HERO-PADDING-AUDIT-1 · Desktop padding matches legacy HTML
     reference (design-specs/legacy-html/product-half-dome.html):
       .pdp-hero { padding-top: var(--hero-pdp-pt) !important;
                   padding-bottom: 0 !important; }   (line 1530-1533)
       .pdp-hero { padding: 40px 0 0; }              (line 2663, secondary)
     where --hero-pdp-pt resolves to 40px at desktop (line 1402).
     Net effective desktop computed value: padding 40px 0 0 0.
     Horizontal padding is 0 — legacy hero has zero side padding;
     gutters come from the inner .container { padding: 0 24px }. */
  padding: 40px 0 0;
  overflow: hidden;
}

@media (max-width: 991px) {
  .pdp-hero,
  .pdp-hero--tee,
  .pdp-hero--print,
  .pdp-hero--complete,
  .pdp-hero--premiere,
  .pdp-hero--master,
  .pdp-hero[data-world],
  .pdp-hero--tee[data-world],
  .pdp-hero--print[data-world],
  .pdp-hero--complete[data-world],
  .pdp-hero--premiere[data-world],
  .pdp-hero--master[data-world] {
    /* PDP-HERO-PADDING-AUDIT-1 · Mobile matches legacy --hero-pdp-pt:
       32px at ≤1024 viewports (line 1418), padding-bottom !important: 0
       (line 1532). Horizontal sides: 0 — legacy hero has no side
       padding at any viewport; .container inner provides the 24px
       gutter. */
    padding: 32px 0 0;
  }
}

/* PDP-PARITY-2A.1 · .pdp-hero__archive-id rule removed (markup no longer
   rendered in the hero per brief; Archive ID remains visible in the
   buy panel's .pdp-buy__edition line + provenance section). */

/* PDP-GALLERY-1C + 1D · Hero grid same 608/62/500/1170 lock + centering
   fix. Padding-left/right: 0 cancels any asymmetric inherited padding
   from the `.container` class (defined in layout/theme.liquid). Both
   grids share identical topology so their right edges coincide at the
   same x-coordinate in the viewport — trophy chip's left edge keeps
   coinciding with the buy panel's left edge (IMPL-1B Fix #21
   preserved). Hero retains align-items: end + vertical padding. Below
   1200px the hero stacks single column with 16px inline gutter. */
.pdp-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 608px 500px;
  column-gap: 62px;
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  padding-top: 36px;
  padding-bottom: 28px;
  align-items: end;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  .pdp-hero__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    gap: 20px;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    padding-bottom: 20px;
  }
}

.pdp-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pdp-hero__row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.pdp-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
}

.pdp-hero__title {
  margin: 0 0 20px 0;
  font-family: var(--font-sans);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.pdp-hero__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
}

/* PDP-PARITY-2A.1 · subtitle/lede 20px Inter per brief spec. */
.pdp-hero__lede {
  margin: 0;
  font-family: 'Inter', var(--font-sans), -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  max-width: 58ch;
}

/* PDP-PARITY-2A.1 · Trophy chip — exact CSS per brief spec.
   Mono uppercase .18em label · sans 500 -.01em tnum value · serif italic
   16px explainer @ opacity .82. World-driven accent on the label color.
   PDP-PARITY-2J-B · Background changed from rgba(255,255,255,0.5) (semi-
   transparent white, appeared LIGHTER than paper) to rgba(14,14,12,.04)
   per legacy HTML reference line 5918 (slight dark-tint overlay; card
   appears SLIGHTLY DARKER than the paper parent, matching the filled-
   outlined card pattern in design-specs/legacy-html/product-half-dome.html). */
/* PDP-BUY-PANEL-IMPL-1B / Fix #21 · Trophy card right-aligned + width-
   capped at 500px so its left edge sits at the same x-coordinate as the
   buy-panel column's left edge. The hero grid (.pdp-hero__inner) shares
   the same `1.2fr / 1fr / gap: 64px` topology as .pdp-main__grid below,
   so a 500px-capped right-aligned chip in the hero's 1fr column has its
   left edge at the same x as a 500px-capped right-aligned buy panel in
   pdp-main's 1fr column. Mobile drops the cap so the chip stays fluid in
   the single-column stacked layout. No negative margins, no absolute
   positioning. */
.pdp-hero__trophy-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  background: rgba(14, 14, 12, 0.04);
  border: 1px solid rgba(14, 14, 12, 0.10);
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: 0;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .pdp-hero__trophy-chip {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 991px) {
  .pdp-hero__trophy-chip {
    margin-top: 12px;
  }
}

.pdp-hero__trophy-label {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--earth) !important;
  font-weight: 500 !important;
}

.pdp-hero__trophy-value {
  font-family: var(--font-sans) !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: inherit !important;
  line-height: 1.15 !important;
  font-feature-settings: 'tnum' 1 !important;
  margin: 6px 0 0 !important;
}

.pdp-hero__trophy-explainer {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: inherit !important;
  opacity: 0.82 !important;
  margin: 12px 0 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* World-driven trophy label accent. */
.pdp-hero[data-world="deep"]  .pdp-hero__trophy-label { color: var(--deep, #0E2340) !important; }
.pdp-hero[data-world="space"] .pdp-hero__trophy-label { color: var(--space-mars, #C1440E) !important; }
.pdp-hero[data-world="space"][data-subworld="lunar"] .pdp-hero__trophy-label { color: var(--space-moon, #E8D9C4) !important; }

/* Variant accent stripes (Premiere / Master Set tints) */
.pdp-hero--premiere .pdp-hero__title { color: var(--ink); }
.pdp-hero--premiere .pdp-hero__eyebrow { color: var(--earth-accent); }
.pdp-hero--master .pdp-hero__eyebrow { color: var(--earth); }

.pdp-hero__plate-count {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ============================================================
   43 · PDP · GALLERY (pdp-gallery + variants)
   ============================================================ */

/* PDP-GALLERY-1 · gallery shell · HE_PDP_GALLERY_SPEC_v1 §1.0
   Vertical flex column of main image + thumb strip + caption. */
.pdp-gallery,
.pdp-gallery--premiere,
.pdp-gallery--master {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  position: relative;
}

/* PDP-GALLERY-1 · main image · spec §1.2 + operator correction
   4:5 aspect (608×760 desktop · fluid below). Modifier class drives bg.
   `max-width: 608px` caps the image on desktop where the gallery column
   is wider; on mobile (≤991px single-column stack) the parent container
   is narrower than 608px so width: 100% takes effect — no media query
   needed for the cap. */
.pdp-gallery__main {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 608px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F4F0E5; /* default fallback bg if no modifier applied */
}

/* PDP-GALLERY-1 · modifier backgrounds · spec §1.3
   JS swaps the modifier class on click; CSS picks the bg. */
.pdp-gallery__main--dark    { background: #0C0C0C; }
.pdp-gallery__main--natural { background: #1A1A1A; }
.pdp-gallery__main--paper   { background: var(--paper-2, #F2EEE6); }

.pdp-gallery__main img,
.pdp-gallery__main video,
.pdp-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 120ms ease;
}

.pdp-gallery__main img.is-swapping,
.pdp-gallery__media-img.is-swapping {
  opacity: 0;
}

/* Legacy per-figure modifiers kept for the product.media fallback path
   (which still uses .pdp-gallery__media wrappers). */
.pdp-gallery__media--dark    { background: #0C0C0C; }
.pdp-gallery__media--natural { background: #1A1A1A; }
.pdp-gallery__media--paper   { background: var(--paper-2, #F2EEE6); }

/* PDP-GALLERY-1 · caption · spec §1.5
   Mono uppercase 12px 0.16em, swap-fades with the image. */
/* PDP-GALLERY-1B-SCOPE-LOCK · Inline caption hidden visually per operator
   request — "no visible text under thumbnails". Markup + JS reference
   + accessibility labels are intact: the image still carries its
   composed alt text (terrain + media label + caption), each thumb
   button still carries `aria-label` with caption text, and the lightbox
   caption (.pdp-gallery__lightbox-caption — a different element) is
   unaffected. The element is `display: none` rather than visually-
   hidden because the redundant info is already in alt + thumb labels;
   no AT announcement loss. */
.pdp-gallery__caption {
  display: none;
}

.pdp-gallery__caption.is-swapping { opacity: 0; }
.pdp-gallery__caption[hidden] { display: none; }

/* PDP-GALLERY-1 · placeholder · spec §11.1
   Used when no v6 fields AND no product.media — gives the gallery column
   a visible state instead of collapsing. */
.pdp-gallery__main--placeholder {
  background: var(--paper-2, #F2EEE6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-gallery__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  padding: 24px;
}

.pdp-gallery__placeholder-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  text-align: center;
}

/* PDP-GALLERY-1 · thumb strip · spec §1.4 + operator correction
   Flex row with horizontal scroll-snap. Max-width 608px aligns the row
   with the main image's right edge so the thumbs sit visually flush
   under the 608px main image. Hides scrollbar across all major
   browsers. */
.pdp-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 608px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.pdp-gallery__thumbs::-webkit-scrollbar { display: none; }

/* PDP-GALLERY-1 · individual thumb · operator correction
   143×143 desktop (was 80×80) · 64×64 mobile. 4 thumbs × 143 + 3 × 8px
   gap = 596px fits inside the 608px max thumb row. With 3 thumbs (the
   current Archive Tee/Print/Complete trio) they sit left-aligned with
   trailing whitespace. flex: 0 0 143px prevents shrinking; if a future
   variant has 4+ thumbs that don't fit, horizontal scroll-snap kicks
   in automatically. */
.pdp-gallery__thumb {
  flex: 0 0 143px;
  width: 143px;
  height: 143px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: var(--paper-2, #F2EEE6);
  cursor: pointer;
  padding: 0;
  position: relative;
  scroll-snap-align: start;
  transition: border-color 120ms ease;
  overflow: hidden;
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-gallery__thumb:hover,
.pdp-gallery__thumb.is-active,
.pdp-gallery__thumb[aria-selected="true"] {
  border-color: var(--ink);
}

.pdp-gallery__thumb:focus-visible {
  outline: 2px solid var(--earth-accent, var(--earth, #1C3829));
  outline-offset: 2px;
  border-color: var(--ink);
}

/* Legacy product.media fallback path uses nested .pdp-gallery__thumb-inner
   button. Preserved here for non-backfilled product PDPs (Crater Lake /
   Olympus Mons / Tycho) that still go through the fallback markup. */
.pdp-gallery__thumb-inner {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.pdp-gallery__thumb-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 540px) {
  /* PDP-GALLERY-1 · mobile thumbs 64×64 · spec §1.4 */
  .pdp-gallery__thumb { flex: 0 0 64px; width: 64px; height: 64px; }
}

/* PDP-GALLERY-1 · prefers-reduced-motion · spec §4.6
   Users with motion sensitivity get instant swaps (no fades). */
@media (prefers-reduced-motion: reduce) {
  .pdp-gallery__main img,
  .pdp-gallery__media img,
  .pdp-gallery__caption,
  .pdp-gallery__thumb,
  .pdp-gallery__main-arrow,
  .pdp-gallery__thumbs-arrow,
  .pdp-gallery__lightbox,
  .pdp-gallery__lightbox-arrow {
    transition: none;
  }
  .pdp-gallery__thumbs { scroll-behavior: auto; }
}

/* PDP-GALLERY-1 (carousel pass) · Main image prev/next overlay arrows.
   Rendered only when total media count > 1 (Liquid-gated). Position
   absolute against `.pdp-gallery__main` which is position: relative.
   Sit at vertical center of the main image, near the left/right edges.
   Semi-transparent white pill so they read on both dark and paper
   backgrounds without obscuring detail. */
.pdp-gallery__main-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  color: var(--ink, #0E0E0C);
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
  opacity: 0.85;
}

.pdp-gallery__main-arrow:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.pdp-gallery__main-arrow:focus-visible {
  outline: 2px solid var(--earth-accent, var(--earth, #1C3829));
  outline-offset: 2px;
  opacity: 1;
}

.pdp-gallery__main-arrow--prev { left: 12px; }
.pdp-gallery__main-arrow--next { right: 12px; }

@media (max-width: 540px) {
  .pdp-gallery__main-arrow { width: 40px; height: 40px; }
  .pdp-gallery__main-arrow--prev { left: 8px; }
  .pdp-gallery__main-arrow--next { right: 8px; }
}

/* PDP-GALLERY-1 (carousel pass) · Thumb-strip overflow wrap.
   The strip and its prev/next overflow arrows live as flex siblings in
   `.pdp-gallery__thumbs-wrap`. Arrows are `hidden` by default; JS
   toggles based on the strip's scrollLeft state. Arrows are smaller
   than the main-image arrows and sit OUTSIDE the strip (no overlap
   with thumbs). max-width: 608px on the wrap keeps it aligned to the
   main image width. */
.pdp-gallery__thumbs-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 608px;
}

.pdp-gallery__thumbs-wrap .pdp-gallery__thumbs {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.pdp-gallery__thumbs-arrow {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2, #F2EEE6);
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink, #0E0E0C);
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 120ms ease;
}

.pdp-gallery__thumbs-arrow:hover { border-color: var(--ink, #0E0E0C); }

.pdp-gallery__thumbs-arrow:focus-visible {
  outline: 2px solid var(--earth-accent, var(--earth, #1C3829));
  outline-offset: 2px;
  border-color: var(--ink, #0E0E0C);
}

.pdp-gallery__thumbs-arrow[hidden] { display: none; }

@media (max-width: 540px) {
  .pdp-gallery__thumbs-arrow { flex: 0 0 28px; width: 28px; height: 28px; }
}

/* PDP-GALLERY-1 (carousel pass) · Gallery position counter "1/3" below
   the thumb row. Mono 12px right-aligned with subdued ink-2 color so
   it reads as supplementary info, not a heading. Rendered only when
   total > 1. aria-live polite announces position changes to AT. */
.pdp-gallery__counter {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  text-align: right;
  line-height: 1.5;
  max-width: 608px;
}

.pdp-gallery__counter-sep {
  margin: 0 2px;
}

/* PDP-GALLERY-1 (carousel pass) · Lightbox prev/next arrows. Larger
   than main-image arrows so they're easy to tap. Positioned at the
   left/right edges of the dialog. Same focus-visible pattern as the
   close button. */
.pdp-gallery__lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.pdp-gallery__lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.60);
}

.pdp-gallery__lightbox-arrow:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.pdp-gallery__lightbox-arrow--prev { left: 16px; }
.pdp-gallery__lightbox-arrow--next { right: 16px; }

@media (max-width: 540px) {
  .pdp-gallery__lightbox-arrow { width: 40px; height: 40px; }
  .pdp-gallery__lightbox-arrow--prev { left: 8px; }
  .pdp-gallery__lightbox-arrow--next { right: 8px; }
}

/* PDP-GALLERY-1 (carousel pass) · Lightbox counter "1/3" below caption
   inside the dialog content. Same mono treatment as inline counter but
   on dark bg (white-72%). */
.pdp-gallery__lightbox-counter {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.5;
}

/* PDP-GALLERY-1 (lightbox pass) · Main image trigger button.
   Resets default <button> chrome so the wrapper is visually invisible —
   only the inner <img> is rendered. `cursor: zoom-in` conveys the
   click-to-enlarge affordance. Focus outline appears on keyboard nav. */
.pdp-gallery__main-trigger {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
}

.pdp-gallery__main-trigger:focus-visible {
  outline: 2px solid var(--earth-accent, var(--earth, #1C3829));
  outline-offset: -2px;
}

/* PDP-GALLERY-1 (lightbox pass) · Modal overlay shown on main image click.
   role="dialog" + aria-modal="true" + accessible close button. No
   advanced pan/zoom — just a larger view of the currently selected
   gallery image. Hidden by default via the `hidden` attribute.

   Scroll lock applied to <body> while open (body.has-pdp-lightbox-open).
   iOS Safari note: `overflow: hidden` on body works for most cases; if
   stricter touchmove containment becomes needed, swap to the
   `position: fixed; top: -scrollY` pattern in a follow-up. */
.pdp-gallery__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 64px 24px 32px;
  box-sizing: border-box;
}

.pdp-gallery__lightbox[hidden] { display: none; }

.pdp-gallery__lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.pdp-gallery__lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.60);
}

.pdp-gallery__lightbox-close:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.pdp-gallery__lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  max-height: 100%;
}

.pdp-gallery__lightbox-image {
  display: block;
  max-width: 92vw;
  max-height: calc(92vh - 96px);
  object-fit: contain;
  background: var(--paper-2, #F2EEE6);
}

.pdp-gallery__lightbox-caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  max-width: 80ch;
  line-height: 1.5;
}

.pdp-gallery__lightbox-caption:empty { display: none; }

body.has-pdp-lightbox-open { overflow: hidden; }

@media (max-width: 540px) {
  .pdp-gallery__lightbox { padding: 56px 12px 16px; }
  .pdp-gallery__lightbox-close { top: 8px; right: 8px; width: 36px; height: 36px; }
  .pdp-gallery__lightbox-image { max-height: calc(92vh - 80px); }
}


/* ============================================================
   44 · PDP · BUY PANEL (pdp-buy) + buy-panel snippet + buy-button
        + format-selector + sticky-atc
   ============================================================ */

/* PDP-PARITY-2A-R2 · ported from HTML reference: .pdp-buy is now
   position:relative and .pdp-buy__sticky is the inner sticky container.
   Removes the panel chrome (border + padding + bg) — HTML reference shows
   the buy column without a frame; it sits directly on the paper background
   of .pdp-main. Padding/border/bg removed so the buy column reads as part
   of the editorial page rather than a card. */
.pdp-buy,
.pdp-buy--premiere,
.pdp-buy--master {
  position: relative;
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #8 + Fix #18 · Buy panel column constrained
   to 500px on desktop. All children (head, format selector, variant
   picker, spec microline, accordions, ATC, post-CTA microcopy) inherit
   the cap because they live inside this sticky wrapper. Fix #18 right-
   aligns the buy panel inside its 1fr grid column via `margin-left: auto`
   so the buy panel's right edge coincides with the right edge of the
   `.pdp-main__grid` column — which is the same right edge that
   `.pdp-main__below` lower-section containers also use. This eliminates
   the visual ~16px gap that otherwise appeared between the buy-panel
   right edge and lower-section right edges. No negative margins, no
   absolute positioning, no section-file edits. Mobile drops the cap so
   the panel stays fluid below the 991px grid-collapse breakpoint —
   never causes horizontal scroll. */
.pdp-buy__sticky {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: 0;
}

@media (max-width: 991px) {
  .pdp-buy__sticky {
    position: static;
    gap: 20px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* .pdp-buy__head: price + format/archive-id eyebrow */
.pdp-buy__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* PDP-PARITY-2F · price tightened to v1.1 §2.3.2 spec: 32px sans 500 -0.01em
   (was 40px / -0.02em). Mobile drops to 28px so the head doesn't dominate. */
.pdp-buy__price {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

@media (max-width: 600px) {
  .pdp-buy__price { font-size: 28px; }
}

.pdp-buy__edition {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* .pdp-buy__group — every option group (Format / Size / Color). */
.pdp-buy__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pdp-buy__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 var(--space-2) 0;
  display: block;
}

.pdp-buy__label-value {
  color: var(--muted);
  margin-left: 6px;
}

/* Variant picker wrapper.
   PDP-BUY-PANEL-IMPL-1B / Fix #22 · gap 16 → 24 so the vertical spacing
   between SIZE and COLORWAY matches the .pdp-buy__sticky 24px gap that
   separates the format-selector group from the variants wrapper above.
   Result: equal visual spacing above SIZE and above COLORWAY. */
.pdp-buy__variants {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* SI-17-C: radios visually hidden; labels are the visible chips/swatches. */
.pdp-buy__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #9 · Sizes row fills the full 500px buy-panel
   column width with 6 buttons distributed evenly (flex:1 on each chip).
   No-wrap on desktop keeps the row single-line; mobile keeps no-wrap with
   smaller widths because the buy panel itself goes fluid below 991px. */
.pdp-buy__sizes {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}

/* Color swatch row. */
.pdp-buy__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #11 + #15 + #19 · Spec microline container
   64px tall, full buy-panel-column width, content centered both axes.
   Fix #19 stacks two child lines (Tee branch) via flex-direction column;
   single-line content (Print + Complete branches) still centers correctly
   because a single flex child also follows align-items: center. */
.pdp-buy__spec {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  line-height: 1.5;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--paper-2, #F2EEE6);
  border: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
}

.pdp-buy__spec-line {
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #9 · .pdp-size now flex:1 with auto width so
   6 size buttons distribute evenly across the 500px sizes row. Height stays
   56px. Active state still routed via .pdp-buy__radio:checked + sibling
   selector per Fix #3 (no static --active class). */
.pdp-size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #F4F0E5;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.pdp-size:hover { border-color: var(--ink); }

/* PDP-BUY-PANEL-IMPL-1B / Fix #3 · Selected size styling driven solely by
   the radio :checked state. Static .pdp-size--active class was removed
   from Liquid because it never updated after click, leaving the original
   first-rendered chip stuck-on. CSS sibling selector toggles correctly. */
.pdp-buy__radio:checked + .pdp-size {
  background: var(--ink);
  color: #F4F0E5;
  border-color: var(--ink);
}

.pdp-buy__radio:focus-visible + .pdp-size,
.pdp-buy__radio:focus-visible + .pdp-color {
  outline: 2px solid var(--earth-accent, #B8956A);
  outline-offset: 2px;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #10 · .pdp-color 36×36 (was 32×32). Round
   swatch + outlined selected state preserved. Active state still routed
   via .pdp-buy__radio:checked + sibling selector per Fix #3. */
.pdp-color {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
  position: relative;
  background: var(--ink);
  transition: transform 150ms ease, outline-color 150ms ease;
}

/* Inner span receives the swatch color from data-color-value via Liquid;
   we map known color names to canonical hex below. Defaults to ink. */
.pdp-color__swatch {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: inherit;
}

/* Canonical swatch hex per color name (data-color-value attribute on label).
   Driven by the value text from the Color metaobject; no per-product CSS. */
.pdp-color[data-color-value="black"]            { background: #0C0C0C; }
.pdp-color[data-color-value="oxblood"]          { background: #4A2024; }
.pdp-color[data-color-value="oxblood black"]    { background: #2C1518; }
.pdp-color[data-color-value="dark grey"]        { background: #52514F; }
.pdp-color[data-color-value="dark gray"]        { background: #52514F; }
.pdp-color[data-color-value="forest"]           { background: #1C3829; }
.pdp-color[data-color-value="navy"]             { background: #0E2340; }
.pdp-color[data-color-value="charcoal"]         { background: #36383D; }

.pdp-color:hover { transform: scale(1.06); }

/* PDP-BUY-PANEL-IMPL-1B / Fix #3 · Selected color swatch styling driven
   solely by the radio :checked state (same root cause as .pdp-size). */
.pdp-buy__radio:checked + .pdp-color {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* PDP-COMPLETE-BUY-PANEL-IMPL-2 · Visually disabled state for size + color
   chips whose color×size combination has no available Shopify variant.
   Driven by theme.js Module C → `updateAvailability()` which toggles the
   radio's `disabled` property data-driven from the JSON island. Placed
   after the `:checked` rules so dim state wins when a chip is both
   checked and disabled (e.g. user picked a colorway that makes the
   currently-checked size invalid — the chip stays visually checked but
   reads as unavailable until they pick a valid size). Pointer-events
   blocked so clicking the label can't bypass the disabled radio. */
.pdp-buy__radio:disabled + .pdp-size,
.pdp-buy__radio:disabled + .pdp-color {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}
.pdp-buy__radio:disabled + .pdp-size {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  text-decoration: line-through;
}
.pdp-buy__radio:checked:disabled + .pdp-size {
  background: var(--ink);
  color: #F4F0E5;
  border-color: var(--ink);
}

/* Spec list (mono key/value rows under the price) */
.pdp-buy__spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: var(--border-width-thin) solid var(--border);
  padding-top: var(--space-4);
}

.pdp-buy__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

.pdp-buy__spec > *:last-child { color: var(--ink); }

.pdp-buy__conservation {
  font-size: var(--text-12);
  color: var(--muted);
  line-height: 1.55;
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--border);
}

.pdp-buy__collector {
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--border);
}

.pdp-buy__cross-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

/* ── buy-panel snippet (price + trust strip) ── */
.buy-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.buy-panel__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-sans);
}

/* PDP-COMPLETE-BUY-PANEL-IMPL-1 · Main PDP buy-panel price bumped from
   32px to 40px desktop across Tee / Print / Complete. Targets the
   inner span (the actual digits), not the wrapper — only this main
   price changes; product cards, cart prices, JSON-LD, and lower-page
   prices are unaffected. Mobile scales to 32px so the head doesn't
   dominate narrow viewports. */
.buy-panel__price-current {
  font-size: 40px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .buy-panel__price-current { font-size: 32px; }
}

.buy-panel__price-compare {
  font-family: var(--font-mono);
  font-size: var(--text-14);
  color: var(--muted);
  text-decoration: line-through;
}

.pdp-buy__price-was {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* PDP-COMPLETE-BUY-PANEL-IMPL-1 · Complete-only supporting hint line
   rendered below `.pdp-buy__edition`. Mono 11px uppercase, matches
   the eyebrow type system. */
.pdp-buy__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* PDP-COMPLETE-BUY-PANEL-IMPL-1 · Print Dimensions display-only card
   on Complete PDP. Mirrors the visual treatment of the Complete
   format pill (gold border + warm tint) so it reads as part of the
   Complete bundle composition. Non-interactive: no hover state, no
   button affordance, no cursor pointer. */
.pdp-buy__group--print-dim .pdp-buy__label { margin-bottom: 0; }
.pdp-buy__print-sizes {
  display: flex;
  gap: 8px;
}
.pdp-print-size {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-sans);
  color: var(--ink);
  flex: 1;
}
.pdp-print-size--active {
  border-color: var(--earth-accent, #B8956A);
  background: rgba(184, 149, 106, 0.06);
}
.pdp-print-size__dim {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pdp-print-size__dim-metric {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pdp-print-size__price {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.buy-panel__price-savings {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

/* PDP-PARITY-2A · post-CTA microcopy band — mono uppercase per HTML
   reference, sits below the ATC with a thin top divider.
   PDP-BUY-PANEL-FIX-PRINT-CTA-POSTCTA · Single line + left-aligned per
   operator QA. The prior 2-line split (PDP-BUY-PANEL-IMPL-1B / Fix #20)
   is reverted: Liquid emits one span, CSS sets inline so any future
   multi-span content also flows on one line until natural wrap kicks
   in on narrow viewports. */
.buy-panel__conservation {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
  text-align: left;
}

.buy-panel__conservation-line {
  display: inline;
}

.buy-panel__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.buy-panel__trust-item {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Size guide table — mono 12px per Fix #6 */
.pdp-size-guide__table,
.pdp-shipping__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.pdp-size-guide__table thead th,
.pdp-shipping__table thead th {
  text-align: left;
  padding: 6px 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: transparent;
}

.pdp-size-guide__table tbody td,
.pdp-shipping__table tbody td {
  padding: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

.pdp-size-guide__table tbody tr:last-child td,
.pdp-shipping__table tbody tr:last-child td {
  border-bottom: 0;
}

.pdp-size-guide__how p,
.pdp-size-guide__how ul {
  margin: 0;
}

.pdp-size-guide__fit-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  padding-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pdp-shipping__returns p {
  margin: 0 0 8px;
}

.pdp-shipping__contact {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #7 · Accent link color for mailto contact */
.pdp-shipping__contact a {
  color: var(--earth, #1C3829);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdp-shipping__contact a:hover {
  color: var(--earth-hover, #14291D);
}

/* Gift accordion list */
.pdp-buy__gift-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pdp-buy__gift-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(14, 14, 12, 0.03);
  border: 1px solid rgba(14, 14, 12, 0.08);
}

.pdp-buy__gift-icon {
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  align-self: start;
}

.pdp-buy__gift-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pdp-buy__gift-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #6 + #7 · Gift link sans 14px body type +
   accent color (var(--earth) instead of var(--ink)) so it reads as a
   navigable link, not body copy. Hover deepens to --earth-hover. */
.pdp-buy__gift-link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--earth, #1C3829);
  text-decoration: none;
}

.pdp-buy__gift-link strong {
  font-weight: 600;
  color: inherit;
}

.pdp-buy__gift-link:hover {
  color: var(--earth-hover, #14291D);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdp-buy__gift-sub {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
}

.pdp-buy__gift-footer {
  margin: 2px 0 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  line-height: 1.6;
}

@media (max-width: 991px) {
  /* PDP-BUY-PANEL-IMPL-1B / Fix #17 · Mobile retains 22px summary padding so
     touch targets stay generous; tables tighten one step. */
  .pdp-buy__accordion-summary { padding: 22px 0; }
  .pdp-buy__accordion-body { padding-bottom: 16px; font-size: 14px; }
  .pdp-buy__accordion-intro,
  .pdp-buy__accordion-list { font-size: 14px; }
  .pdp-size-guide__table,
  .pdp-shipping__table { font-size: 11px; }
  .pdp-size-guide__table thead th,
  .pdp-shipping__table thead th { padding: 6px 6px; }
  .pdp-size-guide__table tbody td,
  .pdp-shipping__table tbody td { padding: 6px 6px; }
}

/* ── buy-button snippet (the actual ATC) ──
   PDP-COMPLETE-BUY-PANEL-IMPL-2 · CTA sizing locked to operator spec
   across Tee / Print / Complete buy panels: 60px height, sans 14px,
   letter-spacing preserved (0.14em — approved in prior tickets),
   uppercase preserved. Sticky-atc (mobile) keeps its own 44px
   override below — operator scope is the main PDP buy panel. */
.buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) var(--space-6);
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.buy-button:hover { background: var(--earth-hover); border-color: var(--earth-hover); }

/* Variant accent: premiere = gold; master = earth (already set above) */
.buy-button--premiere { background: var(--earth-accent); border-color: var(--earth-accent); color: var(--ink); }
.buy-button--premiere:hover { background: #C8A578; border-color: #C8A578; }

.buy-button--master { background: var(--earth); border-color: var(--earth); }

.buy-button--closed,
.buy-button--disabled,
.buy-button[disabled] {
  background: var(--disabled);
  color: var(--disabled-text);
  border-color: var(--disabled);
  cursor: not-allowed;
}

.buy-button--waitlist {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.buy-button--waitlist:hover { background: var(--ink); color: var(--white); }

/* ── format-selector snippet ── PDP-PARITY-2A-R2 HTML-derived ── */
.format-selector {
  display: block;
}

.format-selector__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.format-selector__item { display: flex; }

/* PDP-BUY-PANEL-IMPL-1B / Fix #14 · Format row min-height 56px so all 3
   pills are uniformly tall regardless of contents. Centered vertically
   via align-items: center (already set). */
.format-selector__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  background: #F4F0E5;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--ink);
  transition: border-color 200ms ease, background 200ms ease;
  text-decoration: none;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.format-selector__option:hover { border-color: var(--ink); }

.format-selector__option--active {
  border-color: var(--ink);
  background: #FAFAF6;
}

.format-selector__option--disabled {
  background: rgba(0, 0, 0, 0.04);
  color: var(--disabled-text);
  border-color: rgba(0, 0, 0, 0.12);
  cursor: not-allowed;
  pointer-events: none;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #13 · Complete Edition row distinguished
   with gold outline (var(--earth-accent) — the warm gold used for premiere
   tier accent). Applies to all 3 render states (active span / anchor /
   disabled button) via attribute selector. */
.format-selector__option[data-format="complete"] {
  border-color: var(--earth-accent, #B8956A);
}
.format-selector__option[data-format="complete"]:hover {
  border-color: var(--earth-accent, #B8956A);
}
.format-selector__option--active[data-format="complete"] {
  border-color: var(--earth-accent, #B8956A);
  background: rgba(184, 149, 106, 0.06);
}

.format-selector__name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.format-selector__price {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #23 · Group price + savings as one flex
   item inside the format pill so the parent's `justify-content:
   space-between` puts the name LEFT and the price-group RIGHT, with
   internal 6px gap holding "$78 — save $11" tight as a pair. Tee + Print
   pills emit only price inside this group (savings span omitted). */
.format-selector__price-group {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
}

/* PDP-BUY-PANEL-IMPL-1B / Fix #13 + #23 · Gold serif 14px for the
   operator-approved static "— save $11" span on the Complete Edition
   row. No italic. Margin-left removed because the parent
   .format-selector__price-group provides a 6px gap that holds the pair
   ("$78 — save $11") tight on the right side of the pill. */
.format-selector__savings {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: normal;
  font-weight: 400;
  color: var(--earth-accent, #B8956A);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.format-selector__savings--qualitative {
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ── sticky-atc snippet (mobile only) ── */
.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--white);
  border-top: var(--border-width-thin) solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 250ms ease;
  pointer-events: none;
}

.sticky-atc[aria-hidden="false"] {
  transform: none;
  pointer-events: auto;
}

.sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter-sm);
  max-width: var(--max-width);
  margin: 0 auto;
}

.sticky-atc__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sticky-atc__name {
  font-size: var(--text-13);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-atc__price {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  color: var(--muted);
}

.sticky-atc .buy-button {
  width: auto;
  min-width: 140px;
  flex-shrink: 0;
  min-height: 44px;
}

@media (min-width: 992px) {
  .sticky-atc { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   PDP-GALLERY-1F · Responsive breakpoint correction
   ════════════════════════════════════════════════════════════════════
   Real-browser measurement at viewport 1209px showed `.pdp-main__grid`
   computed `max-width: 1320px` and `padding: 0 24px` — meaning the
   theme.liquid inline `.container { max-width: 1320px; padding: 0 24px }`
   rule beat my Pass 1C/1D `.pdp-main__grid { max-width: 1170px;
   padding: 0 }` at equal specificity (both 0,1,0) via source order
   (inline `<style>` in theme.liquid loads after `application.css`).

   Compounding problem: my Pass 1C lock at min-width ≥1200px tried to
   render 608+62+500+24+24 = 1218px inside a 1209-wide viewport →
   9px right-edge overflow + no centering room.

   This block is appended at the END of the gallery/buy/sticky-atc
   region so source-order beats my own earlier rules at equal
   specificity, and uses `.pdp-main__grid.container` /
   `.pdp-hero__inner.container` chained selectors (specificity 0,2,0)
   to beat the theme.liquid `.container` rule (0,1,0) without using
   !important.

   Layout modes:
     - viewport ≥ 1280: fixed 608/62/500 (gallery col / gap / buy col)
       inside a 1170px centered grid · padding 0 · gallery main 608×760 ·
       thumbs 143×143 · buy-panel sticky max-width 500 · trophy max 500
     - viewport < 1280: single-column stacked · gallery main fluid up to
       column width · thumbs 64×64 · buy panel + trophy full column width
   ════════════════════════════════════════════════════════════════════ */

/* ── Mobile/tablet defaults (single-column stack, <1280px) ─────────── */

.pdp-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 32px;
  max-width: none;
  /* .container inline padding 24px each side inherits — provides gutter */
  align-items: start;
}

.pdp-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 20px;
  max-width: none;
  align-items: end;
}

.pdp-gallery__main {
  /* Fluid up to column width — no 608 cap below desktop */
  max-width: none;
}

.pdp-gallery__thumbs {
  /* No 608 cap below desktop */
  max-width: none;
}

.pdp-gallery__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
}

.pdp-buy__sticky {
  position: static;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.pdp-hero__trophy-chip {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ── Desktop lock at viewport ≥ 1280px ─────────────────────────────── */

@media (min-width: 1280px) {

  /* Chained `.pdp-main__grid.container` selector (specificity 0,2,0)
     beats `.container` (0,1,0) → my max-width + padding override wins
     cleanly without !important. */
  .pdp-main__grid.container {
    grid-template-columns: 608px 500px;
    column-gap: 62px;
    row-gap: 0;
    width: 100%;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    align-items: start;
  }

  .pdp-hero__inner.container {
    /* PDP-HERO-PADDING-AUDIT-1 · Match legacy .pdp-hero__inner
       (line 2669-2672 of product-half-dome.html) which sets only
       `position: relative; z-index: 2;` — no padding. Earlier PDP-1F
       desktop values padding-top: 36px + padding-bottom: 28px were
       a Pass-2 estimate; the legacy reference has 0 on both.
       Horizontal padding stays 0 (operator-approved 608+62+500=1170
       grid needs the full content area; can't lose 48px to .container
       inherit). */
    grid-template-columns: 608px 500px;
    column-gap: 62px;
    row-gap: 0;
    width: 100%;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    align-items: end;
  }

  .pdp-gallery__main {
    max-width: 608px;
  }

  .pdp-gallery__thumbs {
    max-width: 608px;
  }

  .pdp-gallery__thumb {
    flex: 0 0 143px;
    width: 143px;
    height: 143px;
  }

  .pdp-buy__sticky {
    position: sticky;
    top: 120px;
    max-width: 500px;
    margin-left: auto;
    margin-right: 0;
  }

  .pdp-hero__trophy-chip {
    max-width: 500px;
    margin-left: auto;
    margin-right: 0;
  }
}


/* ════════════════════════════════════════════════════════════════════
   PDP-LAYOUT-ALIGN-1 · Below-fold section container max-width cap
   ════════════════════════════════════════════════════════════════════
   Aligns each lower Archive-PDP section's content container with the
   1170px top-grid edges established by PDP-GALLERY-1F. Section <section>
   bands stay full-width (preserves bg colors / border-top dividers that
   span edge-to-edge); only the inner `<div class="container">` content
   wrapper is capped to 1170 and centered (via inherited margin: 0 auto
   on .container from theme.liquid).

   Specificity note: `.pdp-{section} > .container` chained child-
   combinator selector resolves at (0,2,0) — beats theme.liquid's
   `.container { max-width: 1320 }` (0,1,0) regardless of source order,
   without using !important.

   Internal section grids are PRESERVED per their existing rules
   (.pdp-story__grid 1fr/1.5fr · .pdp-quality__grid 1fr/1fr ·
   .pdp-trophy__grid auto-fit cards · .pdp-provenance 2-col · etc.).
   The operator brief allows internal 608/62/500 rhythm "where the
   render spec supports it" — Story / Quality / Provenance editorial
   intent (narrow-head / wide-body for Story; equal-width split for
   Quality+Provenance) does NOT match the top 608/62/500 wide-left /
   narrow-right rhythm, so internal grids stay as designed.

   At viewport ≥ 1280 (matching top grid breakpoint): each container
   caps at 1170, centered → left edge + right edge coincide with
   .pdp-main__grid.container left/right edges. At viewport < 1280:
   inherited .container max-width: 1320 + padding: 0 24 still applies
   (1170 cap is wider than 1280 - 48 = 1232 only marginally; effectively
   no constraint at typical mobile viewports), so mobile gutters and
   stacking remain undisturbed.

   Scope: covers Story · Trophy Stats · Quality · Provenance · Complete
   Edition · Gift · Related Premiere · Related Products. Excludes
   `.pdp-breadcrumb` (above-fold, out of brief scope) and `.pdp-main`
   (which holds the top grid, already capped by PDP-GALLERY-1F's
   `.pdp-main__grid.container` rule).
   ════════════════════════════════════════════════════════════════════ */

.pdp-story > .container,
.pdp-trophy > .container,
.pdp-quality > .container,
.pdp-provenance-wrap > .container,
.pdp-complete-explain > .container,
.pdp-gift > .container,
.pdp-related-premiere > .container,
.pdp-related > .container {
  max-width: 1170px;
}

/* PDP-RELATED-EARTH-3 · UPDATE 11 · Widen related-section container so
   4×280px cards actually fit.

   Update 10 capped each card at 280px via `repeat(4, minmax(0, 280px))`
   but the visible card width never reached 280 because the container
   was the bottleneck:

     .container base (theme.liquid)  · max-width 1320 · padding 0 24
     .pdp-related > .container       · max-width 1170 (override above)
     usable inner for grid           · 1170 − 48 padding = 1122 px
     required for 4×280+3×24 gap     · 1192 px
     → minmax shrank cards to        · (1122−72)/4 = 262.5 px

   Fix: widen ONLY .pdp-related > .container to 1240px so usable inner
   becomes 1240 − 48 = 1192 px — exactly the grid's required width.
   Sibling sections (.pdp-gift, .pdp-related-premiere, .pdp-story etc.)
   keep their 1170 max-width — visual rhythm above the related rail is
   unchanged.

   Same-specificity override (0,1,1 via descendant combinator on both
   rules), placed AFTER the multi-selector — wins by source order, no
   !important. Cards render at exact 280px on viewports where the
   container hits its max; on narrower viewports minmax still shrinks
   gracefully and no horizontal scroll occurs. */
.pdp-related > .container {
  max-width: 1240px;
}


/* ============================================================
   45 · PDP · TROPHY chip + archive-id-badge + trophy-stats-block
   ============================================================ */

/* Trophy chip (used inline near the title) */
.trophy-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--off-white);
  border: var(--border-width-thin) solid var(--border);
  /* SI-18-B · Subworld-aware accent. Falls back to --pdp-world-accent →
     --earth-accent (gold) when no world/subworld data is present, so this
     migration is zero-visual on products that lack horizon.terrain_entry. */
  border-left: var(--border-width-accent) solid var(--pdp-active-accent);
}

.trophy-chip--compact { padding: 4px var(--space-2); }

.trophy-chip__label {
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.trophy-chip__value {
  font-family: var(--font-mono);
  font-size: var(--text-13);
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Archive ID badge (CL-067 format: HE-WORLD-ENTRYNO-SLUG) */
.archive-id-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: var(--border-width-thin) solid var(--ink);
}

.archive-id-badge__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
}

.archive-id-badge__trophy {
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* SI-18-B · Subworld-aware accent on the badge's trophy slug. Falls back
     to --earth-accent (gold) when no world/subworld data is present. */
  color: var(--pdp-active-accent);
  padding-left: var(--space-2);
  border-left: var(--border-width-thin) solid var(--border);
}

/* PDP-PARITY-2J-B · Trophy band uses --paper-2 (darker alternate band).
   PDP-LOWER-SECTIONS-2B · Reverted from the over-broad #F4F0E5 change
   in LS-2. The section wrapper background must remain the Earth band
   (--paper-2 = #EDE9DD); the #F4F0E5 paper-white background is now
   scoped to `.pdp-trophy__panel` only — see rule below. */
.pdp-trophy {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line, #D8D3C5);
  border-bottom: 0;
}

/* PDP-LOWER-SECTIONS-2B · Scoped numbers panel.
   Wraps `.pdp-trophy__feature` + `.pdp-trophy__grid` so the paper-white
   #F4F0E5 background applies ONLY to the actual numbers block.
   Heading area (`.pdp-trophy__head`) sits outside the panel on the
   section's Earth band. Padding provides visual breathing room around
   the feature + grid content. The inner `.pdp-trophy__feature`
   margin-top is zeroed so the panel padding alone defines the top
   gap (margin-collapse through a no-padding parent would otherwise
   push the margin outside the panel). */
.pdp-trophy__panel {
  background: #F4F0E5;
  padding: 32px;
}
.pdp-trophy__panel > .pdp-trophy__feature {
  margin-top: 0;
}
@media (max-width: 900px) {
  .pdp-trophy__panel { padding: 24px 16px; }
}

.pdp-trophy__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  margin: 0 0 12px;
}

/* trophy-stats-block snippet */
.trophy-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.trophy-stats__heading {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.trophy-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.trophy-stats__stat,
.trophy-stats__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trophy-stats__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.trophy-stats__value {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-18), 2vw, var(--text-24));
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.trophy-stats__value--coords {
  font-family: var(--font-mono);
  font-size: var(--text-14);
  letter-spacing: 0.02em;
}

.trophy-stats__cell--primary .trophy-stats__value {
  color: var(--earth);
}

.trophy-stats__explainer {
  color: var(--muted);
  font-size: var(--text-12);
  line-height: 1.55;
}

@media (max-width: 767px) {
  .trophy-stats__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   46 · PDP · DATA PROVENANCE TABLE (data-provenance-table snippet)
   Renders inside .pdp-provenance-wrap. Two blocks (terrain · method),
   each is a key/value table with verification status.
   ============================================================ */

.pdp-provenance-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pdp-provenance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.pdp-provenance__heading {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.pdp-provenance__explainer {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: var(--space-4);
}

.pdp-provenance__block {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pdp-provenance__block--terrain { border-top: var(--border-width-accent) solid var(--earth); }
/* SI-18-B · Method block accent migrated to --pdp-active-accent. Falls back
   to --earth-accent (gold) when no world/subworld data is present. Terrain
   block keeps --earth (dark green) intentionally — that's the world-tier
   anchor, distinct from the editorial accent layer this migration tracks. */
.pdp-provenance__block--method { border-top: var(--border-width-accent) solid var(--pdp-active-accent); }

/* PDP-PROVENANCE-1 · TERRAIN + METHOD subsection headers now read as
   headers, not as row labels. Was 11px ink weight 500 / 0.14em
   (identical metrics to .pdp-provenance__label below); now 13px Earth-
   accent weight 600 / 0.16em — clearly larger, heavier, and color-
   distinct from the muted row labels. A 10px padding-bottom + 1px
   hairline rule visually separates the title from the first row
   (additional to the parent block's flex column gap). The `◉` glyph
   prefix in the Liquid (`◉ Terrain` / `◉ Method`) inherits this
   title color, so the marker now coordinates with the Earth-accent
   header instead of reading as an unrelated bullet. */
.pdp-provenance__block-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  font-weight: 600;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(26, 26, 26, 0.10));
}

.pdp-provenance__table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.pdp-provenance__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width-thin) solid var(--border);
  align-items: baseline;
}

.pdp-provenance__row:first-child { border-top: 0; }

.pdp-provenance__row--nav-warning {
  background: rgba(193, 68, 14, 0.04);
  padding: var(--space-3) var(--space-3);
  margin: 0 calc(var(--space-3) * -1);
  border-left: var(--border-width-medium) solid var(--error);
}

.pdp-provenance__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-provenance__value {
  font-family: var(--font-mono);
  font-size: var(--text-13);
  color: var(--ink);
  word-break: break-word;
}

.pdp-provenance__value--nav-warning {
  color: var(--error);
}

.pdp-provenance__coords {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.pdp-provenance__contour-source,
.pdp-provenance__contour-rendered {
  display: block;
}

.pdp-provenance__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-12);
  color: var(--muted);
  margin-top: 2px;
}

.pdp-provenance__verification-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pdp-provenance__verification-status--verified {
  background: var(--earth-light);
  color: var(--earth);
}

.pdp-provenance__verification-status--pending {
  background: var(--off-white);
  color: var(--muted);
  font-style: italic;
}

.pdp-provenance__verification-date {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  color: var(--muted);
  margin-left: var(--space-2);
}

.pdp-provenance__verify-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
  margin-top: var(--space-2);
}

.pdp-provenance__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pdp-provenance__status--pending {
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 767px) {
  .pdp-provenance { grid-template-columns: 1fr; }
  .pdp-provenance__row { grid-template-columns: 110px 1fr; }
}

@media (max-width: 480px) {
  .pdp-provenance__row { grid-template-columns: 1fr; gap: 4px; }
}


/* ============================================================
   47 · PDP · QUALITY · GIFT · COMPLETE-EXPLAIN · ARCHIVE-RELATIONSHIP
        · RELATED · RELATED-PREMIERE
   ============================================================ */

/* Quality module — PDP-PARITY-2D v1.1 §2.6 parity
   80px paper-2 band · 2-col head/list grid (head 1fr / list 1.5fr · gap 60px)
   head max-width 420px · serif H2 title 400-weight · 17px sans lede ink-2 50ch max
   list: single-column row table · item: 180px label / 1fr value · padding 24px 0
   border-bottom 1px rule per row · label mono 12px 0.18em muted · value 17px sans ink
   Premiere + master-set tier variants keep the flex-column scaffold layout. */
/* PDP-PARITY-2J-B · Originally used --paper (#F3F1EA) as alternate-inset
   band. PDP-OBJECT-SECTION-IMPL-2 · Operator now wants #F4F0E5 explicitly.
   The `--paper` token can't be used because `assets/he-design-system.css`
   re-declares it with !important to #F3F1EA, overriding `layout/theme.liquid`'s
   #F4F0E5 root value. Explicit hex avoids the !important cascade trap. */
.pdp-quality {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #F4F0E5;
  border-top: 1px solid var(--line, #D8D3C5);
}

.pdp-quality--premiere,
.pdp-quality--master-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* PDP-OBJECT-SECTION-IMPL-2 · Operator screenshot calls for the
   right-hand row-list column to be narrower than the previous
   `1fr 1.5fr` ratio + 60px gap, with substantially more whitespace
   between the heading/intro column and the row-list column. Container
   inner width is 1122px (1170 max-width − 48px container gutters). New
   layout: 420px left, 180px gap, 1fr right (= 522px). Total fits
   exactly. align-items: start preserved. */
.pdp-quality > .container > .pdp-quality__grid,
.pdp-quality .pdp-quality__grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 180px;
  align-items: start;
}

.pdp-quality__head {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

/* PDP-OBJECT-SECTION-IMPL-1 · Tighten eyebrow tracking from 0.20em →
   0.16em per audit plan §6 — aligns with the consistent "moderate"
   mono tracking across lower sections (matches Trophy Stats and other
   editorial eyebrows). */
.pdp-quality__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  margin: 0 0 12px;
}

/* PDP-PARITY-2J-FIX · sans 500 / clamp(28-40px) / -0.02em per legacy.
   PDP-OBJECT-SECTION-IMPL-2 · Bottom margin reset to 0 so the intro
   sits closer to the title (operator: "too far apart"). Flex column
   gap on .pdp-quality__head (14px) + lede margin-top (8px) now defines
   the title → intro rhythm at 22px (vs previous 58px). Eyebrow → title
   rhythm preserved at 26px (12px eyebrow margin-bottom + 14px flex
   gap). */
.pdp-quality__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 !important;
  max-width: 14ch;
}

.pdp-quality__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

/* PDP-OBJECT-SECTION-IMPL-2 · Margin-top reduced from 24px → 8px so the
   intro sits closer to the title. Effective title → intro spacing is now
   ~22px (8px lede margin-top + 14px flex column gap from
   .pdp-quality__head), down from ~58px. */
.pdp-quality__lede {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2, #3A3A3A);
  max-width: 50ch;
  margin: 8px 0 0;
}

.pdp-quality__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
}

.pdp-quality__item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
  background: transparent;
  border-left: 0;
}

/* PDP-OBJECT-SECTION-IMPL-1 · Tighten row-label tracking from 0.18em →
   0.16em per audit plan §6 — matches the eyebrow tracking for visual
   unity across mono labels in the Object section. */
.pdp-quality__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-quality__text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.pdp-quality__text strong {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 900px) {
  .pdp-quality { padding: 48px 0; }
  .pdp-quality .pdp-quality__grid { grid-template-columns: 1fr; gap: 32px; }
  .pdp-quality__title { font-size: 32px; }
  .pdp-quality__item { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
}

/* Gift module — PDP-PARITY-2G · paper band with centered editorial head.
   Replaces card-style (off-white bg + earth-accent left border) with
   full-width band matching the alternating-bands pattern. */
/* PDP-PARITY-2J-B · Gift used --paper-2 (darker band) historically.
   PDP-GIFT-SECTION-IMPL-1 · Operator now wants #F4F0E5 explicitly
   (the `--paper` token is poisoned by !important re-decl in
   assets/he-design-system.css:55 → #F3F1EA, so neither --paper nor
   --paper-2 resolve to the spec value). Explicit hex used. */
.pdp-gift {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #F4F0E5;
  border-top: 1px solid var(--line, #D8D3C5);
}

/* PDP-PARITY-2J · uncentered.
   PDP-GIFT-SECTION-IMPL-1 · v3 structure puts a `.pdp-gift__grid`
   wrapper as the single child — the container flex column with 24px
   gap remains harmless (only one child, no gap applies). */
.pdp-gift > .container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* PDP-GIFT-SECTION-IMPL-1 · v3 two-column grid (mirrors
   .pdp-quality__grid). Left column carries eyebrow + title + lede;
   right column carries the row list. */
.pdp-gift__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* PDP-GIFT-SECTION-IMPL-1 · Lede paragraph in the head (sits beneath the title).
   PDP-GIFT-SECTION-IMPL-2 · Bumped from 15px / 1.55 to 17px / 1.7 per
   operator — now matches `.pdp-quality__lede` exactly (consistent
   editorial-section ledes across pdp-quality and pdp-gift). Line-
   height adjusted up from 1.55 → 1.7 since 17px / 1.55 = 26px reads
   slightly tight; 17px / 1.7 = 28.9px gives breathing room and
   mirrors the established quality-section rhythm. */
.pdp-gift__lede {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2, #3A3A3A);
  max-width: 42ch;
  margin: 8px 0 0;
}

/* PDP-GIFT-SECTION-IMPL-1 · Row list (mirrors .pdp-quality__list).
   Top hairline + per-row bottom hairlines define the structure. */
.pdp-gift__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line, #D8D3C5);
  margin: 0;
  padding: 0;
}

/* PDP-GIFT-SECTION-IMPL-1 · Individual row (mirrors .pdp-quality__item)
   with 180px label column + 1fr body column on desktop. Stacks on
   mobile via the @media rule below. */
.pdp-gift__item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line, #D8D3C5);
  align-items: start;
}

/* PDP-GIFT-SECTION-IMPL-1 · Row label (mirrors .pdp-quality__label).
   10px mono per the v3 spec — one notch smaller than the quality
   labels (12px) since the gift labels are short ("Gift ready") and
   carry less semantic weight than the object spec labels. */
.pdp-gift__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding-top: 2px;
}

/* PDP-GIFT-SECTION-IMPL-1 · Row body (mirrors .pdp-quality__text).
   PDP-GIFT-SECTION-IMPL-2 · Bumped from 14px → 17px per operator —
   now matches `.pdp-quality__text` exactly. Line-height 1.6 preserved
   (17px / 1.6 = 27.2px, same rhythm as quality body). */
.pdp-gift__text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.pdp-gift__text strong {
  font-weight: 500;
  color: var(--ink);
}

.pdp-gift__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-gift__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  margin: 0 0 12px;
}

/* PDP-PARITY-2J-FIX · sans 500 / clamp(28-40px) / -0.02em — shared title system. */
.pdp-gift__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.pdp-gift__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

/* PDP-GIFT-SECTION-IMPL-2 · Gold-tinted highlight for the emphasized
   word in the gift title. Replaces the previous `<em>` treatment in
   this section only — the trailing period now sits OUTSIDE the span
   (per operator's example structure) and inherits the default h2 ink
   color. Serif italic preserved to align with the brand emphasis
   pattern used by `.pdp-quality__title em`, `.pdp-story__title em`,
   etc. — only the hue shifts from earth-green to `--earth-accent`
   (the same gold token used by .format-selector__savings). */
.pdp-gift__title-gold {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth-accent, #B8956A);
}

.pdp-gift__body {
  font-family: var(--font-sans);
  color: var(--ink-2, #3A3A3A);
  font-size: 17px;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0;
}

@media (max-width: 900px) {
  .pdp-gift { padding: 48px 0; }
  .pdp-gift__title { font-size: 28px; }
  /* PDP-GIFT-SECTION-IMPL-1 · v3 mobile stack (mirrors pdp-quality mobile). */
  .pdp-gift__grid { grid-template-columns: 1fr; gap: 32px; }
  .pdp-gift__item { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
}

/* Complete Edition cross-link (Archive PDPs)
   PDP-PARITY-2G · paper-2 band with centered editorial head per v1.1 §2.8
   alternating-band pattern. Card style (white bg + border) replaced with
   full-width band for consistency with story/quality/provenance/related. */
/* PDP-PARITY-2J-B · Complete Edition uses --paper (lighter inset) to
   contrast with the --paper-2 bands on Provenance above and Gift below. */
.pdp-complete-explain {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--paper);
  border-top: 1px solid var(--line, #D8D3C5);
}

/* PDP-PARITY-2J · uncentered. The .container already provides horizontal
   gutters via the global container rule; content stacks left-aligned. */
.pdp-complete-explain > .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pdp-complete-explain__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-complete-explain__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  margin: 0 0 12px;
}

/* PDP-PARITY-2J-FIX · sans 500 / clamp(28-40px) / -0.02em. */
.pdp-complete-explain__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.pdp-complete-explain__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

.pdp-complete-explain__body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2, #3A3A3A);
  max-width: 60ch;
  margin: 0;
}

.pdp-complete-explain__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 8px 0 0;
  transition: background 200ms ease, color 200ms ease;
  text-decoration: none;
}

.pdp-complete-explain__cta:hover { background: var(--ink); color: var(--white); }

@media (max-width: 900px) {
  .pdp-complete-explain { padding: 48px 0; }
  .pdp-complete-explain__title { font-size: 32px; }
}

/* Archive relationship (Premiere/Master cross-link back to Archive parent) */
.pdp-archive-relationship {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--off-white);
  border: var(--border-width-thin) solid var(--border);
}

.pdp-archive-relationship__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-archive-relationship__eyebrow {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pdp-archive-relationship__title {
  font-size: var(--text-18);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.pdp-archive-relationship__lede {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.pdp-archive-relationship__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdp-archive-relationship__link {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  color: var(--ink);
  transition: border-color 200ms ease;
}

.pdp-archive-relationship__link:hover { border-color: var(--ink); }

.pdp-archive-relationship__link-name {
  font-size: var(--text-14);
  color: var(--ink);
}

.pdp-archive-relationship__link-price {
  font-family: var(--font-mono);
  font-size: var(--text-12);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Related products grid — PDP-PARITY-2G · v1.1 §2.8 parity.
   80–120px paper-2 band · centered editorial head max-width 720px ·
   serif weight-400 title clamp(32–48px) · 4-col card grid below. */
/* PDP-PARITY-2J-B · Related uses --paper-2 (darker band) per legacy
   HTML §3154 paper-warm role. Final section before footer; same-tone
   adjacency to Gift above is separated by the 1px line border-top. */
.pdp-related {
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line, #D8D3C5);
}

.pdp-related > .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* PDP-PARITY-2J · uncentered. */
.pdp-related__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-related__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  margin: 0 0 12px;
}

/* PDP-PARITY-2J-FIX · sans 500 / clamp(28-40px) / -0.02em. */
.pdp-related__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.pdp-related__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

/* PDP-RELATED-EARTH-1 · Title row pairs the section heading with the
   "All {World} Entries →" CTA on a single line (heading left, CTA
   right). Flex-wrap allows the CTA to drop below the heading on narrow
   viewports rather than overflow. */
.pdp-related__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

/* PDP-RELATED-EARTH-2 · Inline serif-italic earth-green highlight for
   the world name in the section heading (e.g., "More from <Earth>").
   Mirrors the brand emphasis pattern used by .pdp-quality__title em,
   .pdp-story__title em, etc. — inline, not block-displayed (the
   shared LS-1 .pdp-section-title__serif uses display: block which
   would force the world name onto its own line). */
.pdp-related__title-world {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

/* PDP-RELATED-EARTH-1 / EARTH-2 · CTA link.
   PDP-RELATED-EARTH-2 · Color flipped from var(--pdp-active-accent,
   var(--earth)) → var(--ink) per operator ("dark text color, not
   gold, align with section header"). The heading uses var(--ink); CTA
   now matches. flex-shrink: 0 prevents the CTA text from compressing
   below readability when the heading is long. */
.pdp-related__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.pdp-related__cta:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* PDP-RELATED-EARTH-3 · UPDATE 10 · Cap card width at 280px.
   Earlier rule used `repeat(4, 1fr)` which stretched cards to fill the
   container width — operator asked for an exact 280px desktop width.

   Fix: `repeat(N, minmax(0, 280px))` per breakpoint. Each track grows
   UP TO 280px and never beyond; on viewports too narrow to fit the
   full N×280 + gap row, tracks shrink uniformly to prevent horizontal
   scroll. Combined with `justify-content: start`, the row anchors at
   the section's left edge (matching the heading) and any extra
   container width sits as trailing whitespace rather than stretching
   the cards.

   Breakpoint behavior:
     ≥992px desktop  · 4 columns capped at 280px · row width up to
                       4×280 + 3×24 = 1192px
     768–991 tablet  · 3 columns capped at 280px
     ≤767  mobile    · 2 columns capped at 280px · 16px gap
   On narrow phones (e.g. 360px viewport) 2 columns + 16 gap exceeds
   the available inner width if cards held 280; minmax shrinks them
   uniformly to fit. No card ever exceeds 280px. */
.pdp-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  gap: 24px;
  justify-content: start;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdp-related__item { display: flex; }
.pdp-related__item > .product-card { width: 100%; }

@media (max-width: 991px) {
  .pdp-related__grid { grid-template-columns: repeat(3, minmax(0, 280px)); }
}

@media (max-width: 900px) {
  .pdp-related { padding: 48px 0 80px; }
  .pdp-related__title { font-size: 32px; }
}

@media (max-width: 767px) {
  .pdp-related__grid { grid-template-columns: repeat(2, minmax(0, 280px)); gap: 16px; }
}

/* Related Premiere cross-link panel */
.pdp-related-premiere {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--off-white);
  border-left: var(--border-width-accent) solid var(--earth-accent);
}

.pdp-related-premiere__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-related-premiere__eyebrow {
  color: var(--earth-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pdp-related-premiere__title {
  font-size: var(--text-20);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.pdp-related-premiere__lede,
.pdp-related-premiere__body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.6;
}

.pdp-related-premiere__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-6);
  background: var(--earth-accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth-accent);
  align-self: flex-start;
}

.pdp-related-premiere__cta:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }


/* ============================================================
   48 · PDP · PREMIERE STATES (edition-counter + pdp-window-info
        + pdp-collector-list + collectors-list-form)
   ============================================================ */

/* Edition counter — calm display of edition state */
.edition-counter,
.edition-counter--calm,
.edition-counter--sealed,
.edition-counter--sold-out {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--off-white);
  border-left: var(--border-width-medium) solid var(--earth-accent);
}

.edition-counter--sealed { border-left-color: var(--ink); background: var(--ink); color: var(--white); }
.edition-counter--sold-out { border-left-color: var(--muted); }
.edition-counter--calm { background: var(--off-white); }

.edition-counter__cap {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.edition-counter__cap-line {
  font-family: var(--font-mono);
  font-size: var(--text-13);
  letter-spacing: 0.04em;
  color: var(--ink);
}

.edition-counter--sealed .edition-counter__cap-line { color: var(--white); }

.edition-counter__reserved {
  font-family: var(--font-sans);
  font-size: var(--text-32);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.edition-counter__sep {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: var(--text-18);
}

.edition-counter__of {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.edition-counter__unit {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.edition-counter__progress {
  height: 4px;
  background: var(--border);
  overflow: hidden;
}

.edition-counter__progress-fill {
  height: 100%;
  background: var(--earth);
  transition: width 400ms ease;
}

.edition-counter__copy {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.55;
}

.edition-counter--sealed .edition-counter__copy { color: rgba(255, 255, 255, 0.75); }

.edition-counter__copy--pre,
.edition-counter__copy--open,
.edition-counter__copy--production,
.edition-counter__copy--shipped,
.edition-counter__copy--sealed,
.edition-counter__copy--sold-out {
  font-family: var(--font-sans);
}

.edition-counter__copy--sealed { color: var(--white); }
.edition-counter__copy--sold-out { color: var(--ink); font-style: italic; }

.edition-counter__days {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.edition-counter__closed-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

.edition-counter--sealed .edition-counter__closed-link { color: var(--earth-accent); }

/* Window-info panel (next-window + facts list) */
.pdp-window-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
}

.pdp-window-info__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-window-info__eyebrow {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pdp-window-info__title {
  font-size: var(--text-18);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.pdp-window-info__body {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.6;
}

.pdp-window-info__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}

.pdp-window-info__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-3);
  border-left: var(--border-width-thin) solid var(--border);
}

.pdp-window-info__fact > *:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-window-info__fact > *:last-child {
  font-family: var(--font-sans);
  font-size: var(--text-15);
  color: var(--ink);
}

/* Collector List inline placement on PDP */
.pdp-collector-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--off-white);
  border-left: var(--border-width-accent) solid var(--earth-accent);
}

.pdp-collector-list__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-collector-list__eyebrow {
  color: var(--earth-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Edition tag (small inline badge) */
.pdp-edition-tag,
.pdp-edition-tag--master-set {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  background: var(--earth-accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pdp-edition-tag--master-set { background: var(--earth); color: var(--white); }

/* collectors-list-form snippet (inline form variant — distinct from
   page-collectors-list-form.liquid which is section-level). */
.collectors-list-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.collectors-list-form__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.collectors-list-form__heading {
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.collectors-list-form__lede {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.55;
}

.collectors-list-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.collectors-list-form__fields {
  display: flex;
  gap: var(--space-2);
}

.collectors-list-form__field { flex: 1; min-width: 0; }

.collectors-list-form__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.collectors-list-form__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--border-mid);
  background: var(--white);
  font-size: var(--text-14);
  color: var(--ink);
}

.collectors-list-form__input:focus {
  outline: none;
  border-color: var(--earth);
}

.collectors-list-form__submit {
  align-self: flex-start;
  padding: var(--space-3) var(--space-6);
  background: var(--earth);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: var(--border-width-thin) solid var(--earth);
  cursor: pointer;
  flex-shrink: 0;
}

.collectors-list-form__submit:hover { background: var(--earth-hover); }

.collectors-list-form__privacy {
  color: var(--muted);
  font-size: var(--text-11);
  letter-spacing: 0.02em;
  line-height: 1.55;
}

.collectors-list-form__success {
  padding: var(--space-4);
  background: var(--earth-light);
  border: var(--border-width-thin) solid var(--earth);
  color: var(--earth);
  font-size: var(--text-14);
}

@media (max-width: 600px) {
  .collectors-list-form__fields { flex-direction: column; }
  .collectors-list-form__submit { width: 100%; }
}


/* ============================================================
   49 · PDP · MASTER SET SPECIFIC (pdp-pieces · pdp-plate-provenance ·
        master-set-essay)
   ============================================================ */

/* Plates / movements grid */
.pdp-pieces {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pdp-pieces__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-pieces__eyebrow {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pdp-pieces__title {
  font-size: clamp(var(--text-20), 2.5vw, var(--text-28));
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.pdp-pieces__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdp-pieces__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
}

.pdp-pieces__num {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

.pdp-pieces__plate-title {
  font-size: var(--text-18);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.pdp-pieces__descriptor {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.55;
}

.pdp-pieces__media {
  background: var(--off-white);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.pdp-pieces__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-pieces__media-placeholder {
  background: linear-gradient(135deg, var(--off-white), var(--border));
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-pieces__archive-id {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  color: var(--ink);
  letter-spacing: 0.02em;
  padding-top: var(--space-2);
  border-top: var(--border-width-thin) solid var(--border);
}

.pdp-pieces__copy {
  color: var(--muted);
  font-size: var(--text-13);
  line-height: 1.55;
}

.pdp-pieces__pending {
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 991px) {
  .pdp-pieces__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .pdp-pieces__grid { grid-template-columns: 1fr; }
}

/* Per-plate provenance — emphasizes each plate has its own Archive ID,
   not a single set-wide ID. */
.pdp-plate-provenance {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pdp-plate-provenance__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pdp-plate-provenance__eyebrow {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pdp-plate-provenance__title {
  font-size: clamp(var(--text-20), 2.5vw, var(--text-28));
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.pdp-plate-provenance__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pdp-plate-provenance__panel {
  background: var(--white);
  border: var(--border-width-thin) solid var(--border);
  border-left: var(--border-width-accent) solid var(--earth);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pdp-plate-provenance__panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.pdp-plate-provenance__num {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

.pdp-plate-provenance__name {
  font-family: var(--font-sans);
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

/* master-set-essay snippet */
.pdp-master-essay {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pdp-master-essay__eyebrow {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.master-set-essay {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--off-white);
  border-left: var(--border-width-accent) solid var(--earth);
}

.master-set-essay__heading {
  font-size: clamp(var(--text-20), 2.5vw, var(--text-28));
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.master-set-essay__subtitle {
  color: var(--muted);
  font-size: var(--text-14);
  line-height: 1.5;
}

.master-set-essay__folio {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

.master-set-essay__body {
  color: var(--ink);
  font-size: var(--text-15);
  line-height: 1.75;
  max-width: 760px;
}

.master-set-essay__body--placeholder {
  color: var(--muted);
  font-style: italic;
}

.master-set-essay__placeholder-text {
  color: var(--muted);
  font-style: italic;
}

.master-set-essay__movements {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.master-set-essay__movement {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-width-thin) solid var(--border);
}

.master-set-essay__movements > .master-set-essay__movement:first-child {
  border-top: 0;
  padding-top: 0;
}

.master-set-essay__movement-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.master-set-essay__movement-number {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--earth);
}

.master-set-essay__movement-title {
  font-family: var(--font-sans);
  font-size: var(--text-18);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.master-set-essay__movement-trophy {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.master-set-essay__movement-pending {
  font-family: var(--font-mono);
  font-size: var(--text-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: italic;
}

/* ============================================================
   SI-18-D · PREMIERE TIER ACTIVE-ACCENT (SPECIFICITY FIX)
   The original `.pdp-main--premiere { --pdp-active-accent: var(--premiere-gold) }`
   declaration in he-design-system.css has specificity (0,1,0) — lower than
   the SI-18-A subworld swap rules `[data-world="X"][data-subworld="Y"]`
   which carry (0,2,0). With unequal specificity, source order does not
   save the tier override: the subworld rules win and Premiere PDPs end up
   with --pdp-active-accent resolving to the subworld accent (e.g. forest
   green on an Earth/Summits Premiere) instead of premiere gold.
   Verified by Playwright probe in OPS-1H-B at all three viewports for
   four Premiere PDPs (half-dome, crater-lake, olympus-mons, tycho-crater).

   This rule restores the tier-override contract by reaching (0,3,0)
   specificity (two classes + one attribute), which beats the subworld
   rule outright regardless of source order between application.css
   (loaded first in layout/theme.liquid) and he-design-system.css
   (loaded after). `data-tier="premiere"` is emitted by
   sections/product-premiere-main.liquid only; Archive (no data-tier)
   and Master Set (data-tier="master-set") are unaffected.

   --pdp-subworld-accent is intentionally NOT overridden — the underlying
   subworld value remains available for analytics or future component
   intent (matches the existing tier-override pattern). ============================================================ */
.pdp-main.pdp-main--premiere[data-tier="premiere"] {
  --pdp-active-accent: var(--premiere-gold);
}

/* ============================================================
   55 · PDP · STORY SECTION (PDP-PARITY-2C · v1.1 §2.4 parity)
   Source: HE_PDP_HALF_DOME_RENDER_SPEC_v1_1_RECONCILED.md §2.4
   80px paper-2 band · 2-col grid (head 1fr / body 1.5fr · gap 60px)
   sticky head with accent eyebrow + serif h2 + 14ch max-width
   body: 17px sans / 1.7 lh / ink-2 / 60ch max-width / paragraph spacing
   pullquote: dedicated blockquote · serif italic 24px · left-3px accent
   ============================================================ */

/* PDP-PARITY-2J-B · Story uses the darker alternate band (--paper-2 / #EDE9DD,
   defined at top of this file). Inter-section divider preserved from 2J-FIX. */
.pdp-story {
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line, #D8D3C5);
}

.pdp-story__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  align-items: start;
}

.pdp-story__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}

.pdp-story__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  margin: 0 0 12px;
}

/* PDP-PARITY-2J-FIX · sans 500 weight, clamp(28-40px) max, -0.02em letter-spacing
   per legacy HTML §4451+ canonical CSS. `em` portion shifts to serif italic earth. */
.pdp-story__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 16px 0 0 !important;
  max-width: 18ch;
}

.pdp-story__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

/* PDP-LOWER-SECTIONS-1 · Universal serif-italic span for the editorial
   section-title comma-split rule. Emitted by snippets/pdp-section-title.liquid
   when a heading contains a comma — the after-comma text lands inside this
   span on its own visual line (display: block). One rule serves Story,
   Trophy Stats, Format Details/Quality, Provenance, and Gift Module — the
   existing per-section `<heading> em` rules are left in place since they
   handle explicit <em> markup if a metafield value uses it. The serif span
   is class-scoped, so the rule does not affect the mono eyebrows or any
   non-heading copy. Color uses --pdp-active-accent with a graceful fallback
   to the established --earth green. */
.pdp-section-title__serif {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pdp-active-accent, var(--earth));
  display: block;
}

.pdp-story__body {
  display: flex;
  flex-direction: column;
}

.pdp-story__body p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2, #3A3A3A);
  margin: 0 0 24px;
  max-width: 60ch;
}

.pdp-story__body p:last-of-type {
  margin-bottom: 0;
}

.pdp-story__body p strong {
  color: var(--ink);
  font-weight: 500;
}

.pdp-story__pullquote {
  margin: 40px 0 0;
  padding: 28px 32px;
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--pdp-active-accent, var(--earth));
  background: rgba(255, 255, 255, 0.5);
  max-width: 50ch;
}

@media (max-width: 900px) {
  .pdp-story { padding: 48px 0; }
  .pdp-story__grid { grid-template-columns: 1fr; gap: 24px; }
  .pdp-story__head { position: static; }
  .pdp-story__title { font-size: 32px; max-width: none; }
  .pdp-story__body p { font-size: 16px; line-height: 1.65; }
  .pdp-story__pullquote { padding: 20px 24px; font-size: 20px; }
}

/* ============================================================
   56 · PDP · TROPHY STATS v6 (PDP-PARITY-2C · v1.1 §2.5 parity)
   Source: HE_PDP_HALF_DOME_RENDER_SPEC_v1_1_RECONCILED.md §2.5
   80px paper band · centered head (720px max) · serif H2 title
   feature stat 28px sans · feature sub mono 12px / 0.20em
   3-col bordered grid (border-top + border-left on container;
   border-right + border-bottom on items) · items 28px 24px padding
   140px min-height · bottom-aligned content
   ============================================================ */

/* PDP-PARITY-2J · uncentered — section heading rhythm consistency.
   Left-aligned at container's inner left edge; max-width removed so
   the eyebrow underline rule and title align with the grid below. */
.pdp-trophy__head {
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* PDP-PARITY-2J-FIX · sans 500 weight, clamp(28-40px), -0.02em per legacy. */
.pdp-trophy__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 !important;
  max-width: 18ch;
}

.pdp-trophy__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

.pdp-trophy__feature {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border-bottom: 0;
}

/* PDP-LOWER-SECTIONS-2B · Summary headline.
   Operator spec: sans, 28px, weight 500, letter-spacing normal/minimal.
   Was 0.04em (mild tracking); reduced to 0 per "letter-spacing: normal
   or minimal" guidance + the "without space lettering" theme from §4. */
.pdp-trophy__feature-stat {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}

/* PDP-LOWER-SECTIONS-2B · Summary subline.
   Operator spec: mono, 12px, letter-spacing 0. Was 0.20em (heavy
   tracking — operator: "remove the excessive tracked/expanded letter
   spacing"). text-transform: uppercase preserved since the operator's
   example ("SENTINEL GRANODIORITE · GLACIAL POLISH · YOSEMITE NATIONAL
   PARK") is shown uppercase. */
.pdp-trophy__feature-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-trophy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
  border-left: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
  margin-top: 48px;
}

.pdp-trophy__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px;
  min-height: 140px;
  border-right: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
  border-bottom: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
  gap: 0;
}

/* PDP-LOWER-SECTIONS-2B · Card label.
   12px mono from LS-2 retained. letter-spacing reduced from 0.20em
   (excessive tracking) to 0 per operator spec: "do not force excessive
   letter spacing unless the reference explicitly requires it".
   text-transform: uppercase preserved (labels like SLOPE / CABLE ROUTE
   render uppercase). */
.pdp-trophy__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.pdp-trophy__value {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}

/* PDP-LOWER-SECTIONS-2 / 2B · In-card stat subtext.
   Mono 12px from LS-2 retained (matches legacy reference family + size
   intent). LS-2B: letter-spacing reduced from 0.08em → 0 per operator
   spec "do not force excessive letter spacing unless the reference
   explicitly requires it". Natural case preserved — descriptive phrases
   like "Northwest face · vertical or overhung" read as body, not as a
   tracked label. */
.pdp-trophy__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink-2, #3A3A3A);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .pdp-trophy { padding: 48px 0; }
  .pdp-trophy__head { margin-bottom: 32px; }
  .pdp-trophy__title { font-size: 32px; }
  .pdp-trophy__feature-stat { font-size: 22px; }
  .pdp-trophy__grid { grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
  .pdp-trophy__item { padding: 20px 16px; min-height: 110px; }
  .pdp-trophy__value { font-size: 22px; }
}

/* ============================================================
   57 · PDP · PROVENANCE head + COMPLETE EDITION includes
   + GIFT badges (PDP-PARITY-2B)
   Additions to existing .pdp-provenance / .pdp-complete-explain / .pdp-gift
   base rules (§46 / §48 / §49). Existing rules preserved.
   ============================================================ */

.pdp-provenance__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.pdp-provenance__eyebrow {
  color: var(--muted);
}

.pdp-provenance__title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.pdp-provenance__title em {
  font-style: italic;
  color: var(--earth);
}

.pdp-complete-explain__includes {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdp-complete-explain__includes li {
  font-size: 14px;
}

.pdp-complete-explain__includes a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdp-gift__reason {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}

.pdp-gift__badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pdp-gift__badge {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: var(--border-width-thin) solid var(--border);
  border-radius: 999px;
  color: var(--ink);
}

.pdp-gift__badge--no-size {
  border-color: var(--earth);
  color: var(--earth);
}

.pdp-gift__best {
  font-size: 14px;
  color: var(--muted);
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.pdp-gift__best-label {
  color: var(--muted);
}

.pdp-gift__best-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   58 · PDP · PROVENANCE v1.1 §2.7 OVERRIDES (PDP-PARITY-2D)
   Scoped under `.pdp-provenance-wrap` parent so they apply only to
   the Archive PDP's inline provenance block (sections/product-archive-main.liquid
   PDP-PARITY-2B markup). The §46 base rules continue to drive
   `snippets/data-provenance-table.liquid` rendering used by
   product-premiere-main.liquid + product-master-set-main.liquid.

   Spec: 80px paper band · centered head (720px max) with serif H2 title 400-weight
   · 2-col body grid 1fr 1fr gap 80px · block-title mono 12px 0.20em ink-2 with
   underline rule · table semantics (border-collapse) · row borders bottom-only
   · label <th> mono 11px 0.18em muted 38% width · value <td> sans 15px 1.55 ink 62%
   ============================================================ */

/* PDP-PARITY-2J-B · Provenance uses --paper-2 (darker alternate band)
   per legacy HTML §4610 paper-warm role. */
.pdp-provenance-wrap {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line, #D8D3C5);
  display: block;
  gap: 0;
}

/* PDP-PARITY-2J · uncentered — section heading rhythm consistency. */
.pdp-provenance-wrap .pdp-provenance__head {
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdp-provenance-wrap .pdp-provenance__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  margin: 0 0 12px;
}

/* PDP-PARITY-2J-FIX · sans 500 / clamp(28-40px) / -0.02em per legacy §4617. */
.pdp-provenance-wrap .pdp-provenance__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.pdp-provenance-wrap .pdp-provenance__title em {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
}

.pdp-provenance-wrap .pdp-provenance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.pdp-provenance-wrap .pdp-provenance__block {
  background: transparent;
  border: 0;
  padding: 0;
  display: block;
  gap: 0;
}

.pdp-provenance-wrap .pdp-provenance__block--terrain,
.pdp-provenance-wrap .pdp-provenance__block--method {
  border-top: 0;
}

/* PDP-PROVENANCE-2 · Subsection headers (TERRAIN / METHOD) made visibly
   distinct from row labels. This rule lives inside `.pdp-provenance-wrap`
   so it has higher specificity (0,2,0) than the original
   `.pdp-provenance__block-title` declaration at line 7690 (0,1,0) — any
   future edits to the header style MUST happen here, or in a more
   specific selector still. Cascade trap from PDP-PROVENANCE-1: edits
   to the lower-specificity rule were silently masked.

   New hierarchy vs row labels (.pdp-provenance__label, 11px muted 400 / 0.14em):
     - 15px (+4px) vs row label 11px
     - 700 weight (+300) vs row label 400
     - Earth-accent (--pdp-active-accent, falls back to --earth) vs muted gray
     - 0.18em tracking (+0.04em) vs row label 0.14em

   Visual separation: 14px padding-bottom + 2px Earth-accent rule + 16px
   margin-bottom = ~32px breathing room from header text to first row.
   The 2px Earth-accent rule (vs the previous 1px neutral hairline) reads
   as an intentional section divider, not a quiet underline. */
.pdp-provenance-wrap .pdp-provenance__block-title {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pdp-active-accent, var(--earth));
  font-weight: 700;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--pdp-active-accent, var(--earth));
  margin: 0 0 16px;
}

.pdp-provenance-wrap .pdp-provenance__table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.pdp-provenance-wrap .pdp-provenance__row {
  display: table-row;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border-top: 0;
  align-items: baseline;
}

.pdp-provenance-wrap .pdp-provenance__row:first-child {
  border-top: 0;
}

.pdp-provenance-wrap .pdp-provenance__label {
  display: table-cell;
  width: 38%;
  padding: 16px 16px 16px 0;
  vertical-align: top;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
}

.pdp-provenance-wrap .pdp-provenance__value {
  display: table-cell;
  width: 62%;
  padding: 16px 0;
  vertical-align: top;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  border-bottom: 1px solid var(--rule, rgba(26, 26, 26, 0.10));
}

.pdp-provenance-wrap .pdp-provenance__value strong {
  font-weight: 500;
  color: var(--ink);
}

.pdp-provenance-wrap .pdp-provenance__verify-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0;
}

@media (max-width: 900px) {
  .pdp-provenance-wrap { padding: 48px 0; }
  .pdp-provenance-wrap .pdp-provenance__head { margin-bottom: 32px; }
  .pdp-provenance-wrap .pdp-provenance__title { font-size: 32px; }
  .pdp-provenance-wrap .pdp-provenance__grid { grid-template-columns: 1fr; gap: 40px; }
  .pdp-provenance-wrap .pdp-provenance__label { width: 42%; padding-right: 12px; }
  .pdp-provenance-wrap .pdp-provenance__label,
  .pdp-provenance-wrap .pdp-provenance__value { padding-top: 14px; padding-bottom: 14px; font-size: 14px; }
}



/* ════════════════════════════════════════════════════════════════════
   CART DRAWER · PDP-CART-DRAWER-P0-RENDER-FIX
   ════════════════════════════════════════════════════════════════════
   Cart drawer styling for the .cart-drawer__* BEM namespace used by
   sections/cart-drawer.liquid. Adapted from he-cart-drawer.css (orphaned
   438-line Figma-exact design), translated to the live BEM namespace
   so no Liquid markup changes are required.

   Activation contract (matches theme.js initCartDrawer):
     [aria-hidden="false"]  → drawer visible / slid in
     [aria-hidden="true"]   → drawer offscreen / hidden
   Backdrop = sibling element <div class="cart-drawer__backdrop"> after
   the aside. Its visibility tracks the drawer via general-sibling
   selector (matches Liquid's render order).
   ════════════════════════════════════════════════════════════════════ */

/* ── Backdrop ── */
.cart-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.cart-drawer[aria-hidden="false"] ~ .cart-drawer__backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, visibility 0s;
}

/* ── Drawer shell · 460px right slide-in ── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 100vw;
  background: #FFFFFF;
  border-left: 1px solid #E8E6E1;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  visibility: hidden;
}
.cart-drawer[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
}
@media (max-width: 767px) {
  .cart-drawer { width: 100vw; }
}

/* ── Header ── */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid #F0EEE9;
  flex-shrink: 0;
}
.cart-drawer__head-inner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.cart-drawer__eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5A5A;
}
.cart-drawer__title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.04px;
  color: #0C0C0C;
  line-height: 1;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.cart-drawer__count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: #5A5A5A;
  letter-spacing: 0;
  text-transform: none;
}
.cart-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #0C0C0C;
  cursor: pointer;
  padding: 0;
  margin-right: -12px;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.cart-drawer__close:hover { opacity: 0.5; }
.cart-drawer__close:focus-visible {
  outline: 2px solid #1C3829;
  outline-offset: 2px;
}

/* ── Body / scrollable region ── */
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.cart-drawer__status {
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}
.cart-drawer__status:not(:empty) {
  height: auto;
  padding: 12px 20px;
  background: #FFF5E6;
  border-bottom: 1px solid #F0EEE9;
  color: #8A4A1A;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

/* ── Empty state ── */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 80px 40px;
  text-align: center;
  gap: 24px;
}
.cart-empty svg { color: #B8B5AD; }
.cart-empty__text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #5A5A5A;
  margin: 0;
}

/* ── Items list ── */
.cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cart-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid #F0EEE9;
  align-items: flex-start;
}

.cart-item__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 84px;
  background: #F5F4F0;
  overflow: hidden;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B8B5AD;
}
.cart-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-item__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-item__meta-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cart-item__meta-top > div {
  flex: 1;
  min-width: 0;
}

.cart-item__eyebrow {
  display: block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #5A5A5A;
  margin-bottom: 2px;
  line-height: 1.4;
}

.cart-item__name {
  /* PDP-CART-DRAWER-UI-POLISH-1 · prominent line-item title (peer with price). */
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0C0C0C;
  line-height: 1.4;
  margin: 0;
}
.cart-item__name a {
  color: inherit;
  text-decoration: none;
}
.cart-item__name a:hover { text-decoration: underline; }

.cart-item__remove {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #5A5A5A;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  flex-shrink: 0;
  transition: color 0.15s;
}
.cart-item__remove:hover { color: #0C0C0C; }
.cart-item__remove:focus-visible {
  outline: 2px solid #1C3829;
  outline-offset: 2px;
}

.cart-item__spec {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: #5A5A5A;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.cart-item__tier-badge {
  display: inline-block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1C3829;
  padding: 2px 8px;
  border: 1px solid #D5D2CC;
  border-radius: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.cart-item__props {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: #5A5A5A;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.cart-item__props li { margin: 0; }

.cart-item__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-item__qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #D5D2CC;
  border-radius: 0;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #0C0C0C;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: border-color 0.15s;
}
.cart-item__qty-btn:hover:not(:disabled) { border-color: #0C0C0C; }
.cart-item__qty-btn:focus-visible {
  outline: 2px solid #1C3829;
  outline-offset: 2px;
}
.cart-item__qty-btn:disabled,
.cart-item__qty-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.cart-item__qty-value {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #0C0C0C;
  min-width: 20px;
  text-align: center;
}

.cart-item__price {
  /* PDP-CART-DRAWER-UI-POLISH-1 · price 16/500/1.4 · peer with .cart-item__name. */
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0C0C0C;
  line-height: 1.4;
  white-space: nowrap;
}

.cart-item__qty-note {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: #5A5A5A;
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ── Upsell slot ── */
.cart-upsell {
  margin: 0;
}
.cart-upsell:empty { display: none; }

/* ── Footer ── */
.cart-drawer__foot {
  flex-shrink: 0;
  border-top: 1px solid #F0EEE9;
  background: #FFFFFF;
  padding: 0;
}

.cart-summary {
  padding: 16px 20px 0;
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #0C0C0C;
}
.cart-summary__row--savings .cart-summary__value { color: #1C3829; font-weight: 500; }
.cart-summary__row--total {
  font-size: 16px;
  font-weight: 500;
  padding-top: 12px;
  border-top: 1px solid #F0EEE9;
  margin-top: 8px;
}
.cart-summary__row--muted { color: #5A5A5A; }
.cart-summary__label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5A5A5A;
}
.cart-summary__row--total .cart-summary__label {
  color: #0C0C0C;
  font-weight: 500;
}
.cart-summary__value {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  text-align: right;
}
.cart-summary__value--gold { color: #C58F3A; }
.cart-summary__value--total { font-size: 16px; font-weight: 500; }

/* ── Checkout button ── */
.cart-checkout,
.cart-drawer__foot form {
  margin: 0;
}
.cart-drawer__foot form {
  padding: 16px 20px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.cart-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: #1C3829;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cart-checkout:hover { background: #2A4F38; }
.cart-checkout:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
}

/* PDP-CART-DRAWER-UI-POLISH-1 · trust strip CSS removed (markup gone).
   The .cart-trust class is kept as a no-op selector (zero rules) in case
   a future ticket re-introduces a similar microline. */

/* Body scroll lock when drawer is open — defensive (theme.js sets inert but
   not overflow lock; document still scrolls behind the drawer otherwise). */
body:has(.cart-drawer[aria-hidden="false"]) {
  overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════════
   TOAST · PDP-CART-DRAWER-CANONICAL-ALIGN-1 · Phase 2 of 4
   Canonical: 20_CART_BEHAVIOR_SPEC.md §13
   Backs window.showToast (assets/toast.js).
   ════════════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #E8E6E1;
  border-left-width: 4px;
  box-shadow: 0 4px 16px rgba(12, 12, 12, 0.08);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease, transform 300ms ease;
}
.toast--dismissing { opacity: 0; transform: translateY(-8px); }
.toast--success { border-left-color: #1C3829; }
.toast--error   { border-left-color: #C1440E; }
.toast--warning { border-left-color: #C58F3A; }
.toast--info    { border-left-color: #5A5A5A; }
.toast__icon {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast--success .toast__icon { color: #1C3829; }
.toast--error   .toast__icon { color: #C1440E; }
.toast--warning .toast__icon { color: #C58F3A; }
.toast--info    .toast__icon { color: #5A5A5A; }
.toast__body { min-width: 0; }
.toast__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0C0C0C;
  line-height: 1.3;
  margin: 0;
}
.toast__detail {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: #5A5A5A;
  line-height: 1.4;
  margin: 2px 0 0;
  letter-spacing: 0.04em;
}
.toast__action {
  background: transparent;
  border: 1px solid #0C0C0C;
  padding: 4px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0C0C0C;
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.toast__action:hover { background: #0C0C0C; color: #FFFFFF; }
.toast__action:focus-visible { outline: 2px solid #1C3829; outline-offset: 2px; }
.toast__dismiss {
  background: transparent;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1;
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: #5A5A5A;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast__dismiss:hover { color: #0C0C0C; }
.toast__dismiss:focus-visible { outline: 2px solid #1C3829; outline-offset: 2px; }

@media (max-width: 767px) {
  .toast-container {
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ─── PDP-CART-DRAWER-UPSELL-PIVOT-1 · Complete Edition upsell card ───
   Passive bundle suggestion rendered between cart lines and the
   subtotal/footer block. Discreet · brand-green left rule · muted
   warm off-white panel · does not compete with cart lines or the
   checkout CTA. Stacks vertically when multiple terrains qualify. */
.cart-upsell-card {
  display: block;
  margin: 16px 24px 0;
  padding: 14px 16px;
  background: #F8F7F4;
  border-left: 2px solid #1C3829;
  border-radius: 0;
}
.cart-upsell-card__eyebrow {
  margin: 0 0 4px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1C3829;
  text-transform: none;
}
.cart-upsell-card__title {
  margin: 0 0 6px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #1C3829;
}
.cart-upsell-card__body {
  margin: 0 0 10px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #5A5A5A;
}
.cart-upsell-card__cta {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1C3829;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cart-upsell-card__cta:hover,
.cart-upsell-card__cta:focus-visible {
  text-decoration-thickness: 2px;
  outline: none;
}
.cart-upsell-card + .cart-upsell-card { margin-top: 10px; }

@media (max-width: 767px) {
  .cart-upsell-card { margin: 14px 16px 0; padding: 12px 14px; }
  .cart-upsell-card__title { font-size: 13px; }
  .cart-upsell-card__body { font-size: 11px; }
}

/* ─── PDP-CART-DRAWER-SAVINGS-DISPLAY-1 · per-line compareAt + bundle savings row ───
   Subtle marketing reinforcement for Complete Edition bundles.
   Display-only — does not affect transaction totals (per Case A
   architecture, savings are baked into variant.price). Both rules
   are dormant until operator populates compareAt on the Complete
   Edition variants (via Admin or PDP-DATA-IMPORT-1). */
.cart-item__compare-at {
  color: #8A8A8A;
  text-decoration: line-through;
  font-size: 0.85em;
  margin-left: 6px;
  font-weight: 400;
}

/* PDP-CART-DRAWER-UI-POLISH-1 · savings value gets the canonical brand serif
   + brand gold (#B8956A) at 16px (subtotal peer). The LABEL "COMPLETE EDITION
   SAVINGS" stays mono uppercase 12px (per existing .cart-summary__label rule
   + the `mono` class on the span). The `--gold` modifier above the bundle-
   savings row sets `color: #C58F3A` (the Shopify-discount amber) — the more
   specific bundle-savings rule below WINS on color (brand gold #B8956A). */
.cart-summary__row--bundle-savings .cart-summary__label {
  font-size: 12px;
}
.cart-summary__row--bundle-savings .cart-summary__value {
  font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: #B8956A;
}

/* ─── PDP-CART-DRAWER-GIFT-MODE-1 · Y1 launch gift panel + line item modifier ───
   Spec: HE_CART_DRAWER_IMPLEMENTATION_SPEC_v2.md §6.2 + §8.4.
   Three live controls: recipient name · gift note · hide-prices toggle.
   Wax-seal wrap row deferred. Variables adapted to direct values
   matching the existing cart-drawer aesthetic (this theme does not
   expose --space-*/--font-*/--ink-* as CSS custom properties at the
   theme root). */
.cart__gift {
  border-top: 1px solid #F0EEE9;
  border-bottom: 1px solid #F0EEE9;
  padding: 14px 24px;
  margin: 14px 0;
  background: #FCFBF8;
}
.cart__gift-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.cart__gift-header:focus-visible {
  outline: 2px solid #1C3829;
  outline-offset: 2px;
}
.cart__gift-icon {
  font-size: 20px;
  line-height: 1;
}
.cart__gift-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart__gift-header-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1C3829;
}
.cart__gift-header-hint {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #5A5A5A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cart__gift-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #1C3829;
  transition: transform 180ms ease;
}
.cart__gift--on .cart__gift-chevron {
  transform: rotate(180deg);
}
.cart__gift-panel {
  padding-top: 18px;
}
.cart__gift-panel[hidden] {
  display: none;
}
.cart__gift-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #5A5A5A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 4px;
}
.cart__gift-help {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #8A8A8A;
  margin: 0 0 8px;
}
.cart__gift-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px; /* prevent iOS auto-zoom */
  padding: 10px 12px;
  border: 1px solid #D9D6CF;
  background: #FFFFFF;
  color: #1C3829;
  border-radius: 0;
}
.cart__gift-input:focus {
  outline: 2px solid #1C3829;
  outline-offset: -1px;
  border-color: #1C3829;
}
.cart__gift-note {
  resize: vertical;
  min-height: 72px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.cart__gift-counter-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.cart__gift-counter {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #8A8A8A;
}
.cart__gift-counter--near-limit {
  color: #C1440E;
}
.cart__gift-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #F0EEE9;
}
.cart__gift-toggle-row:last-of-type {
  border-bottom: none;
}
.cart__gift-toggle-info {
  flex: 1;
}
.cart__gift-toggle-name {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1C3829;
  margin: 0;
}
.cart__gift-toggle-desc {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #8A8A8A;
  margin: 2px 0 0;
}
.cart__gift-switch {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #D9D6CF;
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 150ms ease;
  flex-shrink: 0;
  padding: 0;
}
.cart__gift-switch:focus-visible {
  outline: 2px solid #1C3829;
  outline-offset: 2px;
}
.cart__gift-switch--on {
  background: #1C3829;
}
.cart__gift-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: left 150ms ease;
  pointer-events: none;
}
.cart__gift-switch--on .cart__gift-switch-knob {
  left: 20px;
}
.cart__gift-shipping-hint {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #5A5A5A;
  text-align: center;
  margin: 18px 0 0;
}

/* Cart line item · gift mode modifier · spec §8.4
   When the drawer is in gift mode, each line item gets `cart-item--gift`.
   Hides the qty stepper (BR-016: qty 1 per line) and reveals the gift
   block below the line content. */
.cart-item--gift .cart-item__qty {
  /* PDP-CART-DRAWER-UI-POLISH-1 · BR-016 visual · qty stepper hidden in gift
     mode (server-side qty stays at 1 per line). The per-line gift block markup
     itself was removed in UI-POLISH-1 — gift mode is now order-level only.
     The `--gift` modifier remains in place because this stepper-hide rule
     still relies on it. */
  display: none;
}

/* PDP-CART-DRAWER-UI-POLISH-1 · HE polish · cart drawer spacing scale (8px-base)
   + mobile breakpoint. Generous vertical rhythm between sections; subtotal/
   total hierarchy; iOS-zoom-safe inputs at <540px. */
.cart-drawer__head {
  padding-top: 24px;
  padding-bottom: 16px;
}
.cart-drawer__eyebrow {
  letter-spacing: 0.10em;
}
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  padding-bottom: 8px;
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cart-summary__row--total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #E5E1D9;
}
.cart-summary__row--total .cart-summary__label,
.cart-summary__row--total .cart-summary__value {
  font-size: 18px;
  font-weight: 500;
}
.cart-summary__row--muted {
  font-size: 12px;
  color: #5A5A5A;
}
.cart-checkout {
  margin-top: 16px;
  margin-bottom: 24px;
  min-height: 56px;
}
.cart__gift {
  margin: 24px 0;
}
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-item {
  padding-block: 8px;
}

@media (max-width: 767px) {
  .cart__gift { padding: 16px 16px; margin: 16px 0; }
  .cart__gift-input { font-size: 14px; }
  .cart__gift-toggle-name { font-size: 12px; }
}

@media (max-width: 539px) {
  /* PDP-CART-DRAWER-UI-POLISH-1 · full-screen drawer + iOS-zoom-safe inputs +
     ≥44px touch targets per HE_Web_UX_Design_System_v1_3. */
  .cart-drawer { width: 100vw !important; max-width: 100vw !important; }
  .cart-drawer__head { padding: 20px 16px 12px; }
  .cart-drawer__body { padding: 0 16px; }
  .cart-drawer__foot { padding: 0 16px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .cart__gift-input { font-size: 14px; min-height: 44px; }
  .cart__gift-note { min-height: 88px; }
  .cart-item__qty-btn { min-width: 44px; min-height: 44px; }
  .cart-item__remove { min-width: 44px; min-height: 44px; }
  .cart-checkout { min-height: 56px; font-size: 16px; }
  .cart-summary__row--total .cart-summary__label,
  .cart-summary__row--total .cart-summary__value { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PDP-HALF-DOME-HERO-BUY-RESKIN-1 · v2 (22 May 2026)
   Hero + buy zone re-skin for Archive PDPs (Tee / Print / Complete).
   Scoped to .pdp wrapper · the Liquid surgery in product-archive-main.liquid
   + buy-panel.liquid wires existing variables into these new class hooks.
   These rules are ADDITIVE — they don't override existing .pdp-hero* /
   .pdp-main* / .pdp-buy* rules until the Liquid wraps the new markup.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §3 · Design tokens (PDP scope only — do not pollute global :root) ── */
.pdp,
[data-pdp-archive-reskin] {
  --f-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --paper: #F4F0E5;
  --paper-warm: #EFE9DA;
  --paper-band: #EFE9DA;
  --on-dark: #F2EDE4;

  --ink: #1A1A18;
  --ink-soft: #5E5A54;
  --line: rgba(26, 26, 24, 0.12);
  --line-strong: rgba(26, 26, 24, 0.22);

  --save-bg: #EEE3CC;
  --save-line: #DACFB6;
  --save-ink: #7A5E28;
  --gold: #B8956A;

  --cw: #2B4435;     /* active colourway · drives CTA · Forest default */
  --maxw: 1200px;
}

/* ── §4 · Component CSS ── */
.pdp .mono,
.pdp__grid .mono {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  line-height: 1.5;
}

/* shell · STEP 7 · paper background, no white wrapper behind */
.pdp {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px 40px 96px;
  background: #F4F0E5;
}

/* meta row */
.pdp__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  color: var(--ink-soft);
  padding-bottom: 40px;
}
.pdp__meta .archive-id {
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* grid */
.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  column-gap: 64px;
  row-gap: 36px;
  align-items: start;
}

/* trophy stat (row 1, col 1) */
.pdp-stat__value {
  color: var(--ink);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pdp-stat__sub {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.375;
  margin-top: 8px;
}
.pdp-stat--print .pdp-stat__sub,
.pdp-stat--complete .pdp-stat__sub { color: var(--ink-soft); }

/* intro paragraph (row 1, col 2) */
.pdp-intro {
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 440px;
  padding-top: 4px;
}

/* buy panel (row 2, col 2) · STEP 7 · scoped + full margin shorthand to keep Dawn margins out */
.pdp .pdp-buy { display: flex; flex-direction: column; }
.pdp .pdp-buy__title {
  margin: 0;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
}
.pdp .pdp-buy__material {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 470px;
  white-space: nowrap;
}
.pdp .pdp-buy__price-row {
  margin: 14px 0 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.pdp .pdp-buy__price {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.pdp .pdp-buy__was {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  text-decoration: line-through;
  color: var(--ink-soft);
}
.pdp .pdp-buy__save {
  align-self: center;
  background: var(--save-bg);
  color: var(--gold);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* field label · STEP 7 · margin shorthand */
.pdp .field { display: block; margin: 24px 0 0; }
.pdp .field__head {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 22px;
  margin: 0 0 8px;
  position: static;
}
.pdp .field__label {
  position: static;
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.pdp .field__value {
  position: static;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

/* edition selector · STEP 7 · margin shorthand */
.pdp .edition { position: relative; margin: 24px 0 0; }
.pdp .edition__label { display: block; position: static; margin: 0 0 8px; }
.pdp .edition__group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.pdp .edition__seg {
  appearance: none;
  position: static;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 13px 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  /* FIX-FS-01 (2026-06-22): the edition selector is a 3-col grid.
     When "Complete Edition" wraps to two lines (mobile + on every
     archive PDP), the grid row grows but the shorter Tee /
     Archival Print tabs keep their text top-anchored in the now-
     taller cell. Flex-centering centres the text on both axes so
     all three labels sit on the same baseline regardless of wrap. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp .edition__seg:first-child { border-left: 0; }
.pdp .edition__seg:hover:not(.is-active) { background: rgba(26, 26, 24, 0.04); }
.pdp .edition__seg.is-active { background: var(--ink); color: var(--on-dark); cursor: default; }
.pdp .edition--complete .edition__seg.is-active { background: var(--gold); color: #fff; }
.pdp .edition__save {
  position: absolute;
  left: 83.333%;
  top: 13px;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  background: var(--save-bg);
  border: 1px solid var(--save-line);
  color: var(--save-ink);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* colorway swatches · STEP 7 · circles enforced on the <button class="swatch"> element
   (paints color via inline style="background-color: HEX"). display:inline-block +
   box-sizing:border-box + explicit dimensions + 50% radius keep it perfectly circular. */
.pdp .swatches { display: flex; gap: 10px; margin: 4px 0 0; position: static; }
.pdp .swatch {
  appearance: none;
  position: static;
  display: inline-block;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.15s, transform 0.12s;
}
.pdp .swatch:hover { transform: scale(1.06); }
.pdp .swatch[aria-pressed="true"] { outline-color: var(--ink); }

/* size selector */
.pdp .sizes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  position: static;
}
.pdp .size {
  appearance: none;
  position: static;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pdp .size:hover:not([aria-pressed="true"]) { border-color: var(--line-strong); }
.pdp .size[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

/* print size (1 or 2 options, half width) */
.pdp .print-size {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  position: static;
}
.pdp .print-size .size { width: 100%; }

/* spec band · STEP 7 · margin shorthand, unified to 24px for all formats */
.pdp .spec-band {
  margin: 24px 0 0;
  background: var(--paper-band);
  border-radius: 4px;
  padding: 13px 16px;
  text-align: center;
}
.pdp .spec-band p {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.9;
}
.pdp .spec-band .lead { color: var(--ink-soft); }
.pdp .spec-band .pledge { color: var(--ink); }

/* add to cart · STEP 7 · margin shorthand */
.pdp .atc {
  appearance: none;
  margin: 16px 0 0;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: var(--cw);
  color: var(--on-dark);
  padding: 17px 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: background 0.35s, opacity 0.15s;
}
.pdp .atc:hover { opacity: 0.92; }
.pdp .atc:active { transform: translateY(1px); }
.pdp .atc.is-added { background: var(--ink); }

/* shipping line · STEP 7 · margin shorthand */
.pdp .shipping {
  margin: 18px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.9;
}

/* accordions · STEP 7 · icon + label + chev row · 32px body indent aligns with icon */
.pdp .accordions { margin: 30px 0 0; border-top: 1px solid var(--line); }
.pdp .acc { border-bottom: 1px solid var(--line); }
.pdp .acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 2px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink);
}
.pdp .acc > summary::-webkit-details-marker { display: none; }
.pdp .acc__icon { flex: none; color: var(--ink-soft); }
.pdp .acc__chev {
  margin-left: auto;
  flex: none;
  color: var(--ink-soft);
  transition: transform 0.2s ease;
}
.pdp .acc[open] .acc__chev { transform: rotate(45deg); }
.pdp .acc__body {
  padding: 0 2px 22px 32px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.pdp .acc__body p + p { margin-top: 8px; }
.pdp .acc__body a {
  color: var(--cw);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp .acc__body .dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
}
.pdp .acc__body .dl dt {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* responsive */
@media (max-width: 860px) {
  .pdp { padding: 36px 22px 64px; }
  .pdp__meta {
    flex-direction: column;
    gap: 6px;
    padding-bottom: 30px;
  }
  .pdp__meta .archive-id { white-space: normal; }
  .pdp__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .pdp-stat__value { font-size: 34px; }
  .pdp-stat__sub { font-size: 18px; }
  .pdp-buy__title { font-size: 40px; }
  .pdp-buy__price { font-size: 34px; }
  .pdp-buy__material { white-space: normal; }
}
@media (max-width: 420px) {
  .pdp .sizes { grid-template-columns: repeat(3, 1fr); }
  .pdp .edition__seg { letter-spacing: 0.04em; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PDP GALLERY — OVERRIDE DEFINITIU  2026-06-06
   !important en propietats en conflicte de cascada amb L5921 + L7435.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Marc principal: 3/4, omple el wrapper, fons paper */
.pdp-gallery__main {
  aspect-ratio: 3 / 4 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  background: var(--paper, #F4F0E5);
  overflow: hidden;
}

/* 2. Modificador fosc: conserva el canvas negre per a la galeria v6 */
.pdp-gallery__main--dark {
  background: #1A1A18 !important;
}

/* 3. Wrapper extern: transparent per a que __main controli el color */
.pdp-gallery--tee,
.pdp-gallery--print,
.pdp-gallery--complete {
  background: transparent;
}

/* 4. Figura + imatge omplen el marc */
.pdp-gallery__media {
  position: relative;
  width: 100%;
  height: 100%;
}

.pdp-gallery__media-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* 5. Thumbnails: 3/4 portrait, 80×107 desktop */
.pdp-gallery__thumb {
  width: 80px !important;
  height: 107px !important;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
}

.pdp-gallery__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .pdp-gallery__thumb {
    width: 64px !important;
    height: 85px !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════ */