/* ============================================
   Gokéla — Design System v2
   Freshii-inspired, lifestyle-led rebuild per
   "Gokela Website Developer Brief / Visual Lock"
   (Aug 2026). Supersedes the v1 menu-flyer-style
   category-tab system below (kept for category
   pages where still useful, restyled to fit).

   Color logic: official corporate colors (green,
   orange, aqua, navy, charcoal — MOM102SPV3 manual)
   remain the palette family, but the approved
   homepage mockup uses a much deeper forest green
   for buttons/headings/nav than the bright Pantone
   2285C logo green. Per the brief's own visual
   reference hierarchy, the approved mockup wins:
   --green-deep (sampled from the mockup) is the
   working brand color for text/buttons/nav; the
   bright --green stays as a light accent only.
   ============================================ */
:root {
  --green: #95d93a;         /* Pantone 2285 C — logo/light accent only */
  --green-light: #eef7e2;
  --green-deep: #2e5c1e;    /* sampled from approved mockup — primary buttons, nav, links */
  --green-deep-dark: #1f3d16; /* headline text, footer bg */
  --orange: #fc4c12;        /* Pantone 172 C — high-energy CTA band */
  --orange-dark: #c53b0e;
  --aqua: #6cd8e5;          /* Pantone 2225 U — drinks section accent */
  --aqua-dark: #3aa9b6;
  --navy: #002555;          /* Pantone PQ-655C */
  --cream: #faf6ee;
  --cream-dark: #f2ead9;
  --sage: #ececdf;          /* four-value strip background, sampled from mockup */
  --blush: #f9eae9;         /* smoothies section background, sampled from mockup */
  --charcoal: #2f2e33;
  --charcoal-soft: #6b6a6e;
  --white: #ffffff;
  --radius-pill: 999px;
  --radius-card: 18px;
  --shadow-soft: 0 10px 30px rgba(47, 46, 51, 0.08);
  --shadow-card: 0 6px 20px rgba(47, 46, 51, 0.10);
  --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo Black", Impact, var(--font);
  --font-script: "Pacifico", "Brush Script MT", cursive;

  /* Category accent colors — from Gokéla's own printed menu, still used
     on category/product pages for quick visual coding. */
  --cat-wrap: #2fb8ab;
  --cat-salad: #95d93a;
  --cat-burrito: #ed154a;
  --cat-bowl: #f6941a;
  --cat-pizza: #89359f;
  --cat-light: #c9a227;
  --radius-soft: 26px;
}

@font-face {
  font-family: "Pacifico";
  src: url("../fonts/pacifico.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivoblack.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Visually hides content while keeping it readable to screen readers —
   used for form labels where the placeholder already shows the visible
   hint, but a real <label> is still needed for accessibility. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: var(--green-deep-dark); }
p { margin: 0 0 1em; color: var(--charcoal-soft); }
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 84px 0; }
section.tight { padding: 48px 0; }
.bg-cream { background: var(--cream); }
.bg-sage { background: var(--sage); }
.bg-blush { background: var(--blush); }
.bg-green { background: var(--green-deep); color: var(--white); }
.bg-green p, .bg-green h1, .bg-green h2, .bg-green h3 { color: var(--white); }
.bg-green p { color: rgba(255,255,255,0.85); }
.text-center { text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.eyebrow::before { content: "🌿"; font-size: 14px; }
h1 { font-size: clamp(32px, 5vw, 54px); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; }
h2 { font-size: clamp(24px, 3.2vw, 36px); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; }
h2.section-title { margin-bottom: 12px; }
.script { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; display: block; }
.lede { font-size: 18px; max-width: 640px; }
.lede.center { margin: 0 auto 40px; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green-deep); color: var(--white); box-shadow: 0 8px 20px rgba(46, 92, 30, 0.3); }
.btn-primary:hover { background: var(--green-deep-dark); }
.btn-outline { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-outline-dark { background: transparent; border-color: var(--green-deep); color: var(--green-deep); }
.btn-outline-dark:hover { background: var(--green-light); }
.btn-whatsapp { background: #25D366; color: var(--white); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); }
.btn-whatsapp:hover { background: #1ebc59; }
.btn-orange { background: var(--white); color: var(--orange-dark); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.btn-orange:hover { background: var(--cream); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ============================================
   Header / Nav — LOCKED per brief section 2
   ============================================ */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid rgba(47,46,51,0.06);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1180px;
  margin: 0 auto;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--green-deep); }
.logo img { height: 84px; width: auto; } /* sized up from the vector source (Untitled-1.ai) for brand prominence — no quality loss since it's rendered from vector art */
nav.main-nav { flex: 1; }
nav.main-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; justify-content: center; }
nav.main-nav a { font-weight: 700; font-size: 14.5px; letter-spacing: 0.02em; color: var(--charcoal); padding: 10px 2px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 5px; }
nav.main-nav a:hover, nav.main-nav a.active { color: var(--green-deep); border-color: var(--green-deep); }
nav.main-nav .caret { font-size: 11px; transition: transform 0.15s ease; }
nav.main-nav li.has-mega:hover .caret, nav.main-nav li.has-mega.open .caret { transform: rotate(180deg); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--green-deep); }
.nav-cta .btn { background: var(--green-deep); }
.nav-cta .btn:hover { background: var(--green-deep-dark); }
.nav-cta .btn span.short { display: none; }

@media (max-width: 900px) {
  nav.main-nav { display: none; }
  nav.main-nav.open {
    display: block;
    position: absolute;
    top: 112px; left: 0; right: 0;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    padding: 10px 24px 18px;
    max-height: 80vh;
    overflow-y: auto;
  }
  nav.main-nav.open ul { flex-direction: column; gap: 4px; align-items: stretch; }
  nav.main-nav.open li { border-bottom: 1px solid var(--cream-dark); }
  nav.main-nav.open a { padding: 14px 4px; justify-content: space-between; width: 100%; }
  .nav-toggle { display: block; }
  .nav-cta .btn span.long { display: none; }
  .nav-cta .btn span.short { display: inline; }
  .mega-menu { position: static !important; display: none; box-shadow: none !important; border: none !important; }
  .mega-menu.mobile-open { display: block !important; }
}

/* ============================================
   Mega-menu — LOCKED per brief section 7
   3 zones: categories / products / promo
   ============================================ */
li.has-mega { position: relative; list-style: none; }
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1040px, 92vw);
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(47,46,51,0.22);
  display: none;
  grid-template-columns: 250px 1fr 300px;
  overflow: hidden;
  /* Flush against the "Menu" link (no margin-gap): the trigger for opening
     this panel is li.has-mega:hover, which only matches while the pointer is
     over the Menu link itself or over this panel. A margin-top gap here would
     leave dead space between the two that belongs to neither element, so the
     panel would snap shut the instant the mouse crossed it. Padding keeps the
     same 12px of visual breathing room *inside* the panel instead, so the
     hover chain from link to panel is never broken, and — unlike an
     always-present invisible bridge spanning the full panel width — nothing
     here is hoverable while the panel is closed, so it can never falsely
     trigger under neighboring nav items (Home / Catering / Contact Us).  */
  padding-top: 12px;
  z-index: 300;
}
li.has-mega:hover .mega-menu,
li.has-mega.open .mega-menu { display: grid; }
/* Forces the dropdown shut the instant a link inside it is clicked (see
   main.js) — needed because a same-page anchor click doesn't reload the
   page, so ":hover" alone would otherwise leave it open. */
li.has-mega.mega-force-closed .mega-menu { display: none !important; }
.mega-col-cats { background: var(--cream); padding: 18px 10px; }
.mega-cat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
}
.mega-cat:hover, .mega-cat.active { background: var(--green-light); }
.mega-cat .mega-cat-icon { font-size: 20px; line-height: 1; margin-top: 2px; }
.mega-cat strong { display: block; font-size: 14.5px; color: var(--charcoal); }
.mega-cat span.desc { font-size: 12.5px; color: var(--charcoal-soft); }
.mega-cat.active strong { color: var(--green-deep); }
.mega-col-products { padding: 26px 28px; display: flex; flex-direction: column; min-height: 0; }
.mega-col-products h4 { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; margin-bottom: 4px; }
.mega-col-products > p { font-size: 13.5px; margin-bottom: 14px; }
.mega-recommend-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
  margin: 4px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cream-dark);
}
/* Scrolls internally (rather than growing the whole panel) when a category
   like Juices has more items than fit in the space the categories column
   sets for the row. */
.mega-product-list { display: flex; flex-direction: column; overflow-y: auto; max-height: 336px; padding-right: 6px; }
.mega-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  border-top: 1px solid var(--cream-dark);
  border-radius: 10px;
  transition: background 0.15s ease;
}
.mega-product:first-child { border-top: none; }
.mega-product:hover { background: var(--cream); }
.mega-product img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.mega-product strong { display: block; font-size: 14px; }
.mega-product span { font-size: 12px; color: var(--charcoal-soft); }
.mega-view-all { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 13.5px; color: var(--green-deep); }
.mega-build-cta { width: 100%; margin-bottom: 16px; }
/* Floating "ingredients on hover" tooltip for mega-menu recommendations —
   appended straight to <body> (see attachProductHovers in main.js) so it's
   never clipped by the scrollable .mega-product-list. */
.mega-tooltip {
  position: fixed;
  z-index: 300;
  transform: translateY(-50%);
  background: var(--charcoal);
  color: var(--white);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  max-width: 220px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.mega-tooltip-visible { opacity: 1; }
.mega-tooltip strong { display: block; font-size: 13px; margin-bottom: 3px; color: var(--white); }
.mega-tooltip span { color: rgba(255,255,255,0.85); }
.mega-col-promo {
  background: var(--sage);
  padding: 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mega-col-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.mega-col-promo .promo-copy { position: relative; z-index: 2; background: rgba(255,255,255,0.88); border-radius: 12px; padding: 14px 16px; }
.mega-col-promo h5 { font-family: var(--font-display); text-transform: uppercase; font-size: 17px; margin: 0 0 4px; }
.mega-col-promo h5 .script { font-family: var(--font-script); font-size: 22px; display: inline; }
/* The nav's own "nav.main-nav a" link-color rule (2 type selectors + 1 class)
   otherwise outranks single-class rules like .mega-view-all/.btn-primary and
   silently recolors mega-menu CTAs to the nav's charcoal text color. Re-scope
   these two classes so they win back their intended colors. */
.mega-menu .mega-view-all { color: var(--green-deep); }
.mega-menu .btn-primary { color: var(--white); }

/* ============================================
   Hero — lifestyle/editorial, brief section 6.2
   Updated Aug 2026 per "Homepage Hero Update" brief:
   white background, 45/55 editorial split, integrated
   cut-out lifestyle photo + real product shots layered
   directly on white (no card/box), benefit row, small
   hand-drawn accents. Nav/footer/other sections untouched.
   ============================================ */
.hero-lifestyle {
  position: relative;
  overflow: hidden;
  background: #FFFDF9;
  padding: 56px 0 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  grid-template-areas: "copy photos" "benefits photos";
  align-items: center;
  gap: 30px 40px;
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "photos" "benefits";
    text-align: center;
    gap: 36px;
  }
}
.hero-copy { grid-area: copy; position: relative; }
.hero-tick { display: inline-block; margin-bottom: 6px; }
@media (max-width: 900px) { .hero-tick { display: none; } }
.hero-copy h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.05; }
.hero-copy h1 .script { color: var(--orange); font-size: 1.15em; margin-top: 2px; }
.hero-copy .lede { font-size: 17px; margin: 18px 0 26px; color: var(--charcoal-soft); max-width: 480px; }
@media (max-width: 900px) { .hero-copy .lede { max-width: none; } }
.hero-copy .btn-row .btn { padding: 16px 32px; box-shadow: none; }
.hero-copy .btn-row .btn-whatsapp:hover,
.hero-copy .btn-row .btn-outline-dark:hover { transform: translateY(-2px); }
@media (max-width: 900px) {
  .hero-copy .btn-row { flex-direction: column; align-items: stretch; }
  .hero-copy .btn-row .btn { width: 100%; padding: 17px 32px; }
}

/* Right side — integrated photo composition, no card/box */
.hero-photos {
  grid-area: photos;
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 0.96;
  margin: 0 auto;
}
.hero-photos img { position: absolute; width: auto; height: auto; }
.hero-photos .hp-woman { left: 18%; top: 0; width: 82%; z-index: 1; }
.hero-photos .hp-smoothie { left: -2%; top: 58%; width: 30%; z-index: 3; filter: drop-shadow(0 14px 18px rgba(47,46,51,0.18)); }
.hero-photos .hp-wrap { left: 58%; top: 66%; width: 42%; z-index: 2; filter: drop-shadow(0 14px 18px rgba(47,46,51,0.16)); }
.hero-photos .hp-bowl { left: 16%; top: 58%; width: 56%; z-index: 4; filter: drop-shadow(0 18px 26px rgba(47,46,51,0.2)); }
@media (max-width: 1100px) and (min-width: 901px) {
  .hero-photos { max-width: 480px; }
  .hero-photos .hp-bowl { width: 52%; }
  .hero-photos .hp-wrap { width: 38%; }
}
@media (max-width: 900px) {
  .hero-photos { max-width: 420px; }
  .hero-leaf { display: none; }
}

/* Small hand-drawn tropical leaf accents, cropped at the section edges */
.hero-leaf { position: absolute; width: 96px; height: auto; opacity: 0.9; pointer-events: none; z-index: 0; }
.hero-leaf-top { top: -78px; left: 58%; transform: rotate(8deg); }
.hero-leaf-bottom { bottom: -58px; left: -30px; transform: rotate(-40deg) scaleX(-1); }

/* Benefit row beneath the CTAs */
.hero-benefits {
  grid-area: benefits;
  display: flex;
  gap: 28px;
  margin-top: 6px;
}
@media (max-width: 900px) { .hero-benefits { justify-content: center; flex-wrap: wrap; gap: 22px 28px; } }
.hero-benefit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 130px; }
@media (max-width: 900px) { .hero-benefit { align-items: center; text-align: center; } }
.hero-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hero-benefit-icon.leaf, .hero-benefit-icon.sprout { background: var(--green-light); }
.hero-benefit-icon.heart { background: var(--blush); }
.hero-benefit span:last-child { font-size: 13.5px; font-weight: 700; color: var(--charcoal); line-height: 1.3; }

/* Four-value strip — brief 6.3 */
.value-strip {
  background: var(--sage);
  padding: 34px 0;
}
.value-strip .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
@media (max-width: 760px) { .value-strip .grid { grid-template-columns: repeat(2,1fr); } }
.value-item { display: flex; align-items: flex-start; gap: 12px; }
.value-item .value-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--green-deep);
  display: flex; align-items: center; justify-content: center;
}
.value-item strong { display: block; font-size: 14px; letter-spacing: 0.03em; color: var(--charcoal); text-transform: uppercase; }
.value-item p { font-size: 13.5px; margin: 2px 0 0; }

/* Menu category preview — image-led cards, brief 6.4 */
.menu-cat-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 22px; margin-top: 32px; }
@media (max-width: 900px) { .menu-cat-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px) { .menu-cat-grid { grid-template-columns: repeat(2,1fr); } }
.menu-cat-card { text-align: center; }
.menu-cat-card .photo { aspect-ratio: 3/2; overflow: hidden; margin: 0 auto 14px; }
.menu-cat-card .photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 0.3s ease; }
.menu-cat-card:hover .photo img { transform: scale(1.06); }
.menu-cat-card strong { display: inline-block; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-deep); border-bottom: 2px solid var(--green-deep); padding-bottom: 3px; }

/* Lifestyle banner — brief 6.5 */
.lifestyle-banner { position: relative; padding: 0; overflow: hidden; }
.lifestyle-grid { display: grid; grid-template-columns: 1fr 1.3fr; height: 460px; min-height: 460px; }
@media (max-width: 860px) { .lifestyle-grid { grid-template-columns: 1fr; height: auto; min-height: 0; } }
.lifestyle-copy { background: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 56px; }
.lifestyle-copy h2 { font-size: clamp(28px,4vw,42px); margin-bottom: 22px; }
.lifestyle-copy h2 .script { font-size: 1.2em; }
.lifestyle-copy h2 .script.orange { color: var(--orange); }
.lifestyle-copy h2 .script.green { color: var(--green-deep); }
.lifestyle-photo { overflow: hidden; height: 100%; }
.lifestyle-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
@media (max-width: 860px) { .lifestyle-photo { height: 360px; } }

/* Smoothies & drinks — brief 6.6 */
.drinks-section { position: relative; }
.drinks-tabs { display: inline-flex; background: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); padding: 5px; gap: 4px; margin-bottom: 28px; flex-wrap: wrap; }
.drinks-tabs button {
  border: none; background: transparent; padding: 10px 20px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--charcoal-soft); cursor: pointer;
}
.drinks-tabs button.active { background: var(--green-deep); color: var(--white); }
.drinks-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 860px) { .drinks-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .drinks-grid { grid-template-columns: 1fr; } }
.drink-tile { background: var(--white); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); text-align: center; padding-bottom: 18px; }
.drink-tile .photo { aspect-ratio: 1/1; overflow: hidden; }
.drink-tile .photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.drink-tile h4 { font-size: 16px; margin: 14px 0 4px; }
.drink-tile p { font-size: 13px; margin: 0 0 10px; padding: 0 14px; }
.drink-tile .btn { padding: 8px 18px; font-size: 12.5px; }
.drink-tile-foot { margin-top: 4px; }
/* Soup of the Day (Light Options, food.html) — today's flavor is
   highlighted, the other two are greyed out. See highlightTodaysSoup()
   in assets/js/main.js. */
.drink-tile-unavailable { opacity: 0.45; filter: grayscale(65%); transition: opacity .2s, filter .2s; }
.drink-tile-today { position: relative; box-shadow: 0 0 0 2px var(--green-deep), var(--shadow-card); }
.drink-tile-today::after {
  content: 'Today'; position: absolute; top: 8px; right: 8px;
  background: var(--green-deep); color: var(--white); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 9px; border-radius: var(--radius-pill);
}
.drinks-panel { display: none; }
.drinks-panel.active { display: block; }

.drinks-cat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; max-width: 820px; margin: 32px auto 0; }
@media (max-width: 640px) { .drinks-cat-grid { grid-template-columns: 1fr; } }
.drink-cat-card {
  display: block; background: var(--white); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card); text-align: center; padding-bottom: 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.drink-cat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(47,46,51,0.16); }
.drink-cat-card .photo { aspect-ratio: 4/3; overflow: hidden; }
.drink-cat-card .photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 0.3s ease; }
.drink-cat-card:hover .photo img { transform: scale(1.05); }
.drink-cat-card h3 { font-size: 22px; margin: 22px 0 8px; color: var(--charcoal); }
.drink-cat-card p { font-size: 14px; margin: 0; padding: 0 26px; line-height: 1.5; }

/* WhatsApp order band — brief 6.7 */
.wa-band { background: var(--orange); color: var(--white); padding: 46px 0; }
.wa-band .wa-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wa-band h2 { color: var(--white); margin-bottom: 6px; font-size: clamp(24px,3.4vw,32px); }
.wa-band p { color: rgba(255,255,255,0.9); margin: 0; }

/* Social / lifestyle photo strip — brief 6.8 */
.social-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
@media (max-width: 760px) { .social-strip { grid-template-columns: repeat(3,1fr); } }
.social-strip .tile { aspect-ratio: 1/1; overflow: hidden; }
.social-strip .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.social-strip .tile:hover img { transform: scale(1.08); }

/* Catering teaser — brief 6.9 */
.catering-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 860px) { .catering-teaser { grid-template-columns: 1fr; } }
.catering-teaser img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.use-case-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 26px; }
.use-case-row span { background: var(--cream); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13.5px; font-weight: 600; }

/* Final CTA — brief 6.10 */
.final-cta { background: var(--green-deep-dark); color: var(--white); padding: 80px 0; text-align: center; }
.final-cta h2 { color: var(--white); }
.final-cta .script { color: var(--green); }
.final-cta p { color: rgba(255,255,255,0.8); }
.final-cta .btn-row { justify-content: center; }

/* Footer */
footer.site-footer { background: var(--green-deep-dark); color: rgba(255,255,255,0.75); padding: 60px 0 24px; }
footer.site-footer h4 { color: var(--white); font-size: 15px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.03em; }
footer.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid p { color: rgba(255,255,255,0.65); font-size: 14px; }
.footer-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--white); margin-bottom: 14px; }
.footer-logo img { height: 48px; width: auto; }
.social-row { display: flex; gap: 12px; margin-top: 14px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.social-row a:hover { background: var(--green); color: var(--green-deep-dark); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
footer.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }

/* ============================================
   Shared basics still used across pages
   ============================================ */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(47,46,51,0.14); }
.card .card-img { aspect-ratio: 4/3; overflow: hidden; }
.card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.card .card-body { padding: 20px 22px 24px; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { font-size: 14.5px; margin-bottom: 0; }
.menu-item { background: var(--cream); border-radius: var(--radius-card); padding: 22px 24px; }
.menu-item h3 { font-size: 18px; color: var(--green-deep); margin-bottom: 6px; }
.menu-item p { font-size: 14.5px; margin: 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pill { background: var(--green-light); color: var(--green-deep); padding: 8px 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px) { .feature-split { grid-template-columns: 1fr; gap: 32px; } }
.feature-split img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.cta-banner { background: linear-gradient(120deg, var(--green-deep) 0%, var(--green-deep-dark) 100%); color: var(--white); border-radius: 28px; padding: 56px; text-align: center; }
.cta-banner h2, .cta-banner p { color: var(--white); }
.cta-banner p { color: rgba(255,255,255,0.85); max-width: 520px; margin: 0 auto 20px; }
.cta-banner .btn-row { justify-content: center; margin-top: 8px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.info-card { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--cream-dark); }
.info-card:last-child { border-bottom: none; }
.info-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--green-light); color: var(--green-deep); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.info-card h4 { margin-bottom: 4px; font-size: 16px; }
.info-card p { margin: 0; font-size: 14.5px; }
form.contact-form { display: flex; flex-direction: column; gap: 16px; }
form.contact-form input, form.contact-form textarea { padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--cream-dark); font-family: var(--font); font-size: 15px; background: var(--cream); }
form.contact-form input:focus, form.contact-form textarea:focus { outline: 2px solid var(--green-deep); background: var(--white); }
form.contact-form textarea { min-height: 130px; resize: vertical; }
.map-embed { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); height: 380px; z-index: 1; }
@media (max-width: 700px) { .map-embed { height: 280px; } }
.wa-float { position: fixed; bottom: 22px; right: 22px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); z-index: 200; }
.page-header { padding: 60px 0 40px; text-align: center; background: var(--cream); }
.ingredient-cats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.ingredient-cats .pill { background: var(--white); box-shadow: var(--shadow-card); }

/* ============================================
   Category / product page system — Freshii-row
   structure (brief section 8), Gokéla content
   ============================================ */
.cat-wrap    { --cat: var(--cat-wrap); }
.cat-salad   { --cat: var(--cat-salad); }
.cat-burrito { --cat: var(--cat-burrito); }
.cat-bowl    { --cat: var(--cat-bowl); }
.cat-pizza   { --cat: var(--cat-pizza); }
.cat-light   { --cat: var(--cat-light); }

/* Light Options (food.html) — free optional add-ons rendered as
   toggleable pill checkboxes, e.g. "Crunchy Noodles / Herbs / Seeds". */
.addon-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.addon-chip { position: relative; cursor: pointer; }
.addon-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.addon-chip span { display: inline-block; background: var(--cream); border: 1.5px solid var(--cream-dark); color: var(--charcoal-soft); padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.addon-chip input:checked + span { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.addon-chip input:focus-visible + span { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.addon-note { font-size: 13px; color: var(--charcoal-soft); margin: 0 0 8px; }

.price-badge { display: inline-flex; align-items: baseline; justify-content: center; background: var(--white); color: var(--charcoal); font-weight: 800; border-radius: var(--radius-pill); padding: 6px 16px; font-size: 15px; box-shadow: var(--shadow-card); white-space: nowrap; }
.price-badge.on-dark { box-shadow: none; }
.price-badge.cat { background: var(--cat, var(--green-deep)); color: var(--white); }

.product-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--cream-dark);
}
.product-row:first-child { padding-top: 0; }
@media (max-width: 700px) { .product-row { grid-template-columns: 1fr; gap: 16px; } }
.product-row .product-photo { aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); }
.product-row .product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-row h3 { font-size: 24px; margin-bottom: 8px; color: var(--green-deep-dark); }
.product-row p { font-size: 15px; margin-bottom: 14px; }
.product-row .product-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.customize-link { background: none; border: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--green-deep); text-decoration: underline; cursor: pointer; }
.customize-link:hover { color: var(--green-deep-dark); }

.step-tracker { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.step-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: flex-start;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 20px 24px;
}
@media (max-width: 640px) { .step-card { grid-template-columns: 40px 1fr; padding: 16px; gap: 12px; } }
.step-card .step-num { font-size: 30px; font-weight: 800; color: var(--green-deep); line-height: 1; font-family: var(--font-display); }
.step-card h3 { font-size: 16px; margin-bottom: 4px; color: var(--charcoal); }
.step-card .step-note { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-deep); margin-bottom: 4px; }
.step-card p { font-size: 14.5px; margin: 0 0 4px; }

/* ============================================
   Interactive order builder (food.html #builder-app)
   Picture-tile ingredient picker, step-by-step, feeding a
   WhatsApp order message. See assets/js/builder.js.
   ============================================ */
.builder-app { margin-top: 32px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); scroll-margin-top: 90px; }
@media (max-width: 640px) { .builder-app { padding: 18px; } }
.builder-progress { height: 6px; background: var(--cream-dark); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.builder-progress-bar { height: 100%; background: var(--green-deep); transition: width 0.25s ease; }
.builder-stepline { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--charcoal-soft); margin-bottom: 6px; }
.builder-step-title { margin-bottom: 4px; }
.builder-step-note { color: var(--charcoal-soft); font-size: 14px; margin-bottom: 20px; }
.builder-group { margin-bottom: 22px; }
.builder-group:last-child { margin-bottom: 0; }
.builder-group-label { font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--green-deep); margin-bottom: 10px; }
.builder-slot-counter { color: var(--charcoal-soft); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.ing-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 12px 8px 10px; background: var(--cream); border: 2px solid transparent; border-radius: 14px; cursor: pointer; text-align: center; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; font-family: inherit; }
.ing-card:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--cream-dark); }
.ing-card.selected { border-color: var(--green-deep); background: var(--green-light); }
.ing-card[disabled] { opacity: 0.4; cursor: not-allowed; }
.ing-photo { font-size: 30px; line-height: 1; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: 50%; margin-bottom: 2px; overflow: hidden; }
/* Real ingredient photos show at their natural proportions — no circle
   mask or cropping — so the tile itself grows to fit the photo instead
   of the photo being forced into a fixed round frame. */
.ing-photo-img { width: auto; height: 60px; background: transparent; border-radius: 0; overflow: visible; }
.ing-photo-img img { width: auto; height: 100%; max-width: 84px; object-fit: contain; display: block; }
/* Base tiles (Wrap / Salad / Burrito / Bowl) — same "no mask" treatment
   as ingredient photos, just bigger since there are only a handful of
   them and they're the very first, most important choice. */
.ing-grid-base { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.base-photo-img { height: 110px; }
.base-photo-img img { max-width: 150px; }
.ing-name { font-size: 12.5px; font-weight: 600; color: var(--charcoal); line-height: 1.25; }
.ing-price { font-size: 11px; color: var(--green-deep); font-weight: 700; }
.ing-check { position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--green-deep); color: var(--white); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.ing-qty-btn { margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--orange-dark); background: var(--white); border: 1px solid var(--orange-dark); border-radius: var(--radius-pill); padding: 2px 8px; cursor: pointer; }
.builder-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; }
.builder-summary-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 12px 16px; background: var(--sage); border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--green-deep-dark); flex-wrap: wrap; gap: 8px; }
.builder-summary-cal { color: var(--orange-dark); }
.builder-summary-cal-combo { color: var(--charcoal-soft); font-weight: 400; }
.builder-summary-cal-note { font-size: 11.5px; color: var(--charcoal-soft); font-weight: 400; margin-top: 6px; text-align: right; }
.builder-nutrition-summary { background: var(--cream); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.builder-nutrition-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--green-deep-dark); }
.builder-nutrition-total { font-size: 20px; font-weight: 800; color: var(--green-deep-dark); }
.builder-nutrition-flag { font-size: 12px; font-weight: 700; color: var(--orange-dark); }
.builder-nutrition-caveat-static { font-size: 11.5px; color: var(--charcoal-soft); margin: 4px 0 8px; }
.builder-nutrition-caveat { font-size: 12px; color: var(--charcoal-soft); background: var(--cream-dark); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.builder-nutrition-combo { font-size: 13px; color: var(--green-deep-dark); margin: 4px 0 10px; }
.builder-review-list { list-style: none; padding: 0; margin: 0 0 20px; }
.builder-review-list li { padding: 10px 0; border-bottom: 1px solid var(--cream-dark); font-size: 14.5px; }
.builder-review-list li:last-child { border-bottom: none; }
.builder-review-total { background: var(--cream); border-radius: 12px; padding: 16px; margin-bottom: 20px; font-size: 16px; }
.builder-review-note { display: block; font-size: 12px; color: var(--charcoal-soft); font-weight: 400; margin-top: 4px; }
.builder-review-send { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.builder-review-empty { padding: 20px; text-align: center; color: var(--charcoal-soft); }
.builder-review-cart-note { text-align: center; font-size: 13px; color: var(--charcoal-soft); margin-bottom: 14px; }
.builder-preset-note { background: var(--green-light); color: var(--green-deep-dark); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; text-align: center; }
.builder-view-cart-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--green-deep); text-decoration: underline; cursor: pointer; }
.ing-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--charcoal-soft); background: var(--cream-dark); border-radius: var(--radius-pill); padding: 1px 7px; }
.builder-burrito-note { background: var(--sage); color: var(--green-deep-dark); border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.ing-card-drink-toggle { background: var(--white); border-color: var(--cream-dark); border-style: dashed; }
.ing-card-drink-toggle.selected { border-style: solid; }
.builder-drink-picker { margin-top: 16px; padding: 16px; background: var(--cream); border-radius: 14px; }
.builder-drink-note { font-size: 13px; color: var(--charcoal-soft); margin: 0 0 14px; }
.builder-drink-cat { margin-bottom: 14px; }
.builder-drink-cat:last-child { margin-bottom: 0; }
.builder-drink-cat-label { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--green-deep); margin-bottom: 8px; }
.builder-drink-list { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-drink-item { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-pill); padding: 6px 8px 6px 6px; font-size: 13px; font-weight: 600; color: var(--charcoal); cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
.builder-drink-item:hover:not([disabled]) { border-color: var(--green-deep); }
.builder-drink-item[disabled] { opacity: 0.7; cursor: default; }
.builder-drink-item.selected { border-color: var(--green-deep); background: var(--sage); }
.builder-drink-item-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.builder-drink-add { font-size: 11px; font-weight: 700; color: var(--white); background: var(--green-deep); border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap; }
.builder-drink-item.selected .builder-drink-add { background: var(--green-deep-dark); }
/* Quick-add card for a "Light Options & More" item that has its own free
   addon checkboxes (Bone Broth, Soup of the Day) — a fuller card than the
   plain .builder-drink-item pill, since a checkbox can't live inside that
   pill's own <button>. See renderMorePickerHTML(). */
.builder-more-item-card { background: var(--white); border: 1px solid var(--cream-dark); border-radius: 14px; padding: 12px; width: 100%; max-width: 320px; }
.builder-more-item-top { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.builder-more-item-top .builder-drink-item-photo { border-radius: 10px; width: 40px; height: 40px; }
.builder-more-add-btn { display: block; width: 100%; text-align: center; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--white); background: var(--green-deep); border: none; border-radius: var(--radius-pill); padding: 8px 12px; cursor: pointer; transition: background 0.15s ease; }
.builder-more-add-btn:hover { background: var(--green-deep-dark); }
.builder-more-add-btn.selected { background: var(--green-deep-dark); }
@media (max-width: 600px) {
  .ing-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .ing-photo { width: 44px; height: 44px; font-size: 24px; }
  .ing-photo-img { height: 48px; }
  .ing-photo-img img { max-width: 68px; }
  .ing-grid-base { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .base-photo-img { height: 84px; }
  .base-photo-img img { max-width: 120px; }
}
.builder-reconciliation { background: var(--cream); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.builder-reconciliation-headline { font-weight: 700; font-size: 15.5px; color: var(--green-deep-dark); }
.builder-reconciliation-line { font-size: 13.5px; color: var(--charcoal-soft); margin-top: 4px; }
.builder-reconciliation-line-already {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--cream-dark);
}
.builder-recon-text {
  flex: 1 1 160px;
  border: none;
  background: none;
  padding: 2px 4px 2px 0;
  margin: -2px 0 -2px -4px;
  font: inherit;
  font-size: 13.5px;
  color: var(--charcoal-soft);
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.builder-recon-text:hover { background: var(--cream-dark); }
.builder-reconciliation-line-selected { background: var(--white); border-radius: 10px; margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
.builder-reconciliation-line-selected .builder-recon-text { color: var(--green-deep-dark); font-weight: 700; }
.builder-recon-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.builder-recon-btn {
  border: 1px solid var(--cream-dark);
  background: var(--white);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: var(--charcoal);
  padding: 3px 9px;
  cursor: pointer;
  line-height: 1.4;
}
.builder-recon-btn:hover { background: var(--cream); }
.builder-recon-qty { font-size: 12.5px; font-weight: 700; min-width: 14px; text-align: center; display: inline-block; }
.builder-recon-link { border-color: transparent; background: none; color: var(--green-deep); text-decoration: underline; padding: 3px 4px; }
.builder-recon-remove { color: #b3261e; }
.builder-toggle-details { display: block; margin: 0 0 16px; background: none; border: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--green-deep); text-decoration: underline; cursor: pointer; font-family: inherit; }
.step-card .step-aside { font-size: 13px; color: var(--charcoal-soft); background: var(--white); border-radius: 10px; padding: 8px 12px; margin-top: 6px; }

/* ============================================
   Shared order cart (assets/js/cart.js)
   Floating button + slide-in drawer, present on
   every page so items added on food.html (a
   custom build, a recommended dish) and drinks.html
   (a juice or smoothie) combine into one WhatsApp
   order, no matter which page you finish on.
   ============================================ */
.cart-fab {
  position: fixed;
  bottom: 22px;
  left: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--green-deep);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 210;
  cursor: pointer;
  border: none;
}
.cart-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
@keyframes cartFabBump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.cart-fab-bump { animation: cartFabBump 0.35s ease; }

.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47,46,51,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 220;
}
.cart-drawer-overlay-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--white);
  box-shadow: -10px 0 30px rgba(0,0,0,0.2);
  z-index: 221;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.cart-drawer-open { transform: translateX(0); }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--cream-dark); }
.cart-drawer-head h3 { margin: 0; font-size: 20px; }
.cart-drawer-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--charcoal-soft); padding: 4px; }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 12px 22px; }
.cart-empty { color: var(--charcoal-soft); font-size: 14.5px; padding: 20px 0; text-align: center; }
.cart-item-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--cream-dark); }
.cart-item-row:last-child { border-bottom: none; }
.cart-item-row-draft { border-top: 1px dashed var(--cream-dark); margin-top: 4px; padding-top: 14px; }
.cart-item-draft-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--green-deep); background: var(--sage); border-radius: var(--radius-pill); padding: 2px 8px; vertical-align: middle; margin-left: 4px; }
.cart-item-photo { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 700; font-size: 14.5px; color: var(--charcoal); }
.cart-item-detail { font-size: 12px; color: var(--charcoal-soft); margin-top: 3px; line-height: 1.4; }
.cart-item-price { font-size: 13.5px; font-weight: 700; color: var(--green-deep); margin-top: 4px; }
.cart-item-price-muted { color: var(--charcoal-soft); font-weight: 600; }
.cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.cart-qty-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--cream-dark); background: var(--cream); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--charcoal); }
.cart-qty-val { font-size: 13px; font-weight: 700; min-width: 14px; text-align: center; }
.cart-item-remove { background: none; border: none; padding: 0; font-size: 11.5px; color: var(--orange-dark); text-decoration: underline; cursor: pointer; }
.cart-drawer-foot { padding: 16px 22px 22px; border-top: 1px solid var(--cream-dark); }
.cart-total-amount { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.cart-total-note { font-size: 12px; color: var(--charcoal-soft); margin-bottom: 10px; }
.cart-keep-shopping-btn { width: 100%; margin-top: 10px; }
.cart-send-btn { width: 100%; margin-top: 10px; }
.cart-send-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.cart-drawer-clear { display: block; width: 100%; text-align: center; background: none; border: none; padding: 10px 0 0; font-size: 12.5px; color: var(--charcoal-soft); text-decoration: underline; cursor: pointer; }
@media (max-width: 480px) {
  .cart-fab { bottom: 16px; left: 16px; width: 52px; height: 52px; font-size: 22px; }
}