/* ==========================================================================
   DH Aquarium — css/main.css
   The single stylesheet. Design system per DESIGN_SPEC.md / BRAND.md.
   Order: tokens → reset/base → utilities → shell (header/footer/drawer/toast)
          → components → page sections → print-ish details.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens (DESIGN_SPEC.md §1 — verbatim)
   ========================================================================== */

:root {
  /* ===== Color — named from the workshop (BRAND.md §5) ===== */
  --c-bench:        #FAFAF8;  /* page background */
  --c-plinth:       #FFFFFF;  /* product-card surface ONLY */
  --c-glass:        #E9F0EB;  /* tinted surface: spec rows, chips, placeholders, bands */
  --c-ink:          #15191C;  /* Silicone Black — text, headings, dark bands */
  --c-ink-soft:     #2A3036;  /* hover state of dark fills */
  --c-grey:         #50575C;  /* Gauge Grey — secondary text, captions, eyebrows */
  --c-teal:         #0E5848;  /* Workshop Teal — primary actions, links, prices */
  --c-teal-deep:    #0A4538;  /* primary button hover */
  --c-edge:         #8FD6BD;  /* Glass Edge — accents ON DARK ONLY, never text on light */
  --c-amber:        #9C4A00;  /* Cut Amber — sale/ribbons/was-price/built-in-house. The ONLY warm hue */
  --c-green:        #2E7D4F;  /* Riccia Green — in-stock indicators only, never colour alone */
  --c-red:          #B42318;  /* Signal Red — form errors only */
  --c-hairline:     #D7DBD4;  /* borders/rules/dividers. Never text */
  --c-scrim:        rgba(21, 25, 28, 0.65);  /* hero scrim target value */
  --c-overlay:      rgba(21, 25, 28, 0.55);  /* drawer/modal backdrop */
  --c-focus-ring:   rgba(14, 88, 72, 0.18);  /* soft outer ring on inputs */

  /* The signature Glass Edge gradient — 3px rule. Section dividers,
     card hover top-accent, under the logo. NEVER decorative elsewhere. */
  --g-edge: linear-gradient(90deg, #8FD6BD, #0E5848);
  --g-edge-v: linear-gradient(180deg, #8FD6BD, #0E5848);
  /* Hero / photo scrim (bottom-left anchored) */
  --g-scrim: linear-gradient(to top, rgba(21,25,28,0.65) 0%, rgba(21,25,28,0.25) 45%, rgba(21,25,28,0.05) 100%);

  /* ===== Type ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", ui-serif, serif;

  /* Modular scale ~1.25 (px equivalents: 13/16/20/25/31/39/49) */
  --fs-xs:   0.8125rem;  /* 13px — captions, breadcrumbs, stock lines, legal */
  --fs-base: 1rem;       /* 16px — body */
  --fs-md:   1.25rem;    /* 20px — ledes, card group titles */
  --fs-lg:   1.5625rem;  /* 25px — H3 / small section heads */
  --fs-xl:   1.9375rem;  /* 31px — H2 section headings */
  --fs-2xl:  2.4375rem;  /* 39px — page H1 (interior pages) */
  --fs-3xl:  3.0625rem;  /* 49px — hero H1 max */
  --fs-h1-fluid: clamp(2rem, 5vw, 3.0625rem);
  --fs-eyebrow: 11px;    /* mono uppercase eyebrows */

  --lh-body: 1.6;
  --lh-heading: 1.15;
  --ls-tight: -0.02em;   /* all headings 700–800 */
  --ls-eyebrow: 0.12em;

  /* ===== Spacing (4px base) ===== */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 80px;  --sp-10: 96px; --sp-11: 112px;
  --section-pad: var(--sp-9);            /* mobile section padding (80px) */
  --section-pad-lg: var(--sp-11);        /* desktop section padding (112px) */

  /* ===== Radii ===== */
  --r-base: 4px;     /* cards, inputs, buttons — eased, not rounded */
  --r-pill: 999px;   /* badges, chips, count bubbles only */
  /* Never mix radii within one component. */

  /* ===== Shadow — exactly one in the whole system ===== */
  --shadow: 0 8px 24px rgba(14, 88, 72, 0.10);
  /* Depth otherwise = hairline borders + whitespace. No second shadow, ever. */

  /* ===== Layout ===== */
  --container: 1200px;
  --container-narrow: 720px;   /* prose, forms, confirmation panels */
  --container-pad: 16px;       /* mobile gutters */
  --container-pad-md: 24px;    /* ≥640px gutters */
  --header-h: 56px;            /* mobile */
  --header-h-lg: 64px;         /* ≥1024px */
  --drawer-w: min(400px, 92vw);

  /* ===== Motion (BRAND: minimal, functional) ===== */
  --t-fast: 150ms ease-out;    /* hovers, focus, toggles */
  --t-med:  200ms ease-out;    /* drawer slide, toast in/out */

  /* ===== Z-index ===== */
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-toast: 300;

  /* ===== Dark-surface-safe tints (AA on Silicone Black) ===== */
  --c-grey-on-dark:  #A8AFAB;  /* Gauge Grey fails on ink; this passes */
  --c-amber-on-dark: #E8A86B;  /* Cut Amber dark-safe tint */
  --c-hairline-on-dark: rgba(215, 219, 212, 0.15);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bench);
  color: var(--c-ink);
  font: 400 var(--fs-base)/var(--lh-body) var(--font-sans);
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 5vw, var(--fs-2xl)); font-weight: 800; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }

@media (min-width: 640px) {
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { color: var(--c-teal-deep); }

:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
}

/* On dark surfaces the ring flips to Glass Edge */
.site-header :focus-visible,
.site-footer :focus-visible,
.band--dark :focus-visible,
.hero :focus-visible,
.toast :focus-visible {
  outline-color: var(--c-edge);
}

::selection { background: var(--c-edge); color: var(--c-ink); }

img { max-width: 100%; height: auto; display: block; }

svg { display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--c-hairline);
  margin: var(--sp-6) 0;
}

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

table { border-collapse: collapse; width: 100%; }

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

fieldset { border: 0; margin: 0 0 var(--sp-6); padding: 0; min-width: 0; }

legend {
  padding: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-4);
}

s { text-decoration-thickness: 1px; }

figure { margin: 0; }

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

/* ==========================================================================
   3. Utilities
   ========================================================================== */

/* The mono rule: anything with a unit or a dollar sign. */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-grey);
  margin: 0 0 var(--sp-3);
}

.band--dark .eyebrow,
.hero .eyebrow,
.eyebrow--edge { color: var(--c-edge); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 640px) {
  .container { padding-inline: var(--container-pad-md); }
}

.section { padding-block: var(--section-pad); }

@media (min-width: 1024px) {
  .section { padding-block: var(--section-pad-lg); }
}

.band--glass { background: var(--c-glass); }

.band--dark {
  background-color: var(--c-ink);
  color: var(--c-bench);
  /* Faint blueprint grid — dark surfaces only (BRAND motif 5) */
  background-image:
    repeating-linear-gradient(0deg, rgba(143, 214, 189, 0.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(143, 214, 189, 0.03) 0 1px, transparent 1px 32px);
}

.band--dark a { color: var(--c-edge); }
.band--dark .muted, .on-dark-muted { color: var(--c-grey-on-dark); }

.muted { color: var(--c-grey); }

/* The Glass Edge rule — section divider */
.rule-edge {
  height: 3px;
  background: var(--g-edge);
  border: 0;
  margin: 0;
}

.sr-only {
  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;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-toast) + 1);
  background: var(--c-plinth);
  color: var(--c-teal);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-base);
  box-shadow: var(--shadow);
}

.skip-link:focus {
  position: fixed;
  left: var(--sp-2);
  top: var(--sp-2);
}

/* Body scroll lock while the drawer / mobile nav is open */
.dha-no-scroll { overflow: hidden; }

/* Registration crosshair corner marks (BRAND motif 6) — sparing use */
.reg-marks { position: relative; }
.reg-marks::before,
.reg-marks::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--c-grey), var(--c-grey)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--c-grey), var(--c-grey)) 0 50% / 100% 1px no-repeat;
  opacity: 0.45;
  pointer-events: none;
}
.reg-marks::before { top: 10px; left: 10px; }
.reg-marks::after { bottom: 10px; right: 10px; }

/* ==========================================================================
   4. Shell — header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-ink);
  color: var(--c-bench);
}

/* Bottom edge carries the 3px Glass Edge rule */
.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--g-edge);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
  position: relative;
}

@media (min-width: 1024px) {
  .header-inner { height: var(--header-h-lg); gap: var(--sp-6); }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
  padding-block: var(--sp-1) 6px;
  text-decoration: none;
  flex: none;
}

.logo-word {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: var(--c-bench);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .logo-word { font-size: 18px; }
}

/* 2px Glass Edge rule beneath the lockup */
.logo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--g-edge);
}

.logo:hover .logo-word { color: var(--c-edge); }

/* --- Nav: mobile-first = dropdown panel, ≥640px = inline row --- */

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--container-pad));
  right: calc(-1 * var(--container-pad));
  margin-top: 3px; /* clear the gradient rule */
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-hairline-on-dark);
  box-shadow: var(--shadow);
}

.site-nav.open { display: block; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  flex-direction: column;
}

.site-nav li + li { border-top: 1px solid var(--c-hairline-on-dark); }

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--sp-2);
  color: var(--c-bench);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--c-edge); }

.site-nav a[aria-current="page"] {
  color: var(--c-edge);
  border-bottom-color: var(--c-edge);
}

@media (min-width: 640px) {
  .site-nav {
    display: block;
    position: static;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .site-nav ul {
    flex-direction: row;
    gap: var(--sp-5);
    padding: 0;
  }
  .site-nav li + li { border-top: 0; }
  .site-nav a {
    display: inline-flex;
    min-height: 0;
    padding: 6px 2px;
  }
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: var(--r-base);
  color: var(--c-edge);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast);
}

.icon-btn:hover { background: rgba(143, 214, 189, 0.12); color: var(--c-edge); }

.nav-toggle { display: inline-flex; }

@media (min-width: 640px) {
  .nav-toggle { display: none; }
}

.cart-btn { position: relative; }

.cart-count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--c-edge);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ==========================================================================
   5. Shell — footer
   ========================================================================== */

.site-footer {
  background-color: var(--c-ink);
  color: var(--c-bench);
  background-image:
    repeating-linear-gradient(0deg, rgba(143, 214, 189, 0.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(143, 214, 189, 0.03) 0 1px, transparent 1px 32px);
  margin-top: auto;
}

/* Top edge carries the 3px Glass Edge rule */
.site-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--g-edge);
}

.footer-grid {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-8);
}

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--sp-6); }
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-grey-on-dark);
  margin: 0 0 var(--sp-4);
}

.footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--c-edge);
  margin: var(--sp-4) 0 var(--sp-3);
}

.footer-blurb {
  font-size: var(--fs-xs);
  color: var(--c-grey-on-dark);
  max-width: 36ch;
}

.footer-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  line-height: 2;
  font-style: normal;
}

.site-footer a {
  color: var(--c-bench);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--c-edge);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li { margin-bottom: var(--sp-2); }

.footer-hours { width: 100%; }

.footer-hours th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 12px 4px 0;
  white-space: nowrap;
}

.footer-hours td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  padding: 4px 0;
}

.footer-hours .closed { color: var(--c-amber-on-dark); }

.footer-bottom {
  border-top: 1px solid var(--c-hairline-on-dark);
  padding-block: var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-grey-on-dark);
  display: grid;
  gap: var(--sp-1);
}

.footer-bottom a { color: var(--c-grey-on-dark); }

/* ==========================================================================
   6. Shell — mini-cart drawer
   ========================================================================== */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--t-med);
}

.drawer-overlay.open { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--drawer-w);
  background: var(--c-bench);
  z-index: var(--z-drawer);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-med);
}

.cart-drawer.open { transform: translateX(0); }

/* Left edge: 3px vertical Glass Edge gradient */
.cart-drawer::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--g-edge-v);
  pointer-events: none;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-hairline);
  flex: none;
}

.drawer-head h2 { margin: 0; font-size: var(--fs-md); }

.drawer-head [data-cart-drawer-count] {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-grey);
}

.drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  color: var(--c-teal);
  cursor: pointer;
  transition: background var(--t-fast);
}

.drawer-close:hover { background: var(--c-glass); }

.drawer-lines {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-5);
}

.drawer-line {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-hairline);
}

.drawer-line:last-child { border-bottom: 0; }

.drawer-thumb {
  flex: none;
  width: 64px;
  height: 64px;
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: 4px;
  display: block;
  overflow: hidden;
}

.drawer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drawer-line-info { flex: 1; min-width: 0; }

.drawer-line-name {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  margin-bottom: 2px;
  overflow-wrap: break-word;
}

.drawer-line-name:hover { color: var(--c-teal); text-decoration: underline; }

.drawer-line-opts {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0 0 2px;
}

.drawer-line-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--c-teal);
  margin: 0 0 var(--sp-2);
}

.drawer-line-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.drawer-line-controls .qty-btn { width: 28px; height: 28px; }
.drawer-line-controls .qty-input { width: 36px; height: 28px; font-size: var(--fs-xs); }

.line-remove {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-base);
  color: var(--c-grey);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.line-remove:hover { background: var(--c-glass); color: var(--c-red); }

.drawer-totals {
  flex: none;
  border-top: 1px solid var(--c-hairline);
  padding: var(--sp-4) var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  background: var(--c-bench);
}

.drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

.drawer-total .mono {
  font-size: var(--fs-md);
  color: var(--c-teal);
  font-weight: 700;
}

.gst-note {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0;
}

.drawer-empty { padding-block: var(--sp-7); }

/* ==========================================================================
   7. Buttons (§3.2)
   ========================================================================== */

.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 24px;
  border-radius: var(--r-base);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn--block { width: 100%; justify-content: center; }

.btn--sm { padding: 8px 16px; font-size: var(--fs-xs); }

.btn--primary { background: var(--c-teal); color: #FFFFFF; }
.btn--primary:hover:not(:disabled) { background: var(--c-teal-deep); color: #FFFFFF; }

.btn--secondary { background: var(--c-ink); color: var(--c-bench); }
.btn--secondary:hover:not(:disabled) { background: var(--c-ink-soft); color: var(--c-bench); }

.btn--ghost {
  background: transparent;
  border-color: var(--c-teal);
  color: var(--c-teal);
}
.btn--ghost:hover:not(:disabled) { background: var(--c-glass); color: var(--c-teal); }

.btn--ghost.on-dark {
  border-color: var(--c-edge);
  color: var(--c-edge);
}
.btn--ghost.on-dark:hover:not(:disabled) { background: rgba(143, 214, 189, 0.12); color: var(--c-edge); }
.btn--ghost.on-dark:focus-visible { outline-color: var(--c-edge); }
.btn--ghost.on-dark:disabled { opacity: 0.5; }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--c-hairline);
  color: var(--c-grey);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}

.btn--ghost:disabled {
  background: transparent;
  border-color: var(--c-hairline);
  color: var(--c-grey);
}

/* ==========================================================================
   8. Forms (§3.3)
   ========================================================================== */

.field { margin-bottom: var(--sp-4); }

.field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-1);
}

.field label .optional { color: var(--c-grey); font-weight: 400; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: 10px 12px;
  font-size: var(--fs-base); /* 16px — prevents iOS zoom */
  font-family: var(--font-sans);
  color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

textarea { min-height: 120px; resize: vertical; }

select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-grey) 50%),
    linear-gradient(135deg, var(--c-grey) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  cursor: pointer;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px var(--c-focus-ring);
  outline: none;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--c-red);
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--c-red);
  margin: var(--sp-1) 0 0;
}

.field-error svg { flex: none; margin-top: 3px; }

/* Form-level error summary */
.form-alert {
  background: var(--c-glass);
  border-left: 3px solid var(--c-red);
  border-radius: 0 var(--r-base) var(--r-base) 0;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Radio cards (checkout fulfilment) */
.radio-card {
  position: relative;
  display: block;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: var(--sp-4);
  cursor: pointer;
  margin-bottom: var(--sp-3);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.radio-card input[type="radio"] {
  position: absolute;
  width: 20px;
  height: 20px;
  top: var(--sp-4);
  left: var(--sp-4);
  margin: 0;
  opacity: 0.0001; /* keyboard-reachable, visually replaced */
  cursor: pointer;
}

.radio-card-body { padding-left: 32px; }

/* drawn radio dot */
.radio-card-body::before {
  content: "";
  position: absolute;
  top: calc(var(--sp-4) + 2px);
  left: var(--sp-4);
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-grey);
  border-radius: 50%;
  background: var(--c-plinth);
}

.radio-card input:checked ~ .radio-card-body::before {
  border: 5px solid var(--c-teal);
}

.radio-card:hover { border-color: var(--c-grey); }

.radio-card.is-selected,
.radio-card:has(input:checked) {
  border-color: var(--c-teal);
  background: var(--c-glass);
  box-shadow: inset 0 0 0 1px var(--c-teal); /* reads as 2px border, no layout shift */
}

.radio-card:has(input:focus-visible) {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
}

.radio-card-title {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-weight: 600;
  margin: 0;
}

.radio-card-title .tag {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-teal);
  align-self: center;
}

.radio-card-sub {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: var(--sp-1) 0 0;
}

.demo-line {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   9. Quantity stepper (§3.4)
   ========================================================================== */

.qty {
  display: inline-flex;
  align-items: stretch;
}

.qty-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--c-hairline);
  color: var(--c-teal);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast);
}

.qty-btn:first-child { border-radius: var(--r-base) 0 0 var(--r-base); }
.qty-btn:last-child { border-radius: 0 var(--r-base) var(--r-base) 0; }

.qty-btn:hover { background: var(--c-glass); }

.qty-input {
  width: 48px;
  height: 36px;
  border: 1px solid var(--c-hairline);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  padding: 0 4px;
  background: var(--c-plinth);
}

.qty-input:focus {
  box-shadow: inset 0 0 0 2px var(--c-teal);
  border-color: var(--c-hairline);
}

/* ==========================================================================
   10. Badges / ribbons (§3.5)
   ========================================================================== */

.ribbon {
  display: inline-block;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 5px 10px 4px;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ribbon--fill { background: var(--c-amber); color: #FFFFFF; }

.ribbon--line {
  background: transparent;
  border: 1px solid var(--c-amber);
  color: var(--c-amber);
}

.card-media .ribbon,
.product-card > .ribbon {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2;
}

/* Stock dot — never colour alone; always paired with text */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}

.dot--in { background: var(--c-green); }

/* ==========================================================================
   11. Toast (§3.6)
   ========================================================================== */

.toast-region {
  position: fixed;
  z-index: var(--z-toast);
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

@media (min-width: 640px) {
  .toast-region {
    left: auto;
    right: var(--sp-5);
    bottom: var(--sp-5);
    justify-content: flex-end;
  }
}

.toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 100%;
  background: var(--c-ink);
  color: var(--c-bench);
  border-radius: var(--r-base);
  box-shadow: var(--shadow);
  padding: 14px 16px 14px 19px;
  font-size: var(--fs-xs);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-med), transform var(--t-med);
}

@media (min-width: 640px) {
  .toast { max-width: 420px; }
}

/* 3px Glass Edge left rule */
.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--g-edge-v);
  border-radius: var(--r-base) 0 0 var(--r-base);
}

.toast.show { opacity: 1; transform: translateY(0); }

.toast-msg { margin: 0; }

.toast-action {
  color: var(--c-edge);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.toast-action:hover { color: var(--c-edge); }

/* ==========================================================================
   12. Empty states (§3.7)
   ========================================================================== */

.empty-state {
  max-width: 480px;
  margin-inline: auto;
  padding-block: var(--sp-9);
  text-align: center;
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
}

.empty-state svg { color: var(--c-grey); }

.empty-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
}

.empty-copy {
  color: var(--c-grey);
  margin: 0;
}

.drawer-empty.empty-state { padding-block: var(--sp-7); }

/* ==========================================================================
   13. Section header (§3.8)
   ========================================================================== */

.section-head { margin-bottom: var(--sp-6); }

@media (min-width: 1024px) {
  .section-head { margin-bottom: var(--sp-7); }
}

.section-head h1,
.section-head h2 { margin-bottom: var(--sp-2); }

.section-head .lede {
  font-size: var(--fs-md);
  color: var(--c-grey);
  max-width: 60ch;
  margin: 0;
}

.band--dark .section-head .lede { color: var(--c-grey-on-dark); }

.section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}

.view-all {
  font-weight: 600;
  white-space: nowrap;
}

.view-all .mono { font-size: var(--fs-xs); }

/* Result-count line (shop) */
.result-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
}

/* ==========================================================================
   14. Breadcrumbs (§3.9)
   ========================================================================== */

.crumbs { padding-block: var(--sp-4); font-size: var(--fs-xs); }

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }

.crumbs a {
  color: var(--c-grey);
  text-decoration: none;
}

.crumbs a:hover { color: var(--c-teal); text-decoration: underline; }

.crumb-sep { color: var(--c-hairline); }

.crumb-current {
  color: var(--c-ink);
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 639.98px) {
  .crumb-current { max-width: 40vw; }
}

/* ==========================================================================
   15. Spec-sheet table (§3.10) + hours table
   ========================================================================== */

.spec-table-wrap {
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  overflow: hidden;
  background: var(--c-plinth);
}

.spec-table { width: 100%; }

.spec-table caption {
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--c-grey);
  padding: var(--sp-2) var(--sp-4);
}

.spec-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-grey);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-hairline);
}

.spec-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: top;
}

.spec-table tr:last-child td { border-bottom: 0; }

.spec-table td:first-child {
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.spec-table td + td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
}

.spec-table tbody tr:nth-child(even) { background: var(--c-glass); }

/* Dark-adapted variant (custom-build band) */
.spec-table-wrap--dark {
  border-color: var(--c-hairline-on-dark);
  background: transparent;
}

.spec-table--dark th { color: var(--c-grey-on-dark); border-bottom-color: var(--c-hairline-on-dark); }
.spec-table--dark td { border-bottom-color: var(--c-hairline-on-dark); }
.spec-table--dark td + td { color: var(--c-edge); }
.spec-table--dark tbody tr:nth-child(even) { background: rgba(143, 214, 189, 0.05); }

/* Hours table (footer-independent, contact/visit bands) */
.hours-table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-hairline);
  white-space: nowrap;
}

.hours-table td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-hairline);
}

.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }

.hours-table tbody tr:nth-child(even) { background: var(--c-glass); }

.hours-table .closed-day { color: var(--c-amber); }

/* ==========================================================================
   16. Dimension line (§3.11)
   ========================================================================== */

.dim-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-grey);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dim-line::before,
.dim-line::after {
  content: "";
  flex: 1 1 24px;
  min-width: 24px;
  height: 9px;
  background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}

.dim-line::before { border-left: 1px solid currentColor; }
.dim-line::after { border-right: 1px solid currentColor; }

.dim-line .dim-label {
  background: var(--c-bench);
  border-radius: var(--r-base);
  padding: 2px 8px;
  white-space: nowrap;
}

.dim-line--on-photo { color: var(--c-bench); }
.dim-line--on-photo .dim-label {
  background: transparent;
  color: var(--c-bench);
}

/* ==========================================================================
   17. Product card (§3.1) + grid + placeholder tile
   ========================================================================== */

.product-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-card {
  position: relative;
  overflow: hidden;
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast);
}

/* Glass Edge top accent, revealed on hover */
.product-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g-edge);
  opacity: 0;
  z-index: 3;
  transition: opacity var(--t-fast);
  pointer-events: none;
}

@media (hover: hover) {
  .product-card:hover { transform: translateY(-2px); }
  .product-card:hover::before { opacity: 1; }
}

.product-card:focus-within::before { opacity: 1; }

.card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--c-plinth);
  padding: var(--sp-3);
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-media .ph-tile {
  position: absolute;
  inset: 0;
}

.wish-btn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: 50%;
  color: var(--c-teal);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.wish-btn:hover { border-color: var(--c-teal); }

.wish-btn[aria-pressed="true"] svg path { fill: currentColor; }

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  flex: 1;
}

.card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-ink);
  text-decoration: none;
}

.card-name:hover { color: var(--c-teal); text-decoration: underline; }

.card-stock {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0;
}

.card-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  color: var(--c-teal);
  margin: 0 0 var(--sp-1);
}

.card-price .was {
  font-size: var(--fs-base);
  color: var(--c-grey);
}

.card-price .now { color: var(--c-amber); }

.card-body .btn { margin-top: auto; }

/* Branded placeholder tile (images: []) */
.ph-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--c-glass);
  overflow: hidden;
}

.ph-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g-edge);
}

.ph-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-grey);
}

@supports (-webkit-text-stroke: 1px #50575C) {
  .ph-mono {
    color: transparent;
    -webkit-text-stroke: 1px var(--c-grey);
  }
}

.ph-cat {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-grey);
  text-align: center;
  padding-inline: var(--sp-3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-tile--thumb { aspect-ratio: auto; height: 100%; gap: 0; }
.ph-tile--thumb .ph-mono { font-size: var(--fs-base); }
.ph-tile--thumb .ph-cat { display: none; }
.ph-tile--thumb::before { height: 2px; }

.ph-tile--main .ph-mono { font-size: var(--fs-3xl); }

/* ==========================================================================
   18. Page sections — homepage
   ========================================================================== */

/* --- 18.1 Hero --- */

.hero {
  position: relative;
  background: var(--c-ink);
  color: var(--c-bench);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 1024px) {
  .hero { min-height: min(620px, 78vh); }
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: var(--g-scrim);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--sp-9) var(--sp-7);
}

.hero h1 {
  font-size: var(--fs-h1-fluid);
  font-weight: 800;
  color: var(--c-bench);
  max-width: 18ch;
  margin-bottom: var(--sp-4);
}

.hero-sub {
  font-size: var(--fs-md);
  max-width: 56ch;
  margin-bottom: var(--sp-6);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 639.98px) {
  .hero .cta-row .btn { flex: 1 1 100%; }
}

.hero-dim {
  display: none;
}

@media (min-width: 1024px) {
  .hero-dim {
    display: flex;
    position: absolute;
    right: var(--sp-6);
    bottom: var(--sp-5);
    z-index: 1;
    width: 360px;
    color: rgba(250, 250, 248, 0.85);
  }
  .hero-dim .dim-label { background: transparent; color: inherit; }
}

/* --- 18.2 Fact strip --- */

.fact-strip {
  background: var(--c-glass);
  border-bottom: 1px solid var(--c-hairline);
  padding-block: var(--sp-4);
}

.fact-strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-4);
}

.fact-strip li {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  text-align: center;
  padding-block: var(--sp-1);
}

@media (min-width: 1024px) {
  .fact-strip ul { grid-template-columns: repeat(4, 1fr); }
  .fact-strip li + li { border-left: 1px solid var(--c-hairline); }
}

/* --- 18.3 Category tiles --- */

.cat-tiles {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .cat-tiles { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

.cat-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 140px;
  background: var(--c-glass);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: var(--sp-5);
  color: var(--c-ink);
  text-decoration: none;
  transition: transform var(--t-fast);
}

.cat-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g-edge);
  opacity: 0;
  transition: opacity var(--t-fast);
}

@media (hover: hover) {
  .cat-tile:hover { transform: translateY(-2px); }
  .cat-tile:hover::before { opacity: 1; }
}

.cat-tile:focus-visible::before { opacity: 1; }

.tile-icon { color: var(--c-teal); }

.tile-name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.tile-count {
  margin-top: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
}

.tiles-cta { text-align: center; margin-top: var(--sp-6); }

/* --- 18.4 Custom-build story band --- */

.band-split { display: grid; gap: var(--sp-7); }

@media (min-width: 1024px) {
  .band-split {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

.escape-hatch {
  font-size: var(--fs-xs);
  color: var(--c-grey-on-dark);
  margin-top: var(--sp-3);
}

.escape-hatch a { color: var(--c-edge); }

/* Build log strip */
.build-log {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
}

.build-log figure {
  flex: 0 0 min(280px, 78vw);
  scroll-snap-align: start;
}

@media (min-width: 1024px) {
  .build-log {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding-bottom: 0;
  }
  .build-log figure { flex: none; }
}

.build-log img,
.build-step img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-base);
}

.build-log figcaption,
.build-step figcaption {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--c-grey-on-dark);
  margin-top: var(--sp-2);
  line-height: 1.5;
}

/* Light-surface build steps (about.html) */
.build-steps {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .build-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .build-steps { grid-template-columns: repeat(4, 1fr); }
}

.build-steps figcaption {
  color: var(--c-grey);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  margin-top: var(--sp-2);
  line-height: 1.5;
}

.build-step-tile {
  aspect-ratio: 4 / 3;
  background: var(--c-glass);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.step-num { color: var(--c-edge); }
.build-steps .step-num { color: var(--c-teal); }

/* --- 18.5 Brands marquee --- */

.brands-band {
  background: var(--c-bench);
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
  padding-block: var(--sp-7);
  text-align: center;
}

.brands-band .eyebrow { margin-bottom: var(--sp-5); }

.marquee { overflow: hidden; }

.marquee-track {
  display: flex;
  width: max-content;
  animation: dha-marquee 40s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex: none;
}

.marquee-list li {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  white-space: nowrap;
  padding-inline: var(--sp-4);
}

.marquee-list li::after {
  content: "·";
  color: var(--c-hairline);
  padding-left: var(--sp-6);
}

@keyframes dha-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-list { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-2); }
  .marquee-list[aria-hidden="true"] { display: none; }
}

/* --- 18.6 Visit band --- */

.visit-band { background: var(--c-glass); }

.visit-grid { display: grid; gap: var(--sp-7); }

@media (min-width: 1024px) {
  .visit-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

.address-block {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 2;
  margin-bottom: var(--sp-5);
}

/* ==========================================================================
   19. Page sections — shop
   ========================================================================== */

.shop-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--c-bench);
  border-bottom: 1px solid var(--c-hairline);
  padding-block: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

@media (min-width: 1024px) {
  .shop-toolbar { top: var(--header-h-lg); }
}

.toolbar-search {
  position: relative;
  flex: 1 1 200px;
  min-width: 200px;
}

.toolbar-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-grey);
  pointer-events: none;
}

.toolbar-search input { padding-left: 40px; }

.toolbar-select { flex: 0 1 auto; width: auto; min-width: 150px; }

.back-link {
  font-size: var(--fs-xs);
  text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

.show-more-wrap { text-align: center; margin-top: var(--sp-7); }

/* ==========================================================================
   20. Page sections — product detail
   ========================================================================== */

.pdp {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

@media (min-width: 1024px) {
  .pdp { grid-template-columns: 7fr 5fr; gap: var(--sp-8); align-items: start; }
}

.pdp-main {
  aspect-ratio: 1 / 1;
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.pdp-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pdp-main .ph-tile { position: absolute; inset: 0; aspect-ratio: auto; }

.pdp-thumbs {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.pdp-thumb {
  width: 64px;
  height: 64px;
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: 4px;
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }

.pdp-thumb:hover { border-color: var(--c-grey); }

.pdp-thumb[aria-pressed="true"] {
  border-color: var(--c-teal);
  box-shadow: inset 0 0 0 1px var(--c-teal);
}

.pdp-info h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }

.pdp-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  color: var(--c-teal);
  margin: 0 0 var(--sp-1);
}

.pdp-price .was {
  color: var(--c-grey);
  font-size: var(--fs-md);
}

.pdp-price .now { color: var(--c-amber); }

.pdp-gst {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0 0 var(--sp-4);
}

.pdp-stock {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0 0 var(--sp-5);
}

.pdp-options { margin-bottom: var(--sp-4); }

.pdp-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.pdp-buy .btn { flex: 1 1 auto; }

.pdp-wish { margin-bottom: var(--sp-5); }

.pickup-note {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0;
}

.pickup-note svg { flex: none; color: var(--c-teal); margin-top: 2px; }

/* Description prose */
.prose {
  max-width: var(--container-narrow);
  overflow-wrap: break-word;
}

.prose p { margin-bottom: 1em; }

.prose table {
  width: 100%;
  margin-block: var(--sp-4);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
}

.prose th,
.prose td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-hairline);
  text-align: left;
  font-size: var(--fs-xs);
}

.prose td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.prose td:first-child { font-family: var(--font-sans); font-weight: 600; }
.prose tr:last-child th,
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) { background: var(--c-glass); }

.prose img { border-radius: var(--r-base); }

/* ==========================================================================
   21. Page sections — cart
   ========================================================================== */

.cart-layout { display: grid; gap: var(--sp-6); }

@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: 8fr 4fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

.cart-lines { border-top: 1px solid var(--c-hairline); }

.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--c-hairline);
  align-items: center;
}

@media (min-width: 640px) {
  .cart-line {
    grid-template-columns: 96px minmax(0, 1fr) auto auto auto;
  }
}

.cart-thumb {
  width: 96px;
  height: 96px;
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: 6px;
  display: block;
  overflow: hidden;
  align-self: start;
}

.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }

.cart-line-info { min-width: 0; }

.cart-line-name {
  display: block;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  margin-bottom: 2px;
}

.cart-line-name:hover { color: var(--c-teal); text-decoration: underline; }

.cart-line-opts {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0 0 2px;
}

.cart-line-unit {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0;
}

.cart-line-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-teal);
  white-space: nowrap;
}

@media (max-width: 639.98px) {
  .cart-line-controls {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
  }
}

/* Summary card (cart + checkout aside) */
.summary-card {
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .summary-card--sticky {
    position: sticky;
    top: calc(var(--header-h-lg) + var(--sp-4));
  }
}

.summary-card h2 {
  font-size: var(--fs-md);
  margin: 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-weight: 600;
  margin: 0;
}

.summary-total .mono {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-teal);
}

.note-box {
  background: var(--c-glass);
  border-radius: var(--r-base);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-ink);
}

.summary-lines {
  display: grid;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--c-hairline);
  padding-bottom: var(--sp-4);
}

.summary-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
}

.summary-line .drawer-thumb { width: 48px; height: 48px; }

.summary-line-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-line .mono { white-space: nowrap; color: var(--c-teal); }
.summary-line .line-qty { color: var(--c-grey); }

/* ==========================================================================
   22. Page sections — checkout + confirmation
   ========================================================================== */

.checkout-layout { display: grid; gap: var(--sp-6); }

@media (min-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-8);
    align-items: start;
  }
  .checkout-layout .order-summary--mobile { display: none; }
}

.order-summary--mobile {
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  background: var(--c-plinth);
  margin-bottom: var(--sp-5);
}

.order-summary--mobile summary {
  padding: var(--sp-4);
  font-weight: 600;
  cursor: pointer;
  list-style-position: inside;
}

.order-summary--mobile summary .mono { color: var(--c-teal); }

.order-summary--mobile .summary-card {
  border: 0;
  box-shadow: none;
  border-top: 1px solid var(--c-hairline);
  border-radius: 0;
}

@media (min-width: 1024px) {
  .summary-aside--desktop { display: block; }
}

@media (max-width: 1023.98px) {
  .summary-aside--desktop { display: none; }
}

/* Confirmation panel */
.confirm-panel {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
  padding-block: var(--sp-9);
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
}

.confirm-panel svg { color: var(--c-green); }

.confirm-panel h1 { font-size: var(--fs-2xl); margin: 0; outline: none; }

.order-chip {
  display: inline-block;
  background: var(--c-glass);
  border-radius: var(--r-base);
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.confirm-copy { color: var(--c-grey); max-width: 52ch; margin: 0; }

.confirm-recap {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0;
}

.confirm-panel .cta-row { justify-content: center; }

/* ==========================================================================
   23. Page sections — about + contact
   ========================================================================== */

/* Serif pull-quote — the one serif moment on about.html */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lg);
  text-align: center;
  letter-spacing: 0;
  max-width: var(--container-narrow);
  margin: var(--sp-8) auto;
  padding-block: var(--sp-5);
  position: relative;
}

.pull-quote::before,
.pull-quote::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 3px;
  background: var(--g-edge);
}

.pull-quote::before { top: 0; }
.pull-quote::after { bottom: 0; }

/* Brand tiles wall */
.brand-tiles {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .brand-tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .brand-tiles { grid-template-columns: repeat(4, 1fr); }
}

.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 88px;
  background: var(--c-glass);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  padding: var(--sp-4);
  text-align: center;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform var(--t-fast);
}

.brand-tile .brand-name {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.brand-tile .brand-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-grey);
}

@media (hover: hover) {
  a.brand-tile:hover { transform: translateY(-2px); border-color: var(--c-teal); }
}

/* Contact info cards */
.info-cards {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .info-cards { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

.info-card {
  background: var(--c-plinth);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.info-card svg { color: var(--c-teal); }

.info-card h3 { font-size: var(--fs-md); margin: 0; }

.info-card .big-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.info-card p {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin: 0;
}

/* Map placeholder (offline rule — no external tiles) */
.map-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--c-glass);
  background-image:
    repeating-linear-gradient(0deg, rgba(14, 88, 72, 0.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(14, 88, 72, 0.05) 0 1px, transparent 1px 32px);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-5);
  overflow: hidden;
}

.map-tile svg { color: var(--c-teal); }

.map-tile address {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--c-grey);
}

/* Two-column hours + map row */
.hours-map-grid { display: grid; gap: var(--sp-6); }

@media (min-width: 1024px) {
  .hours-map-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
}

.table-caption {
  font-size: var(--fs-xs);
  color: var(--c-grey);
  margin-top: var(--sp-3);
}

/* Inline form confirmation (contact) */
.form-confirm {
  background: var(--c-glass);
  border-radius: var(--r-base);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  text-align: center;
}

.form-confirm svg { color: var(--c-green); }
.form-confirm p { margin: 0; max-width: 48ch; }

/* ==========================================================================
   24. Misc / final
   ========================================================================== */

/* Page-head block on interior pages */
.page-head { padding-block: var(--sp-4) var(--sp-6); }

.page-head h1 { margin-bottom: var(--sp-2); }

.page-head .lede {
  font-size: var(--fs-md);
  color: var(--c-grey);
  max-width: 60ch;
  margin: 0;
}

.count-line {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-grey);
  margin-top: var(--sp-2);
}

/* Make the whole document a column so the footer hugs the bottom */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

#site-header, #site-footer { flex: none; }