/* ── NOMU PWA theme ──
   Brand tokens from noflu / nomu-mini-kiosk (authoritative):
   bg #121212 · surfaces #1D1D1D/#262626 · accent #FF6B00 · text #D8D8D8 · muted #9D9D9D
   error #FF4646 · success #0C8827 · fonts Archivo (Latin) / IBM Plex Sans JP (JA) */
:root {
  --bg: #121212;
  --surface: #1d1d1d;
  --surface-2: #262626;
  --line: #333333;
  --accent: #ff6b00;
  --accent-press: #ff5a13;
  --text: #d8d8d8;
  --text-hi: #ffffff;
  --muted: #9d9d9d;
  --muted-2: #757575;
  --error: #ff4646;
  --success: #0c8827;
  --highlight: #ffc700;
  --radius-pill: 100px;
  --radius-card: 14px;
  --radius-img: 8px;
  --maxw: 560px;
  --bar-h: 68px;
  --font: 'Archivo', 'IBM Plex Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;            /* never scroll the page sideways */
}
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* dvh = the height actually visible on a phone (iOS Safari's 100vh hides behind its toolbars) */
#app { min-height: 100vh; min-height: 100dvh; }
.screen {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── App bar ── */
.appbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: rgba(18, 18, 18, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.appbar-titles { flex: 1; min-width: 0; }
.appbar-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
.icon-btn {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: none; color: var(--text);
  border-radius: 50%;
}
.icon-btn:active { background: var(--surface); }

.screen-body { flex: 1; padding: 16px; }
.screen-body.has-bar { padding-bottom: calc(var(--bar-h) + 24px); }
.screen-body.has-footer { padding-bottom: 12px; }

/* ── Buttons ── */
.btn {
  border: none;
  border-radius: var(--radius-pill);
  height: 52px;
  padding: 0 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--bg);
}
.btn:disabled { opacity: 0.55; }
.btn-primary { background: var(--accent); color: #121212; }
.btn-primary:active:not(:disabled) { background: var(--accent-press); }
.btn-secondary { background: var(--surface); color: var(--text); }
.btn-block { width: 100%; }

/* ── Welcome ── */
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.brand-mark { display: grid; place-items: center; }
.brand-title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: 4px; color: var(--text-hi); }
.brand-logo { height: 30px; width: auto; display: block; }
.lead-title { margin: 4px 0 6px; font-size: 26px; font-weight: 700; color: var(--text-hi); }

/* "or get the full app" divider + store buttons */
.or-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--muted-2); font-size: 13px; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.store-buttons { display: flex; flex-direction: column; gap: 10px; }
.store-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text-hi); text-decoration: none;
}
.store-btn:active { border-color: var(--accent); }
.store-ico { flex: none; display: grid; place-items: center; color: var(--text-hi); }
.store-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-small { font-size: 11px; color: var(--muted); }
.store-big { font-size: 16px; font-weight: 600; }

/* Sign-in link at the top of the landing */

/* ── Profile overlay (modal, not a page) ── */
.field-label { font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }
.field {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-hi);
  font-size: 16px;
}
.field::placeholder { color: var(--muted-2); }
.field:focus { outline: none; border-color: var(--accent); }
.fineprint { font-size: 12px; color: var(--muted-2); margin: 14px 0 0; }
.fineprint.center { text-align: center; }
.verify-title { margin: 4px 0 6px; font-size: 22px; color: var(--text-hi); }
.code-field { text-align: center; font-size: 26px; letter-spacing: 10px; font-weight: 700; }
.verify-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 14px; }
.verify-actions .dot-sep { color: var(--muted-2); }

/* ── Cards / lists ── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.loading, .empty, .hint {
  padding: 32px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.hint { padding: 8px 4px 16px; font-size: 13px; }

/* ── Pod list ── */
.pod-list { display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; align-items: baseline; gap: 8px; margin: 8px 2px 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.section-head:first-child { margin-top: 0; }
.section-count { font-weight: 600; color: var(--muted-2); }
.pod-card.is-cafe { border-left: 3px solid var(--accent); }
.pod-icon.cafe { color: var(--accent); background: rgba(255, 107, 0, 0.14); }
.pod-icon.pod { color: var(--text); }
.pod-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  text-align: left;
  color: var(--text);
}
.pod-card:active { border-color: var(--accent); }
.pod-icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border-radius: 12px;
  color: var(--accent);
}
.pod-body { flex: 1; min-width: 0; }
.pod-name { font-size: 17px; font-weight: 600; color: var(--text-hi); }
.pod-loc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.pod-dist {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(255, 107, 0, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.pod-dist.far { color: var(--muted); background: rgba(157, 157, 157, 0.12); }
.chev { flex: none; color: var(--muted-2); display: grid; place-items: center; }

/* Location-in-use chip (top-right of the pods app bar) */
.loc-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 44%;
  padding: 6px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text); font-size: 12px; font-weight: 600;
}
.loc-chip .loc-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-dot { display: inline-grid; place-items: center; color: var(--muted-2); }
.loc-dot.on { color: var(--accent); }
.loc-chip.off { color: var(--muted); }
.loc-chip.locating { color: var(--muted); }
.link-btn { background: none; border: none; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; }

/* ── Menu ── */
/* Wrap so the filter never becomes one long overflowing row. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; }
.chips[hidden] { display: none; }
.menu-note { margin: 0 0 14px; padding: 10px 12px; background: var(--surface); border-radius: 10px; font-size: 13px; color: var(--muted); }
.chip {
  flex: none;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #121212; font-weight: 600; }

/* Drinks / Food segmented toggle (cafe machines only) */
.seg { display: inline-flex; margin-bottom: 14px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.seg-btn { border: none; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; padding: 7px 20px; border-radius: var(--radius-pill); }
.seg-btn.active { background: var(--accent); color: #121212; }

/* Image-led cards (nomu-app DrinkCard): borderless, big rounded image, name,
   category subtitle, price; floating + to add. */
.menu-grid { display: grid; grid-template-columns: repeat(var(--menu-cols, 2), minmax(0, 1fr)); gap: 12px; }
/* Lunch set / breakfast lists (nomu-app FoodListScreen / BreakfastListScreen) */
.menu-grid.meal-grid { gap: 24px; }
.menu-grid.cols-3 { gap: 16px 10px; }
.menu-grid.cols-4 { gap: 13px 8px; }
/* Denser columns → smaller card text so it still reads well. */
.menu-grid.cols-3 .drink-name { font-size: 14px; }
.menu-grid.cols-3 .drink-price { font-size: 15px; }
.menu-grid.cols-4 .drink-name { font-size: 12px; margin-top: 7px; }
.menu-grid.cols-4 .drink-sub { font-size: 11px; }
.menu-grid.cols-4 .drink-price { font-size: 13px; margin-top: 4px; }
.menu-grid.cols-4 .add-fab { width: 30px; height: 30px; font-size: 19px; right: 6px; bottom: 6px; }
.menu-grid.cols-3 .add-fab { width: 34px; height: 34px; }
/* min-width:0 stops nowrap names from blowing the grid columns out to unequal
   widths (which also caused horizontal page overflow / filter chips off-screen). */
.drink-card { display: flex; flex-direction: column; min-width: 0; }

/* Column-zoom control (2 / 3 / 4) in the menu app bar */
.cols-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.cols-btn { display: grid; place-items: center; width: 30px; height: 28px; border: none; border-radius: 7px; background: none; color: var(--muted); }
.cols-btn.active { background: var(--accent); color: #121212; }

/* ── Tabbed app bar (menu): top row + sticky Drinks|Food tabs ── */
.menu-appbar { flex-direction: column; align-items: stretch; gap: 10px; }
.appbar-top { display: flex; align-items: center; gap: 8px; }
.menu-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.menu-tabs[hidden] { display: none; }
.menu-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.menu-tab.active { border-color: var(--accent); background: rgba(255, 107, 0, 0.12); color: var(--text-hi); }
.tab-ico { font-size: 18px; line-height: 1; }
.tab-label { font-size: 15px; font-weight: 600; }
.tab-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 1px 8px; border-radius: var(--radius-pill); }
.menu-tab.active .tab-count { color: var(--accent); background: rgba(255, 107, 0, 0.16); }

/* ── Menu layout: left filter rail + drinks grid ── */
.menu-body { display: flex; gap: 12px; align-items: flex-start; }
.menu-main { flex: 1; min-width: 0; }
.menu-rail {
  flex: none; width: 62px;
  position: sticky; top: 70px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 150px); overflow-y: auto;
  scrollbar-width: none; padding-bottom: 8px;
}
.menu-body.tabbed .menu-rail { top: 122px; }
.menu-rail::-webkit-scrollbar { display: none; }
.menu-rail[hidden] { display: none; }
.rail-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 3px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--muted);
}
.rail-tile.active { border-color: var(--accent); background: rgba(255, 107, 0, 0.14); color: var(--text-hi); }
.rail-ico { font-size: 20px; line-height: 1; }
.rail-label { font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.1; }

/* ── Bottom order bar (cafe): basket summary → checkout ── */
.order-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(var(--maxw), calc(100% - 24px));
  height: var(--bar-h);
  background: var(--accent); color: #121212;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 20;
}
.order-bar[hidden] { display: none; }
.order-summary { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; border: none; background: none; color: #121212; padding: 0 18px; }
.basket-breakdown { font-weight: 700; font-size: 15px; }
.order-summary .basket-total { margin-left: auto; font-weight: 800; font-size: 18px; }
.order-summary .basket-cta { font-weight: 700; }

/* ── Detail overlay: big coaster carousel + alternatives + ingredients ── */
.detail-overlay { position: fixed; inset: 0; z-index: 70; background: var(--bg); max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; overflow-y: auto; }
.detail-overlay[hidden] { display: none; }
.detail-body { padding: 0 0 96px; flex: 1; }
.detail-hero { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--surface-2); }
.detail-hero::-webkit-scrollbar { display: none; }
.detail-slide { flex: none; width: 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; }
.detail-slide img { width: 100%; height: 100%; object-fit: cover; }
.detail-info { padding: 18px 16px; }
.detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-name { font-size: 22px; font-weight: 700; color: var(--text-hi); }
.detail-cat { font-size: 13px; color: var(--muted); margin-top: 3px; }
.detail-price { font-size: 22px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.detail-desc { margin: 14px 0 0; color: var(--text); font-size: 15px; line-height: 1.55; }
.detail-desc:empty { display: none; }
.detail-sec { margin-top: 22px; }
.detail-h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.ing-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ing-chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: 13px; color: var(--text); }
.muted-line { color: var(--muted); font-size: 14px; }
.detail-alts { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.detail-alts::-webkit-scrollbar { display: none; }
.alt-thumb { flex: none; width: 108px; border: none; background: none; padding: 0; text-align: left; color: var(--text); }
.alt-thumb img, .alt-thumb .img-ph { width: 108px; height: 108px; border-radius: var(--radius-img); object-fit: cover; display: block; }
.alt-name { display: block; margin-top: 6px; font-size: 13px; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Yellow highlight on coasters already in the order */
.drink-card.in-order .drink-img { box-shadow: 0 0 0 3px var(--highlight); }

/* Detail footer: quantity stepper + Add button */
.detail-footer { display: flex; align-items: center; gap: 12px; }
.detail-footer .add-qty-btn { flex: 1; }
.stepper.big { flex: none; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px; }
.stepper.big .step-btn { width: 40px; height: 40px; font-size: 22px; }
.stepper.big .step-qty { min-width: 28px; font-size: 18px; }

/* ── Featured nearest location (hero) ── */
.pod-hero { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; padding: 18px; border: 1.5px solid var(--accent); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 107, 0, 0.16), var(--surface) 62%); color: var(--text); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.pod-hero .pod-icon { width: 52px; height: 52px; }
.hero-dist { font-size: 13px; font-weight: 700; color: #121212; background: var(--accent); padding: 5px 12px; border-radius: var(--radius-pill); }
.hero-name { font-size: 22px; font-weight: 700; color: var(--text-hi); }
.hero-sub { font-size: 14px; color: var(--muted); }
.hero-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; align-self: flex-start; font-weight: 700; color: var(--accent); }
.hero-chev { display: inline-grid; place-items: center; }
.section-head.sub { font-size: 12px; opacity: 0.85; }
.drink-card.pickable { cursor: pointer; }
.drink-card.pickable:active .drink-img { outline: 2px solid var(--accent); outline-offset: 2px; }
.drink-card.sold-out .drink-name,
.drink-card.sold-out .drink-price { opacity: 0.5; }
.drink-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}
.drink-img img { width: 100%; height: 100%; object-fit: cover; }
.img-ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.qty-badge {
  position: absolute; top: 8px; left: 8px;
  min-width: 24px; height: 24px;
  display: grid; place-items: center;
  padding: 0 6px;
  background: var(--accent); color: #121212;
  font-size: 13px; font-weight: 800;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.add-fab {
  position: absolute; right: 8px; bottom: 8px;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--accent); color: #121212;
  font-size: 24px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.add-fab:active { background: var(--accent-press); transform: scale(0.94); }
.soldout-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(18, 18, 18, 0.65); }
.soldout-pill { padding: 5px 14px; border-radius: var(--radius-pill); background: rgba(216, 216, 216, 0.28); color: var(--text-hi); font-size: 13px; }
.drink-img.food-img { border-radius: 5px; }
.drink-name { margin-top: 12px; font-size: 16px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drink-sub { margin-top: 2px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.food-img + .drink-name + .drink-sub { margin-top: 4px; }
.drink-price { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--text); }

/* Menu, nomu-app style: broad-category cards (image over name) above the grid */
.cat-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 24px; padding: 0 16px; }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip[hidden] { display: none; }
.cat-card { flex: none; width: calc(min(100vw, var(--maxw)) / 2.25); height: 126px; padding: 0; border: none; border-radius: 8px; overflow: hidden; background: var(--surface-2); color: var(--text); text-align: center; font: inherit; }
.cat-img { height: 90px; background: var(--surface); }
.cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-name { display: block; margin-top: 8px; padding: 0 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-grid[hidden], .filter-btn[hidden], .loading[hidden], .empty[hidden], .type-chips[hidden], .qty-badge[hidden] { display: none; }
.drink-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.drink-row .drink-price { margin-top: 0; }
.temp-tag { flex: none; padding: 1px 11px; border: 1px solid; border-radius: 24px; font-size: 12px; font-weight: 400; }
.temp-tag.hot { color: #ff8a65; }
.temp-tag.cold { color: #64b5f6; }

/* "Choose from Categories": drink-type chips (nomu-app CategorySelector) */
.type-block { margin-bottom: 24px; }
.type-block[hidden] { display: none; }
.type-title { margin: 0 0 12px; font-size: 18px; font-weight: 500; color: var(--muted); }
/* Section titles (NomuText.lg, secondary colour) */
.sec-title { margin: 0 0 12px; font-size: 20px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.type-chips::-webkit-scrollbar { display: none; }
.type-chip { flex: none; height: 40px; padding: 0 18px; border: none; border-radius: 4px; background: var(--accent); color: #121212; font: inherit; font-size: 14px; white-space: nowrap; }
.type-chip.cat-jump { height: 36px; padding: 0 16px; border: 2px solid transparent; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-hi); font-size: 13px; }
.type-chip.cat-jump.on { border-color: var(--accent); }

/* Home menu sections: category title over a two-column grid */
.menu-section { margin-bottom: 32px; }

/* Filter bottom sheet (nomu-app FilterOptionsBottomSheet) */
.filter-btn.applied { color: var(--accent); }
.sheet-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: var(--maxw); height: 80vh; display: flex; flex-direction: column; background: var(--bg); border-radius: 30px 30px 0 0; }
.sheet-handle { flex: none; width: 44px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--line); }
.sheet-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; padding: 24px; }
.sheet-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-hi); }
.sheet-foot { flex: none; padding: 4px 16px calc(24px + env(safe-area-inset-bottom)); }
.filter-list { flex: 1; overflow-y: auto; padding: 0 24px; }
.filter-title { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: var(--muted); }
.filter-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-options.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-opt { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px 0 12px; border: none; border-radius: 4px; background: var(--surface-2); color: var(--text-hi); font: inherit; font-size: 13px; text-align: left; min-width: 0; }
.filter-check { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--muted-2); border-radius: 3px; font-size: 14px; font-weight: 800; line-height: 1; color: #121212; }
.filter-opt.on .filter-check { border-color: var(--accent); background: var(--accent); }
.filter-thumb { flex: none; width: 30px; height: 30px; object-fit: cover; border-radius: 4px; }
.filter-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Basket bar ── */
.basket-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%) translateY(120%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(var(--maxw), calc(100% - 24px));
  height: var(--bar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: var(--accent); color: #121212;
  border: none; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s ease;
  z-index: 20;
}
.basket-bar.show { transform: translateX(-50%) translateY(0); }
.basket-count {
  min-width: 28px; height: 28px; padding: 0 8px;
  display: grid; place-items: center;
  background: rgba(18, 18, 18, 0.18); border-radius: var(--radius-pill);
  font-weight: 800; font-size: 14px;
}
.basket-label { font-weight: 600; }
.basket-total { margin-left: auto; font-weight: 800; font-size: 18px; }
.basket-cta { font-weight: 700; }

/* ── Checkout ── */
.co-where { margin-bottom: 16px; }
.co-where-name { font-size: 17px; font-weight: 600; color: var(--text-hi); }
.co-where-loc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.co-lines { display: flex; flex-direction: column; }
.co-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-thumb { flex: none; width: 52px; height: 52px; border-radius: var(--radius-img); overflow: hidden; background: var(--surface-2); }
.co-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-info { flex: 1; min-width: 0; }
.co-name { font-size: 15px; font-weight: 600; color: var(--text-hi); }
.co-price { font-size: 13px; color: var(--muted); margin-top: 2px; }
.stepper { flex: none; display: flex; align-items: center; gap: 6px; }
.step-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--text-hi);
  font-size: 18px; line-height: 1;
}
.step-btn:active { border-color: var(--accent); }
.step-qty { min-width: 20px; text-align: center; font-weight: 600; }
.co-linetotal { flex: none; min-width: 64px; text-align: right; font-weight: 700; color: var(--text-hi); }
.co-pay { margin-top: 20px; }
.co-card { min-height: 56px; }
.co-wallets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.co-wallets:empty { display: none; }
.apple-pay-btn { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: white; width: 100%; height: 48px; border: 0; border-radius: var(--radius-pill); cursor: pointer; }
.google-pay-btn { height: 48px; cursor: pointer; }
.co-pos-btn { margin-top: 10px; }
/* Language pill (kiosk LanguageButton): shows the language you can switch TO */
.lang-btn { flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--muted); border-radius: var(--radius-pill); background: var(--bg); color: var(--muted); font: inherit; font-size: 12px; }
.co-type-note { margin: -6px 0 14px; }
.seg { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.seg-btn { flex: 1; height: 40px; border: none; border-radius: var(--radius-pill); background: none; color: var(--muted); font: inherit; font-weight: 600; }
.seg-btn.on { background: var(--accent); color: #121212; }
.seg-btn:disabled:not(.on) { opacity: 0.4; }
.pos-number { margin-top: 10px; font-size: 28px; font-weight: 700; color: var(--text-hi); letter-spacing: 0.04em; }
.pos-steps { margin: 18px 0 0; padding-left: 22px; text-align: left; color: var(--text); font-size: 14px; line-height: 1.5; max-width: 320px; }
.pos-steps li + li { margin-top: 6px; }
.done .btn + .btn { margin-top: 10px; }

/* Camera QR scanner */
.scan-overlay { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; top: 50%; left: 50%; width: 240px; height: 240px; transform: translate(-50%, -60%); border: 3px solid var(--accent); border-radius: 16px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); }
.scan-hint { position: relative; margin: 0 0 16px; color: #fff; text-align: center; }
.scan-cancel { position: relative; width: 100%; max-width: 320px; }

.summary { margin-top: 18px; }
.sum-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 15px; }
.sum-row.muted { color: var(--muted); font-size: 13px; }
.sum-row.total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 19px; font-weight: 800; color: var(--text-hi); }

.footer {
  position: sticky; bottom: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(18,18,18,0), var(--bg) 30%);
}

/* ── Done ── */
.done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px calc(32px + env(safe-area-inset-bottom)); gap: 6px; }
.done-check { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: rgba(12, 136, 39, 0.14); margin-bottom: 10px; }
.done-title { margin: 0; font-size: 24px; color: var(--text-hi); }
.done-sub { margin: 0; color: var(--muted); }
.done-note { margin: 18px 0 24px; padding: 12px 14px; background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; font-size: 13px; color: var(--muted); }
.done .btn { max-width: 320px; }

/* ── Toast ── */
.toast {
  position: fixed;
  left: 50%; bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  background: var(--surface-2); color: var(--text-hi);
  border-radius: 12px; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-left: 3px solid var(--error); }

/* Start page, like the kiosk's top menu */
/* --tile = one tile's width; --sgap = the space above and below the tiles (26px, less on a short screen). */
.start { justify-content: flex-start; --tile: calc((min(100vw, var(--maxw)) - 44px) / 2); --sgap: 12px; --sgap: clamp(12px, calc((100dvh - 540px) * 0.3), 26px); }
.start-top { display: flex; justify-content: center; padding: 14px 16px 0; }
.start-top .lang-btn { height: 32px; padding: 0 24px; font-size: 13px; }
/* Café dropdown beside the language pill: the pill shows the name, the native select lies over it */
.start-top { gap: 10px; }
.start-cafe { position: relative; height: 32px; border: 1px solid var(--muted); background: var(--bg); font-size: 13px; max-width: 62vw; }
.start-cafe[hidden] { display: none; }
.start-cafe.unset { border-color: var(--accent, #FF6B00); color: var(--accent, #FF6B00); }
.start-cafe.nudge { animation: cafe-nudge .5s ease 2; }
@keyframes cafe-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.start-cafe-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; font: inherit; font-size: 16px; cursor: pointer; }
/* Compact, so the app-download buttons in the band show without scrolling on a phone */
.start-body { flex: 1; padding: 12px 16px 38px; display: flex; flex-direction: column; gap: var(--sgap); }
/* The top block scales with the screen height: on a taller screen the welcome line, the
   tiles and their icons grow (up to a cap), and what is still spare is shared out as
   equal gaps above the welcome line, above the tiles and above the promo text. */
.start-welcome { margin: auto 0 0; text-align: center; font-size: 18px; font-size: clamp(18px, 3dvh, 28px); font-weight: 500; color: var(--text-hi); }
/* Square tiles (as tall as one is wide) with 26px above and below. On a short screen they are only as tall as
   the height left over (436px = everything else on the page), never less than their content. */
.start-choice { display: flex; gap: 12px; flex: 0 0 auto; height: var(--tile); height: min(var(--tile), calc(100dvh - 436px - 2 * var(--sgap))); min-height: min-content; }
.start-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; gap: clamp(6px, 1.6dvh, 18px); padding: 14px 10px; padding: clamp(14px, calc((100dvh - 560px) * 0.25), 26px) 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-hi); font: inherit; font-size: 15px; font-size: clamp(15px, 2.5dvh, 22px); font-weight: 500; }
.start-btn:active { border-color: var(--accent); }
/* The kiosk's pickup icons (nomu-kiosk assets/icons/pickup_*.svg) */
.start-ico { width: auto; max-width: 82%; height: 52px; height: clamp(52px, calc((100dvh - 480px) * 0.35), calc(var(--tile) * 0.42)); object-fit: contain; }
/* Stays with the mascot, just above the band; spare height goes between the tiles and this */
.start-promo-text { margin: auto 100px 0 8px; padding-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-hi); }
/* Sits on the bottom edge of the visible screen, 8px under the screenshots; spare height goes above it */
.start-band { position: relative; flex: none; padding: 16px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--accent); }
.start-mascot { position: absolute; right: 30px; bottom: 100%; width: 52px; height: auto; display: block; }
.start-band-logo { height: 28px; display: block; filter: brightness(0); }
/* The screenshots sit flush on the bottom edge, as on the kiosk */
.start-band-row { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.start-shot { flex: none; width: 96px; height: 183px; border-radius: 8px; display: block; }
 /* App Store / Google Play buttons where the kiosk shows its QR code */
.start-stores { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; margin-left: auto; align-self: center; }
.start-stores .store-btn { gap: 8px; padding: 7px 10px; background: #121212; border-color: #121212; color: #fff; }
.start-stores .store-small { color: #bdbdbd; font-size: 10px; }
.start-stores .store-big { font-size: 14px; white-space: nowrap; }
.promo { width: 100%; max-width: 420px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); text-align: center; }
.promo-title { font-size: 16px; font-weight: 700; color: var(--text-hi); }
.promo-text { margin: 6px 0 14px; font-size: 13px; color: var(--muted); }
.promo-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.promo .store-btn { flex: 1; min-width: 140px; justify-content: center; }
.promo-ig { margin-top: 10px; width: 100%; justify-content: center; }

/* Thank-you page */
.done-number { margin: 4px 0 2px; font-size: 56px; font-weight: 800; letter-spacing: 0.04em; color: var(--text-hi); line-height: 1.1; }
.receipt-box { width: 100%; max-width: 420px; margin: 16px 0 20px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--surface); text-align: left; }
.receipt-row { display: flex; gap: 8px; }
.receipt-row .field { flex: 1; min-width: 0; margin: 0; }
.receipt-row .btn { flex: none; padding: 0 18px; }
.done .promo { margin-top: 16px; }
/* Waiting screen (nomu-app CafeOrderWaitScreen) */
.wait { padding-top: 8px; }
.wait-head { width: 100%; padding: 8px; border-radius: 8px; transition: background 0.3s; text-align: left; }
.wait-head[hidden], .wait-done[hidden], .wait-ahead[hidden], .wait-status[hidden] { display: none; }
.wait-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.wait-title { flex: 2; min-width: 0; font-size: 28px; font-weight: 500; line-height: 1.15; color: var(--text-hi); }
.wait-number { flex: 1; text-align: right; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; color: var(--accent); white-space: nowrap; }
.wait-sub { width: 65%; margin: 16px 0 0; font-size: 16px; line-height: 1.4; color: var(--text); }
.wait-place { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.wait-head.ready { background: var(--accent); }
.wait-head.ready .wait-title, .wait-head.ready .wait-number, .wait-head.ready .wait-sub, .wait-head.ready .wait-place { color: #121212; }
.wait-done { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 6px; }
.wait-done .done-title { text-align: center; }
.wait-done .btn { margin-top: 14px; }
.wait-list { width: 100%; margin-top: 32px; }
.wait-pill { display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill); background: #0085ff; color: #121212; font-size: 14px; font-weight: 600; }
.wait-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text-hi); }
.wait-item-qty { flex: none; color: var(--muted); }
.wait-ahead { width: 70%; margin: 24px auto 0; text-align: center; font-size: 16px; color: var(--text); line-height: 1.4; }
.wait-ahead b { color: var(--accent); font-weight: 700; }
.wait .wait-more { margin-top: 24px; }
.wait .receipt-box { margin-top: 16px; }

/* Checkout: payment sections, paper bag, buzzer */
.pay-title { margin: 24px 0 10px; font-size: 17px; font-weight: 700; color: var(--text-hi); }
.pay-sec { margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.pay-sec[hidden] { display: none; }
.pay-h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--text-hi); }
.pay-sec .co-wallets { margin-bottom: 0; }
.pay-sec .btn { margin-top: 12px; }
.pay-note { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.pay-logos { display: block; width: 100%; border-radius: 10px; background: #fff; }
.btn-store { background: #f5a623; color: #121212; }
/* Cup / bag radio rows (nomu-app CupOptionTile) */
.cup-sec { margin-top: 18px; }
.cup-sec .pay-h3 { margin-bottom: 10px; }
.cup-tile { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; margin-bottom: 8px; padding: 10px 16px; border: none; border-radius: 8px; background: var(--surface); color: var(--text-hi); font: inherit; text-align: left; }
.cup-radio { flex: none; display: inline-flex; color: var(--accent); }
.cup-title { flex: 1; min-width: 0; font-size: 16px; }
.cup-price { flex: none; font-size: 14px; color: var(--accent); }
.co-opt { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-hi); font-size: 15px; }
.co-opt input { width: 20px; height: 20px; accent-color: var(--accent); }
.co-opt-text { flex: 1; }
.co-opt-price { color: var(--muted); }
.co-buzzer { margin-top: 16px; }
.co-buzzer-row { display: flex; align-items: center; gap: 12px; }
.buzzer-field { flex: none; width: 84px; margin: 0; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 0.1em; }
.co-buzzer-row .fineprint { margin: 0; }

/* Menu like nomu-app's home: black app bar with the café pill (LocationInputView)
   and the fixed Featured | Drinks | Food tabs (HomeMenuTabBar) */
.home-bar { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.home-bar[hidden] { display: none; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--accent); }
.menu-logo { height: 30px; display: block; filter: brightness(0); cursor: pointer; }
.cafe-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: none; border-radius: var(--radius-pill); background: #121212; color: #fff; font: inherit; font-size: 15px; font-weight: 600; max-width: 60vw; }
.cafe-pin { color: var(--accent); display: inline-flex; }
.cafe-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cafe-chev { display: inline-flex; }
.home-body { padding: 14px 16px calc(140px + env(safe-area-inset-bottom)); }
.home[hidden] { display: none; }
.drinks-pane { padding-top: 16px; }
.menu-sticky .tabs2 { margin-bottom: 0; }
/* A pushed page (broad category, drink type, lunch set, breakfast menu): app bar with back + centred title */
.sub-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; height: 56px; margin: 0 -16px 16px; padding: 0 8px; background: var(--bg); }
.sub-title { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 500; color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-bar-spacer { flex: none; width: 40px; }
/* Floating cart button (NomuFloatingCartButton): aqua circle, black cart, count inside */
/* A pill, as the kiosk's: the price, then the cart icon with the count inside */
.cart-fab { position: fixed; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 20; height: 70px; padding: 0 14px 0 24px; border: none; border-radius: var(--radius-pill); background: #0085ff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); display: flex; align-items: center; gap: 12px; }
.cart-price { color: #000; font: inherit; font-size: 20px; font-weight: 700; line-height: 1; }
.cart-ico-wrap { position: relative; flex: none; width: 42px; height: 42px; }
.cart-fab[hidden] { display: none; }
.cart-ico { width: 42px; height: 42px; display: block; filter: brightness(0); }
.cart-count { position: absolute; top: 14px; left: 0; width: 100%; text-align: center; color: #0085ff; font-size: 16px; font-weight: 700; line-height: 1; pointer-events: none; }
.cart-fab.many .cart-count { font-size: 14px; }
.cafe-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-hi); font: inherit; text-align: left; }
.cafe-row.on { border-color: var(--accent); }
.cafe-row-name { font-size: 16px; font-weight: 600; }
.cafe-row-sub { font-size: 13px; color: var(--muted); }
.sheet-short { height: auto; max-height: 70vh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
/* Short tiles: a small icon over the label (they scroll away; the bar below sticks) */
.tiles[hidden] { display: none; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px 6px; border: none; border-bottom: 4px solid transparent; border-radius: 6px; background: var(--surface-2); color: var(--muted-2); font: inherit; font-size: 13px; }
.tile-ico { width: 30px; height: 30px; object-fit: contain; }
.tile-ico-off { opacity: 0.45; }
.tile-ico-on { display: none; }
/* Selected: the coloured icon, white label, and a coloured bar along the bottom */
.tile.active { color: var(--text-hi); }
.tile.active[data-view="featured"] { border-bottom-color: #0085ff; }
.tile.active[data-view="menu"] { border-bottom-color: var(--accent); }
.tile.active[data-view="ranking"] { border-bottom-color: #0c8827; }
.tile.active .tile-ico-off { display: none; }
.tile.active .tile-ico-on { display: block; }
.tile:disabled { opacity: 0.55; }
.tabs2 { display: flex; margin: 0 -16px 12px; border-bottom: 1px solid var(--line); }
.tabs2[hidden] { display: none; }
/* Drinks | Food tabs + category chips stay under the header while the sections scroll */
.menu-sticky { position: sticky; top: 64px; z-index: 9; margin: 0 -16px; padding: 0 16px; background: var(--bg); }
.menu-sticky .cat-chips { padding: 10px 16px; }
.menu-sticky[hidden] { display: none; }
.broad-chips { margin-bottom: 8px; }
.broad-chip { height: 36px; padding: 0 14px; font-size: 13px; }
.broad-img { margin-left: -8px; }
/* A broad category's own page */
.cat-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px -8px; padding: 6px 10px 6px 4px; border: none; border-radius: var(--radius-pill); background: none; color: var(--text-hi); font: inherit; font-size: 15px; font-weight: 600; }
.cat-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cat-page-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.cat-page-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--text-hi); }
.broad-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface); }
/* Lunch set (nomu-app LunchSetBanner / LunchSetPicker) */
.food-pane { padding-top: 24px; }
.lunch-banner { display: block; width: 80%; margin: -6px auto 24px; padding: 0; border: none; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.lunch-banner img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.lunch-note { margin: -4px 0 12px; }
.pd-lunch .pd-h3 { margin-bottom: 12px; }
.lunch-list { display: flex; flex-direction: column; gap: 6px; }
.lunch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 16px; border: none; border-radius: 8px; background: var(--surface); color: var(--text-hi); font: inherit; text-align: left; }
.lunch-row.on { background: var(--accent); color: #121212; }
.lunch-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lunch-name { font-size: 15px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lunch-fee { font-size: 13px; color: var(--muted); }
.lunch-row.on .lunch-fee { color: #3a2a1a; }
.lunch-plus { flex: none; font-size: 22px; line-height: 1; color: var(--muted-2); }
.lunch-row.on .lunch-plus { visibility: hidden; }
.co-sub { font-size: 13px; color: var(--muted); }
/* MEGA syrup shots (nomu-app MegaSyrupPanel) */
.pd-syrup .pd-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.syrup-left { font-size: 13px; color: var(--muted); }
.syrup-left b { color: var(--accent); font-weight: 700; }
.syrup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.syrup-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border: 2px solid transparent; border-radius: 12px; background: var(--surface); text-align: center; }
.syrup-tile.on { border-color: var(--accent); }
.syrup-name { font-size: 14px; font-weight: 600; color: var(--text-hi); line-height: 1.2; }
.syrup-price { font-size: 11px; color: var(--muted); }
.syrup-step { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.syrup-btn { width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text-hi); font: inherit; font-size: 18px; line-height: 1; }
.syrup-btn:disabled { opacity: 0.35; }
.syrup-n { min-width: 14px; font-size: 16px; font-weight: 700; color: var(--text-hi); }
.pd-qty[hidden] { display: none; }
.cat-chip { height: 36px; font-size: 13px; }
.type-chip2.cat-chip.on { border-color: var(--accent); }
.tab2 { flex: 1; padding: 11px 0; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted-2); font: inherit; font-size: 16px; font-weight: 600; }
.tab2.active { color: var(--text-hi); border-bottom-color: var(--text-hi); }
.type-chip2 { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 2px solid transparent; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-hi); font: inherit; font-size: 14px; white-space: nowrap; }
.type-chip2.on { border-color: #4CAF50; }
.chip-ico { display: inline-flex; }
.section-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.section-row .type-title, .section-row .sec-title { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.temp-ico { width: 18px; height: 18px; display: block; }
.temp-opt2.on .temp-ico { filter: brightness(0); }
.temp-opt2.cold.on .temp-ico { filter: brightness(0) invert(1); }
.temp-switch2 { flex: none; display: flex; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); }
.temp-opt2 { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: none; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; }
.temp-opt2.cold.on { background: #0085ff; color: #fff; }
.temp-opt2.hot.on { background: var(--accent); color: #121212; }
.temp-opt2.all { padding: 6px 14px; }
.temp-opt2.all.on { background: #fff; color: #121212; }
/* Same side margins as the drink cards; tall enough to show the whole bottle */
.featured-card { display: flex; height: 250px; margin: 0 0 16px; border-radius: 12px; overflow: hidden; background: #dedbde; color: #121212; }
.featured-card.pickable { cursor: pointer; }
.featured-card.sold-out { opacity: 0.6; }
.featured-info { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 16px; }
.featured-badge { padding: 4px 10px; border-radius: var(--radius-pill); background: #0085ff; color: #fff; font-size: 11px; font-weight: 700; }
.featured-name { margin-top: 10px; font-size: 22px; font-weight: 600; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.featured-desc { margin-top: 6px; font-size: 13px; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-price { margin-top: auto; font-size: 20px; font-weight: 700; }
/* The bottle PNGs carry ~40% empty margin, so the photo is scaled up inside its box */
.featured-img { flex: 1 1 55%; padding: 8px 0; overflow: hidden; background: #dedbde; }
.featured-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.featured-img img.bottle { transform: scale(1.45); }
.temp-tag.cold { color: #0085ff; border-color: #0085ff; }
.temp-tag.hot { color: var(--accent); border-color: var(--accent); }
.order-bar2 { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--maxw); padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); z-index: 20; }
.order-bar2[hidden] { display: none; }
.order-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border: none; border-radius: var(--radius-pill); background: #0085ff; color: #fff; font: inherit; font-size: 17px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.order-ico { display: inline-flex; }
.order-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: #121212; font-size: 13px; font-weight: 800; }

/* Featured: hero carousel (240/170), signature row, inline banners (2:1) */
.pane[hidden] { display: none; }
.menu-sections[hidden] { display: none; }
.hero { position: relative; margin: 0 -16px 16px; }
.hero-badge { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 12px; font-weight: 600; }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: none; width: 100%; scroll-snap-align: start; padding: 0; border: none; background: none; }
.hero-slide img, .inline-banner img { display: block; width: 100%; border-radius: 12px; object-fit: cover; }
/* Edge to edge, square corners — as wide as the app bar */
.hero-slide img { aspect-ratio: 240 / 170; border-radius: 0; }
.hero-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.hero-dot.on { background: var(--accent); }
.drink-row-scroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 24px; padding: 0 16px; }
.drink-row-scroll::-webkit-scrollbar { display: none; }
.row-card { flex: none; width: 46vw; max-width: 220px; }
.inline-banner { display: block; width: 100%; margin: 16px 0 0; padding: 0; border: none; background: none; }
.inline-banner img { aspect-ratio: 2 / 1; }
/* Ranking */
.rank-chips { display: flex; gap: 6px; }
.rank-chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; }
.rank-chip.on { border-color: var(--accent); background: var(--accent); color: #121212; }
.rank-list { display: flex; flex-direction: column; }
.rank-tile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--text-hi); font: inherit; text-align: left; }
.rank-no { flex: none; width: 24px; text-align: center; color: var(--muted); font-weight: 700; }
.rank-img { flex: none; width: 68px; height: 68px; border-radius: var(--radius-img); object-fit: cover; background: var(--surface-2); }
.rank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-name { font-size: 15px; font-weight: 600; }
.rank-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-price { font-size: 14px; font-weight: 700; color: var(--accent); }
.rank-rating { font-size: 13px; color: #ffc700; }
.rank-h2 { margin-top: 28px; }

/* Product page (nomu-app DrinkDetailScreen) */
.pd-body { padding: 0 0 96px; } /* clear the fixed Add to Cart bar */
.pd-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 16px 0; }
.pd-carousel::-webkit-scrollbar { display: none; }
.pd-slide { flex: none; width: 60%; aspect-ratio: 1; scroll-snap-align: center; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pd-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-info { padding: 18px 16px 8px; }
.pd-name { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: var(--text-hi); }
.pd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.pd-temp { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pd-temp.hot { color: var(--accent); }
.pd-temp.cold { color: #0085ff; }
.pd-tag { color: var(--muted); }
.pd-desc { margin: 14px 0 0; color: var(--text); font-size: 15px; line-height: 1.55; }
.pd-desc:empty { display: none; }
.pd-sec { margin-top: 32px; }
.pd-sec[hidden] { display: none; }
.pd-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pd-h3 { margin: 0 0 16px; font-size: 18px; font-weight: 500; color: var(--text-hi); }
.pd-link { font-size: 11px; color: #4ea1ff; text-decoration: none; }
.pd-ings { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.pd-ings::-webkit-scrollbar { display: none; }
.pd-ing { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 4px; background: var(--surface-2); color: var(--text-hi); font-size: 15px; }
.pd-ing img { width: 24px; height: 24px; object-fit: contain; }
.pd-allergens { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-allergen { padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 13px; }
.pd-allergen.major { border-color: #ff4646; color: #ff8a80; }
.pd-divider { margin: 28px 0 14px; border: 0; border-top: 1px solid var(--line); }
.pd-temp-ico { width: 24px; height: 24px; }
/* Quantity row (nomu-app EditQuantityPanel): label left, 180×52 box with − | n | + */
.qty-panel { display: flex; align-items: center; width: 180px; height: 52px; border-radius: 8px; background: var(--surface-2); }
.qty-btn { flex: 1; height: 100%; border: none; background: none; color: var(--muted); font: inherit; font-size: 22px; line-height: 1; }
.qty-value { flex: none; width: 60px; height: 24px; display: grid; place-items: center; border-left: 1px solid var(--muted-2); border-right: 1px solid var(--muted-2); color: var(--text-hi); font-size: 18px; font-weight: 500; }
.pd-footer { display: flex; }
.pd-qty { display: flex; align-items: center; justify-content: space-between; }
.pd-qty-label { font-size: 18px; font-weight: 500; color: var(--text-hi); }
.sheet-overlay.center { align-items: center; padding: 20px; }
.dialog { width: 100%; max-width: 420px; padding: 22px; border-radius: 16px; background: var(--surface); }
.dialog-text { margin: 12px 0 20px; color: var(--text); font-size: 14px; line-height: 1.55; }

/* Strip on the menu after "Order more…": the last order's number stays in view */
.last-order { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--text-hi); font: inherit; font-size: 14px; font-weight: 600; }
.last-order-cta { color: var(--accent); }
/* Featured: signature drinks carousel (kiosk SignatureDrinksCarousel) */
.sig { margin: 4px 0 18px; }
.sig-title { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: var(--muted); }
.sig-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20%; margin: 0 -16px; scrollbar-width: none; }
.sig-track::-webkit-scrollbar { display: none; }
.sig-track.single { justify-content: center; }
.sig-card { position: relative; flex: 0 0 60%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; scroll-snap-align: center; opacity: .6; filter: blur(1px); transition: opacity .25s, filter .25s; background: var(--surface); }
.sig-card.active, .sig-track.single .sig-card { opacity: 1; filter: none; }
.sig-card.pickable { cursor: pointer; }
.sig-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sig-temp { position: absolute; top: 10px; right: 10px; padding: 1px 10px; border: 1px solid; border-radius: 24px; font-size: 11px; background: rgba(255,255,255,.85); }
.sig-temp.hot { color: #ff5a13; }
.sig-temp.cold { color: #0085ff; }
.sig-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.sig-dot { width: 8px; height: 8px; border-radius: 6px; background: var(--muted); transition: width .3s, background .3s; }
.sig-dot.on { width: 32px; background: #fff; }
.last-orders { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.last-orders .last-order { margin-bottom: 0; }
.last-order.ready { background: var(--accent); color: #121212; }
.last-order.ready .last-order-cta { color: #121212; }