.food-tool-shell {
  --food-green: #739f2e;
  --food-green-deep: #4e6f1f;
  --food-gold: #d89a35;
  --food-gold-deep: #a96a1d;
  --food-brown: #6a4321;
  --food-brown-deep: #45280f;
  --food-paper: #fff7e8;
  --food-paper-deep: #f5e6c5;
  --food-paper-border: rgba(117, 79, 37, 0.18);
  --food-night: #365a9d;
  --food-night-deep: #223963;
  --food-red: #c45431;
  --food-shadow: 0 20px 38px rgba(91, 63, 27, 0.16);
  display: grid;
  gap: 26px;
}

.food-hero-panel,
.food-panel {
  background:
    linear-gradient(180deg, rgba(255, 253, 245, 0.95), rgba(245, 230, 197, 0.97)),
    var(--food-paper);
  border: 1px solid var(--food-paper-border);
  border-radius: 34px;
  box-shadow: var(--food-shadow);
}

.food-hero-panel {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.96fr);
  padding: 30px;
}

.food-eyebrow,
.food-panel-kicker {
  margin: 0;
  color: var(--food-green-deep);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.food-hero-copy h1,
.food-panel-head h2,
.food-card h3,
.food-builder-item h3,
.food-window-card h3,
.food-highlight-card h3 {
  margin: 0;
  color: var(--food-brown-deep);
  font-family: "Baloo 2", sans-serif;
  line-height: 1;
}

.food-hero-copy h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.9rem);
}

.food-panel-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.food-lede,
.food-panel-copy,
.food-banner-card figcaption,
.food-shot-card figcaption,
.food-card-copy,
.food-note-card p,
.food-window-copy p,
.food-related-card p,
.food-faq-item p,
.food-summary-group p,
.food-summary-empty p,
.food-empty-card p,
.food-highlight-copy p,
.food-highlight-empty p {
  margin: 0;
  color: #5e4a31;
  font-size: 1rem;
  line-height: 1.68;
}

.food-hero-copy,
.food-hero-media,
.food-shot-stack,
.food-builder-side,
.food-window-layout,
.food-faq-layout {
  display: grid;
  gap: 18px;
}

.food-hero-actions,
.food-anchor-nav,
.food-filter-row,
.food-preset-row,
.food-builder-toolbar,
.food-chip-row,
.food-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.food-button,
.food-ghost-button,
.food-preset-button,
.food-card-button,
.food-inline-link {
  appearance: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.food-button:hover,
.food-ghost-button:hover,
.food-preset-button:hover,
.food-card-button:hover,
.food-inline-link:hover {
  transform: translateY(-1px);
}

.food-button-primary,
.food-card-button {
  background: linear-gradient(180deg, #7eb52c, var(--food-green));
  box-shadow: 0 12px 22px rgba(91, 144, 30, 0.24);
  color: #fffef8;
}

.food-button-primary,
.food-button-secondary {
  padding: 0.92rem 1.22rem;
}

.food-card-button {
  padding: 0.78rem 1rem;
}

.food-button-secondary,
.food-inline-link {
  background: rgba(111, 165, 38, 0.12);
  color: var(--food-green-deep);
  padding: 0.92rem 1.22rem;
}

.food-ghost-button,
.food-preset-button {
  background: rgba(105, 68, 32, 0.08);
  color: var(--food-brown-deep);
  padding: 0.72rem 1rem;
}

.food-preset-button {
  display: grid;
  gap: 4px;
  text-align: left;
}

.food-preset-button strong,
.food-preset-button span {
  display: block;
}

.food-inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
}

.food-hero-stat-grid,
.food-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.food-stat-card,
.food-kpi-card,
.food-summary-card,
.food-note-card,
.food-card,
.food-window-card,
.food-related-card,
.food-highlight-card,
.food-empty-card {
  border: 1px solid rgba(111, 84, 43, 0.12);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.74);
  padding: 18px;
}

.food-stat-card span,
.food-kpi-card span,
.food-highlight-metrics span,
.food-summary-group span,
.food-card-shop {
  display: block;
  color: #7b6242;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.food-stat-card strong,
.food-kpi-card strong,
.food-highlight-metrics strong,
.food-related-card strong,
.food-summary-empty strong,
.food-empty-card strong,
.food-faq-item summary,
.food-highlight-empty strong {
  color: var(--food-brown-deep);
  font-family: "Baloo 2", sans-serif;
  font-size: 1.35rem;
  line-height: 1.05;
}

.food-stat-card p,
.food-kpi-card p {
  margin: 0.52rem 0 0;
}

.food-banner-card,
.food-shot-card,
.food-window-media {
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(105, 68, 32, 0.08), rgba(105, 68, 32, 0.02));
  border: 1px solid rgba(117, 79, 37, 0.12);
}

.food-banner-card img,
.food-shot-card img,
.food-window-media img {
  width: 100%;
  image-rendering: pixelated;
}

.food-card-icon-wrap img,
.food-builder-icon img,
.food-highlight-icon img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
}

.food-banner-card figcaption,
.food-shot-card figcaption {
  padding: 14px 16px 18px;
}

.food-shot-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.food-anchor-nav {
  position: sticky;
  top: 12px;
  z-index: 3;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 249, 237, 0.88);
  border: 1px solid rgba(117, 79, 37, 0.12);
  backdrop-filter: blur(12px);
}

.food-anchor-nav a {
  padding: 0.72rem 1rem;
  border-radius: 999px;
  color: var(--food-brown-deep);
  font-weight: 800;
  text-decoration: none;
}

.food-anchor-nav a:hover {
  background: rgba(216, 154, 53, 0.18);
}

.food-panel {
  display: grid;
  gap: 24px;
  padding: 28px;
}

.food-panel-head {
  display: grid;
  gap: 10px;
}

.food-field {
  display: grid;
  gap: 8px;
  min-width: 160px;
  flex: 1 1 180px;
}

.food-field span {
  color: var(--food-brown-deep);
  font-size: 0.9rem;
  font-weight: 800;
}

.food-field select {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(111, 84, 43, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--food-brown-deep);
  font: inherit;
  padding: 0.82rem 0.95rem;
}

.food-board-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.food-board-count {
  margin: 0;
  color: var(--food-brown-deep);
  font-weight: 800;
}

.food-highlight-card {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  align-items: center;
  background:
    radial-gradient(circle at right top, rgba(255, 248, 220, 0.88), rgba(255, 255, 255, 0) 45%),
    rgba(255, 255, 255, 0.8);
}

.food-highlight-side,
.food-highlight-metrics {
  display: grid;
  gap: 14px;
}

.food-highlight-icon {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 236, 205, 0.92));
  border: 1px solid rgba(117, 79, 37, 0.12);
}

.food-highlight-icon img {
  width: 64px;
  height: 64px;
}

.food-highlight-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.food-highlight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.food-highlight-empty {
  display: grid;
  gap: 8px;
}

.food-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.food-card,
.food-builder-item {
  display: grid;
  gap: 16px;
}

.food-card-top,
.food-builder-top,
.food-builder-bottom,
.food-card-head,
.food-summary-group,
.food-window-card {
  display: grid;
  gap: 12px;
}

.food-card-top,
.food-builder-top {
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
}

.food-card-icon-wrap,
.food-builder-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 236, 205, 0.9));
  border: 1px solid rgba(117, 79, 37, 0.1);
}

.food-card-best,
.food-builder-copy,
.food-builder-bottom p {
  margin: 0;
  color: #6a5338;
  line-height: 1.55;
}

.food-chip-row {
  gap: 8px;
}

.food-chip,
.food-mini-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.food-mini-chip {
  background: rgba(216, 154, 53, 0.18);
  color: var(--food-brown-deep);
}

.food-chip-day {
  background: rgba(216, 154, 53, 0.16);
  color: var(--food-gold-deep);
}

.food-chip-night {
  background: rgba(54, 90, 157, 0.14);
  color: var(--food-night-deep);
}

.food-chip-pantry {
  background: rgba(115, 159, 46, 0.14);
  color: var(--food-green-deep);
}

.food-chip-instant {
  background: rgba(196, 84, 49, 0.14);
  color: #8c321b;
}

.food-chip-starter,
.food-chip-cows,
.food-chip-late,
.food-chip-shop,
.food-chip-steady,
.food-chip-rough {
  background: rgba(105, 68, 32, 0.08);
  color: var(--food-brown-deep);
}

.food-stat-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.food-stat-list div {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(248, 236, 205, 0.58);
}

.food-stat-list dt {
  margin: 0 0 0.3rem;
  color: #7b6242;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.food-stat-list dd {
  margin: 0;
  color: var(--food-brown-deep);
  font-weight: 800;
}

.food-card-actions {
  align-items: center;
  justify-content: space-between;
}

.food-card-actions span {
  color: #6d5538;
  font-size: 0.9rem;
  font-weight: 700;
}

.food-empty-card,
.food-summary-empty {
  display: grid;
  gap: 8px;
}

.food-builder-layout {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.84fr);
}

.food-builder-main {
  display: grid;
  gap: 18px;
}

.food-builder-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.food-builder-item.is-locked {
  opacity: 0.58;
}

.food-stepper {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 42px 56px 42px;
  align-items: center;
  justify-content: start;
  border-radius: 999px;
  background: rgba(105, 68, 32, 0.08);
  overflow: hidden;
}

.food-stepper button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--food-brown-deep);
  cursor: pointer;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  height: 42px;
}

.food-stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.food-stepper strong {
  text-align: center;
  color: var(--food-brown-deep);
  font-family: "Baloo 2", sans-serif;
  font-size: 1.1rem;
}

.food-summary-card,
.food-note-card {
  display: grid;
  gap: 16px;
}

.food-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.food-summary-list {
  display: grid;
  gap: 14px;
}

.food-summary-group ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #5c4730;
  line-height: 1.6;
}

.food-copy-note {
  margin: 0;
  color: #7b6242;
  font-size: 0.88rem;
}

.food-route-stage,
.food-window-card-grid {
  display: grid;
  gap: 16px;
}

.food-route-bar {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.food-route-segment,
.food-route-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 18px;
  font-weight: 800;
  text-align: center;
}

.food-route-segment-day {
  background: rgba(216, 154, 53, 0.16);
  color: var(--food-gold-deep);
}

.food-route-segment-night {
  background: rgba(54, 90, 157, 0.14);
  color: var(--food-night-deep);
}

.food-route-gap {
  padding: 0 0.9rem;
  background: rgba(105, 68, 32, 0.08);
  color: var(--food-brown-deep);
}

.food-route-note {
  margin: 0;
  color: #654d33;
  font-weight: 700;
}

.food-window-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.food-window-card {
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: stretch;
}

.food-window-copy {
  display: grid;
  gap: 12px;
  padding: 4px 0;
}

.food-faq-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.88fr);
  align-items: start;
}

.food-faq-list {
  display: grid;
  gap: 12px;
}

.food-faq-item {
  border: 1px solid rgba(111, 84, 43, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  padding: 16px 18px;
}

.food-faq-item summary {
  cursor: pointer;
  list-style: none;
}

.food-faq-item summary::-webkit-details-marker {
  display: none;
}

.food-faq-item p {
  margin-top: 0.8rem;
}

.food-related-grid {
  display: grid;
  gap: 14px;
}

.food-related-card {
  display: grid;
  gap: 8px;
  text-decoration: none;
}

.food-related-card span {
  color: #7b6242;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .food-hero-panel,
  .food-highlight-card,
  .food-builder-layout,
  .food-faq-layout {
    grid-template-columns: 1fr;
  }

  .food-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .food-hero-panel,
  .food-panel {
    padding: 22px;
  }

  .food-shot-stack,
  .food-card-grid,
  .food-builder-grid,
  .food-window-card-grid,
  .food-kpi-grid,
  .food-hero-stat-grid {
    grid-template-columns: 1fr;
  }

  .food-window-card,
  .food-card-top,
  .food-builder-top {
    grid-template-columns: 1fr;
  }

  .food-card-icon-wrap,
  .food-builder-icon {
    width: 72px;
    height: 72px;
  }

  .food-card-icon-wrap img,
  .food-builder-icon img {
    width: 48px;
    height: 48px;
  }

  .food-highlight-icon img {
    width: 56px;
    height: 56px;
  }

  .food-route-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .food-anchor-nav {
    border-radius: 24px;
  }

  .food-highlight-metrics,
  .food-stat-list {
    grid-template-columns: 1fr;
  }

  .food-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .food-button,
  .food-card-button,
  .food-inline-link,
  .food-ghost-button,
  .food-preset-button {
    width: 100%;
    justify-content: center;
  }
}