/* Burger House — Scandi-minimal design tokens */
:root {
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bg: #f6f3ec;
  --surface: #ffffff;
  --surface-2: #efebe2;
  --ink: #1a1714;
  --ink-2: #4a443d;
  --ink-3: #8a8278;
  --line: #e4dfd4;
  --accent: #c1410f;
  --accent-ink: #ffffff;
  --accent-soft: #fde7d8;
  --positive: #4a6b3a;
  --warn: #9a6b1a;
}

[data-theme="charcoal"] {
  --bg: #14110e;
  --surface: #1d1a16;
  --surface-2: #25211c;
  --ink: #f4ede0;
  --ink-2: #c4bcae;
  --ink-3: #807a70;
  --line: #2e2924;
  --accent: #e8804a;
  --accent-ink: #14110e;
  --accent-soft: #2a1f17;
}

[data-theme="forest"] {
  --bg: #f1efe7;
  --surface: #ffffff;
  --surface-2: #e7e6dc;
  --ink: #14201a;
  --ink-2: #3d4a44;
  --ink-3: #7d8680;
  --line: #d8d8c8;
  --accent: #2d5a3d;
  --accent-ink: #ffffff;
  --accent-soft: #d5e3d8;
}

[data-theme="butter"] {
  --bg: #fbf6e8;
  --surface: #ffffff;
  --surface-2: #f3edd9;
  --ink: #1a1610;
  --ink-2: #4a4232;
  --ink-3: #8a826e;
  --line: #ebe4cc;
  --accent: #b6892a;
  --accent-ink: #1a1610;
  --accent-soft: #f5ebc8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
  line-height: 1.5;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono { font-family: var(--font-mono); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  background: var(--ink);
  color: var(--bg);
  transition: transform .15s, background .15s, color .15s, border-color .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.no-bar::-webkit-scrollbar { display: none; }
.no-bar { scrollbar-width: none; }

.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(45deg, var(--surface-2) 0 12px, transparent 12px 24px),
    var(--surface);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  overflow: hidden;
}

.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-2); }

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

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.pill.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.lift { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(0,0,0,.18); }

.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.wordmark::after { content: '.'; color: var(--accent); }

h1, h2, h3, p { text-wrap: pretty; }

/* ============ Responsive ============ */

/* Tablet */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-grid { padding: 48px 40px !important; gap: 24px !important; }
  .product-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* Mobile */
@media (max-width: 760px) {
  .container { padding: 0 18px; }
  .hide-mobile { display: none !important; }

  /* Nav */
  .nav-bar-row { height: 60px !important; }
  .nav-bar-links { display: none !important; }
  .btn-sm { height: 38px; padding: 0 14px; }

  /* Generic grid collapses */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .grid-2-stack { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 36px 24px !important;
    min-height: 0 !important;
    gap: 28px !important;
    border-radius: 22px !important;
  }
  .hero-h1 { font-size: clamp(40px, 11vw, 56px) !important; }
  .hero-stats { gap: 18px !important; flex-wrap: wrap; }
  .hero-circle { width: min(95vw, 520px) !important; height: min(95vw, 520px) !important; margin-left: -8% !important; }
  .hero-circle svg { width: 230px !important; height: 230px !important; }
  .hero-circle video { width: 115% !important; height: 115% !important; object-fit: cover !important; }
  .hero-pill-tr { top: 8px !important; right: -6px !important; }
  .hero-pill-bl { bottom: 12px !important; left: -6px !important; }

  /* Promo strip */
  .promo-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .promo-hero { padding: 24px !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .promo-hero h3 { font-size: 22px !important; }

  /* Section spacing */
  .section-pad-lg { padding: 40px 0 24px !important; }
  .section-pad { padding: 32px 0 !important; }
  .display-h2 { font-size: 32px !important; }
  .display-h2-lg { font-size: 38px !important; line-height: 1.05 !important; }

  /* Featured row header */
  .section-head { flex-direction: column; align-items: flex-start !important; gap: 14px; margin-bottom: 22px !important; }

  /* Story strip */
  .story-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .story-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Menu landing */
  .menu-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Category page */
  .category-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .category-head { flex-direction: column; align-items: flex-start !important; gap: 14px; }
  .category-h1 { font-size: 44px !important; }

  /* Product page */
  .product-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .product-image { border-radius: 22px !important; }
  .product-image svg { width: 78% !important; height: auto !important; }
  .product-h1 { font-size: clamp(36px, 9vw, 48px) !important; }
  .product-meta-row { flex-wrap: wrap; gap: 10px !important; }
  .nutrition-card { padding: 20px !important; }
  .nutrition-energy {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .nutrition-energy > .col + .col {
    padding-left: 0 !important;
    border-left: 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--line) !important;
    width: 100%;
  }

  /* Ingredient row tightening */
  .ingredient-row { gap: 12px !important; padding: 12px 0 !important; }
  .ingredient-tile { width: 48px !important; height: 48px !important; border-radius: 12px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start !important; }

  /* Smaller card paddings */
  .card-pad { padding: 20px !important; }

  /* CategoryTile shrink */
  .cat-tile { padding: 16px !important; gap: 14px !important; }
  .cat-tile .cat-illo-wrap { width: 64px !important; height: 64px !important; border-radius: 12px !important; }
  .cat-tile .cat-illo-wrap svg { width: 54px !important; height: 54px !important; }
}

/* Very small (≤ 380) */
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .category-grid { grid-template-columns: 1fr !important; }
  .hero-circle { width: 95vw !important; height: 95vw !important; }
  .hero-circle svg { width: 200px !important; height: 200px !important; }
}

/* Touch tap-target floor */
@media (hover: none) {
  .lift:hover { transform: none; box-shadow: none; }
  .btn:hover { transform: none; }
}

/* === Locations / Rewards / Order — added pages === */

.locations-grid .leaflet-container {
  font-family: var(--font-sans);
  border-radius: 20px;
}
.locations-grid .leaflet-popup-content-wrapper { border-radius: 12px; }
.bh-pin { background: transparent; border: 0; }

@media (max-width: 900px) {
  .locations-grid { grid-template-columns: 1fr !important; }
  .locations-grid > div:first-child { position: static !important; height: 50vh !important; min-height: 360px !important; }
  .rewards-header { grid-template-columns: 1fr !important; gap: 24px !important; }
  .rewards-header > div:last-child { aspect-ratio: 1.7 / 1 !important; }
  .order-grid { grid-template-columns: 1fr !important; }
  .order-summary { position: static !important; }
  .locations-cta { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .fulfil-row { flex-direction: column !important; }
  .fulfil-row > button { min-width: 0 !important; width: 100% !important; }
  .perks-grid { grid-template-columns: 1fr !important; }
  .rewards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}