/* Mumu's Pikliz — Editorial · Haitian accents */
:root {
  --cream: #ffffff;
  --cream-2: #f4f4f4;
  --tomato: #c8112a;
  --mango: #d4a32c;
  --palm: #0a2a6c;
  --ink: #0e0e14;
  --ink-2: #5a5a62;
  --paper: #f9f9f9;
  --hair: rgba(14,14,20,0.10);
  --hair-dark: rgba(14,14,20,0.18);
  --alt-bg: #f9f9f9;
  --alt-ink: #0e0e14;
  --alt-hair: rgba(14,14,20,0.10);
  /* Always-light tokens for content sitting on the dark hero / footer.
     These stay readable regardless of the active palette. */
  --on-dark: #f7ecd1;
  --on-dark-2: rgba(247,236,209,0.75);
  /* Nav height is derived, not asserted: it's the actual sum of the logo
     size and the nav's own vertical padding below, both fluid. Every
     "fit this section in the viewport" calculation elsewhere (hero,
     panels) subtracts --nav-h from 100vh/100svh before computing its own
     fluid unit, so a big nav genuinely eats into their budget instead of
     being an approximate fixed offset. On a very short viewport the nav
     itself shrinks too, instead of eating a fixed 88px no matter what. */
  --nav-logo-size: clamp(36px, 5.6vh, 48px);
  --nav-pad-v: clamp(10px, 2.2vh, 20px);
  --nav-h: calc(var(--nav-logo-size) + var(--nav-pad-v) * 2);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.site-shift { padding-top: var(--nav-h); }

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}
h1 { font-weight: 400; }
.serif-i { font-style: italic; font-weight: 300; }
.italiana { font-family: "Italiana", "Cormorant Garamond", serif; font-weight: 400; }
.script {
  font-family: "Allura", cursive;
  font-weight: 400;
}
.eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ink-2);
}
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
img, video { max-width: 100%; display: block; }

/* nav */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  background: #0a2a6c;
  border-bottom: 1px solid rgba(247,236,209,0.12);
  color: #f7ecd1;
}
.nav.on-dark {
  background: #0a2a6c;
  border-bottom: 1px solid rgba(247,236,209,0.12);
  color: #f7ecd1;
}
.nav.on-dark .nav-links a { color: rgba(247,236,209,0.78); }
.nav.on-dark .nav-links a:hover { color: #f7ecd1; }
.nav.on-dark .nav-logo-text .nl-1 { color: #f7ecd1; }

.nav-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--nav-pad-v) 40px; gap: 32px;
}
.nav-logo-wrap {
  display: flex; align-items: center; gap: 12px;
}
.nav-logo-mark {
  width: var(--nav-logo-size); height: var(--nav-logo-size);
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  background: rgba(255,255,255,0.95);
  padding: 4px;
}
.nav.on-dark .nav-logo-mark {
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  padding: 4px;
}
.nav-logo-text {
  display: flex; align-items: center;
  font-family: "Cormorant Garamond", serif;
}
.nav-logo-text .nl-1 {
  font-weight: 500; font-size: 22px;
  font-style: italic;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
}

.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(247,236,209,0.78);
  transition: opacity .15s;
}
.nav-links a:hover { opacity: 0.6; }
.nav-links a.active {
  font-style: italic;
  color: #f5cf58;
}

.nav-ig-link {
  color: #f7ecd1;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; flex-shrink: 0;
  transition: opacity .15s;
}
.nav-ig-link:hover { opacity: 0.7; }

.nav-cart-btn {
  position: relative;
  background: transparent; color: #f7ecd1; border: none;
  padding: 6px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.nav-cart-btn:hover { opacity: 0.7; }
.nav-cart-badge {
  position: absolute; top: -2px; right: -4px;
  background: var(--tomato); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  opacity: 0; transition: opacity .15s;
}
body.has-cart-items .nav-cart-badge { opacity: 1; }

/* Hamburger button — hidden on desktop */
.nav-menu-btn {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer; padding: 8px;
  flex-shrink: 0;
}
.nav-menu-btn span {
  display: block;
  width: 22px; height: 2px;
  background: #f7ecd1;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-menu-btn.open span:nth-child(2) { opacity: 0; }
.nav-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas mobile menu — slides down from below the fixed nav bar */
.nav-mobile-menu {
  position: fixed;
  top: var(--nav-h); left: 0;
  width: 100%; height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  background: #0a2a6c;
  border: 1.5px solid #1a4a9c;
  border-top: none;
  z-index: 49;
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 40px;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.nav-mobile-menu.open {
  transform: translateY(0);
  pointer-events: auto;
}
.nav-mobile-menu a {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 48px; font-weight: 300; font-style: italic;
  color: rgba(247,236,209,0.78);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(247,236,209,0.1);
  transition: color .15s;
}
.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover { color: #f7ecd1; }
.nav-mobile-menu a.active { color: #f5cf58; }
body.nav-menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-menu-btn { display: flex; }
}

/* container */
.container { max-width: 1240px; margin: 0 auto; padding: 0 64px; }
section { padding: 120px 0; }

/* Homepage sections: one screen per section on desktop, so the page reads
   as a sequence of full-height panels instead of a long scroll of
   oversized padding. Mobile keeps natural content height (see ≤900 block).
   Unlike the hero, these panels are min-height (not a hard cap), so if a
   section's content ever needs more room than the panel offers, it simply
   grows — it never clips. They target 98svh rather than the hero's 100svh
   so each panel visibly starts to hand off to the next as you approach the
   bottom of the viewport, instead of a hard full-screen cut.
   --panel-unit mirrors --hero-unit's approach on .hero-cover: one fluid,
   viewport-width-AND-height-aware value driving the panel's own padding,
   so "how much breathing room a panel gets" scales as one dynamic knob
   instead of a hardcoded 80px that stayed constant regardless of screen
   size. Like --hero-unit, its height term is a fraction of the panel's
   real available height (100vh - nav-h), not raw vh, so a bigger or
   smaller nav shifts the budget instead of being ignored. */
@media (min-width: 901px) {
  .brand-intro,
  .menu-section,
  .recipes,
  .press,
  .locations {
    --panel-unit: clamp(14px, min(2vw, calc((100vh - var(--nav-h)) * 0.033)), 28px);
    min-height: calc(98svh - var(--nav-h));
    display: flex;
    align-items: center;
    padding: calc(var(--panel-unit) * 1.6) 0;
  }
  .brand-intro > .container,
  .menu-section > .container,
  .recipes > .container,
  .press > .container,
  .locations > .container {
    width: 100%;
  }
}

/* Haitian flag section variants — alternating blue & red sections */
.section-flag-blue {
  background: #0a2a6c;
  color: #f7ecd1;
  --ink-2: #f5cf58;
  border-top: 1px solid rgba(247,236,209,0.12);
  border-bottom: 1px solid rgba(247,236,209,0.12);
}
.section-flag-blue .section-eyebrow,
.section-flag-blue .story-eyebrow {
  color: #f5cf58;
}
.section-flag-blue h2,
.section-flag-blue h3,
.section-flag-blue .loc-name,
.section-flag-blue .recipe-card h3,
.section-flag-blue .press-quote {
  color: #f7ecd1;
}
.section-flag-blue .lede,
.section-flag-blue .recipe-card p,
.section-flag-blue .loc-addr,
.section-flag-blue .press-attrib .name,
.section-flag-blue .press-attrib .where,
.section-flag-blue .pullquote .a,
.section-flag-blue .story p {
  color: rgba(247,236,209,0.78);
}
.section-flag-blue .loc-tag,
.section-flag-blue .recipe-tag,
.section-flag-blue .post-tag {
  color: #f5cf58;
}
.section-flag-blue .pullquote {
  border-left-color: #f5cf58;
}
.section-flag-blue .pullquote .q {
  color: #f7ecd1;
}
.section-flag-blue .recipe-card,
.section-flag-blue .press-card,
.section-flag-blue .loc-card {
  border-top-color: rgba(247,236,209,0.18);
}
.section-flag-blue .loc-schedule {
  border-color: rgba(247,236,209,0.18);
}
.section-flag-blue .recipe-photo {
  background: rgba(247,236,209,0.06);
  border: 1px solid rgba(247,236,209,0.14);
}
.section-flag-blue .press-stars {
  color: #f5cf58;
}
.section-flag-blue .story-photo {
  border: 1px solid rgba(247,236,209,0.14);
}
.section-flag-blue .contact-block {
  border-top-color: rgba(247,236,209,0.16);
}
.section-flag-blue .contact-list li {
  border-color: rgba(247,236,209,0.14);
}
.section-flag-blue .contact-list li:last-child {
  border-bottom-color: rgba(247,236,209,0.14);
}
.section-flag-blue .contact-list .k {
  color: #f5cf58;
}
.section-flag-blue .contact-list a:hover {
  color: #f5cf58;
}
.section-flag-blue .cf-label { color: #f5cf58; }
.section-flag-blue .cf-input {
  color: #f7ecd1;
  border-bottom-color: rgba(247,236,209,0.28);
}
.section-flag-blue .cf-input:focus {
  border-bottom-color: #f5cf58;
}
.section-flag-blue .cf-input::placeholder {
  color: rgba(247,236,209,0.38);
}
.section-flag-blue .btn-primary {
  background: #f5cf58;
  color: #0a2a6c;
  border-color: #f5cf58;
}
.section-flag-blue .btn-primary:hover {
  background: transparent;
  color: #f5cf58;
  border-color: #f5cf58;
}

/* Red flag section — wine red with gold lettering */
.section-flag-red {
  background: #b8112a;
  color: #fef3d6;
  --ink-2: #f5cf58;
  border-top: 1px solid rgba(254,243,214,0.16);
  border-bottom: 1px solid rgba(254,243,214,0.16);
}
.section-flag-red .section-eyebrow,
.section-flag-red .story-eyebrow {
  color: #f5cf58;
}
.section-flag-red h2,
.section-flag-red h3,
.section-flag-red .product-name,
.section-flag-red .loc-name,
.section-flag-red .recipe-card h3,
.section-flag-red .press-quote {
  color: #fef3d6;
}
.section-flag-red .lede,
.section-flag-red .product-desc,
.section-flag-red .recipe-card p,
.section-flag-red .loc-addr,
.section-flag-red .pullquote .a,
.section-flag-red .story p {
  color: rgba(254,243,214,0.78);
}
.section-flag-red .loc-tag,
.section-flag-red .recipe-tag,
.section-flag-red .post-tag {
  color: #f5cf58;
}
.section-flag-red .product-card .product-price-row {
  border-color: rgba(254,243,214,0.20);
}
.section-flag-red .product-photo {
  background: rgba(254,243,214,0.06);
  color: #fef3d6;
  border: 1px solid rgba(254,243,214,0.18);
}
.section-flag-red .shop-link {
  color: #f5cf58;
}
.section-flag-red .shop-link::after {
  background: #f5cf58;
}
.section-flag-red .heat-pill {
  background: rgba(254,243,214,0.92);
  color: #b8112a;
}
.section-flag-red .recipe-card,
.section-flag-red .press-card,
.section-flag-red .loc-card {
  border-top-color: rgba(254,243,214,0.20);
}
.section-flag-red .press-stars {
  color: #f5cf58;
}
.section-flag-red .recipe-photo {
  background: rgba(254,243,214,0.06);
  border: 1px solid rgba(254,243,214,0.14);
}
.section-flag-red .btn-primary {
  background: #f5cf58;
  color: #b8112a;
  border-color: #f5cf58;
}
.section-flag-red .btn-primary:hover {
  background: transparent;
  color: #f5cf58;
  border-color: #f5cf58;
}
.section-flag-red .btn-ghost {
  border-color: rgba(254,243,214,0.40);
  color: #fef3d6;
}
.section-flag-red .btn-ghost:hover {
  background: #fef3d6;
  color: #b8112a;
}
.section-flag-red .pullquote {
  border-left-color: #f5cf58;
}
.section-flag-red .pullquote .q {
  color: #fef3d6;
}

/* White cards inside flag-colored sections — give the content a "pinned-on"
   editorial feel and lift the typography off the bold flag backgrounds. */
.section-flag-blue .recipe-card,
.section-flag-blue .press-card,
.section-flag-blue .loc-card,
.section-flag-red .recipe-card,
.section-flag-red .press-card,
.section-flag-red .loc-card {
  background: #fdfaf2;
  color: #1a1410;
  padding: 32px;
  border-top: 0;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  position: relative;
}
.section-flag-blue .recipe-card h3,
.section-flag-blue .press-card .press-quote,
.section-flag-blue .loc-card .loc-name,
.section-flag-red .recipe-card h3,
.section-flag-red .press-card .press-quote,
.section-flag-red .loc-card .loc-name {
  color: #1a1410;
}
.section-flag-blue .recipe-card p,
.section-flag-blue .loc-card .loc-addr,
.section-flag-red .recipe-card p,
.section-flag-red .loc-card .loc-addr,
.section-flag-blue .press-attrib .name,
.section-flag-red .press-attrib .name {
  color: #4a4a52;
}
.section-flag-blue .press-attrib .where,
.section-flag-red .press-attrib .where,
.section-flag-blue .press-stars,
.section-flag-red .press-stars,
.section-flag-blue .recipe-num,
.section-flag-red .recipe-num,
.section-flag-blue .loc-tag,
.section-flag-red .loc-tag,
.section-flag-blue .recipe-tag,
.section-flag-red .recipe-tag {
  color: #b8860b;
}
.section-flag-blue .loc-card .loc-schedule,
.section-flag-red .loc-card .loc-schedule {
  border-color: rgba(14,14,20,0.10);
}
.section-flag-blue .recipe-photo,
.section-flag-red .recipe-photo {
  background: #f4eed8;
  border: 1px solid rgba(14,14,20,0.10);
}

/* Gold corner flourish — small star on each white card */
.section-flag-blue .recipe-card::before,
.section-flag-blue .press-card::before,
.section-flag-blue .loc-card::before,
.section-flag-red .recipe-card::before,
.section-flag-red .press-card::before,
.section-flag-red .loc-card::before {
  content: "✦";
  position: absolute;
  top: 16px; right: 20px;
  font-size: 14px;
  color: #d4a32c;
  opacity: 0.7;
}

/* Story pullquote — white card on flag bg */
.section-flag-blue .pullquote,
.section-flag-red .pullquote {
  background: #fdfaf2;
  color: #1a1410;
  border-left: 3px solid #d4a32c;
  padding: 28px 32px;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
}
.section-flag-blue .pullquote .q,
.section-flag-red .pullquote .q {
  color: #1a1410;
}
.section-flag-blue .pullquote .a,
.section-flag-red .pullquote .a {
  color: #b8860b;
}

/* Contact block — frame the whole form/info block as a card on flag bg */
.section-flag-blue .contact-block,
.section-flag-red .contact-block {
  background: #fdfaf2;
  color: #1a1410;
  padding: 64px;
  border-radius: 4px;
  margin-top: 96px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  border-top: 0;
}
.section-flag-blue .contact-block h2,
.section-flag-red .contact-block h2 {
  color: #1a1410;
}
.section-flag-blue .contact-block .lede,
.section-flag-red .contact-block .lede,
.section-flag-blue .contact-block .contact-list li,
.section-flag-blue .contact-block .contact-list a,
.section-flag-red .contact-block .contact-list li,
.section-flag-red .contact-block .contact-list a {
  color: #4a4a52;
}
.section-flag-blue .contact-block .contact-list .k,
.section-flag-red .contact-block .contact-list .k,
.section-flag-blue .contact-block .cf-label,
.section-flag-red .contact-block .cf-label,
.section-flag-blue .contact-block .section-eyebrow,
.section-flag-red .contact-block .section-eyebrow {
  color: #b8860b;
}
.section-flag-blue .contact-block .contact-list li,
.section-flag-red .contact-block .contact-list li {
  border-color: rgba(14,14,20,0.10);
}
.section-flag-blue .contact-block .contact-list li:last-child,
.section-flag-red .contact-block .contact-list li:last-child {
  border-bottom-color: rgba(14,14,20,0.10);
}
.section-flag-blue .contact-block .cf-input,
.section-flag-red .contact-block .cf-input {
  color: #1a1410;
  border-bottom-color: rgba(14,14,20,0.18);
}
.section-flag-blue .contact-block .cf-input:focus,
.section-flag-red .contact-block .cf-input:focus {
  border-bottom-color: #d4a32c;
}
.section-flag-blue .contact-block .cf-input::placeholder,
.section-flag-red .contact-block .cf-input::placeholder {
  color: rgba(14,14,20,0.30);
}
.section-flag-blue .contact-block .btn-primary,
.section-flag-red .contact-block .btn-primary {
  background: #1a1410;
  color: #fdfaf2;
  border-color: #1a1410;
}
.section-flag-blue .contact-block .btn-primary:hover,
.section-flag-red .contact-block .btn-primary:hover {
  background: #b8860b;
  border-color: #b8860b;
}

/* Story photo frame — soften the dark-on-dark void */
.section-flag-blue .story-photo,
.section-flag-red .story-photo {
  background: #fdfaf2;
  border: 1px solid rgba(253,250,242,0.20);
  padding: 12px;
  border-radius: 4px;
}

/* Gold script accents for italic-in-h2 phrases */
.gold-script {
  font-family: "Allura", cursive;
  color: #d4a32c;
  font-weight: 400;
  font-style: normal;
}
.section-flag-blue .gold-script,
.section-flag-red .gold-script {
  color: #f5cf58;
}

/* HERO COVER — full-bleed photo, centered emblem + title */
.hero-cover-wrap {
  background: #0a2a6c;
}
.hero-cover {
  /* Single source of truth for hero scale: grows fluidly with both the
     width AND height of the viewport, so every element below that
     references it resizes together automatically — no per-element
     breakpoints to hand-tune as screens get bigger.
     The height term is a fraction of (100vh - nav-h) — the hero's actual
     available height, nav included — not raw vh: it's sized so the logo
     + text + buttons + scroll-hint stack (~31 hero-units of fluid height
     plus ~104px of fixed-size chrome) always fits inside that real
     budget, on short/wide viewports (laptops, landscape tablets) as well
     as tall ones, so the content never grows past the section and pushes
     the buttons/scroll-hint off screen — and if the nav itself gets
     bigger or smaller, this adjusts with it instead of drifting out of
     sync. */
  --hero-unit: clamp(10px, min(2.4vw, calc((100vh - var(--nav-h)) * 0.031 - 4px)), 30px);
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100svh - var(--nav-h) + 2px);
  background: #0a0605;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: start;
  justify-items: center;
  color: var(--on-dark);
}
.hero-carousel {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  background: #0a0605;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active {
  opacity: 1;
}
.hero-slide video,
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-cover::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(8,6,4,0.45) 0%, rgba(8,6,4,0.30) 40%, rgba(8,6,4,0.55) 100%);
}
.hero-cover-inner {
  position: relative; z-index: 3;
  text-align: center;
  padding: calc(var(--hero-unit) * 3) calc(var(--hero-unit) * 1.2) calc(var(--hero-unit) * 2.4);
  max-width: calc(var(--hero-unit) * 40);
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--hero-unit) * 1.2);
}
.hero-old-logo {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--hero-unit) * 0.4);
}
.hero-logo-mark {
  width: calc(var(--hero-unit) * 24);
  height: auto;
}
.hero-logo-text {
  width: calc(var(--hero-unit) * 27);
  height: auto;
}
.hero-emblem-img {
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  object-fit: contain;
  padding: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.hero-title {
  font-family: "Allura", "Caveat", cursive;
  font-weight: 400;
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.82;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--on-dark);
  text-shadow: 0 4px 32px rgba(0,0,0,0.4);
}
.hero-tag {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(247,236,209,0.85);
  padding: 12px 32px 0;
  position: relative;
}
.hero-tag::before, .hero-tag::after {
  content: ""; position: absolute; top: 50%;
  width: 24px; height: 1px;
  background: rgba(247,236,209,0.4);
}
.hero-tag::before { left: -8px; }
.hero-tag::after { right: -8px; }
.hero-cover-buttons {
  display: flex; gap: 12px; margin-top: calc(var(--hero-unit) * 0.13);
}
.btn-cover {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 36px; min-width: 140px;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--on-dark);
  border: 1px solid rgba(247,236,209,0.5);
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.btn-cover:hover { background: var(--on-dark); color: #0e0e14; border-color: var(--on-dark); }
.btn-cover.btn-red { background: var(--tomato); color: var(--on-dark); border-color: var(--tomato); }
.btn-cover.btn-red:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn-cover.btn-blue { background: var(--palm); color: var(--on-dark); border-color: var(--palm); }
.btn-cover.btn-blue:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }

/* Scrolling hint */
.scroll-hint {
  margin-top: calc(var(--hero-unit) * -0.55);
  font-family: "DM Sans", sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 36px;
  background: rgba(255,255,255,0.35);
  animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; }
  50% { transform: scaleY(1); }
}

/* Buttons (general) */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  font-family: "DM Sans", sans-serif;
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
  border: 1px solid var(--ink);
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair-dark); }
.btn:disabled, .btn[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* BRAND INTRO */
.brand-intro {
  background: #0a2a6c;
  color: #f7ecd1;
}
.brand-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--panel-unit, 28px) * 2.8);
  align-items: center;
  padding: calc(var(--panel-unit, 28px) * 4) 0;
}
.brand-intro-photo {
  overflow: hidden;
  border-radius: 4px;
  /* Centers the (shrink-wrapped) .video-frame without touching how the
     video itself is sized. */
  text-align: center;
}
.brand-intro-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.video-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.brand-intro-photo video {
  /* Height is the driver, set from the real viewport budget (same one the
     panel itself uses: 98svh minus nav height minus the panel's own
     vertical padding, --panel-unit * 1.6 top and bottom) — never a fixed
     px value, so it shrinks/grows with the screen. Width stays auto and
     is derived purely from aspect-ratio, so the shape never changes. */
  display: block;
  height: calc(98svh - var(--nav-h) - var(--panel-unit, 28px) * 3.2);
  width: auto;
  max-width: 100%;
  aspect-ratio: 9/16;
  cursor: pointer;
}
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(10, 42, 108, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.video-play-btn svg { margin-left: 5px; }
.video-play-btn:hover {
  background: rgba(10, 42, 108, 0.65);
  transform: translate(-50%, -50%) scale(1.06);
}
.brand-intro-photo.is-playing .video-play-btn {
  opacity: 0;
  pointer-events: none;
}
.video-mute-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(10, 42, 108, 0.45);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.video-mute-btn::after {
  content: "";
  position: absolute;
  width: 26px; height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg) scaleX(0);
  transition: transform 0.15s ease;
}
.video-mute-btn.is-muted::after { transform: rotate(-45deg) scaleX(1); }
.video-mute-btn:hover { background: rgba(10, 42, 108, 0.65); }
.brand-intro-photo.is-playing .video-mute-btn {
  opacity: 1;
  pointer-events: auto;
}
.brand-intro-text .section-eyebrow { color: rgba(247,236,209,0.6); }
.brand-intro-text .btn-primary { background: #f7ecd1; color: #0a2a6c; border-color: #f7ecd1; }
.brand-intro-text .btn-primary:hover { background: var(--tomato); border-color: var(--tomato); color: #f7ecd1; }
.brand-intro-text h2 { color: #f7ecd1; margin: 16px 0 24px; }
.brand-intro-text p { color: rgba(247,236,209,0.8); font-size: 18px; line-height: 1.7; }
.brand-tagline {
  border-top: 1px solid rgba(247,236,209,0.12);
  padding: 48px 0 0;
  text-align: center;
}
.brand-tagline-head {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  font-style: italic;
  color: #f7ecd1;
  margin: 0 0 12px;
}
.brand-tagline-sub {
  font-size: 16px;
  color: rgba(247,236,209,0.65);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}
@media (max-width: 900px) {
  .brand-intro-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 80px 0;
  }
}

/* STORY */
.story {
}
.story-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 96px; align-items: center;
}
.story-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-photo image-slot { width: 100%; height: 100%; display: block; }
.story-photo .placeholder {
  position: absolute; inset: 0;
  background: var(--cream-2);
  display: grid; place-items: center;
}
.story-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.32em;
  color: var(--tomato);
  margin-bottom: 32px;
}
.story h2 {
  font-size: clamp(38px, 4.5vw, 64px);
  margin-bottom: 32px;
  font-style: italic;
  font-weight: 400;
}
.story p {
  font-size: 17px;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 540px;
  line-height: 1.65;
}
.pullquote {
  margin-top: 40px;
  padding-left: 32px;
  border-left: 1px solid var(--tomato);
}
.pullquote .q {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
}
.pullquote .a {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-top: 16px; color: var(--ink-2);
}

/* Section heads — restrained */
.section-head {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-bottom: calc(var(--panel-unit, 28px) * 1.2);
  gap: calc(var(--panel-unit, 28px) * 1.2);
  align-items: end;
}
.section-head h2 {
  font-size: clamp(28px, 3vw, 46px);
  font-style: italic;
  font-weight: 400;
}
.section-head .lede {
  max-width: 420px; font-size: 15px; color: var(--ink-2);
  line-height: 1.6;
  justify-self: end;
}
.section-eyebrow {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.32em;
  color: var(--tomato); margin-bottom: 16px;
}

/* PRODUCTS — editorial list */
.products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
@media (max-width: 1100px) {
  .products { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.product-card {
  background: transparent;
  display: flex; flex-direction: column;
  position: relative;
  transition: opacity .2s;
}
.product-card:hover { opacity: 0.92; }
.product-photo {
  aspect-ratio: 3/4;
  background: var(--paper);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  color: var(--ink);
}
.product-illust {
  position: absolute; inset: 0;
  z-index: 1;
  display: grid; place-items: center;
  opacity: 0.78;
}
.product-photo image-slot {
  position: absolute; inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  display: block;
  background: transparent;
}
/* Hide image-slot's empty placeholder so the line illustration shows through. */
.product-photo image-slot::part(empty) { display: none; }
.product-photo image-slot::part(frame) { background: transparent; }
.heat-pill {
  position: absolute; top: 16px; left: 16px;
  z-index: 4;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #4a4a52;
  display: flex; gap: 8px; align-items: center;
}
.sold-out-badge {
  position: absolute; top: 16px; right: 16px;
  z-index: 4;
  background: var(--ink);
  color: var(--cream);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.product-card.sold-out .product-photo,
.jar-card.sold-out .jar-card-photo,
.menu-item.sold-out .menu-item-photo {
  opacity: 0.55;
}
.product-card.sold-out .shop-link,
.menu-item.sold-out .menu-item-name {
  color: var(--ink-2);
}
.product-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px; font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.product-desc {
  font-size: 14px; color: var(--ink-2);
  line-height: 1.55; margin-bottom: 20px;
  flex: 1;
}
.product-price-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.product-price {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500; font-size: 20px;
}
.product-price .from {
  font-family: "DM Sans", sans-serif;
  font-size: 10px; color: var(--ink-2); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  display: block; margin-bottom: 2px;
}
.shop-link {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.shop-link::after {
  content: ""; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.shop-link:hover::after { transform: scaleX(1); }

/* Card variant — Editorial (full-bleed photo) */
.product-card.editorial .product-photo {
  background: var(--ink);
}

/* Card variant — Bold */
.product-card.bold .product-photo {
  background: var(--ink);
}

/* HOW TO USE / Recipes */
.recipes {
}
.recipes .section-eyebrow { color: var(--tomato); }
.recipe-grid {
  display: grid;
  /* Always 3 across, at every width. minmax(0, 1fr) (not a bare 1fr) so
     a track can shrink below its content's min-content width — the
     Instagram iframe inside has a fixed pixel width of its own and would
     otherwise drag its column wider than the row. The columns are capped
     at ~260px each via max-width on the grid (not min(260px, 1fr) — fr
     isn't a length, so that's invalid and the browser discards the whole
     declaration, which is exactly what stacked these into one column).
     Narrower columns also keep the embed in its compact layout. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: calc(260px * 3 + 20px * 2);
  margin: 0 auto;
  gap: 20px;
}
.recipe-card {
  display: flex; flex-direction: column;
  padding-top: 14px;
  border-top: 1px solid var(--hair-dark);
}
.recipe-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.recipe-card h3 {
  font-size: 19px; margin-bottom: 6px;
  font-style: italic;
  font-weight: 400;
}
.recipe-card p {
  font-size: 12px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
}
.recipe-tag {
  display: inline-block;
  margin-top: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tomato);
}
.recipe-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}
.recipe-link:hover { color: var(--tomato); }
.recipe-photo {
  /* Same taller-than-wide, nav-h-aware treatment as .jar-card-photo — the
     text below (.recipe-card h3/p, .recipe-num) is trimmed down to match.
     Smaller fraction/caps than .jar-card-photo: this card carries more
     chrome around the photo (a number label, a 3-line description) than
     the product card does, so the photo needs to give up more of the
     panel's budget for everything to still fit in view together. */
  height: clamp(180px, calc((100vh - var(--nav-h)) * 0.34), 340px);
  background: var(--cream);
  border: 1px solid var(--hair);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.recipe-photo.has-embed {
  /* Instagram/TikTok reels are portrait video and Instagram's own embed.js
     sets the iframe's height once it loads — we can't make that height
     fluid. Instead we cap how tall the card is allowed to be and let it
     crop, so a 9:16 reel can't single-handedly blow the panel past its
     budget the way the old fixed 560px min-height did on short screens. */
  /* A ceiling only, no floor: the JS fit sets the real height from the
     post itself (header + photo, footer cropped) and this is just the
     most the panel's budget will let it take. */
  height: min(calc((100vh - var(--nav-h)) * 0.4), 420px);
  background: transparent;
  border: 0;
  overflow: hidden;
  position: relative;
}
.recipe-photo.has-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cream) 25%, #e8dfc8 50%, var(--cream) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  z-index: 0;
}
.recipe-photo.has-embed blockquote,
.recipe-photo.has-embed iframe {
  /* Forcing this down to width:100% of a narrow card broke Instagram's
     own embed layout (it isn't truly responsive below its own design
     width — the "View profile" button and photo just got clipped rather
     than reflowing). So instead we let it render at its natural size and
     scale the whole thing down uniformly (see initRecipeEmbedFit in
     landing.js) — everything stays legible and in proportion, just
     smaller, instead of being cropped. */
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  z-index: 1;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.recipe-photo image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* PRESS */
.press {
}
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}
.press-card {
  display: flex; flex-direction: column; gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--hair-dark);
}
.press-stars {
  color: var(--tomato);
  letter-spacing: 6px;
  font-size: 12px;
}
.press-quote {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
}
.press-attrib {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto;
}
.press-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink-2); color: var(--cream);
  display: grid; place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
}
.press-avatar.mango { background: var(--mango); color: var(--ink); }
.press-avatar.palm { background: var(--palm); color: var(--on-dark); }
.press-attrib .name { font-weight: 500; font-size: 14px; }
.press-attrib .where {
  font-size: 11px; color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Contact block (inline within Locations) */
.contact-block {
  /* Same panel-unit basis as the rest of the homepage panels, instead of
     its own separate hardcoded 120px/80px — this block sits inside
     .locations underneath that section's own heading, so keeping it lean
     matters even more here than elsewhere. */
  margin-top: calc(var(--panel-unit, 28px) * 1.6);
  padding-top: calc(var(--panel-unit, 28px) * 1.4);
  border-top: 1px solid var(--hair);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--panel-unit, 28px) * 1.6);
  align-items: start;
}
.contact-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex; flex-direction: column;
}
.contact-list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--hair);
  font-size: 14px;
}
.contact-list li:last-child { border-bottom: 1px solid var(--hair); }
.contact-list .k {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-2);
  align-self: center;
}
.contact-list a:hover { color: var(--tomato); }

.contact-form {
  display: flex; flex-direction: column;
  gap: 14px;
}
.cf-row { display: flex; flex-direction: column; gap: 5px; }
.cf-label {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-2);
}
.cf-input {
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--hair-dark);
  padding: 6px 0;
  outline: none;
  resize: none;
  transition: border-color .15s;
}
.cf-input::placeholder {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  font-style: italic;
}
.cf-input:focus { border-bottom-color: var(--tomato); }
.cf-textarea {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding-top: 8px;
}
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.loc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.loc-card {
  padding-top: 32px;
  border-top: 1px solid var(--hair-dark);
  display: flex; flex-direction: column;
}
.loc-tag {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--tomato); margin-bottom: 16px;
}
.loc-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 12px;
}
.loc-addr {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 24px;
  line-height: 1.6;
  white-space: pre-line;
}
.loc-schedule {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 10px 0;
  border-top: 1px solid var(--hair);
}
.loc-schedule:last-child { border-bottom: 1px solid var(--hair); }
.loc-schedule .day { font-weight: 500; }
.loc-schedule .time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.loc-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.loc-btn { font-size: 12px; padding: 8px 14px; }

/* CTA strip */
.cta-strip {
  text-align: center;
  padding: 140px 40px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.cta-strip h2 {
  font-size: clamp(48px, 7vw, 96px);
  font-style: italic;
  margin-bottom: 24px;
  font-weight: 400;
}
.cta-strip p {
  font-size: 18px; color: var(--ink-2);
  margin: 0 auto 32px;
  max-width: 560px;
  line-height: 1.6;
}

/* FOOTER */
.footer {
  background: #0e0e14; color: var(--on-dark);
  padding: 100px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px; margin-bottom: 80px;
}
.footer h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: rgba(247,236,209,0.5);
  margin-bottom: 20px;
}
.footer-logo {
  margin-bottom: 20px;
}
.footer-logo img {
  width: clamp(120px, 40%, 200px);
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.footer p {
  color: rgba(247,236,209,0.6);
  font-size: 14px;
  max-width: 300px;
  line-height: 1.7;
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: 14px;
  color: rgba(247,236,209,0.7);
  transition: color .15s;
}
.footer-links a:hover { color: var(--on-dark); }
.footer-bottom {
  border-top: 1px solid rgba(247,236,209,0.12);
  padding-top: 28px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: rgba(247,236,209,0.4);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Mobile sticky cart bar — only renders ≤900px and only when items > 0.
   Sits off-canvas at the bottom of the viewport so the user can tap straight
   to the cart from anywhere on the page. Pure-CSS hidden on desktop. */
@keyframes cart-bubble-in {
  from { transform: translateY(calc(100% + 24px)); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.mobile-cart-bar {
  display: none;
  position: fixed;
  left: 16px; right: 16px; bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  animation: cart-bubble-in .4s cubic-bezier(.34,1.56,.64,1) both;
  z-index: 80;
  padding: 16px 22px;
  background: var(--tomato);
  color: var(--cream);
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background .2s;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}
.mobile-cart-bar:hover,
.mobile-cart-bar:active { background: var(--palm); }
.mcb-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mcb-icon {
  display: block;
  flex-shrink: 0;
}
.mcb-count {
  opacity: 0.7;
  font-weight: 500;
}
.mcb-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .mobile-cart-bar { display: flex; }
  /* When the offcanvas drawer is open on mobile, hide the bar so it doesn't
     sit on top of the dimmed overlay. */
  body.cart-open .mobile-cart-bar { display: none; }
  /* Reserve a sliver at the bottom of body so footer/last section content
     isn't covered by the bar. Only when cart has items — controlled via a
     class on body that we can toggle from JS when items exist. */
  body.has-cart-items { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
:root { --cart-width: 420px; }

@media (min-width: 901px) {
  body.cart-open {
    padding-right: var(--cart-width);
  }
  body.cart-open .nav {
    width: calc(100% - var(--cart-width));
  }
}

.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(14,14,20,0.45);
  z-index: 90;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--cart-width);
  max-width: 100%;
  background: #0a2a6c;
  color: #f7ecd1;
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open { transform: translateX(0); }

@media (max-width: 900px) {
  /* Mobile: revert to overlay style — content doesn't shift, drawer floats above */
  body.cart-open { padding-right: 0; }
  .cart-overlay.open { opacity: 1; pointer-events: auto; }
  .cart-drawer { width: 100%; }
}
body.cart-open .nav-cart-btn { opacity: 0; pointer-events: none; }
@media (min-width: 901px) {
  /* Desktop: no dimming overlay, site content shrinks instead */
  .cart-overlay.open { opacity: 0; pointer-events: none; }
}
.cart-head {
  height: calc(var(--nav-h) + 1px);
  padding: 0 28px;
  display: flex; justify-content: space-between; align-items: center;
  background: #0a2a6c;
  border-bottom: 1px solid rgba(247,236,209,0.15);
  flex-shrink: 0;
}
.cart-head-title {
  display: flex; align-items: center; gap: 12px;
  color: #f5cf58;
}
.cart-head h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px; font-weight: 500;
  font-style: italic;
  color: #f5cf58;
}
.cart-close {
  width: 32px; height: 32px;
  background: transparent; color: #f7ecd1;
  display: grid; place-items: center; font-size: 18px;
  transition: opacity .15s;
}
.cart-close:hover { opacity: 0.6; }
.cart-body { flex: 1; overflow-y: auto; padding: 12px 28px; }
.cart-empty {
  text-align: center; padding: 64px 16px; color: rgba(247,236,209,0.6);
}
.cart-empty .script {
  font-size: 36px;
  color: #f7ecd1; margin-bottom: 8px; display: block;
}
.cart-empty p { font-size: 14px; }
.cart-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(247,236,209,0.15);
  align-items: center;
}
.cart-item-img {
  width: 60px; height: 60px;
  background: rgba(247,236,209,0.08);
  overflow: hidden;
  position: relative;
}
.cart-item-img image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.cart-item-name { font-weight: 500; font-size: 14px; }
.cart-item-size {
  font-size: 11px; color: rgba(247,236,209,0.6);
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-top: 2px;
}
.qty-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qty-btn {
  width: 22px; height: 22px;
  border: 1px solid rgba(247,236,209,0.3); background: transparent; color: #f7ecd1;
  display: grid; place-items: center; font-size: 12px;
  transition: background .15s, color .15s;
}
.qty-btn:hover { background: #f7ecd1; color: #0a2a6c; border-color: #f7ecd1; }
.qty-val { font-size: 13px; font-weight: 500; min-width: 16px; text-align: center; }
.cart-item-price {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500; font-size: 18px;
}
.remove-link {
  font-size: 10px; color: rgba(247,236,209,0.5);
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-left: 8px;
}
.remove-link:hover { text-decoration: underline; cursor: pointer; color: #f5cf58; }
.cart-foot {
  border-top: 1px solid rgba(247,236,209,0.15);
  padding: 24px 28px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.on-checkout-page .cart-foot [data-cart-checkout],
.on-order-page .cart-foot [data-cart-checkout] { display: none; }
.cart-totals {
  display: flex; justify-content: space-between;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500; font-size: 22px;
}
.cart-note {
  font-size: 11px; color: rgba(247,236,209,0.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* HOME JAR CARDS */
.jar-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.jar-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(254,243,214,0.06);
  border: 1px solid rgba(254,243,214,0.18);
  transition: transform .2s, box-shadow .2s;
}
.jar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.jar-card-photo {
  position: relative;
  /* Height is bound to the viewport's available space, not the grid
     column's width — a flat aspect-ratio here made the card's proportions
     follow the grid column's width, with no regard for how much vertical
     room the panel actually had (the same class of bug the hero logo
     had). Sized off (100vh - nav-h) instead, so the nav's real height is
     accounted for too, not just an approximation. The card is meant to
     read taller than it is wide (portrait, like the product jars
     themselves) — .jar-card-body below is trimmed down in text size and
     padding specifically to leave room for that taller photo within the
     same panel budget. This pair (taller media + leaner caption) is the
     pattern other card grids (.recipe-card, .press-card, …) should reuse. */
  height: clamp(240px, calc((100vh - var(--nav-h)) * 0.5), 480px);
  overflow: hidden;
  background: rgba(254,243,214,0.04);
}
.jar-card-photo .product-illust {
  position: absolute; inset: 0;
  z-index: 1; opacity: 0.78;
}
.jar-card-photo image-slot {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.jar-card-photo .heat-pill {
  position: absolute; top: 14px; left: 14px; z-index: 3;
}
.jar-card-body {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(254,243,214,0.14);
}
.jar-card-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 17px; font-weight: 500; font-style: italic;
  color: #fef3d6;
}
.jar-card-tag {
  font-size: 11px; color: #f5cf58;
  margin-top: 3px;
}

.section-cta {
  text-align: center;
  margin-top: calc(var(--panel-unit, 28px) * 1.3);
}

@media (max-width: 900px) {
  .jar-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .jar-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* PRODUCT DETAIL */
.pdp { padding: 80px 0 100px; }
.pdp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 96px; align-items: start;
}
.pdp-gallery {
  background: var(--paper);
  aspect-ratio: 4/5;
  position: relative; overflow: hidden;
  color: var(--ink);
}
.pdp-gallery .product-illust { z-index: 1; opacity: 0.78; }
.pdp-gallery image-slot {
  position: absolute; inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  display: block;
  background: transparent;
}
.pdp-gallery image-slot::part(empty) { display: none; }
.pdp-gallery image-slot::part(frame) { background: transparent; }

.pdp-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 16px;
}
.pdp-thumb {
  aspect-ratio: 1; background: var(--paper);
  position: relative; overflow: hidden;
  cursor: pointer; transition: opacity .15s;
  opacity: 0.55;
  color: var(--ink);
}
.pdp-thumb .product-illust { z-index: 1; opacity: 0.65; }
.pdp-thumb image-slot {
  position: absolute; inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  display: block;
  background: transparent;
}
.pdp-thumb image-slot::part(empty) { display: none; }
.pdp-thumb image-slot::part(frame) { background: transparent; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb.active { opacity: 1; outline: 1px solid var(--ink); outline-offset: -1px; }
.pdp-info { padding-top: 8px; }
.pdp-crumb {
  font-family: "DM Sans", sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--ink-2); margin-bottom: 32px;
}
.pdp-crumb a:hover { color: var(--ink); }
.pdp h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(56px, 7vw, 88px);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 16px;
}
.pdp-tagline {
  font-size: 18px;
  color: var(--ink-2);
  margin: 0 0 40px;
  line-height: 1.5;
  max-width: 480px;
}
.pdp-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.meta-chip {
  background: transparent;
  border: 1px solid var(--hair-dark);
  padding: 6px 12px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  display: inline-flex; align-items: center; gap: 6px;
}
.size-picker {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 32px;
}
.size-opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px;
  text-align: left;
  background: transparent;
  border: 1.5px solid var(--hair-dark);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.size-opt:hover { background: rgba(10,42,108,0.02); }
.size-opt.active { border-color: var(--palm); background: rgba(10,42,108,0.04); }
.size-opt .label {
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.size-opt .price { font-size: 12px; color: var(--ink-2); }
.qty-and-add { display: flex; gap: 12px; margin-bottom: 40px; }
.qty-stepper {
  display: flex; align-items: center;
  border: 1px solid var(--hair-dark);
  padding: 4px;
}
.qty-stepper button {
  width: 36px; height: 36px; font-size: 18px;
  transition: background .15s, color .15s;
}
.qty-stepper button:hover { background: var(--ink); color: var(--cream); }
.qty-stepper .val { padding: 0 12px; font-weight: 500; min-width: 30px; text-align: center; }
.btn-block { flex: 1; justify-content: center; }
.pdp-details {
  border-top: 1px solid var(--hair);
  padding-top: 32px;
}
.detail-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 24px; padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
}
.detail-row .k {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
}
.detail-row .v {
  color: var(--ink-2);
  line-height: 1.6;
}

/* ORDER SUCCESS PAGE (white background, red/blue text accents) */
/* CHECKOUT PAGE */
.checkout-page { padding: 0 0 120px; }
.checkout-empty { padding: 120px 0; text-align: center; font-size: 18px; }
.checkout-empty a { color: var(--tomato); }

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: start;
  padding-top: 64px;
}
@media (max-width: 1100px) {
  .checkout-grid { grid-template-columns: 1fr 340px; gap: 40px; }
}

.checkout-head {
  padding: 64px 0 52px;
}
.checkout-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 52px; font-weight: 300;
  line-height: 1.1;
  margin-top: 8px;
}

/* Form fields */
.checkout-form { display: flex; flex-direction: column; gap: 28px; padding: 0 0 0 0; }
.co-field { display: flex; flex-direction: column; gap: 8px; }
.co-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.co-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
}
.co-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.co-input {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none; border-bottom: 1.5px solid var(--hair-dark);
  font-family: "DM Sans", sans-serif;
  font-size: 16px; color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.co-input:focus { border-bottom-color: var(--palm); }
.co-input::placeholder { color: rgba(14,14,20,0.3); }
.co-textarea { resize: vertical; min-height: 80px; padding-top: 10px; }

/* Radio cards */
.co-radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.co-radio { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.co-radio input[type=radio] { display: none; }
.co-radio-box {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px;
  border: 1.5px solid var(--hair-dark);
  border-radius: 4px;
  transition: border-color .15s, background .15s;
}
.co-radio input:checked + .co-radio-box {
  border-color: var(--palm);
  background: rgba(10,42,108,0.04);
}
.co-radio-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.co-radio-sub { font-size: 12px; color: var(--ink-2); }

.co-address-field { transition: opacity .2s; }
.co-address-hidden { opacity: 0; pointer-events: none; height: 0; overflow: hidden; margin: 0 !important; }

.co-note {
  font-size: 13px; color: var(--ink-2);
  border-left: 3px solid var(--palm);
  padding-left: 14px;
  margin: 0;
}
.co-submit { align-self: flex-start; min-width: 200px; }
.co-empty { display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.co-empty p { color: var(--ink-2); margin: 0; }
.co-empty-warning {
  font-size: 13px;
  color: #c8112a;
  margin: 0;
}
.co-empty-warning a { color: inherit; text-decoration: underline; }

/* Cart items on light backgrounds — override dark-drawer colors */
.co-summary-card .cart-item-img,
.checkout-summary-single .cart-item-img { background: var(--cream); border: 1px solid var(--hair); }
.co-summary-card .cart-item-name,
.checkout-summary-single .cart-item-name { color: var(--ink); }
.co-summary-card .cart-item-size,
.checkout-summary-single .cart-item-size { color: var(--ink-2); }
.co-summary-card .cart-item-price,
.checkout-summary-single .cart-item-price { color: var(--ink); }
.co-summary-card .qty-val,
.checkout-summary-single .qty-val { color: var(--ink); }
.co-summary-card .qty-btn,
.checkout-summary-single .qty-btn { border-color: var(--hair-dark); color: var(--ink); }
.co-summary-card .qty-btn:hover,
.checkout-summary-single .qty-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.co-summary-card .remove-link,
.checkout-summary-single .remove-link { color: var(--ink-2); }
.co-summary-card .remove-link:hover,
.checkout-summary-single .remove-link:hover { color: var(--tomato); }
.co-summary-card .cart-item,
.checkout-summary-single .cart-item { border-bottom: 1px solid var(--hair); padding-bottom: 16px; }
.co-summary-card .cart-item:last-child,
.checkout-summary-single .cart-item:last-child { border-bottom: none; }

/* Summary card */
.checkout-summary-col { position: sticky; top: calc(var(--nav-h) + 24px); }
.co-summary-card {
  background: var(--cream-2);
  border: 1.5px solid var(--hair-dark);
  border-radius: 4px;
  padding: 32px 28px;
}
.co-summary-toggle {
  display: none;
}

.co-summary-head {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px; font-weight: 500; font-style: italic;
  margin-bottom: 24px;
}
.co-summary-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--hair);
}
.co-summary-row:last-of-type { border-bottom: none; }
.co-summary-name { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.co-summary-size { color: var(--ink-2); font-style: italic; }
.co-summary-qty { color: var(--ink-2); }
.co-summary-price { font-weight: 500; text-align: right; }
.co-summary-divider { height: 1.5px; background: var(--hair-dark); margin: 8px 0; }
.co-summary-total {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px; font-weight: 500;
  border-bottom: none;
  padding-top: 16px;
}
.co-summary-note {
  font-size: 11px; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 16px;
}

.checkout-summary-single {
  max-width: 600px;
  margin: 64px auto 0;
}
.checkout-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hair-dark);
}
.checkout-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .checkout-actions .co-submit { display: none; }
  .on-order-page .co-submit { display: none; }
}

.co-form-heading {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px; font-weight: 400; font-style: italic;
  color: var(--ink);
  margin-bottom: 32px;
}

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 0; padding-top: 40px; }
  .checkout-summary-col { position: static; order: -1; margin-bottom: 40px; }
  .co-summary-card {
    border-radius: 0; border-left: none; border-right: none;
    max-height: 0; overflow: hidden; padding: 0 28px;
    transition: max-height 0.35s ease, padding 0.35s ease;
    margin-bottom: 0;
    border-top: none;
  }
  .co-summary-card.open {
    max-height: 2500px;
    padding: 28px;
    border-bottom: 1px solid var(--hair);
  }
  .co-summary-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 16px 20px;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.01em;
  }
  .co-summary-toggle-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 500;
  }
  .co-toggle-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  .co-summary-toggle[aria-expanded="true"] .co-toggle-chevron {
    transform: rotate(180deg);
  }
  .checkout-head { padding: 40px 0 32px; }
  .co-field-group { grid-template-columns: 1fr; }
}

/* SUCCESS PAGE */
.success-page {
  padding: 80px 0 140px;
  background: var(--cream);
}
.success-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.success-eyebrow {
  color: #c8112a;
  display: inline-block;
}
.text-blue { color: #0a2a6c; }
.text-red { color: #c8112a; }
.success-emblem {
  width: 140px;
  height: 140px;
  margin: 0 auto 32px;
  background: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
}
.success-emblem img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}
.success-h1 {
  font-size: clamp(56px, 7vw, 96px);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  line-height: 0.95;
  margin: 16px 0 32px;
}
.success-h1 .gold-script {
  font-size: 1em;
  color: #d4a32c;
}
.success-lede {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto 56px;
}
.success-meta {
  background: var(--paper);
  padding: 32px 40px;
  margin: 0 auto 56px;
  text-align: left;
  max-width: 560px;
  border-radius: 4px;
  border: 1px solid var(--hair);
}
.success-meta-row {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14px;
}
.success-meta-row:last-child { border-bottom: 0; }
.success-meta-row .k {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #0a2a6c;
  align-self: center;
}
.success-meta-row a:hover { color: #c8112a; }
.success-summary {
  max-width: 560px;
  margin: 0 auto 56px;
  text-align: left;
  border-top: 1px solid var(--hair-dark);
}
.success-summary .aside-h {
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
  border-top: 0;
  color: #0a2a6c;
}
.success-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
}
.success-line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.success-total {
  font-weight: 500;
  font-size: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  padding-top: 16px;
}
.success-total span:last-child { color: #c8112a; }
.success-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.success-tag {
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
}
.success-bon {
  font-size: 36px;
  color: #c8112a;
}
.menu-hero {
  padding: 120px 0 80px;
  text-align: center;
  border-bottom: 1px solid var(--hair);
  background: var(--cream);
}
.menu-h1 {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1.0;
  font-weight: 300;
  margin: 24px 0 48px;
  color: var(--ink);
}

.menu-list-section {
  padding: 120px 0;
  background: var(--cream);
}
.menu-list {
  display: flex; flex-direction: column;
  gap: 80px;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--hair);
}
.menu-item:last-child { border-bottom: 0; padding-bottom: 0; }
.menu-item.flipped {
  grid-template-columns: 1.2fr 1fr;
}
.menu-item.flipped .menu-item-photo { order: 2; }

.menu-item-name { color: var(--ink); }
.menu-item-name + .menu-item-heat,
.menu-item-heat { color: var(--ink-2); }
.menu-item-desc { color: var(--ink-2); }

.gold-script-big {
  font-family: "Allura", cursive;
  color: #d4a32c;
  font-weight: 400;
  font-style: normal;
}

.menu-order {
  padding: 120px 0;
  background: var(--cream);
  border-top: 1px solid var(--hair);
}
.menu-order .section-eyebrow { color: #c8112a; }
.menu-order h2 .gold-script { color: #d4a32c; }
.menu-order .cf-label { color: #0a2a6c; }
.menu-order .contact-list .k { color: #0a2a6c; }
.menu-order .contact-list a:hover { color: #c8112a; }
.menu-h1 i {
  font-style: normal;
  color: var(--ink);
}
.menu-h1 .italiana {
  font-family: "Italiana", serif;
  letter-spacing: 0.03em;
}
.menu-lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}

.menu-list-wrap { }

.menu-item-section {
  padding: 96px 0;
}
.menu-item-section + .menu-item-section {
  border-top: 0;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
  padding-bottom: 0;
  border-bottom: 0;
  max-width: 1080px;
  margin: 0 auto;
}
.menu-item.flipped {
  grid-template-columns: 1.2fr 1fr;
}
.menu-item.flipped .menu-item-photo {
  order: 2;
}

.menu-item-photo {
  aspect-ratio: 4/5;
  background: #fdfaf2;
  position: relative;
  overflow: hidden;
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
.menu-item-photo .product-illust {
  position: absolute; inset: 0;
  z-index: 1;
  display: grid; place-items: center;
  opacity: 0.78;
}
.menu-item-photo image-slot {
  position: absolute; inset: 0;
  z-index: 2;
  width: 100%; height: 100%;
  display: block;
  background: transparent;
}
.menu-item-photo image-slot::part(empty) { display: none; }
.menu-item-photo image-slot::part(frame) { background: transparent; }

/* Menu item info inside flag-colored sections — light text on dark band */
.section-flag-blue .menu-item-name,
.section-flag-red .menu-item-name {
  color: #fef3d6;
}
.section-flag-blue .menu-item-heat,
.section-flag-red .menu-item-heat {
  color: rgba(254,243,214,0.65);
}
.section-flag-blue .menu-item-desc,
.section-flag-red .menu-item-desc {
  color: rgba(254,243,214,0.82);
}
.section-flag-blue .menu-size,
.section-flag-red .menu-size {
  border-color: rgba(254,243,214,0.30);
}
.section-flag-blue .menu-size .ms-label,
.section-flag-red .menu-size .ms-label { color: #fef3d6; }
.section-flag-blue .menu-size .ms-price,
.section-flag-red .menu-size .ms-price { color: rgba(254,243,214,0.6); }
.section-flag-blue .menu-size.active,
.section-flag-red .menu-size.active { border-color: #f5cf58; background: rgba(245,207,88,0.08); }
.section-flag-blue .menu-item-actions .btn-primary,
.section-flag-red .menu-item-actions .btn-primary {
  background: #f5cf58;
  color: #1a1410;
  border-color: #f5cf58;
}
.section-flag-blue .menu-item-actions .btn-primary:hover,
.section-flag-red .menu-item-actions .btn-primary:hover {
  background: transparent;
  color: #f5cf58;
}
.section-flag-blue .menu-item-actions .btn-ghost,
.section-flag-red .menu-item-actions .btn-ghost {
  color: #fef3d6;
  border-color: rgba(254,243,214,0.45);
}
.section-flag-blue .menu-item-actions .btn-ghost:hover,
.section-flag-red .menu-item-actions .btn-ghost:hover {
  background: #fef3d6;
  color: #1a1410;
}
.section-flag-blue .qty-stepper,
.section-flag-red .qty-stepper {
  border-color: rgba(254,243,214,0.35);
  color: #fef3d6;
}
.section-flag-blue .qty-stepper button,
.section-flag-red .qty-stepper button {
  color: #fef3d6;
}
.section-flag-blue .qty-stepper button:hover,
.section-flag-red .qty-stepper button:hover {
  background: rgba(254,243,214,0.12);
}

@media (max-width: 900px) {
  .menu-item, .menu-item.flipped, .menu-item:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .menu-item.flipped .menu-item-photo,
  .menu-item:nth-child(even) .menu-item-photo { order: 0; }
}

.menu-item-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}
.menu-item-name {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(32px, 4vw, 48px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}
.menu-item-heat {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; gap: 8px; align-items: center;
  padding-top: 14px;
  white-space: nowrap;
}
.menu-item-desc {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 520px;
}

.menu-item-prices {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 32px;
}
.menu-size {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px;
  border: 1.5px solid var(--hair-dark);
  border-radius: 4px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.menu-size:hover { background: rgba(10,42,108,0.02); }
.menu-size.active { border-color: var(--palm); background: rgba(10,42,108,0.04); }
.ms-label { font-size: 15px; font-weight: 500; color: var(--ink); }
.ms-price { font-size: 12px; color: var(--ink-2); }

.menu-item-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* The dedicated menu-order section uses contact-block-on-flag styling */
.menu-order {
  padding: 140px 0;
}

/* RECIPES BLOG */

.recipes-hero {
  padding: 120px 0 80px;
  text-align: center;
  border-bottom: 1px solid var(--hair);
}
.recipes-title {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1.0;
  font-weight: 300;
  margin: 24px 0 48px;
}
.recipes-title i {
  font-family: "Allura", cursive;
  font-style: normal;
  font-size: 0.7em;
  color: var(--tomato);
}
.recipes-title .italiana {
  font-family: "Italiana", serif;
  letter-spacing: 0.03em;
}
.recipes-lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}

.recipes-content { padding: 96px 0 140px; }

.featured-post { margin-bottom: 96px; }
.featured-post .post-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.featured-post .post-photo {
  aspect-ratio: 4/3;
  order: 1;
}
.featured-post .post-title {
  font-size: clamp(40px, 5vw, 64px);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
}

.post-card {
  display: flex; flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  transition: opacity .2s;
}
.post-card:hover { opacity: 0.92; }
.post-photo {
  aspect-ratio: 4/3;
  background: var(--paper);
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
}
.post-photo image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.post-meta {
  display: flex; align-items: center; gap: 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.post-tag { color: var(--tomato); }
.post-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 12px;
}
.post-intro {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 20px;
}
.post-read {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: auto;
  position: relative;
  align-self: flex-start;
}
.post-read::after {
  content: ""; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.post-card:hover .post-read::after { transform: scaleX(1); }

/* Recipe article (single post) */
.recipe-article {
  padding: 64px 0 140px;
}
.recipe-header {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.recipe-h1 {
  font-size: clamp(48px, 6vw, 88px);
  font-style: italic;
  font-weight: 300;
  margin-bottom: 24px;
}
.recipe-intro {
  font-size: 20px;
  color: var(--ink-2);
  line-height: 1.55;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  margin: 0 auto;
  max-width: 580px;
}
.recipe-photo-hero {
  aspect-ratio: 16/9;
  background: var(--paper);
  margin-bottom: 96px;
  overflow: hidden;
  position: relative;
}
.recipe-photo-hero image-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.recipe-body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 96px;
  max-width: 1080px;
  margin: 0 auto;
}
.recipe-aside { position: sticky; top: calc(var(--nav-h) + 8px); align-self: start; }
.aside-h {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair-dark);
}
.aside-list {
  list-style: none; margin: 0; padding: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  line-height: 1.6;
}
.aside-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  font-style: italic;
}

.recipe-steps ol {
  list-style: none; margin: 0; padding: 0;
}
.recipe-steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 17px;
  line-height: 1.6;
}
.step-n {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 24px;
  color: var(--tomato);
  line-height: 1;
  padding-top: 4px;
}
.step-body { color: var(--ink); }

.recipe-note {
  background: var(--paper);
  padding: 32px;
  margin-top: 48px;
  border-left: 2px solid var(--tomato);
}
.recipe-note-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tomato);
  display: block;
  margin-bottom: 12px;
}
.recipe-note p {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
}

.recipe-foot {
  margin-top: 96px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 48px;
  border-top: 1px solid var(--hair);
}

@media (max-width: 900px) {
  .featured-post .post-card { grid-template-columns: 1fr; gap: 32px; }
  .post-grid { grid-template-columns: 1fr 1fr; gap: 48px 32px; }
  .recipe-body { grid-template-columns: 1fr; gap: 48px; }
  .recipe-aside { position: static; }
}
@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
}
.hand {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--tomato);
  margin-bottom: 24px;
}
.related {
  background: var(--cream-2);
  border-top: 1.5px solid var(--ink);
}

/* utility */
.flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }

/* responsive */
@media (max-width: 900px) {
  section { padding: 80px 0; }
  .container { padding: 0 40px; }
  .story-grid, .pdp-grid { grid-template-columns: 1fr; gap: 64px; }
  .section-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .section-head .lede { justify-self: start; }
  .products { grid-template-columns: 1fr 1fr; gap: 32px; }
  .press-grid, .loc-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Recipes stay 3 across on tablets — the cards just get narrower (and
     the embed scales with them). They stack on phones (see ≤600 block). */
  .recipe-grid { gap: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .section-flag-blue .contact-block,
  .section-flag-red .contact-block { padding: 40px; }
  .nav-links { display: none; }
  .nav-cart-btn { margin-left: auto; }
  .menu-item-section { padding: 72px 0; }
  .cta-strip { padding: 96px 40px; }
}
@media (max-width: 600px) {
  .container { padding: 0 24px; }
  .nav-inner { padding: var(--nav-pad-v) 24px; }
  .products { grid-template-columns: 1fr; }
  .recipe-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo img { width: clamp(160px, 60%, 260px); }
  .section-flag-blue .contact-block,
  .section-flag-red .contact-block { padding: 24px; }
  section { padding: 56px 0; }
  .menu-item-section { padding: 56px 0; }
  .menu-order { padding: 72px 0; }
  .cta-strip { padding: 72px 24px; }
  .contact-block { margin-top: 64px; padding-top: 48px; }
  .menu-item-head { grid-template-columns: 1fr; gap: 6px; }
  .menu-item-heat { padding-top: 0; }
  .pdp-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}