/* ============================================================
   CHAI WALLAH — site styles
   Built on the Chai Wallah Design System tokens.
   Loads after colors_and_type.css (which defines all variables
   and base typography).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: var(--t-body);
  line-height: var(--leading-loose);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;     /* faster taps, no double-tap zoom */
}
input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  /* 16px+ stops iOS Safari/Chrome from auto-zooming on focus */
  font-size: 16px;
}

/* ============ Buttons ============ */
.cw-btn {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-soft);
}
.cw-btn--primary {
  background: var(--gold-400); color: var(--onyx-900);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,0.3);
}
.cw-btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.cw-btn--ghost-light { background: transparent; color: var(--gold-100); border: 1px solid rgba(253,244,210,0.4); }
.cw-btn--onyx { background: var(--onyx-900); color: var(--gold-100); }
@media (hover: hover) {
  .cw-btn--primary:hover { background: var(--gold-500); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(239,197,63,0.45), inset 0 1px 0 rgba(255,255,255,0.3); }
  .cw-btn--ghost:hover { border-color: var(--onyx-900); }
  .cw-btn--ghost-light:hover { border-color: var(--gold-300); color: var(--gold-300); }
  .cw-btn--onyx:hover { background: var(--onyx-800); }
}
.cw-btn:active { transform: translateY(0); }
.cw-btn--sm { padding: 10px 18px; font-size: 11px; }
.cw-btn--lg { padding: 16px 28px; font-size: 14px; }
.cw-btn--block { display: flex; width: 100%; justify-content: center; }
.cw-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.cw-icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; color: var(--gold-200);
  border: 1px solid rgba(253,244,210,0.22);
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.cw-icon-btn:hover { color: var(--gold-300); border-color: var(--gold-400); }
.cw-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.75; }

/* ============ Eyebrow / link ============ */
.cw-eyebrow {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.cw-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--gold-400); }
.cw-eyebrow--light { color: rgba(253,244,210,0.7); }
.cw-eyebrow--light::after { background: var(--gold-400); }

.cw-link {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-1);
  text-decoration: none; border-bottom: 1px solid var(--gold-400);
  padding-bottom: 4px; align-self: flex-start;
  transition: color var(--dur-fast);
}
.cw-link:hover { color: var(--gold-600); }

.cw-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-400); display: inline-block; }

/* ============ Header (onyx + gold) ============ */
.cw-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--onyx-900); color: var(--gold-100);
  border-bottom: 1px solid var(--gold-500);
}
.cw-header__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 40px;
}
/* 56px, up from 44. The nav links either side are 12px type with 22px of
   padding top and bottom, so the header row is ~59px tall regardless — the
   logo was sitting in the middle of that with room to spare and reading as an
   afterthought. This fills the row without making the header any taller. */
.cw-brand img { height: 56px; display: block; }
.cw-nav { display: flex; gap: 36px; justify-content: center; }
.cw-nav__link {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-100); opacity: 0.85;
  padding: 22px 0;
  position: relative;
  transition: color var(--dur-fast), opacity var(--dur-fast);
}
.cw-nav__link:hover { color: var(--gold-300); opacity: 1; }
.cw-nav__link.is-active { color: var(--gold-400); opacity: 1; }
.cw-nav__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-400); }
.cw-header__right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.cw-mobile-toggle { display: none; }

.cw-statusbar {
  display: flex; align-items: center; gap: 18px; justify-content: center;
  padding: 11px 24px;
  background: var(--onyx-800);
  font-family: var(--font-sans); font-size: 12px; color: rgba(253,244,210,0.72);
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(253,244,210,0.08);
  flex-wrap: wrap;
}
.cw-statusbar b { color: var(--gold-200); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; }

/* ============ Hero (full-bleed mural) ============ */
.cw-hero {
  position: relative; min-height: 640px;
  background: var(--onyx-900);
  overflow: hidden;
  display: flex; align-items: center;
}
.cw-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0.72; filter: saturate(1.05); }
/* Forest green into burgundy — the two panels of the printed menu, so the
   mural underneath keeps its colour instead of going grey. */
.cw-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(5,39,27,0.95) 0%, rgba(5,39,27,0.78) 38%, rgba(61,8,11,0.42) 72%, rgba(61,8,11,0.18) 100%);
}
/* The gold hairline the menu panels are framed with. */
.cw-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300) 35%, var(--gold-500) 65%, var(--gold-700));
}
.cw-hero__inner {
  position: relative; z-index: 2;
  max-width: 1240px; width: 100%; margin: 0 auto;
  padding: 96px 64px;
  color: var(--gold-100);
}
.cw-hero__script {
  font-family: var(--font-script); color: var(--gold-400);
  font-size: clamp(72px, 14vw, 128px); line-height: 0.85; margin-bottom: -12px;
}
.cw-hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 7vw, 76px); line-height: 1.04; letter-spacing: var(--tracking-tight);
  color: var(--gold-100); margin: 0 0 24px; max-width: 18ch;
}
.cw-hero__lede {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 22px; line-height: 1.5; color: rgba(253,244,210,0.85);
  max-width: 48ch; margin: 0 0 40px;
}
.cw-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============ Section common ============ */
.cw-section { padding: 100px 40px; max-width: 1240px; margin: 0 auto; }
.cw-section__head {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 60ch;
}
.cw-section__head .cw-eyebrow { display: inline-flex; }
.cw-section__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: var(--tracking-tight);
  color: var(--fg-1); margin: 0 0 14px;
}
.cw-section__lede {
  font-family: var(--font-display); font-style: italic; font-size: 19px;
  color: var(--fg-2); margin: 0;
}
/* The filigree rule the printed menu puts under each panel title. */
.cw-ornament {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 18px auto 0; max-width: 260px;
  color: var(--gold-600);
}
.cw-ornament::before,
.cw-ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.cw-ornament::after { background: linear-gradient(90deg, currentColor, transparent); }
.cw-ornament span { font-size: 13px; letter-spacing: 0.4em; }
.cw-ornament--light { color: var(--gold-400); opacity: 0.8; }

/* ============ Menu ============ */
.cw-menu { padding: 100px 40px; max-width: 1240px; margin: 0 auto; }
.cw-chip-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.cw-chip {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--fg-1); cursor: pointer;
  transition: all 180ms var(--ease-soft);
}
.cw-chip:hover { border-color: var(--forest-700); color: var(--forest-700); }
.cw-chip.is-active { background: var(--forest-800); color: var(--gold-200); border-color: var(--forest-800); }

.cw-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* fade-in transition for category switches */
.menu-cat-wrap {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.menu-cat-wrap.in {
  opacity: 1;
  transform: translateY(0);
}
.menu-cat-wrap.out {
  opacity: 0;
  transform: translateY(-4px);
}
/* small cascade across cards inside the new view */
.cw-menu-card {
  animation: cardIn 360ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each category is a panel, the way the printed trifold is panelled: its own
   colour, a ruled heading, a tinted ground. The colour comes from
   [data-cat-id] below; anything the shop invents later keeps the gold. */
.cw-cat-section {
  --cat-accent: var(--gold-600);
  --cat-tint: rgba(169, 130, 31, 0.05);
  margin-bottom: 40px;
  padding: 34px 30px 36px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--cat-accent);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--cat-tint), transparent 220px),
    var(--parchment);
  box-shadow: var(--shadow-sm);
}
.cw-cat-section:last-child { margin-bottom: 0; }
.cw-cat-section-head {
  margin-bottom: 24px; padding-bottom: 12px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid color-mix(in srgb, var(--cat-accent) 35%, transparent);
}
.cw-cat-name {
  font-family: var(--font-board); font-weight: 700;
  font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cat-accent);
  margin: 0;
}
.cw-cat-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; color: var(--fg-2);
}

/* The panels, in the order they appear on the printed menu. */
.cw-cat-section[data-cat-id="signature"]  { --cat-accent: var(--cat-signature);  --cat-tint: rgba(17, 74, 51, 0.07); }
.cw-cat-section[data-cat-id="chai"]       { --cat-accent: var(--cat-chai);       --cat-tint: rgba(28, 142, 123, 0.07); }
.cw-cat-section[data-cat-id="coffee"]     { --cat-accent: var(--cat-coffee);     --cat-tint: rgba(140, 74, 47, 0.07); }
.cw-cat-section[data-cat-id="matcha"]     { --cat-accent: var(--cat-matcha);     --cat-tint: rgba(200, 97, 127, 0.08); }
.cw-cat-section[data-cat-id="refreshers"] { --cat-accent: var(--cat-refreshers); --cat-tint: rgba(122, 23, 27, 0.06); }
.cw-cat-section[data-cat-id="press"]      { --cat-accent: var(--cat-press);      --cat-tint: rgba(138, 53, 36, 0.06); }
.cw-cat-section[data-cat-id="breakfast"]  { --cat-accent: var(--cat-breakfast);  --cat-tint: rgba(210, 128, 42, 0.08); }
.cw-cat-section[data-cat-id="street"]     { --cat-accent: var(--cat-street);     --cat-tint: rgba(34, 51, 107, 0.06); }
.cw-cat-section[data-cat-id="maggi"]      { --cat-accent: var(--cat-street);     --cat-tint: rgba(34, 51, 107, 0.06); }

.cw-menu-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px;
  transition: all var(--dur-base) var(--ease-soft);
  display: flex; flex-direction: column;
}
@media (hover: hover) {
  .cw-menu-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.cw-menu-card.is-featured { border-top: 2px solid var(--cat-accent, var(--gold-400)); }
.cw-menu-card.is-dark { background: var(--onyx-900); border-color: var(--onyx-900); color: var(--gold-100); }
.cw-menu-card.is-dark .cw-menu-card__name { color: var(--gold-100); }
.cw-menu-card.is-dark .cw-menu-card__desc { color: rgba(253,244,210,0.7); }
.cw-menu-card.is-dark .cw-menu-card__urdu { color: var(--gold-300); }
.cw-menu-card.is-dark .cw-plus { background: var(--gold-400); color: var(--onyx-900); }
.cw-menu-card.is-dark .cw-plus:hover { background: var(--gold-300); }
.cw-menu-card__badge {
  display: inline-block;
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cat-accent, var(--gold-700));
  margin-bottom: 12px;
}
.cw-menu-card.is-dark .cw-menu-card__badge { color: var(--gold-300); }
.cw-menu-card.is-dark .cw-menu-card__price,
.cw-menu-card.is-dark .cw-menu-card__from { color: var(--gold-100); }
.cw-menu-card.is-dark .cw-sold-out { color: var(--gold-300); }
.cw-menu-card__name { font-family: var(--font-display); font-weight: 500; font-size: 28px; color: var(--fg-1); margin: 0 0 2px; line-height: 1.05; }
.cw-menu-card__urdu { font-family: var(--font-urdu); font-size: 22px; color: color-mix(in srgb, var(--cat-accent, var(--gold-600)) 84%, black); direction: rtl; margin-bottom: 12px; line-height: 1; }
.cw-menu-card__desc { font-family: var(--font-sans); font-size: 15px; color: var(--fg-2); line-height: 1.6; margin: 0 0 24px; flex: 1; }
.cw-menu-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The printed board sets prices in the same serif as the item names. */
.cw-menu-card__price { font-family: var(--font-board); font-weight: 600; font-size: 20px; color: var(--fg-1); }
/* "from" — the price shown is the smaller pour, like the left column on the card */
.cw-menu-card__from {
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3);
  margin-right: 6px;
}

.cw-plus {
  width: 40px; height: 40px; border-radius: 50%;
  /* Darkened a step so the gold glyph clears 4.5:1 on the lighter accents. */
  background: color-mix(in srgb, var(--cat-accent, var(--onyx-900)) 80%, black);
  color: var(--gold-100);
  border: none; font-size: 22px; font-weight: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
@media (hover: hover) {
  .cw-plus:hover { background: var(--gold-400); color: var(--onyx-900); }
}
.cw-plus:active { background: var(--gold-500); color: var(--onyx-900); }

.cw-qty {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--cat-accent, var(--onyx-900)) 80%, black);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cw-qty button {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--gold-100);
  font-size: 16px; font-weight: 400;
  transition: background var(--dur-fast);
}
@media (hover: hover) {
  .cw-qty button:hover { background: var(--gold-400); color: var(--onyx-900); }
}
.cw-qty button:active { background: var(--gold-500); color: var(--onyx-900); }
.cw-qty .qty-num {
  min-width: 26px; text-align: center;
  font-family: var(--font-sans); font-weight: 600;
  color: var(--gold-100); font-size: 13px;
}
.cw-menu-card.is-dark .cw-qty { background: var(--gold-400); }
.cw-menu-card.is-dark .cw-qty button { color: var(--onyx-900); }
.cw-menu-card.is-dark .cw-qty .qty-num { color: var(--onyx-900); }

/* ============ Story strip ============ */
/* Parchment, like the coffee and savoury panels, with the mural cut into the
   doorway arch the street-cart wall is painted around. */
.cw-story {
  display: grid; grid-template-columns: 5fr 7fr; gap: 64px;
  align-items: center;
  max-width: 1240px; margin: 0 auto;
  padding: 100px 40px;
}
.cw-story-band { background: var(--parchment); border-block: 1px solid var(--border); }
.cw-story__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-arch);
  border: 2px solid var(--gold-500);
  box-shadow: var(--shadow-md);
}
.cw-story__copy { max-width: 52ch; display: flex; flex-direction: column; gap: 20px; }
.cw-story__copy .cw-section__title { font-size: clamp(32px, 4vw, 48px); }
.cw-body--serif {
  font-family: var(--font-display); font-style: italic; font-size: 22px;
  color: var(--fg-2); line-height: 1.5; margin: 0;
}
.cw-body { font-family: var(--font-sans); font-size: 17px; color: var(--fg-1); line-height: 1.7; margin: 0; }

/* ============ Visit ============ */
/* The burgundy cover panel of the printed menu, gold arabesque and all. */
.cw-visit {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(239,197,63,0.12), transparent 58%),
    linear-gradient(160deg, var(--burgundy-800), var(--burgundy-900));
  color: var(--gold-100);
  border-block: 1px solid var(--gold-600);
}
.cw-visit__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 100px 40px;
  display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center;
}
.cw-visit__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.06; color: var(--gold-100);
  margin: 0 0 16px;
}
.cw-visit__lede { font-family: var(--font-display); font-style: italic; font-size: 20px; color: rgba(253,244,210,0.8); margin: 0 0 32px; max-width: 48ch; line-height: 1.5; }
.cw-visit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.cw-visit__addr { font-family: var(--font-sans); font-size: 15px; color: rgba(253,244,210,0.85); line-height: 1.7; margin: 0; }
.cw-visit__addr em { color: var(--gold-300); font-style: italic; font-family: var(--font-display); }
.cw-visit__media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-arch); border: 2px solid var(--gold-500); box-shadow: var(--shadow-lg); }

/* ============ Footer ============ */
.cw-footer { background: var(--onyx-900); color: var(--gold-100); border-top: 1px solid var(--gold-500); }
.cw-footer__top {
  max-width: 1240px; margin: 0 auto;
  padding: 72px 40px 48px;
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px;
}
.cw-footer__brand img { height: 80px; margin-bottom: 14px; }
.cw-footer__urdu { font-family: var(--font-urdu); font-size: 32px; color: var(--gold-400); direction: rtl; line-height: 1; margin-bottom: 14px; }
.cw-footer__brand p { font-family: var(--font-display); font-style: italic; font-size: 17px; color: rgba(253,244,210,0.7); margin: 0; }
.cw-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cw-footer__head { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 14px; }
.cw-footer__cols a { display: block; font-family: var(--font-sans); font-size: 14px; color: var(--gold-100); opacity: 0.8; padding: 5px 0; transition: color var(--dur-fast), opacity var(--dur-fast); }
.cw-footer__cols a:hover { color: var(--gold-300); opacity: 1; }
.cw-footer__base {
  max-width: 1240px; margin: 0 auto;
  padding: 24px 40px 40px;
  display: flex; gap: 16px; align-items: center;
  font-family: var(--font-sans); font-size: 12px;
  color: rgba(253,244,210,0.55); letter-spacing: 0.05em;
  border-top: 1px solid rgba(253,244,210,0.1);
  flex-wrap: wrap;
}
.cw-footer__base a { color: rgba(253,244,210,0.7); margin-left: auto; }
.cw-footer__base a + a { margin-left: 16px; }

/* ============ FLOATING CART FAB ============ */
.cart-fab {
  position: fixed; left: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 65;
  background: var(--gold-400); color: var(--onyx-900);
  border-radius: var(--r-pill);
  padding: 12px 22px 12px 50px;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-gold);
  transform: translateY(140px) scale(0.92);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base), background var(--dur-fast);
}
.cart-fab.show { transform: translateY(0) scale(1); opacity: 1; }
@media (hover: hover) {
  .cart-fab:hover { background: var(--gold-500); transform: translateY(-2px); }
}
.cart-fab:active { background: var(--gold-500); }
.cart-fab .cart-fab-icon {
  position: absolute; left: 8px;
  width: 34px; height: 34px;
  background: var(--onyx-900); color: var(--gold-100);
  border-radius: 50%;
  display: grid; place-items: center;
}
.cart-fab .cart-fab-icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
.cart-fab .cart-fab-count {
  position: absolute; top: -6px; left: 30px;
  background: var(--terracotta); color: var(--gold-100);
  border-radius: var(--r-pill);
  min-width: 22px; height: 22px; padding: 0 6px;
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
}
.cart-fab .cart-fab-label {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.7;
}
.cart-fab .cart-fab-total {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  display: block;
}

/* ============ CART DRAWER ============ */
.cart-drawer {
  position: fixed; top: 0; right: 0;
  width: 100%; max-width: 440px;
  height: 100vh;
  height: 100dvh;                /* iOS Safari/Chrome dynamic viewport, accounts for bottom URL bar */
  background: var(--paper); color: var(--fg-1);
  z-index: 1000;
  transform: translateX(100%);
  /* Off screen is not the same as gone: a translated drawer keeps its close
     button, promo field and Checkout in the tab order, so a keyboard user
     tabbing past the footer used to land inside an invisible cart. visibility
     takes them out of it — switched on the instant the drawer opens, and only
     once the slide has finished on the way out, so nothing about the animation
     changes. */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border-strong);
  box-shadow: -20px 0 50px -20px rgba(8,12,10,0.4);
}
.cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}

/* Text for screen readers and nothing else — the live region that announces
   what just went into the cart, which is otherwise only a number in a corner. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cart-drawer-head {
  padding: 22px 26px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--onyx-900); color: var(--gold-100);
  border-bottom: 1px solid var(--gold-500);
}
.cart-drawer-head h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  color: var(--gold-100);
}
.cart-drawer-head .close-x {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(253,244,210,0.22);
  color: var(--gold-200);
  display: grid; place-items: center;
}
.cart-drawer-head .close-x:hover { border-color: var(--gold-400); color: var(--gold-400); }

.cart-items {
  flex: 1; overflow-y: auto;
  padding: 16px 26px;
}
.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--fg-3);
}
.cart-empty .empty-mark {
  width: 64px; height: 64px;
  display: block;
  margin: 0 auto 16px;
  color: var(--gold-500);
}
.cart-empty p {
  font-family: var(--font-display); font-style: italic; font-size: 19px;
  color: var(--fg-2);
}

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line .line-info b {
  display: block;
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
  color: var(--fg-1);
}
.cart-line .line-modifiers {
  display: block;
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--fg-2); margin-top: 2px;
  line-height: 1.4;
}
.cart-line .line-unit {
  display: block;
  font-size: 12px; color: var(--fg-3);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.cart-line .line-total {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--fg-1);
  text-align: right;
  white-space: nowrap;
}
.cart-line .line-controls {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}

.cart-foot {
  padding: 22px 26px calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-strong);
  background: var(--stone-50);
}
.cart-row {
  display: flex; justify-content: space-between;
  font-size: 14px; padding: 4px 0; color: var(--fg-2);
}
.cart-row.cart-grand {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; color: var(--fg-1);
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border-strong);
}

.cart-promo-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  margin-top: 14px;
}
.cart-promo-row input {
  padding: 12px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;                  /* 16px+ to stop iOS auto-zoom on focus */
  outline: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-appearance: none;
}
.cart-promo-row input:focus { border-color: var(--onyx-900); }
.cart-promo-row button {
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--onyx-900);
  color: var(--gold-100);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
/* Hover effect only on devices that actually have a hover capability */
@media (hover: hover) {
  .cart-promo-row button:hover {
    background: var(--gold-400);
    color: var(--onyx-900);
  }
}
/* Explicit pressed state for touch — gives clear feedback without sticking */
.cart-promo-row button:active {
  background: var(--onyx-800);
  color: var(--gold-300);
}
.cart-promo-status {
  font-size: 12px; margin-top: 6px;
  color: var(--success); font-weight: 500;
}
.cart-promo-status.error { color: var(--danger); }

.checkout-btn {
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--r-pill);
  background: var(--gold-400); color: var(--onyx-900);
  font-family: var(--font-sans); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 13px;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all var(--dur-base) var(--ease-soft);
}
@media (hover: hover) {
  .checkout-btn:hover:not(:disabled) {
    background: var(--gold-500);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(239,197,63,0.45);
  }
}
.checkout-btn:active:not(:disabled) { background: var(--gold-500); transform: translateY(0); }
.checkout-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.cart-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,12,10,0.55);
  z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base);
}
.cart-backdrop.show { opacity: 1; pointer-events: auto; }

/* ============ MODALS ============ */
.modal {
  position: fixed; inset: 0;
  background: rgba(8,12,10,0.55);
  z-index: 1100;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  /* respect the iPhone bottom chrome so the modal isn't cut off */
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-top: max(24px, env(safe-area-inset-top));
}
.modal.show { display: flex; animation: modalfade var(--dur-base) var(--ease-out); }
@keyframes modalfade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: 32px;
  max-width: 540px; width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.modal-card .close-x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--onyx-900); color: var(--gold-100);
  display: grid; place-items: center;
  font-size: 16px;
  transition: background var(--dur-fast);
}
.modal-card .close-x:hover { background: var(--gold-400); color: var(--onyx-900); }
.modal-card h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  color: var(--fg-1); margin: 0 0 6px;
  padding-right: 40px;
}
.modal-card .helper { font-family: var(--font-sans); font-size: 14px; color: var(--fg-2); margin: 0 0 20px; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.field-grid.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2);
}
.field input, .field select, .field textarea {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-family: var(--font-sans);
  font-size: 16px;             /* iOS won't auto-zoom on focus when font-size >= 16px */
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-fast);
  -webkit-appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--onyx-900); }
.field textarea { min-height: 70px; resize: vertical; font-family: var(--font-sans); }

.checkout-summary {
  background: var(--surface-warm);
  padding: 18px 20px;
  border-radius: var(--r-md);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.checkout-summary h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-700);
  margin: 0 0 10px;
}
.checkout-summary .sum-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; font-size: 14px;
  color: var(--fg-1);
}
.checkout-summary .sum-row.totals {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}
.checkout-summary .sum-row.grand {
  font-family: var(--font-display); font-size: 19px;
  color: var(--fg-1);
}
.checkout-summary .sum-mods {
  font-size: 12.5px; color: var(--fg-2);
  margin-top: 2px;
}

.section-divider-text {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-2);
}
.section-divider-text::before, .section-divider-text::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.payment-stub {
  padding: 14px 16px;
  background: var(--stone-50);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold-400);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
  margin-top: 8px;
}

/* Curbside is money owed before the drink moves, so the payment note stops
   being background text and picks up the gold the rest of the flow uses for
   "this one matters". */
.payment-stub.prepay {
  background: var(--surface-warm);
  border-left-width: 3px;
  color: var(--fg-1);
}

/* Square renders the card fields in an iframe it owns, so we style the box
   around it, not the inputs inside. Give it a real min-height: the iframe
   arrives a beat after the modal opens and without one the Place order button
   jumps down the screen just as someone reaches for it. */
#coCardWrap { margin-top: 12px; }
#coCard {
  min-height: 90px;
  padding: 10px 12px;
  background: var(--stone-50);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
#coCard.cw-card-error { border-color: var(--danger, #b3261e); }
.card-secure-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-3);
}

.place-order-btn {
  width: 100%;
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--r-pill);
  background: var(--onyx-900); color: var(--gold-100);
  font-family: var(--font-sans); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 13px;
  transition: all var(--dur-base) var(--ease-soft);
}
@media (hover: hover) {
  .place-order-btn:hover:not(:disabled) {
    background: var(--gold-400); color: var(--onyx-900);
    transform: translateY(-1px);
  }
}
.place-order-btn:active:not(:disabled) { background: var(--gold-400); color: var(--onyx-900); transform: translateY(0); }
.place-order-btn:disabled { opacity: 0.5; }

/* success */
.success-card { text-align: center; padding: 48px 36px 36px; }
.success-card .success-mark {
  font-family: var(--font-script);
  color: var(--gold-400);
  font-size: 72px;
  line-height: 1;
  margin-bottom: 10px;
}
.success-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 36px; margin: 0 0 6px; }
.success-card .order-num {
  display: inline-block;
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  background: var(--onyx-900); color: var(--gold-200);
  border-radius: var(--r-pill);
  padding: 8px 22px;
  letter-spacing: 0.18em; margin: 16px 0 8px;
}
.success-card p { font-family: var(--font-sans); color: var(--fg-2); margin: 6px 0; }

/* ============ MODIFIER PICKER ============ */
.modifier-card { max-width: 480px; }
.modifier-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
}
.modifier-emoji {
  font-family: var(--font-script); color: var(--gold-400);
  font-size: 44px; line-height: 1;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--onyx-900);
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.modifier-titles h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  color: var(--fg-1); margin: 0 0 4px; padding: 0;
}
.modifier-price {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--fg-1);
}
.modifier-desc {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-2);
  margin: 0 0 20px; line-height: 1.55;
}

.modifier-groups { display: flex; flex-direction: column; gap: 20px; }
.modifier-group h4 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-700);
  margin: 0 0 8px;
}
.modifier-group h4 .required-tag {
  font-size: 10px;
  background: var(--terracotta); color: var(--gold-100);
  padding: 2px 8px; border-radius: var(--r-pill);
  letter-spacing: 0.18em;
}
.modifier-group h4 .optional-tag {
  font-size: 10px;
  background: var(--stone-100); color: var(--fg-2);
  padding: 2px 8px; border-radius: var(--r-pill);
  font-weight: 600; letter-spacing: 0.12em; text-transform: none;
}
.modifier-options { display: flex; flex-direction: column; gap: 6px; }
.modifier-option {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: all var(--dur-fast);
}
@media (hover: hover) {
  .modifier-option:hover { background: var(--surface-warm); }
}
.modifier-option.selected {
  border-color: var(--onyx-900);
  background: var(--surface-warm);
  box-shadow: inset 3px 0 0 var(--gold-400);
}
.modifier-option input { margin: 0; accent-color: var(--gold-500); width: 16px; height: 16px; flex-shrink: 0; }
.modifier-option .name { flex: 1; font-family: var(--font-sans); font-size: 15px; color: var(--fg-1); font-weight: 500; }
.modifier-option .delta {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--gold-700); white-space: nowrap;
}

.modifier-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border-strong);
}
.modifier-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  color: var(--fg-1); margin-bottom: 14px;
}
.modifier-total { font-size: 24px; }

/* ============================================================
   WHAT'S ON — the marketing board (index.html, marketing.js)
   Sits between the hero and the menu on a darker band so it
   reads as a noticeboard rather than another row of products.
   ============================================================ */
.cw-whatson {
  background: linear-gradient(180deg, var(--parchment-deep), var(--parchment));
  border-block: 1px solid var(--tan-deep);
}
.cw-whatson[hidden] { display: none; }
.cw-whatson__inner { max-width: 1240px; margin: 0 auto; padding: 84px 40px; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
/* One card shouldn't stretch the width of a desk monitor. */
.mk-grid.is-single { grid-template-columns: minmax(320px, 720px); justify-content: center; }

.mk-card {
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}
@media (hover: hover) {
  .mk-card:hover { border-color: var(--gold-400); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
}
.mk-card.is-featured { border-top: 2px solid var(--gold-400); }
.mk-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.mk-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.mk-card__badge {
  align-self: flex-start;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-extra); text-transform: uppercase;
  color: var(--onyx-900); background: var(--gold-300);
  padding: 5px 10px; border-radius: var(--r-pill); margin-bottom: 12px;
}
.mk-card__kind {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-extra); text-transform: uppercase;
  color: var(--gold-700); margin-bottom: 8px;
}
.mk-card__title {
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  line-height: 1.1; color: var(--fg-1); margin: 0 0 10px;
}
.mk-card__text {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.65;
  color: var(--fg-2); margin: 0 0 16px; flex: 1;
}
.mk-card__dates {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 14px;
}
.mk-card__cta {
  align-self: flex-start;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--gold-700); border-bottom: 1px solid var(--gold-400);
  padding-bottom: 3px; transition: color var(--dur-fast);
}
.mk-card__cta:hover { color: var(--onyx-900); }

/* ============================================================
   THE WALLS — the two murals, and what each corner pours.
   A dark band so the murals carry their own colour rather than
   competing with the parchment panels above them.
   ============================================================ */
.cw-cultures {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(239,197,63,0.10), transparent 55%),
    linear-gradient(170deg, var(--onyx-900), var(--forest-900));
  color: var(--gold-100);
  border-block: 1px solid var(--gold-600);
}
.cw-cultures__inner { max-width: 1240px; margin: 0 auto; padding: 84px 40px; }
.cw-cultures__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 4vw, 48px); line-height: 1.06;
  color: var(--gold-100); margin: 0 0 12px;
}
.cw-cultures__lede {
  font-family: var(--font-display); font-style: italic; font-size: 19px;
  color: rgba(253,244,210,0.75); margin: 0;
}
.cw-cultures__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.cw-culture { margin: 0; }
/* Cropped so each mural is framed on its subject rather than on whatever
   happens to sit in the middle of the wall. */
.cw-culture img {
  width: 100%; aspect-ratio: 5/4; object-fit: cover; object-position: center;
  border-radius: var(--r-arch);
  border: 1px solid var(--gold-600);
  transition: transform var(--dur-base) var(--ease-soft), border-color var(--dur-base);
}
@media (hover: hover) {
  .cw-culture:hover img { transform: translateY(-3px); border-color: var(--gold-300); }
}
.cw-culture--cart img    { object-position: 26% center; }  /* the cart, not the sky */
.cw-culture--counter img { object-position: center 26%; }  /* the pour */

.cw-culture figcaption {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  color: rgba(253,244,210,0.72);
  padding: 14px 4px 0;
}
.cw-culture figcaption b {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-extra);
  text-transform: uppercase; color: var(--gold-400); margin-bottom: 6px;
}
@media (max-width: 980px) {
  .cw-cultures__inner { padding: 64px 32px; }
}
@media (max-width: 700px) {
  .cw-cultures__grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 540px) {
  .cw-cultures__inner { padding: 56px 24px; }
  .cw-culture img { aspect-ratio: 4/3; }
}

/* ============================================================
   CATERING TEASER (home page) — the catalogue lives on /catering
   ============================================================ */
/* Forest green with gold — the signature-drinks panel of the printed menu. */
.cw-catering-teaser {
  position: relative;
  color: var(--gold-100);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(239,197,63,0.12), transparent 60%),
    linear-gradient(150deg, var(--forest-800), var(--forest-900));
  border-block: 1px solid var(--gold-600);
  overflow: hidden;
}
/* The qahwa pourer, faded into the right edge like the panel illustrations. */
.cw-catering-teaser::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: min(42%, 520px);
  background: url('assets/mural-qahwa.jpg') right center / cover no-repeat;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  pointer-events: none;
}
.cw-catering-teaser__inner { position: relative; z-index: 1; }
@media (max-width: 860px) { .cw-catering-teaser::after { display: none; } }
.cw-catering-teaser__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 88px 40px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.cw-catering-teaser__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.05;
  color: var(--gold-100); margin: 0;
}
.cw-catering-teaser__lede {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  color: rgba(253,244,210,0.78); margin: 0; max-width: 56ch;
}
.cw-catering-teaser .cw-btn--primary { margin-top: 6px; }

/* ============================================================
   HOW IT WORKS (/catering) — a request is not an order, said plainly
   ============================================================ */
.cw-how { background: var(--surface-warm); border-top: 1px solid var(--border); }
.cw-how__inner { max-width: 1240px; margin: 0 auto; padding: 84px 40px; }
.cw-how__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.cw-how__steps li {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold-400);
  border-radius: var(--r-md);
  padding: 24px 22px 26px;
}
.cw-how__num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: 12px;
  border-radius: 50%;
  background: var(--onyx-900); color: var(--gold-300);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
}
.cw-how__steps h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  color: var(--fg-1); margin: 0 0 8px; line-height: 1.15;
}
.cw-how__steps p {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  color: var(--fg-2); margin: 0;
}
.cw-how__foot {
  font-family: var(--font-sans); font-size: 15px; color: var(--fg-2);
  margin-top: 28px;
}
.cw-how__foot a { color: var(--gold-700); border-bottom: 1px solid var(--gold-400); }

@media (max-width: 980px) {
  .cw-how__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .cw-catering-teaser__inner { padding: 64px 32px; }
  .cw-how__inner { padding: 64px 32px; }
}
@media (max-width: 540px) {
  .cw-catering-teaser__inner { padding: 56px 24px; }
  .cw-how__inner { padding: 56px 24px; }
  .cw-how__steps { grid-template-columns: 1fr; gap: 14px; }
}

/* The one line of small print under the checkout details. The 26px left indent
   it used to carry lined it up under a marketing opt-in checkbox that no longer
   exists (owner, 2026-08-31), so it sits flush now. */
.consent-note {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.55;
  color: var(--fg-3); margin: 14px 0 0;
}
.consent-note a { color: var(--gold-700); border-bottom: 1px solid var(--gold-400); }

/* ============ ORDER LOOKUP (/order) ============
   Read by someone on the pavement deciding whether to come in, so the status
   is the biggest thing on the page and everything else is support. */
.cw-lookup { background: var(--bg); min-height: 70vh; }
.cw-lookup__inner { max-width: 620px; margin: 0 auto; padding: 72px 40px 96px; }
.cw-lookup__lede {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  color: var(--fg-2); margin: 16px 0 28px;
}
.cw-lookup__form .place-order-btn { margin-top: 18px; }
.cw-lookup__foot { font-family: var(--font-sans); font-size: 14px; color: var(--fg-3); margin-top: 28px; }
.cw-lookup__foot a { color: var(--gold-700); border-bottom: 1px solid var(--gold-400); }

.lk-card {
  margin-top: 28px; padding: 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 3px solid var(--stone-300);
  border-radius: var(--r-md);
}
.lk-card.lk-ready { border-top-color: var(--success); background: rgba(47,122,79,0.05); }
.lk-card.lk-wait  { border-top-color: var(--gold-400); }
.lk-card.lk-done  { border-top-color: var(--stone-300); opacity: 0.85; }
.lk-card.lk-off   { border-top-color: var(--terracotta); }
.lk-status {
  font-family: var(--font-display); font-weight: 500; font-size: 38px;
  line-height: 1.05; color: var(--fg-1);
}
.lk-card.lk-ready .lk-status { color: var(--success); }
.lk-line-copy { font-family: var(--font-sans); font-size: 16px; color: var(--fg-2); margin: 8px 0 18px; }
.lk-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: 13px; color: var(--fg-3);
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.lk-id { font-family: var(--font-mono); font-weight: 600; color: var(--fg-1); letter-spacing: 0.06em; }
.lk-curbside {
  display: flex; flex-direction: column; gap: 4px;
  margin: 16px 0; padding: 14px 16px;
  background: var(--onyx-900); border-radius: var(--r-sm);
  font-family: var(--font-sans);
}
.lk-curbside b {
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-extra);
  text-transform: uppercase; color: var(--gold-400);
}
.lk-curbside span { font-size: 15px; color: var(--gold-100); }
.lk-curbside .lk-arrived { font-size: 13px; color: var(--gold-300); }
/* Prepay is the one thing on this card that is an outstanding obligation,
   so it reads as a note rather than as more reassurance. */
.lk-curbside .lk-unpaid {
  font-size: 13px; color: var(--gold-300);
  border-top: 1px solid rgba(239,197,63,0.25);
  margin-top: 8px; padding-top: 8px;
}
.lk-lines { margin-top: 16px; }
.lk-line {
  font-family: var(--font-sans); font-size: 15px; color: var(--fg-1);
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.lk-line em { display: block; font-size: 12px; color: var(--fg-3); font-style: normal; margin-top: 2px; }
.lk-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-strong);
  font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--fg-1);
}
.lk-refresh { font-family: var(--font-sans); font-size: 12px; color: var(--fg-3); margin-top: 14px; text-align: center; }
@media (max-width: 540px) {
  .cw-lookup__inner { padding: 56px 24px 72px; }
  .lk-status { font-size: 30px; }
}

/* ============ LEGAL PAGES (privacy) ============ */
.cw-legal { background: var(--bg); }
.cw-legal__inner { max-width: 760px; margin: 0 auto; padding: 84px 40px 96px; }
.cw-legal__lede {
  font-family: var(--font-display); font-style: italic; font-size: 19px;
  color: var(--fg-2); line-height: 1.6; margin: 0 0 40px; max-width: 60ch;
}
.cw-legal h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  color: var(--fg-1); margin: 36px 0 10px;
}
.cw-legal p, .cw-legal li {
  font-family: var(--font-sans); font-size: 16px; line-height: 1.75; color: var(--fg-2);
}
.cw-legal p { margin: 0 0 12px; }
.cw-legal ul { margin: 0 0 12px; padding-left: 20px; }
.cw-legal li { margin-bottom: 6px; }
.cw-legal a { color: var(--gold-700); border-bottom: 1px solid var(--gold-400); }
@media (max-width: 540px) { .cw-legal__inner { padding: 56px 24px 72px; } }

/* Sold out: the item stays on the menu so people can see what you make, but
   the card reads as unavailable rather than offering a button that will fail. */
.cw-menu-card__badge--out { color: var(--terracotta); }
.cw-menu-card:has(.cw-sold-out) { opacity: 0.62; }
.cw-menu-card:has(.cw-sold-out) .cw-menu-card__price { text-decoration: line-through; text-decoration-thickness: 1px; }
.cw-sold-out {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-extra); text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 7px 14px;
}

/* Shown in the cart when the shop is shut, so the reason sits beside the
   disabled button instead of surfacing after the customer fills in a form. */
.closed-notice {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.55;
  color: var(--fg-2);
  background: rgba(138,53,36,0.08);
  border-left: 2px solid var(--terracotta);
  padding: 10px 12px; border-radius: var(--r-sm);
  margin-bottom: 10px;
}

/* ============ CURBSIDE (checkout + confirmation) ============ */
.curbside-note {
  font-family: var(--font-sans); font-size: 13px; line-height: 1.6;
  color: var(--fg-2);
  background: var(--surface-warm);
  border-left: 2px solid var(--gold-400);
  padding: 12px 14px; border-radius: var(--r-sm);
  margin: 14px 0 4px;
}
.curbside-confirm {
  display: flex; flex-direction: column; gap: 4px;
  margin: 16px auto 0; max-width: 340px;
  background: var(--onyx-900); color: var(--gold-100);
  border-radius: var(--r-md); padding: 14px 18px;
  font-family: var(--font-sans);
}
.curbside-confirm[hidden] { display: none; }
.curbside-confirm b {
  font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-extra);
  text-transform: uppercase; color: var(--gold-400);
}
.curbside-confirm span:nth-of-type(1) { font-size: 17px; color: var(--gold-100); }
.curbside-confirm span:nth-of-type(2) { font-size: 12px; color: rgba(253,244,210,0.65); line-height: 1.5; }

/* ============ MOBILE NAV (drawer-style on small screens) ============ */
@media (max-width: 880px) {
  .cw-header__row { grid-template-columns: 1fr auto; padding: 14px 24px; }
  .cw-nav { display: none; }
  .cw-mobile-toggle {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(253,244,210,0.22);
    border-radius: 50%;
    color: var(--gold-200);
  }
  .cw-mobile-toggle svg { width: 20px; height: 20px; stroke-width: 1.75; }
  .cw-header.open .cw-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--onyx-900);
    border-bottom: 1px solid var(--gold-500);
    padding: 8px 24px 20px;
  }
  .cw-header.open .cw-nav__link { padding: 14px 0; border-bottom: 1px solid rgba(253,244,210,0.08); }
  .cw-statusbar { font-size: 11px; gap: 12px; padding: 10px 20px; }
}

@media (max-width: 860px) {
  .cw-hero__inner { padding: 64px 32px; }
  .cw-section, .cw-menu, .cw-story, .cw-visit__inner, .cw-whatson__inner { padding-left: 32px; padding-right: 32px; }
  .cw-whatson__inner { padding-top: 64px; padding-bottom: 64px; }
  .cw-story { grid-template-columns: 1fr; gap: 40px; }
  .cw-visit__inner { grid-template-columns: 1fr; gap: 40px; }
  .cw-menu__grid { grid-template-columns: repeat(2, 1fr); }
  .cw-cat-section { padding: 28px 22px 30px; }
  .cw-footer__top { grid-template-columns: 1fr; gap: 40px; padding: 56px 32px 36px; }
  .cw-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .cw-footer__base { padding: 24px 32px 32px; }
}

@media (max-width: 540px) {
  .cw-hero { min-height: 540px; }
  .cw-hero__inner { padding: 56px 24px; }
  .cw-menu__grid { grid-template-columns: 1fr; }
  /* The panel frame costs too much width on a phone — keep the colour, drop the box. */
  .cw-cat-section {
    padding: 22px 16px 24px;
    margin-left: -6px; margin-right: -6px;
    border-radius: var(--r-md);
  }
  .cw-cat-name { font-size: 20px; }
  .cw-footer__cols { grid-template-columns: 1fr 1fr; }
  .cart-drawer { max-width: 100%; }
  .field-grid { grid-template-columns: 1fr; }
  .cart-fab { padding: 10px 18px 10px 46px; font-size: 12px; }
  .cw-visit__cols { grid-template-columns: 1fr; gap: 20px; }
  .modal-card { padding: 24px; }
  .mk-grid, .mk-grid.is-single { grid-template-columns: 1fr; }
  .cw-whatson__inner { padding: 56px 24px; }
  .mk-card__title { font-size: 26px; }
  /* Two collection options side by side is too tight on a phone. */
  .cat-seg { flex-direction: column; }
}

/* The "we couldn't draw this" panel that sits inside #menuBody and
   #cateringBody as static HTML. Script replaces the whole container on its
   first successful render, so in the normal case nobody ever sees it. */
.cw-loadfail {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 640px; margin: 32px auto;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-400);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  font-family: var(--font-sans);
  text-align: left;
}
.cw-loadfail b { font-size: 17px; color: var(--fg-1); font-weight: 600; }
.cw-loadfail span { font-size: 15px; line-height: 1.65; color: var(--fg-2); }
.cw-loadfail a { color: var(--forest-700); font-weight: 600; }

/* loading steam (replaces the chai-pour scroll widget; design system prefers steam wisps) */
.cw-steam {
  position: fixed; right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 60;
  width: 64px; height: 90px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.cw-steam.show { opacity: 1; }
.cw-steam svg { width: 100%; height: 100%; }
@media (max-width: 540px) { .cw-steam { display: none; } }

/* ============ Thumbs, not cursors ============
   A phone is where this site is actually used — someone standing outside the
   shop, one-handed. The controls below were sized for a mouse pointer: the
   quantity steppers came out at 34px and the hamburger at 38px, under the 44px
   that Apple and the WCAG target-size guidance both ask for, and the steppers
   are the worst place for it because they're the one control people tap
   repeatedly and in a hurry. `pointer: coarse` is the honest test — it grows
   them for touch and leaves the desktop layout exactly as drawn. */
@media (pointer: coarse) {
  .cw-qty button { width: 44px; height: 44px; }
  .cw-qty .qty-num { min-width: 32px; font-size: 14px; }
  .cw-plus { width: 44px; height: 44px; }
  .cw-mobile-toggle { width: 44px; height: 44px; }
  .cart-drawer-head .close-x, .modal-card .close-x { width: 44px; height: 44px; }
}

/* Reduced motion, honoured site-wide.
   ---------------------------------------------------
   `catering.js` asked for this per-animation; everything else here — the
   card entrance, the modal fade, and 26 transitions — ignored the preference
   entirely. For a vestibular disorder that setting is an accessibility need,
   not a taste.
   Near-zero rather than `none`: a duration of 0.01ms still fires transitionend
   and animationend, so any script waiting on one doesn't hang forever. Killing
   them outright is the version of this rule that quietly breaks things. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}