/** Shopify CDN: Minification failed

Line 6070:77 Unexpected "*"

**/
/* =====================================================================
   Hubes Hub Custom Theme v1 — single stylesheet
   ---------------------------------------------------------------------
   Source of truth: design system v0.3 (260425_storefront-design-v0.3.html)
   Token contract: pdp-tokens.css (extended below with spacing, type
   scale, breakpoints, z-index, motion).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* ----- Brand palette ----- */
  --hh-navy: #1B2A4A;
  --hh-navy-deep: #102043;
  --hh-blue: #2E86DE;          /* Electric Blue — one per viewport */
  --hh-blue-hover: #2475C5;
  --hh-blue-tint: #EFF6FF;
  --hh-white: #FFFFFF;
  --hh-offwhite: #F8F9FA;
  --hh-border: #E0E4E8;
  --hh-border-soft: #EEF0F3;

  /* ----- Slate hierarchy (no opacity — four tokens, four jobs) ----- */
  --hh-text: #1A1A1A;
  --hh-text-body: #374151;
  --hh-text-slate: #5C6A7A;
  --hh-text-muted: #6C757D;
  --hh-icon-slate: #64748B;
  --hh-icon: var(--hh-navy);  /* Site-wide icon color convention — semantic alias of --hh-navy. Pass 4-bis Sub-step 4.5 lock 2026-05-04. */
  --hh-card-title: #1a3a5c;

  /* ----- Semantic ----- */
  --hh-success: #27AE60;
  --hh-success-bg: #D1FAE5;
  --hh-success-text: #155F2C;
  --hh-warning: #F39C12;
  --hh-warning-bg: #FEF3C7;
  --hh-warning-text: #92400E;
  --hh-error: #E74C3C;
  --hh-error-bg: #FEE2E2;
  --hh-error-text: #991B1B;

  /* ----- Type families ----- */
  --hh-font-heading: 'Barlow Semi Condensed', system-ui, -apple-system, sans-serif;
  --hh-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --hh-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hh-font-wordmark: 'Aggressive', var(--hh-font-heading); /* logo only */

  /* ----- Type scale ----- */
  --hh-fs-xs:   0.7rem;     /* 11.2px — micro labels */
  --hh-fs-sm:   0.82rem;    /* 13px   — utility text, trust bar */
  --hh-fs-base: 0.92rem;    /* 14.7px — body */
  --hh-fs-md:   1rem;       /* 16px   — nav, body large */
  --hh-fs-lg:   1.15rem;    /* 18.4px — small headings */
  --hh-fs-xl:   1.35rem;    /* 21.6px — section headings */
  --hh-fs-2xl:  1.75rem;    /* 28px   — page titles */
  --hh-fs-3xl:  2.25rem;    /* 36px   — hero headings */

  /* ----- Hero-scoped type scale (Phase 4 — Home hero only) -----
     Locked 2026-05-03 per Pass 3 H2 sign-off F3(b): hero-scoped tokens,
     not generalized. Don't promote to --hh-fs-h1-large; sizes are
     intentionally chosen for Home hero context, not for reuse on other
     surfaces. Atom reference docs/design-source/2026-05-02-snapshot/
     homepage.css:25,117 + Delta Brief A2 sizing locks (44/28/18). */
  --hh-fs-hero-h1-desktop:      44px;
  --hh-fs-hero-h1-mobile:       28px;
  --hh-fs-hero-h1-with-vehicle: 40px; /* atom .hero.with-vehicle h1 down-size */

  /* ----- Spacing scale (4px base) ----- */
  --hh-space-1: 4px;
  --hh-space-2: 8px;
  --hh-space-3: 12px;
  --hh-space-4: 16px;
  --hh-space-5: 24px;
  --hh-space-6: 32px;
  --hh-space-7: 48px;
  --hh-space-8: 64px;
  --hh-space-9: 96px;

  /* ----- Shape ----- */
  --hh-radius-sm: 4px;
  --hh-radius:    6px;
  --hh-radius-md: 10px;
  --hh-radius-lg: 16px;

  /* ----- Shadow ----- */
  --hh-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --hh-shadow:    0 2px 6px rgba(16, 24, 40, 0.08);
  --hh-shadow-md: 0 8px 20px rgba(16, 24, 40, 0.12);

  /* ----- Layout ----- */
  --hh-container-max: 1280px;
  --hh-container-pad: 16px;
  --hh-container-pad-lg: 24px;
  --hh-filters-width: 260px; /* 3c-1: collection filter sidebar; 3c+ tweak as one-line change */

  /* ----- Z-index ladder ----- */
  --hh-z-base:     1;
  --hh-z-banner:  10;
  --hh-z-header:  20;
  --hh-z-sticky:  25;
  --hh-z-drawer:  50;
  --hh-z-modal:  100;
  --hh-z-toast:  110;
  --hh-z-skip:   200;

  /* ----- Motion ----- */
  --hh-transition-fast:      120ms ease;  /* fast UI feedback (color shifts) */
  --hh-transition-component: 0.15s ease;  /* component-tier (chip hover lift, card hover) — Pass 6a Path C lock 2026-05-04 */
  --hh-transition:           200ms ease;
  --hh-transition-slow:      320ms ease;
  --hh-motion-drawer:        250ms ease-out;
  /* shared by filter drawer (3c-5) and cart drawer (3.5);
     third drawer should consume same token */

  /* ----- Scrim ----- */
  --hh-scrim: rgba(16, 32, 67, 0.55);
  /* navy-tinted overlay; consumed by mobile-nav drawer (Phase 1),
     filter drawer (3c-5), and cart drawer (3.5).
     Mobile-nav's opacity transition still uses --hh-transition (200ms);
     migrates to --hh-motion-drawer at Phase 9 drawer-parity work. */

  /* ----- Opacity-on-navy tokens (Pass 6c-δ — locked 2026-05-04) -----
     Use-case-based 5-token taxonomy (Lesson 50 REFINED) consolidating 9
     distinct hardcoded rgba(255,255,255,X) values surfaced in Pass 6c refresh
     audit across announce bar / header / footer / hero / mobile-nav / etc.
     Cluster-precise targets per refresh audit empirical inventory:
       Low cluster  (border / scrim): 0.06 / 0.08 / 0.12 / 0.16 → 2 tokens (faint / soft)
       High cluster (text):           0.78 / 0.82 / 0.85 → 2 tokens (muted / strong)
       Outlier (intentional emphasis): 0.95 → 1 escape-hatch token (vivid)
     Per Phase 1.5 architectural adjudication: 13 instances cluster-precise to
     primary 4 tokens; 1 instance preserved via vivid escape-hatch (hero
     credibility pill — high-prominence marketing emphasis, conversion-critical
     chrome); 1 instance off-taxonomy raw value preserved (PDP gallery count —
     white-pill-on-photo, NOT opacity-on-navy use-case). Per-instance migration
     in Pass 6c-δ-2 commit. */
  --hh-text-on-navy-strong:  rgba(255, 255, 255, 0.85);  /* primary text on navy chrome (cluster 0.82-0.85) */
  --hh-text-on-navy-muted:   rgba(255, 255, 255, 0.78);  /* secondary text on navy chrome (cluster 0.6-0.78) */
  --hh-text-on-navy-vivid:   rgba(255, 255, 255, 0.95);  /* Vivid tier: high-prominence marketing emphasis (e.g., hero credibility pill); use sparingly — preserves design intent for conversion-critical chrome */
  --hh-border-on-navy-soft:  rgba(255, 255, 255, 0.14);  /* visible border / inline accent (cluster 0.12-0.16) */
  --hh-border-on-navy-faint: rgba(255, 255, 255, 0.07);  /* faint scrim / minimal contrast (cluster 0.06-0.08) */

  /* ----- Card dim (collection no-fit state — Phase 3) -----
     Locked 2026-04-26 per Steve's tokenization approval.
     Used by .hh-card.hh-card--dim in card-product.liquid (Phase 3 build).
     Badge stays full saturation: .hh-card.hh-card--dim .hh-card__fit-badge { opacity: 1; filter: none; }
  */
  --hh-card-dim-opacity:    0.65;
  --hh-card-dim-saturation: 0.85;
}

/* ---------------------------------------------------------------------
   2. RESET + BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  line-height: 1.55;
  color: var(--hh-text);
  background: var(--hh-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

a {
  color: var(--hh-blue);
  text-decoration: none;
  transition: color var(--hh-transition-fast);
}
a:hover { color: var(--hh-blue-hover); }

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--hh-font-heading);
  font-weight: 700;
  color: var(--hh-text);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

h1 { font-size: var(--hh-fs-3xl); }
h2 { font-size: var(--hh-fs-2xl); }
h3 { font-size: var(--hh-fs-xl); }
h4 { font-size: var(--hh-fs-lg); font-weight: 600; }

p { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--hh-border);
  margin: var(--hh-space-5) 0;
}

/* ---------------------------------------------------------------------
   3. ACCESSIBILITY
   --------------------------------------------------------------------- */
.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;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  background: var(--hh-navy);
  color: var(--hh-white);
  padding: 10px 16px;
  z-index: var(--hh-z-skip);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--hh-radius);
  transition: top var(--hh-transition-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  color: var(--hh-white);
}

:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   Theme-wide breakpoint convention (locked Pass 6c-γ — 2026-05-04)
   ─────────────────────────────────────────────────────────────────────
   Standard breakpoint set for theme-wide responsive design discipline:
     max-width: 480px / 640px / 720px / 768px / 1024px
     min-width: 640px / 768px / 1024px

   Surface cluster mapping:
     480px       — Chrome detail (header/footer compression, PDP form/spec rows)
     640px       — Vehicle banner + PDP fitment table (sub-720 mobile detail)
     720px       — Atom canvas canonical (homepage hero/sections/chips, cart-empty,
                   404, PDP qty stepper, make-grid) — PRIMARY mobile breakpoint
     768px       — Trust bar + PDP gallery thumbs + collection sort (tablet boundary)
     1024px      — Header/footer/filters tablet chrome compression

   Pass 6c-γ consolidated 4 off-by-1 drift instances (639→640, 767→768 ×2,
   1023→1024) to align to this set. Future workstreams reference this set as
   starting position; new breakpoints outside this set require D-block
   adjudication per Lesson 48 (REFINED) — convention-locks at workstream-close
   establish reference set; ad-hoc additions trigger D-block adjudication.
   ───────────────────────────────────────────────────────────────────── */

/* Smooth in-page anchor scroll (Pass 7e SD-3) — supports Final CTA primary
   "Find Your Vehicle" → #hero anchor scroll-back to top YMM card. Theme-wide
   for any current/future in-page anchor navigation. The reduced-motion
   override below resets to `auto` for users who prefer reduced motion. */
html { scroll-behavior: smooth; }

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

/* ---------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.hh-container {
  width: 100%;
  max-width: var(--hh-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hh-container-pad);
  padding-right: var(--hh-container-pad);
}
@media (min-width: 768px) {
  .hh-container {
    padding-left: var(--hh-container-pad-lg);
    padding-right: var(--hh-container-pad-lg);
  }
}

.hh-stack > * + * { margin-top: var(--hh-space-4); }
.hh-stack-lg > * + * { margin-top: var(--hh-space-6); }

main { min-height: 50vh; display: block; }

/* ---------------------------------------------------------------------
   5. ANNOUNCEMENT BAR
   --------------------------------------------------------------------- */
.hh-announce {
  position: relative;
  background: var(--hh-navy-deep);
  color: var(--hh-white);
  font-size: var(--hh-fs-sm);
  text-align: center;
  padding: 10px 40px 10px var(--hh-container-pad);
  z-index: var(--hh-z-banner);
}
.hh-announce__inner {
  max-width: var(--hh-container-max);
  margin: 0 auto;
}
.hh-announce a {
  color: var(--hh-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hh-announce a:hover { color: var(--hh-blue-tint); }
.hh-announce strong { font-weight: 600; }
.hh-announce__close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--hh-text-on-navy-muted);
  padding: 6px;
  border-radius: var(--hh-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hh-announce__close:hover { color: var(--hh-white); background: var(--hh-border-on-navy-faint); }
.hh-announce[hidden] { display: none; }

/* ---------------------------------------------------------------------
   6. HEADER
   --------------------------------------------------------------------- */
.hh-header {
  background: var(--hh-white);
  color: var(--hh-text);
  position: relative;
  z-index: var(--hh-z-header);
  border-bottom: 1px solid var(--hh-border-soft);
}
.hh-header[data-sticky="true"] {
  position: sticky;
  top: 0;
}
.hh-header__inner {
  display: grid;
  /* logo · nav · search · tools — search takes flex middle (Phase 9c-X4 search port) */
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--hh-space-4);
  padding: var(--hh-space-4) 0;
}
/* Responsive breakpoints (commit 4 of nav-ux audit batch).
   Refactored from single ≤1024px collapse to a 4-tier ladder per
   docs/nav-ux-fixes.md:
     ≥1280px   : full nav + full search bar (default)
     1024-1279 : full nav, search collapses to icon-only (click/tab to expand)
     768-1023  : nav into drawer, search into drawer (hamburger entry)
     ≤767      : existing mobile (drawer search electric-blue submit) */

/* 1024-1279: search compact mode. Override the base `.sb { flex: 1 }`
   to a fixed-icon size; expand to ~280px on :focus-within. Tab key
   works for keyboard; .sb-icon click handler in header.liquid focuses
   the input for mouse users. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hh-header__inner > .sb {
    flex: 0 0 44px;
    max-width: 44px;
    overflow: hidden;
    transition: flex-basis 200ms ease, max-width 200ms ease;
  }
  .hh-header__inner > .sb:focus-within {
    flex: 0 0 280px;
    max-width: 280px;
  }
  .hh-header__inner > .sb .sb-form {
    cursor: pointer;
  }
  .hh-header__inner > .sb .sb-submit {
    display: none;
  }
  .hh-header__inner > .sb:focus-within .sb-submit {
    display: inline-flex;
  }
}

@media (max-width: 1023px) {
  /* Tablet/mobile: hide inline search bar (search lives in mobile drawer) */
  .hh-header__inner > .sb { display: none; }
}
@media (max-width: 767px) {
  /* Mobile: collapse nav into hamburger; layout is logo · 1fr · tools */
  .hh-header__inner { grid-template-columns: auto 1fr auto; }
}
.hh-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-space-2);
  font-family: var(--hh-font-wordmark);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hh-text);
  letter-spacing: 0.5px;
  text-decoration: none;
  line-height: 1;
}
.hh-header__logo:hover { color: var(--hh-text); }
.hh-header__logo img {
  /* Constrain via max-* + object-fit so natural aspect is preserved. Natural
     dimensions on the <img> attrs reserve layout space (no CLS); CSS scales
     down to fit the header without squishing. */
  max-width: var(--hh-logo-width-mobile, 120px);
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (min-width: 768px) {
  .hh-header__logo img { max-width: var(--hh-logo-width-desktop, 160px); }
}

.hh-header__nav {
  display: flex;
  gap: var(--hh-space-5);
  justify-self: center;
  flex-wrap: nowrap;
}
/* Top-level header nav typography (commit 1 of nav-ux audit batch).
   Atom-spec: Inter (body) / 14px / 500 weight / 0.01em letter-spacing /
   navy default color. Scope covers both the 4 linklist anchors AND the
   nav-shop-trigger button so all 5 top-level items render uniformly.
   The .nav-shop-trigger CSS farther down (§ Shop by Part Type dropdown)
   inherits this typography via cascade — only trigger-specific layout
   bits like the caret remain there. */
.hh-header__nav a,
.hh-header__nav .nav-shop-trigger {
  font-family: var(--hh-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hh-navy);
  padding: 8px 0;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
/* Hover state — atom-spec electric blue across all 5 top-level items
   (commit 2 of nav-ux audit batch). Splits the hover and aria-current
   rules: hover changes color to blue; the aria-current page indicator
   relies on the ::after underline below (color stays navy when on the
   active page so the active state reads as "you're here", not "hover").
   Trigger hover already has color: var(--hh-blue) on its own rule
   (line ~7920); descendant scope ensures parity for the 4 linklists. */
.hh-header__nav a:hover,
.hh-header__nav .nav-shop-trigger:hover {
  color: var(--hh-blue);
  transition: color 140ms ease;
}
/* Active-state underline parity (commit 3 of nav-ux audit batch).
   Linklist anchors get the same 4px height + 2px-radius indicator as
   .nav-shop-trigger--active::after below. Active detection IS already
   correct on the linklist via Shopify's `link.active` boolean → renders
   `aria-current="page"` (verified live: /blogs/all flags Blog with
   aria-current). The brief's claim that linklists had no active state
   was inaccurate — the prior 2px underline was rendering, just at half
   the trigger's height. This commit unifies at 4px. */
.hh-header__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: var(--hh-blue);
  border-radius: 2px 2px 0 0;
}

.hh-header__tools {
  display: flex;
  align-items: center;
  gap: var(--hh-space-3);
}

.hh-header__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  padding: 8px 12px;
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
  width: 240px;
  transition: background var(--hh-transition-fast), border-color var(--hh-transition-fast), color var(--hh-transition-fast);
}
.hh-header__search:hover {
  background: var(--hh-white);
  border-color: var(--hh-border-soft);
  color: var(--hh-text);
}
.hh-header__search svg { flex: 0 0 auto; }

.hh-header__icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hh-text);
  padding: 8px;
  position: relative;
  border-radius: var(--hh-radius);
  transition: background var(--hh-transition-fast);
}
.hh-header__icon-btn:hover { background: var(--hh-offwhite); }
.hh-header__icon-btn .label {
  font-size: var(--hh-fs-sm);
  font-weight: 500;
}
.hh-header__cart-count {
  /* 2f: navy background instead of --hh-blue for AA contrast on a 10px badge.
     Size-bump option unfit at this scale; background swap clears 12:1. */
  position: absolute;
  top: 2px;
  right: 0;
  background: var(--hh-navy);
  color: var(--hh-white);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hh-header__menu-toggle {
  display: none;
  color: var(--hh-text);
  padding: 8px;
  border-radius: var(--hh-radius);
}

/* Header — tablet/mobile (768-1023 + ≤767).
   Nav-into-drawer + hamburger entry. The 1024-1279 range keeps nav
   visible (handled by absence of these rules at that width). */
@media (max-width: 1023px) {
  .hh-header__nav { display: none; }
  .hh-header__search { display: none; }
  .hh-header__menu-toggle { display: inline-flex; }
  .hh-header__icon-btn .label { display: none; }
}

@media (max-width: 480px) {
  .hh-header__inner {
    gap: var(--hh-space-3);
    padding: var(--hh-space-3) 0;
  }
}

/* ---------------------------------------------------------------------
   7. MOBILE NAV DRAWER
   --------------------------------------------------------------------- */
.hh-mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--hh-scrim);
  z-index: var(--hh-z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hh-transition);
  /* opacity transition stays at --hh-transition (200ms) until Phase 9
     drawer-parity work; migrating to --hh-motion-drawer changes timing
     and easing, requires SR a11y re-test. */
}
.hh-mobile-nav[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.hh-mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--hh-navy);
  color: var(--hh-white);
  padding: var(--hh-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-4);
  transform: translateX(100%);
  transition: transform var(--hh-transition);
  overflow-y: auto;
}
.hh-mobile-nav[data-open="true"] .hh-mobile-nav__panel {
  transform: translateX(0);
}
.hh-mobile-nav__close {
  align-self: flex-end;
  color: var(--hh-white);
  padding: 8px;
}
.hh-mobile-nav__search {
  margin: 0 0 16px;
}
.hh-mobile-nav__search .sb {
  max-width: none;
}
.hh-mobile-nav__search .sb-submit {
  background: var(--hh-blue);
}
.hh-mobile-nav__list { display: flex; flex-direction: column; }
.hh-mobile-nav__list a {
  color: var(--hh-white);
  font-size: var(--hh-fs-lg);
  font-weight: 500;
  padding: var(--hh-space-3) 0;
  border-bottom: 1px solid var(--hh-border-on-navy-soft);
  text-decoration: none;
}
.hh-mobile-nav__list a:hover { color: var(--hh-blue); }

/* ---------------------------------------------------------------------
   8. TRUST BAR
   --------------------------------------------------------------------- */
.hh-trust {
  background: var(--hh-offwhite);
  border-bottom: 1px solid var(--hh-border);
  padding: 10px var(--hh-container-pad);
}
.hh-trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--hh-space-5);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-body);
  max-width: var(--hh-container-max);
  margin: 0 auto;
}
.hh-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hh-trust__check {
  color: var(--hh-success);
  font-weight: 700;
  display: inline-flex;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  /* Wider inter-item gap (24px vs internal 6px icon→label gap) prevents
     adjacent items from visually merging — the previous 12px was too close
     to the internal gap, making "tested" + truck-icon read as one chunk. */
  .hh-trust__list {
    gap: var(--hh-space-5);
    font-size: var(--hh-fs-xs);
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: var(--hh-space-6);
  }
  .hh-trust__list::-webkit-scrollbar { display: none; }
  /* Edge fade: visual cue that more items exist offscreen. Without it, a
     partial item icon at the viewport edge reads as the previous item's
     companion glyph (e.g., a green ✓ next to "Puerto Rico" looked like a
     confirmation, not the start of "30-day returns"). */
  .hh-trust { position: relative; }
  .hh-trust::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, var(--hh-offwhite), transparent);
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------------
   9. FOOTER
   --------------------------------------------------------------------- */
.hh-footer {
  background: var(--hh-navy);
  color: var(--hh-text-on-navy-strong);
  padding: var(--hh-space-8) 0 var(--hh-space-5);
  margin-top: var(--hh-space-9);
}
/* Continuous-navy adjacency: collapse footer margin when prior section is full-bleed navy.
   atom-design-intent-coherence-fix reasoning class — encodes atom design intent
   (continuous navy emphasis through footer).

   ── 3RD-CONSUMER ABSTRACTION EVENT (Phase 6b SD-2 — locked 2026-05-06) ──
   Pass 7e SD-4 (homepage final-cta; 1st consumer; locked 2026-05-05) +
   Phase 6a SD-2 (blog-landing newsletter; 2nd consumer; locked 2026-05-05) +
   Phase 6b SD-2 (article-template BlogFinalCta; 3rd consumer; locked 2026-05-06)
   →  Per L56 abstract-on-3rd-consumer rule, refactored 2 parallel `:has()` selectors
      to single unified rule keyed on `.hh-navy-terminus` marker class. Marker class
      added to all 3 navy-terminus consumer elements via 2 retroactive edits +
      1 new application:
        - .hh-home--final-cta (Pass 7e; retroactive add)
        - .hh-blog .bb-newsletter (Phase 6a; retroactive add)
        - .bp-final-cta (Phase 6b; new add)
      Refactor non-destructive: rule semantics unchanged across 3 surfaces.
      First 3rd-consumer abstraction event in theme history; validates Pass 7.0.4
      abstract-on-3rd discipline operationally.

   DOM-relationship note: Shopify wraps content sections inside <main>; footer-groups are <body>
   siblings of <main>, NOT siblings of content-section divs. :has() targets <main> as the carrier
   of the navy terminus class.

   `~` (general sibling) NOT `+` (adjacent sibling): Shopify's web-pixels-manager-sandbox-container
   is JS-injected into <body>; its insertion point relative to <main> varies (sometimes between
   <main> and footer-group, sometimes after footer-group), breaking adjacent-sibling combinator.
   General-sibling combinator matches any subsequent sibling regardless of intermediate DOM
   injection. Same specificity; robust against analytics DOM ordering. (Refined 2026-05-05 at
   Phase 6a Gate 3 after empirical observation of Pass 7e SD-4 flakiness on homepage.) */
main:has(.hh-navy-terminus) ~ .shopify-section-group-footer-group .hh-footer {
  margin-top: 0;
}
.hh-footer a {
  color: var(--hh-text-on-navy-muted);
  transition: color var(--hh-transition-fast);
}
.hh-footer a:hover { color: var(--hh-white); }

.hh-footer__top {
  display: grid;
  /* Audit fix #3 (2026-05-07) — 4 menu cols (Help & Returns / Shop /
     About / Legal) + 2fr brand col. Legal column carries Privacy +
     Terms of Service so they're reachable from every page. */
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--hh-space-6);
  margin-bottom: var(--hh-space-7);
}
@media (max-width: 1024px) {
  .hh-footer__top { grid-template-columns: 1fr 1fr; gap: var(--hh-space-5); }
}
@media (max-width: 480px) {
  .hh-footer__top { grid-template-columns: 1fr; gap: var(--hh-space-5); }
}

.hh-footer__brand {
  color: var(--hh-white);
  font-family: var(--hh-font-wordmark);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--hh-space-3);
  letter-spacing: 0.5px;
  display: inline-block;
}
.hh-footer__brand img {
  height: auto;
  width: 160px;
  max-height: 48px;
}
.hh-footer__tagline {
  color: var(--hh-text-on-navy-muted);
  font-size: var(--hh-fs-sm);
  line-height: 1.6;
  max-width: 36ch;
  margin-bottom: var(--hh-space-4);
}
/* Address + phone block in footer brand col (Phase 8 addition).
   Inherits the muted-on-navy treatment to match the tagline visually
   while still being distinct content. */
.hh-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
  color: var(--hh-text-on-navy-muted);
  font-size: var(--hh-fs-sm);
  line-height: 1.6;
  margin-bottom: var(--hh-space-4);
}
.hh-footer__address { color: var(--hh-text-on-navy-muted); }
.hh-footer__phone {
  color: var(--hh-text-on-navy-muted);
  text-decoration: none;
  transition: color 140ms ease;
}
.hh-footer__phone:hover { color: var(--hh-white); }
.hh-footer__menu-heading {
  color: var(--hh-white);
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-md);
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: var(--hh-space-3);
}
.hh-footer__menu li { margin-bottom: var(--hh-space-2); }
.hh-footer__menu a {
  font-size: var(--hh-fs-sm);
  text-decoration: none;
}

.hh-footer__social {
  display: flex;
  gap: var(--hh-space-3);
  margin-top: var(--hh-space-2);
}
.hh-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hh-border-on-navy-soft);
  border-radius: 50%;
  transition: border-color var(--hh-transition-fast), color var(--hh-transition-fast);
}
.hh-footer__social a:hover {
  border-color: var(--hh-blue);
  color: var(--hh-white);
}

.hh-footer__bottom {
  border-top: 1px solid var(--hh-border-on-navy-soft);
  padding-top: var(--hh-space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--hh-space-3);
  font-size: var(--hh-fs-xs);
  /* Pass 6c-δ-2: legal/copyright text — 0.6 → 0.78 (+18pp) accepted as a11y
     improvement per Phase 1.5 Q-1 Path A; previous opacity was below WCAG
     contrast threshold; consolidation produces design-system improvement. */
  color: var(--hh-text-on-navy-muted);
}
.hh-footer__bottom-links {
  display: flex;
  gap: var(--hh-space-4);
}
.hh-footer__bottom-links a {
  font-size: var(--hh-fs-xs);
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   10. BREADCRUMBS
   --------------------------------------------------------------------- */
.hh-crumbs {
  padding: var(--hh-space-3) 0;
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
}
.hh-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hh-space-1);
}
.hh-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-space-1);
}
.hh-crumbs__link {
  color: var(--hh-text-slate);
  text-decoration: none;
}
.hh-crumbs__link:hover {
  color: var(--hh-blue);
  text-decoration: underline;
}
.hh-crumbs__sep {
  color: var(--hh-text-muted);
  margin: 0 4px;
}
.hh-crumbs__current {
  color: var(--hh-text);
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   11. STOCK STATE (badge + visible variants — Phase 2 PDP)
   --------------------------------------------------------------------- */
.hh-stock-state { display: inline-flex; align-items: center; gap: 6px; }
.hh-stock-state--data { display: none; }

.hh-stock-state--badge {
  font-size: var(--hh-fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: var(--hh-radius-sm);
  text-transform: uppercase;
}
.hh-stock-state--badge.hh-stock-state--success {
  background: var(--hh-success-bg);
  color: var(--hh-success-text);
}
.hh-stock-state--badge.hh-stock-state--warning {
  background: var(--hh-warning-bg);
  color: var(--hh-warning-text);
}
.hh-stock-state--badge.hh-stock-state--muted {
  background: var(--hh-offwhite);
  color: var(--hh-text-slate);
  border: 1px solid var(--hh-border);
}

.hh-stock-state--visible {
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--hh-radius);
  border: 1px solid currentColor;
}
.hh-stock-state--visible.hh-stock-state--success {
  color: var(--hh-success-text);
  background: var(--hh-success-bg);
  border-color: var(--hh-success);
}
.hh-stock-state--visible.hh-stock-state--warning {
  color: var(--hh-warning-text);
  background: var(--hh-warning-bg);
  border-color: var(--hh-warning);
}
.hh-stock-state--visible.hh-stock-state--muted {
  color: var(--hh-text-slate);
  background: var(--hh-offwhite);
  border-color: var(--hh-border);
}
.hh-stock-state__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   12. PDP SPECIFICATIONS (config-driven, used Phase 2)
   --------------------------------------------------------------------- */
.hh-pdp-specs {
  margin: var(--hh-space-7) 0;
}
.hh-pdp-specs__heading {
  font-size: var(--hh-fs-xl);
  margin-bottom: var(--hh-space-5);
  padding-bottom: var(--hh-space-3);
  border-bottom: 1px solid var(--hh-border);
}
.hh-pdp-specs__group {
  margin-bottom: var(--hh-space-5);
}
.hh-pdp-specs__group-heading {
  font-size: var(--hh-fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hh-text-slate);
  margin-bottom: var(--hh-space-3);
}
.hh-pdp-specs__list {
  margin: 0;
  padding: 0;
}
.hh-spec__row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: var(--hh-space-3);
  padding: var(--hh-space-2) 0;
  border-bottom: 1px solid var(--hh-border-soft);
  align-items: baseline;
}
.hh-spec__row:last-child {
  border-bottom: 0;
}
.hh-spec__label {
  margin: 0;
  color: var(--hh-text-slate);
  font-size: var(--hh-fs-sm);
}
.hh-spec__value {
  margin: 0;
  color: var(--hh-text);
  font-size: var(--hh-fs-base);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hh-spec__mono {
  font-family: var(--hh-font-mono);
  font-size: var(--hh-fs-sm);
  background: var(--hh-offwhite);
  padding: 2px 6px;
  border-radius: var(--hh-radius-sm);
  color: var(--hh-text);
}
.hh-spec__copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--hh-text-muted);
  border-radius: var(--hh-radius-sm);
  transition: color var(--hh-transition-fast), background var(--hh-transition-fast);
}
.hh-spec__copy-btn:hover {
  color: var(--hh-blue);
  background: var(--hh-blue-tint);
}
.hh-spec__copy-btn[data-copied="true"] {
  color: var(--hh-success);
}
.hh-spec__list {
  margin: 0;
  padding-left: var(--hh-space-4);
  list-style: disc;
}
.hh-spec__list li {
  font-size: var(--hh-fs-base);
  margin-bottom: 2px;
}
.hh-spec__row--dimensions-line .hh-spec__value {
  font-family: var(--hh-font-body);
  white-space: nowrap;
  overflow-x: auto;
}

@media (max-width: 480px) {
  .hh-spec__row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: var(--hh-space-3) 0;
  }
  .hh-spec__label {
    font-size: var(--hh-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

/* ---------------------------------------------------------------------
   13. PDP — gallery + info block (Phase 2b scaffold)
   Structural CSS for the PDP grid, gallery, and info block. Consumers
   land in 2b sub-steps 2-7. Empty rules until Liquid renders content.
   --------------------------------------------------------------------- */

/* ── PDP container (replaces 2a's .hh-pdp shell when sub-steps 2+ ship) ── */
.hh-pdp {
  padding: var(--hh-space-5) 0 var(--hh-space-7);
}

/* ── Top-level grid: gallery left, info right at ≥1024px ── */
.hh-pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hh-space-5);
  margin-top: var(--hh-space-4);
}
@media (min-width: 1024px) {
  .hh-pdp-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--hh-space-6);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   GALLERY (.hh-pdp-gallery)
   Featured image left, thumbs vertical at ≥768px, horizontal scroll <768px.
   CSS-only thumb selection via radio + label trick — no JS required.
   ───────────────────────────────────────────────────────────────────── */
.hh-pdp-gallery {
  display: grid;
  gap: var(--hh-space-3);
  position: relative;
}
@media (min-width: 768px) {
  /* Desktop: position thumbs absolutely against the gallery's grid track
     so thumbs height is strictly bounded by main image's aspect-ratio:1/1
     (Phase 1 fix Jodi UAT 2026-05-10: previously thumbs extended below
     main image because grid track adopted thumbs' content-driven height).
     Main image keeps its natural grid placement; thumbs overlay the
     reserved 80px column with explicit top:0;bottom:0 binding. */
  .hh-pdp-gallery {
    position: relative;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
      "thumbs-spacer main";
  }
  .hh-pdp-gallery__main { grid-area: main; }
  .hh-pdp-gallery__thumbs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 80px;
  }
}
/* Radio inputs are direct children of .hh-pdp-gallery (so sibling selectors
   reach .hh-pdp-gallery__main). They're hidden via .hh-pdp-gallery__thumb-input
   rules below; positioning them absolute keeps them out of the grid flow. */

.hh-pdp-gallery__thumbs {
  display: flex;
  gap: var(--hh-space-2);
}
@media (min-width: 768px) {
  .hh-pdp-gallery__thumbs {
    flex-direction: column;
    /* Container height comes from absolute positioning (top:0;bottom:0
       on .hh-pdp-gallery__thumbs). Internal scroll fires when content
       (14 thumbs × 72px) exceeds the bounded height. */
    overflow-y: auto;
    /* Visible scrollbar (subtle) so buyer knows there's more below when
       count exceeds visible track. Replaces hidden scrollbar that left
       no scroll cue. */
    scrollbar-width: thin;
    scrollbar-color: var(--hh-border) transparent;
    /* Fade-out at bottom edge as a visual scroll cue. */
    mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
  }
}
/* Pass 6c-γ (locked 2026-05-04): 767px → 768px breakpoint consolidation per
   theme-wide standard set; off-by-1 drift fix from trust bar 768px cluster boundary. */
@media (max-width: 768px) {
  .hh-pdp-gallery__thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hh-pdp-gallery__thumbs::-webkit-scrollbar { display: none; }
}

.hh-pdp-gallery__thumb {
  width: 72px;
  height: 72px;
  border: 2px solid transparent;
  border-radius: var(--hh-radius);
  background: var(--hh-offwhite);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color var(--hh-transition-fast);
}
/* The actual flex item under .hh-pdp-gallery__thumbs is __thumb-label
   (label wraps the thumb span). flex-shrink:0 + 72px height enforced
   here prevents the flex parent from squashing labels when media count
   exceeds visible track (Jodi UAT 2026-05-10 regression: 14 thumbs
   compressed to ~43px each). */
.hh-pdp-gallery__thumb:hover { border-color: var(--hh-border); }
.hh-pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hh-pdp-gallery__thumb-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* NOTE on broken :checked + label rule (removed 2026-05-10):
   The previous rule .hh-pdp-gallery__thumb-input:checked + .hh-pdp-gallery__thumb-label
   never fired because labels are NOT direct siblings of inputs — labels are inside
   .hh-pdp-gallery__thumbs wrapper while inputs are direct children of .hh-pdp-gallery.
   Active-state border now applied via inline <style> ID-targeted rules generated in
   pdp-gallery.liquid (same pattern as the :checked ~ __main #image opacity rules). */
.hh-pdp-gallery__thumb-input:focus-visible ~ .hh-pdp-gallery__thumbs .hh-pdp-gallery__thumb-label {
  /* General-sibling selector (~) reaches across non-sibling-parent boundary — but
     this would target ALL labels. Specific focus-visible ring is handled per-input
     via inline <style> in pdp-gallery.liquid (ID-targeted, like active-state). */
}
.hh-pdp-gallery__thumb-label {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 72px;       /* Enforce 72px on flex axis (vertical at desktop, horizontal at mobile). Prevents flex parent from squashing labels when media count is high. */
  border: 2px solid transparent;
  border-radius: var(--hh-radius);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--hh-transition-fast), box-shadow var(--hh-transition-fast);
}
.hh-pdp-gallery__thumb-label:hover { border-color: var(--hh-border); }

.hh-pdp-gallery__main {
  position: relative;
  background: var(--hh-offwhite);
  border-radius: var(--hh-radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.hh-pdp-gallery__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--hh-transition);
}
.hh-pdp-gallery__image[data-active="true"] {
  opacity: 1;
  z-index: 1;
}
.hh-pdp-gallery__count {
  position: absolute;
  bottom: var(--hh-space-3);
  right: var(--hh-space-3);
  /* Pass 6c-δ-2 off-taxonomy: white pill on photo background, NOT
     opacity-on-navy chrome use-case — Pass 6c-δ token taxonomy scope-bounded
     (Lesson 50 REFINED). Preserved as raw rgba intentionally. */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  padding: 4px 10px;
  font-family: var(--hh-font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--hh-text-slate);
  z-index: 2;
}

/* Phase 2 main-image arrow nav (Jodi UAT 2026-05-10).
   Prev/Next buttons overlay the main image at left/right edges. Visible
   on hover + always on touch. Hidden when only 1 media (markup gates). */
.hh-pdp-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hh-border);
  color: var(--hh-text);
  cursor: pointer;
  box-shadow: var(--hh-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  transition: opacity var(--hh-transition-fast), background var(--hh-transition-fast), transform var(--hh-transition-fast);
  opacity: 0;          /* Hidden by default; revealed on gallery hover (desktop). */
}
.hh-pdp-gallery__nav--prev { left: var(--hh-space-3); }
.hh-pdp-gallery__nav--next { right: var(--hh-space-3); }
.hh-pdp-gallery__main:hover .hh-pdp-gallery__nav,
.hh-pdp-gallery__nav:focus-visible {
  opacity: 1;
}
.hh-pdp-gallery__nav:hover {
  background: rgba(255, 255, 255, 1);
}
.hh-pdp-gallery__nav:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-pdp-gallery__nav:active {
  transform: translateY(-50%) scale(0.95);
}
.hh-pdp-gallery__nav svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Touch / coarse-pointer: always show arrows since hover doesn't apply.
   Mobile + tablet buyers benefit from the discoverable arrow affordance. */
@media (hover: none), (pointer: coarse) {
  .hh-pdp-gallery__nav {
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   INFO BLOCK (.hh-pdp-info)
   Vertical stack with rhythm spacing. Eyebrow → title → PN → brand/MPN
   → price → stock → fitment → form → trust row.
   ───────────────────────────────────────────────────────────────────── */
.hh-pdp-info {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-4);
}
.hh-pdp-info > * { margin: 0; }

.hh-pdp__eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hh-text-slate);
}

.hh-pdp__title {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--hh-text);
  line-height: 1.2;
}
@media (min-width: 768px) {
  .hh-pdp__title { font-size: 1.6rem; }
}

/* OEM Part Number — large, copyable, mono */
.hh-pdp__pn {
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius-md);
  padding: var(--hh-space-3) var(--hh-space-4);
  background: var(--hh-offwhite);
}
.hh-pdp__pn-label {
  font-family: var(--hh-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hh-text-slate);
  margin-bottom: 2px;
}
.hh-pdp__pn-value {
  display: flex;
  align-items: center;
  gap: var(--hh-space-3);
  font-family: var(--hh-font-mono);
  font-size: var(--hh-fs-lg);
  font-weight: 500;
  color: var(--hh-text);
  letter-spacing: 0.3px;
}
.hh-pdp__pn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--hh-text-muted);
  border-radius: var(--hh-radius-sm);
  transition: color var(--hh-transition-fast), background var(--hh-transition-fast);
}
.hh-pdp__pn-copy:hover {
  color: var(--hh-blue);
  background: var(--hh-blue-tint);
}
.hh-pdp__pn-copy[data-copied="true"] {
  color: var(--hh-success);
}

/* Brand · MPN inline row */
.hh-pdp__brand-mpn {
  display: flex;
  align-items: center;
  gap: var(--hh-space-2);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
}
.hh-pdp__brand-mpn .sep { color: var(--hh-text-muted); }
.hh-pdp__mpn { font-family: var(--hh-font-mono); }

/* Price block */
.hh-pdp__price-block {
  display: flex;
  align-items: baseline;
  gap: var(--hh-space-3);
  flex-wrap: wrap;
}
.hh-pdp__price {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-2xl);
  font-weight: 700;
  color: var(--hh-text);
  line-height: 1;
}
.hh-pdp__price--sale { color: var(--hh-error-text); }
.hh-pdp__compare-at {
  font-size: var(--hh-fs-md);
  color: var(--hh-text-muted);
  text-decoration: line-through;
}
.hh-pdp__sale-badge {
  display: inline-flex;
  align-items: center;
  background: var(--hh-error-bg);
  color: var(--hh-error-text);
  font-size: var(--hh-fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--hh-radius-sm);
}

/* Fitment status row (inside info block) */
.hh-pdp__fitment {
  display: flex;
  align-items: center;
  gap: var(--hh-space-2);
  padding: var(--hh-space-3);
  border-radius: var(--hh-radius);
  font-size: var(--hh-fs-sm);
  border: 1px solid currentColor;
}
.hh-pdp__fitment--fits {
  color: var(--hh-success-text);
  background: var(--hh-success-bg);
  border-color: var(--hh-success);
}
.hh-pdp__fitment--no-fit {
  color: var(--hh-error-text);
  background: var(--hh-error-bg);
  border-color: var(--hh-error);
}
.hh-pdp__fitment--verify {
  color: var(--hh-warning-text);
  background: var(--hh-warning-bg);
  border-color: var(--hh-warning);
}
.hh-pdp__fitment--no-vehicle {
  color: var(--hh-text-slate);
  background: var(--hh-offwhite);
  border-color: var(--hh-border);
}
.hh-pdp__fitment--no-vehicle a {
  /* --hh-blue (#2E86DE) on --hh-offwhite (#F8F9FA) is 3.56:1, fails WCAG AA.
     Using --hh-navy (#1B2A4A) for ~10:1 contrast. Underline carries the
     "this is a link" affordance even without the bright accent. */
  color: var(--hh-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hh-pdp__fitment--no-vehicle a:hover {
  color: var(--hh-blue);
}

/* Variant pills */
.hh-pdp__variants {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-2);
}
.hh-pdp__variant-label {
  font-size: var(--hh-fs-sm);
  font-weight: 600;
  color: var(--hh-text-slate);
}
.hh-pdp__variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hh-space-2);
}
.hh-pdp__variant-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--hh-border);
  border-radius: 999px;
  background: var(--hh-white);
  color: var(--hh-text);
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--hh-transition-fast), background var(--hh-transition-fast);
}
.hh-pdp__variant-pill:hover { border-color: var(--hh-text-slate); }
.hh-pdp__variant-pill[aria-pressed="true"] {
  border-color: var(--hh-navy);
  background: var(--hh-navy);
  color: var(--hh-white);
}
.hh-pdp__variant-pill:disabled,
.hh-pdp__variant-pill[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Quantity input */
.hh-pdp__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  overflow: hidden;
  width: fit-content;
}
.hh-pdp__qty button {
  width: 36px;
  height: 36px;
  background: var(--hh-white);
  color: var(--hh-text);
  font-size: var(--hh-fs-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hh-pdp__qty button:hover { background: var(--hh-offwhite); }
.hh-pdp__qty button:disabled { color: var(--hh-text-muted); cursor: not-allowed; background: transparent; }
.hh-pdp__qty input {
  width: 48px;
  height: 36px;
  border: 0;
  border-left: 1px solid var(--hh-border);
  border-right: 1px solid var(--hh-border);
  text-align: center;
  font-size: var(--hh-fs-md);
  background: var(--hh-white);
  -moz-appearance: textfield;
}
.hh-pdp__qty input::-webkit-outer-spin-button,
.hh-pdp__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add to Cart button
   2f: text bumped to 19px / 700 to qualify as WCAG large text (3:1 threshold).
   White-on-blue at small-text 4.5:1 fails (3.76:1); large-text shift preserves
   the brand color while clearing AA. Same treatment on .hh-btn--primary below. */
.hh-pdp__atc {
  width: 100%;
  background: var(--hh-blue);
  color: var(--hh-white);
  font-family: var(--hh-font-body);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  padding: 14px 20px;
  border-radius: var(--hh-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hh-space-2);
  transition: background var(--hh-transition-fast);
}
.hh-pdp__atc:hover { background: var(--hh-blue-hover); }
.hh-pdp__atc:disabled,
.hh-pdp__atc[aria-disabled="true"] {
  background: var(--hh-text-muted);
  cursor: not-allowed;
}

/* Stoq mount — empty placeholder; Stoq's app embed injects into .hh-pdp__stoq-mount */
.hh-pdp__stoq-mount:empty { display: none; }
.hh-pdp__stoq-mount { margin-top: var(--hh-space-2); }

/* Trust row inside info block (2 items per Phase 2b decision) */
.hh-pdp__trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hh-space-4);
  padding-top: var(--hh-space-3);
  border-top: 1px solid var(--hh-border);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-body);
}
.hh-pdp__trust-row__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hh-pdp__trust-row__item svg { color: var(--hh-success); flex: 0 0 auto; }

/* Form layout — quantity + ATC inline on desktop, stacked tight on mobile */
.hh-pdp__form-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--hh-space-3);
  align-items: stretch;
}
@media (max-width: 480px) {
  .hh-pdp__form-row {
    grid-template-columns: 1fr;
  }
  .hh-pdp__form-row .hh-pdp__qty { width: 100%; justify-content: center; }
  .hh-pdp__form-row .hh-pdp__qty input { width: 100%; }
}

/* ---------------------------------------------------------------------
   14. PDP — fitment table + vehicle banner (Phase 2c)
   Vehicle banner ships available-but-not-on-by-default (Phase 8 flips
   it to default-on alongside the fitment DB swap).
   --------------------------------------------------------------------- */

/* ── Fitment table ── */
.hh-pdp-fitment-table {
  margin: var(--hh-space-7) 0;
}
.hh-pdp-fitment-table__heading {
  font-size: var(--hh-fs-xl);
  margin-bottom: var(--hh-space-5);
  padding-bottom: var(--hh-space-3);
  border-bottom: 1px solid var(--hh-border);
}
.hh-pdp-fitment-table__universal {
  background: var(--hh-blue-tint);
  border: 1px solid var(--hh-blue);
  border-radius: var(--hh-radius-md);
  padding: var(--hh-space-4);
  font-size: var(--hh-fs-md);
  color: var(--hh-text);
}
.hh-pdp-fitment-table__universal strong { color: var(--hh-navy); }

@media (min-width: 640px) {
  .hh-pdp-fitment-table__list {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hh-fs-sm);
  }
  .hh-pdp-fitment-table__list thead th {
    text-align: left;
    padding: var(--hh-space-3);
    background: var(--hh-offwhite);
    color: var(--hh-text-slate);
    font-family: var(--hh-font-mono);
    font-size: var(--hh-fs-xs);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--hh-border);
  }
  .hh-pdp-fitment-table__list tbody td {
    padding: var(--hh-space-3);
    border-bottom: 1px solid var(--hh-border-soft);
    vertical-align: top;
  }
  .hh-pdp-fitment-table__list tbody tr:last-child td {
    border-bottom: 0;
  }
  .hh-pdp-fitment-table__list .hh-pdp-fitment-table__years {
    font-family: var(--hh-font-mono);
    font-weight: 500;
    color: var(--hh-navy);
    white-space: nowrap;
  }
}

/* Mobile stacked card layout */
/* Pass 6c-γ (locked 2026-05-04): 639px → 640px breakpoint consolidation per
   theme-wide standard set (480/640/720/768/1024). Off-by-1 drift fix; visual no-op. */
@media (max-width: 640px) {
  .hh-pdp-fitment-table__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--hh-space-3);
  }
  .hh-pdp-fitment-table__list thead { display: none; }
  .hh-pdp-fitment-table__list .hh-pdp-fitment-table__row {
    display: block;
    background: var(--hh-offwhite);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-md);
    padding: var(--hh-space-3) var(--hh-space-4);
  }
  .hh-pdp-fitment-table__list td {
    display: block;
    padding: 2px 0;
  }
  .hh-pdp-fitment-table__list .hh-pdp-fitment-table__years {
    font-family: var(--hh-font-mono);
    font-weight: 600;
    color: var(--hh-navy);
    margin-bottom: 4px;
  }
  .hh-pdp-fitment-table__list .hh-pdp-fitment-table__makes::before {
    content: "Makes: ";
    color: var(--hh-text-slate);
    font-family: var(--hh-font-mono);
    font-size: var(--hh-fs-xs);
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .hh-pdp-fitment-table__list .hh-pdp-fitment-table__models::before {
    content: "Models: ";
    color: var(--hh-text-slate);
    font-family: var(--hh-font-mono);
    font-size: var(--hh-fs-xs);
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
}

/* ── Vehicle banner ── */
.hh-vehicle-banner {
  background: var(--hh-blue-tint);
  border-bottom: 1px solid var(--hh-border);
  padding: var(--hh-space-3) var(--hh-container-pad);
  font-size: var(--hh-fs-sm);
  z-index: var(--hh-z-banner);
  position: relative;
}
.hh-vehicle-banner[data-sticky="true"] {
  position: sticky;
  top: var(--hh-vehicle-banner-offset, 0);
}
.hh-vehicle-banner[data-hidden="true"] {
  display: none;
}
.hh-vehicle-banner__inner {
  max-width: var(--hh-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hh-space-3);
  flex-wrap: wrap;
}

/* State A — prominent dropdowns (no vehicle stored, on conversion-context pages) */
.hh-vehicle-banner--prominent .hh-vehicle-banner__form {
  display: flex;
  align-items: center;
  gap: var(--hh-space-2);
  flex-wrap: wrap;
}
.hh-vehicle-banner__form label {
  font-weight: 600;
  color: var(--hh-text);
}
.hh-vehicle-banner__form select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-white);
  color: var(--hh-text);
  font-size: var(--hh-fs-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  min-width: 110px;
}
.hh-vehicle-banner__form select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--hh-offwhite);
}
.hh-vehicle-banner__submit {
  background: var(--hh-navy);
  color: var(--hh-white);
  font-weight: 600;
  font-size: var(--hh-fs-sm);
  padding: 7px 14px;
  border-radius: var(--hh-radius);
  transition: background var(--hh-transition-fast);
}
.hh-vehicle-banner__submit:hover { background: var(--hh-navy-deep); }
.hh-vehicle-banner__submit:disabled,
.hh-vehicle-banner__submit[aria-disabled="true"] {
  background: var(--hh-text-muted);
  cursor: not-allowed;
}

/* State B — collapsed link (less-conversion-context pages) */
.hh-vehicle-banner--collapsed .hh-vehicle-banner__expand-btn {
  background: transparent;
  color: var(--hh-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--hh-fs-sm);
}

/* Stored vehicle state — appears once a vehicle is set */
.hh-vehicle-banner--stored {
  background: var(--hh-success-bg);
  color: var(--hh-success-text);
  border-bottom-color: var(--hh-success);
}
.hh-vehicle-banner__stored {
  display: flex;
  align-items: center;
  gap: var(--hh-space-3);
  flex-wrap: wrap;
  font-size: var(--hh-fs-sm);
}
.hh-vehicle-banner__stored strong { color: var(--hh-success-text); }
.hh-vehicle-banner__action {
  background: transparent;
  color: var(--hh-success-text);
  font-weight: 500;
  font-size: var(--hh-fs-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0 4px;
}
.hh-vehicle-banner__action:hover { color: var(--hh-navy); }
.hh-vehicle-banner__sep { color: var(--hh-icon-slate); }

@media (max-width: 640px) {
  .hh-vehicle-banner__inner { gap: var(--hh-space-2); }
  .hh-vehicle-banner__form { gap: 6px; }
  .hh-vehicle-banner__form select { min-width: 100px; font-size: var(--hh-fs-xs); }
  .hh-vehicle-banner__form label { display: none; }
}

/* ---------------------------------------------------------------------
   15. PDP — description (Phase 2d) + .hh-rte rich-text typography
   Description renders product.description (rich HTML from Admin) wrapped
   in .hh-rte for safe Admin-authored content. Headerless per decision 1.
   --------------------------------------------------------------------- */

.hh-pdp-description {
  margin: var(--hh-space-7) 0;
  max-width: 72ch;
}

/* Rich-text typography — scoped to .hh-rte so Admin-authored HTML inside
   product descriptions / page content / blog articles inherits sensible
   defaults without leaking into other surfaces. Restores bullets/numbers
   (the global ul/ol reset to list-style: none) and underlines links for
   a11y. Inline strong/em already inherit from body. */

.hh-rte > * + * { margin-top: var(--hh-space-3); }

.hh-rte p {
  font-size: var(--hh-fs-base);
  line-height: 1.65;
  color: var(--hh-text-body);
}

.hh-rte h2 {
  font-size: var(--hh-fs-xl);
  margin-top: var(--hh-space-5);
  margin-bottom: var(--hh-space-2);
  color: var(--hh-text);
}
.hh-rte h3 {
  font-size: var(--hh-fs-lg);
  margin-top: var(--hh-space-4);
  margin-bottom: var(--hh-space-2);
  color: var(--hh-text);
  font-weight: 600;
}
.hh-rte h4 {
  font-size: var(--hh-fs-md);
  margin-top: var(--hh-space-4);
  margin-bottom: var(--hh-space-2);
  color: var(--hh-text-body);
  font-weight: 600;
}

.hh-rte ul,
.hh-rte ol {
  /* Re-enable list bullets/numbers (global reset stripped them) */
  list-style: revert;
  padding-left: var(--hh-space-5);
  margin: var(--hh-space-3) 0;
}
.hh-rte li {
  font-size: var(--hh-fs-base);
  line-height: 1.65;
  color: var(--hh-text-body);
  margin-bottom: 4px;
}
.hh-rte li::marker { color: var(--hh-text-slate); }

.hh-rte a {
  /* Inherits color + hover from global `a`. Adds underline for a11y —
     color alone isn't a sufficient affordance inside body copy. */
  color: var(--hh-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hh-rte a:hover {
  color: var(--hh-blue-hover);
  text-decoration-thickness: 2px;
}

.hh-rte strong { font-weight: 600; color: var(--hh-text); }
.hh-rte em { font-style: italic; }

.hh-rte code {
  font-family: var(--hh-font-mono);
  font-size: 0.9em;
  background: var(--hh-offwhite);
  padding: 2px 6px;
  border-radius: var(--hh-radius-sm);
}

.hh-rte blockquote {
  margin: var(--hh-space-4) 0;
  padding: var(--hh-space-3) var(--hh-space-4);
  border-left: 3px solid var(--hh-blue);
  background: var(--hh-blue-tint);
  font-size: var(--hh-fs-base);
  color: var(--hh-text-body);
}

.hh-rte img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hh-radius);
  margin: var(--hh-space-3) 0;
}

.hh-rte hr {
  border: 0;
  border-top: 1px solid var(--hh-border);
  margin: var(--hh-space-5) 0;
}

/* ---------------------------------------------------------------------
   16. PDP — buyer-blocking callouts (Phase 2e)
   Two variants share base; --programming (amber) and --condition (blue)
   set semantic colors. 3px border-left identifies the callout class
   without dominating the box.

   Asymmetric structure (locked Phase 2e decision 2):
     programming → eyebrow + headline + body (3-tier)
     condition   → eyebrow + body (2-tier; no headline)

   Eyebrow tone matches border family for visual cohesion. Exact pixel
   color shifts one shade darker on the eyebrow TEXT (not the icon) for
   WCAG AA compliance — 11px mono caps fails 4.5:1 in pure tint. Border
   + icon stay in the tint color; eyebrow text and body use the dark
   variant of the same semantic family.

   Refinement to locked Phase 2e §5 decision 5 (2026-04-26): foundational
   accessibility standards win over exact-pixel visual decisions when they
   conflict. Brand signal preserved via 3px border + icon (2 of 3
   elements).
   --------------------------------------------------------------------- */

.hh-pdp__callout {
  padding: var(--hh-space-3) var(--hh-space-4);
  border-radius: var(--hh-radius-md);
  border-left: 3px solid currentColor; /* color set per variant below */
}
.hh-pdp__callout__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--hh-space-2);
  /* container color = variant tint (icon inherits) */
}
.hh-pdp__callout__eyebrow svg { flex: 0 0 auto; }
.hh-pdp__callout__eyebrow span {
  /* eyebrow text shifts darker per variant for WCAG AA — set below */
}

.hh-pdp__callout__headline {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-md);
  font-weight: 600;
  margin: 0 0 var(--hh-space-2) 0;
  /* color set per variant — uses dark text variant for contrast */
}
.hh-pdp__callout__body {
  font-size: var(--hh-fs-sm);
  line-height: 1.55;
  margin: 0;
  /* color set per variant — uses dark text variant for contrast */
}

/* ── Variant: programming (action-required, amber) ── */
.hh-pdp__callout--programming {
  background: var(--hh-warning-bg);
  color: var(--hh-warning); /* border + icon */
}
.hh-pdp__callout--programming .hh-pdp__callout__eyebrow span {
  color: var(--hh-warning-text); /* dark amber #92400E — eyebrow text WCAG AA */
}
.hh-pdp__callout--programming .hh-pdp__callout__headline,
.hh-pdp__callout--programming .hh-pdp__callout__body {
  color: var(--hh-warning-text); /* dark amber #92400E for AA contrast on warning-bg #FEF3C7 */
}

/* ── Variant: condition (informational, blue) ── */
.hh-pdp__callout--condition {
  background: var(--hh-blue-tint);
  color: var(--hh-blue); /* border + icon */
}
.hh-pdp__callout--condition .hh-pdp__callout__eyebrow span {
  color: var(--hh-navy); /* deep navy #1B2A4A — eyebrow text WCAG AA */
}
.hh-pdp__callout--condition .hh-pdp__callout__body {
  color: var(--hh-text); /* dark text #1A1A1A for AA contrast on blue-tint #EFF6FF */
}

/* ---------------------------------------------------------------------
   17. PDP — FAQ accordion (Phase 2f)
   Visible CSS-only <details> accordion. Rendered from
   product.metafields.custom.faq_schema.mainEntity[]. JSON-LD FAQPage
   in head emits the same content for Google Rich Results — visible
   accordion + structured data must match (no hidden-content penalty).
   --------------------------------------------------------------------- */

.hh-faq {
  margin-top: var(--hh-space-7);
  padding-top: var(--hh-space-6);
  border-top: 1px solid var(--hh-border);
}
.hh-faq__heading {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-lg);
  font-weight: 600;
  margin: 0 0 var(--hh-space-4) 0;
}
.hh-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-2);
}
.hh-faq__item {
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-white);
}
.hh-faq__item[open] {
  border-color: var(--hh-text-slate);
}
.hh-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--hh-space-3) var(--hh-space-4);
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: var(--hh-fs-md);
  color: var(--hh-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hh-space-3);
  border-radius: var(--hh-radius);
}
.hh-faq__summary::-webkit-details-marker { display: none; }
.hh-faq__summary::after {
  content: "+";
  font-weight: 400;
  font-size: 20px;
  color: var(--hh-text-slate);
  transition: transform var(--hh-transition-fast);
  flex: 0 0 auto;
}
.hh-faq__item[open] .hh-faq__summary::after {
  content: "−";
}
.hh-faq__summary:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-faq__answer {
  padding: 0 var(--hh-space-4) var(--hh-space-3) var(--hh-space-4);
  color: var(--hh-text);
  font-size: var(--hh-fs-sm);
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   18. SHARED — primary button (Phase 2f)
   White-on-blue text qualifies as WCAG large text at 19px / 700.
   Used by customer-page submits (login/register/reset). PDP ATC has
   its own .hh-pdp__atc rule with the same typography pattern.
   --------------------------------------------------------------------- */
.hh-btn--primary {
  background: var(--hh-blue);
  color: var(--hh-white);
  font-family: var(--hh-font-body);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--hh-radius);
  cursor: pointer;
  transition: background var(--hh-transition-fast);
}
.hh-btn--primary:hover { background: var(--hh-blue-hover); }
.hh-btn--primary:focus-visible {
  outline: 2px solid var(--hh-navy);
  outline-offset: 2px;
}
.hh-btn--primary:disabled,
.hh-btn--primary[aria-disabled="true"] {
  background: var(--hh-text-muted);
  cursor: not-allowed;
}
.hh-btn--primary[data-full] {
  width: 100%;
}

/* ---------------------------------------------------------------------
   19. SHARED — card-product (Phase 2g, used everywhere a product appears
   in a list: PDP related, collection grid, homepage modules, search).
   API contract locked in snippets/card-product.liquid header.
   Square 1:1 image with aspect-ratio reservation prevents CLS on lazy
   image load. Hover lift + shadow signals interactivity.
   --------------------------------------------------------------------- */

.hh-card-product {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--hh-white);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  overflow: hidden;
  transition: transform var(--hh-transition-fast), box-shadow var(--hh-transition-fast), border-color var(--hh-transition-fast);
}
.hh-card-product:hover,
.hh-card-product:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--hh-shadow-md, 0 6px 16px rgba(0, 0, 0, 0.08));
  border-color: var(--hh-text-slate);
  outline: 0;
}
.hh-card-product:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-card-product__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--hh-bg-soft, #F5F6F8);
  overflow: hidden;
}
.hh-card-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hh-card-product__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hh-text-slate);
  font-size: var(--hh-fs-sm);
}
.hh-card-product__body {
  padding: var(--hh-space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hh-card-product__eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--hh-text-slate);
}
.hh-card-product__title {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  color: var(--hh-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.8em;
}
.hh-card-product__price {
  font-size: var(--hh-fs-md);
  font-weight: 600;
  color: var(--hh-text);
  margin-top: 2px;
}
.hh-card-product__price-from {
  font-size: var(--hh-fs-sm);
  font-weight: 400;
  color: var(--hh-text-slate);
  margin-right: 2px;
}

/* ── Collection vehicle banner (replaces Phase 3d card-dim, 2026-05-10) ──
   Surfaces stored vehicle on collection pages without URL filter applied.
   Replaces auto-dim-non-matching-cards behavior with explicit
   Apply / Change / Clear affordances. See lesson #23 in
   docs/category-architecture-best-practices.md.
   Visual language mirrors .hh-cart__vehicle-bar (cart drawer + /cart):
   success-tinted surface, check icon, vehicle name, action row. Apply
   primary action is outlined-button treatment (border + transparent
   fill, --hh-blue) for affordance signal without filled-button loudness. */
.hh-collection__vehicle-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hh-space-2);
  padding: var(--hh-space-3) var(--hh-space-4);
  background: var(--hh-success-bg);
  border: 1px solid var(--hh-success);
  border-radius: var(--hh-radius);
  margin-bottom: var(--hh-space-4);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text);
}
.hh-collection__vehicle-banner[hidden] { display: none; }
.hh-collection__vehicle-banner__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hh-success);
  flex-shrink: 0;
}
.hh-collection__vehicle-banner__text { flex: 1 1 auto; min-width: 0; }
.hh-collection__vehicle-banner__name { font-weight: 600; }
.hh-collection__vehicle-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--hh-space-2);
  flex-wrap: wrap;
}
.hh-collection__vehicle-banner__sep {
  color: var(--hh-text-muted);
  margin: 0 2px;
}
.hh-collection__vehicle-banner__apply {
  /* Outlined-button treatment: border + transparent fill (option (c)).
     Sits between filled CTAs and text-link actions in the brand button
     hierarchy. Provides affordance signal that Apply is the primary
     action without the marketing tone of a filled blue button. */
  background: transparent;
  border: 1px solid var(--hh-blue);
  color: var(--hh-blue);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--hh-radius);
  cursor: pointer;
  white-space: nowrap;
}
.hh-collection__vehicle-banner__apply:hover {
  background: var(--hh-blue-tint);
  border-color: var(--hh-blue-hover);
  color: var(--hh-blue-hover);
}
.hh-collection__vehicle-banner__apply:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-collection__vehicle-banner__action {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--hh-blue);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.hh-collection__vehicle-banner__action:hover { text-decoration: underline; }
.hh-collection__vehicle-banner__action:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
/* Mobile compact: <480px shrinks padding and abbreviates implicit text
   wrapping, keeping the banner inside one screen-row when actions wrap. */
@media (max-width: 480px) {
  .hh-collection__vehicle-banner {
    padding: var(--hh-space-2) var(--hh-space-3);
    gap: var(--hh-space-1);
  }
  .hh-collection__vehicle-banner__actions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 4px;
  }
}

/* ── Related products section (PDP consumer of card-product) ── */
/* Wrapper reserves space before SRA fetch populates the section, preventing
   CLS when populated content drops in post-paint. Mobile 2x2 ≈ 2 image rows
   + body padding ≈ 540px; desktop 4-up ≈ 1 row ≈ 380px. Min-height matches
   populated state so the SRA result lands without shift. */
.hh-related-wrapper {
  min-height: 540px;
}
@media (min-width: 768px) {
  .hh-related-wrapper {
    min-height: 380px;
  }
}
.hh-related-wrapper:empty,
.hh-related-wrapper:not(:has(.hh-related)) {
  /* If SRA returns empty (no recommendations), collapse the reservation so
     the section omits cleanly. :has() supported in all modern browsers. */
  min-height: 0;
}
.hh-related {
  margin-top: var(--hh-space-7);
  padding-top: var(--hh-space-6);
  border-top: 1px solid var(--hh-border);
}
.hh-related__heading {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-lg);
  font-weight: 600;
  margin: 0 0 var(--hh-space-4) 0;
}
.hh-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hh-space-3);
}
@media (min-width: 768px) {
  .hh-related__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hh-space-4);
  }
}

/* ---------------------------------------------------------------------
   20. UTILITY: empty-page placeholder (Phase 1 only)
   Removed in Phase 4 when real homepage sections land.
   --------------------------------------------------------------------- */
.hh-empty-state {
  padding: var(--hh-space-9) 0;
  text-align: center;
  color: var(--hh-text-slate);
}
.hh-empty-state h1 { margin-bottom: var(--hh-space-3); color: var(--hh-text); }
.hh-empty-state p { font-size: var(--hh-fs-md); max-width: 56ch; margin: 0 auto var(--hh-space-5); }

/* ─────────────────────────────────────────────────────────────────────
   Collection grid + header
   Phase 3 sub-phase 3a-v. Ships header chrome (H1 + count + description)
   + responsive product grid (2/3/4-up) + zero-product empty state.
   3c will extend with .hh-collection__filters; 3d with .pcard.dim.
   ───────────────────────────────────────────────────────────────────── */
.hh-collection {
  padding-block: var(--hh-space-6) var(--hh-space-8);
}

/* ── Header (breadcrumbs renders above this block, inside the snippet) ── */
.hh-collection__header {
  margin-bottom: var(--hh-space-5);
}
.hh-collection__title {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  margin: 0 0 var(--hh-space-2) 0;
}
@media (min-width: 768px) {
  .hh-collection__title { font-size: var(--hh-fs-3xl); }
}
.hh-collection__count {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-4) 0;
}
.hh-collection__description {
  color: var(--hh-text-body);
  max-width: 72ch;
  margin-top: var(--hh-space-3);
}

/* ── Grid: 2-up <768px / 3-up 768–1023px / 4-up ≥1024px ── */
.hh-collection__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hh-space-4);
}
@media (min-width: 768px) {
  .hh-collection__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .hh-collection__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Empty-state component (3c-6 framework lock) ──
   Replaces .hh-collection__empty (3a baseline). State-based component
   coordinates zero-products / filter-result-zero / zero-fit-ymm renders.
   See snippets/collection-empty-state.liquid for the state-by-state
   copy + recovery actions. */
.hh-collection-empty-state {
  padding: var(--hh-space-8) var(--hh-space-4);
  text-align: center;
  color: var(--hh-text-slate);
  border: 1px dashed var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-surface, transparent);
  max-width: 56ch;
  margin: var(--hh-space-5) auto;
}
.hh-collection-empty-state__title {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-xl);
  font-weight: 600;
  color: var(--hh-text);
  margin: 0 0 var(--hh-space-3) 0;
}
.hh-collection-empty-state__message {
  font-size: var(--hh-fs-md);
  color: var(--hh-text-body);
  margin: 0 0 var(--hh-space-5) 0;
}
.hh-collection-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hh-space-3);
}
.hh-collection-empty-state__action {
  display: inline-flex;
  align-items: center;
  padding: var(--hh-space-2) var(--hh-space-4);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  font-weight: 600;
  color: var(--hh-navy);
  background: transparent;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hh-collection-empty-state__action:hover {
  border-color: var(--hh-blue);
  color: var(--hh-blue);
}
.hh-collection-empty-state__action:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-collection-empty-state__action--primary {
  color: var(--hh-white);
  background: var(--hh-blue);
  border-color: var(--hh-blue);
}
.hh-collection-empty-state__action--primary:hover {
  background: var(--hh-blue-hover);
  border-color: var(--hh-blue-hover);
  color: var(--hh-white);
}

/* ─────────────────────────────────────────────────────────────────────
   Collection layout + filter sidebar
   Phase 3 sub-phase 3c-1. Two-column desktop layout (filters LEFT, content
   RIGHT); mobile collapses to single column with filters hidden until 3c-5
   drawer trigger lands. .hh-filters renders only when collection.filters.size
   > 0 (S&D facets configured) — see snippets/collection-filters.liquid.
   ───────────────────────────────────────────────────────────────────── */
.hh-collection__layout {
  /* mobile: single column. Filter <aside> (when in DOM) is hidden via .hh-filters rule below. */
  display: block;
}
@media (min-width: 1024px) {
  .hh-collection__layout {
    display: flex;
    align-items: flex-start;
    gap: var(--hh-space-5);
  }
}

.hh-collection__main {
  /* min-width: 0 prevents grid children from blowing out the flex container at desktop */
  min-width: 0;
}
@media (min-width: 1024px) {
  .hh-collection__main { flex: 1; }
}

/* Filter sidebar / mobile drawer dual-surface (3c-5).
   At ≥1024px the <aside> renders inline as a static sidebar (left column).
   At <1024px the same <aside> becomes a fixed-position drawer that slides
   in from the right via [data-open="true"]. Single source of truth in
   collection-filters.liquid; no separate mobile fragment. */

/* ── Mobile drawer state (default; <1024px) ── */
.hh-filters {
  /* Off-screen by default at mobile; slides in via data-open="true" */
  position: fixed;
  inset: 0 0 0 auto;
  width: 100%;
  max-width: 380px;
  background: var(--hh-white);
  z-index: var(--hh-z-drawer);
  transform: translateX(100%);
  transition: transform var(--hh-motion-drawer);
  overflow-y: auto;
  /* Scroll-chaining fix (2026-05-08): prevents wheel events from bubbling
     to the page when sidebar's internal scroll reaches its bound. Applied
     to base rule so it covers BOTH mobile drawer AND desktop sticky sidebar
     (defense-in-depth — mobile drawer is fixed/full-screen so chain is
     less visible, but covering both is safe and free). */
  overscroll-behavior: contain;
  /* Subtle always-visible scrollbar (2026-05-08): browser-default
     scrollbar auto-hides on macOS, leaving no affordance that the sidebar
     is scrollable. Thin scrollbar in muted token color signals scrollable
     without competing visually with the filter content. Firefox/Chromium
     standard properties + WebKit fallback for older Safari. */
  scrollbar-width: thin;
  scrollbar-color: var(--hh-text-muted) transparent;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.hh-filters::-webkit-scrollbar {
  width: 8px;
}
.hh-filters::-webkit-scrollbar-track {
  background: transparent;
}
.hh-filters::-webkit-scrollbar-thumb {
  background: var(--hh-text-muted);
  border-radius: 4px;
}
.hh-filters::-webkit-scrollbar-thumb:hover {
  background: var(--hh-text-slate, var(--hh-text));
}
.hh-filters[data-open="true"] {
  transform: translateX(0);
}

/* Drawer header (visible only on mobile; absent visual at desktop because
   .hh-filters__close hides and the h2 remains as section heading) */
.hh-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hh-space-3);
  padding: var(--hh-space-4);
  border-bottom: 1px solid var(--hh-border);
  background: var(--hh-white);
  position: sticky;
  top: 0;
  z-index: 1;
}
.hh-filters__title {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-lg);
  font-weight: 600;
  color: var(--hh-text);
  margin: 0;
}
.hh-filters__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: var(--hh-radius);
  color: var(--hh-text-slate);
  cursor: pointer;
}
.hh-filters__close:hover { color: var(--hh-text); background: var(--hh-surface-alt, #f1f4f9); }
.hh-filters__close:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}

/* Form fills drawer; footer sticks to bottom on mobile */
.hh-filters__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--hh-space-4);
  margin: 0;
}

/* Sticky drawer footer (mobile) — Apply + Clear */
.hh-filters__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hh-space-3);
  margin: auto calc(var(--hh-space-4) * -1) calc(var(--hh-space-4) * -1) calc(var(--hh-space-4) * -1);
  padding: var(--hh-space-3) var(--hh-space-4);
  background: var(--hh-white);
  border-top: 1px solid var(--hh-border);
}
.hh-filters__clear {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 600;
  color: var(--hh-navy);  /* AA contrast — same fix as 3c-4 pills Clear-all */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hh-filters__clear:hover { color: var(--hh-blue); }
.hh-filters__clear:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}

/* ── Desktop sidebar state (≥1024px) ──
   3c-6 sticky-overflow polish: sidebar becomes self-scrolling when its
   total height exceeds viewport. Cascade-active sidebar with all 3 facets
   can hit ~1200px; on a 700-900px laptop viewport, internal scroll keeps
   Year facet reachable without page-scrolling past the grid.

   Assumption locked at 3c-6 build: header is NOT sticky by default.
   Concrete setting: `Header` section → `Sticky on scroll` toggle (Liquid:
   `section.settings.sticky` in sections/header.liquid; default false in
   header-group.json). When toggled true, header.liquid renders
   `data-sticky="true"` and the .hh-header[data-sticky="true"] rule (line
   305 of this file) sets position:sticky + top:0 on the header.

   If Chris/Jodi enable that toggle later, this sidebar's `top:
   var(--hh-space-5)` would overlap. Remediation: add --hh-header-offset
   token (read header height, e.g., via JS or a fixed token) and change
   sidebar top to `calc(var(--hh-header-offset) + var(--hh-space-5))`.
   Audit trigger: any commit that sets header-group.json sticky to true,
   or any theme-editor save that flips the same setting in production. */
@media (min-width: 1024px) {
  .hh-filters {
    /* Reset drawer fixed positioning; behave as static sticky sidebar.
       Order matters: `inset` is a shorthand that sets top/right/bottom/left,
       so it must come BEFORE `top` — otherwise inset:auto overwrites the
       top: var(--hh-space-5) and the element sticks at scroll-pos rather
       than the intended offset. */
    position: sticky;
    inset: auto;
    top: var(--hh-space-5);
    width: auto;
    max-width: none;
    flex: 0 0 var(--hh-filters-width);
    transform: none;
    transition: none;
    /* Self-scroll when sidebar height exceeds viewport — overflow polish */
    max-height: calc(100vh - var(--hh-space-9));
    overflow-y: auto;
    background: transparent;
    z-index: auto;
  }
  .hh-filters__header {
    padding: 0;
    border: 0;
    background: transparent;
    position: static;
    margin: 0;  /* No vertical bump — picker becomes the first visible element */
  }
  .hh-filters__close { display: none; }  /* No close button on static sidebar */
  /* Visually hide the "Filters" heading at desktop so the rail aligns top-flush
     with the toolbar's "Sort by" row in the main column (per Cymm spec §5
     "In context": picker is the topmost visible element in the rail).
     Stays in the accessibility tree as a heading landmark for screen readers. */
  .hh-filters__title {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .hh-filters__form {
    padding: 0;
  }
  /* Footer hidden at desktop; auto-submit handles changes, no Apply needed */
  .hh-filters__footer { display: none; }
}

/* ── Drawer scrim (3c-5) — visible only at mobile when drawer open ── */
.hh-filter-drawer-scrim {
  position: fixed;
  inset: 0;
  background: var(--hh-scrim);
  z-index: calc(var(--hh-z-drawer) - 1);  /* below drawer, above content */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hh-motion-drawer);
}
.hh-filter-drawer-scrim[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 1024px) {
  .hh-filter-drawer-scrim { display: none; }  /* No drawer at desktop, no scrim */
}

/* ── Toolbar (3c-5) — wraps trigger + sort row at mobile ── */
.hh-collection__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hh-space-3);
  margin-bottom: var(--hh-space-4);
  flex-wrap: wrap;
}
.hh-collection__toolbar > .hh-collection__sort {
  margin-bottom: 0;  /* toolbar handles bottom spacing now */
}

/* ── Filter trigger button (3c-5) — mobile only ── */
.hh-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-space-2);
  padding: var(--hh-space-2) var(--hh-space-3);
  background: var(--hh-white);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  font-weight: 600;
  color: var(--hh-text);
  cursor: pointer;
}
.hh-filter-trigger:hover { border-color: var(--hh-blue); color: var(--hh-blue); }
.hh-filter-trigger:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-filter-trigger__icon { flex: 0 0 auto; }
@media (min-width: 1024px) {
  .hh-filter-trigger { display: none; }  /* Trigger hidden at desktop (sidebar visible) */
}

/* Filter form & facet groups (3c-2: Make + Year; 3c-3 adds Model cascade) */
.hh-filters__form { margin: 0; }

.hh-filters__group {
  border: 0;
  margin: 0 0 var(--hh-space-5) 0;
  padding: 0;
}

.hh-filters__legend {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-md);
  font-weight: 600;
  color: var(--hh-text);
  margin: 0 0 var(--hh-space-3) 0;
  padding: 0 0 var(--hh-space-2) 0;
  border-bottom: 1px solid var(--hh-border);
  width: 100%;
}

.hh-filters__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-2);
  max-height: 320px;
  overflow-y: auto;
}

.hh-filters__option {
  display: flex;
  align-items: center;
  gap: var(--hh-space-2);
  cursor: pointer;
  padding: var(--hh-space-1) 0;
  font-size: var(--hh-fs-base);
  color: var(--hh-text-body);
}
.hh-filters__option:hover .hh-filters__option-label { color: var(--hh-text); }

.hh-filters__option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--hh-blue);
}
.hh-filters__option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}

.hh-filters__option-label {
  flex: 1;
  min-width: 0;
}

.hh-filters__option-count {
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
  flex: 0 0 auto;
}

/* ── Accordion variant — Phase 2 Commit 2 (2026-05-08) ──
   Non-YMM filters (Part Type, Availability) use <details>/<summary>
   for browser-native collapsible groups. YMM filters (Make/Model/Year)
   stay as <fieldset>/<legend> until the YMM picker design lands.

   <details> default-open via the `open` attribute in Liquid; user can
   collapse. Pattern mirrors sections/main-page-faq.liquid. */
.hh-filters__group--accordion {
  /* <details> element — keep margin parity with fieldset variant */
  border: 0;
  margin: 0 0 var(--hh-space-5) 0;
  padding: 0;
}
.hh-filters__legend--accordion {
  /* <summary> element — keep typography parity with fieldset .hh-filters__legend
     but make it interactive (cursor + flex layout for chevron). Reset the
     native list-marker that <summary> renders by default. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hh-space-2);
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-md);
  font-weight: 600;
  color: var(--hh-text);
  margin: 0 0 var(--hh-space-3) 0;
  padding: 0 0 var(--hh-space-2) 0;
  border-bottom: 1px solid var(--hh-border);
  cursor: pointer;
  list-style: none; /* Firefox + standard */
  user-select: none;
}
.hh-filters__legend--accordion::-webkit-details-marker { display: none; } /* Safari */
.hh-filters__legend--accordion:hover { color: var(--hh-blue); }
.hh-filters__legend--accordion:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
  border-radius: var(--hh-radius-sm, 4px);
}
.hh-filters__chevron {
  flex: 0 0 auto;
  color: var(--hh-text-slate);
  transition: transform var(--hh-transition-fast, 150ms ease);
}
.hh-filters__group--accordion[open] > .hh-filters__legend--accordion .hh-filters__chevron {
  transform: rotate(180deg);
}

/* Show-more cap (Phase 2 Commit 3): rows beyond the cap have
   data-overflow="true" and stay hidden until JS toggles
   .hh-filters__group--expanded on the parent <details>. */
.hh-filters__option-row--overflow { display: none; }
.hh-filters__group--expanded .hh-filters__option-row--overflow { display: list-item; }

.hh-filters__show-more {
  display: block;
  margin: var(--hh-space-2) 0 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--hh-blue);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.hh-filters__show-more:hover { text-decoration: underline; }
.hh-filters__show-more:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
  border-radius: var(--hh-radius-sm, 4px);
}

/* Apply submit button — visibility matrix (3c-2 + 3c-5):
     Desktop + JS:    hidden (auto-submit on checkbox change)
     Desktop + no-JS: visible (.no-js fallback for crawlers + a11y audits)
     Mobile + JS:     visible (3c-5 batch+apply pattern)
     Mobile + no-JS:  visible (same path)
   Styling is base-applied; only display rules toggle visibility. */
.hh-filters__submit {
  display: none;  /* Default: desktop + JS (auto-submit handles changes) */
  padding: var(--hh-space-2) var(--hh-space-4);
  background: var(--hh-blue);
  color: var(--hh-white);
  border: 1px solid var(--hh-blue);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  font-weight: 600;
  cursor: pointer;
}
.hh-filters__submit:hover { background: var(--hh-blue-hover); }
.hh-filters__submit:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.no-js .hh-filters__submit { display: inline-block; }  /* No-JS desktop fallback */
/* Pass 6c-γ (locked 2026-05-04): 1023px → 1024px breakpoint consolidation per
   theme-wide standard set; aligns to header/footer chrome cluster (1024px). */
@media (max-width: 1024px) {
  .hh-filters__submit { display: inline-block; }  /* Mobile batch+apply */
}

/* Active filter pills + Clear-all (3c-4) — renders between sort and grid
   when ≥1 filter is applied. Whole-chip click target removes that filter.
   Independent of sidebar cascade gate; pills always reflect URL state. */
.hh-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hh-space-2);
  margin: 0 0 var(--hh-space-4) 0;
}

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

.hh-active-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-space-2);
  padding: var(--hh-space-1) var(--hh-space-3);
  background: var(--hh-surface-alt, #f1f4f9);
  border: 1px solid var(--hh-border);
  border-radius: 999px;
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text);
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hh-active-filter:hover {
  background: var(--hh-surface, #fff);
  border-color: var(--hh-blue);
  color: var(--hh-blue);
}
.hh-active-filter:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}

.hh-active-filter__label {
  font-weight: 500;
}

.hh-active-filter__remove {
  font-size: var(--hh-fs-md);
  font-weight: 600;
  line-height: 1;
  color: var(--hh-text-slate);
}
.hh-active-filter:hover .hh-active-filter__remove { color: var(--hh-blue); }

.hh-active-filters__clear {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 600;
  /* WCAG AA: --hh-blue (#2E86DE) at 13px/600 fails 4.5:1 normal-text gate
     (~3.36:1). --hh-navy (#1B2A4A) on white = ~12.6:1, well above gate. */
  color: var(--hh-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: var(--hh-space-2);
}
.hh-active-filters__clear:hover { color: var(--hh-blue); }
.hh-active-filters__clear:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}

/* Sidebar-active grid: drop to 3-up at desktop when filters are rendered.
   Cards stay ~310px wide instead of cramping to ~237px at 4-up. Industry
   pattern (RockAuto, Summit Racing, eBay Motors). Modifier class set in
   main-collection.liquid via Liquid conditional — preferred over :has() for
   broader browser support. Reversible at 3c-2 if real facet content shows
   4-up workable. */
@media (min-width: 1024px) {
  .hh-collection__layout--with-filters .hh-collection__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Collection sort dropdown
   Phase 3 sub-phase 3b-iii. Native <select> in a get-form, right-aligned
   on desktop, left-aligned (full-width breathing room) on mobile.
   3b-iv will add pagination strip below the grid using a similar pattern.
   ───────────────────────────────────────────────────────────────────── */
.hh-collection__sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hh-space-2);
  margin-bottom: var(--hh-space-4);
  flex-wrap: wrap;
}
.hh-collection__sort label {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
  font-weight: 500;
}
.hh-collection__sort select {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  color: var(--hh-text);
  background: var(--hh-white);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  padding: var(--hh-space-2) var(--hh-space-3);
  padding-right: var(--hh-space-5);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235C6A7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--hh-space-3) center;
  transition: border-color var(--hh-transition-fast);
}
.hh-collection__sort select:hover {
  border-color: var(--hh-text-slate);
}
.hh-collection__sort select:focus {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
  border-color: var(--hh-blue);
}
.hh-collection__sort-submit {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-white);
  background: var(--hh-blue);
  border: 0;
  border-radius: var(--hh-radius);
  padding: var(--hh-space-2) var(--hh-space-3);
  cursor: pointer;
}

/* Mobile: left-align so breathing-room beside short Sort: label */
/* Pass 6c-γ (locked 2026-05-04): 767px → 768px breakpoint consolidation. */
@media (max-width: 768px) {
  .hh-collection__sort {
    justify-content: flex-start;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Collection pagination + load more
   Phase 3 sub-step 3b-iv-3.
   DOM order: numbered nav first, Show 24 more second.
   Mobile: flex-direction column-reverse → load-more visually above nav.
   Desktop: flex-direction row + space-between → nav left, load-more right.
   Tab order matches desktop visual; mobile tab order is offset (touch-
   primary on mobile, acceptable trade-off).
   ───────────────────────────────────────────────────────────────────── */
.hh-collection__pagination {
  margin-top: var(--hh-space-6);
  padding-top: var(--hh-space-5);
  border-top: 1px solid var(--hh-border);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--hh-space-4);
  align-items: center;
}

/* ── Show 24 more (primary action) ── */
/* 19px/700 matches the Phase 2f ATC contrast bundle (locked 2026-04-26) —
   white on --hh-blue clears WCAG AA via the large-text threshold (3:1)
   rather than regular-text (4.5:1). Same brand-blue button as PDP ATC. */
.hh-collection__load-more {
  font-family: var(--hh-font-body);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--hh-white);
  background: var(--hh-blue);
  border: 0;
  border-radius: var(--hh-radius);
  padding: 14px 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--hh-transition-fast);
}
.hh-collection__load-more:hover { background: var(--hh-blue-hover); }
.hh-collection__load-more:focus {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-collection__load-more[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* ── Numbered nav ── */
.hh-collection__pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--hh-space-1);
  flex-wrap: wrap;
  justify-content: center;
}
.hh-collection__pagination-item {
  display: inline-flex;
}
.hh-collection__pagination-link,
.hh-collection__pagination-current,
.hh-collection__pagination-ellipsis {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  min-width: 36px;
  height: 36px;
  padding: 0 var(--hh-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hh-radius);
}
.hh-collection__pagination-link {
  color: var(--hh-text);
  text-decoration: none;
  border: 1px solid var(--hh-border);
  background: var(--hh-white);
  transition: border-color var(--hh-transition-fast), background var(--hh-transition-fast);
}
.hh-collection__pagination-link:hover {
  border-color: var(--hh-text-slate);
  background: var(--hh-border-soft);
}
.hh-collection__pagination-link:focus {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}
.hh-collection__pagination-link--arrow {
  font-weight: 600;
}
.hh-collection__pagination-current {
  color: var(--hh-white);
  background: var(--hh-navy);
  font-weight: 600;
}
.hh-collection__pagination-ellipsis {
  color: var(--hh-text-slate);
  border: 0;
  background: transparent;
  cursor: default;
}

/* Desktop: horizontal strip — nav left, load-more right */
@media (min-width: 768px) {
  .hh-collection__pagination {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--hh-space-4);
  }
  .hh-collection__pagination-list {
    justify-content: flex-start;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Cart drawer (Phase 3.5)
   Slide-from-right panel, scrim, position-fixed scroll-lock pattern
   (mirrors filter drawer 3c-5). Three independent BEM blocks: drawer
   chrome, line items, empty state. Tokens: --hh-motion-drawer (250ms
   ease-out) and --hh-scrim. Reduced-motion handled by global rule.
   ───────────────────────────────────────────────────────────────────── */

/* ── Root container ── */
.hh-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--hh-z-drawer);
  pointer-events: none;
}
.hh-cart-drawer[data-open="true"] {
  pointer-events: auto;
}

/* ── Scrim ── */
.hh-cart-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--hh-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hh-motion-drawer);
}
.hh-cart-drawer[data-open="true"] .hh-cart-drawer__scrim {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel: slide-from-right, full viewport height, sticky header + footer ── */
.hh-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  background: var(--hh-white);
  box-shadow: var(--hh-shadow-md);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--hh-motion-drawer);
}
.hh-cart-drawer[data-open="true"] .hh-cart-drawer__panel {
  transform: translateX(0);
}

/* ── Header (sticky top via flex layout) ── */
.hh-cart-drawer__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--hh-space-2);
  padding: var(--hh-space-4) var(--hh-space-5);
  border-bottom: 1px solid var(--hh-border);
}
.hh-cart-drawer__title {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-xl);
  font-weight: 600;
  color: var(--hh-text);
  margin: 0;
}
.hh-cart-drawer__count {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  color: var(--hh-text-slate);
  font-weight: 500;
}
.hh-cart-drawer__count:empty {
  display: none;
}
.hh-cart-drawer__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--hh-text);
  border-radius: var(--hh-radius);
  transition: background var(--hh-transition-fast);
}
.hh-cart-drawer__close:hover { background: var(--hh-offwhite); }

/* ── Error region (3.5-2) — inline alert above items ── */
.hh-cart-drawer__error {
  margin: var(--hh-space-3) var(--hh-space-5) 0;
  padding: var(--hh-space-3) var(--hh-space-4);
  background: var(--hh-error-bg);
  color: var(--hh-error-text);
  border: 1px solid var(--hh-error);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  flex-shrink: 0;
}
.hh-cart-drawer__error[hidden] {
  display: none;
}

/* ── Items list (scrollable middle region) ── */
.hh-cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Footer (sticky bottom via flex layout) ── */
.hh-cart-drawer__footer {
  flex-shrink: 0;
  padding: var(--hh-space-4) var(--hh-space-5);
  border-top: 1px solid var(--hh-border);
  background: var(--hh-white);
}
.hh-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-md);
  font-weight: 600;
  color: var(--hh-text);
  margin-bottom: var(--hh-space-2);
}
.hh-cart-drawer__shipping {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-3) 0;
  text-align: center;
}
.hh-cart-drawer__checkout-form {
  margin: 0;
}
/* Checkout button mirrors .hh-pdp__atc 2f sizing for WCAG large-text 3:1 contrast.
   Same blue + 19px/700 + padding to clear AA without changing brand color. */
.hh-cart-drawer__checkout {
  width: 100%;
  background: var(--hh-blue);
  color: var(--hh-white);
  font-family: var(--hh-font-body);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  padding: 14px 20px;
  border-radius: var(--hh-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--hh-transition-fast);
}
.hh-cart-drawer__checkout:hover { background: var(--hh-blue-hover); }

/* ─────────────────────────────────────────────────────────────────────
   Cart line item (independent BEM block, shared by drawer + /cart page)
   Grid: image | meta | price (right-aligned)
   ───────────────────────────────────────────────────────────────────── */
.hh-cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--hh-space-3);
  padding: var(--hh-space-4) var(--hh-space-5);
  border-bottom: 1px solid var(--hh-border-soft);
}
.hh-cart-line:last-child { border-bottom: 0; }
/* In-flight mutation visual state (3.5-3) — buttons disabled + opacity hint */
.hh-cart-line[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.hh-cart-line__image-link {
  display: block;
  width: 80px;
  height: 80px;
  background: var(--hh-offwhite);
  border-radius: var(--hh-radius-sm);
  overflow: hidden;
}
.hh-cart-line__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hh-cart-line__meta {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-1);
  min-width: 0;  /* allow title ellipsis inside grid track */
}
.hh-cart-line__eyebrow {
  font-family: var(--hh-font-mono);
  font-size: var(--hh-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--hh-text-slate);
}
.hh-cart-line__title {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  font-weight: 600;
  color: var(--hh-text);
  line-height: 1.3;
  /* clamp at two lines to prevent runaway titles from blowing out drawer height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hh-cart-line__title:hover { color: var(--hh-blue); }
.hh-cart-line__pn {
  font-family: var(--hh-font-mono);
  font-size: var(--hh-fs-xs);
  color: var(--hh-text-muted);
}

/* Qty stepper — mirrors .hh-pdp__qty pattern from PDP for consistency */
.hh-cart-line__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  overflow: hidden;
  width: fit-content;
  margin-top: var(--hh-space-2);
}
.hh-cart-line__qty button {
  width: 32px;
  height: 32px;
  background: var(--hh-white);
  color: var(--hh-text);
  font-size: var(--hh-fs-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hh-cart-line__qty button:hover { background: var(--hh-offwhite); }
.hh-cart-line__qty button:disabled { color: var(--hh-text-muted); cursor: not-allowed; background: transparent; }
.hh-cart-line__qty input {
  width: 40px;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--hh-border);
  border-right: 1px solid var(--hh-border);
  text-align: center;
  font-size: var(--hh-fs-base);
  background: var(--hh-white);
  -moz-appearance: textfield;
}
.hh-cart-line__qty input::-webkit-outer-spin-button,
.hh-cart-line__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hh-cart-line__remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--hh-text-slate);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-xs);
  padding: 4px 0;
  margin-top: var(--hh-space-1);
  width: fit-content;
  transition: color var(--hh-transition-fast);
}
.hh-cart-line__remove:hover { color: var(--hh-error); }

.hh-cart-line__price {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  font-weight: 600;
  color: var(--hh-text);
  white-space: nowrap;
  align-self: start;
}

/* ─────────────────────────────────────────────────────────────────────
   Cart empty state (independent BEM block, shared by drawer + /cart page)
   Centered in available space; minimal copy + CTA.
   ───────────────────────────────────────────────────────────────────── */
.hh-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hh-space-4);
  padding: var(--hh-space-7) var(--hh-space-5);
  text-align: center;
}
.hh-cart-empty__message {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-md);
  color: var(--hh-text-slate);
  margin: 0;
}
.hh-cart-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hh-blue);
  color: var(--hh-white);
  font-family: var(--hh-font-body);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  padding: 14px 24px;
  border-radius: var(--hh-radius);
  transition: background var(--hh-transition-fast);
}
.hh-cart-empty__cta:hover { background: var(--hh-blue-hover); }

/* ─────────────────────────────────────────────────────────────────────
   /cart page (Phase 3.5-4)
   Standalone cart route. Reuses .hh-cart-line + .hh-cart-empty BEM
   blocks unchanged; adds .hh-cart-page wrapper for layout. Stacked
   single-column layout (Decision 1-A); side-by-side deferred to Phase 9
   if buyer testing surfaces summary-out-of-view friction on long carts.
   ───────────────────────────────────────────────────────────────────── */

.hh-cart-page {
  padding-top: var(--hh-space-7);
  padding-bottom: var(--hh-space-7);
}

.hh-cart-page__title {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-2xl);
  font-weight: 600;
  color: var(--hh-text);
  margin: 0 0 var(--hh-space-5);
}

.hh-cart-page__form {
  margin: 0;
}

.hh-cart-page__items {
  list-style: none;
  margin: 0 0 var(--hh-space-5);
  padding: 0;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-white);
}
.hh-cart-page__items .hh-cart-line {
  /* /cart page line items get more padding than drawer for readable spacing */
  padding: var(--hh-space-5);
}

/* Update button — .no-js gate uses display: none (NOT visibility: hidden)
   to keep button non-focusable for JS-on buyers via Tab keyboard nav.
   Visibility-hidden buttons stay in tab order — would create "invisible
   focus stop" UX bug. Locked at 3.5-4 refinement 11.5. */
.hh-cart-page__update {
  display: none;
  margin-bottom: var(--hh-space-4);
  padding: 10px 16px;
  background: var(--hh-white);
  color: var(--hh-text);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-weight: 500;
  font-size: var(--hh-fs-base);
  cursor: pointer;
}
.no-js .hh-cart-page__update {
  display: inline-block;
}
.hh-cart-page__update:hover { background: var(--hh-offwhite); }

.hh-cart-page__footer {
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-white);
  padding: var(--hh-space-5);
}

.hh-cart-page__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-md);
  font-weight: 600;
  color: var(--hh-text);
  margin-bottom: var(--hh-space-3);
}

.hh-cart-page__shipping {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-4);
  text-align: center;
}

/* Checkout button mirrors .hh-pdp__atc + .hh-cart-drawer__checkout sizing */
.hh-cart-page__checkout {
  width: 100%;
  background: var(--hh-blue);
  color: var(--hh-white);
  font-family: var(--hh-font-body);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  padding: 14px 20px;
  border-radius: var(--hh-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--hh-transition-fast);
}
.hh-cart-page__checkout:hover { background: var(--hh-blue-hover); }

/* /cart page empty state — center within container, more vertical breathing room than drawer */
.hh-cart-page > .hh-cart-empty {
  padding: var(--hh-space-9) var(--hh-space-5);
}

/* ─────────────────────────────────────────────────────────────────────
   Phase 1 Integration — mobile touch-target floor sweep (2026-05-03)
   Single coherent change-set bumping interactive controls to 44×44 on
   mobile. Per design source @media (max-width: 720px) intent: pdp.css
   `.fit-checker` 44px rules, collection.css `.coll-pag` 44px rules,
   cart.css "Tier 3 touch-target" 44px qty stepper rules. Consumers
   stay at desktop sizes above 720px (touch-target requirement is
   mobile-specific; pointer input has different ergonomics).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* PDP qty stepper — base size 36×36 → 44×44 on mobile.
     min-width on the buttons preserves 44px against flex-shrink when the
     `.hh-pdp__form-row .hh-pdp__qty input { width: 100%; }` rule expands
     the input to fill the row (caught at Bucket A render-verify). */
  .hh-pdp__qty button { min-width: 44px; width: 44px; height: 44px; }
  .hh-pdp__qty input { height: 44px; }

  /* PDP variant pill — base ~33px tall → 44px floor on mobile */
  .hh-pdp__variant-pill { min-height: 44px; padding: 10px 16px; }

  /* Vehicle banner inline form (consumed at PDP via fitment-status link
     target + Phase 8 global lift) — base ~30px → 44px floor */
  .hh-vehicle-banner__form select { min-height: 44px; padding: 10px 28px 10px 12px; }
  .hh-vehicle-banner__submit { min-height: 44px; padding: 10px 16px; }

  /* Collection pagination links — base 36×36 → 44×44 on mobile */
  .hh-collection__pagination-link,
  .hh-collection__pagination-current,
  .hh-collection__pagination-ellipsis {
    min-width: 44px;
    height: 44px;
  }

  /* Cart line qty stepper (drawer + /cart page contexts) — base 32×32 →
     44×44. Design source cart.css:572 explicit "Tier 3 touch-target". */
  .hh-cart-line__qty button { width: 44px; height: 44px; }
  .hh-cart-line__qty input { height: 44px; }
}

/* ─────────────────────────────────────────────────────────────────────
   PDP sticky ATC (Phase C4-1, locked 2026-05-03)
   Mobile-only sticky bar that surfaces when the inline ATC button
   scrolls out of viewport. Same-form via DOM-proxy click — sticky
   button triggers .hh-pdp__atc.click() rather than submitting its own
   form (single source of truth for variant + qty state).
   Design source: pdp-page.jsx:240-247 + pdp.css:838-868 (.m-sticky).
   Production refinements: same-form proxy, featured_image responsive
   sizing, position: fixed (vs absolute artboard convention).
   ───────────────────────────────────────────────────────────────────── */
.hh-pdp__sticky-atc {
  display: none;
}

@media (max-width: 720px) {
  .hh-pdp__sticky-atc {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--hh-z-sticky);
    background: var(--hh-white);
    border-top: 1px solid var(--hh-border);
    box-shadow: 0 -4px 14px rgba(16, 24, 40, 0.08);
    transform: translateY(100%);
    transition: transform var(--hh-transition-fast);
    pointer-events: none;
  }
  .hh-pdp__sticky-atc[data-visible="true"] {
    transform: translateY(0);
    pointer-events: auto;
  }
  .hh-pdp__sticky-atc__inner {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    max-width: var(--hh-container-max);
    margin: 0 auto;
  }
  .hh-pdp__sticky-atc__thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--hh-radius);
    overflow: hidden;
    background: var(--hh-offwhite);
    flex-shrink: 0;
  }
  .hh-pdp__sticky-atc__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hh-pdp__sticky-atc__meta {
    min-width: 0; /* allows text-overflow to apply within grid cell */
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .hh-pdp__sticky-atc__title {
    font-family: var(--hh-font-body);
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--hh-text-slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hh-pdp__sticky-atc__price {
    font-family: var(--hh-font-body);
    font-weight: 700;
    font-size: 14px;
    color: var(--hh-text);
  }
  .hh-pdp__sticky-atc__btn {
    background: var(--hh-blue);
    color: var(--hh-white);
    border: 0;
    border-radius: var(--hh-radius);
    font-family: var(--hh-font-body);
    font-weight: 700;
    font-size: 13px;
    padding: 0 14px;
    height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--hh-transition-fast);
  }
  .hh-pdp__sticky-atc__btn:hover { background: var(--hh-blue-hover); }
  .hh-pdp__sticky-atc__btn:focus-visible {
    outline: 2px solid var(--hh-white);
    outline-offset: -4px;
  }
}

/* Reduced motion — drop transform animation, just snap visible/hidden */
@media (prefers-reduced-motion: reduce) {
  .hh-pdp__sticky-atc {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Cart vehicle context bar (Phase C4-2, locked 2026-05-03)
   Surfaces "Shopping for [vehicle]" status in cart drawer + /cart page.
   Renders only when HHymm.getStoredVehicle() resolves; [Change] opens
   modal local-to-cart pre-Phase-8.
   Design source: cart-atoms.jsx:16-26 + cart.css:36-62 (.cart-vbar).
   Render parity preserved across both surfaces.
   ───────────────────────────────────────────────────────────────────── */
.hh-cart__vehicle-bar {
  display: flex;
  align-items: center;
  gap: var(--hh-space-2);
  padding: var(--hh-space-3) var(--hh-space-4);
  background: var(--hh-success-bg);
  border: 1px solid var(--hh-success);
  border-radius: var(--hh-radius);
  margin-bottom: var(--hh-space-4);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text);
}
.hh-cart__vehicle-bar[hidden] { display: none; }
.hh-cart__vehicle-bar__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hh-success);
  flex-shrink: 0;
}
.hh-cart__vehicle-bar__name { font-weight: 600; }
.hh-cart__vehicle-bar__sep {
  color: var(--hh-text-muted);
  margin: 0 4px;
}
.hh-cart__vehicle-bar__action {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--hh-blue);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.hh-cart__vehicle-bar__action:hover { text-decoration: underline; }
.hh-cart__vehicle-bar__action:focus-visible {
  outline: 2px solid var(--hh-blue);
  outline-offset: 2px;
}

/* ── Per-line warning state (CART-1) ── */
/* Triggered when stored vehicle doesn't match line's product.metafields.custom.fitment.
   JS toggles .hh-cart-line--warn on the <li> based on HHymm.matches result. */
.hh-cart-line--warn {
  background: #fffbf0;
  position: relative;
}
.hh-cart-line__warn-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--hh-space-2);
  padding: 8px 12px;
  background: #fff4d6;
  border: 1px solid #f0d281;
  border-radius: var(--hh-radius);
  margin-top: var(--hh-space-2);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: #6a4f00;
  line-height: 1.45;
}
.hh-cart-line:not(.hh-cart-line--warn) .hh-cart-line__warn-strip { display: none; }
.hh-cart-line__warn-strip__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #d39200;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────────────
   Cart modal (Phase C4-2, locked 2026-05-03)
   Cart-scoped one-off [Change vehicle] modal pre-Phase-8. Banked
   "build for current consumers; abstract on second use, not first" —
   no generic .hh-modal abstraction; will refactor if/when 2nd consumer
   surfaces. Phase 8 vehicle banner global lift will replace this.
   ───────────────────────────────────────────────────────────────────── */
.hh-cart-modal {
  position: fixed;
  inset: 0;
  z-index: var(--hh-z-modal);
  pointer-events: none;
}
.hh-cart-modal[data-open="true"] {
  pointer-events: auto;
}
.hh-cart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--hh-scrim, rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity var(--hh-transition-fast);
}
.hh-cart-modal[data-open="true"] .hh-cart-modal__backdrop { opacity: 1; }
.hh-cart-modal__panel {
  position: relative;
  background: var(--hh-white);
  border-radius: var(--hh-radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  max-width: 480px;
  width: calc(100% - var(--hh-space-5) * 2);
  margin: var(--hh-space-7) auto;
  padding: var(--hh-space-5);
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--hh-transition-fast), opacity var(--hh-transition-fast);
}
.hh-cart-modal[data-open="true"] .hh-cart-modal__panel {
  transform: translateY(0);
  opacity: 1;
}
.hh-cart-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--hh-space-3);
}
.hh-cart-modal__title {
  font-family: var(--hh-font-heading);
  font-size: var(--hh-fs-lg);
  font-weight: 700;
  color: var(--hh-text);
  margin: 0;
}
.hh-cart-modal__close {
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--hh-text-slate);
  display: inline-flex;
}
.hh-cart-modal__close:hover { color: var(--hh-text); }
.hh-cart-modal__hint {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-4);
}
.hh-cart-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-3);
  margin-bottom: var(--hh-space-4);
}
.hh-cart-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hh-cart-modal__label {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-xs);
  font-weight: 600;
  color: var(--hh-text-slate);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hh-cart-modal__field select {
  padding: 10px 12px;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-white);
  color: var(--hh-text);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
}
.hh-cart-modal__field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--hh-offwhite);
}
.hh-cart-modal__actions {
  display: flex;
  gap: var(--hh-space-2);
  justify-content: flex-end;
}
.hh-cart-modal__submit,
.hh-cart-modal__cancel {
  padding: 10px 18px;
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.hh-cart-modal__submit {
  background: var(--hh-blue);
  color: var(--hh-white);
  border-color: var(--hh-blue);
}
.hh-cart-modal__submit:hover { background: var(--hh-blue-hover); border-color: var(--hh-blue-hover); }
.hh-cart-modal__submit:disabled,
.hh-cart-modal__submit[aria-disabled="true"] {
  background: var(--hh-text-muted);
  border-color: var(--hh-text-muted);
  cursor: not-allowed;
}
.hh-cart-modal__cancel {
  background: var(--hh-white);
  color: var(--hh-text);
  border-color: var(--hh-border);
}
.hh-cart-modal__cancel:hover { background: var(--hh-offwhite); }

@media (prefers-reduced-motion: reduce) {
  .hh-cart-modal__backdrop,
  .hh-cart-modal__panel { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Cart empty rich state (Phase C4-3, locked 2026-05-03)
   Three-group structure: header + search + YMM + 6-chip PartTypeGrid.
   Replaces the 17-line stub. Renders on cart drawer + /cart page (full
   parity). Composition A-revised chip set per CLAUDE.md "Documented
   divergences" → "PartTypeGrid 6-chip composition".
   Design source: cart-atoms.jsx:144-200 + cart.css:372-455 (.cart-empty).
   ───────────────────────────────────────────────────────────────────── */
.hh-cart-empty {
  max-width: 560px;
  margin: var(--hh-space-7) auto var(--hh-space-9);
  padding: 0 var(--hh-space-4);
  text-align: left;
}

/*
 * Drawer-context scroll: the cart drawer panel is a fixed-height flex column
 * (header + body + optional footer). When cart is empty, .hh-cart-empty renders
 * directly in the panel and can overflow with the YMM picker + 12-chip grid.
 * Without this rule, the popular-categories chips below the YMM picker can be
 * cut off on shorter viewports (Jodi UAT 2026-05-10). On the standalone /cart
 * page (.hh-cart-page > .hh-cart-empty) this rule does not apply, so full-page
 * scroll continues to work normally.
 */
.hh-cart-drawer__panel > .hh-cart-empty {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin-top: var(--hh-space-5);
  margin-bottom: var(--hh-space-5);
}
.hh-cart-empty__title {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: var(--hh-fs-2xl);
  letter-spacing: -0.01em;
  margin: 0 0 var(--hh-space-2);
  color: var(--hh-text);
}
.hh-cart-empty__lead {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  line-height: 1.55;
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-6);
}
.hh-cart-empty__framing {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  font-weight: 600;
  color: var(--hh-text);
  margin: 0 0 var(--hh-space-3);
}
.hh-cart-empty__group {
  margin-bottom: var(--hh-space-5);
}
.hh-cart-empty__group:last-child {
  margin-bottom: 0;
}
.hh-cart-empty__glabel {
  font-family: var(--hh-font-mono);
  font-size: var(--hh-fs-xs);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-2);
}
.hh-cart-empty__search {
  display: flex;
  gap: var(--hh-space-2);
}
.hh-cart-empty__search input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  background: var(--hh-white);
  color: var(--hh-text);
  min-width: 0;
}
.hh-cart-empty__search button {
  padding: 10px 18px;
  background: var(--hh-text);
  color: var(--hh-white);
  border: 1px solid var(--hh-text);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.hh-cart-empty__search button:hover {
  background: var(--hh-navy);
  border-color: var(--hh-navy);
}
.hh-cart-empty__ymm {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--hh-space-2);
}
.hh-cart-empty__ymm select {
  padding: 10px 12px;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-white);
  color: var(--hh-text);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  padding-right: 28px;
  min-width: 0;
}
.hh-cart-empty__ymm select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--hh-offwhite);
}
.hh-cart-empty__ymm button {
  padding: 10px 18px;
  background: var(--hh-blue);
  color: var(--hh-white);
  border: 1px solid var(--hh-blue);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hh-cart-empty__ymm button:hover { background: var(--hh-blue-hover); border-color: var(--hh-blue-hover); }
.hh-cart-empty__ymm button:disabled,
.hh-cart-empty__ymm button[aria-disabled="true"] {
  background: var(--hh-text-muted);
  border-color: var(--hh-text-muted);
  cursor: not-allowed;
}
.hh-cart-empty__cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hh-space-2);
}
.hh-cart-empty__cat {
  text-align: center;
  padding: 14px 12px;
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  color: var(--hh-text);
  text-decoration: none;
  transition: border-color var(--hh-transition-component), transform var(--hh-transition-component), box-shadow var(--hh-transition-component);
}
/* :hover rule moved to shared 3-selector block (Pass 6a atom-canonical realignment) — see "Multi-surface chip hover" below. */

/* Mobile: 2-column chip grid + stacked YMM */
@media (max-width: 720px) {
  .hh-cart-empty__cats {
    grid-template-columns: repeat(2, 1fr);
  }
  .hh-cart-empty__ymm {
    grid-template-columns: 1fr 1fr;
  }
  .hh-cart-empty__ymm button {
    grid-column: 1 / -1;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   404 page (Phase C4-3, locked 2026-05-03)
   Three-surface synchronized contract member. Reuses part-type-grid
   snippet for the 6-chip recovery section. Recovery surface intent:
   redirect 404 hits into productive browse flow.
   ───────────────────────────────────────────────────────────────────── */
.hh-404 {
  max-width: 560px;
  margin: var(--hh-space-7) auto var(--hh-space-9);
  padding: 0 var(--hh-space-4);
  text-align: left;
}
.hh-404__title {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: var(--hh-fs-2xl);
  letter-spacing: -0.01em;
  margin: 0 0 var(--hh-space-2);
  color: var(--hh-text);
}
.hh-404__body {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-base);
  line-height: 1.55;
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-4);
}
.hh-404__ctas {
  margin: 0 0 var(--hh-space-6);
}
.hh-404__cta {
  color: var(--hh-blue);
  font-weight: 600;
  text-decoration: none;
}
.hh-404__cta:hover { text-decoration: underline; }
.hh-404__sep {
  color: var(--hh-text-muted);
  margin: 0 4px;
}
.hh-404__framing {
  font-family: var(--hh-font-mono);
  font-size: var(--hh-fs-xs);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hh-text-slate);
  margin: 0 0 var(--hh-space-2);
}
.hh-404__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hh-space-2);
}
.hh-404__chip {
  text-align: center;
  padding: 14px 12px;
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  color: var(--hh-text);
  text-decoration: none;
  transition: border-color var(--hh-transition-component), transform var(--hh-transition-component), box-shadow var(--hh-transition-component);
}
/* :hover rule moved to shared 3-selector block (Pass 6a atom-canonical realignment) — see "Multi-surface chip hover" below. */

@media (max-width: 720px) {
  .hh-404__chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Home hero — Phase 4 v1 (locked 2026-05-03)
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:6-138
   + 455-489 (Path 1 mobile only; Path 2 .hh-home.is-mobile is design-canvas
   artboard scope, not translated to production per CLAUDE.md "Dual-pattern
   mobile coverage").
   F-grade sign-offs: F1 (--hh-navy-deep on Hero per atom; broaden lock),
   F2 (.hh-home parent scope), F3(b) (hero-scoped type-scale tokens),
   F6 (no .hero collision in theme; clean .hh-home scoping).
   ───────────────────────────────────────────────────────────────────── */
.hh-home { background: var(--hh-white); }

.hh-home .hero {
  background: var(--hh-navy-deep);
  color: var(--hh-white);
  padding: 64px 56px 56px;
  position: relative;
}
.hh-home .hero-shell {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
  gap: 64px;
  align-items: center;
}
.hh-home .hero-left .logo {
  display: block;
  width: 240px;
  height: auto;
  margin-bottom: 28px;
}
.hh-home .hero-left h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: var(--hh-fs-hero-h1-desktop);
  line-height: 1.05;
  color: var(--hh-white);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hh-home .hero-left .sub {
  font-family: var(--hh-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hh-text-on-navy-strong);
  max-width: 56ch;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.hh-home .hero-left .credibility {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hh-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hh-text-on-navy-vivid);
  background: var(--hh-border-on-navy-faint);
  border: 1px solid var(--hh-border-on-navy-soft);
  border-radius: 4px;
  padding: 8px 14px;
}
.hh-home .hero-left .credibility .star { color: var(--hh-blue); font-size: 14px; }

/* ── YmmCard — primary CTA in hero (atom YmmCard-in-Hero coupling per DB-A) ── */
.hh-home .ymm-card {
  background: var(--hh-white);
  color: var(--hh-text);
  border-radius: var(--hh-radius-md);
  padding: 26px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18);
}
.hh-home .ymm-card .eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hh-text-muted);
  margin: 0 0 4px;
}
.hh-home .ymm-card h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--hh-navy-deep);
  margin: 0 0 4px;
}
.hh-home .ymm-card .desc {
  font-family: var(--hh-font-body);
  font-size: 14px;
  color: var(--hh-text-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}
/* Atom .ymm-row + .ymm-row .field translate to direct flex on the
   shared snippet markup (snippets/ymm-card.liquid renders a flat <form>
   with 3 selects + submit; the snippet doesn't wrap selects in .field
   containers). Layout is the same 3-column grid via the form selector. */
.hh-home .ymm-card form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.hh-home .ymm-card form select {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 12px;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  background: var(--hh-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 10px center;
  background-size: 10px 6px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: var(--hh-text);
}
.hh-home .ymm-card form select:disabled {
  color: var(--hh-text-muted);
  background-color: var(--hh-offwhite);
}
.hh-home .ymm-card form button[type="submit"] {
  grid-column: 1 / -1;
  width: 100%;
  padding: 14px 18px;
  margin-top: 6px;
  background: var(--hh-blue);
  color: var(--hh-white);
  border: 1px solid var(--hh-blue);
  border-radius: var(--hh-radius);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--hh-transition-fast);
}
.hh-home .ymm-card form button[type="submit"]:hover:not(:disabled) {
  background: var(--hh-blue-hover);
  border-color: var(--hh-blue-hover);
}
/* YMM CTA disabled state visual harmonization (locked 2026-05-05): electric blue
   preserved across states for design aesthetic; functional + a11y semantics
   preserved via cursor: not-allowed + aria-disabled attribute + click handler.
   Per design-author-authority decision (Lesson 47 architectural-weight criterion);
   visual aesthetic decision; functional + a11y behavior preserved. */
.hh-home .ymm-card form button[type="submit"]:disabled {
  cursor: not-allowed;
}

.hh-home .hh-ymm-card__secondary-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hh-border-soft);
  font-size: 13px;
}
.hh-home .hh-ymm-card__secondary-link {
  color: var(--hh-text-body);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hh-home .hh-ymm-card__secondary-link:hover { color: var(--hh-blue); }

/* ── Vehicle context hero variant — parent-state class scope (H3 lock 2026-05-03) ──
   Class applied to <html> by layout/theme.liquid <head> inline script BEFORE
   <body> parses, so first-layout of <h1> lands at 40px directly without
   reflow from default 44px. See "Pass 3 banked patterns" in CLAUDE.md
   (cross-marque-fleet-list-semantics class neighbor — pre-paint state-class
   application pattern bank candidate).
   ────────────────────────────────────────────────────────────────────── */
.with-vehicle .hh-home .hero .hero-left h1 { font-size: var(--hh-fs-hero-h1-with-vehicle); }
.with-vehicle .hh-home .hero .veh-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hh-font-body);
  font-size: 14px;
  font-weight: 600;
  background: rgba(46,134,222,0.18);
  border: 1px solid rgba(46,134,222,0.45);
  color: var(--hh-white);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.with-vehicle .hh-home .hero .veh-pill .label {
  font-family: var(--hh-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hh-text-on-navy-muted);
}
.with-vehicle .hh-home .hero .veh-pill button {
  background: none;
  border: none;
  color: var(--hh-text-on-navy-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 4px;
}
.with-vehicle .hh-home .hero .veh-pill button:hover { color: var(--hh-white); }

/* ── Mobile (Path 1 only — production translation; Path 2 is design-canvas) ── */
@media (max-width: 720px) {
  .hh-home .hero { padding: 32px 20px 28px; }
  .hh-home .hero-shell { grid-template-columns: 1fr; gap: 28px; }
  .hh-home .hero-left .logo { width: 168px; margin-bottom: 18px; }
  .hh-home .hero-left h1 { font-size: var(--hh-fs-hero-h1-mobile); }
  .hh-home .hero-left .sub { font-size: 14.5px; }
  .hh-home .ymm-card { padding: 20px; }
  /* Mobile YMM grid: Year full-width on top row, Make + Model side-by-side
     below per atom homepage.css:463-464. The form uses grid-template-columns
     2 cols at mobile; Year (1st child) spans full width via grid-column. */
  .hh-home .ymm-card form { grid-template-columns: 1fr 1fr; }
  .hh-home .ymm-card form select[name="year"] { grid-column: 1 / -1; }
}

/* ─────────────────────────────────────────────────────────────────────
   Home — section primitives (.hh-sec) + part-type chips — Phase 4 v1 Pass 4
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:140-213.
   Pass 4 introduces .hh-sec / .sec-shell / .sec-head as canonical home-section
   primitives; subsequent home sections (home-shop-by-make / home-best-sellers
   / home-blog-teaser) reuse without re-defining.
   Chip namespacing hh-home__chips / hh-home__chip parallels Hero hh-home
   parent scope (D3(a) lock 2026-05-03; matches newer 404 C1.1-spec convention).
   ───────────────────────────────────────────────────────────────────── */

/* ── .hh-sec base — full-width section primitive ── */
.hh-sec { padding: 72px 24px; }
.hh-sec.tight { padding: 56px 24px; }
.hh-sec.alt { background: var(--hh-offwhite); }

.hh-sec .sec-shell {
  max-width: 1280px;
  margin: 0 auto;
}

/* ── .sec-head — eyebrow + heading + optional CTA (.row variant) ── */
.hh-sec .sec-head {
  margin-bottom: 36px;
}
.hh-sec .sec-head.row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hh-sec .sec-head .eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hh-text-muted);
  margin: 0 0 6px;
}
.hh-sec .sec-head h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  color: var(--hh-navy-deep);
  margin: 0;
  letter-spacing: -0.005em;
}
.hh-sec .sec-head .all {
  font-family: var(--hh-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--hh-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hh-sec .sec-head .all:hover { color: var(--hh-blue-hover); }

/* ── .hh-home__chips — Shop by part type chip grid (3rd PartTypeGrid caller) ──
   Inherits Composition A-revised 6-chip lock + theme-settings source-of-truth
   from snippets/part-type-grid.liquid. White-chrome surface (parent .hh-home
   bg --hh-white) reuses the same offwhite-bg + border-soft chip pattern as
   cart-empty (offwhite on light-grey) and 404 (offwhite on white) — design-
   token discipline pays off when surface-context shifts. Chip styling
   verbatim from .hh-404__chip; tokens chosen for cross-context flexibility
   inherit that flexibility at next-surface adoption (Pass 4 calibration data
   point). */
.hh-home__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hh-space-2);
}
.hh-home__chip {
  text-align: center;
  padding: 14px 12px;
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  color: var(--hh-text);
  text-decoration: none;
  transition: border-color var(--hh-transition-component), transform var(--hh-transition-component), box-shadow var(--hh-transition-component);
}
/* :hover rule moved to shared 3-selector block (Pass 6a atom-canonical realignment) — see "Multi-surface chip hover" below. */

/* ── Mobile (≤720px) — section padding compresses, chip grid 3 → 2 cols ── */
@media (max-width: 720px) {
  .hh-sec { padding: 48px 20px; }
  .hh-sec .sec-head { margin-bottom: 24px; }
  .hh-sec .sec-head h2 { font-size: 28px; }
  .hh-home__chips { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────
   Part-type chip card composition — Pass 4-bis Sub-step 4 (12-chip layout)
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage-page.jsx
   §5 D3 spec: 32×32 icon, 12px gap, label below, 16px padding, 100px
   min-height, Flexbox vertical centering, currentColor inheritance.
   Applies uniformly to all 3 callers of snippets/part-type-grid.liquid:
     - Homepage Shop-by-part-type (.hh-home__chip)
     - 404 page (.hh-404__chip)
     - Cart-empty (.hh-cart-empty__cat)
   Inner spans (.hh-chip-icon / .hh-chip-label) surface-invariant per
   Pass 4-bis Sub-step 2 lock — same composition across all surfaces;
   surface-specific styling (background, border) lives at outer chip
   class level; hover treatment is shared across all 3 surfaces post
   Pass 6a atom-canonical realignment (see "Multi-surface chip hover"
   block below).
   ───────────────────────────────────────────────────────────────────── */

.hh-home__chip,
.hh-404__chip,
.hh-cart-empty__cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  min-height: 100px;
}

/* Multi-surface chip hover — Pass 6a atom-canonical realignment (locked 2026-05-04)
   Atom canvas reference: docs/design-source/2026-05-02-snapshot/homepage.css:197-201
   (.pt-cell:hover) + 229-233 (.make-cell:hover). Pass 5 .hh-make-cell:hover already
   shipped this treatment; Pass 6a aligns the 3 part-type chip surfaces (homepage /
   404 / cart-empty) to match. Chip-level hover is asset-category-agnostic per
   Lesson 36 (composition discipline); inner-element icon color shift below is
   asset-category-specific (Streamline icons inherit currentColor; brand logos
   on .hh-make-cell do not). Lesson 31 ELEVATED — design-system evolution
   propagates forward. */
.hh-home__chip:hover,
.hh-404__chip:hover,
.hh-cart-empty__cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 32, 57, 0.08);
  border-color: var(--hh-navy);
}

.hh-chip-icon {
  display: flex;
  width: 32px;
  height: 32px;
  color: var(--hh-icon);
  flex-shrink: 0;
  transition: color var(--hh-transition-fast);
}

/* Chip-hover interactive feedback: icon shifts to Electric Blue.
   Per-surface rule (3 selectors) rather than a shared :hover on
   .hh-chip-icon parent because chip-target hover scope lives at
   the outer <a> caller class. Hover affordance is chip-specific;
   header/utility icons elsewhere stay static --hh-icon navy. */
.hh-home__chip:hover .hh-chip-icon,
.hh-404__chip:hover .hh-chip-icon,
.hh-cart-empty__cat:hover .hh-chip-icon {
  color: var(--hh-blue);
}
.hh-chip-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hh-chip-label {
  font-family: var(--hh-font-body);
  font-size: var(--hh-fs-sm);
  font-weight: 500;
  color: var(--hh-text);
  line-height: 1.25;
  text-align: center;
}

/* ── Homepage 4-col × 3-row desktop override (Pass 4-bis §5 D3 grid sub-decision) ──
   Homepage is hero discovery surface — 4-col layout balances hero-prominent
   width against vertical footprint. 404 + cart-empty stay at 3-col convention
   (secondary discovery surfaces, narrower context). Mobile (≤720px) keeps
   2-col across all 3 surfaces (existing rule). Intermediate zone 721-767px
   inherits 3-col default — narrow tablet/landscape-phone context. */
@media (min-width: 768px) {
  .hh-home__chips {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Pass 5 Sub-step 4 — Hero Shop by Make card composition (single-surface)
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:217-249
   Brand logos vs HubesHub iconography per banked Lesson 9:
     - Logo color: solid fill="#000000" preserved (NOT --hh-icon currentColor inheritance)
     - Hover treatment: transform + box-shadow + border-color (NOT color-shift)
   Single-surface scope: homepage only (atom canvas signal); flat class naming
   per Sub-step 2 lock (vs Pass 4-bis surface-namespaced + fixed-inner-spans pattern).
   ───────────────────────────────────────────────────────────────────── */

.hh-make-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.hh-make-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 12px;
  min-height: 132px;
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius-md);
  text-decoration: none;
  /* Pass 6a Path D — retroactive token alignment: hardcoded 0.15s × 3 → --hh-transition-component
     per workstream-wide token discipline (Lesson 37 candidate). */
  transition: border-color var(--hh-transition-component), transform var(--hh-transition-component), box-shadow var(--hh-transition-component);
}

.hh-make-cell:hover {
  border-color: var(--hh-navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 32, 57, 0.08);
}

.hh-logo-stand {
  height: 80px;
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sub-step 4 SVG sizing within .hh-logo-stand wrapper.
   Aspect-ratio-aware sizing: height-anchored at 64px for vertical-rhythm
   consistency across 6 chips; width: auto allows natural horizontal
   extension per brand-mark identity (Ford oval ~horizontal; Toyota/GM
   ~square; Chrysler wings ~very horizontal); max-width: 100% clamps
   extreme extensions to wrapper width for layout safety.
   Architectural rationale: brand marks are dimensionally canonical at
   brand-identity level — re-sourcing SVGs cannot normalize aspect ratio.
   CSS adapts to underlying reality (Lesson 33).
   Iteration history:
     28×28 → 36×36 → 48×48 + chrome dropped (Sub-step 4-fix-2)
     → aspect-ratio-aware (Sub-step 4-fix-3) per Steve preview-verify
       variance feedback.
     → 64×64 + wrapper 80px (Pass 6b-retry-attempt-2 / Lever 2): universal
       chip logo presence bump after Pass 6b viewBox-crop approach failed
       at render time (Lessons 41 + 43). Chrysler internal whitespace
       scales proportionally; Ford + Jeep "small floating mark" scales
       proportionally larger. Mixed-aspect family architectural intent
       (Lesson 39 ELEVATED) deferred to v1.x asset workstream per
       Lesson 44 candidate. */
.hh-logo-stand svg {
  height: 64px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Pass 6b-retry-attempt-3 — per-asset render dimension overrides (locked 2026-05-04).
   Steve preview-verify of Lever 2 (uniform 64px) revealed visual-weight imbalance:
   squareish-content brand marks (Toyota/Dodge-Ram/GM) read as too dominant at 64px;
   horizontal-content brand marks (Ford/Jeep) read as proportional at 64px; thin-
   horizontal content (Chrysler wings+wordmark) reads as too small.
   Per-asset overrides via SVG #id attribute selector preserve uniform wrapper
   height (80px) for vertical-rhythm coherence across cards while calibrating
   per-asset visible-content prominence subjectively. Selectors target Streamline
   Simple Icons IDs preserved verbatim from source assets.
   Lesson 45 candidate: SVG-asset workstreams may require per-asset render
   dimension overrides when content extent within viewBox varies significantly
   across assets in the same component family. */
.hh-logo-stand svg#Toyota--Streamline-Simple-Icons,
.hh-logo-stand svg#Ram--Streamline-Simple-Icons,
.hh-logo-stand svg#Generalmotors--Streamline-Simple-Icons {
  height: 48px;
}
.hh-logo-stand svg#Chrysler--Streamline-Simple-Icons {
  /* Pass 6b-retry-attempt-4 (locked 2026-05-04): 80px → 96px (+20%) per Steve
     preview-verify; thin-horizontal wings+wordmark content needs further
     prominence bump. Logo overflows wrapper by ±8px (centered via flex);
     cleared by .hh-logo-stand margin-bottom: 10px before .hh-make-name label. */
  height: 96px;
}

.hh-make-name {
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--hh-navy-deep);
  line-height: 1.2;
}

.hh-make-category {
  font-family: var(--hh-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--hh-text-muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}

/* Mobile (≤720px): 6-col → 2-col grid per atom canvas + Pass 4-bis pattern */
@media (max-width: 720px) {
  .hh-make-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ── Home — Best sellers (.best-row) — Pass 7a v1 ──
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:251-254
                   (desktop 6-col grid) + 473-478 (mobile carousel).
   Parent-scope wrap per Pass 7a Decision §7a.7 (.hh-home--best-sellers
   isolates atom .best-row from any future global .best-row collisions).
   Cards rendered via card-product.liquid (Pass 2g locked card primitive);
   .best-row owns layout only, not card chrome. */
.hh-home--best-sellers .best-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

@media (max-width: 720px) {
  .hh-home--best-sellers .best-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    gap: 12px;
  }
  .hh-home--best-sellers .best-row > * { scroll-snap-align: start; }
}

/* ── Home — Why Hubes Hub (.why-grid + .why-callout) — Pass 7b v1 ──
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:256-296
                   (desktop) + 479-481 (mobile, Path 1).
   Parent-scope wrap per Pass 7b §7b.7 (.hh-home--why-hubes-hub
   isolates atom .why-grid + .why-callout from any future global collisions).
   Opacity tokens migrated cluster-precise per Pass 7b §7b.1: atom raw
   rgba(255,255,255,0.7) → --hh-text-on-navy-muted (0.78); raw 0.88 →
   --hh-text-on-navy-strong (0.85). Sub-perceptual variance per Pass 6c-δ
   Lesson 51 tolerance. */
.hh-home--why-hubes-hub .why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}
.hh-home--why-hubes-hub .why-cell {
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius-md);
  padding: 26px 24px;
}
.hh-home--why-hubes-hub .why-cell .icon {
  width: 36px;
  height: 36px;
  color: var(--hh-blue);
  margin-bottom: 14px;
}
.hh-home--why-hubes-hub .why-cell .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hh-home--why-hubes-hub .why-cell h3 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--hh-navy-deep);
  margin: 0 0 8px;
}
.hh-home--why-hubes-hub .why-cell p {
  font-size: 14px;
  color: var(--hh-text-body);
  margin: 0;
  line-height: 1.55;
}
.hh-home--why-hubes-hub .why-callout {
  background: var(--hh-navy-deep);
  color: var(--hh-white);
  border-radius: var(--hh-radius-md);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
.hh-home--why-hubes-hub .why-callout .big {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--hh-white);
}
.hh-home--why-hubes-hub .why-callout .big span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hh-text-on-navy-muted);
  margin-top: 8px;
  font-family: var(--hh-font-mono);
}
.hh-home--why-hubes-hub .why-callout .body p {
  margin: 0;
  font-size: 15px;
  color: var(--hh-text-on-navy-strong);
  line-height: 1.55;
  max-width: 64ch;
}
.hh-home--why-hubes-hub .why-callout .body p strong {
  color: var(--hh-white);
  font-weight: 600;
}

@media (max-width: 720px) {
  .hh-home--why-hubes-hub .why-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
  }
  .hh-home--why-hubes-hub .why-callout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
    text-align: center;
  }
  .hh-home--why-hubes-hub .why-callout .big {
    font-size: 44px;
  }
}

/* ── Home — Need a Part (.need-block) — Pass 7c v1 ──
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:298-370
                   (desktop) + 482-485 (mobile, Path 1).
   Parent-scope wrap per Pass 7c §7c.7 (.hh-home--need-a-part isolates
   atom .need-block from any future global collisions).

   Token discipline (Pass 7c.4 lock — Pass 6c-δ Lesson 50/51):
   4 cluster-precise migrations + 6 off-taxonomy raw values preserved
   with consumer-site annotation. Cluster-precise: atom rgba 0.85 →
   --hh-text-on-navy-strong; atom rgba 0.16 + 0.12 → --hh-border-on-
   navy-soft (sub-perceptual Δ 0.02-0.04); atom rgba 0.7 → --hh-text-
   on-navy-muted (sub-perceptual Δ 0.08, matches Pass 7b precedent for
   same atom value). */
.hh-home--need-a-part .need-block {
  position: relative;
  border-radius: var(--hh-radius-md);
  padding: 56px 56px;
  /* Off-taxonomy raw: rgba(46,134,222,0.18) IS --hh-blue decimal-converted;
     intentional brand-blue radial gradient overlay on navy chrome for visual
     depth. Documented at consumer site per Pass 6c-δ Lesson 50. */
  background:
    radial-gradient(circle at 85% 30%, rgba(46, 134, 222, 0.18) 0%, rgba(46, 134, 222, 0) 50%),
    var(--hh-navy-deep);
  color: var(--hh-white);
  overflow: hidden;
}
.hh-home--need-a-part .need-block .row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}
.hh-home--need-a-part .need-block .eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Off-taxonomy raw 0.6: intentionally dimmer than --hh-text-on-navy-muted
     (0.78); eyebrow is a quieter visual moment per atom design intent. */
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 8px;
}
.hh-home--need-a-part .need-block h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.1;
  color: var(--hh-white);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.hh-home--need-a-part .need-block p {
  font-size: 16px;
  /* Cluster-precise: atom rgba 0.85 → --hh-text-on-navy-strong (exact match). */
  color: var(--hh-text-on-navy-strong);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 56ch;
}
.hh-home--need-a-part .need-block .ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hh-home--need-a-part .need-block .ctas .primary {
  background: var(--hh-blue);
  color: var(--hh-white);
  border: 1px solid var(--hh-blue);
  padding: 13px 22px;
  border-radius: var(--hh-radius);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.hh-home--need-a-part .need-block .ctas .primary:hover {
  background: var(--hh-blue-hover);
  border-color: var(--hh-blue-hover);
}
.hh-home--need-a-part .need-block .ctas .ghost {
  background: transparent;
  color: var(--hh-white);
  /* Off-taxonomy raw 0.4: interactive-CTA border emphasis; intentionally
     above --hh-border-on-navy-soft (0.14) chrome borders per atom design
     intent. CTA-pair-on-navy convention; Pass 7e final-cta uses same
     value at different sizing (per Pass 7.0.4 abstract-on-3rd-consumer). */
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 13px 22px;
  border-radius: var(--hh-radius);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.hh-home--need-a-part .need-block .ctas .ghost:hover {
  border-color: var(--hh-white);
  background: rgba(255, 255, 255, 0.06);
}

/* Right column — quote card */
.hh-home--need-a-part .need-block .quote-card {
  /* Off-taxonomy raw 0.05: subtle scrim on testimonial card surface; below
     --hh-border-on-navy-faint (0.07) per atom design intent. */
  background: rgba(255, 255, 255, 0.05);
  /* Cluster-precise: atom rgba 0.16 → --hh-border-on-navy-soft (0.14,
     sub-perceptual Δ 0.02 within Pass 6c-δ Lesson 51 tolerance). */
  border: 1px solid var(--hh-border-on-navy-soft);
  border-left: 3px solid var(--hh-blue);
  border-radius: var(--hh-radius);
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.65;
  /* Off-taxonomy raw 0.92: between --hh-text-on-navy-strong (0.85) and
     --hh-text-on-navy-vivid (0.95); slightly emphasized testimonial copy. */
  color: rgba(255, 255, 255, 0.92);
}
.hh-home--need-a-part .need-block .quote-card .who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  /* Cluster-precise: atom rgba 0.12 → --hh-border-on-navy-soft (0.14,
     sub-perceptual Δ 0.02). */
  border-top: 1px solid var(--hh-border-on-navy-soft);
  font-size: 13px;
  /* Cluster-precise: atom rgba 0.7 → --hh-text-on-navy-muted (0.78,
     sub-perceptual Δ 0.08; matches Pass 7b precedent for same atom value). */
  color: var(--hh-text-on-navy-muted);
}
.hh-home--need-a-part .need-block .quote-card .who .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hh-blue);
  color: var(--hh-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hh-font-mono);
  font-weight: 700;
  font-size: 13px;
}

@media (max-width: 720px) {
  .hh-home--need-a-part .need-block {
    padding: 32px 24px;
  }
  .hh-home--need-a-part .need-block .row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hh-home--need-a-part .need-block h2 {
    font-size: 26px;
  }
  .hh-home--need-a-part .need-block .quote-card {
    padding: 18px 20px;
    font-size: 14px;
  }
}

/* ── Home — Blog teaser (.blog-row + .blog-card) — Pass 7d v1 ──
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:372-417
                   (desktop) + 486 (mobile, Path 1).
   Parent-scope wrap per Pass 7d (.hh-home--blog-teaser isolates atom
   .blog-row + .blog-card from any future global collisions).

   Pass 7d SD-4 atom-canvas-trim: atom .blog-card .img surface (16:9
   placeholder-glyph) DROPPED from production for cross-surface visual
   register coherence (homepage avoids editorial-photo register
   introduction; product-photo register on best-sellers stays
   homepage's only photographic surface). Cards ship text-only:
   .body containing eyebrow + h3 + p + .more. */
.hh-home--blog-teaser .blog-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hh-home--blog-teaser .blog-card {
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--hh-text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.hh-home--blog-teaser .blog-card:hover {
  border-color: var(--hh-navy);
  transform: translateY(-2px);
  /* Off-taxonomy raw rgba(15, 32, 57, 0.08): hover box-shadow color.
     Out of Pass 6c-δ opacity-on-navy taxonomy scope (taxonomy is
     text/border opacity-on-navy; box-shadow color is a separate
     concern). Preserve raw per Pass 6c-δ Lesson 50. */
  box-shadow: 0 8px 22px rgba(15, 32, 57, 0.08);
}
.hh-home--blog-teaser .blog-card .body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hh-home--blog-teaser .blog-card .eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hh-text-muted);
  margin: 0 0 8px;
}
.hh-home--blog-teaser .blog-card h3 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--hh-navy-deep);
  margin: 0 0 10px;
  line-height: 1.25;
  text-wrap: balance;
  /* Pass 7d D2: 2-line clamp on title for visual-fidelity at typical card width */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hh-home--blog-teaser .blog-card p {
  font-size: 14.5px;
  color: var(--hh-text-body);
  margin: 0 0 16px;
  line-height: 1.55;
  /* Pass 7d D3: 3-line clamp on excerpt; matches atom density */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hh-home--blog-teaser .blog-card .more {
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--hh-blue);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 720px) {
  .hh-home--blog-teaser .blog-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Home — Final CTA (.final-cta) — Pass 7e v1 ──
   Atom reference: docs/design-source/2026-05-02-snapshot/homepage.css:419-445
                   (desktop) + 487-488 (mobile, Path 1).
   Parent-scope wrap per Pass 7e (.hh-home--final-cta isolates atom
   .final-cta from any future global collisions).

   Stripe pattern (Pass 7e D4): atom-canonical full-bleed navy terminus.
   NO .hh-sec wrapper; section flows direct into navy footer for visual
   continuation.

   CTA-pair-on-navy expected duplication (Pass 7.0.4 abstract-on-3rd):
   2nd consumer of CTA-pair-on-navy pattern (Pass 7c need-a-part 1st);
   ships duplicated CSS at Pass 7e's own scale (14/28/15) vs Pass 7c
   need-block (13/22/14). Different scale validates deferred-abstraction
   discipline; abstract on 3rd consumer.

   Token discipline (Pass 7e D5): 2 off-taxonomy raw values preserved
   with annotation (matching Pass 7c precedent). 3rd-consumer trigger
   for taxonomy expansion review banked in deferred-work registry. */
.hh-home--final-cta .final-cta {
  background: var(--hh-navy-deep);
  padding: 56px 24px;
  text-align: center;
}
.hh-home--final-cta .final-cta h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 32px;
  color: var(--hh-white);
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}
.hh-home--final-cta .final-cta .ctas {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hh-home--final-cta .final-cta .primary {
  background: var(--hh-blue);
  color: var(--hh-white);
  border: 1px solid var(--hh-blue);
  padding: 14px 28px;
  border-radius: var(--hh-radius);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.hh-home--final-cta .final-cta .primary:hover {
  background: var(--hh-blue-hover);
  border-color: var(--hh-blue-hover);
}
.hh-home--final-cta .final-cta .ghost {
  background: transparent;
  color: var(--hh-white);
  /* Off-taxonomy raw 0.4: interactive-CTA border emphasis above soft
     chrome borders; matches Pass 7c .need-block .ctas .ghost value
     exactly (2nd consumer of identical off-taxonomy semantic). Per
     Pass 7c lesson #4 + Pass 7.0.4 abstract-on-3rd: preserve raw at
     2nd consumer; 3rd-consumer trigger banked in deferred-work registry. */
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 14px 28px;
  border-radius: var(--hh-radius);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.hh-home--final-cta .final-cta .ghost:hover {
  border-color: var(--hh-white);
  /* Off-taxonomy raw 0.06: subtle hover scrim on navy chrome; matches
     Pass 7c .need-block .ctas .ghost:hover value exactly. Same banking
     disposition as ghost border (2nd consumer; preserve raw). */
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 720px) {
  .hh-home--final-cta .final-cta {
    padding: 36px 16px;
  }
  .hh-home--final-cta .final-cta h2 {
    font-size: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Blog landing — Phase 6a v1 (templates/blog.json)
   Atom canvas: docs/design-source/2026-05-02-snapshot/blog.css:1-241
                (post-page CSS lines 242+ deferred to Phase 6b article template)
   Lifted with .hh-blog parent-scope wrap (atom .hh-blog parent preserved verbatim).
   Token discipline: 1 cluster-precise migration (rgba 0.78 → --hh-text-on-navy-muted)
   + 4 preserve-raw with annotation (input scrim/border/bg + featured img inner border).
   ─────────────────────────────────────────────────────────────────────── */
.hh-blog {
  font-family: var(--hh-font-body);
  color: var(--hh-text);
  background: var(--hh-white);
}

/* ── Breadcrumbs ── */
.hh-blog .bb-crumbs {
  max-width: 1280px; margin: 0 auto; padding: 16px 24px 0;
  font-family: var(--hh-font-mono); font-size: 12px;
  color: var(--hh-text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.hh-blog .bb-crumbs a { color: var(--hh-text-muted); text-decoration: none; }
.hh-blog .bb-crumbs a:hover { color: var(--hh-blue); }
.hh-blog .bb-crumbs .sep { margin: 0 8px; opacity: 0.5; }
.hh-blog .bb-crumbs .here { color: var(--hh-text-body); }

/* ── Index hero / page header ── */
.hh-blog .bb-pagehead {
  max-width: 1280px; margin: 0 auto; padding: 28px 24px 16px;
  border-bottom: 1px solid var(--hh-border-soft);
}
.hh-blog .bb-pagehead h1 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 56px; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--hh-navy-deep); margin: 0 0 14px;
}
.hh-blog .bb-pagehead .lede {
  font-family: var(--hh-font-body); font-size: 18px; line-height: 1.5;
  color: var(--hh-text-body); max-width: 64ch; margin: 0;
}

/* ── Topic chips ── */
.hh-blog .bb-topics {
  max-width: 1280px; margin: 0 auto; padding: 16px 24px 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hh-blog .bb-chip {
  font-family: var(--hh-font-body); font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--hh-border);
  background: var(--hh-white); color: var(--hh-text-body);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.12s ease;
}
.hh-blog .bb-chip:hover { border-color: var(--hh-navy-deep); color: var(--hh-navy-deep); }
.hh-blog .bb-chip.active {
  background: var(--hh-navy-deep); color: var(--hh-white);
  border-color: var(--hh-navy-deep);
}
.hh-blog .bb-chip .count {
  font-family: var(--hh-font-mono); font-size: 11px;
  opacity: 0.7;
}
.hh-blog .bb-chip.active .count { opacity: 0.85; }

/* ── Featured post card (1.1fr 1fr grid; navy-gradient image surface) ── */
.hh-blog .bb-featured-wrap {
  max-width: 1280px; margin: 0 auto; padding: 32px 24px 0;
}
.hh-blog .bb-featured {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px;
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  overflow: hidden; align-items: stretch;
  text-decoration: none; color: inherit;
}
.hh-blog .bb-featured .img {
  background: var(--hh-navy-deep); color: var(--hh-white);
  min-height: 360px; padding: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hh-font-mono); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase;
  background-image: linear-gradient(135deg, var(--hh-navy-deep) 0%, var(--hh-navy) 100%);
  position: relative;
  overflow: hidden;
}
.hh-blog .bb-featured .img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hh-blog .bb-featured .img::before {
  content: ""; position: absolute; inset: 18px;
  /* Off-taxonomy raw 0.1: decorative inner border on photographic/gradient
     surface; thinner than --hh-border-on-navy-soft (0.14); preserve raw. */
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.hh-blog .bb-featured .body {
  padding: 36px; display: flex; flex-direction: column; gap: 14px;
  justify-content: center;
}
.hh-blog .bb-featured .tag-row { display: inline-flex; gap: 10px; align-items: center; }
.hh-blog .bb-featured .tag {
  font-family: var(--hh-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--hh-blue-tint); color: var(--hh-blue-hover);
  padding: 4px 10px; border-radius: 4px;
}
.hh-blog .bb-featured .tag.featured { background: var(--hh-navy-deep); color: var(--hh-white); }
.hh-blog .bb-featured h2 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 36px; line-height: 1.15; letter-spacing: -0.005em;
  color: var(--hh-navy-deep); margin: 0;
}
.hh-blog .bb-featured .excerpt {
  font-family: var(--hh-font-body); font-size: 16px; line-height: 1.55;
  color: var(--hh-text-body); margin: 0; max-width: 60ch;
}
.hh-blog .bb-featured .meta {
  font-family: var(--hh-font-mono); font-size: 12px;
  color: var(--hh-text-muted); display: inline-flex; align-items: center; gap: 12px;
}
.hh-blog .bb-featured .meta .author { color: var(--hh-navy-deep); font-weight: 600; }
.hh-blog .bb-featured .meta .dot { opacity: 0.4; }
.hh-blog .bb-featured .cta {
  font-family: var(--hh-font-body); font-size: 14px; font-weight: 600;
  color: var(--hh-blue); margin-top: 6px;
}

/* ── Post grid (3-up; .bb-card image surface intact per L55(d) context-divergence
   from Pass 7d .blog-card image-trim) ── */
.hh-blog .bb-grid-wrap {
  max-width: 1280px; margin: 0 auto; padding: 28px 24px 56px;
}
.hh-blog .bb-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.hh-blog .bb-card {
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
.hh-blog .bb-card:hover { border-color: var(--hh-navy); transform: translateY(-2px); }
.hh-blog .bb-card .img {
  height: 200px; background: var(--hh-offwhite);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hh-font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--hh-text-muted); text-transform: uppercase;
  border-bottom: 1px solid var(--hh-border-soft);
  position: relative;
  overflow: hidden;
}
.hh-blog .bb-card .img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hh-blog .bb-card .img .tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--hh-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--hh-white); color: var(--hh-navy-deep);
  padding: 4px 8px; border-radius: 3px;
  border: 1px solid var(--hh-border);
  z-index: 1;
}
.hh-blog .bb-card .body {
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.hh-blog .bb-card h3 {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 19px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--hh-navy-deep); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hh-blog .bb-card .excerpt {
  font-family: var(--hh-font-body); font-size: 14px; line-height: 1.5;
  color: var(--hh-text-body); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hh-blog .bb-card .meta {
  font-family: var(--hh-font-mono); font-size: 11px;
  color: var(--hh-text-muted); display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 8px;
}
.hh-blog .bb-card .meta .author { color: var(--hh-navy-deep); font-weight: 600; }
.hh-blog .bb-card .meta .dot { opacity: 0.4; }

/* ── Browse by part type (offwhite secondary section) ── */
.hh-blog .bb-browse {
  background: var(--hh-offwhite);
  border-top: 1px solid var(--hh-border-soft);
  padding: 48px 24px;
}
.hh-blog .bb-browse-shell {
  max-width: 1280px; margin: 0 auto;
}
.hh-blog .bb-browse h2 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 26px; color: var(--hh-navy-deep); margin: 0 0 6px;
}
.hh-blog .bb-browse .lede {
  font-family: var(--hh-font-body); font-size: 15px;
  color: var(--hh-text-body); margin: 0 0 22px;
}
.hh-blog .bb-browse-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.hh-blog .bb-browse-pill {
  font-family: var(--hh-font-body); font-size: 14px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px;
  background: var(--hh-white); color: var(--hh-navy-deep);
  border: 1px solid var(--hh-border);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.hh-blog .bb-browse-pill:hover { border-color: var(--hh-navy-deep); }
.hh-blog .bb-browse-pill .count {
  font-family: var(--hh-font-mono); font-size: 11px;
  color: var(--hh-text-muted); font-weight: 500;
}

/* ── Newsletter (full-bleed navy-deep terminus before footer per atom) ── */
.hh-blog .bb-newsletter {
  background: var(--hh-navy-deep); color: var(--hh-white);
  padding: 44px 24px;
}
.hh-blog .bb-newsletter .shell {
  max-width: 720px; margin: 0 auto; text-align: center;
}
.hh-blog .bb-newsletter h2 {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 26px; color: var(--hh-white); margin: 0 0 8px;
}
.hh-blog .bb-newsletter p {
  font-family: var(--hh-font-body); font-size: 15px; line-height: 1.5;
  /* Cluster-precise migration: atom raw rgba(255,255,255,0.78) maps to
     --hh-text-on-navy-muted (exact match per Pass 6c-δ Lesson 50 taxonomy). */
  color: var(--hh-text-on-navy-muted); margin: 0 0 22px;
}
.hh-blog .bb-newsletter .row {
  display: flex; gap: 8px; max-width: 480px; margin: 0 auto;
}
.hh-blog .bb-newsletter input {
  flex: 1; font: inherit; font-size: 14px;
  padding: 12px 14px;
  /* Off-taxonomy raw 0.18: form-input border on navy chrome; intermediate
     weight between --hh-border-on-navy-soft (0.14) and Pass 7e ghost border
     (0.4); preserve raw + annotation. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Off-taxonomy raw 0.06: form-input background on navy chrome. NOTE:
     same VALUE as Pass 7c+7e .ghost:hover background, but DIFFERENT
     semantic role (form-input bg vs CTA hover scrim). Token-expansion-
     trigger registry from Pass 7e D5 NOT activated; semantic-role
     recurrence ≠ value recurrence (banking refinement candidate at
     Phase 6 workstream-close). */
  background: rgba(255, 255, 255, 0.06);
  color: var(--hh-white);
  border-radius: var(--hh-radius); outline: none;
}
.hh-blog .bb-newsletter input::placeholder {
  /* Off-taxonomy raw 0.5: input-element placeholder scrim on navy chrome;
     not in Pass 6c-δ taxonomy (no current 0.5 token); preserve raw. */
  color: rgba(255, 255, 255, 0.5);
}
.hh-blog .bb-newsletter button {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 12px 20px; border: none; cursor: pointer;
  background: var(--hh-blue); color: var(--hh-white);
  border-radius: var(--hh-radius); white-space: nowrap;
}
.hh-blog .bb-newsletter button:hover { background: var(--hh-blue-hover); }
.hh-blog .bb-newsletter__msg {
  font-family: var(--hh-font-body); font-size: 14px; line-height: 1.5;
  margin: 16px auto 0; max-width: 480px;
}
.hh-blog .bb-newsletter__msg--success { color: var(--hh-text-on-navy-strong); }
.hh-blog .bb-newsletter__msg--error { color: var(--hh-error, #ff8c8c); }

/* ── Mobile responsive (Path 1 — 720px breakpoint per Pass 5 + Pass 6c convention) ── */
@media (max-width: 720px) {
  .hh-blog .bb-pagehead { padding: 22px 20px 14px; }
  .hh-blog .bb-pagehead h1 { font-size: 36px; line-height: 1.1; }
  .hh-blog .bb-pagehead .lede { font-size: 16px; }
  .hh-blog .bb-topics { padding: 14px 20px 0; }
  .hh-blog .bb-featured-wrap { padding: 24px 20px 0; }
  .hh-blog .bb-featured { grid-template-columns: 1fr; gap: 0; }
  .hh-blog .bb-featured .img { min-height: 200px; }
  .hh-blog .bb-featured .body { padding: 24px; gap: 12px; }
  .hh-blog .bb-featured h2 { font-size: 26px; }
  .hh-blog .bb-grid-wrap { padding: 24px 20px 40px; }
  .hh-blog .bb-grid { grid-template-columns: 1fr; gap: 20px; }
  .hh-blog .bb-browse { padding: 36px 20px; }
  .hh-blog .bb-browse h2 { font-size: 22px; }
  .hh-blog .bb-newsletter { padding: 36px 20px; }
  .hh-blog .bb-newsletter h2 { font-size: 22px; }
  .hh-blog .bb-newsletter .row { flex-direction: column; }
  .hh-blog .bb-newsletter button { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
   Article template — Phase 6b v1 (templates/article.json)
   Atom canvas: docs/design-source/2026-05-02-snapshot/blog.css:242-859
   Lifted with .hh-blog parent-scope wrap.
   Token discipline: 4 cluster-precise migrations + 5 preserve-raw with annotation.
   ───────────────────────────────────────────────────────────────────── */

/* ── 2-col shell layout ── */
.hh-blog .bp-shell {
  max-width: 1280px; margin: 0 auto; padding: 24px 24px 48px;
  display: grid; grid-template-columns: 1fr 320px; gap: 56px;
  align-items: start;
}

/* ── Article column ── */
.hh-blog .bp-article { max-width: 740px; }

.hh-blog .bp-tag-row { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.hh-blog .bp-tag {
  font-family: var(--hh-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--hh-blue-tint); color: var(--hh-blue-hover);
  padding: 4px 10px; border-radius: 4px;
}
.hh-blog .bp-h1 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 44px; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--hh-navy-deep); margin: 0 0 18px;
}
.hh-blog .bp-meta {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--hh-border-soft);
}
.hh-blog .bp-meta .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--hh-navy-deep); color: var(--hh-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hh-font-heading); font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.hh-blog .bp-meta .who {
  font-family: var(--hh-font-body); font-size: 14px;
  color: var(--hh-text-body); line-height: 1.4;
}
.hh-blog .bp-meta .who .author {
  color: var(--hh-navy-deep); font-weight: 600;
}
.hh-blog .bp-meta .who .small {
  font-family: var(--hh-font-mono); font-size: 11px;
  color: var(--hh-text-muted); display: block;
}
.hh-blog .bp-meta .share {
  margin-left: auto; display: inline-flex; gap: 6px;
}
.hh-blog .bp-meta .share a {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--hh-border); background: var(--hh-white);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--hh-text-muted);
  text-decoration: none;
  font-size: 14px;
}
.hh-blog .bp-meta .share a:hover { border-color: var(--hh-navy-deep); color: var(--hh-navy-deep); }

/* ── Hero image (16:9 aspect-ratio reservation prevents CLS) ── */
.hh-blog .bp-hero-img {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--hh-navy-deep) 0%, var(--hh-navy) 100%);
  border-radius: var(--hh-radius);
  margin-bottom: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--hh-white); font-family: var(--hh-font-mono);
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.hh-blog .bp-hero-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hh-blog .bp-hero-img::before {
  content: ""; position: absolute; inset: 24px;
  /* Off-taxonomy raw 0.12: decoration on photographic/gradient surface;
     parallel to .bb-featured .img::before 0.10 (Phase 6a; same semantic
     role at slightly different value); preserve raw + annotation. */
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

/* ── Compact author block (above content) ── */
.hh-blog .bp-author-compact {
  background: var(--hh-offwhite);
  border-left: 4px solid var(--hh-navy-deep);
  padding: 14px 18px; margin-bottom: 28px;
  font-family: var(--hh-font-body); font-size: 14px; line-height: 1.5;
  color: var(--hh-text-body);
}
.hh-blog .bp-author-compact strong { color: var(--hh-navy-deep); font-weight: 600; }

/* ── Inline TOC (D1 conditional render) ── */
.hh-blog .bp-toc-inline {
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  padding: 20px 24px; margin: 0 0 32px;
}
.hh-blog .bp-toc-inline .eyebrow {
  font-family: var(--hh-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--hh-text-muted); margin: 0 0 10px;
}
.hh-blog .bp-toc-inline ol {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px;
  counter-reset: toc;
}
.hh-blog .bp-toc-inline li { counter-increment: toc; }
.hh-blog .bp-toc-inline li a {
  font-family: var(--hh-font-body); font-size: 14px; line-height: 1.45;
  color: var(--hh-text-body); text-decoration: none;
  display: flex; gap: 8px; padding: 4px 0;
}
.hh-blog .bp-toc-inline li a::before {
  content: counter(toc, decimal-leading-zero) ".";
  font-family: var(--hh-font-mono); font-size: 11px;
  color: var(--hh-text-muted); flex-shrink: 0;
  min-width: 20px;
}
.hh-blog .bp-toc-inline li a:hover { color: var(--hh-blue); }

/* ── Article body typography ── */
.hh-blog .bp-body { font-family: var(--hh-font-body); }
.hh-blog .bp-body p {
  font-size: 17px; line-height: 1.65;
  color: var(--hh-text); margin: 0 0 22px;
  max-width: 64ch;
  text-wrap: pretty;
}
.hh-blog .bp-body p.lede {
  font-size: 19px; line-height: 1.55; color: var(--hh-text-body);
}
.hh-blog .bp-body h2 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 30px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--hh-navy-deep);
  margin: 44px 0 16px;
  scroll-margin-top: 80px;
}
.hh-blog .bp-body h3 {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 20px; line-height: 1.3;
  color: var(--hh-navy-deep);
  margin: 28px 0 10px;
}
.hh-blog .bp-body strong { font-weight: 600; color: var(--hh-navy-deep); }
.hh-blog .bp-body a {
  color: var(--hh-blue); text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.hh-blog .bp-body a:hover { color: var(--hh-blue-hover); }
/* D9.3 external link visual affordance — ↗ glyph after target="_blank" anchors.
   external-link-handler.liquid (D9.2) injects target="_blank" + rel attrs at
   DOMContentLoaded for absolute URLs with foreign host. */
.hh-blog .bp-body a[target="_blank"]::after {
  content: "\2197"; /* north-east arrow ↗ */
  font-family: var(--hh-font-mono);
  font-size: 0.85em;
  margin-left: 0.2em;
  opacity: 0.7;
  text-decoration: none;
  display: inline-block;
}
.hh-blog .bp-body hr {
  border: 0; border-top: 1px solid var(--hh-border-soft);
  margin: 36px 0;
}
.hh-blog .bp-body ul,
.hh-blog .bp-body ol {
  font-size: 17px; line-height: 1.6;
  color: var(--hh-text); padding-left: 24px;
  margin: 0 0 22px; max-width: 64ch;
}
.hh-blog .bp-body li { margin-bottom: 10px; }

/* ── Inline diagnostic block (Chris voice; rendered via diagnostic-blog snippet) ── */
.hh-blog .bp-diagnostic {
  background: var(--hh-offwhite);
  border-left: 4px solid var(--hh-navy-deep);
  padding: 22px 26px;
  margin: 28px 0 28px;
  border-radius: 0 var(--hh-radius) var(--hh-radius) 0;
}
.hh-blog .bp-diagnostic .eyebrow {
  font-family: var(--hh-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--hh-text-muted); margin: 0 0 10px;
}
.hh-blog .bp-diagnostic h4 {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 18px; color: var(--hh-navy-deep);
  margin: 0 0 10px;
}
.hh-blog .bp-diagnostic p {
  font-family: var(--hh-font-body); font-size: 15px;
  line-height: 1.6; color: var(--hh-text-body);
  margin: 0; max-width: 60ch;
}

/* ── Comparison table (rendered via article.content rich-text editor tables) ── */
.hh-blog .bp-table-wrap,
.hh-blog .bp-body table {
  margin: 24px 0 28px;
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  overflow: hidden;
}
.hh-blog .bp-table,
.hh-blog .bp-body table {
  width: 100%; border-collapse: collapse;
  font-family: var(--hh-font-body); font-size: 14px;
}
.hh-blog .bp-table th, .hh-blog .bp-table td,
.hh-blog .bp-body table th, .hh-blog .bp-body table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--hh-border-soft);
  vertical-align: top;
  line-height: 1.5;
}
.hh-blog .bp-table th, .hh-blog .bp-body table th {
  font-family: var(--hh-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hh-text-muted);
  background: var(--hh-offwhite);
}
.hh-blog .bp-table td:first-child,
.hh-blog .bp-body table td:first-child { font-weight: 600; color: var(--hh-navy-deep); }
.hh-blog .bp-table tr:last-child td,
.hh-blog .bp-body table tr:last-child td { border-bottom: none; }

/* ── Sign-off ── */
.hh-blog .bp-signoff {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 18px; color: var(--hh-navy-deep);
  margin: 36px 0 0;
}

/* ── Full author bio block ── */
.hh-blog .bp-author-full {
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  padding: 28px 32px;
  margin: 56px 0 0;
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  align-items: start;
}
.hh-blog .bp-author-full .av {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--hh-navy-deep); color: var(--hh-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hh-font-heading); font-weight: 700; font-size: 22px;
}
.hh-blog .bp-author-full .who {
  font-family: var(--hh-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--hh-text-muted); margin: 0 0 4px;
}
.hh-blog .bp-author-full h3 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 22px; color: var(--hh-navy-deep);
  margin: 0 0 10px;
}
.hh-blog .bp-author-full p {
  font-family: var(--hh-font-body); font-size: 15px; line-height: 1.6;
  color: var(--hh-text-body); margin: 0 0 14px;
  max-width: 60ch;
}
.hh-blog .bp-author-full .more {
  font-family: var(--hh-font-body); font-size: 14px; font-weight: 600;
  color: var(--hh-blue); text-decoration: none;
}
.hh-blog .bp-author-full .more:hover { text-decoration: underline; }

/* ── FAQ accordion (rendered via article.content if author uses native details/summary) ── */
.hh-blog .bp-faq { margin: 56px 0 0; }
.hh-blog .bp-faq > h2 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 30px; color: var(--hh-navy-deep);
  margin: 0 0 24px;
}
.hh-blog .bp-faq details {
  border-top: 1px solid var(--hh-border-soft);
  padding: 18px 0;
}
.hh-blog .bp-faq details:last-child { border-bottom: 1px solid var(--hh-border-soft); }
.hh-blog .bp-faq summary {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 17px; color: var(--hh-navy-deep);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.hh-blog .bp-faq summary::-webkit-details-marker { display: none; }
.hh-blog .bp-faq summary::after {
  content: "−"; font-family: var(--hh-font-mono); font-size: 18px;
  color: var(--hh-text-muted); flex-shrink: 0;
  transition: transform 0.15s;
}
.hh-blog .bp-faq details:not([open]) summary::after { content: "+"; }
.hh-blog .bp-faq details > p {
  font-family: var(--hh-font-body); font-size: 16px; line-height: 1.6;
  color: var(--hh-text-body); margin: 12px 0 0;
  max-width: 64ch;
}

/* ── Right rail (sticky) ── */
.hh-blog .bp-rail { display: flex; flex-direction: column; gap: 24px; position: relative; }
.hh-blog .bp-rail .sticky {
  position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.hh-blog .bp-rail-card {
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  padding: 22px;
}
.hh-blog .bp-rail-card .eyebrow {
  font-family: var(--hh-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--hh-text-muted); margin: 0 0 12px;
}
.hh-blog .bp-rail-author {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  align-items: center;
}
.hh-blog .bp-rail-author .av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--hh-navy-deep); color: var(--hh-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hh-font-heading); font-weight: 700; font-size: 18px;
}
.hh-blog .bp-rail-author .name {
  font-family: var(--hh-font-heading); font-weight: 600; font-size: 16px;
  color: var(--hh-navy-deep); margin: 0 0 2px;
}
.hh-blog .bp-rail-author .desc {
  font-family: var(--hh-font-body); font-size: 14px; line-height: 1.4;
  color: var(--hh-text-muted); margin: 0;
}
.hh-blog .bp-rail-card .msg-cta {
  display: block; margin-top: 14px;
  font-family: var(--hh-font-body); font-size: 13px; font-weight: 600;
  text-align: center;
  padding: 9px 14px; border-radius: var(--hh-radius);
  background: var(--hh-white); border: 1px solid var(--hh-border);
  color: var(--hh-navy-deep); text-decoration: none;
}
.hh-blog .bp-rail-card .msg-cta:hover { border-color: var(--hh-navy-deep); }

/* Related posts in rail */
.hh-blog .bp-rail-relpost {
  display: block; text-decoration: none; color: inherit;
  padding: 14px 0; border-top: 1px solid var(--hh-border-soft);
}
.hh-blog .bp-rail-relpost:first-of-type { border-top: none; padding-top: 0; }
.hh-blog .bp-rail-relpost:last-of-type { padding-bottom: 0; }
.hh-blog .bp-rail-relpost .tag {
  font-family: var(--hh-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--hh-text-muted); margin: 0 0 6px;
}
.hh-blog .bp-rail-relpost h4 {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 14px; line-height: 1.35;
  color: var(--hh-navy-deep); margin: 0;
}
.hh-blog .bp-rail-relpost:hover h4 { color: var(--hh-blue); }

/* ── Related posts strip (page-tail; reuses .bb-card from Phase 6a — 2nd consumer per L56) ── */
.hh-blog .bp-related {
  max-width: 1280px; margin: 0 auto; padding: 56px 24px;
  border-top: 1px solid var(--hh-border-soft);
}
.hh-blog .bp-related-head { margin: 0 0 22px; }
.hh-blog .bp-related h2 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 26px; color: var(--hh-navy-deep);
  margin: 0 0 4px;
}
.hh-blog .bp-related-sub {
  font-family: var(--hh-font-body); font-size: 15px;
  color: var(--hh-text-body); margin: 0;
}
.hh-blog .bp-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* ── Final CTA strip (3-CTA split-row; full-bleed navy-deep terminus + .hh-navy-terminus marker) ── */
.hh-blog .bp-final-cta {
  background: var(--hh-navy-deep); color: var(--hh-white);
  padding: 44px 24px;
}
.hh-blog .bp-final-cta .shell {
  max-width: 980px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.hh-blog .bp-final-cta h2 {
  font-family: var(--hh-font-heading); font-weight: 600;
  font-size: 22px; color: var(--hh-white); margin: 0;
}
.hh-blog .bp-final-cta .ctas { display: inline-flex; gap: 10px; flex-shrink: 0; }
.hh-blog .bp-final-cta a {
  font-family: var(--hh-font-body); font-size: 14px; font-weight: 600;
  padding: 11px 18px; border-radius: var(--hh-radius);
  text-decoration: none; white-space: nowrap;
}
.hh-blog .bp-final-cta a.primary { background: var(--hh-blue); color: var(--hh-white); }
.hh-blog .bp-final-cta a.primary:hover { background: var(--hh-blue-hover); }
.hh-blog .bp-final-cta a.ghost {
  background: transparent; color: var(--hh-white);
  /* Off-taxonomy raw 0.3: ghost border on navy chrome — Phase 6b 3rd-consumer
     of CTA-pair-on-navy semantic role with VALUE DRIFT vs Pass 7c+7e (0.4).
     Same role at lower visibility. Per Phase 6a banking refinement (semantic-
     role recurrence ≠ value recurrence) + L51 cluster-precise tolerance:
     preserve atom-faithful raw + annotate. Token-expansion review deferred
     to 4-stable-consumer trigger or Phase 9+ design system pass. */
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.hh-blog .bp-final-cta a.ghost:hover {
  /* Off-taxonomy raw 0.08: ghost hover scrim on navy chrome — Phase 6b 3rd-
     consumer of CTA-hover-scrim semantic role with VALUE DRIFT vs Pass 7c+7e
     (0.06). Same banking disposition as ghost border above. */
  background: rgba(255, 255, 255, 0.08);
}

/* ── Mobile responsive (Path 1 — 720px breakpoint) ── */
@media (max-width: 720px) {
  .hh-blog .bp-shell {
    grid-template-columns: 1fr;
    padding: 16px 16px 32px;
    gap: 32px;
  }
  .hh-blog .bp-rail { display: none; } /* mobile drops rail */
  .hh-blog .bp-h1 { font-size: 28px; }
  .hh-blog .bp-meta .share { display: none; }
  .hh-blog .bp-body p { font-size: 16px; }
  .hh-blog .bp-body h2 { font-size: 24px; margin: 32px 0 12px; }
  .hh-blog .bp-body h3 { font-size: 18px; }
  .hh-blog .bp-toc-inline { padding: 16px 18px; margin-bottom: 24px; }
  .hh-blog .bp-toc-inline ol { grid-template-columns: 1fr; }
  .hh-blog .bp-author-full { grid-template-columns: 1fr; padding: 22px; gap: 12px; }
  .hh-blog .bp-faq summary { font-size: 15px; }
  .hh-blog .bp-faq details > p { font-size: 15px; }
  .hh-blog .bp-related { padding: 36px 16px; }
  .hh-blog .bp-related-grid { grid-template-columns: 1fr; gap: 16px; }
  .hh-blog .bp-final-cta { padding: 32px 16px; }
  .hh-blog .bp-final-cta .shell { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; }
  .hh-blog .bp-final-cta .ctas { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────────────
   About page — Phase 6c v1 (templates/page.about.json)
   Atom canvas: docs/design-source/2026-05-02-snapshot/about.css:1-292
   Lifted with .about-page parent-scope wrap. Atom-canvas-faithful primitive
   family discipline: fresh .about-* primitives (NO cross-template .bp-*/.bb-*
   reuse despite content overlap; atom designer authority on family selection).
   ───────────────────────────────────────────────────────────────────── */

/* ── Page shell ── */
.about-page {
  background: var(--hh-white);
  color: var(--hh-text);
}
.about-page .about-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Section vertical rhythm ── */
.about-page .about-section {
  padding: 64px 0;
  border-top: 1px solid var(--hh-border-soft);
}
.about-page .about-section:first-of-type { border-top: 0; }

/* ── Section 1 — Hero ── */
.about-page .about-hero { padding: 88px 0 28px; border-top: 0; }
.about-page .about-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}

/* ── Section 3 — Stats (offwhite background; figure-propagation 4th-consumer activation per Phase 6c SD-3) ── */
.about-page .about-section.about-stats-section {
  background: var(--hh-offwhite);
  border-top: 1px solid var(--hh-border-soft);
  border-bottom: 1px solid var(--hh-border-soft);
  padding: 48px 0 52px;
}
.about-page .about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.about-page .about-stat .num {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hh-text);
  display: block;
  margin-bottom: 8px;
}
.about-page .about-stat .num-label {
  font-family: var(--hh-font-body);
  font-size: 15px;
  color: var(--hh-text-muted);
  font-weight: 500;
}
.about-page .about-stats-attrib {
  grid-column: 1 / -1;
  font-family: var(--hh-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--hh-text);
  padding-top: 24px;
  border-top: 1px solid var(--hh-border-soft);
  max-width: 60ch;
}
.about-page .about-stats-attrib .quiet {
  color: var(--hh-text-muted);
  font-style: italic;
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

/* ── Section H2 ── */
.about-page .about-section h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--hh-text);
  margin: 0 0 24px;
  /* Bumped 26ch → 40ch (2026-05-08, Jodi UAT): the 26ch cap forced
     "The vehicle is done. The parts aren't." (39 chars) to wrap between
     "parts" and "aren't." 40ch fits all current section h2s on one line
     at desktop while still capping the (rare) extra-long heading. Mobile
     wraps naturally at the container width regardless. */
  max-width: 40ch;
}

/* ── Body prose ── */
.about-page .about-prose p {
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--hh-text);
  margin: 0 0 18px;
  max-width: 60ch;
  text-wrap: pretty;
}
.about-page .about-prose p:last-child { margin-bottom: 0; }

/* ── Section 4 — Component table (Detroit) ── */
.about-page .about-comp-table {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.1fr);
  gap: 0 40px;
  margin: 24px 0 18px;
  border-top: 1px solid var(--hh-border-soft);
}
.about-page .about-comp-col {
  padding-top: 16px;
}
.about-page .about-comp-col h4 {
  font-family: var(--hh-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 12px;
}
.about-page .about-comp-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-page .about-comp-col li {
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--hh-text);
  padding: 8px 0;
  border-bottom: 1px dotted var(--hh-border-soft);
}
.about-page .about-comp-col li:last-child { border-bottom: 0; }
.about-page .about-comp-transition {
  font-family: var(--hh-font-body);
  font-size: 16px;
  font-style: italic;
  color: var(--hh-text-muted);
  margin: 8px 0 22px;
  max-width: 60ch;
}

/* ── Reserved photo slots (Phase 6c SD-5 defensive — Phase 6+ photo session activates) ── */
.about-page .about-photo-slot.deferred {
  display: none;
}

/* ── Section 8 — Customer segments (custom blue-dot bullets) ── */
.about-page .about-segments {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.about-page .about-segments li {
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--hh-text);
  padding: 10px 0 10px 20px;
  position: relative;
  max-width: 60ch;
}
.about-page .about-segments li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--hh-blue);
  font-weight: 700;
  font-size: 22px;
}

/* ── Section 8.5 — Nickname bridge (single-line italic aside).
   Center-aligned + larger spacing so the line reads as an intentional
   editorial aside, not a leftover paragraph. The em-dash flourishes
   give it the visual signature of a pull-quote bridge. Updated
   2026-05-08 after Steve flagged it rendered as orphaned text. ── */
.about-page .about-bridge {
  padding: 56px 0;
  border-top: 1px solid var(--hh-border-soft);
  border-bottom: 1px solid var(--hh-border-soft);
}
.about-page .about-bridge-line {
  margin: 0 auto;
  max-width: 680px;
  font-family: var(--hh-font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--hh-text-slate);
  text-align: center;
}
.about-page .about-bridge-line::before {
  content: "— ";
  color: var(--hh-text-muted);
}
.about-page .about-bridge-line::after {
  content: " —";
  color: var(--hh-text-muted);
}

/* ── Section 9 — Message Hubes CTA (settings.contact_url 3rd-consumer activation) ── */
.about-page .about-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.about-page .about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--hh-text);
  color: var(--hh-white);
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.about-page .about-cta-btn:hover { background: var(--hh-blue); }
.about-page .about-cta-btn .arrow { display: inline-block; transition: transform 0.15s ease; }
.about-page .about-cta-btn:hover .arrow { transform: translateX(2px); }

/* ── Mobile responsive (Path 1 — 720px breakpoint) ── */
@media (max-width: 720px) {
  .about-page .about-shell { padding: 0 20px; }
  .about-page .about-hero { padding: 56px 0 36px; }
  .about-page .about-hero h1 { font-size: 36px; line-height: 1.12; }
  .about-page .about-section { padding: 44px 0; }
  .about-page .about-section h2 { font-size: 26px; line-height: 1.22; }
  .about-page .about-prose p { font-size: 16px; line-height: 1.6; }
  .about-page .about-stats { grid-template-columns: 1fr 1fr; gap: 24px; }
  .about-page .about-section.about-stats-section { padding: 36px 0 38px; }
  .about-page .about-stat .num { font-size: 44px; }
  .about-page .about-stat .num-label { font-size: 14px; }
  .about-page .about-comp-table { grid-template-columns: 1fr; gap: 0; }
  .about-page .about-comp-col { border-top: 1px solid var(--hh-border-soft); padding-top: 14px; }
  .about-page .about-comp-col:first-child { border-top: 0; padding-top: 0; }
  .about-page .about-segments li { font-size: 16px; }
  .about-page .about-bridge { padding: 20px 0; }
  .about-page .about-bridge-line { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   11.5. FAQ page — section primitives (Phase 9b.1)
   Atom: docs/design-source/2026-05-02-snapshot/faq.css 1-326 (locked v1.2)
   Lifted with .faq-page parent-scope wrap per L72 atom-canvas-faithful
   primitive-family-choice (sub-clause f). Greenfield .faq-* family; no
   cross-pollination with .about-* / .bp-* / .bb-* despite content overlap.
   <details>/<summary> semantic accordion per Phase 9b.1 SD-4 (refines
   atom JSX <button>+ARIA pattern; native HTML; iOS support; indexable;
   :target CSS for deep-link auto-expand; banking lesson candidate).
   --------------------------------------------------------------------- */

.faq-page {
  background: #fff;
  color: var(--hh-text);
}
.faq-page .faq-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Hero ----- */
.faq-page .faq-hero {
  padding: 88px 0 20px;
}
.faq-page .faq-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.faq-page .faq-hero .subhead {
  font-family: var(--hh-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

/* ----- TOC chips ----- */
.faq-page .faq-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  margin-top: 12px;
}
.faq-page .faq-toc-label {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  width: 100%;
  margin-bottom: 4px;
}
.faq-page .faq-toc a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--hh-border);
  border-radius: 999px;
  background: #fff;
  font-family: var(--hh-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--hh-text);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.faq-page .faq-toc a:hover {
  background: var(--hh-bg-soft);
  border-color: var(--hh-text-muted);
}
.faq-page .faq-toc a .num {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  color: var(--hh-text-muted);
  font-weight: 500;
}

/* ----- Section ----- */
.faq-page .faq-section {
  padding: 56px 0 16px;
  scroll-margin-top: 24px;
}
.faq-page .faq-section + .faq-section {
  border-top: 1px solid var(--hh-border-soft);
}
.faq-page .faq-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
}
.faq-page .faq-section-num {
  font-family: var(--hh-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--hh-text-muted);
}
.faq-page .faq-section h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--hh-text);
  margin: 0;
}
.faq-page .faq-section-count {
  margin-left: auto;
  font-family: var(--hh-font-mono);
  font-size: 12px;
  color: var(--hh-text-muted);
}

/* ----- Accordion (semantic <details>/<summary>; Phase 9b.1 SD-4) ----- */
.faq-page .faq-page-row {
  border-bottom: 1px solid var(--hh-border-soft);
  scroll-margin-top: 24px;
}
.faq-page .faq-page-row:first-child {
  border-top: 1px solid var(--hh-border-soft);
}
/* Hide native <details> marker; reveal custom rotating chevron */
.faq-page .faq-page-q {
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--hh-font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--hh-text);
}
.faq-page .faq-page-q::-webkit-details-marker { display: none; }
.faq-page .faq-page-q::marker { content: ""; display: none; }
.faq-page .faq-page-q:hover { color: var(--hh-blue); }
.faq-page .faq-page-q .arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--hh-text-slate, #5c6a7a);
  border-bottom: 2px solid var(--hh-text-slate, #5c6a7a);
  transform: rotate(45deg);
  transition: transform 180ms ease;
  margin-bottom: 4px;
}
.faq-page .faq-page-row[open] .faq-page-q .arrow {
  transform: rotate(225deg);
  margin-bottom: -2px;
  margin-top: 4px;
}
.faq-page .faq-page-row[open] .faq-page-q { color: var(--hh-text); }
.faq-page .faq-page-a {
  padding: 0 4px 24px;
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
  max-width: 68ch;
}
.faq-page .faq-page-a > * + * { margin-top: 12px; }
.faq-page .faq-page-a p { margin: 0; }
.faq-page .faq-page-a ul,
.faq-page .faq-page-a ol {
  margin: 0;
  padding-left: 20px;
}
.faq-page .faq-page-a li + li { margin-top: 6px; }
.faq-page .faq-page-a li { padding-left: 4px; }
.faq-page .faq-page-a strong { font-weight: 600; color: var(--hh-text); }
.faq-page .faq-page-a em { font-style: italic; }
.faq-page .faq-page-a a {
  color: var(--hh-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Deep-link target highlight (subtle) — refines atom JS hash-handler (Phase 9b.1 SD-4) */
.faq-page .faq-page-row:target .faq-page-q {
  color: var(--hh-blue);
}

/* ----- End-of-page CTA ----- */
.faq-page .faq-end-cta {
  margin: 80px 0 96px;
  padding: 40px 36px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius-md);
}
.faq-page .faq-end-cta h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--hh-text);
  margin: 0 0 8px;
}
.faq-page .faq-end-cta p {
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--hh-text-body);
  margin: 0 0 20px;
  max-width: 56ch;
}
.faq-page .faq-end-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.faq-page .faq-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--hh-radius-sm);
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.faq-page .faq-btn-primary {
  background: var(--hh-navy-deep);
  color: #fff;
}
.faq-page .faq-btn-primary:hover { background: #1a2c43; }
.faq-page .faq-btn-secondary {
  background: #fff;
  border-color: var(--hh-border);
  color: var(--hh-text);
}
.faq-page .faq-btn-secondary:hover { border-color: var(--hh-text-muted); }
.faq-page .faq-end-cta-meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 14px;
  color: var(--hh-text-muted);
}

/* Mobile (Phase 9b.1) */
@media (max-width: 720px) {
  .faq-page .faq-shell { padding: 0 20px; }
  .faq-page .faq-hero { padding: 48px 0 14px; }
  .faq-page .faq-hero h1 { font-size: 28px; line-height: 0.95; margin-bottom: 18px; }
  .faq-page .faq-hero .subhead { font-size: 15px; line-height: 1.5; }
  .faq-page .faq-toc { padding: 6px 0; margin-top: 10px; gap: 6px; }
  .faq-page .faq-toc a { padding: 12px 14px; min-height: 44px; font-size: 13px; }
  .faq-page .faq-toc-label { margin-bottom: 2px; }
  .faq-page .faq-section { padding: 40px 0 4px; }
  .faq-page .faq-section-head { gap: 10px; margin-bottom: 18px; }
  .faq-page .faq-section h2 { font-size: 24px; line-height: 1.22; }
  .faq-page .faq-section-num { font-size: 12px; }
  .faq-page .faq-section-count { display: none; }
  .faq-page .faq-page-q { font-size: 16px; padding: 18px 0; }
  .faq-page .faq-page-a { font-size: 15px; padding: 0 0 20px; }
  .faq-page .faq-end-cta { margin: 56px 0 64px; padding: 28px 22px; }
  .faq-page .faq-end-cta h2 { font-size: 22px; }
  .faq-page .faq-end-cta p { font-size: 15px; }
  .faq-page .faq-btn { width: 100%; justify-content: center; padding: 13px 20px; }
}

/* ---------------------------------------------------------------------
   11.6. Returns page — section primitives (Phase 9b.2)
   Atom: docs/design-source/2026-05-02-snapshot/returns.css 1-195 (locked v1.0)
   Lifted with .returns-page parent-scope wrap per L72 atom-canvas-faithful
   primitive-family-choice (sub-clause f). Greenfield .returns-* family;
   no cross-pollination with .faq-* / .about-* / .bp-* / .bb-* despite
   content overlap. Plain prose; no accordion; no callout boxes (atom locks).
   Single-column 720px shell — narrowest of 6 templates.
   --------------------------------------------------------------------- */

.returns-page {
  background: #fff;
  color: var(--hh-text);
}
.returns-page .returns-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Hero ----- */
.returns-page .returns-hero {
  padding: 88px 0 28px;
}
.returns-page .returns-eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 14px;
}
.returns-page .returns-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.returns-page .returns-hero .subhead {
  font-family: var(--hh-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

/* ----- Body wrapper ----- */
.returns-page .returns-body {
  padding: 0 0 96px;
}

/* ----- TL;DR (Section 1 — short version) ----- */
.returns-page .returns-tldr {
  margin: 32px 0 48px;
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hh-text-body);
  text-wrap: pretty;
}
.returns-page .returns-tldr p { margin: 0; }
.returns-page .returns-tldr a {
  color: var(--hh-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.returns-page .returns-tldr a:hover { color: #1f6dbd; }

/* ----- Section ----- */
.returns-page .returns-section {
  margin-top: 56px;
}
.returns-page .returns-section:first-of-type {
  margin-top: 56px;
}
.returns-page .returns-section h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--hh-text);
  margin: 0 0 18px;
  text-wrap: balance;
}
.returns-page .returns-section p {
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.returns-page .returns-section p:last-child { margin-bottom: 0; }
.returns-page .returns-section a {
  color: var(--hh-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.returns-page .returns-section a:hover { color: #1f6dbd; }
.returns-page .returns-section strong {
  color: var(--hh-text);
  font-weight: 600;
}
.returns-page .returns-section code {
  font-family: var(--hh-font-mono);
  font-size: 14.5px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--hh-text);
}

/* ----- The single list — Section 4 only ----- */
.returns-page .returns-list {
  margin: 0 0 14px;
  padding: 0 0 0 22px;
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
}
.returns-page .returns-list li { margin-bottom: 6px; }
.returns-page .returns-list li:last-child { margin-bottom: 14px; }

/* ----- End-of-page line ----- */
.returns-page .returns-end {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  color: var(--hh-text-muted);
  text-align: center;
}
.returns-page .returns-end a {
  color: var(--hh-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.returns-page .returns-end a:hover { color: #1f6dbd; }

/* Mobile (Phase 9b.2) */
@media (max-width: 720px) {
  .returns-page .returns-shell { padding: 0 20px; }
  .returns-page .returns-hero { padding: 48px 0 18px; }
  .returns-page .returns-hero h1 { font-size: 32px; line-height: 0.98; margin-bottom: 14px; }
  .returns-page .returns-hero .subhead { font-size: 15px; }
  .returns-page .returns-eyebrow { margin-bottom: 12px; }
  .returns-page .returns-body { padding: 0 0 64px; }
  .returns-page .returns-tldr { margin: 24px 0 36px; font-size: 16px; line-height: 1.6; }
  .returns-page .returns-section { margin-top: 40px; }
  .returns-page .returns-section h2 { font-size: 22px; margin-bottom: 14px; }
  .returns-page .returns-section p { font-size: 15.5px; line-height: 1.6; }
  .returns-page .returns-list { font-size: 15.5px; line-height: 1.6; }
  .returns-page .returns-end { margin-top: 56px; padding-top: 24px; font-size: 15px; }
}

/* ---------------------------------------------------------------------
   11.7. Shipping page — section primitives (Phase 9b.3)
   Atom: docs/design-source/2026-05-02-snapshot/shipping.css 1-186 (locked v1.1)
   Lifted with .ship-page parent-scope wrap per L72 atom-canvas-faithful
   primitive-family-choice (sub-clause f) + atom-prefix-authority discipline:
   atom uses .ship-* (NOT .shipping-*); production preserves atom canonical
   prefix. Greenfield .ship-* family; no cross-pollination with .returns-* /
   .faq-* / .about-* / etc. despite content overlap. Plain prose; no
   accordion; no callout boxes (atom locks "Mirrors Returns convention
   exactly"). Single-column 720px shell. .ship-pending dead rule omitted
   per atom v1.1 lock ("placeholders cleared").
   --------------------------------------------------------------------- */

.ship-page {
  background: #fff;
  color: var(--hh-text);
}
.ship-page .ship-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Hero ----- */
.ship-page .ship-hero {
  padding: 88px 0 28px;
}
.ship-page .ship-eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 14px;
}
.ship-page .ship-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.ship-page .ship-hero .subhead {
  font-family: var(--hh-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

/* ----- Body wrapper ----- */
.ship-page .ship-body {
  padding: 0 0 96px;
}

/* ----- TL;DR (Section 1 — short version; 2 paragraphs vs Returns 1) ----- */
.ship-page .ship-tldr {
  margin: 32px 0 48px;
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hh-text-body);
  text-wrap: pretty;
}
.ship-page .ship-tldr p { margin: 0 0 14px; }
.ship-page .ship-tldr p:last-child { margin-bottom: 0; }
.ship-page .ship-tldr a {
  color: var(--hh-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.ship-page .ship-tldr a:hover { color: #1f6dbd; }

/* ----- Section ----- */
.ship-page .ship-section {
  margin-top: 56px;
}
.ship-page .ship-section:first-of-type {
  margin-top: 56px;
}
.ship-page .ship-section h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--hh-text);
  margin: 0 0 18px;
  text-wrap: balance;
}
.ship-page .ship-section p {
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.ship-page .ship-section p:last-child { margin-bottom: 0; }
.ship-page .ship-section a {
  color: var(--hh-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.ship-page .ship-section a:hover { color: #1f6dbd; }
.ship-page .ship-section strong {
  color: var(--hh-text);
  font-weight: 600;
}

/* ----- End-of-page line ----- */
.ship-page .ship-end {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  color: var(--hh-text-muted);
  text-align: center;
}
.ship-page .ship-end a {
  color: var(--hh-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.ship-page .ship-end a:hover { color: #1f6dbd; }

/* Mobile (Phase 9b.3) */
@media (max-width: 720px) {
  .ship-page .ship-shell { padding: 0 20px; }
  .ship-page .ship-hero { padding: 48px 0 18px; }
  .ship-page .ship-hero h1 { font-size: 32px; line-height: 0.98; margin-bottom: 14px; }
  .ship-page .ship-hero .subhead { font-size: 15px; }
  .ship-page .ship-eyebrow { margin-bottom: 12px; }
  .ship-page .ship-body { padding: 0 0 64px; }
  .ship-page .ship-tldr { margin: 24px 0 36px; font-size: 16px; line-height: 1.6; }
  .ship-page .ship-section { margin-top: 40px; }
  .ship-page .ship-section h2 { font-size: 22px; margin-bottom: 14px; }
  .ship-page .ship-section p { font-size: 15.5px; line-height: 1.6; }
  .ship-page .ship-end { margin-top: 56px; padding-top: 24px; font-size: 15px; }
}

/* ---------------------------------------------------------------------
   11.8. Contact page — section primitives (Phase 9b.4)
   Atom: docs/design-source/2026-05-02-snapshot/contact.css 1-428 (locked)
   Lifted with .contact-page parent-scope wrap per L72 atom-canvas-faithful
   primitive-family-choice (sub-clause f) + atom-prefix-authority discipline:
   atom uses .contact-* (full prefix; not abbreviated). Greenfield .contact-*
   family. Richest Phase 9b sub-pass CSS scope (form scaffolding + 4 page
   composition variants).
   Honeypot field CSS-hidden per Phase 9b.4 SD-4 D11 spam protection.
   --------------------------------------------------------------------- */

.contact-page {
  background: #fff;
  color: var(--hh-text);
}
.contact-page .contact-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Hero ----- */
.contact-page .contact-hero {
  padding: 88px 0 28px;
}
.contact-page .contact-eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 14px;
}
.contact-page .contact-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.contact-page .contact-hero .subhead {
  font-family: var(--hh-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

/* ----- Founder note ----- */
.contact-page .contact-founder {
  margin: 32px 0 56px;
  padding: 22px 24px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius-md);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
}
.contact-page .contact-founder-photo {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-page .contact-founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.contact-page .contact-founder-body {
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--hh-text-body);
}
.contact-page .contact-founder-body p { margin: 0; }
.contact-page .contact-founder-sig {
  margin-top: 8px;
  font-family: var(--hh-font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--hh-text-muted);
}

/* ----- Form ----- */
.contact-page .contact-form-wrap {
  padding-bottom: 56px;
}
.contact-page .contact-form {
  display: grid;
  gap: 20px;
}
.contact-page .contact-form-errors {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: #fdecec;
  border: 1px solid #f5b0b0;
  border-radius: var(--hh-radius, 4px);
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  color: #8b1a1a;
}
.contact-page .contact-form-errors p { margin: 0; }
.contact-page .contact-row {
  display: grid;
  gap: 6px;
}
.contact-page .contact-row.two-col {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-page .contact-row.two-col .contact-field {
  display: grid;
  gap: 6px;
}
.contact-page .contact-row.three-col {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  gap: 12px;
}
.contact-page .contact-row.three-col .contact-field {
  display: grid;
  gap: 6px;
}
.contact-page .contact-label {
  font-family: var(--hh-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--hh-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.contact-page .contact-label .req {
  color: var(--hh-text-muted);
  font-weight: 400;
  font-size: 12px;
}
.contact-page .contact-input,
.contact-page .contact-select,
.contact-page .contact-textarea {
  width: 100%;
  font-family: var(--hh-font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--hh-text);
  background: #fff;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius, 4px);
  padding: 11px 13px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}
.contact-page .contact-input:focus,
.contact-page .contact-select:focus,
.contact-page .contact-textarea:focus {
  outline: none;
  border-color: var(--hh-blue);
  box-shadow: 0 0 0 3px rgba(46, 134, 222, 0.15);
}
.contact-page .contact-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235c6a7a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}
.contact-page .contact-textarea {
  resize: vertical;
  min-height: 140px;
  font-family: var(--hh-font-body);
}
.contact-page .contact-help {
  font-family: var(--hh-font-body);
  font-size: 13px;
  color: var(--hh-text-muted);
  margin: 0;
}
.contact-page .contact-conditional {
  border-left: 2px solid var(--hh-blue-tint, #d8e7f7);
  padding-left: 16px;
  margin-left: -18px;
  display: grid;
  gap: 16px;
}
.contact-page .contact-conditional[hidden] { display: none; }

/* File input — keep visually consistent with the other text inputs but
   preserve native picker affordance. The native file input renders a
   "Choose Files" button + filename label inline; we just match the
   border + padding + border-radius treatment of .contact-input. Added
   2026-05-08 with order/return photo upload (Jodi feedback). */
.contact-page .contact-file-input {
  padding: 9px 12px;
  cursor: pointer;
}
.contact-page .contact-file-input::-webkit-file-upload-button {
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  margin-right: 12px;
  background: var(--hh-blue-tint, #d8e7f7);
  border: 1px solid var(--hh-border, #cfd6df);
  border-radius: var(--hh-radius-sm, 4px);
  color: var(--hh-navy-deep, #1B2A4A);
  cursor: pointer;
}
.contact-page .contact-file-input::file-selector-button {
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  margin-right: 12px;
  background: var(--hh-blue-tint, #d8e7f7);
  border: 1px solid var(--hh-border, #cfd6df);
  border-radius: var(--hh-radius-sm, 4px);
  color: var(--hh-navy-deep, #1B2A4A);
  cursor: pointer;
}
.contact-page .contact-conditional-note {
  font-family: var(--hh-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hh-blue);
}

/* Honeypot — CSS-hidden + tabindex=-1 (Phase 9b.4 SD-4 D11 spam protection) */
.contact-page .contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit row */
.contact-page .contact-submit-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.contact-page .contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--hh-radius, 4px);
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.contact-page .contact-btn-primary {
  background: var(--hh-blue);
  color: #fff;
}
.contact-page .contact-btn-primary:hover { background: #1f6dbd; }
.contact-page .contact-submit-row .contact-help {
  font-size: 13px;
  color: var(--hh-text-muted);
}

/* ----- Other ways to reach ----- */
.contact-page .contact-channels {
  margin-top: 56px;
}
.contact-page .contact-section-eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 18px;
}
.contact-page .contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-page .contact-card {
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius-md);
  padding: 22px 24px;
  background: #fff;
  display: grid;
  gap: 6px;
}
.contact-page .contact-card-label {
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  color: var(--hh-text-muted);
  margin: 0;
  line-height: 1.4;
}
.contact-page .contact-card-value {
  font-family: var(--hh-font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--hh-text);
  text-decoration: none;
  letter-spacing: 0.005em;
  margin: 0;
}
.contact-page a.contact-card-value:hover { color: var(--hh-blue); }
.contact-page .contact-card-meta {
  font-family: var(--hh-font-body);
  font-size: 13px;
  color: var(--hh-text-muted);
  margin: 0;
}

/* ----- Shop note ----- */
.contact-page .contact-shop-note {
  margin: 36px auto 96px;
  padding: 0;
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  color: var(--hh-text-muted);
  line-height: 1.55;
  text-align: center;
  max-width: 56ch;
}

/* ----- Success state ----- */
.contact-page .contact-success {
  margin: 32px 0 56px;
  padding: 36px 32px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius-md);
}
.contact-page .contact-success-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hh-success, #27a560);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 22px;
}
.contact-page .contact-success h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.18;
  color: var(--hh-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.contact-page .contact-success-body {
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--hh-text-body);
  margin: 0 0 8px;
  max-width: 56ch;
}
.contact-page .contact-success-meta {
  font-family: var(--hh-font-body);
  font-size: 14px;
  color: var(--hh-text-muted);
  margin: 0 0 22px;
}
.contact-page .contact-success-back {
  display: inline-block;
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hh-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--hh-border);
  padding-bottom: 2px;
}
.contact-page .contact-success-back:hover { border-bottom-color: var(--hh-blue); }

/* Mobile (Phase 9b.4) */
@media (max-width: 720px) {
  .contact-page .contact-shell { padding: 0 20px; }
  .contact-page .contact-hero { padding: 48px 0 18px; }
  .contact-page .contact-hero h1 { font-size: 32px; line-height: 0.98; margin-bottom: 14px; }
  .contact-page .contact-hero .subhead { font-size: 15px; }
  .contact-page .contact-eyebrow { margin-bottom: 12px; }
  .contact-page .contact-founder {
    margin: 24px 0 36px;
    padding: 18px 18px;
    grid-template-columns: 48px 1fr;
    gap: 14px;
  }
  .contact-page .contact-founder-photo { width: 48px; height: 48px; }
  .contact-page .contact-founder-body { font-size: 14.5px; line-height: 1.5; }
  .contact-page .contact-row.two-col { grid-template-columns: 1fr; gap: 16px; }
  .contact-page .contact-row.three-col { grid-template-columns: 1fr 1fr; }
  .contact-page .contact-row.three-col .contact-field:first-child { grid-column: 1 / -1; }
  .contact-page .contact-form-wrap { padding-bottom: 36px; }
  .contact-page .contact-conditional { padding-left: 14px; margin-left: -16px; }
  .contact-page .contact-channels { margin-top: 40px; }
  .contact-page .contact-cards { grid-template-columns: 1fr; }
  .contact-page .contact-card { padding: 18px 20px; }
  .contact-page .contact-card-value { font-size: 20px; }
  .contact-page .contact-shop-note { margin: 28px auto 64px; font-size: 14px; }
  .contact-page .contact-success { padding: 28px 22px; }
  .contact-page .contact-success h2 { font-size: 24px; }
  .contact-page .contact-success-body { font-size: 15px; }
}

/* ---------------------------------------------------------------------
   11.9. Privacy page — section primitives (Phase 9c.1)
   Atom: docs/design-source/2026-05-02-snapshot/privacy.css 1-261 (locked v1.3)
   Lifted with .privacy-page parent-scope wrap per L72(f) atom-canvas-faithful
   primitive-family-choice + atom-prefix-authority. Greenfield .privacy-*
   family. 12 H2 sections + 9 H3 sub-sections; richest Phase 9c-A surface.
   .privacy-pending placeholder treatment for hero dates (admin-tunable;
   .privacy-pending span shows when admin-empty per Phase 9c.1 SD-5 D5).
   --------------------------------------------------------------------- */

.privacy-page {
  background: #fff;
  color: var(--hh-text);
}
.privacy-page .privacy-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Hero ----- */
.privacy-page .privacy-hero {
  padding: 88px 0 24px;
}
.privacy-page .privacy-eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 14px;
}
.privacy-page .privacy-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.privacy-page .privacy-hero .subhead {
  font-family: var(--hh-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  max-width: 60ch;
  margin: 0 0 20px;
  text-wrap: pretty;
}

/* Effective + last-updated meta line (mono, sits below subhead) */
.privacy-page .privacy-meta {
  font-family: var(--hh-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--hh-text-muted);
  margin: 0;
}
.privacy-page .privacy-meta .privacy-pending {
  font-style: italic;
}

/* ----- Body wrapper ----- */
.privacy-page .privacy-body {
  padding: 0 0 96px;
}

/* ----- TL;DR (short version, sits between hero and §1) ----- */
.privacy-page .privacy-tldr {
  margin: 32px 0 48px;
  padding: 24px 0;
  border-top: 1px solid var(--hh-border-soft);
  border-bottom: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hh-text-body);
  text-wrap: pretty;
}
.privacy-page .privacy-tldr p { margin: 0 0 12px; }
.privacy-page .privacy-tldr p:last-child { margin-bottom: 0; }

/* ----- Section ----- */
.privacy-page .privacy-section {
  margin-top: 48px;
}
.privacy-page .privacy-section:first-of-type {
  margin-top: 48px;
}
.privacy-page .privacy-section h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--hh-text);
  margin: 0 0 16px;
  text-wrap: balance;
}
.privacy-page .privacy-section h3 {
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--hh-text);
  margin: 18px 0 8px;
}
.privacy-page .privacy-section p {
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.privacy-page .privacy-section p:last-child { margin-bottom: 0; }
.privacy-page .privacy-section a {
  color: var(--hh-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.privacy-page .privacy-section a:hover { color: #1f6dbd; }
.privacy-page .privacy-section strong {
  color: var(--hh-text);
  font-weight: 600;
}
.privacy-page .privacy-section code {
  font-family: var(--hh-font-mono);
  font-size: 14.5px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--hh-text);
}

/* Bulleted lists — used in §2, §3, §4, §5, §6, §7, §11 */
.privacy-page .privacy-list {
  margin: 0 0 14px;
  padding: 0 0 0 22px;
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
}
.privacy-page .privacy-list li { margin-bottom: 8px; }
.privacy-page .privacy-list li:last-child { margin-bottom: 14px; }
.privacy-page .privacy-list strong {
  color: var(--hh-text);
  font-weight: 600;
}

/* Pending-verification placeholder treatment (.privacy-pending; admin-empty state) */
.privacy-page .privacy-pending {
  color: var(--hh-text-muted);
  font-style: italic;
  border-bottom: 1px dotted #d99e3a;
  padding-bottom: 1px;
}

/* Maintenance footnote at end of §4 */
.privacy-page .privacy-maint-note {
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid var(--hh-border-soft);
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--hh-text-muted) !important;
}

/* ----- End-of-page line ----- */
.privacy-page .privacy-end {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  color: var(--hh-text-muted);
  text-align: center;
}
.privacy-page .privacy-end a {
  color: var(--hh-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.privacy-page .privacy-end a:hover { color: #1f6dbd; }

/* Mobile (Phase 9c.1) */
@media (max-width: 720px) {
  .privacy-page .privacy-shell { padding: 0 20px; }
  .privacy-page .privacy-hero { padding: 48px 0 16px; }
  .privacy-page .privacy-hero h1 { font-size: 32px; line-height: 0.98; margin-bottom: 14px; }
  .privacy-page .privacy-hero .subhead { font-size: 15px; margin-bottom: 16px; }
  .privacy-page .privacy-eyebrow { margin-bottom: 12px; }
  .privacy-page .privacy-meta { font-size: 12px; }
  .privacy-page .privacy-body { padding: 0 0 64px; }
  .privacy-page .privacy-tldr { margin: 24px 0 36px; padding: 20px 0; font-size: 16px; line-height: 1.6; }
  .privacy-page .privacy-section { margin-top: 36px; }
  .privacy-page .privacy-section h2 { font-size: 21px; margin-bottom: 14px; }
  .privacy-page .privacy-section h3 { font-size: 15px; }
  .privacy-page .privacy-section p { font-size: 15.5px; line-height: 1.6; }
  .privacy-page .privacy-list { font-size: 15.5px; line-height: 1.6; }
  .privacy-page .privacy-end { margin-top: 48px; padding-top: 24px; font-size: 15px; }
  .privacy-page .privacy-maint-note {
    font-size: 14px !important;
    padding-top: 12px;
  }
}

/* ---------------------------------------------------------------------
   11.10. Terms of Service page — section primitives (Phase 9c.2)
   Atom: docs/design-source/2026-05-02-snapshot/tos.css 1-202 (locked v1.1)
   Lifted with .tos-page parent-scope wrap per L72(f) atom-canvas-faithful
   primitive-family-choice + atom-prefix-authority. Greenfield .tos-*
   family. 16 H2 sections + 1 TLDR + 7 .tos-list ul; richest content-section
   count in Phase 9c-A cohort (vs Privacy 12 H2; matches L79 content-density-
   effect direction-lock — anticipated Class C).
   .tos-pending placeholder treatment for hero dates + §3 age threshold
   (3 admin-tunable text settings; .tos-pending span shows when admin-empty
   per Phase 9c.2 SD-5; matches Phase 9c.1 SD-5 D5 precedent).
   --------------------------------------------------------------------- */

.tos-page {
  background: #fff;
  color: var(--hh-text);
}
.tos-page .tos-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Hero ----- */
.tos-page .tos-hero {
  padding: 88px 0 24px;
}
.tos-page .tos-eyebrow {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 14px;
}
.tos-page .tos-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--hh-text);
  margin: 0 0 14px;
  text-wrap: balance;
}
.tos-page .tos-hero .subhead {
  font-family: var(--hh-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  max-width: 60ch;
  margin: 0 0 20px;
  text-wrap: pretty;
}

/* Effective + last-updated meta line (mono, sits below subhead) */
.tos-page .tos-meta {
  font-family: var(--hh-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: var(--hh-text-muted);
  margin: 0;
}
.tos-page .tos-meta .tos-pending {
  font-style: italic;
}

/* ----- Body wrapper ----- */
.tos-page .tos-body {
  padding: 0 0 96px;
}

/* ----- TL;DR (single-paragraph; sits between hero and §1) ----- */
.tos-page .tos-tldr {
  margin: 32px 0 48px;
  padding: 24px 0;
  border-top: 1px solid var(--hh-border-soft);
  border-bottom: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hh-text-body);
  text-wrap: pretty;
}
.tos-page .tos-tldr p { margin: 0; }

/* ----- Section ----- */
.tos-page .tos-section {
  margin-top: 48px;
}
.tos-page .tos-section:first-of-type {
  margin-top: 48px;
}
.tos-page .tos-section h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--hh-text);
  margin: 0 0 16px;
  text-wrap: balance;
}
.tos-page .tos-section h3 {
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--hh-text);
  margin: 18px 0 8px;
}
.tos-page .tos-section p {
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.tos-page .tos-section p:last-child { margin-bottom: 0; }
.tos-page .tos-section a {
  color: var(--hh-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.tos-page .tos-section a:hover { color: #1f6dbd; }
.tos-page .tos-section strong {
  color: var(--hh-text);
  font-weight: 600;
}
.tos-page .tos-section code {
  font-family: var(--hh-font-mono);
  font-size: 14.5px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--hh-text);
}

/* Bulleted lists — used in §5, §6, §8, §9, §10, §15, §16 (7 .tos-list ul) */
.tos-page .tos-list {
  margin: 0 0 14px;
  padding: 0 0 0 22px;
  font-family: var(--hh-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--hh-text-body);
}
.tos-page .tos-list li { margin-bottom: 8px; }
.tos-page .tos-list li:last-child { margin-bottom: 14px; }
.tos-page .tos-list strong {
  color: var(--hh-text);
  font-weight: 600;
}

/* Pending-verification placeholder treatment (.tos-pending; admin-empty state) */
.tos-page .tos-pending {
  color: var(--hh-text-muted);
  font-style: italic;
  border-bottom: 1px dotted #d99e3a;
  padding-bottom: 1px;
}

/* ----- End-of-page line ----- */
.tos-page .tos-end {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  color: var(--hh-text-muted);
  text-align: center;
}
.tos-page .tos-end a {
  color: var(--hh-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.tos-page .tos-end a:hover { color: #1f6dbd; }

/* Mobile (Phase 9c.2) */
@media (max-width: 720px) {
  .tos-page .tos-shell { padding: 0 20px; }
  .tos-page .tos-hero { padding: 48px 0 16px; }
  .tos-page .tos-hero h1 { font-size: 32px; line-height: 0.98; margin-bottom: 14px; }
  .tos-page .tos-hero .subhead { font-size: 15px; margin-bottom: 16px; }
  .tos-page .tos-eyebrow { margin-bottom: 12px; }
  .tos-page .tos-meta { font-size: 12px; }
  .tos-page .tos-body { padding: 0 0 64px; }
  .tos-page .tos-tldr { margin: 24px 0 36px; padding: 20px 0; font-size: 16px; line-height: 1.6; }
  .tos-page .tos-section { margin-top: 36px; }
  .tos-page .tos-section h2 { font-size: 21px; margin-bottom: 14px; }
  .tos-page .tos-section h3 { font-size: 15px; }
  .tos-page .tos-section p { font-size: 15.5px; line-height: 1.6; }
  .tos-page .tos-list { font-size: 15.5px; line-height: 1.6; }
  .tos-page .tos-end { margin-top: 48px; padding-top: 24px; font-size: 15px; }
}

/* ---------------------------------------------------------------------
   11.11. Customer order page — section primitives (Phase 9c.3)
   Atom: docs/design-source/2026-05-02-snapshot/order-confirm.css 1-363 (locked v1.0)
   Lifted with .oc-page parent-scope wrap per L72(f) atom-canvas-faithful
   primitive-family-choice + atom-prefix-authority. Greenfield .oc-* family
   (CSS lift; section content REPLACES existing 36 LOC Horizon-default scaffolding).
   880px shell — first Phase 9c-A surface to break 720px parity (matches Contact).
   NOT uniform white — first Phase 9c-A surface to break uniform-white pattern
   (.oc-next + .oc-totals offwhite; .oc-account bordered card; .oc-info-grid 2-col).
   7 atom components + 3 page composition variants → unified Liquid section with
   conditionals (is_guest + vehicle_verified). HYBRID PATH: atom content Path d
   + Shopify {{ order.* }} platform-data-binding integration per L72(h)
   2nd reapplication.
   --------------------------------------------------------------------- */

.oc-page { background: #fff; color: var(--hh-text); }

.oc-page .oc-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.oc-page .oc-main { padding: 56px 0 80px; }

/* ───── Hero ───── */
.oc-page .oc-hero {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 48px;
}
.oc-page .oc-check {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--hh-success, #2e8b3a);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  margin-top: 4px;
}
.oc-page .oc-hero h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.oc-page .oc-hero .sub {
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  margin: 0 0 12px;
}
.oc-page .oc-meta {
  font-family: var(--hh-font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--hh-text-muted);
  margin: 0;
}
.oc-page .oc-meta .order-no { color: var(--hh-text); font-weight: 600; }
.oc-page .oc-email-note {
  font-family: var(--hh-font-body);
  font-size: 14px;
  color: var(--hh-text-muted);
  margin: 6px 0 0;
}

/* ───── What happens next ───── */
.oc-page .oc-next {
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: 4px;
  padding: 24px 28px;
  margin-bottom: 40px;
}
.oc-page .oc-next h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
}
.oc-page .oc-steps {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: oc-step;
}
.oc-page .oc-steps li {
  position: relative;
  padding-left: 36px;
  margin: 0 0 14px;
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--hh-text);
  counter-increment: oc-step;
}
.oc-page .oc-steps li:last-child { margin-bottom: 0; }
.oc-page .oc-steps li::before {
  content: counter(oc-step);
  position: absolute;
  left: 0; top: 1px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--hh-text);
  color: #fff;
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
}
.oc-page .oc-steps .label { font-weight: 600; }
.oc-page .oc-steps .desc { color: var(--hh-text-muted); }

/* ───── Section blocks ───── */
.oc-page .oc-section { margin-bottom: 36px; }
.oc-page .oc-section h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}
.oc-page .oc-section .section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.oc-page .oc-section .section-head h2 { margin: 0; }
.oc-page .oc-print {
  background: none; border: 0; padding: 0;
  font-family: var(--hh-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hh-blue);
  cursor: pointer;
}
.oc-page .oc-print:hover { text-decoration: underline; }

/* ───── Order details ───── */
.oc-page .oc-details {
  border: 1px solid var(--hh-border-soft);
  border-radius: 4px;
}
.oc-page .oc-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--hh-border-soft);
  align-items: center;
}
.oc-page .oc-row:last-of-type { border-bottom: 0; }
.oc-page .oc-thumb,
.oc-page .oc-thumb-img {
  width: 72px; height: 72px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: 4px;
  object-fit: cover;
}
.oc-page .oc-thumb {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--hh-font-mono);
  font-size: 9.5px;
  color: var(--hh-text-muted);
  text-align: center;
  padding: 6px;
}
.oc-page .oc-item-title {
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hh-text);
  margin: 0 0 4px;
}
.oc-page .oc-item-attrs {
  font-family: var(--hh-font-body);
  font-size: 12.5px;
  color: var(--hh-text-muted);
  margin: 0;
}
.oc-page .oc-item-attrs .cond {
  display: inline-block;
  font-family: var(--hh-font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hh-text);
  background: #f0f2f4;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 6px;
}
.oc-page .oc-item-attrs .dot { padding: 0 5px; color: var(--hh-border); }
.oc-page .oc-item-price {
  text-align: right;
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hh-text);
}

/* Totals block (lives inside details card) */
.oc-page .oc-totals {
  padding: 16px;
  background: var(--hh-bg-soft);
  border-top: 1px solid var(--hh-border-soft);
}
.oc-page .oc-tot-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--hh-font-body);
  font-size: 14px;
  padding: 4px 0;
}
.oc-page .oc-tot-row .label { color: var(--hh-text); }
.oc-page .oc-tot-row .val { font-weight: 600; }
.oc-page .oc-tot-row .free { color: var(--hh-success, #2e8b3a); font-weight: 600; }
.oc-page .oc-tot-divider {
  border: 0;
  border-top: 1px solid var(--hh-border-soft);
  margin: 8px 0;
}
.oc-page .oc-tot-grand {
  display: flex;
  justify-content: space-between;
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 20px;
  padding-top: 4px;
}

/* ───── Two-column for shipping + vehicle ───── */
.oc-page .oc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.oc-page .oc-info-grid .oc-section { margin-bottom: 0; }
.oc-page .oc-info-card p {
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hh-text);
  margin: 0;
}
.oc-page .oc-info-card p .muted { color: var(--hh-text-muted); }
.oc-page .oc-info-card .name { font-weight: 600; }
.oc-page .oc-info-card .veh-line {
  display: flex; align-items: flex-start; gap: 8px;
}
.oc-page .oc-info-card .veh-line .check {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--hh-success, #2e8b3a); color: #fff;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  margin-top: 3px;
}

/* ───── Account prompt (guest only) ───── */
.oc-page .oc-account {
  border: 1px solid var(--hh-border-soft);
  border-radius: 4px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.oc-page .oc-account p {
  margin: 0;
  font-family: var(--hh-font-body);
  font-size: 14px;
  color: var(--hh-text);
}
.oc-page .oc-account .small {
  font-size: 13px;
  color: var(--hh-text-muted);
  margin-top: 3px;
}
.oc-page .oc-account-btn {
  flex: 0 0 auto;
  background: #fff;
  color: var(--hh-text);
  border: 1px solid var(--hh-border);
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--hh-font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.oc-page .oc-account-btn:hover { background: var(--hh-bg-soft); }

/* ───── "What if something's not right?" ───── */
.oc-page .oc-support {
  border-top: 1px solid var(--hh-border-soft);
  padding-top: 24px;
}
.oc-page .oc-support h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.oc-page .oc-support p {
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  margin: 0;
}
.oc-page .oc-support a {
  color: var(--hh-blue);
  font-weight: 600;
  text-decoration: none;
}
.oc-page .oc-support a:hover { text-decoration: underline; }

/* ───── Mobile (Phase 9c.3) ───── */
@media (max-width: 720px) {
  .oc-page .oc-shell { padding: 0 20px; }
  .oc-page .oc-main { padding: 36px 0 64px; }
  .oc-page .oc-hero { gap: 14px; margin-bottom: 36px; }
  .oc-page .oc-check { width: 40px; height: 40px; font-size: 19px; }
  .oc-page .oc-hero h1 { font-size: 28px; }
  .oc-page .oc-hero .sub { font-size: 15.5px; }
  .oc-page .oc-next { padding: 20px; margin-bottom: 32px; }
  .oc-page .oc-next h2 { font-size: 18px; }
  .oc-page .oc-steps li { font-size: 14.5px; }
  .oc-page .oc-section h2 { font-size: 18px; }
  .oc-page .oc-info-grid { grid-template-columns: 1fr; gap: 28px; }
  .oc-page .oc-row { grid-template-columns: 60px 1fr; gap: 12px; padding: 14px; }
  .oc-page .oc-thumb,
  .oc-page .oc-thumb-img { width: 60px; height: 60px; }
  .oc-page .oc-item-price { grid-column: 2; text-align: left; margin-top: 4px; }
  .oc-page .oc-account { flex-direction: column; align-items: stretch; }
  .oc-page .oc-account-btn { align-self: flex-start; }
}

/* ---------------------------------------------------------------------
   11.12. 404 not-found page — section primitives (Phase 9c.4)
   Atom: docs/design-source/2026-05-02-snapshot/not-found.css 1-194 (locked v1.0)
   Lifted with .nf-page parent-scope wrap per L72(f) atom-canvas-faithful
   primitive-family-choice + atom-prefix-authority. Greenfield .nf-* family
   (CSS lift; section content REPLACES existing 40 LOC custom Phase 4 v1
   ship; class-prefix REPLACES .hh-404__* per L72(f) sub-sub-clause refinement).
   720px shell — Phase 9c-A regression to parity after Phase 9c.3 OC 880px
   divergence. Mostly uniform white reading surface (.nf-cat chip offwhite is
   small subset). 132px massive .nf-404 numeric (no precedent across workstream).
   3 atom components → unified Liquid section (no conditionals; YMM widget
   REMOVED v1 per SD-4(i)(b) deferred-resolution-REMOVE outcome).
   Popular categories leverages existing part-type-grid snippet — 12-chip
   live-data widget (vs atom 6-chip stub-href hardcode).
   --------------------------------------------------------------------- */

.nf-page { background: #fff; color: var(--hh-text); }

.nf-page .nf-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.nf-page .nf-main {
  min-height: 60vh;
  padding: 96px 0 96px;
}

/* Hero */
.nf-page .nf-hero { margin-bottom: 56px; }
.nf-page .nf-404 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 132px;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--hh-text);
  margin: 0 0 8px;
}
.nf-page .nf-h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--hh-text);
  margin: 0 0 14px;
}
.nf-page .nf-subhead {
  font-family: var(--hh-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  margin: 0;
}

/* Framing line — "Here's what to try." */
.nf-page .nf-framing {
  font-family: var(--hh-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--hh-text);
  margin: 0 0 20px;
}

/* Recovery block — 2 paths v1 (search + popular cats; YMM removed v1) */
.nf-page .nf-recovery { margin-bottom: 56px; }
.nf-page .nf-rec-group { margin-bottom: 28px; }
.nf-page .nf-rec-group:last-child { margin-bottom: 0; }
.nf-page .nf-rec-label {
  font-family: var(--hh-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 10px;
}

/* Search input — functional GET form per SD-4(i)(a) */
.nf-page .nf-search {
  display: flex;
  gap: 8px;
}
.nf-page .nf-search input {
  flex: 1;
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  padding: 12px 14px;
  border: 1px solid var(--hh-border);
  border-radius: 4px;
  background: #fff;
  color: var(--hh-text);
}
.nf-page .nf-search button {
  font-family: var(--hh-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  background: var(--hh-text);
  color: #fff;
  border: 1px solid var(--hh-text);
  border-radius: 4px;
  cursor: pointer;
}

/* Popular collections grid — leverages part-type-grid snippet
   (container_class="nf-cats" + label_class="nf-cat" per SD-4(i)(c)) */
.nf-page .nf-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.nf-page .nf-cat {
  font-family: var(--hh-font-body);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 14px 12px;
  background: var(--hh-bg-soft);
  border: 1px solid var(--hh-border-soft);
  border-radius: 4px;
  color: var(--hh-text);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nf-page .nf-cat:hover {
  background: #f0f2f4;
  border-color: var(--hh-border);
}
/* Snippet-rendered inner spans (.hh-chip-icon + .hh-chip-label) — surface-invariant per snippet contract */
.nf-page .nf-cat .hh-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nf-page .nf-cat .hh-chip-icon svg {
  width: 16px;
  height: 16px;
}
.nf-page .nf-cat .hh-chip-label {
  display: inline-block;
}

/* End-of-page block */
.nf-page .nf-end {
  padding: 24px 0 0;
  border-top: 1px solid var(--hh-border-soft);
  font-family: var(--hh-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--hh-text-muted);
}
.nf-page .nf-end p { margin: 0 0 10px; }
.nf-page .nf-end p:last-child { margin-bottom: 0; }
.nf-page .nf-end a {
  color: var(--hh-blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.nf-page .nf-end a:hover { color: #1f6dbd; }

/* Mobile (Phase 9c.4) */
@media (max-width: 720px) {
  .nf-page .nf-shell { padding: 0 20px; }
  .nf-page .nf-main { padding: 56px 0 64px; min-height: 50vh; }
  .nf-page .nf-hero { margin-bottom: 40px; }
  .nf-page .nf-404 { font-size: 88px; }
  .nf-page .nf-h2 { font-size: 26px; }
  .nf-page .nf-subhead { font-size: 15.5px; }
  .nf-page .nf-recovery { margin-bottom: 40px; }
  .nf-page .nf-cats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   11.13. Shop by Part Type nav (header dropdown + mobile accordion)
   Atom: docs/design-source/2026-05-07-snapshot/nav-shop.css 1-184 (v1.0)
   .nav-shop-* prefix (atom-canvas-faithful per L72(f)).
   Desktop: trigger left of linklist nav; click toggles dropdown panel.
   Mobile: accordion at top of hamburger drawer; auto-expands when current
   page is /collections/{slug} for a slug in the 14-cat taxonomy.
   Token substitution: atom uses --hh-slate-2 #5A6478; production maps to
   --hh-text-slate #5C6A7A (existing canonical muted-text token).
   --------------------------------------------------------------------- */

/* DESKTOP — trigger + dropdown */
.nav-shop-desktop {
  position: relative;
  display: inline-block;
}
.nav-shop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px 0;
  /* Typography aligned with .hh-header__nav a per nav-ux audit
     commit 1: Inter / 14px / 500 / 0.01em / navy default. Single
     source-of-truth on .hh-header__nav a covers cascade; values are
     duplicated here for readability + standalone-trigger safety. */
  font-family: var(--hh-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hh-navy);
  cursor: pointer;
  position: relative;
}
.nav-shop-trigger:hover { color: var(--hh-blue); }
.nav-shop-trigger-caret { transition: transform 160ms ease; }
.nav-shop-trigger--open .nav-shop-trigger-caret { transform: rotate(180deg); }
.nav-shop-trigger--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 4px;
  background: var(--hh-blue);
  border-radius: 2px 2px 0 0;
}

/* Shop-by-Part-Type + Shop-by-Make share identical dropdown styling.
   Selectors grouped to keep the visual treatment in lockstep — both
   panels read the same. The .nav-make-* classes are intentionally
   parallel-named to .nav-shop-* (added 2026-05-08 for Shop-by-Make
   dropdown). The .nav-make-desktop wrapper provides the same
   position-relative anchor as .nav-shop-desktop. */
.nav-shop-desktop,
.nav-make-desktop {
  position: relative;
  display: inline-block;
}
.nav-shop-dropdown,
.nav-make-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--hh-border);
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(16, 32, 67, 0.04),
    0 6px 18px rgba(16, 32, 67, 0.08);
  padding: 6px 0;
  z-index: 100;
}
.nav-shop-dropdown[hidden],
.nav-make-dropdown[hidden] { display: none; }

.nav-shop-list,
.nav-make-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-shop-list-row,
.nav-make-list-row { margin: 0; }

.nav-shop-dropdown .nav-shop-link,
.nav-make-dropdown .nav-make-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 18px;
  text-decoration: none;
  color: var(--hh-navy);
  font-family: var(--hh-font-body);
  /* Sized to match the top-level trigger (14px / 500 / 0.01em / navy)
     per nav-ux audit. Phase 3 Batch 1 had set this to 16px to match the
     then-trigger size; trigger is now 14px so dropdown items follow. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  border-left: 3px solid transparent;
  /* Inter renders sub-pixel-heavier on the dropdown's shadowed white card
     vs the flat header chrome. Explicit antialiasing aligns rendering with
     the trigger's perceived weight (Phase 3 Batch 1). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav-shop-link:hover,
.nav-make-link:hover {
  background: var(--hh-blue-tint);
  color: var(--hh-blue);
}
.nav-shop-link--active,
.nav-make-link--active {
  border-left-color: var(--hh-blue);
  background: var(--hh-blue-tint);
  /* Audit fix #1 — drop weight 600 → 500 to match the trigger's active
     state (which uses underline indicator only, no weight bump). Active
     state remains visually distinct via blue text + tint background +
     left-border indicator. */
}
.nav-shop-link-label,
.nav-make-link-label { font-weight: 500; }
.nav-shop-link--active .nav-shop-link-label,
.nav-make-link--active .nav-make-link-label {
  font-weight: 500;
  color: var(--hh-blue);
}
.nav-shop-link-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--hh-text-slate);
  letter-spacing: 0.005em;
}
.nav-shop-link:hover .nav-shop-link-sub { color: var(--hh-blue-hover); }

/* MOBILE — accordion within hamburger drawer */
.nav-shop-mob {
  border-bottom: 1px solid var(--hh-border-soft);
}
.nav-shop-mob-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  padding: 16px 20px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--hh-navy);
  text-align: left;
  cursor: pointer;
}
.nav-shop-mob-caret {
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.nav-shop-mob--expanded .nav-shop-mob-caret { transform: rotate(180deg); }

/* Mobile list — only renders when expanded; toggled via class on
   .nav-shop-mob (which both Shop-by-Part-Type and Shop-by-Make
   accordion containers carry). */
.nav-shop-mob-list,
.nav-make-mob-list {
  list-style: none;
  margin: 0;
  padding: 0 0 8px 0;
  background: var(--hh-offwhite);
  display: none;
}
.nav-shop-mob--expanded .nav-shop-mob-list,
.nav-shop-mob--expanded .nav-make-mob-list { display: block; }
.nav-shop-mob-row,
.nav-make-mob-row { margin: 0; }
.nav-shop-mob-link,
.nav-make-mob-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 20px 12px 36px;
  text-decoration: none;
  color: var(--hh-navy);
  font-size: 15px;
  line-height: 1.35;
  border-left: 3px solid transparent;
}
.nav-shop-mob-link:active,
.nav-shop-mob-link:hover,
.nav-make-mob-link:active,
.nav-make-mob-link:hover { background: var(--hh-blue-tint); }
.nav-shop-mob-link--active,
.nav-make-mob-link--active {
  border-left-color: var(--hh-blue);
  background: #fff;
  font-weight: 600;
}
.nav-shop-mob-link-label,
.nav-make-mob-link-label { font-weight: 500; }
.nav-shop-mob-link--active .nav-shop-mob-link-label,
.nav-make-mob-link--active .nav-make-mob-link-label {
  color: var(--hh-blue);
  font-weight: 600;
}
.nav-shop-mob-link-sub {
  font-size: 13px;
  color: var(--hh-text-slate);
}

/* ---------------------------------------------------------------------
   11.14. Customer auth pages — section primitives (.acct-*)
   Atom: docs/design-source/2026-05-07-snapshot/account.css 1-258 (v1)
   Covers: login + register + reset-password (recover/success/reset-with-
   token) + activate-account. 440px shell; utility-primary voice; .acct-pw
   reveal button toggles input type via inline JS in each section.
   --------------------------------------------------------------------- */

.acct-page { background: #fff; color: var(--hh-text); }

.acct-page .acct-shell {
  max-width: 440px;
  margin: 0 auto;
  padding: 0 24px;
}
.acct-page .acct-main { padding: 80px 0 96px; }

/* Heading */
.acct-page .acct-head { margin-bottom: 28px; }
.acct-page .acct-h1 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--hh-text);
}
.acct-page .acct-sub {
  font-family: var(--hh-font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--hh-text-muted);
  margin: 0;
}
.acct-page .acct-microcopy {
  font-family: var(--hh-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--hh-text-muted);
  margin: 0 0 24px;
}

/* Form scaffolding */
.acct-page .acct-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.acct-page .acct-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.acct-page .acct-field { display: flex; flex-direction: column; gap: 6px; }
.acct-page .acct-field label {
  font-family: var(--hh-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hh-text);
}
.acct-page .acct-field input {
  padding: 11px 12px;
  border: 1px solid var(--hh-border);
  border-radius: 4px;
  font-family: var(--hh-font-body);
  font-size: 15px;
  background: #fff;
  color: var(--hh-text);
}
.acct-page .acct-field input:focus {
  outline: none;
  border-color: var(--hh-blue);
  box-shadow: 0 0 0 3px rgba(46, 134, 222, 0.15);
}
.acct-page .acct-field .hint {
  font-family: var(--hh-font-body);
  font-size: 12.5px;
  color: var(--hh-text-muted);
  margin: 2px 0 0;
}

/* Password field with show/hide reveal */
.acct-page .acct-pw {
  position: relative;
}
.acct-page .acct-pw input { padding-right: 56px; }
.acct-page .acct-pw .reveal {
  position: absolute;
  right: 8px;
  top: 30px; /* align with input vertical center; label sits above */
  background: none;
  border: 0;
  padding: 6px;
  font-family: var(--hh-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--hh-text-muted);
  cursor: pointer;
}
.acct-page .acct-pw .reveal:hover { color: var(--hh-text); }
/* When .acct-pw also contains .acct-field-head (login pw row), reveal sits beside the input — slightly different vertical offset */
.acct-page .acct-pw .acct-field-head + input + .reveal {
  top: auto;
  bottom: 9px;
}

/* Field-row helpers (label + side link e.g. "forgot password") */
.acct-page .acct-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.acct-page .acct-field-head .side-link {
  font-family: var(--hh-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hh-blue);
  text-decoration: none;
}
.acct-page .acct-field-head .side-link:hover { text-decoration: underline; }

/* Marketing checkbox */
.acct-page .acct-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.acct-page .acct-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--hh-blue);
  cursor: pointer;
}
.acct-page .acct-check label {
  font-family: var(--hh-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hh-text);
  cursor: pointer;
}

/* Primary submit button */
.acct-page .acct-submit {
  margin-top: 8px;
  padding: 14px 20px;
  background: var(--hh-blue);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-family: var(--hh-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
}
.acct-page .acct-submit:hover { background: var(--hh-blue-hover); }

/* Secondary text-button (e.g. "Decline activation") */
.acct-page .acct-decline {
  margin-top: 12px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: var(--hh-text-muted);
  font-family: var(--hh-font-body);
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.acct-page .acct-decline:hover { color: var(--hh-text); }

/* Divider with "New here?" / "Already have an account?" */
.acct-page .acct-divider {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hh-border-soft);
  text-align: center;
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  color: var(--hh-text-muted);
}
.acct-page .acct-divider a {
  color: var(--hh-blue);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.acct-page .acct-divider a:hover { text-decoration: underline; }

/* Back link */
.acct-page .acct-back {
  margin-top: 20px;
  font-family: var(--hh-font-body);
  font-size: 14px;
}
.acct-page .acct-back a {
  color: var(--hh-blue);
  font-weight: 600;
  text-decoration: none;
}
.acct-page .acct-back a:hover { text-decoration: underline; }

/* Form errors (Shopify default_errors output) */
.acct-page .acct-errors {
  background: #fdecea;
  border: 1px solid #f5b7b1;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--hh-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #952f24;
}
.acct-page .acct-errors ul { margin: 0; padding-left: 18px; }
.acct-page .acct-errors li { margin: 0; }

/* Success states (forgot-success / reset-success / activate-success) */
.acct-page .acct-success {
  border: 1px solid var(--hh-border-soft);
  background: var(--hh-bg-soft);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.acct-page .acct-success .check {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hh-success, #2e8b3a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}
.acct-page .acct-success h2 {
  font-family: var(--hh-font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.acct-page .acct-success p {
  font-family: var(--hh-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hh-text);
  margin: 0 0 8px;
}
.acct-page .acct-success p:last-child { margin-bottom: 0; }
.acct-page .acct-success p .email-pill {
  font-family: var(--hh-font-mono);
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--hh-border-soft);
  border-radius: 3px;
  padding: 1px 6px;
}
.acct-page .acct-success p .muted { color: var(--hh-text-muted); }
.acct-page .acct-success a {
  color: var(--hh-blue);
  font-weight: 600;
  text-decoration: none;
}
.acct-page .acct-success a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 720px) {
  .acct-page .acct-shell { padding: 0 20px; }
  .acct-page .acct-main { padding: 40px 0 64px; }
  .acct-page .acct-h1 { font-size: 28px; }
  .acct-page .acct-row-2 { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------------------------------------------------------------------
   11.15. Logged-in customer account pages — section primitives (.acct-* extension)
   Atom: docs/design-source/2026-05-07-snapshot/account-dashboard.css 1-1039 (v1.0)
   Builds on .acct-* tokens established at section 11.14 (account.css for
   login/register/reset). No new tokens; extends with subnav + dashboard +
   orders + addresses + profile-specific primitives.
   --------------------------------------------------------------------- */


/* ---- Page chrome / shell ---- */
.acct-page--in {
  background: var(--hh-bg-soft, #F7F8FA);
  min-height: 100vh;
}
.acct-main--in {
  padding: 32px 0 64px;
}
.acct-shell--wide {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}
.acct-page--in.is-mobile .acct-shell {
  max-width: 100%;
  padding: 0 16px;
}
.acct-page--in.is-mobile .acct-main--in {
  padding: 16px 0 48px;
}

/* ---- 2-col layout: subnav (220px) + content ---- */
.acct-cols {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 880px) {
  .acct-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   1. Subnav (desktop, left rail)
   ============================================================ */
.acct-subnav {
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  padding: 18px 0 8px;
  position: sticky;
  top: 24px;
}
@media (max-width: 880px) {
  .acct-subnav { display: none; }
}
.acct-subnav-id {
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--hh-border-soft, #EEF1F5);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acct-subnav-id-lbl {
  font-family: var(--hh-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hh-text-muted, #6B7280);
}
.acct-subnav-id-email {
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 13px;
  color: var(--hh-text, #1F2937);
  font-weight: 500;
  word-break: break-all;
  line-height: 1.35;
}
.acct-subnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acct-subnav-item a {
  display: block;
  padding: 10px 18px;
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 14px;
  color: var(--hh-text, #1F2937);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.acct-subnav-item a:hover {
  background: var(--hh-bg-soft, #F7F8FA);
}
.acct-subnav-item.is-active a {
  background: rgba(13, 99, 195, 0.06);
  color: var(--hh-blue, #0D63C3);
  border-left-color: var(--hh-blue, #0D63C3);
  font-weight: 600;
}
.acct-subnav-out {
  border-top: 1px solid var(--hh-border-soft, #EEF1F5);
  margin-top: 8px;
  padding: 8px 18px 4px;
}
.acct-subnav-out button {
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.acct-subnav-out button:hover {
  color: var(--hh-text, #1F2937);
  text-decoration: underline;
}

/* ============================================================
   2. Subnav mobile (horizontal scroll tabs)
   ============================================================ */
.acct-subnav-mobile {
  display: none;
  margin: 0 -16px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--hh-border, #E2E5EA);
}
@media (max-width: 880px) {
  .acct-subnav-mobile { display: block; }
}
.acct-subnav-mobile-id {
  padding: 12px 16px 4px;
  margin: 0;
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--hh-text-muted, #6B7280);
}
.acct-subnav-mobile-id span {
  color: var(--hh-text, #1F2937);
  font-weight: 500;
}
.acct-subnav-mobile-tabs {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.acct-subnav-mobile-tabs::-webkit-scrollbar { display: none; }
.acct-subnav-mobile-tab a {
  display: block;
  padding: 14px 12px;
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 14px;
  color: var(--hh-text-muted, #6B7280);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.acct-subnav-mobile-tab.is-active a {
  color: var(--hh-blue, #0D63C3);
  border-bottom-color: var(--hh-blue, #0D63C3);
  font-weight: 600;
}
.acct-subnav-mobile-tab.is-out a {
  color: var(--hh-text-muted, #6B7280);
  border-left: 1px solid var(--hh-border, #E2E5EA);
  margin-left: 8px;
  padding-left: 16px;
}

/* ============================================================
   3. Content area + page heads
   ============================================================ */
.acct-content {
  min-width: 0; /* prevents grid blowout from long order names */
}
.acct-h1 {
  font-family: var(--hh-font-heading, Georgia, serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.acct-greet {
  margin-bottom: 28px;
}
.acct-greet-sub {
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 14px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0;
  line-height: 1.5;
}
.acct-page-head {
  margin-bottom: 20px;
}
.acct-page-head--order {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.acct-page-sub {
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0;
}
.acct-crumb {
  margin: 0 0 12px;
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 13px;
}
.acct-crumb a {
  color: var(--hh-text-muted, #6B7280);
  text-decoration: none;
}
.acct-crumb a:hover { color: var(--hh-blue, #0D63C3); }

/* ---- Section blocks ---- */
.acct-sec {
  margin-bottom: 32px;
}
.acct-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.acct-sec-h {
  font-family: var(--hh-font-heading, Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  margin: 0;
}
.acct-sec-link {
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 13px;
  color: var(--hh-blue, #0D63C3);
  text-decoration: none;
  font-weight: 500;
}
.acct-sec-link:hover { text-decoration: underline; }
.acct-sec--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .acct-sec--split { grid-template-columns: 1fr; }
}

/* ============================================================
   4. Order status pill (5 states)
   ============================================================ */
.acct-stpill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.acct-stpill.is-active {
  background: rgba(13, 99, 195, 0.08);
  color: var(--hh-blue, #0D63C3);
  border-color: rgba(13, 99, 195, 0.18);
}
.acct-stpill.is-shipped {
  background: rgba(82, 56, 196, 0.08);
  color: #5238C4;
  border-color: rgba(82, 56, 196, 0.18);
}
.acct-stpill.is-delivered {
  background: rgba(34, 134, 78, 0.08);
  color: var(--hh-success, #22864E);
  border-color: rgba(34, 134, 78, 0.18);
}
.acct-stpill.is-cancelled {
  background: #F7F8FA;
  color: var(--hh-text-muted, #6B7280);
  border-color: var(--hh-border, #E2E5EA);
}
.acct-stpill.is-returned {
  background: rgba(186, 100, 36, 0.06);
  color: #BA6424;
  border-color: rgba(186, 100, 36, 0.18);
}

/* ============================================================
   5. Order row (Orders list)
   ============================================================ */
.acct-orders-table {
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  overflow: hidden;
}
.acct-orders-thead {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr 0.8fr 0.9fr 32px;
  gap: 16px;
  padding: 10px 18px;
  background: var(--hh-bg-soft, #F7F8FA);
  border-bottom: 1px solid var(--hh-border, #E2E5EA);
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hh-text-muted, #6B7280);
}
.acct-orders-th-total { text-align: right; }
.acct-orders-tbody {
  display: flex;
  flex-direction: column;
}
.acct-order-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr 0.8fr 0.9fr 32px;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hh-border-soft, #EEF1F5);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 14px;
}
.acct-order-row:last-child { border-bottom: 0; }
.acct-order-row:hover { background: var(--hh-bg-soft, #F7F8FA); }
.acct-order-row-name {
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
}
.acct-order-row-date,
.acct-order-row-items {
  color: var(--hh-text-muted, #6B7280);
  font-size: 13px;
}
.acct-order-row-total {
  text-align: right;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
}
.acct-order-row-go {
  text-align: right;
  color: var(--hh-text-muted, #6B7280);
  font-size: 16px;
}
.acct-order-row:hover .acct-order-row-go { color: var(--hh-blue, #0D63C3); }

@media (max-width: 720px) {
  .acct-orders-thead { display: none; }
  .acct-order-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   status"
      "date   total"
      "items  go";
    gap: 4px 12px;
    padding: 14px 16px;
  }
  .acct-order-row-name   { grid-area: name; }
  .acct-order-row-date   { grid-area: date; }
  .acct-order-row-status { grid-area: status; text-align: right; }
  .acct-order-row-items  { grid-area: items; font-size: 12px; }
  .acct-order-row-total  { grid-area: total; text-align: right; }
  .acct-order-row-go     { grid-area: go; text-align: right; }
}

/* ============================================================
   6. Order summary card (dashboard variant)
   ============================================================ */
.acct-osum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.acct-osum-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 880px) {
  .acct-osum-grid { grid-template-columns: 1fr; gap: 10px; }
}
.acct-osum {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  font-family: var(--hh-font-body, system-ui, sans-serif);
}
.acct-osum:hover {
  border-color: var(--hh-blue, #0D63C3);
  box-shadow: 0 1px 3px rgba(13, 99, 195, 0.08);
}
.acct-osum-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.acct-osum-name {
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
}
.acct-osum-line {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--hh-text-muted, #6B7280);
}
.acct-osum-line-quiet {
  color: var(--hh-text-muted, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.acct-osum-sep { margin: 0 6px; color: var(--hh-border, #E2E5EA); }
.acct-osum-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--hh-border-soft, #EEF1F5);
  font-size: 13px;
}
.acct-osum-total {
  font-weight: 600;
  color: var(--hh-text, #1F2937);
}
.acct-osum-go {
  color: var(--hh-blue, #0D63C3);
  font-weight: 500;
}

/* ============================================================
   7. Vehicle card (dashboard primitive)
   ============================================================ */
.acct-vcard,
.acct-amini,
.acct-detail-card {
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  padding: 18px 20px;
  font-family: var(--hh-font-body, system-ui, sans-serif);
}
.acct-card-h {
  font-family: var(--hh-font-heading, Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  margin: 0 0 10px;
}
.acct-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.acct-card-head .acct-card-h { margin: 0; }
.acct-vcard-veh {
  font-family: var(--hh-font-heading, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  margin: 0 0 6px;
  line-height: 1.3;
}
.acct-vcard-yr {
  color: var(--hh-blue, #0D63C3);
}
.acct-vcard-trim {
  font-size: 14px;
  font-weight: 400;
  color: var(--hh-text-muted, #6B7280);
}
.acct-vcard-note {
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0 0 12px;
  line-height: 1.5;
}
.acct-vcard-empty-msg,
.acct-amini-empty-msg {
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0 0 12px;
  line-height: 1.5;
}
.acct-vcard-actions {
  display: flex;
  gap: 12px;
}
.acct-card-link {
  display: inline-block;
  font-size: 13px;
  color: var(--hh-blue, #0D63C3);
  text-decoration: none;
  font-weight: 500;
}
.acct-card-link:hover { text-decoration: underline; }
.acct-card-btn {
  display: inline-block;
  padding: 8px 14px;
  background: var(--hh-blue, #0D63C3);
  color: #FFFFFF;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.acct-card-btn:hover { background: #0A4FA0; }

/* ============================================================
   8. Address mini-card
   ============================================================ */
.acct-amini-flag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--hh-bg-soft, #F7F8FA);
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 3px;
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hh-text-muted, #6B7280);
}
.acct-amini-addr {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hh-text, #1F2937);
  margin-bottom: 12px;
}
.acct-amini-name {
  font-weight: 600;
  margin-bottom: 2px;
}

/* ============================================================
   9. Empty orders (Hubes voice)
   ============================================================ */
.acct-empty-orders {
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  padding: 40px 32px;
  text-align: center;
  font-family: var(--hh-font-body, system-ui, sans-serif);
}
.acct-empty-orders-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--hh-bg-soft, #F7F8FA);
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 50%;
  color: var(--hh-text-muted, #6B7280);
}
.acct-empty-orders-h {
  font-family: var(--hh-font-heading, Georgia, serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  margin: 0 0 8px;
}
.acct-empty-orders-lead {
  font-size: 14px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0 auto 20px;
  max-width: 42ch;
  line-height: 1.55;
}
.acct-empty-orders-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.acct-empty-orders-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--hh-blue, #0D63C3);
  color: #FFFFFF;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.acct-empty-orders-btn:hover { background: #0A4FA0; }
.acct-empty-orders-link {
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  text-decoration: none;
}
.acct-empty-orders-link:hover {
  color: var(--hh-blue, #0D63C3);
  text-decoration: underline;
}

/* ============================================================
   10. Order timeline
   ============================================================ */
.acct-sec--track {
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  padding: 22px 24px;
}
.acct-sec--track .acct-sec-h {
  margin-bottom: 18px;
}
.acct-timeline {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.acct-timeline-step {
  position: relative;
  padding: 0 8px;
  text-align: left;
  font-family: var(--hh-font-body, system-ui, sans-serif);
}
.acct-timeline-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--hh-border, #E2E5EA);
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
.acct-timeline-step.is-complete .acct-timeline-dot {
  background: var(--hh-success, #22864E);
  border-color: var(--hh-success, #22864E);
}
.acct-timeline-step.is-current .acct-timeline-dot {
  background: var(--hh-blue, #0D63C3);
  border-color: var(--hh-blue, #0D63C3);
  box-shadow: 0 0 0 4px rgba(13, 99, 195, 0.18);
}
.acct-timeline-bar {
  position: absolute;
  top: 5px;
  left: calc(50% + 6px);
  right: calc(-50% + 6px);
  height: 2px;
  background: var(--hh-border, #E2E5EA);
  z-index: 1;
}
.acct-timeline-step.is-complete + .acct-timeline-step .acct-timeline-bar,
.acct-timeline-step.is-complete .acct-timeline-bar {
  background: var(--hh-success, #22864E);
}
.acct-timeline-lbl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  margin-bottom: 2px;
}
.acct-timeline-step:not(.is-complete):not(.is-current) .acct-timeline-lbl {
  color: var(--hh-text-muted, #6B7280);
  font-weight: 500;
}
.acct-timeline-date {
  display: block;
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--hh-text-muted, #6B7280);
}
.acct-timeline-date-pending {
  color: var(--hh-border, #B0B6BF);
}

@media (max-width: 720px) {
  .acct-timeline {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .acct-timeline-step {
    padding-left: 24px;
  }
  .acct-timeline-dot {
    position: absolute;
    top: 2px;
    left: 0;
    margin-bottom: 0;
  }
  .acct-timeline-bar {
    top: 14px;
    left: 5px;
    right: auto;
    width: 2px;
    height: calc(100% + 4px);
  }
}

/* ---- Tracking sub-block ---- */
.acct-track {
  padding-top: 14px;
  border-top: 1px solid var(--hh-border-soft, #EEF1F5);
  font-family: var(--hh-font-body, system-ui, sans-serif);
}
.acct-track-lbl {
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hh-text-muted, #6B7280);
  margin: 0 0 4px;
}
.acct-track-val {
  font-size: 14px;
  color: var(--hh-text, #1F2937);
  margin: 0;
}
.acct-track-link {
  color: var(--hh-blue, #0D63C3);
  text-decoration: none;
  font-weight: 500;
  margin-left: 8px;
}
.acct-track-link:hover { text-decoration: underline; }

/* ============================================================
   11. Order line items (in OrderDetail)
   ============================================================ */
.acct-li-list {
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  overflow: hidden;
}
.acct-li {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hh-border-soft, #EEF1F5);
  font-family: var(--hh-font-body, system-ui, sans-serif);
}
.acct-li:last-child { border-bottom: 0; }
.acct-li-img {
  width: 64px;
  height: 64px;
  background: var(--hh-bg-soft, #F7F8FA);
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acct-li-img .ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 6px,
    rgba(13, 99, 195, 0.06) 6px,
    rgba(13, 99, 195, 0.06) 12px
  );
}
.acct-li-img .ph span {
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hh-text-muted, #6B7280);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 4px;
  border-radius: 2px;
}
.acct-li-meta { min-width: 0; }
.acct-li-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 4px;
}
.acct-li-title:hover { color: var(--hh-blue, #0D63C3); }
.acct-li-pn {
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0 0 2px;
}
.acct-li-pn .mono {
  color: var(--hh-text, #1F2937);
  font-weight: 600;
}
.acct-li-sep {
  margin: 0 6px;
  color: var(--hh-border, #E2E5EA);
}
.acct-li-fit {
  font-size: 12px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0;
}
.acct-li-qty {
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  white-space: nowrap;
}
.acct-li-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .acct-li {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "img meta"
      "img qtyprice";
    gap: 6px 12px;
  }
  .acct-li-img { grid-area: img; width: 56px; height: 56px; }
  .acct-li-meta { grid-area: meta; }
  .acct-li-qty {
    grid-area: qtyprice;
    grid-column: 2;
  }
  .acct-li-price {
    grid-area: qtyprice;
    grid-column: 2;
    text-align: right;
    margin-left: auto;
  }
  .acct-li {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "img meta meta" "img qty price";
  }
  .acct-li-qty { grid-area: qty; text-align: left; padding-left: 0; }
  .acct-li-price { grid-area: price; }
}

/* ============================================================
   12. Totals dl
   ============================================================ */
.acct-totals {
  margin: 0;
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 14px;
}
.acct-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  color: var(--hh-text, #1F2937);
}
.acct-totals-row dt {
  color: var(--hh-text-muted, #6B7280);
  margin: 0;
}
.acct-totals-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.acct-totals-row--neg dd {
  color: var(--hh-success, #22864E);
}
.acct-totals-row--grand {
  border-top: 1px solid var(--hh-border, #E2E5EA);
  padding-top: 12px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 16px;
}
.acct-totals-row--grand dt {
  color: var(--hh-text, #1F2937);
  font-weight: 600;
}

/* ============================================================
   13. Support entry block
   ============================================================ */
.acct-support {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--hh-bg-soft, #F7F8FA);
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 6px;
  font-family: var(--hh-font-body, system-ui, sans-serif);
}
.acct-support-h {
  font-family: var(--hh-font-heading, Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--hh-text, #1F2937);
  margin: 0 0 6px;
}
.acct-support-lead {
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  margin: 0 0 12px;
  line-height: 1.55;
}
.acct-support-lead .mono {
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  color: var(--hh-text, #1F2937);
  font-weight: 600;
}
.acct-support-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.acct-support-btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--hh-blue, #0D63C3);
  color: #FFFFFF;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.acct-support-btn:hover { background: #0A4FA0; }
.acct-support-link {
  font-size: 13px;
  color: var(--hh-text-muted, #6B7280);
  text-decoration: none;
}
.acct-support-link:hover {
  color: var(--hh-blue, #0D63C3);
  text-decoration: underline;
}

/* ============================================================
   14. Filter chips (Orders list)
   ============================================================ */
.acct-filter-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.acct-fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E2E5EA);
  border-radius: 100px;
  font-family: var(--hh-font-body, system-ui, sans-serif);
  font-size: 13px;
  color: var(--hh-text, #1F2937);
  cursor: pointer;
  transition: all 120ms ease;
}
.acct-fchip:hover {
  border-color: var(--hh-blue, #0D63C3);
  color: var(--hh-blue, #0D63C3);
}
.acct-fchip.is-on {
  background: var(--hh-blue, #0D63C3);
  border-color: var(--hh-blue, #0D63C3);
  color: #FFFFFF;
}
.acct-fchip-ct {
  font-family: var(--hh-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 100px;
  min-width: 18px;
  text-align: center;
}
.acct-fchip.is-on .acct-fchip-ct {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

/* ============================================================
   15. Mono helper (for inline OEM / order numbers)
   ============================================================ */
.mono {
  font-family: var(--hh-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.95em;
}

/* ---------------------------------------------------------------------
   11.16. Search bar (header) + search results page (.search-/.sb-/.sr-* extension)
   Atom: docs/design-source/2026-05-07-snapshot/search.css 1-723 (v1.0)
   v1 production renders SearchBar + SearchHead + SearchZeroState +
   SearchTipsBlock. Filter rail, toolbar, vehicle banner, suggest panel,
   mobile sheet, YMM chip primitives all lifted but inert (no DOM consumers
   in v1) — preserved for future YMM / predictive / filter-rail activation.
   --------------------------------------------------------------------- */


/* ============== Header search bar (full-width inline) ============== */
.sb {
  flex: 1; min-width: 0; max-width: 720px;
  position: relative;
}
.sb-form {
  display: flex; align-items: center; gap: 0;
  background: var(--hh-white);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  padding: 0; height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
.sb-form:focus-within {
  border-color: var(--hh-blue);
  box-shadow: 0 0 0 3px var(--hh-blue-tint);
}
.sb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; color: var(--hh-icon-slate);
  flex-shrink: 0;
}
.sb-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--hh-font-body); font-size: 14px; color: var(--hh-text);
  height: 100%; padding: 0;
}
.sb-input::placeholder { color: var(--hh-text-muted); }
.sb-clear {
  background: transparent; border: 0; cursor: pointer;
  padding: 0 10px; color: var(--hh-text-muted);
  display: inline-flex; align-items: center;
}
.sb-clear:hover { color: var(--hh-text); }
.sb-submit {
  background: var(--hh-navy); color: var(--hh-white);
  border: 0; cursor: pointer; height: 100%; padding: 0 22px;
  font-family: var(--hh-font-heading); font-weight: 600; letter-spacing: .02em;
  font-size: 14px; text-transform: none;
  border-radius: 0 var(--hh-radius) var(--hh-radius) 0;
  margin-left: 4px;
}
.sb-submit:hover { background: var(--hh-navy-deep); }

/* YMM chip inside search bar */
.sb-ymm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 4px 6px 4px 10px;
  background: var(--hh-success-bg);
  border: 1px solid color-mix(in srgb, var(--hh-success) 25%, transparent);
  border-radius: 999px;
  font-size: 12px; color: var(--hh-success-text);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.sb-ymm-icon { font-weight: 700; line-height: 1; }
.sb-ymm-lbl { font-weight: 600; }
.sb-ymm-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 2px; padding: 0;
  border: 0; background: rgba(21, 95, 44, .08);
  color: var(--hh-success-text);
  border-radius: 999px; cursor: pointer;
  font-size: 11px; line-height: 1;
}
.sb-ymm-x:hover { background: rgba(21, 95, 44, .18); }

/* ============== Suggest panel ============== */
.sb-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--hh-white);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius-md);
  box-shadow: var(--hh-shadow-md);
  padding: 6px 0;
  z-index: 100;
  max-height: 560px; overflow-y: auto;
}

.sb-suggest-pn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--hh-blue-tint);
  border-bottom: 1px solid var(--hh-border-soft);
  text-decoration: none !important;
  color: var(--hh-text) !important;
  font-size: 14px;
}
.sb-suggest-pn:hover { background: color-mix(in srgb, var(--hh-blue-tint) 70%, var(--hh-blue) 6%); }
.sb-pn-icon {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--hh-blue); color: var(--hh-white);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-pn-lbl { color: var(--hh-text-body); }
.sb-pn-val {
  font-family: var(--hh-font-mono);
  background: var(--hh-white); border: 1px solid var(--hh-border);
  padding: 2px 8px; border-radius: 4px;
  font-size: 13px; font-weight: 600;
  color: var(--hh-navy-deep);
}
.sb-pn-arrow { margin-left: auto; color: var(--hh-blue); font-weight: 600; }

.sb-sg { padding: 8px 0; border-bottom: 1px solid var(--hh-border-soft); }
.sb-sg:last-of-type { border-bottom: 0; }
.sb-sg-h {
  font-family: var(--hh-font-mono);
  font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0; padding: 8px 18px 6px;
}
.sb-sg-list { list-style: none; padding: 0; margin: 0; }
.sb-sg-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  text-decoration: none !important;
  color: var(--hh-text-body) !important;
  font-size: 14px;
}
.sb-sg-list a:hover { background: var(--hh-offwhite); }
.sb-sg-recent .ic {
  color: var(--hh-text-muted); font-size: 14px;
  width: 18px; text-align: center;
}

.sb-sg-parts a {
  align-items: flex-start; gap: 12px;
  padding: 10px 18px;
}
.sb-sg-parts .th {
  width: 44px; height: 44px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--hh-offwhite), var(--hh-border-soft));
  border: 1px solid var(--hh-border-soft);
  border-radius: 4px;
}
.sb-sg-parts .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sb-sg-parts .t {
  font-size: 13px; font-weight: 500; color: var(--hh-text);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-sg-parts .pn {
  font-family: var(--hh-font-mono); font-size: 11px;
  color: var(--hh-text-muted);
}
.sb-sg-parts .pr {
  font-weight: 700; font-size: 14px; color: var(--hh-navy-deep);
  margin-left: auto; flex-shrink: 0;
}

.sb-sg-cats {
  list-style: none; padding: 4px 14px 8px; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sb-sg-cats a {
  display: inline-block;
  padding: 5px 11px;
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border-soft);
  border-radius: 999px;
  font-size: 12px; color: var(--hh-text-body) !important;
  text-decoration: none !important;
}
.sb-sg-cats a:hover {
  background: var(--hh-blue-tint);
  border-color: var(--hh-blue);
  color: var(--hh-blue) !important;
}

.sb-suggest-all {
  display: block; padding: 12px 18px;
  background: var(--hh-offwhite);
  border-top: 1px solid var(--hh-border-soft);
  font-size: 13px; font-weight: 600;
  color: var(--hh-blue) !important;
  text-decoration: none !important;
  text-align: center;
}
.sb-suggest-all:hover { background: var(--hh-blue-tint); }

/* ============== Mobile search trigger / sheet ============== */
.sb-mobile-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  padding: 11px 14px;
  font-family: var(--hh-font-body); font-size: 14px;
  color: var(--hh-text-muted);
  cursor: pointer;
  text-align: left;
}
.sb-mobile-trigger svg { color: var(--hh-icon-slate); flex-shrink: 0; }
.sb-mobile-lbl {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sb-sheet {
  position: fixed; inset: 0;
  background: var(--hh-white);
  z-index: 200;
  display: flex; flex-direction: column;
}
.sb-sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hh-border-soft);
}
.sb-sheet-form {
  flex: 1; display: flex; align-items: center;
  background: var(--hh-offwhite);
  border-radius: var(--hh-radius);
  padding: 0 4px 0 0;
  height: 40px;
  flex-wrap: wrap; gap: 4px;
}
.sb-sheet-form .sb-input { padding-left: 0; }
.sb-ymm-chip.in-sheet { margin-left: 6px; }
.sb-sheet-cancel {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--hh-font-body); font-size: 14px; font-weight: 500;
  color: var(--hh-blue);
}
.sb-sheet-body { flex: 1; overflow-y: auto; }
.sb-sheet-body .sb-suggest {
  position: static;
  border: 0; border-radius: 0; box-shadow: none;
  max-height: none;
}

/* ============================================================
 * Search results page
 * ============================================================ */
.sr, .sr *, .sr *::before, .sr *::after { box-sizing: border-box; }
.sr { font-family: var(--hh-font-body); color: var(--hh-text); background: var(--hh-white); line-height: 1.5; }
.sr a { color: var(--hh-blue); text-decoration: none; }
.sr a:hover { color: var(--hh-blue-hover); text-decoration: underline; }
.sr button { font-family: inherit; font-size: inherit; }

.sr-shell { max-width: 1280px; margin: 0 auto; padding: 0 24px 96px; }
/* Audit fix #5 (2026-05-07; Option B revision) — in-page search input
   nested inside .sr-head after the meta line, so it visually belongs
   to the page heading rather than floating as detached chrome. Renders
   on every state (results / zero / landing) at every viewport. */
.sr-head-search { margin-top: 16px; max-width: 600px; }
.sr-head-search .sb { width: 100%; max-width: none; }
@media (max-width: 640px) {
  .sr-head-search { margin-top: 12px; }
}

/* ============== Page header ============== */
.sr-head { padding: 24px 0 14px; }
.sr-eyebrow { margin: 0 0 8px; }
.sr-eyebrow-tag {
  display: inline-block;
  font-family: var(--hh-font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hh-blue);
  background: var(--hh-blue-tint);
  border: 1px solid color-mix(in srgb, var(--hh-blue) 25%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
}
.sr-h1 {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 36px; line-height: 1.15;
  color: var(--hh-navy-deep);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.sr-query { color: var(--hh-text); }
.sr-meta { color: var(--hh-text-muted); font-size: 14px; margin: 0; }

/* ============== Vehicle banner ============== */
.sr-vbanner {
  display: flex; align-items: center; gap: 10px;
  background: var(--hh-success-bg);
  border-left: 3px solid var(--hh-success);
  padding: 12px 16px; border-radius: var(--hh-radius);
  margin: 14px 0 0;
  font-size: 14px;
  flex-wrap: wrap;
}
.sr-vbanner.empty {
  background: var(--hh-blue-tint);
  border-left-color: var(--hh-blue);
}
.sr-vbanner .icon {
  font-weight: 700; color: var(--hh-success-text); font-size: 16px;
}
.sr-vbanner.empty .icon { color: var(--hh-blue); }
.sr-vbanner .lbl { color: var(--hh-text-body); }
.sr-vbanner .veh { font-weight: 600; color: var(--hh-text); }
.sr-vbanner .actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
.sr-vbanner .sep { color: var(--hh-border); }
.sr-vbanner button {
  background: transparent; border: 0;
  color: var(--hh-blue); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 4px 6px;
}
.sr-vbanner button:hover { text-decoration: underline; }
.sr-vbanner.empty button.primary {
  background: var(--hh-blue); color: var(--hh-white); border-color: var(--hh-blue);
  font-weight: 600; padding: 6px 12px; border-radius: var(--hh-radius);
  margin-left: auto;
}
.sr-vbanner.empty button.primary:hover { background: var(--hh-blue-hover); }

/* ============== Toolbar ============== */
.sr-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--hh-border-soft);
  margin-top: 22px;
}
.sr-toolbar .count { font-size: 14px; color: var(--hh-text-body); font-weight: 500; }
.sr-toolbar .count strong { color: var(--hh-text); font-weight: 700; }
.sr-toolbar .clear-all {
  background: transparent; border: 0;
  color: var(--hh-blue); font-size: 13px; font-weight: 500; cursor: pointer;
}
.sr-toolbar .clear-all:hover { text-decoration: underline; }
.sr-toolbar .right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.sr-toolbar .sort-wrap { display: flex; align-items: center; gap: 8px; }
.sr-toolbar .sort-wrap label { font-size: 13px; color: var(--hh-text-muted); }
.sr-toolbar select {
  border: 1px solid var(--hh-border); border-radius: var(--hh-radius);
  padding: 6px 28px 6px 10px; font-size: 13px;
  background: var(--hh-white); color: var(--hh-text);
}
.sr-toolbar .density { display: inline-flex; }
.sr-toolbar .density button {
  border: 1px solid var(--hh-border); background: var(--hh-white);
  color: var(--hh-text-muted); padding: 6px 10px;
  cursor: pointer; font-size: 14px;
}
.sr-toolbar .density button:first-child { border-radius: var(--hh-radius) 0 0 var(--hh-radius); }
.sr-toolbar .density button:last-child { border-radius: 0 var(--hh-radius) var(--hh-radius) 0; margin-left: -1px; }
.sr-toolbar .density button.on { background: var(--hh-navy); color: var(--hh-white); border-color: var(--hh-navy); }

/* ============== Layout ============== */
.sr-cols {
  display: grid; grid-template-columns: 240px 1fr;
  gap: 28px; padding-top: 22px;
}

/* ============== Filter rail (mirrors collection FilterRail) ============== */
.sr-rail { font-size: 14px; }
.sr-rail .pinned {
  background: var(--hh-blue-tint);
  border: 1px solid color-mix(in srgb, var(--hh-blue) 25%, transparent);
  border-radius: var(--hh-radius);
  padding: 12px 14px; margin-bottom: 18px;
}
.sr-rail .lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--hh-font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--hh-blue);
  margin-bottom: 6px;
}
.sr-rail h4 {
  font-family: var(--hh-font-heading);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--hh-text); margin: 0 0 8px;
}
.sr-rail .pinned h4 { color: var(--hh-navy-deep); }
.sr-rail .pinned .veh { font-weight: 600; color: var(--hh-text); }
.sr-rail .pinned .note {
  font-size: 11px; color: var(--hh-text-muted);
  margin-top: 4px;
}
.sr-rail .find-veh {
  background: var(--hh-offwhite);
  border: 1px dashed var(--hh-border);
  border-radius: var(--hh-radius);
  padding: 12px 14px; margin-bottom: 18px;
}
.sr-rail .find-veh p {
  font-size: 12px; color: var(--hh-text-muted);
  margin: 4px 0 8px;
}
.sr-rail .find-veh button {
  width: 100%;
  background: var(--hh-blue); color: var(--hh-white);
  border: 0; border-radius: var(--hh-radius);
  padding: 8px 12px; font-weight: 600; font-size: 13px;
  cursor: pointer;
}
.sr-rail .find-veh button:hover { background: var(--hh-blue-hover); }

.sr-rail .group { padding: 14px 0; border-top: 1px solid var(--hh-border-soft); }
.sr-rail .group:first-of-type { border-top: 0; padding-top: 0; }
.sr-rail .opt {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 13px; cursor: pointer;
}
.sr-rail .opt input { margin: 0; accent-color: var(--hh-blue); }
.sr-rail .opt .lbl { color: var(--hh-text-body); flex: 1; }
.sr-rail .opt .ct { color: var(--hh-text-muted); font-size: 12px; }
.sr-rail .show-more {
  background: none; border: 0; color: var(--hh-blue);
  padding: 6px 0 0 28px; font-size: 13px; cursor: pointer;
}
.sr-rail .show-more:hover { text-decoration: underline; }
.sr-rail .range {
  display: flex; align-items: center; gap: 6px;
}
.sr-rail .range input {
  flex: 1; min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--hh-border); border-radius: var(--hh-radius);
  font-size: 13px;
}
.sr-rail .range .dash { color: var(--hh-text-muted); }
.sr-rail .range-go {
  padding: 6px 10px;
  background: var(--hh-white); border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius); cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--hh-text-body);
}

/* ============== Result grid (reuses .pcard from collection.css) ============== */
.sr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  padding-top: 4px;
}

/* sr-pcard adds why-match below price row. Inherits all .pcard styling
   from collection.css. */
.sr-pcard .sr-why-match {
  margin-top: 6px;
  font-size: 12px;
  color: var(--hh-text-muted);
  font-family: var(--hh-font-body);
  display: flex; align-items: baseline; gap: 4px;
  flex-wrap: wrap;
}
.sr-pcard .sr-why-lbl {
  font-family: var(--hh-font-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--hh-blue); font-weight: 600;
}

/* Local copy of essential .pcard styles in case search page is loaded
   without collection.css. Subset of collection.css .pcard rules. */
.sr .pcard {
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
}
.sr .pcard:hover { border-color: var(--hh-border); box-shadow: var(--hh-shadow-sm); }
.sr .pcard.dim { opacity: 0.55; }
.sr .pcard .img {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--hh-offwhite);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--hh-border-soft);
}
.sr .pcard .img .ph {
  width: 80%; height: 70%;
  background: repeating-linear-gradient(45deg,
    transparent 0, transparent 6px,
    rgba(108, 117, 125, .07) 6px, rgba(108, 117, 125, .07) 7px);
  border: 1px dashed var(--hh-border);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.sr .pcard .img .ph span {
  font-family: var(--hh-font-mono);
  font-size: 11px; color: var(--hh-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.sr .pcard .fitbadge {
  position: absolute; top: 8px; left: 8px;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px;
}
.sr .pcard .fitbadge.fits {
  background: var(--hh-success-bg); color: var(--hh-success-text);
}
.sr .pcard .fitbadge.verify {
  background: var(--hh-warning-bg); color: var(--hh-warning-text);
}
.sr .pcard .fitbadge.nofit {
  background: var(--hh-error-bg); color: var(--hh-error-text);
}
.sr .pcard .quick-add {
  position: absolute; bottom: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--hh-navy); color: var(--hh-white);
  border: 0; cursor: pointer;
  font-size: 18px; line-height: 1;
  opacity: 0; transition: opacity .15s;
  font-weight: 400;
}
.sr .pcard:hover .quick-add { opacity: 1; }
.sr .pcard .body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sr .pcard .title {
  font-size: 13px; line-height: 1.4; color: var(--hh-card-title);
  font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(13px * 1.4 * 2);
}
.sr .pcard .price-row {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
}
.sr .pcard .price {
  font-family: var(--hh-font-heading); font-weight: 700;
  font-size: 18px; color: var(--hh-navy-deep);
}
.sr .pcard .pn {
  font-family: var(--hh-font-mono); font-size: 10px;
  color: var(--hh-text-muted);
}
.sr .pcard .bot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.sr .pcard .grade-pill {
  background: var(--hh-blue-tint); color: var(--hh-blue);
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}
.sr .pcard .stock-mini { font-size: 11px; color: var(--hh-success-text); font-weight: 500; }
.sr .pcard .stock-mini.low { color: var(--hh-text-muted); }

/* ============== Zero-results state ============== */
.sr-zero {
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius-md);
  padding: 36px 32px;
  margin: 24px 0;
  max-width: 760px;
}
.sr-zero-glyph {
  width: 44px; height: 44px;
  background: var(--hh-white);
  border: 1px solid var(--hh-border);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hh-text-slate);
  margin-bottom: 16px;
}
.sr-zero-h {
  font-family: var(--hh-font-heading);
  font-size: 26px; font-weight: 700; line-height: 1.2;
  color: var(--hh-navy-deep);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.sr-zero-lead {
  font-size: 15px; line-height: 1.6; color: var(--hh-text-body);
  margin: 0 0 20px;
  max-width: 60ch;
}
.sr-zero-tips {
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  border-radius: var(--hh-radius);
  padding: 16px 20px;
  margin-bottom: 22px;
}
.sr-zero-tips .tips-h {
  font-family: var(--hh-font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hh-text-muted);
  margin: 0 0 8px;
}
.sr-zero-tips ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.sr-zero-tips li {
  font-size: 14px; line-height: 1.55; color: var(--hh-text-body);
  padding-left: 18px;
  position: relative;
}
.sr-zero-tips li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--hh-blue); font-weight: 600;
}
.sr-zero-tips strong { color: var(--hh-text); font-weight: 600; }
.sr-zero-tips .link {
  background: 0; border: 0; padding: 0;
  color: var(--hh-blue); cursor: pointer;
  font: inherit; text-decoration: underline;
}
.sr-zero-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.sr-zero-actions a {
  padding: 10px 18px;
  border-radius: var(--hh-radius);
  font-weight: 600; font-size: 14px;
  text-decoration: none !important;
}
.sr-zero-actions .primary {
  background: var(--hh-blue); color: var(--hh-white) !important;
}
.sr-zero-actions .primary:hover { background: var(--hh-blue-hover); }
.sr-zero-actions .ghost {
  background: var(--hh-white); color: var(--hh-text-body) !important;
  border: 1px solid var(--hh-border);
}
.sr-zero-actions .ghost:hover { border-color: var(--hh-text-slate); }
.sr-zero-soft {
  font-size: 13px; line-height: 1.55; color: var(--hh-text-muted);
  margin: 0;
  max-width: 60ch;
  font-style: italic;
}

/* ============== Search tips block ============== */
.sr-tips {
  margin: 36px 0 0;
  padding: 32px 0;
  border-top: 1px solid var(--hh-border-soft);
}
.sr-tips h2 {
  font-family: var(--hh-font-heading);
  font-size: 28px; font-weight: 700;
  color: var(--hh-navy-deep);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.sr-tips-lead {
  font-size: 15px; line-height: 1.6;
  color: var(--hh-text-body);
  max-width: 70ch;
  margin: 0 0 22px;
}
.sr-tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
.sr-tips .tip {
  background: var(--hh-offwhite);
  border: 1px solid var(--hh-border-soft);
  border-left: 3px solid var(--hh-blue);
  border-radius: var(--hh-radius);
  padding: 16px 18px;
}
.sr-tips .tip-h {
  font-family: var(--hh-font-heading);
  font-weight: 600; font-size: 15px;
  color: var(--hh-navy-deep);
  margin: 0 0 6px;
}
.sr-tips .tip p {
  font-size: 14px; line-height: 1.55;
  color: var(--hh-text-body);
  margin: 0;
}
.sr-tips .tip code {
  font-family: var(--hh-font-mono);
  background: var(--hh-white);
  border: 1px solid var(--hh-border-soft);
  padding: 1px 6px; border-radius: 3px;
  font-size: 12px;
  color: var(--hh-navy-deep);
}
.sr-tips-end {
  font-size: 14px; color: var(--hh-text-body);
  margin: 0;
}

/* ============== Mobile (≤860) ============== */
.sr.is-mobile .sr-cols {
  grid-template-columns: 1fr;
}
.sr.is-mobile .sr-h1 { font-size: 26px; }
.sr.is-mobile .sr-rail { display: none; }
.sr.is-mobile .sr-tips-grid { grid-template-columns: 1fr; }
.sr.is-mobile .sr-vbanner .actions { width: 100%; margin-left: 0; padding-top: 6px; }

.mob-srtoolbar {
  display: flex; gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hh-border-soft);
}
.mob-srtoolbar button {
  flex: 1;
  padding: 10px 12px;
  background: var(--hh-white);
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  font-size: 14px; font-weight: 500;
  color: var(--hh-text-body);
  cursor: pointer;
}

/* ============== Artboard wrappers used in search-page.jsx ============== */
.sr-artboard-frame {
  background: var(--hh-white);
  width: 1280px; max-width: 1280px;
  border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius);
  overflow: hidden;
}
.sr-artboard-frame.mobile { width: 390px; }

/* ---------------------------------------------------------------------
   11.17. Error states (.err-*) — Phase 9c-B Track #9
   Verbatim from docs/design-source/2026-05-07-snapshot/error.css.
   Inherits design tokens already defined earlier in this file
   (--hh-blue, --hh-navy, --hh-border, --hh-slate-1, --hh-slate-2).
   Tone variants modulate icon color only; card chrome stable.
   --------------------------------------------------------------------- */
.err-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  background: var(--hh-offwhite, #F8F9FA);
  min-height: 480px;
}

.err-card {
  background: #FFFFFF;
  border: 1px solid var(--hh-border, #E0E4E8);
  border-radius: 8px;
  padding: 56px 56px 48px 56px;
  max-width: 560px;
  width: 100%;
  text-align: left;
  box-shadow: 0 1px 2px rgba(16, 32, 67, 0.04);
}

.err-icon {
  color: var(--hh-blue, #2E86DE);
  margin-bottom: 24px;
}

.err-shell--server      .err-icon { color: #C97E1A; }
.err-shell--maintenance .err-icon { color: var(--hh-blue, #2E86DE); }
.err-shell--checkout    .err-icon { color: #C83B3B; }

.err-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hh-slate-2, #5A6478);
  margin-bottom: 12px;
}

.err-headline {
  font-family: "Barlow Semi Condensed", Inter, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hh-navy, #1B2A4A);
  margin: 0 0 14px 0;
  text-wrap: pretty;
}

.err-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--hh-slate-1, #3A4358);
  margin: 0 0 28px 0;
  text-wrap: pretty;
}

.err-inline-link {
  color: var(--hh-blue, #2E86DE);
  text-decoration: underline;
}
.err-inline-link:hover { color: var(--hh-blue-hover, #2475C5); }

.err-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.err-cta-primary {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  background: var(--hh-blue, #2E86DE);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease;
}
.err-cta-primary:hover { background: var(--hh-blue-hover, #2475C5); }

.err-cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #FFFFFF;
  color: var(--hh-navy, #1B2A4A);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--hh-border, #E0E4E8);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.err-cta-secondary:hover {
  border-color: var(--hh-blue, #2E86DE);
  color: var(--hh-blue, #2E86DE);
}

.err-cta-link {
  font-size: 14px;
  color: var(--hh-blue, #2E86DE);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.err-cta-link:hover { color: var(--hh-blue-hover, #2475C5); }

@media (max-width: 640px) {
  .err-shell { padding: 48px 16px; min-height: 360px; }
  .err-card { padding: 36px 28px 32px 28px; }
  .err-headline { font-size: 26px; }
  .err-actions { gap: 10px; }
  .err-cta-primary, .err-cta-secondary { padding: 10px 16px; }
}

/* ---------------------------------------------------------------------
   12. Theme editor — Shopify design mode quirks
   --------------------------------------------------------------------- */
.shopify-section-header-group { z-index: var(--hh-z-header); }
.shopify-section-footer-group { position: relative; }