/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 0 0 var(--space-5);
  list-style: none;
  padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb li:last-child { color: var(--ink); font-weight: 600; }
.breadcrumb .sep { color: var(--line-strong); }

/* ---------- Quick-answer callout ---------- */
.quick-answer {
  border-top: 4px solid var(--accent);
  border-bottom: 1px solid var(--line);
  padding: var(--space-5) 0 var(--space-5);
  margin: 0 0 var(--space-6);
}
.quick-answer__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--space-2);
}
.quick-answer__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.35;
  margin: 0;
  max-width: var(--measure);
}
@media (min-width: 768px) {
  .quick-answer__text { font-size: var(--text-2xl); }
}

/* ---------- Nutrition fact card (label-ledger style) ---------- */
.fact-card {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  max-width: 380px;
}
.fact-card__header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 8px solid var(--ink);
}
.fact-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  margin: 0;
}
.fact-card__serving {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-top: var(--space-1);
}
.fact-card__calories {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
  border-bottom: 4px solid var(--ink);
}
.fact-card__calories-label { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); }
.fact-card__calories-value { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-2xl); }

.fact-card__rows { padding: 0 var(--space-4); }
.fact-card__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.fact-card__row--indent { padding-left: var(--space-4); color: var(--ink-soft); }
.fact-card__row:last-child { border-bottom: none; }
.fact-card__row-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.fact-card__source {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.fact-card__source a { color: var(--ink-soft); }
.fact-card__source a:hover { color: var(--accent-ink); }

/* ---------- Comparison table ---------- */
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 480px; }
.compare-table caption { text-align: left; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-3); }
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--ink-soft); font-weight: 500; }
.compare-table thead th {
  font-family: var(--font-display);
  font-weight: 700;
  border-bottom: 3px solid var(--ink);
  position: sticky;
  top: 0;
  background: var(--paper);
}
.compare-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.compare-table td.is-better { color: var(--sage); font-weight: 700; }
.compare-table td.is-better::after { content: " ▾"; font-size: 0.7em; vertical-align: middle; }

/* ---------- Category hub grid ---------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .hub-grid { grid-template-columns: repeat(4, 1fr); } }

.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper-alt);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hub-card:hover { border-color: var(--accent); }
.hub-card__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-ink);
  letter-spacing: 0.04em;
}
.hub-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.hub-card__count { font-size: var(--text-xs); color: var(--ink-soft); }

/* ---------- Diet-tag pill ---------- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-pill--vegan { background: var(--tag-vegan-bg); color: var(--tag-vegan-text); }
.tag-pill--vegetarian { background: var(--tag-vegetarian-bg); color: var(--tag-vegetarian-text); }
.tag-pill--keto { background: var(--tag-keto-bg); color: var(--tag-keto-text); }
.tag-pill--glutenfree { background: var(--tag-glutenfree-bg); color: var(--tag-glutenfree-text); }
.tag-pill--lowsodium { background: var(--tag-lowsodium-bg); color: var(--tag-lowsodium-text); }
.tag-pill--diabetic { background: var(--tag-diabetic-bg); color: var(--tag-diabetic-text); }
.tag-pill--paleo { background: var(--tag-paleo-bg); color: var(--tag-paleo-text); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Fact / spec list (storage, conversions) ---------- */
.spec-list { border-top: 3px solid var(--ink); }
.spec-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.spec-list__key { color: var(--ink-soft); }
.spec-list__value { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Product / affiliate CTA card ---------- */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper);
}
.product-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); margin: 0; }
.product-card__blurb { font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }
.product-card__cta {
  display: inline-flex;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.product-card__cta:hover { background: var(--accent-ink); }
.product-card__disclosure { font-size: var(--text-xs); color: var(--ink-soft); }