/*
 * PokemonsCards.com design system.
 *
 * Sections 1–12 are ported from the approved prototype (prototype/index.html)
 * with the section density, spacing rhythm, radius grammar and palette intact.
 * Sections 13+ add the templates the prototype did not contain.
 *
 * Deliberate changes to the prototype CSS, each required by the brief:
 *
 *  1. FOCUS. The prototype set `outline:none` on :focus-visible for buttons,
 *     icon buttons and inputs. That is a WCAG 2.4.7 failure, so every one is
 *     replaced with a visible focus ring. Nothing in this file removes an
 *     outline without providing a stronger replacement.
 *  2. CONTRAST. `.copyright` used #7a8595 on var(--paper) (~4.0:1) and failed WCAG
 *     1.4.3. It is now var(--ink-2) (~6.2:1). All other palette pairs were measured
 *     and pass; they are unchanged.
 *  3. TOUCH TARGETS. Interactive controls are raised to 44x44 under
 *     `pointer: coarse` only, so desktop density is untouched.
 *  4. RATINGS. `.stars` is retained for the day genuine reviews exist, but the
 *     homepage product card renders `.product-verify` instead — the prototype's
 *     star counts were not backed by review data.
 *  5. LAYOUT SHIFT. Media boxes reserve space via aspect-ratio and explicit
 *     dimensions so images cannot reflow the page.
 *
 * Font sizes are preserved exactly as approved. They are small by modern
 * convention; WCAG 2.2 sets no minimum size and 200% browser zoom is verified,
 * but this is flagged in docs/launch-report.md as worth revisiting.
 */

/* ========================================================================== */
/* 1. Tokens                                                                   */
/* ========================================================================== */

:root {
  /* ---- Ground and ink -------------------------------------------------- */
  --paper: #fbf8f2;
  --paper-2: #f2ece1;
  --paper-3: #eae2d3;
  --ink: #171417;
  --ink-2: #3a3540;

  /* ---- Accents ---------------------------------------------------------
     `--ember` is the brand red and is used for fields, gradients and large
     decorative fills. It is NOT used behind small white text: white on
     #e4572e measures 3.68:1 and fails WCAG 1.4.3, so every solid button that
     carries a white label fills with `--ember-dark` instead (5.4:1).

     `--ember-dark` was moved from the supplied var(--ember-dark) to #b8401d. At var(--ember-dark)
     it measured 4.40:1 on `--paper-2` and 4.24:1 on `--ember-tint` — both
     below 4.5 — and those are exactly the surfaces the section kickers and
     the category icons sit on. The shift is imperceptible and makes all three
     grounds pass. */
  --ember: #e4572e;
  --ember-dark: #b8401d;
  --ember-tint: #fbe4da;
  --gold: #c79a2b;
  --gold-tint: #f3e6c2;

  --line: rgba(23, 20, 23, 0.09);
  --line-strong: rgba(23, 20, 23, 0.16);
  --muted: var(--ink-2);

  /* ---- Status ----------------------------------------------------------
     Re-tuned to sit on the paper ground rather than the old ice-blue one.
     Every foreground/background pair here is at or above 4.5:1. */
  --success: #14663c;
  --success-bg: #e6f4ec;
  --warning: #7a4a05;
  --warning-bg: #fdf0dc;
  --danger: #a3271a;
  --danger-bg: #fbe8e5;
  --focus: #b8401d;

  /* ---- Type ------------------------------------------------------------
     next/font injects --font-serif (Newsreader) and --font-sans (Manrope)
     and self-hosts both. The fallbacks keep the tokens valid if that layer
     is ever removed. */
  --serif: var(--font-serif), Georgia, 'Times New Roman', serif;
  --sans: var(--font-sans), 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---- Radius ----------------------------------------------------------
     The previous system was 3-7px. This one is soft: cards at 22px, panels
     and media at 32px, and a full pill for every control. */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(23, 20, 23, 0.08), 0 1px 1px rgba(23, 20, 23, 0.05);
  --shadow-md: 0 10px 28px rgba(23, 20, 23, 0.12), 0 2px 8px rgba(23, 20, 23, 0.06);
  --shadow-lg: 0 28px 56px rgba(23, 20, 23, 0.18), 0 10px 20px rgba(23, 20, 23, 0.08);
  --shadow: var(--shadow-md);

  --max: 1440px;
}

/* ========================================================================== */
/* 2. Base                                                                     */
/* ========================================================================== */

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* Keeps a focused anchor target clear of the sticky header. */
  scroll-padding-top: 150px;
  /* `clip` rather than `hidden`: it stops a 1px 100vw overflow from creating a
     sideways scroller on a phone, without turning the document into a scroll
     container that would break `position: sticky` on the header. */
  overflow-x: clip;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
img {
  max-width: 100%;
}
.shell {
  width: min(calc(100% - 60px), var(--max));
  margin-inline: auto;
}
.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;
}

/* Visible focus everywhere. This is the single replacement for every
   `outline:none` the prototype used. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Skip link — first tabbable element on every page. */
.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: none;
}

/* ========================================================================== */
/* 3. Utility bar                                                              */
/* ========================================================================== */

.utility {
  color: var(--paper);
  background: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.utility .shell {
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding-block: 9px;
}
.utility .mid {
  justify-content: center;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-tint);
  font-size: 14px;
}
.utility .right {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.utility span,
.utility a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.utility a {
  color: var(--paper);
}
.utility a:hover {
  text-decoration: underline;
}

/* ========================================================================== */
/* 4. Header and navigation                                                    */
/* ========================================================================== */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  /* Background and blur live on ::before, not on this box. `backdrop-filter`
     on the header itself makes Chromium clip overflowing descendants, which
     hid the mobile menu (positioned at top: 100%) behind the hero. */
  background: transparent;
}
header.site-header:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(251, 248, 242, 0.82);
  backdrop-filter: blur(14px);
}
.nav {
  position: relative;
  z-index: 1;
  min-height: 84px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding-block: 14px;
}
.nav > * {
  min-width: 0;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.brand-mark {
  height: 56px;
  width: auto;
  object-fit: contain;
}
.brand-copy small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  padding-left: 2px;
}

/* Pill navigation. The current page is a filled pill rather than an underline,
   which is what carries the rounded grammar of this system through the header. */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.main-nav a {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.main-nav a:hover {
  background: var(--paper-2);
}
.main-nav a[aria-current='page'] {
  background: var(--paper-2);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper-2);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.icon-button:hover {
  background: var(--paper-3);
}

/* The cart is the one header control that carries a label: a filled ink pill
   with a gold count, so it reads as the primary action in the bar. */
.cart-button {
  position: relative;
  width: auto;
  height: auto;
  padding: 9px 18px 9px 14px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  color: var(--paper);
  background: var(--ink);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cart-button:hover {
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 0;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--gold);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hamburger {
  display: none;
}
.mobile-nav {
  display: none;
}

/* ========================================================================== */
/* 5. Hero slider                                                              */
/* ========================================================================== */

/* The band is the positioning context for the floating badge and trust panel,
   so those sit over the slider without being inside a slide (they must not
   disappear when the slide changes, and must not be inert). */
.hero-band {
  position: relative;
  margin: 16px auto 0;
  width: min(calc(100% - 64px), var(--max));
}
.hero {
  position: relative;
  height: 390px;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  background: var(--ink);
  color: #fff;
}
.hero-slide {
  position: absolute;
  inset: 0;
  transition: opacity 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Reads over any photograph: dark at the base where the copy sits, clear at
   the top where the badge and trust panel need the image to show through. */
.hero-slide:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(23, 20, 23, 0.9) 0%,
    rgba(23, 20, 23, 0.6) 34%,
    rgba(23, 20, 23, 0.08) 62%
  );
  pointer-events: none;
}
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 96px 26px;
  max-width: 680px;
  pointer-events: none;
}
.hero-copy > * {
  pointer-events: auto;
}
.hero-kicker {
  width: max-content;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, 0.2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.hero-headline {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3.1vw, 38px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.hero-headline em {
  font-style: italic;
  color: var(--gold-tint);
}
.hero-desc {
  margin: 0;
  max-width: 440px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(251, 248, 242, 0.85);
}
.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Controls. Each is a real button with a label; the dots carry aria-current
   and the pause control is required by WCAG 2.2.2 for auto-rotating content. */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(251, 248, 242, 0.24);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-arrow:hover {
  background: rgba(251, 248, 242, 0.42);
}
.hero-arrow.prev {
  left: 24px;
}
.hero-arrow.next {
  right: 24px;
}
.hero-dots {
  position: absolute;
  right: 96px;
  bottom: 26px;
  z-index: 4;
  display: flex;
  align-items: center;
  /* The dots carry their own transparent padding to reach 24px, so the visual
     gap between them comes from that, not from this. */
  gap: 0;
}
/*
 * The design draws these as 8px dots. WCAG 2.2 Target Size (Minimum), 2.5.8,
 * requires 24x24 CSS pixels, so the button is 24px and `background-clip:
 * content-box` paints only the 8px content area. The dot looks exactly as
 * designed and the hit area is three times its size.
 */
.hero-dot {
  width: 24px;
  height: 24px;
  padding: 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, 0.5);
  background-clip: content-box;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.hero-dot.is-active {
  width: 44px;
  background: var(--gold);
  background-clip: content-box;
}
.hero-pause {
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(251, 248, 242, 0.24);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.hero-pause:hover {
  background: rgba(251, 248, 242, 0.42);
}

/* The discount badge and the trust panel sit above the slider, not inside a
   slide, so they persist across slide changes. */
.hero-badge {
  position: absolute;
  top: 28px;
  right: 36px;
  z-index: 5;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(155deg, var(--ember), var(--ember-dark));
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  letter-spacing: 0.08em;
  animation: pcFloat 4.5s ease-in-out infinite;
}
.hero-badge strong {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
@keyframes pcFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge {
    animation: none;
  }
}
.hero-trust {
  position: absolute;
  top: 28px;
  left: 96px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  color: #fff;
  background: rgba(23, 20, 23, 0.42);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.hero-trust strong {
  font-size: 14px;
  font-weight: 800;
}
.hero-trust span {
  color: rgba(251, 248, 242, 0.85);
}

/* ========================================================================== */
/* 6. Buttons                                                                  */
/* ========================================================================== */

.btn {
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
}
/* The accent fill is --ember-dark, not --ember. White on #e4572e measures
   3.68:1 and fails WCAG 1.4.3; on #b8401d it is 5.4:1. The hue is the same. */
.btn.primary,
.btn.solid {
  color: #fff;
  background: var(--ember-dark);
  box-shadow: var(--shadow-md);
}
.btn.primary:hover,
.btn.solid:hover {
  background: var(--ember);
  color: #fff;
}
.btn.ghost {
  color: #fff;
  border-color: rgba(251, 248, 242, 0.5);
  background: transparent;
}
.btn.ghost:hover {
  background: rgba(251, 248, 242, 0.16);
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

.btn.outline {
  color: var(--ember-dark);
  border-color: var(--ember-dark);
  background: transparent;
}
.btn.outline:hover {
  color: #fff;
  background: var(--ember-dark);
}
.btn.quiet {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--paper);
}
.btn.quiet:hover {
  background: var(--paper-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.btn.danger:hover {
  color: #fff;
  background: var(--danger);
}
.btn.small {
  min-height: 34px;
  padding: 0 14px;
  font-size: 11px;
}

/* ========================================================================== */
/* 7. Categories                                                               */
/* ========================================================================== */

.content {
  padding-top: 28px;
  padding-bottom: 8px;
}
/* Category rail: seven soft-cornered tiles that lift on hover, replacing the
   circular crests of the previous system. */
.categories {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}
.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 12px;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.category:hover,
.category:focus-visible {
  transform: translateY(-6px);
  background: #fff;
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .category:hover,
  .category:focus-visible {
    transform: none;
  }
}
.category-image {
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, var(--ember-tint), var(--gold-tint));
  color: var(--ember-dark);
}
.category-image img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}
.category strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.category-mark {
  color: var(--ember-dark);
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  opacity: 0.55;
}
.category-count {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

/* ========================================================================== */
/* 8. Section headings                                                         */
/* ========================================================================== */

.section-heading {
  margin: 52px 0 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.section-heading h2 {
  margin: 2px 0 0;
  padding: 0;
  color: var(--ink);
  background: none;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
/* The small accent label that sits above a section heading. */
.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ember-dark);
  text-transform: uppercase;
}
.view-all {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s ease;
}
.view-all:hover {
  background: var(--paper-2);
}

/* ========================================================================== */
/* 9. Product cards                                                            */
/* ========================================================================== */

.products {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.products.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.products.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
/* White card on the paper ground, no border — the shadow does the separating,
   which is what carries the softness of this system into the grid. */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
  .product:hover {
    transform: none;
  }
}
.product:focus-within {
  box-shadow: var(--shadow-lg);
}
/* Square media well. The catalogue is mixed — portrait singles and landscape
   sealed boxes — so the image is contained rather than cropped, and the box
   reserves its own height so nothing reflows as images arrive. */
.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper-2);
}
.product-media img {
  width: 84%;
  height: 88%;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.product:hover .product-media img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .product:hover .product-media img {
    transform: none;
  }
}
/* 34px is above the 24px WCAG 2.5.8 minimum and matches the design; the coarse
   pointer rule further down raises it to 44px on touch. */
.heart {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.heart:hover {
  background: #fff;
}
.heart[aria-pressed='true'] {
  color: #fff;
  background: var(--ember-dark);
}
.product-copy {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.product-copy h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
/* The whole card is clickable, but only the title is in the tab order — this
   avoids a duplicate link to the same destination for screen-reader users. */
.product-copy h3 a:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-copy > p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.stars {
  margin-top: 7px;
  color: #a37d00;
  font-size: 12px;
}
.stars span {
  color: var(--muted);
}
/* Replaces the prototype's fabricated star row. Same vertical rhythm. */
.product-verify {
  margin-top: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}
.product-verify:before {
  content: '◇';
  color: var(--ember-dark);
}
.price {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ember-dark);
  font-variant-numeric: tabular-nums;
}
.price .was {
  margin-left: 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: line-through;
}
.product-copy form,
.product-copy .add-cart {
  margin-top: auto;
}
/* The supplied design's card carries no action — just category, name and
   price. Add-to-cart is kept because removing it would be a real regression on
   a working shop, but it is quiet: an outlined pill that fills on hover, so it
   reads as secondary to the price rather than competing with it. */
.add-cart {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: 0.18s ease;
}
.add-cart:hover {
  color: #fff;
  border-color: var(--ember-dark);
  background: var(--ember-dark);
}
.add-cart[disabled] {
  color: var(--ink-2);
  border-color: var(--line);
  background: var(--paper-2);
  cursor: not-allowed;
}

/* Status and provenance badges. */
.badge-row {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.badge {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.badge.sale {
  color: #fff;
  background: var(--danger);
}
.badge.preorder {
  color: var(--ink);
  background: var(--gold);
}
.badge.backorder {
  color: #fff;
  background: var(--ember-dark);
}
.badge.soldout {
  color: #fff;
  background: #5b6675;
}
.badge.discontinued {
  color: #fff;
  background: #3d4552;
}
.badge.sample {
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid rgba(138, 83, 0, 0.3);
}
.badge.low {
  color: #fff;
  background: var(--warning);
}

/* ========================================================================== */
/* 10. Benefit ribbon                                                          */
/* ========================================================================== */

.benefit-ribbon {
  margin-top: 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  color: var(--ink);
  background: none;
  border-radius: 0;
}
.ribbon-item {
  min-height: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  border-right: 0;
  border-radius: var(--r-md);
  background: var(--paper-2);
  transition: transform 0.2s ease, background 0.2s ease;
}
.ribbon-item:hover {
  transform: translateY(-4px);
  background: var(--paper-3);
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-item:hover {
    transform: none;
  }
}
.ribbon-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ember-tint);
  color: var(--ember-dark);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
}
.ribbon-item strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}
.ribbon-item > span > span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
}

/* ========================================================================== */
/* 10a. Product ticker, stat strip and price bands                             */
/* ========================================================================== */

.ticker {
  margin-top: 32px;
}
.ticker-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ticker-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
}
.ticker-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ticker-pause {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ticker-pause:hover {
  background: var(--paper-2);
}

/* The viewport clips the track and stays hand-scrollable, so the rail is usable
   whether or not the animation is running. */
.ticker-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  /* Fades the rail into the page at both ends rather than cutting a card in
     half against a hard edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.ticker-track {
  display: flex;
  gap: 16px;
  width: max-content;
}
.ticker-dupe {
  display: flex;
  gap: 16px;
  margin-left: 16px;
}
/* The track holds the list twice, so translating by exactly -50% lands on an
   identical frame and the loop has no seam. */
.ticker-track[data-moving='true'] {
  animation-name: tickerScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes tickerScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track[data-moving='true'] {
    animation: none;
  }
}

.ticker-card {
  width: 268px;
  flex: none;
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ticker-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .ticker-card:hover {
    transform: none;
  }
}
.ticker-media {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink-2);
}
.ticker-media img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.ticker-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ticker-copy strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  /* Two lines then ellipsis: titles here run to 70 characters. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ticker-meta {
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ember-dark);
}
.ticker-price em {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--ember-dark);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

/* The catalogue at a glance. Each figure links to what it counts. */
.stat-strip {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  transition: transform 0.2s ease, background 0.2s ease;
}
.stat:hover {
  transform: translateY(-4px);
  background: var(--paper-3);
}
@media (prefers-reduced-motion: reduce) {
  .stat:hover {
    transform: none;
  }
}
.stat strong {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
}
.stat.accent {
  color: #fff;
  background: linear-gradient(150deg, var(--ember), var(--ember-dark));
}
.stat.accent:hover {
  background: linear-gradient(150deg, var(--ember-dark), var(--ember-dark));
}
.stat.accent strong,
.stat.accent span {
  color: #fff;
}

.band-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.band {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.band:hover {
  transform: translateY(-3px);
  border-color: var(--ember-dark);
  background: var(--ember-tint);
}
@media (prefers-reduced-motion: reduce) {
  .band:hover {
    transform: none;
  }
}
.band strong {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.band span {
  font-size: 12px;
  color: var(--ink-2);
}

/* ========================================================================== */
/* 10b. Promo panels, set chips and the why-shop block                         */
/* ========================================================================== */

.promo-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.promo-card {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: #fff;
}
.promo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-card:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(23, 20, 23, 0.72) 100%);
}
.promo-copy {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: block;
}
.promo-copy .eyebrow {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 6px;
}
.promo-copy em {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
}
.promo-card:hover .promo-copy em {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The one place the accent runs as a field. */
.promo-offer {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(150deg, var(--ember), var(--ember-dark));
  box-shadow: var(--shadow-md);
}
.promo-offer:before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.promo-offer > * {
  position: relative;
  z-index: 1;
}
.promo-offer .eyebrow {
  color: #fff;
}
.promo-offer-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}
/* On the accent field a white button reads as the action; the ember-dark fill
   used elsewhere would disappear into the panel. */
.promo-offer .btn.solid {
  width: max-content;
  color: var(--ember-dark);
  background: #fff;
}
.promo-offer .btn.solid:hover {
  color: var(--ember-dark);
  background: var(--paper-2);
}

.sets-section .section-heading {
  margin-bottom: 18px;
}
.set-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.set-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.set-chip span {
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.set-chip:hover {
  background: var(--gold-tint);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .set-chip:hover {
    transform: none;
  }
}

.why-shop {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.why-photo {
  position: relative;
  height: 460px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
}
.why-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-stat {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 24px;
  border-radius: var(--r-md) 0 0 0;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: blur(10px);
  text-align: right;
}
.why-stat strong {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ember-dark);
  line-height: 1.1;
}
.why-stat span {
  font-size: 13px;
  color: var(--ink-2);
}
.why-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.why-copy .section-heading {
  margin: 0;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  transition: transform 0.2s ease;
}
.why-card:hover {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .why-card:hover {
    transform: none;
  }
}
.why-card strong {
  font-size: 14px;
  font-weight: 800;
}
.why-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ========================================================================== */
/* 11. Story and facts                                                         */
/* ========================================================================== */

.story {
  margin-top: 19px;
  display: grid;
  grid-template-columns: 1.02fr 0.92fr 0.96fr;
  gap: 20px;
}
.story-photo {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px rgba(23, 20, 23, 0.08);
}
.story-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.story-copy {
  padding: 17px 12px;
}
.story-label {
  margin: 0;
  color: #2f6cb5;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
}
.story-copy h2 {
  max-width: 380px;
  margin: 1px 0 8px;
  font-family: var(--serif);
  font-size: 38px;
  line-height: 0.88;
  letter-spacing: -0.03em;
}
.flourish {
  width: 180px;
  height: 1px;
  margin: 15px 0 17px;
  background: linear-gradient(90deg, var(--ember-dark), transparent);
}
.story-copy p {
  margin: 0;
  color: #4f5d71;
  font-size: 13px;
  line-height: 1.75;
}
.story-copy .btn {
  margin-top: 18px;
  min-height: 35px;
  padding: 0 17px;
}
.facts {
  padding: 24px 28px;
  align-self: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.fact {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
}
.fact + .fact {
  margin-top: 22px;
}
.fact-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ember-dark);
  font-family: var(--serif);
  font-size: 17px;
  text-align: center;
  line-height: 1;
}
.fact strong {
  display: block;
  font-size: 12px;
}
.fact p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.facts-sources {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.facts-sources a {
  color: var(--ember-dark);
  text-decoration: underline;
}

/* ========================================================================== */
/* 12. Resources, newsletter, footer                                           */
/* ========================================================================== */

.resource-heading {
  margin-top: 27px;
}
.resources-wrap {
  position: relative;
  padding: 0 35px;
}
.resources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}
.resource {
  min-height: 130px;
  padding: 17px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 57px 1fr;
  gap: 16px;
  background: rgba(255, 255, 255, 0.58);
}
.resource-avatar {
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ember-dark);
  background: #fff;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
}
.resource h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
}
.resource p {
  margin: 7px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.resource a {
  display: inline-block;
  margin-top: 8px;
  color: var(--ember-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.resource a:hover {
  text-decoration: underline;
}
.carousel-btn {
  position: absolute;
  top: 42px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ember-dark);
  background: var(--paper);
  cursor: pointer;
}
.carousel-btn:hover {
  border-color: var(--ember-dark);
  background: var(--paper-2);
}
.carousel-btn.left {
  left: -7px;
}
.carousel-btn.right {
  right: -7px;
}

/* Newsletter: a dark rounded panel inset from the page, not a full-bleed band.
   The gold action is the one warm note against the ink. */
.newsletter {
  margin: 56px auto 0;
  width: min(calc(100% - 64px), var(--max));
  border-radius: var(--r-lg);
  color: var(--paper);
  background: linear-gradient(150deg, var(--ink), var(--ink-2));
}
.newsletter .shell {
  width: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 36px 40px;
}
.news-copy {
  display: flex;
  align-items: center;
  gap: 16px;
}
.news-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: rgba(251, 248, 242, 0.1);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 22px;
}
.news-copy strong,
.news-copy h2 {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.news-copy > span > span {
  display: block;
  margin-top: 4px;
  color: rgba(251, 248, 242, 0.68);
  font-size: 13px;
}
.subscribe {
  display: flex;
  /* The status paragraph below takes a full-width basis, so the row has to be
     allowed to wrap — without this it stays on one line and squeezes the email
     field down to its own border radius. */
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 260px;
  max-width: 460px;
}
.subscribe input {
  min-width: 0;
  flex: 1;
  height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(251, 248, 242, 0.18);
  border-radius: var(--r-pill);
  color: var(--paper);
  background: rgba(251, 248, 242, 0.12);
  font-size: 14px;
}
.subscribe input::placeholder {
  /* 0.72 alpha on this ground measures 5.9:1 — a placeholder still has to be
     readable, and the browser default here would not be. */
  color: rgba(251, 248, 242, 0.72);
}
.subscribe button {
  width: auto;
  padding: 0 24px;
  height: 46px;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--gold);
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.subscribe button:hover {
  background: var(--gold-tint);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .subscribe button:hover {
    transform: none;
  }
}
.subscribe-status {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(251, 248, 242, 0.82);
}
.social {
  display: flex;
  gap: 10px;
}
.social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.social a:hover {
  background: rgba(255, 255, 255, 0.14);
}

footer.site-footer {
  padding: 48px 0 12px;
  background: var(--paper);
}
.footer-grid {
  display: grid;
  /* Five blocks: brand, Shop, Help, About and Contact. Payments used to be a
     sixth column and is now the full-width band below — see .footer-payments. */
  grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 1.3fr;
  gap: 28px;
}
.footer-brand .brand {
  display: block;
}
.footer-brand .brand-mark {
  height: 46px;
  width: auto;
  object-fit: contain;
  margin-bottom: 12px;
}
.footer-brand p {
  max-width: 230px;
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}
footer h4 {
  margin: 4px 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
footer li {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}
/*
 * WCAG 2.2 Target Size (Minimum), 2.5.8: an interactive target must be at least
 * 24x24 CSS pixels. The height comes from padding rather than from enlarging
 * the text, so the footer's visual weight is unchanged and the hit area is not.
 * Verified by the axe scan in tests/e2e/accessibility.spec.ts.
 */
footer li a {
  display: inline-block;
  padding: 6px 0;
  min-height: 24px;
}
footer li a:hover {
  color: var(--ember-dark);
  text-decoration: underline;
}
.contact li {
  display: grid;
  grid-template-columns: 14px 1fr;
}
.footer-address {
  margin: 0;
  font-style: normal;
  line-height: 1.5;
}
/* --- Accepted payments -----------------------------------------------------
   A full-width band under the footer columns: heading, the badge row, then the
   reassurance note. All three sit on one line on a wide screen and wrap in that
   order as the viewport narrows, so the note is never squeezed into a column. */
.footer-payments {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.footer-payments h4 {
  margin: 0;
  flex: none;
}

/* Each mark is a 76x32 SVG plate carrying its own white ground and hairline
   border, so the row needs no chrome of its own — only layout.

   `flex-direction: row` is not redundant. `footer ul` sets `column`, and while
   `.payments` wins on specificity for `display`, it inherited the direction it
   never declared — which laid every badge out full-width, one per row. */
.payments {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Must be allowed to shrink, or the row keeps its 412px content width inside a
     362px phone column and pushes the page sideways. Shrinking is what lets
     flex-wrap actually wrap the badges. */
  flex: 0 1 auto;
  min-width: 0;
}
.payment {
  display: block;
  line-height: 0;
}
.payment img {
  display: block;
  width: 76px;
  height: 32px;
  border-radius: 5px;
}
/* Takes the remaining width, but never drops below a readable measure — below
   that it wraps to its own line instead of setting six words per line. */
.payments-note {
  margin: 0;
  flex: 1 1 260px;
  max-width: 62ch;
}

/* On a phone the row wraps to 4 + 1, which reads as an accident rather than a
   layout. A fixed three-column grid gives a deliberate 3 + 2 and keeps the
   badges at full size — shrinking them to fit one row would take the wordmarks
   below 8px. */
@media (max-width: 560px) {
  /* Stack, so the heading sits above the badges the way every other footer
     heading does. Inline, it floated beside a two-row grid and read as a stray
     label rather than a section title. */
  .footer-payments {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .payments {
    display: grid;
    grid-template-columns: repeat(3, 76px);
    justify-content: start;
  }
  .payments-note {
    flex: none;
  }
}
.copyright {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}
.copyright a {
  text-decoration: underline;
}
.disclaimer {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}

/* ========================================================================== */
/* 13. Toast and live regions                                                  */
/* ========================================================================== */

.toast {
  position: fixed;
  z-index: 50;
  right: 20px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  max-width: min(360px, calc(100% - 40px));
  padding: 12px 16px;
  border-radius: 10px;
  color: #fff;
  background: var(--ink);
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(70px);
  transition: 0.23s ease;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: none;
}
.toast.error {
  background: var(--danger);
}

/* ========================================================================== */
/* 14. Page furniture: breadcrumbs, headers, answer blocks                     */
/* ========================================================================== */

.page {
  padding: 22px 0 40px;
}
.breadcrumbs {
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  color: var(--muted);
  font-size: 12px;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumbs li + li:before {
  content: '/';
  color: var(--line-strong);
}
.breadcrumbs a:hover {
  color: var(--ember-dark);
  text-decoration: underline;
}
.breadcrumbs [aria-current='page'] {
  color: var(--ink);
  font-weight: 700;
}

.page-header {
  margin-bottom: 20px;
}
.page-header h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 50px);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.page-header .eyebrow {
  margin: 0 0 6px;
  color: var(--ember-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/*
 * The AEO answer block. Sits directly under the H1 on every category, set,
 * product, guide and policy page: what the thing is, who it is for, and when it
 * was last verified.
 */
.answer-block {
  max-width: 78ch;
  margin: 14px 0 20px;
  padding: 16px 20px;
  border-left: 3px solid var(--ember-dark);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--paper-2);
}
.answer-block p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}
.answer-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}
.answer-meta strong {
  color: var(--ink);
}

.prose {
  max-width: 78ch;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.8;
}
.prose h2 {
  margin: 30px 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.prose h3 {
  margin: 22px 0 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
}
.prose h4 {
  margin: 18px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.prose p {
  margin: 0 0 14px;
}
.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 20px;
}
.prose li {
  margin: 5px 0;
}
.prose a {
  color: var(--ember-dark);
  text-decoration: underline;
}
.prose blockquote {
  margin: 16px 0;
  padding: 2px 16px;
  border-left: 3px solid var(--ember-tint);
  color: var(--muted);
  font-style: italic;
}
.prose code {
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--paper-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.prose hr {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
/* Wide tables scroll inside their own container so the page body never does. */
.table-scroll {
  margin: 0 0 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table-scroll th,
.table-scroll td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.table-scroll th {
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.table-scroll tr:last-child td {
  border-bottom: 0;
}

/* ========================================================================== */
/* 15. Listing pages: layout, filters, pagination                              */
/* ========================================================================== */

.listing {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 26px;
  align-items: start;
}
/* Listing sidebar. The previous system drew this as a white card with a 1px
   border; this one is a tinted panel with no border at all, which is how every
   other grouped surface in the redesign reads. */
.filters {
  position: sticky;
  top: 112px;
  padding: 22px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.filters h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.filter-group {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.filter-group:last-of-type {
  border-bottom: 0;
}
.filter-group legend {
  padding: 0;
  margin-bottom: 10px;
  color: var(--ember-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-inline: -10px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.filter-option:hover {
  background: var(--paper-3);
}
.filter-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--ember-dark);
  flex-shrink: 0;
}
.filter-option .n {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.listing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.result-count {
  color: var(--ink-2);
  font-size: 13px;
}
.result-count strong {
  color: var(--ink);
}
.sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
/* The chevron is drawn in the current ink. It used to be a data URI hardcoded
   to #10213a — the previous palette's navy, left behind after the reskin. */
.sort-control select,
.field select {
  min-height: 42px;
  padding: 0 34px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%23171417' d='M0 0h10L5 7z'/%3E%3C/svg%3E")
    right 14px center / 10px no-repeat var(--paper);
  appearance: none;
  font-size: 13px;
  cursor: pointer;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--paper-2);
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.chip:hover {
  background: var(--paper-3);
}
.chip:hover {
  background: var(--ember-tint);
}

.pagination {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pagination a,
.pagination span {
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 12px;
  font-weight: 700;
}
.pagination a:hover {
  border-color: var(--ember-dark);
  color: var(--ember-dark);
  background: var(--paper-2);
}
.pagination [aria-current='page'] {
  color: #fff;
  border-color: var(--ember-dark);
  background: var(--ember-dark);
}
.pagination .gap {
  border: 0;
  background: transparent;
  color: var(--muted);
}
.pagination-summary {
  margin-top: 10px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* ========================================================================== */
/* 16. Empty, loading and error states                                         */
/* ========================================================================== */

.empty-state {
  padding: 46px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  text-align: center;
}
.empty-state h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 25px;
  color: var(--ink);
}
.empty-state p {
  max-width: 52ch;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-2) 50%, var(--paper-2) 75%) 0 0 / 400% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -400% 0;
  }
}
.skeleton-card {
  height: 320px;
}
.skeleton-line {
  height: 12px;
  margin-bottom: 8px;
}

.notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid;
  font-size: 13px;
  line-height: 1.65;
}
.notice.info {
  border-color: var(--ember-dark);
  color: var(--ink);
  background: var(--paper-2);
}
.notice.success {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-bg);
}
.notice.warning {
  border-color: var(--warning);
  color: var(--warning);
  background: var(--warning-bg);
}
.notice.error {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}
.notice a {
  color: inherit;
  text-decoration: underline;
}
.notice ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* ========================================================================== */
/* 17. Product detail                                                          */
/* ========================================================================== */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 34px;
  align-items: start;
}
.pdp-gallery {
  position: sticky;
  top: 112px;
}
.pdp-main-image {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.pdp-main-image img {
  width: 82%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(23, 20, 23, 0.18));
}
.pdp-thumbs {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pdp-thumb {
  width: 66px;
  height: 88px;
  padding: 4px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  cursor: pointer;
}
.pdp-thumb[aria-current='true'] {
  border-color: var(--ember-dark);
  box-shadow: 0 0 0 1px var(--ember-dark);
}
.pdp-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.asset-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--paper);
  font-size: 12px;
  line-height: 1.6;
}
.asset-note a {
  color: var(--ember-dark);
  text-decoration: underline;
}

.pdp-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.pdp-subtitle {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.pdp-subtitle a {
  color: var(--ember-dark);
  text-decoration: underline;
}
.pdp-price-row {
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.pdp-price {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pdp-compare {
  color: var(--muted);
  font-size: 16px;
  text-decoration: line-through;
}
.availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}
.availability:before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.availability.in-stock {
  color: var(--success);
}
.availability.low {
  color: var(--warning);
}
.availability.out {
  color: var(--muted);
}
.availability.preorder {
  color: var(--ember-dark);
}

.buy-box {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.qty button {
  width: 38px;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.qty button:hover {
  background: var(--paper-2);
}
.qty button[disabled] {
  color: var(--ink-2);
  cursor: not-allowed;
}
.qty input {
  width: 46px;
  min-height: 46px;
  border: 0;
  border-inline: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.buy-row .btn.solid {
  flex: 1;
  min-width: 180px;
}

.spec-table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: 13px;
}
.spec-table th,
.spec-table td {
  padding: 8px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.spec-table th {
  width: 40%;
  color: var(--muted);
  font-weight: 600;
}
.spec-table td {
  color: var(--ink);
  font-weight: 600;
}
.spec-table a {
  color: var(--ember-dark);
  text-decoration: underline;
}

.trust-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
/* Not a grid. The list item holds a sentence with a trailing link, and a
   two-column grid made that link its own grid item — it landed in the 18px
   marker column and wrapped to one word per line on every product page. The
   marker is positioned instead, so the text and its link stay one flow. */
.trust-list li {
  position: relative;
  display: block;
  padding-left: 26px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.trust-list li:before {
  content: '◇';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ember-dark);
}
.trust-list a {
  color: var(--ember-dark);
  text-decoration: underline;
}

.reviews-empty {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* ========================================================================== */
/* 18. Forms                                                                   */
/* ========================================================================== */

.form-grid {
  display: grid;
  gap: 14px;
}
.form-grid.two {
  grid-template-columns: 1fr 1fr;
}
.field {
  display: grid;
  gap: 5px;
}
.field label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field .hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.field input,
.field textarea,
.field select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
}
.field input:hover,
.field textarea:hover {
  border-color: var(--line-strong);
}
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'],
.field select[aria-invalid='true'] {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}
.field-error:before {
  content: '!';
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--danger);
  font-size: 12px;
}
.checkbox-field {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
}
.checkbox-field input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ember-dark);
}
.form-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.form-card h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 23px;
  color: var(--ink);
}
.form-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.auth-shell {
  max-width: 440px;
  margin: 0 auto;
}

/* ========================================================================== */
/* 19. Cart and checkout                                                       */
/* ========================================================================== */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
}
.cart-lines {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}
.cart-line {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.cart-line:last-child {
  border-bottom: 0;
}
.cart-line-media {
  width: 84px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--paper-2);
  overflow: hidden;
}
.cart-line-media img {
  max-width: 88%;
  max-height: 92%;
  object-fit: contain;
}
.cart-line h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.1;
}
.cart-line h3 a:hover {
  color: var(--ember-dark);
}
.cart-line-meta {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.cart-line-controls {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cart-line-price {
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.link-button {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover {
  color: var(--danger);
}

.summary {
  position: sticky;
  top: 112px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.summary h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}
.summary-row.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  font-weight: 800;
}
.summary-row .value {
  font-variant-numeric: tabular-nums;
}
.summary-row.discount .value {
  color: var(--success);
}
.free-shipping-meter {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.6;
}
.meter-track {
  height: 5px;
  margin-top: 7px;
  border-radius: 8px;
  background: var(--ember-tint);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: 8px;
  background: var(--ember-dark);
  transition: width 0.25s ease;
}
.promo-form {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}
.promo-form input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  text-transform: uppercase;
}

.checkout-steps {
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  counter-reset: step;
}
.checkout-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.checkout-steps li:before {
  counter-increment: step;
  content: counter(step);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--line-strong);
  font-size: 12px;
}
.checkout-steps li[aria-current='step'] {
  border-color: var(--ember-dark);
  color: var(--ink);
  background: var(--paper-2);
}
.checkout-steps li[aria-current='step']:before {
  background: var(--ember-dark);
}

.order-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.order-line:last-child {
  border-bottom: 0;
}
.order-line-media {
  width: 48px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--paper-2);
  overflow: hidden;
}
.order-line-media img {
  max-width: 90%;
  max-height: 92%;
  object-fit: contain;
}

/* ========================================================================== */
/* 20. Account and orders                                                      */
/* ========================================================================== */

.account-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 26px;
  align-items: start;
}
.account-nav {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.account-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-nav a {
  display: block;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.account-nav a:hover {
  background: var(--paper-2);
}
.account-nav a[aria-current='page'] {
  color: #fff;
  background: var(--ember-dark);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.data-table th {
  background: var(--paper-2);
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.data-table a {
  color: var(--ember-dark);
  text-decoration: underline;
}
.status-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.status-pill.pending {
  color: var(--warning);
  background: var(--warning-bg);
}
.status-pill.paid,
.status-pill.processing {
  color: var(--ink);
  background: var(--paper-2);
}
.status-pill.shipped,
.status-pill.delivered {
  color: var(--success);
  background: var(--success-bg);
}
.status-pill.cancelled,
.status-pill.refunded,
.status-pill.partially_refunded {
  color: var(--danger);
  background: var(--danger-bg);
}

.timeline {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
  border-left: 2px solid var(--line);
}
.timeline li {
  position: relative;
  padding: 0 0 16px 14px;
  font-size: 13px;
}
.timeline li:before {
  content: '';
  position: absolute;
  left: -25px;
  top: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--ember-dark);
}
.timeline time {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* ========================================================================== */
/* 21. Search                                                                  */
/* ========================================================================== */

.search-panel {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: 90px 20px 20px;
  background: rgba(23, 20, 23, 0.45);
  backdrop-filter: blur(3px);
}
.search-panel[hidden] {
  display: none;
}
.search-dialog {
  width: min(620px, 100%);
  padding: 16px;
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(23, 20, 23, 0.35);
}
.search-dialog form {
  display: flex;
  gap: 8px;
}
.search-dialog input {
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
}
.suggestions {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
}
.suggestions li a {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
}
.suggestions li a:hover,
.suggestions li a:focus-visible,
.suggestions li[data-active='true'] a {
  background: var(--paper-2);
}
.suggestion-media {
  width: 42px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--paper-2);
  overflow: hidden;
}
.suggestion-media img {
  max-width: 92%;
  max-height: 94%;
  object-fit: contain;
}
.suggestion-title {
  font-size: 13px;
  font-weight: 700;
}
.suggestion-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.suggestion-price {
  font-size: 13px;
  font-weight: 800;
}
.search-hint {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

/* ========================================================================== */
/* 22. Guides, sets, condition guide                                           */
/* ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.content-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: 0.2s ease;
}
.content-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.content-card h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.1;
  color: var(--ink);
}
.content-card p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}
.content-card .meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 34px;
  align-items: start;
}
.guide-toc {
  position: sticky;
  top: 112px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.guide-toc h2 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.guide-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-toc li {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
/* WCAG 2.2 target size (2.5.8), same reasoning as the footer links: the height
   comes from padding so the 10px type and the panel's density are unchanged. */
.guide-toc li a {
  display: inline-block;
  padding: 6px 0;
  min-height: 24px;
}
.guide-toc li.level-3 {
  padding-left: 12px;
}
.guide-toc a:hover {
  color: var(--ember-dark);
  text-decoration: underline;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 18px;
  padding: 12px 0;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.byline strong {
  color: var(--ink);
}
.citations {
  margin: 30px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.citations h2 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.citations ol {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.citations a {
  color: var(--ember-dark);
  text-decoration: underline;
}

.condition-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.condition-row:last-child {
  border-bottom: 0;
}
.condition-key {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  text-align: center;
}
.condition-key .code {
  display: block;
  color: var(--ember-dark);
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
}
.condition-key .name {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.condition-photo-missing {
  margin-top: 10px;
  padding: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.faq-list {
  max-width: 82ch;
}
.faq-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.faq-item h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
  line-height: 1.15;
}
.faq-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
}

/* ========================================================================== */
/* 23. Consent banner                                                          */
/* ========================================================================== */

.consent {
  position: fixed;
  z-index: 60;
  left: 20px;
  right: auto;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  /* `100%` not `100vw`: the latter includes the scrollbar and was enough to
     push the page 15–17px sideways on a phone. */
  width: min(420px, calc(100% - 40px));
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(23, 20, 23, 0.22);
}
@media (max-width: 680px) {
  .consent {
    left: 12px;
    right: 12px;
    width: auto;
  }
}
.consent h2 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.consent p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}
.consent p a {
  color: var(--ember-dark);
  text-decoration: underline;
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ========================================================================== */
/* 24. Responsive                                                              */
/* ========================================================================== */

@media (max-width: 1180px) {
  .nav {
    grid-template-columns: 240px 1fr auto;
  }
  .main-nav {
    gap: 18px;
  }
  .products,
  .products.grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .categories {
    grid-template-columns: repeat(4, 1fr);
  }
  .story {
    grid-template-columns: 1fr 1fr;
  }
  .facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .fact + .fact {
    margin: 0;
  }
  .facts-sources {
    grid-column: 1 / -1;
  }
  .footer-grid {
    grid-template-columns: 1.3fr repeat(4, 1fr);
  }
  .listing,
  .cart-layout,
  .pdp,
  .guide-layout,
  .account-layout {
    grid-template-columns: 1fr;
  }
  .filters,
  .summary,
  .guide-toc,
  .pdp-gallery {
    position: static;
  }
}

@media (max-width: 920px) {
  .nav {
    grid-template-columns: 1fr auto;
  }
  .main-nav {
    display: none;
  }
  .hamburger {
    display: grid;
  }
  .mobile-nav {
    position: fixed;
    z-index: 29;
    inset: auto;
    overflow-y: auto;
    padding: 18px 30px 25px;
    display: grid;
    gap: 3px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-150%);
    transition: 0.23s ease;
  }
  .mobile-nav.open {
    transform: none;
  }
  .mobile-nav a {
    padding: 13px 11px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
  }
  .benefit-ribbon {
    grid-template-columns: 1fr 1fr;
  }
  .ribbon-item:nth-child(2) {
    border-right: 0;
  }
  .ribbon-item:nth-child(-n + 2) {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .story {
    grid-template-columns: 1fr;
  }
  .story-photo {
    min-height: 360px;
  }
  .facts {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .resources {
    grid-template-columns: 1fr 1fr;
  }
  .newsletter .shell {
    padding: 20px 0;
    grid-template-columns: 1fr 1.4fr;
  }
  .footer-grid {
    grid-template-columns: 1.3fr repeat(3, 1fr);
  }
  .form-grid.two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .shell {
    width: min(calc(100% - 28px), var(--max));
  }
  .utility .shell {
    grid-template-columns: 1fr auto;
  }
  .nav {
    /* Deliberately no fixed height. It used to be 76px, which capped the row
       and let the brand's second strapline line spill through the header's
       bottom border. The row sizes to its content. */
    min-height: 68px;
  }
  .brand-copy strong {
    font-size: 21px;
  }
  .crest {
    width: 42px;
    height: 42px;
    font-size: 21px;
  }
  /*
   * The prototype dropped two icon buttons at this width so the header row fits.
   * Only the wishlist is dropped here — it is reachable from the mobile menu,
   * whereas searching is a primary task on a phone and stays.
   */
  .wishlist-button {
    display: none;
  }
  .brand-copy strong {
    overflow-wrap: anywhere;
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero-benefits {
    grid-template-columns: 1fr 1fr;
  }
  .hero-benefit {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .hero-benefit:nth-child(2) {
    border-right: 0;
  }
  .hero-benefit:nth-child(n + 3) {
    border-bottom: 0;
  }
  .categories {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .category-image {
    width: 92px;
    height: 92px;
  }
  .section-heading {
    justify-content: flex-start;
  }
  .section-heading:before {
    display: none;
  }
  .section-heading h2 {
    padding: 0;
  }
  .products,
  .products.grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .benefit-ribbon {
    grid-template-columns: 1fr;
  }
  .ribbon-item,
  .ribbon-item:nth-child(2) {
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0;
  }
  .ribbon-item:last-child {
    border-bottom: 0;
  }
  .resources {
    grid-template-columns: 1fr;
  }
  .newsletter .shell {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .subscribe button {
    width: 105px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .copyright {
    flex-direction: column;
  }
  .carousel-btn {
    display: none;
  }
  .resources-wrap {
    padding: 0;
  }
  .cart-line {
    grid-template-columns: 64px 1fr;
  }
  .cart-line-price {
    grid-column: 2;
    text-align: left;
  }
  .condition-row {
    grid-template-columns: 1fr;
  }
  .search-panel {
    padding-top: 60px;
  }
}

@media (max-width: 430px) {
  .categories {
    grid-template-columns: 1fr 1fr;
  }
  .products,
  .products.grid-4 {
    grid-template-columns: 1fr;
  }
  .facts {
    padding: 20px;
  }
  .story-copy h2 {
    font-size: 34px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .buy-row .btn.solid {
    min-width: 100%;
  }
}

/* Touch devices only: raise interactive targets to 44x44 without changing the
   approved desktop density. */
@media (pointer: coarse) {
  .icon-button,
  .carousel-btn,
  .heart {
    min-width: 44px;
    min-height: 44px;
  }
  .heart {
    width: 44px;
    height: 44px;
  }
  .add-cart,
  .link-button,
  .btn.small {
    min-height: 44px;
  }
  .account-nav a {
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  footer li a {
    min-height: 44px;
    padding: 14px 0;
  }
  .breadcrumbs a,
  .view-all,
  .resource a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
}

/* ========================================================================== */
/* 25. User preferences                                                        */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .product:hover,
  .btn:hover,
  .content-card:hover {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #465061;
    --line: #9aa8b8;
  }
  .answer-block,
  .notice,
  .filters,
  .summary,
  .content-card,
  .form-card {
    border: 1px solid var(--ink);
  }
  .btn,
  .add-cart,
  .chip {
    border-width: 2px;
  }
  a {
    text-decoration-thickness: 2px;
  }
  .copyright,
  .disclaimer {
    color: #2c3644;
  }
}

@media print {
  .utility,
  header.site-header,
  .mobile-nav,
  .newsletter,
  .consent,
  .toast,
  .filters,
  .carousel-btn,
  .add-cart {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .listing,
  .pdp,
  .cart-layout,
  .guide-layout {
    grid-template-columns: 1fr;
  }
}

/* Resource track scrolls horizontally when it overflows; the arrow controls
   drive it. All cards remain in the DOM and linked at every width. */
.resources {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.resources > .resource {
  scroll-snap-align: start;
}


/* ========================================================================== */
/* 20. Responsive rules for the redesigned homepage                            */
/* ========================================================================== */

@media (max-width: 1180px) {
  .hero-band,
  .newsletter {
    width: calc(100% - 40px);
  }
  .hero-copy {
    padding: 0 32px 24px;
  }
  .hero-dots {
    right: 32px;
  }
  .hero-trust {
    left: 32px;
  }
  .categories {
    grid-template-columns: repeat(4, 1fr);
  }
  .benefit-ribbon {
    grid-template-columns: repeat(3, 1fr);
  }
  .products.grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .promo-grid {
    grid-template-columns: 1fr;
  }
  .promo-offer {
    min-height: 220px;
  }
  .why-shop {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 920px) {
  .hero {
    height: 440px;
  }
  .newsletter .shell {
    padding: 28px 24px;
  }
}

@media (max-width: 760px) {
  .utility .shell {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 6px;
  }
  .utility .right {
    justify-content: center;
  }
  .nav {
    grid-template-columns: auto auto;
  }
  .categories {
    grid-template-columns: repeat(2, 1fr);
  }
  .benefit-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
  .products.grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-headline {
    font-size: 24px;
  }
  .hero-arrow {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 430px) {
  .hero-band,
  .newsletter {
    width: calc(100% - 24px);
  }
  .hero-copy {
    padding: 0 20px 22px;
  }
  .hero-trust {
    left: 20px;
    right: 20px;
  }
  .hero-dots {
    right: 20px;
  }
  .categories,
  .benefit-ribbon,
  .products.grid-5,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero-arrow {
    display: none;
  }
}

/* Touch: every control in the new chrome clears 44px. */
@media (pointer: coarse) {
  .hero-arrow,
  .hero-pause,
  .heart {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Responsive rules for the ticker, stat strip and price bands. */
@media (max-width: 1180px) {
  .stat-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .band-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .products.grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .stat-strip,
  .band-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .ticker-card {
    width: 232px;
  }
  .ticker-head h2 {
    font-size: 21px;
  }
}
@media (max-width: 430px) {
  .stat-strip,
  .band-row {
    grid-template-columns: 1fr;
  }
}
@media (pointer: coarse) {
  .ticker-pause {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ========================================================================== */
/* 21. Narrow-viewport corrections                                             */
/* ========================================================================== */
/*
 * Measured with scripts/.mobile.mjs across 320/360/390/412/480/600/768 on
 * eleven templates. Each rule below fixes something that audit reported, not
 * something that looked wrong in a screenshot.
 */

@media (max-width: 600px) {
  /* The header ran 2px past the viewport at 320px: the brand lockup plus four
     actions did not fit in `100% - 28px`. The cart drops its pill and matches
     the other two icon buttons, keeping its glyph and its count badge. It is
     the only control here that carried horizontal padding.

     Note the cart has no text label to hide — its content is a glyph and the
     badge — so squeezing the padding without fixing a size collapsed it to
     28x18. It gets an explicit 40x40 like its neighbours. */
  .cart-button {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    display: grid;
    place-items: center;
  }
  .brand-mark {
    height: 42px;
  }
  .brand-copy small {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .nav {
    gap: 12px;
    min-height: 68px;
  }
}

@media (max-width: 380px) {
  .shell {
    width: min(calc(100% - 20px), var(--max));
  }
  .brand-copy small {
    /* Below this the strapline wraps to two lines and pushes the header taller
       than the sticky offset the mobile menu is positioned against. */
    display: none;
  }
}

/*
 * WCAG 2.2 Target Size (Minimum), 2.5.8. The utility bar and the breadcrumbs
 * are navigation rather than prose, so the inline exception does not cover
 * them: they were rendering at 17-19px tall. Height comes from padding, so the
 * type size and the visual density of both are unchanged.
 */
.utility a,
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.breadcrumbs {
  line-height: 1.6;
}

/* The target for a filter is the whole `.filter-option` label, which wraps the
   input and is well over 24px tall and full-width — that is what WCAG 2.5.8
   measures, and what axe reports on. The box itself is still enlarged, because
   a pointer that lands on it rather than the label should not feel fussy, and
   it goes to 24px outright on a touch screen. */
.filter-option input {
  width: 20px;
  height: 20px;
}
@media (pointer: coarse) {
  .filter-option input {
    width: 24px;
    height: 24px;
  }
}

/* Two rules were still under the 12px floor set for the rest of the site. */
.category-count {
  font-size: 12px;
}
.btn.small {
  font-size: 12px;
}

/*
 * The rest of WCAG 2.5.8. Each of these was measured at 360px and reported by
 * scripts/.mobile.mjs; all of them are navigation rather than prose, so the
 * inline exception does not apply. Height comes from padding in every case, so
 * no type size and no visual density changes.
 */
.copyright span a,
.pdp-subtitle a,
.spec-table td a,
.trust-list li a,
.answer-meta a,
.product-copy h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Last of the sub-12px text. */
.brand-copy small {
  font-size: 12px;
}

/* A list whose items are links is navigation, not prose, so 2.5.8 applies to
   it. `.prose` covers the editorial pages, where a link inside a paragraph is
   genuinely inline and exempt — that case is left alone. */
.prose ul > li > a:only-child,
.page ul > li > a:only-child,
.content-card ul > li > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
address a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ========================================================================== */
/* 22. Phone layout                                                            */
/* ========================================================================== */
/*
 * The previous design thinned its rows out at narrow widths by hiding
 * elements — the second bestseller onward, the third category onward, half the
 * benefits, the contact column. Those rules are gone: this design shows ten
 * bestsellers and a live department rail, and hiding them removed real products
 * and a support address from every phone.
 *
 * Instead the grids go two-up. A single column made the homepage 8,348px tall
 * on a 390px screen; two columns halve that and a product card at ~170px still
 * reads comfortably.
 */
@media (max-width: 430px) {
  .categories,
  .benefit-ribbon,
  .products,
  .products.grid-4,
  .products.grid-5,
  .stat-strip,
  .band-row,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  /* Two-up cards are narrow, so the copy tightens rather than the image. */
  .product-copy {
    padding: 12px;
  }
  .product-copy h3 {
    font-size: 12px;
  }
  .price {
    font-size: 15px;
  }
  .add-cart {
    min-height: 36px;
    font-size: 12px;
  }
  .stat {
    padding: 16px;
  }
  .stat strong {
    font-size: 24px;
  }
  .band {
    padding: 14px 16px;
  }
}

/* Fixed heights written for a desktop column, trimmed for a phone. Nothing is
   removed — these only stop a 460px photograph and three 280px panels from
   eating four screens of scroll on the way past. */
@media (max-width: 760px) {
  .why-photo {
    height: 300px;
  }
  .promo-card {
    height: 210px;
  }
  .promo-offer {
    padding: 26px;
  }
  .promo-offer-title {
    font-size: 22px;
  }
  .hero {
    height: 400px;
  }
}

/* ========================================================================== */
/* 23. The utility bar on a phone                                              */
/* ========================================================================== */
/*
 * This bar used to lose its centre line and its first link below 680px — a
 * leftover from the previous design, which thinned the row out by hiding parts
 * of it. Nothing is hidden now. It becomes a single centred row that wraps,
 * with the promise line on its own line under the shipping note and the account
 * links beneath, and the type drops a step so three pieces of content fit in
 * two tidy rows rather than three loose ones.
 */
@media (max-width: 760px) {
  .utility {
    font-size: 12px;
  }
  .utility .shell {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 4px;
    padding-block: 7px;
  }
  .utility .mid {
    font-size: 12px;
    order: 2;
  }
  .utility .right {
    order: 3;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  /* The bar is not the place for a long sentence on a 390px screen; the promise
     it carries is repeated in full on the authenticity page it links to. */
  .utility .mid a,
  .utility .mid span {
    display: block;
    max-width: 34ch;
  }
}

@media (max-width: 430px) {
  .utility .right {
    gap: 10px;
  }
}

/* The discount badge used to be dropped below 920px because it collided with
   the headline. It is a link to the sale and the deepest saving in the shop, so
   it moves and shrinks instead of disappearing: top-right of the hero, clear of
   the copy, which now ends further down. */
@media (max-width: 920px) {
  .hero-badge {
    display: flex;
    top: 16px;
    right: 16px;
    width: 80px;
    height: 80px;
    font-size: 11px;
  }
  .hero-badge strong {
    font-size: 19px;
  }
  /* An earlier 920px rule parked the trust panel at the bottom (when the
     badge was hidden). With the badge restored at the top, the panel has to
     come back up too — otherwise it sits on the headline and the CTAs. */
  .hero-trust {
    top: 16px;
    bottom: auto;
    left: 16px;
    right: 104px;
  }
  .hero-dots {
    bottom: 16px;
    right: 16px;
  }
  .hero-copy {
    padding-top: 96px;
    padding-bottom: 52px;
  }
}
@media (max-width: 430px) {
  .hero-badge {
    width: 72px;
    height: 72px;
    top: 12px;
    right: 12px;
    font-size: 11px;
  }
  .hero-badge strong {
    font-size: 18px;
  }
  .hero-trust {
    top: 12px;
    bottom: auto;
    right: 88px;
    left: 12px;
    padding: 10px 14px;
  }
  .hero-copy {
    padding: 88px 16px 48px;
  }
}

/* The newsletter's contact row, kept on every width. */
@media (max-width: 920px) {
  .social {
    display: flex;
    justify-content: center;
    flex-basis: 100%;
  }
}

/* A grid item's default `min-width: auto` refuses to shrink below its content,
   so a two-column footer at 320px was pushed 14px past the viewport by its
   longest link. Every grid child that holds text needs to be allowed to
   shrink. */
.footer-grid > div,
.why-grid > *,
.stat-strip > *,
.band-row > *,
.categories > *,
.benefit-ribbon > * {
  min-width: 0;
}
.footer-grid a,
.footer-grid p,
.contact li {
  overflow-wrap: anywhere;
}

/* ========================================================================== */
/* 24. The mobile menu, anchored to the header                                 */
/* ========================================================================== */
/*
 * This panel was `position: fixed` with a hardcoded `top` — 135px, then 119px
 * at narrower widths. Neither matched: the header's real bottom edge sits at
 * 171px on a 390px screen once the utility bar wraps, so the menu opened over
 * the header it belongs to. Every change to the header's height moved the
 * mismatch again.
 *
 * The panel is already a descendant of the sticky header, so it can simply be
 * absolutely positioned against it: `top: 100%` is the header's bottom edge, by
 * definition, whatever that turns out to be.
 */
.mobile-nav {
  position: absolute;
  inset: auto;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  max-height: 72dvh;
  overflow-y: auto;
}

/* The strapline wrapped to two lines below ~430px and pushed out of the header
   band. It is kept — it is the only place the shop says what it sells — and
   made to fit by dropping the tracking rather than by being hidden. */
@media (max-width: 500px) {
  .brand-copy small {
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    /* Wraps rather than running under the icon buttons. A two-line strapline
       makes the header taller, which no longer matters: the menu is anchored
       to `top: 100%` of the header rather than to a fixed offset. */
    white-space: normal;
    line-height: 1.35;
  }
}

/* The brand lockup is the flexible cell in the header row; without this the
   strapline sets its width and pushes the action buttons off the edge. */
.brand,
.brand-copy {
  min-width: 0;
}
.brand-copy small {
  overflow-wrap: anywhere;
}

/* ========================================================================== */
/* 25. The listing on a phone                                                  */
/* ========================================================================== */
/*
 * The filter panel is 1,220px tall on a 390px screen. Rendered above the grid,
 * as the desktop source order has it, the shop opened on a wall of checkboxes
 * and the first product sat two screens down.
 *
 * The panel keeps its place in the DOM — it is a form, and it belongs before
 * the results it controls for anyone reading the page linearly — but the grid
 * reorders it below on a phone, and the toolbar carries an anchor back to it.
 */
.refine-jump {
  display: none;
}

@media (max-width: 920px) {
  .listing {
    grid-template-columns: 1fr;
  }
  .filters {
    order: 2;
    position: static;
    margin-top: 32px;
    /* Cleared by the sticky header when reached through the Refine anchor. */
    scroll-margin-top: 96px;
  }
  .listing > div:not(.filters) {
    order: 1;
  }
  .refine-jump {
    display: inline-flex;
  }
}

/* A compact pill in the results toolbar, phone only. */
.refine-jump {
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.refine-jump:hover {
  background: var(--paper-2);
}
.refine-jump .n {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--ember-dark);
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* `fieldset` carries a browser default border and padding that this system
   never styled away, so every filter group was drawn inside a grey box with the
   legend notched into its top edge. */
.filter-group {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 16px;
  margin: 0 0 18px;
  min-width: 0;
}
.filter-group legend {
  float: none;
  width: auto;
}

/* The brand lockup is a <span>, so a block-level strapline inside it did not
   contribute to the grid row's height and spilled through the header's bottom
   border. */
.brand-copy {
  display: block;
}

/* ========================================================================== */
/* 26. Checkout payment chooser                                                */
/* ========================================================================== */
/*
 * A radio group that reads as a set of cards. The native radio stays in the
 * markup — it is what makes arrow-key selection and the group semantics work —
 * but it is drawn as a ring on the left of each row rather than hidden, so the
 * control that has focus is the control that looks selected.
 */
.pay-choice {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}
.pay-option {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pay-option:hover {
  border-color: var(--ember-dark);
}
.pay-option.is-selected {
  border-color: var(--ember-dark);
  background: var(--ember-tint);
}
.pay-option input[type='radio'] {
  width: 18px;
  height: 18px;
  accent-color: var(--ember-dark);
  margin: 0;
}
/* The badge is decorative here — the label beside it carries the name. */
.pay-option img {
  display: block;
  width: 76px;
  height: 32px;
  border-radius: 5px;
}
.pay-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pay-option-copy strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.pay-option-copy small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.pay-option:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/*
 * The badge stays at every width.
 *
 * It used to be dropped below 420px on the assumption that the row could not
 * hold both it and the copy — it can. At 360px the radio, the badge and the
 * padding take 146px, leaving 214px for the text. Hiding it meant the checkout
 * showed five unbranded radio rows on a phone while the footer right below
 * carried the logos, which is precisely where a shopper looks to check the shop
 * takes their method.
 */
@media (max-width: 420px) {
  .pay-option {
    gap: 10px;
    padding: 11px 12px;
  }
  .pay-option-copy small {
    font-size: 11.5px;
  }
}

/* ========================================================================== */
/* 27. Checkout — stepped order form                                           */
/* ========================================================================== */
/*
 * The form was one long card with <h2> rules between sections, which read as a
 * single undifferentiated wall on a page where people are already anxious. It
 * is now three panels, numbered.
 *
 * The numbering is not decoration: checkout genuinely is an ordered sequence,
 * and it is an <ol> so that order is in the markup rather than only in the
 * styling. The number becomes a tick when that step's required fields are
 * filled — a live read of the form, not a claim about validity. Submission is
 * never gated on it; the server decides.
 */
.ck-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ck-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: none;
}

.ck-step {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.ck-step:focus-within {
  border-color: var(--ember-dark);
}

.ck-step-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

/* The step marker. Filled once the step is satisfied, so progress down the page
   is visible at a glance without a separate progress bar competing with it. */
.ck-step-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ember-dark);
  background: var(--ember-tint);
  border: 1px solid rgba(184, 64, 29, 0.28);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ck-step.is-done .ck-step-num {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.ck-step-title {
  display: block;
  min-width: 0;
}
.ck-step-title h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
}
.ck-step-title small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.ck-step-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The address block and the payment chooser bring their own spacing; this stops
   it doubling with the flex gap above. */
.ck-step-body > .form-grid,
.ck-step-body > .pay-choice {
  margin: 0;
}

/* Order note and marketing opt-in: real fields, but not a step of their own. */
.ck-extras {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
}

.ck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* The summary tracks the form on a tall page rather than scrolling away at the
   first step. `align-items: start` on .cart-layout is what lets it stick. */
@media (min-width: 981px) {
  .checkout-page .summary {
    position: sticky;
    top: 96px;
  }
}

@media (max-width: 560px) {
  .ck-step-head {
    padding: 13px 14px;
    gap: 11px;
  }
  .ck-step-title h2 {
    font-size: 19px;
  }
  .ck-step-body {
    padding: 14px;
  }
  .ck-extras {
    padding: 14px;
  }
  .ck-actions .btn {
    width: 100%;
  }
}

/* --- Where to send an off-site payment ------------------------------------
   The substance of a manual method: the actual address or handle, set apart
   from the surrounding copy and in a mono face so a character-by-character
   comparison against a wallet is possible. `user-select: all` so one click
   selects the whole value — a partially-copied crypto address sends money
   nowhere. */
.pay-details {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--ember-dark);
  border-radius: var(--r-sm);
  background: var(--ember-tint);
}
.pay-details-head {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember-dark);
}
.pay-details-value {
  margin: 0;
}
.pay-details-value code {
  display: block;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  user-select: all;
}
.pay-details-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* The shared "instructions will follow" line under each payment option. Quieter
   than the method's own blurb so five repetitions do not shout. */
.pay-option-note {
  color: var(--ember-dark);
  font-size: 11.5px;
  line-height: 1.45;
}