/* ============================================================================
   MAKE HEALTHY - Design System
   ----------------------------------------------------------------------------
   ART DIRECTION : Warm Editorial / Modern Farmhouse
     A calm, magazine-like food-editorial look: generous whitespace, warm
     cream paper background, a deep forest green + burnt terracotta accent
     pair, soft rounded cards with subtle shadow instead of hard borders.
     Distinct from typical "food blog" red/orange loud palettes and from
     flat SaaS-style UI - this reads like a printed cookbook brought online.

   TYPE PAIRING : "Fraunces" (warm serif, display/headings) + "Inter"
     (neutral grotesque, body/UI). Fraunces gives editorial warmth to
     titles; Inter keeps ingredient lists, specs and UI chrome crisp
     and legible at small sizes.

   COLOR SYSTEM (light + dark handled deliberately via tokens below):
     --paper      cream background
     --ink        primary text (near-black warm charcoal)
     --forest     primary brand color (deep green) - nav, buttons, links
     --terracotta secondary accent - premium badges, highlights, CTAs
     --gold       tertiary accent - ratings, small flourishes
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9,400;0,9,500;0,9,600;0,9,700;1,9,500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* light palette (default) */
  --paper: #faf6ee;
  --paper-raised: #ffffff;
  --ink: #2b2620;
  --ink-soft: #625b4e;
  --line: #e6ddcc;
  --forest: #1f4d3a;
  --forest-dark: #143529;
  --forest-tint: #e7efe9;
  --terracotta: #c1652f;
  --terracotta-tint: #f7e7dc;
  --gold: #b8862f;
  --danger: #b3402f;
  --shadow: 0 2px 10px rgba(43, 38, 32, 0.06), 0 10px 30px rgba(43, 38, 32, 0.05);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --max-width: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171a16;
    --paper-raised: #20241d;
    --ink: #f1ece0;
    --ink-soft: #b9b2a2;
    --line: #333a2e;
    --forest: #6fae8d;
    --forest-dark: #4f8a6d;
    --forest-tint: #202a22;
    --terracotta: #e3925f;
    --terracotta-tint: #2c2119;
    --gold: #d8ab5f;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  --paper: #171a16;
  --paper-raised: #20241d;
  --ink: #f1ece0;
  --ink-soft: #b9b2a2;
  --line: #333a2e;
  --forest: #6fae8d;
  --forest-dark: #4f8a6d;
  --forest-tint: #202a22;
  --terracotta: #e3925f;
  --terracotta-tint: #2c2119;
  --gold: #d8ab5f;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: var(--forest-dark); }
.btn-secondary { background: transparent; border-color: var(--forest); color: var(--forest); }
.btn-accent { background: var(--terracotta); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   MARQUEE / ANNOUNCEMENT BAR
--------------------------------------------------------------------------- */
.announce-bar {
  background: var(--forest);
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 16px;
}
.announce-bar a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   HEADER / NAV
--------------------------------------------------------------------------- */
.site-header {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.brand {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--forest);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-mark { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.brand span { color: var(--terracotta); }
.main-nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
.main-nav a { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.main-nav a:hover { color: var(--forest); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-icon-link { position: relative; color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; }
.nav-icon-link svg { display: block; }
.cart-badge {
  position: absolute; top: -8px; right: -14px;
  background: var(--terracotta); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  border-radius: 999px; padding: 1px 6px;
}
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--ink); }
.search-form { display: flex; align-items: center; }
.search-form input {
  border: 1px solid var(--line);
  border-radius: 999px 0 0 999px;
  padding: 8px 14px;
  font-size: 0.9rem;
  width: 160px;
  background: var(--paper);
  color: var(--ink);
}
.search-form button {
  border: 1px solid var(--forest);
  background: var(--forest);
  color: #fff;
  border-radius: 0 999px 999px 0;
  padding: 8px 14px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .main-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 5;
    gap: 12px;
    padding-top: 12px;
  }
  .main-nav.open { display: flex; }
  .nav-row { flex-wrap: wrap; }
  .nav-toggle { display: block; margin-left: auto; }
  .search-form input { width: 120px; }
}

/* ---------------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------------- */
.site-footer {
  background: var(--forest);
  color: #eaf1ec;
  margin-top: 60px;
  padding: 50px 0 24px;
}
.site-footer a { color: #eaf1ec; opacity: 0.9; }
.site-footer a:hover { opacity: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 30px;
}
.footer-grid h4 { color: #fff; font-size: 0.95rem; font-family: 'Inter'; text-transform: uppercase; letter-spacing: 0.06em; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 34px;
  padding-top: 18px;
  font-size: 0.8rem;
  opacity: 0.75;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   COOKIE BANNER
--------------------------------------------------------------------------- */
#cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: var(--max-width);
  box-sizing: border-box;
  background: var(--ink);
  color: #fdfaf3;
  padding: 16px 20px;
  border-radius: var(--radius, 14px);
  z-index: 100;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
}
#cookie-banner p { margin: 0; font-size: 0.85rem; max-width: 720px; }
#cookie-banner .btn { white-space: nowrap; }
/* The #cookie-banner rule above sets display:flex with ID-selector
   specificity, which otherwise beats the browser's own low-specificity
   `[hidden]{display:none}` rule - meaning setting the `hidden` property/attribute
   from JS (or leaving it in the server-rendered markup) had no visual effect
   and the banner stayed on screen permanently. This rule restores the
   expected behavior with a selector specific enough to win. */
#cookie-banner[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   HERO
--------------------------------------------------------------------------- */
.hero {
  position: relative;
  color: #fff;
  padding: 90px 0;
  background-size: cover;
  background-position: center;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,30,25,0.35), rgba(20,30,25,0.65));
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 760px; }
.hero p.lede { font-size: 1.15rem; opacity: 0.95; max-width: 760px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
/* Gap between a hero/page-hero banner and whatever section follows it, on
   every page - without this, the next section's own top padding read as
   flush/no gap directly under the banner. */
.hero + *, .page-hero + * { margin-top: 40px; }
/* Inside a dark photo hero, the default forest-on-transparent secondary
   button has almost no contrast against the photo + gradient overlay.
   Give it a solid, clearly visible treatment in this context only. */
.hero .btn-secondary {
  background: rgba(253, 250, 243, 0.92);
  border-color: rgba(253, 250, 243, 0.92);
  color: var(--forest-dark, var(--forest));
}
.hero .btn-secondary:hover {
  background: #fff;
  border-color: #fff;
}

.page-hero {
  padding: 50px 0;
  text-align: center;
  background: var(--forest-tint);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin-bottom: 6px; }
.page-hero p { color: var(--ink-soft); max-width: 640px; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   SECTIONS / CARDS
--------------------------------------------------------------------------- */
section { padding: 50px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 20px; flex-wrap: wrap; }
.section-head p { color: var(--ink-soft); margin: 0; }

.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper-raised);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}
.card:hover { transform: translateY(-3px); }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 1.05rem; margin: 0; }
.card-body h3 a { color: var(--ink); }
.card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-soft); }
.card-desc { color: var(--ink-soft); font-size: 0.9rem; flex: 1; }
.card-price { font-weight: 700; color: var(--forest); font-size: 1.1rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-easy { background: var(--forest-tint); color: var(--forest); }
.badge-medium { background: var(--terracotta-tint); color: var(--terracotta); }
.badge-advanced { background: #f3ded0; color: var(--danger); }
.badge-premium { background: var(--gold); color: #2b2000; }
.badge-free { background: var(--forest-tint); color: var(--forest); }

.rating { color: var(--gold); font-weight: 700; font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   FILTER BAR
--------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 30px;
}
.filter-bar select, .filter-bar input[type="text"] {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
}
.filter-bar label { font-size: 0.8rem; color: var(--ink-soft); display: block; margin-bottom: 4px; }

/* ---------------------------------------------------------------------------
   RECIPE / PRODUCT DETAIL
--------------------------------------------------------------------------- */
.detail-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .detail-hero { grid-template-columns: 1fr; } }
.detail-hero img { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }
.detail-meta-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
.detail-meta-row .meta-chip {
  background: var(--forest-tint); color: var(--forest);
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: 0.82rem; font-weight: 600;
}
.two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 44px; margin-top: 40px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.ingredient-list { list-style: none; padding: 0; margin: 0; }
.ingredient-list li {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.ingredient-list input[type="checkbox"] { margin-top: 3px; accent-color: var(--forest); }
.steps-list { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps-list li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.steps-list li::before {
  content: counter(step);
  background: var(--forest); color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: 'Fraunces', serif;
}
.highlight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.highlight-list li { display: flex; gap: 10px; align-items: flex-start; }
.highlight-list li::before { content: '\2726'; color: var(--terracotta); }
.tip-box {
  background: var(--terracotta-tint); border-left: 4px solid var(--terracotta);
  border-radius: var(--radius-sm); padding: 16px 20px; margin: 10px 0;
}
.nutrition-panel {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.nutrition-panel div strong { display: block; font-size: 1.3rem; color: var(--forest); }
.nutrition-panel div span { font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; }
.nutrition-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 10px; }

.premium-wall {
  background: linear-gradient(180deg, transparent, var(--paper) 60%), var(--forest-tint);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px; text-align: center; margin-top: -60px; position: relative; z-index: 2;
}
.premium-wall h3 { margin-bottom: 10px; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: 10px 6px; font-size: 0.92rem; }
.spec-table td:first-child { color: var(--ink-soft); width: 40%; }

/* ---------------------------------------------------------------------------
   FORMS
--------------------------------------------------------------------------- */
.form-card {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px; max-width: 480px; margin: 0 auto; box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); font-family: inherit; font-size: 0.95rem;
  background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.payment-heading { display: flex; align-items: center; gap: 8px; }
.checkout-assurance {
  margin-top: 12px; text-align: center; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5;
}
.checkout-assurance svg { vertical-align: -2px; margin-right: 4px; }
.form-error { background: #f7dcd5; color: var(--danger); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.88rem; }
.form-success { background: var(--forest-tint); color: var(--forest); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.88rem; }

/* ---------------------------------------------------------------------------
   CART / CHECKOUT
--------------------------------------------------------------------------- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; color: var(--ink-soft); padding: 10px 8px; border-bottom: 2px solid var(--line); }
.cart-table td { padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-row-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.qty-input { width: 60px; padding: 6px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.cart-summary { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.cart-summary .total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.15rem; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   MISC UTILITIES
--------------------------------------------------------------------------- */
.flash { padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; }
.flash-success { background: var(--forest-tint); color: var(--forest); }
.flash-error { background: #f7dcd5; color: var(--danger); }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.page-link {
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  color: var(--ink); font-size: 0.9rem;
}
.page-link.active { background: var(--forest); color: #fff; border-color: var(--forest); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.divider { height: 1px; background: var(--line); margin: 40px 0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 720px; margin: 0 auto; }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card { background: var(--paper-raised); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 32px; text-align: center; }
.price-card.featured { border-color: var(--forest); position: relative; }
.price-card .price { font-family: 'Fraunces', serif; font-size: 2.4rem; color: var(--forest); }
.price-card .price span { font-size: 1rem; color: var(--ink-soft); font-family: 'Inter'; }
.save-badge { background: var(--terracotta); color: #fff; font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }

.legal-content h2 { margin-top: 2em; }
.legal-content ul { padding-left: 1.4em; }
.legal-content { max-width: 780px; margin: 0 auto; }

/* Blog article body: intentionally NOT centered/narrowed independently -
   it must keep the same left edge as the featured image, heading, and meta
   line above it (all of which span the full .container width). Centering
   this block on its own (like .legal-content does for legal pages) pulls
   the paragraph text far to the right of the heading, which read as
   "misaligned" on the post detail page. */
.blog-body h2 { margin-top: 2em; }
.blog-body ul { padding-left: 1.4em; }
.blog-body p { margin-bottom: 1.1em; }

.team-card { text-align: center; }
.team-card img { border-radius: 50%; width: 140px; height: 140px; object-fit: cover; margin: 0 auto 14px; }

.job-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }

.toast-container { position: fixed; bottom: 90px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 0.9rem; animation: toast-in 0.2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.faq-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-family: 'Fraunces', serif; font-size: 1.05rem; }
.faq-item p { margin-top: 10px; color: var(--ink-soft); }

.related-strip { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; }
.related-strip .card { min-width: 240px; }

.breadcrumb { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 14px; }
.breadcrumb a { color: var(--ink-soft); }