/* ==========================================================================
   mumzmall — style.css
   "The nursery notebook": warm eggshell paper, classic book-serif
   headlines (Libre Caslon Text), terracotta + sage + honey accents,
   soft warm shadows on hover. Dark mode ("the quiet nursery") via
   [data-theme="dark"] on <html>, set before first paint by the inline
   script in each <head>.
   All colour values come from docs/identity.md — do not invent hexes here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand accent — terracotta; sage and honey are the detail colours.
     --accent        : terracotta, for marks, links, badges, icons.
     --accent-strong : deeper terracotta used behind white text so that
                       button and link text clears WCAG AA (4.5:1). Never swap. */
  --accent: #b85c38;
  --accent-strong: #93482a;
  --accent-hover: #c96f4e;
  --accent-soft: rgba(184, 92, 56, 0.1);
  --sage: #7c8b6f;
  --honey: #d9a441;
  --on-accent: #ffffff;

  /* Surfaces & text */
  --bg: #f7f3ec;
  --bg-subtle: #efe7da;
  --surface: #fffcf6;
  --surface-2: #f4efe5;
  --border: #ded3c1;
  --border-strong: #cbbca6;
  --text-primary: #2b2118;
  --text-secondary: #6b5d4f;
  --text-muted: #7a6a5b; /* AA (4.5:1+) on --surface and --bg-subtle at small sizes */

  /* Category tints — the background of a product tile when we have no image.
     Soft enough that --text-secondary clears 4.5:1 on every one of them. */
  --tint-sleep: #e9e6f0;       /* soft lavender-grey */
  --tint-play: #e3ebe0;        /* sage wash */
  --tint-bath: #ddebf0;        /* bathwater blue */
  --tint-feeding: #f3e7dc;     /* oat */
  --tint-on-the-go: #f0e8dd;   /* camel canvas */
  --tint-nursery-storage: #ede4d6; /* warm wicker */
  --tint-default: #efe7da;     /* a category we do not have a tint for yet */

  /* Elevation — the identity prefers hairline rules over shadows; these
     stay minimal and are only used where a rule cannot do the job. */
  --shadow-sm: 0 1px 3px rgba(92, 66, 44, 0.08);
  --shadow-md: 0 6px 18px -8px rgba(92, 66, 44, 0.16);
  --shadow-lg: 0 14px 30px -14px rgba(92, 66, 44, 0.22);
  --header-bg: rgba(247, 243, 236, 0.9);

  /* Spacing scale — the only spacing values used anywhere */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* Layout */
  --container: 76rem;
  --prose: 45rem; /* ~720px */
  --header-h: 3.75rem;

  /* Motion */
  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: cubic-bezier(0.3, 0.7, 0.4, 1);

  color-scheme: light;
}

[data-theme="dark"] {
  /* "The quiet nursery" — espresso dark with warm text; terracotta
     lightens for contrast, sage and honey stay legible */
  --accent: #d3805c;
  --accent-strong: #b56343;
  --accent-hover: #e0946f;
  --accent-soft: rgba(211, 128, 92, 0.16);
  --sage: #a3b195;
  --honey: #d7ad63;
  --on-accent: #2b2118;

  --bg: #211b16;
  --bg-subtle: #292218;
  --surface: #2b241d;
  --surface-2: #322a20;
  --border: #40352b;
  --border-strong: #55463a;
  --text-primary: #f2ead9;
  --text-secondary: #b3a58f;
  --text-muted: #9c9184;

  --tint-sleep: #2b2836;
  --tint-play: #272e25;
  --tint-bath: #232c31;
  --tint-feeding: #2f2822;
  --tint-on-the-go: #2e2820;
  --tint-nursery-storage: #2d2721;
  --tint-default: #292218;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 24px -12px rgba(0, 0, 0, 0.65);
  --header-bg: rgba(33, 27, 22, 0.88);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-primary);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-strong);
  text-decoration-color: color-mix(in srgb, var(--honey) 55%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-base) var(--ease);
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--honey);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.85rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
}

h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
  font-family: "Nunito Sans", system-ui, sans-serif;
  text-transform: none;
}

p {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

li + li {
  margin-top: var(--space-2);
}

hr {
  height: 1px;
  margin: var(--space-6) 0;
  border: 0;
  background: var(--border);
}

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--space-4), env(safe-area-inset-left));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--on-accent);
  outline-color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

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

.btn-primary {
  background: var(--accent-strong);
  color: var(--on-accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text-primary);
}

.btn-block {
  width: 100%;
}

.btn .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  padding-top: env(safe-area-inset-top);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.brand:hover {
  color: var(--text-primary);
}

.brand .mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  color: var(--accent);
}

.wordmark {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.wordmark-accent {
  color: var(--accent);
}

/* "MumzMall": the Mall word sits in the book serif italic */
.wordmark-serif {
  font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
}

.site-nav .nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav .nav-list li + li {
  margin-top: 0;
}

.nav-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.nav-link[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Theme toggle swaps the two glyphs; only one is ever visible. */
.theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

.nav-toggle {
  display: none;
}

@media (max-width: 47.99em) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  .site-nav.is-open {
    display: block;
    animation: nav-in var(--t-base) var(--ease) both;
  }

  .site-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .nav-link {
    padding: var(--space-3) var(--space-3);
    font-size: 1rem;
  }
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.main {
  flex: 1 0 auto;
}

/* Deliberately short: on a phone the grid has to start near the fold. */
.hero {
  padding: var(--space-5) 0 var(--space-4);
}

.hero h1 {
  margin-bottom: var(--space-2);
  max-width: 20ch;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

.hero-sub {
  max-width: 54ch;
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 48em) {
  .hero {
    padding: var(--space-6) 0 var(--space-5);
  }

  .hero-sub {
    font-size: 1.0625rem;
    line-height: 1.6;
  }
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (min-width: 48em) {
  .hero-note {
    font-size: 0.8125rem;
  }
}

.hero-note .icon {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  color: var(--accent);
}

/* Tagged Amazon storefront banner — sits mid-page between the hero and the
   filters so the site visibly links to Amazon with our associate tag. */
.storefront-banner {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.storefront-btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--accent-strong);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}

.storefront-btn:hover,
.storefront-btn:focus-visible {
  background: var(--accent-hover);
  opacity: 1;
}

.storefront-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.storefront-banner .container {
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Filter chips
   -------------------------------------------------------------------------- */

.filters {
  padding-bottom: var(--space-3);
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
  scroll-padding-inline: var(--space-4);
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.chip[aria-pressed="true"] {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
}

.chip-count {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}

.chip[aria-pressed="true"] .chip-count {
  color: var(--on-accent);
}

.result-count {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   7. Product grid & cards
   -------------------------------------------------------------------------- */

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

@media (min-width: 30em) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48em) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 75em) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.grid > li {
  margin: 0;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease);
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--honey);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.card:focus-within {
  border-color: var(--accent);
}

.card-media {
  position: relative;
  flex: none; /* never let a tall card body shrink the square */
  aspect-ratio: 4 / 3; /* shorter on single-column phones so a card fits a screen */
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 30em) {
  .card-media {
    aspect-ratio: 1 / 1;
  }
}

/* Absolute so a portrait or landscape source can never stretch the square. */
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   7b. Product tiles — what fills the media area when a product has no image
   (js/product-media.js renders these; see the note at the top of that file).
   -------------------------------------------------------------------------- */

.tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--tint-default);
  text-align: center;
}

.tile-icon {
  width: 3rem; /* 48px */
  height: 3rem;
  flex: none;
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
}

.tile-brand {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-category {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* The same tints serve the review hero, the cards and the mini thumbnails. */
.tile-sleep,
.mini-tile.tile-sleep { background: var(--tint-sleep); }
.tile-play,
.mini-tile.tile-play { background: var(--tint-play); }
.tile-bath,
.mini-tile.tile-bath { background: var(--tint-bath); }
.tile-feeding,
.mini-tile.tile-feeding { background: var(--tint-feeding); }
.tile-on-the-go,
.mini-tile.tile-on-the-go { background: var(--tint-on-the-go); }
.tile-nursery-storage,
.mini-tile.tile-nursery-storage { background: var(--tint-nursery-storage); }

.media-panel .tile-icon {
  width: 4rem;
  height: 4rem;
}

.media-panel .tile-brand {
  font-size: 1.125rem;
}

.mini-tile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-default);
}

.mini-tile-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-secondary);
}

.badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  padding: 0.1875rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
}

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

.card-category {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.012em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The media and the title both link to the review page; the media link fills
   the media box, is kept out of the tab order and is hidden from assistive
   tech, so the card offers one keyboard stop and one announcement per
   destination. The badge sits above it (z-index) and stays announced. */
.card-media-link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-title a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.card-cta {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding-top: var(--space-3);
}

.card-cta .btn {
  width: 100%;
}

.card-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* 44px touch target */
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--accent-strong);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.card-readmore:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.card-readmore .icon {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  transition: transform var(--t-fast) var(--ease);
}

.card-readmore:hover .icon {
  transform: translateX(2px);
}

/* Disclosure sits with the button it belongs to, inside the card. */
.card-disclosure {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

/* Card entry animation — staggered, capped, disabled for reduced motion. */
.card-in {
  animation: card-in var(--t-base) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

/* Loading skeletons */
.skeleton .card-media,
.skeleton-line {
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

.skeleton-line {
  height: 0.75rem;
  border-radius: var(--radius-sm);
}

.skeleton-line.is-short {
  width: 45%;
}

.skeleton-line.is-tall {
  height: 2.75rem;
  border-radius: var(--radius-md);
  margin-top: auto;
}

.skeleton .card-media::after,
.skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Empty / error state */
.state {
  grid-column: 1 / -1;
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: center;
}

.state .icon-lg {
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-3);
  color: var(--accent);
}

.state h2 {
  margin-bottom: var(--space-2);
  font-size: 1.125rem;
}

.state p {
  max-width: 42ch;
  margin: 0 auto var(--space-4);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.state p:last-child {
  margin-bottom: 0;
}

.picks-section {
  padding-bottom: var(--space-6);
}

.reviewed {
  margin: var(--space-6) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Review pages (reviews/<slug>.html, generated by scripts/build-pages.js)
   -------------------------------------------------------------------------- */

.review-page {
  padding: var(--space-4) 0 var(--space-8);
}

.breadcrumb {
  margin-bottom: var(--space-5);
  font-size: 0.8125rem;
}

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

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
}

.breadcrumb li + li::before {
  content: "›";
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

/* The product title can be long; keep the trail to one line on a phone. */
.breadcrumb .is-current {
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 62em) {
  .review-layout {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .review-media {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

.media-panel {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.media-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-5);
  object-fit: contain;
}

.review-head {
  margin-bottom: var(--space-5);
}

.review-head h1 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem);
}

.review-head .card-category {
  margin-bottom: var(--space-2);
}

.review-section {
  margin-top: var(--space-6);
}

.review-section h2 {
  margin-bottom: var(--space-3);
  font-size: 1.125rem;
}

/* Cap the measure so the copy stays readable on a wide screen. */
.review-section p,
.review-section li {
  max-width: 68ch;
  color: var(--text-secondary);
  line-height: 1.75;
}

.review-section p:last-child {
  margin-bottom: 0;
}

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

.highlight-row li {
  margin: 0;
}

.highlight {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

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

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
}

.icon-list li:last-child {
  margin-bottom: 0;
}

.icon-list svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.3em;
}

.icon-list .icon-check {
  color: var(--accent);
}

.icon-list .icon-alert {
  color: var(--text-muted);
}

.review-cta {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.review-cta .btn {
  width: 100%;
  font-size: 1rem;
}

@media (min-width: 30em) {
  .review-cta .btn {
    width: auto;
    min-width: 17rem;
  }
}

.review-disclosure {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

.review-fineprint {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.5;
}

.more-section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.more-section h2 {
  font-size: 1.125rem;
}

.mini-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 36em) {
  .mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.mini-grid li {
  margin: 0;
}

.mini-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    transform var(--t-base) var(--ease);
}

@media (hover: hover) {
  .mini-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
  }
}

.mini-thumb {
  position: relative;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
}

.mini-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-1);
  object-fit: contain;
}

.mini-text {
  min-width: 0;
}

.mini-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
   9. Article pages
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--prose);
  margin-inline: auto;
  padding: var(--space-6) 0 var(--space-8);
}

.prose header {
  margin-bottom: var(--space-6);
}

.prose .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--honey);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prose .lede {
  color: var(--text-secondary);
  font-size: 1.0625rem;
}

.prose h2 {
  margin-top: var(--space-6);
}

.prose h3 {
  margin-top: var(--space-5);
  font-size: 1rem;
}

.prose p,
.prose li {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
}

.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}

.meta-date {
  margin-bottom: var(--space-6);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.prose code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.callout p:last-child {
  margin-bottom: 0;
}

.contact-cta {
  margin: var(--space-6) 0 var(--space-4);
  text-align: center;
}

.contact-cta .btn {
  font-size: 1.0625rem;
  padding: var(--space-4) var(--space-6);
}

.contact-note {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* 404 */
.notfound {
  max-width: var(--prose);
  margin-inline: auto;
  padding: var(--space-8) 0;
  text-align: center;
}

.notfound .code {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--accent);
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.notfound p {
  max-width: 44ch;
  margin-inline: auto;
  color: var(--text-secondary);
}

.notfound .btn {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: auto;
  padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
}

.footer-brand .brand {
  margin-bottom: var(--space-2);
}

.footer-tagline {
  margin: 0;
  max-width: 34ch;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li + li {
  margin-top: 0;
}

.footer-nav a {
  display: inline-block;
  padding: var(--space-1) 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.footer-legal {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.footer-legal p {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.footer-legal p:last-child {
  margin-bottom: 0;
}

.footer-legal .disclosure {
  color: var(--text-secondary);
}

@media (min-width: 48em) {
  .footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   11. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. Editorial stories — the featured blocks with embedded shelves
   -------------------------------------------------------------------------- */

.kicker {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey);
  margin: 0 0 var(--space-2);
}

.stories {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-8) 0 var(--space-6);
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-7);
  align-items: start;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border);
}

.story:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.story--flip .story-media { order: 2; }
.story--flip .story-body { order: 1; }

.story-media--image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

.story-media--image img {
  width: 100%;
  height: auto;
  display: block;
}

.story-kicker {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey);
  margin: 0 0 var(--space-2);
}

.story-title {
  font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.story-title em {
  font-style: italic;
  color: var(--accent);
}

.story-lede {
  margin: 0 0 var(--space-3);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-primary);
}

.story-points {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.story-points li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.story-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

/* Embedded shelf: a row of mini product cards living inside the story. */
.story-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.story-shelf .shelf-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.story-shelf .shelf-card:hover {
  border-color: var(--honey);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.story-shelf .shelf-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--space-3);
  background: #ffffff;
}

[data-theme="dark"] .story-shelf .shelf-card img {
  background: var(--surface-2);
}

.story-shelf .shelf-name {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-primary);
  padding: 0 var(--space-3);
}

.story-shelf .shelf-tag {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-top: auto;
}

.filters-note {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

@media (max-width: 56rem) {
  .story,
  .story--flip {
    grid-template-columns: 1fr;
  }
  .story--flip .story-media { order: 0; }
  .story--flip .story-body { order: 1; }
  .story-shelf {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  }
}