/* ==========================================================================
   Components
   ========================================================================== */

/* Subtle paper-grain texture — pure CSS/SVG, no image asset */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Type ---- */
h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); font-weight: 600; }
p { max-width: 68ch; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
.page--bleed .eyebrow { color: #f0dfae; }
.page--product .eyebrow { font-size: 0.7rem; }
@media (min-width: 640px) {
  .page--product .eyebrow { font-size: 1rem; }
}


.rule-motif {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-gold);
  margin-block: var(--space-4);
}
.rule-motif::before,
.rule-motif::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.rule-motif svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Buttons / links ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.8em 1.5em;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-ink);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn svg { width: 17px; height: 17px; }
.btn--light { border-color: var(--color-paper); }
.btn--light:hover { background: var(--color-paper); color: var(--color-ink); }

/* ---- Badges (vegan / vegetarian-exception) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.95em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px -6px rgba(43,32,22,0.4);
}
.badge svg { width: 13px; height: 13px; }
.product-card__body > .badge {
  align-self: flex-start;
  margin-bottom: 0.35em;
  padding: 0.28em 0.6em;
  font-size: 0.64rem;
}
@media (min-width: 640px) {
  .product-card__body > .badge { margin-bottom: 0.45em; padding: 0.4em 0.85em; font-size: 0.78rem; }
}
.badge--vegan { background: var(--color-sage-deep); color: var(--color-paper-soft); }
.badge--dairy { background: var(--color-terracotta-deep); color: var(--color-paper-soft); }

/* ---- Allergen chips ----
   Sizing is kept a notch below the badge and description across every
   tier (see the badge/chip overrides in the narrow and landscape tiers
   below) so the visual hierarchy stays: chip < badge ≈ description <
   product name, regardless of viewport. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}
@media (min-width: 640px) {
  .chip { font-size: 0.7rem; }
}
.chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.chip--dairy {
  background: var(--color-terracotta-paper);
  border-color: var(--color-terracotta-deep);
  color: var(--color-terracotta-deep);
  font-weight: 700;
}

/* ---- Product grid & card ----
   Mobile-first: every product page holds at most two cards, stacked as a
   single column of horizontal (image-beside-text) rows. The row layout
   keeps each card short enough to fit a phone viewport with no scrolling
   *and* gives description text a full-width line to read on, so nothing
   needs truncating. The image box is sized by aspect-ratio (matching the
   3:4 source photos) rather than a fixed height, so photos are never
   cropped through their middle. Cards sit as frosted glass over the
   page's blurred category-photo backdrop (see .page--product in
   layout.css). */
.product-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.product-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: rgba(251, 248, 242, 0.68);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .product-card { background: var(--color-paper-soft); }
}

.product-card__media {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: auto;
  height: clamp(130px, 29dvh, 230px);
  aspect-ratio: 3 / 4;
  background: var(--color-paper-deep);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  flex: 1;
  min-width: 0;
}

.product-card__name {
  font-size: clamp(0.95rem, 1.6vw + 0.6rem, 1.15rem);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.product-card__desc {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-ink-soft);
  font-size: clamp(0.78rem, 1vw + 0.55rem, 0.9rem);
  line-height: var(--lh-snug);
}

.product-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fs-micro);
  color: var(--color-ink-soft);
}
.product-card__facts li {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.product-card__facts svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--color-gold-deep);
}
.product-card__facts strong {
  color: var(--color-ink);
  font-weight: 600;
}

.product-card__allergens {
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.product-card__allergens-label {
  font-size: 0.65rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  opacity: 0.75;
}

/* Extra-narrow phones (iPhone SE 1st-gen class, ~320px) need one more turn
   of the screw so two full-text cards still clear the viewport. */
@media (max-width: 389px) {
  .page--product .page__inner { gap: var(--space-2); }
  .product-grid { gap: var(--space-2); }
  .product-card__media { height: clamp(92px, 23dvh, 172px); }
  .product-card__body { padding: 6px var(--space-2); gap: 2px; }
  .product-card__name { font-size: 0.85rem; }
  .product-card__desc { font-size: 0.7rem; }
  .product-card__facts { font-size: 0.64rem; gap: 1px var(--space-2); }
  .product-card__facts svg { width: 11px; height: 11px; }
  .product-card__allergens { padding-top: 0; gap: 2px; }
  .product-card__allergens-label { display: none; }
  .chip-row { gap: 4px; }
  .chip { padding: 0.2em 0.5em; font-size: 0.52rem; }
  .chip svg { width: 10px; height: 10px; }
  .product-card__body > .badge { padding: 0.26em 0.6em; font-size: 0.58rem; }
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    max-width: 58rem;
  }
  .product-grid:has(.product-card:only-child) {
    grid-template-columns: minmax(0, 28rem);
    margin-inline: auto;
  }
  .product-card__media { height: clamp(180px, 34dvh, 340px); }
  .product-card__body { padding: var(--space-4) var(--space-5); gap: var(--space-2); }
  .product-card__name { font-size: 1.55rem; line-height: 1.15; }
  .product-card__desc { font-size: var(--fs-body); }
  .product-card__facts { font-size: var(--fs-small); gap: var(--space-2); }
  .product-card__facts svg { width: 15px; height: 15px; }
  .product-card__allergens-label { font-size: var(--fs-micro); }
}

/* ---- Phone landscape ----
   A rotated phone is wide but short: sizing the image off viewport
   *height* (as the portrait tiers do) starves it of the width that's
   sitting right there unused. Put the two cards side by side instead of
   stacked — each then owns the full available height rather than
   splitting it — and let the image grow into that width. Keyed off
   height + orientation, not a width breakpoint, so it also overrides
   the ≥640px tier above for wide-but-short phones. */
@media (max-height: 500px) and (min-width: 560px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 52rem;
    gap: var(--space-4);
  }
  .product-grid:has(.product-card:only-child) {
    grid-template-columns: minmax(0, 26rem);
    margin-inline: auto;
  }
  .product-card__media { height: clamp(90px, 36dvh, 168px); }
  .product-card__body { padding: 4px var(--space-2); gap: 2px; }
  .product-card__name { font-size: 0.85rem; }
  .product-card__desc { font-size: 0.7rem; }
  .product-card__facts { flex-wrap: nowrap; font-size: 0.58rem; gap: 1px 6px; }
  .product-card__facts svg { width: 10px; height: 10px; }
  .product-card__allergens { padding-top: 0; gap: 2px; }
  .chip-row { gap: 4px; }
  .chip { padding: 0.22em 0.55em; font-size: 0.54rem; }
  .chip svg { width: 10px; height: 10px; }
  .product-card__body > .badge { padding: 0.26em 0.6em; font-size: 0.6rem; }
  .product-card__allergens-label { font-size: 0.58rem; }
  .page--product .eyebrow { font-size: 0.62rem; }
  .page--product .page__inner { gap: 4px; }
}

/* Smallest landscape phones (iPhone SE 1st-gen class, ~320px tall) need
   the same extra turn of the screw the narrow-portrait tier gets. */
@media (max-height: 340px) and (min-width: 560px) {
  .product-card__media { height: clamp(72px, 32dvh, 130px); }
  .product-card__body { padding: 3px 6px; gap: 1px; }
  .product-card__name { font-size: 0.76rem; }
  .product-card__desc { display: none; }
  .product-card__allergens-label { display: none; }
  .product-card__body > .badge { padding: 0.22em 0.55em; font-size: 0.56rem; }
}

/* ---- Table of contents ---- */
.toc-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}
@media (min-width: 640px) { .toc-close { right: var(--space-6); } }

.toc-group {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}
.toc-group:first-of-type { padding-top: var(--space-2); }
.toc-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
}
.toc-group__title {
  font-size: var(--fs-h2);
}
.toc-group__count {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.toc-products {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-6);
}
@media (min-width: 640px) {
  .toc-products { grid-template-columns: 1fr 1fr; }
}
.toc-products a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--color-line-strong);
  font-size: var(--fs-body);
}
.toc-products a:hover { color: var(--color-gold-deep); }
.toc-products svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.toc-top-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---- Cover / dividers / back cover ---- */
.cover__mark {
  width: 92px;
  height: 92px;
  margin-bottom: var(--space-6);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.cover__title {
  font-size: var(--fs-cover);
  line-height: 0.98;
}
.cover__subtitle {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: rgba(247,241,230,0.9);
}
.cover__scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(247,241,230,0.85);
  animation: nudge 2.2s var(--ease-standard) infinite;
}
.cover__scroll-cue svg { width: 18px; height: 18px; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cover__scroll-cue { animation: none; }
}

/* Phone landscape: --fs-cover and --fs-h1 scale off viewport *width*,
   which is generous in landscape even though height is tight — left
   alone the title alone would blow the height budget. Pin to a much
   smaller fixed size and trim the surrounding spacing to match. */
@media (max-height: 500px) and (min-width: 560px) {
  .cover__mark { width: 48px; height: 48px; margin-bottom: var(--space-2); }
  .cover__title { font-size: clamp(1.6rem, 5vh, 2.75rem); line-height: 1; }
  .cover__subtitle { margin-top: var(--space-2); font-size: 0.8rem; }
  .cover__scroll-cue { margin-top: var(--space-3); }
  .divider__title { font-size: clamp(1.6rem, 6vh, 3rem); }
  .divider__count { margin-top: var(--space-1); font-size: var(--fs-small); }
}
@media (max-height: 340px) and (min-width: 560px) {
  .cover__subtitle, .cover__scroll-cue { display: none; }
  .divider__title { font-size: 1.5rem; }
  .divider__count { margin-top: 0; font-size: var(--fs-micro); }
  .page--bleed .eyebrow { font-size: 0.62rem; }
}

.divider__count {
  font-size: var(--fs-body);
  color: rgba(247,241,230,0.85);
  margin-top: var(--space-3);
}
.divider__title {
  font-size: var(--fs-h1);
}

.back-cover {
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.back-cover__mark {
  width: 72px;
  height: 72px;
}
.back-cover__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
  max-width: 36ch;
  color: rgba(247, 241, 230, 0.92);
}

.back-cover__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.back-cover__contact-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(247, 241, 230, 0.92);
  border-bottom: 1px solid transparent;
}
.back-cover__contact-row:hover { border-color: currentColor; }
.back-cover__contact-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #f0dfae;
}

@media (max-width: 389px) {
  .back-cover { gap: var(--space-2); }
  .back-cover__mark { width: 52px; height: 52px; }
  .back-cover__note { font-size: 0.8rem; }
  .back-cover__contact { gap: 3px; }
  .back-cover__contact-row { font-size: 0.7rem; gap: 6px; }
  .back-cover__contact-row svg { width: 12px; height: 12px; }
  .back-cover .btn { padding: 0.5em 1.1em; font-size: 0.74rem; }
}

@media (min-width: 640px) {
  .back-cover__mark { width: 96px; height: 96px; }
  .back-cover__note { font-size: var(--fs-body-lg); max-width: 40ch; }
  .back-cover__contact-row { font-size: var(--fs-small); }
}

/* Phone landscape: still one contact entry per line (a wrapped row of
   4 reflows unevenly — 3 then 1 — which reads messier than a clean
   list), just tightened, with a little breathing room before the
   button so it doesn't crowd the last contact line. */
@media (max-height: 500px) and (min-width: 560px) {
  /* Centering the whole block (mark+note+contact+button) as a unit
     leaves the note sitting above true center, since the mark eats
     space above it. Anchor from the top instead and push the mark down
     directly, so the note itself lands near center. */
  .page__inner.back-cover { justify-content: flex-start; }
  .back-cover { gap: 4px; }
  .back-cover__mark { width: 40px; height: 40px; margin-top: 12dvh; }
  .back-cover__note { font-size: 0.76rem; max-width: 44ch; }
  .back-cover__contact { gap: 0px; }
  .back-cover__contact-row { font-size: 0.5rem; gap: 4px; }
  .back-cover__contact-row svg { width: 7px; height: 7px; }
  .back-cover .btn { margin-top: 12px; padding: 0.18em 0.6em; font-size: 0.52rem; }
}
@media (max-height: 340px) and (min-width: 560px) {
  .back-cover__note { display: none; }
}