/* MANA In-Room Dining — styles
   Base tokens: "Classical" design system. Two themes via <html data-theme>: classical (default) / original. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);
  --color-neutral-200: #eae7e7;
  --color-neutral-700: #605d5d;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --danger: #b00020;
  --gutter: 20px;
  --maxw: 1120px;
}

[data-theme="classical"] {
  --a-bg: var(--color-bg); --a-card: transparent; --a-card-bd: var(--color-divider); --a-card-sh: none;
  --a-text: var(--color-text); --a-muted: var(--color-neutral-700); --a-accent: var(--color-accent);
  --a-price: var(--color-accent-700); --a-line: var(--color-divider);
  --a-head: "Cormorant Garamond", "Noto Serif Thai", serif; --a-body: "Lora", "Noto Serif Thai", serif;
  --a-hs: 1.18; --a-hw: 400; --a-tw: 600; --a-tw2: 400;
  --a-r: 4px; --a-ir: 2px; --a-pill: 4px; --a-dot: 50%;
  --a-btn-bg: transparent; --a-btn-fg: var(--color-accent-800); --a-btn-bd: var(--color-accent);
  --a-btn-hover: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --a-on-bg: color-mix(in srgb, var(--color-accent) 13%, transparent); --a-on-fg: var(--color-accent-800); --a-on-bd: var(--color-accent);
  --a-off-bd: var(--color-divider);
  --a-bar-bg: var(--color-bg); --a-bar-fg: var(--color-text); --a-bar-bd: 1px solid var(--color-accent); --a-bar-r: 4px;
  --a-bar-sh: var(--shadow-md); --a-bar-accent: var(--color-accent-700); --a-barbtn-bg: transparent; --a-barbtn-fg: var(--color-accent-800);
  --a-sheet: var(--color-bg); --a-sheet-r: 7px; --a-input: transparent;
  --a-filter: sepia(0.22) saturate(0.82) contrast(1.05); --a-pad: 5px;
  --a-mat: 4px solid var(--color-surface); --a-matol: 1px solid var(--color-divider);
  --a-ph: repeating-linear-gradient(45deg, var(--color-surface), var(--color-surface) 8px, var(--color-neutral-200) 8px, var(--color-neutral-200) 16px);
  --a-qr-bg: transparent; --a-qr-fg: var(--color-accent-800); --a-qr-bd: 1px solid var(--color-accent);
  --a-ali-bg: transparent; --a-ali-fg: var(--color-accent-800);
  --a-sel-bg: color-mix(in srgb, var(--color-accent) 7%, transparent); --a-kick: var(--color-accent-700); --a-sticky: var(--color-divider);
}

[data-theme="original"] {
  --a-bg: #f8f9fa; --a-card: #ffffff; --a-card-bd: transparent; --a-card-sh: 0 4px 12px rgba(0,0,0,0.05);
  --a-text: #1a1a1a; --a-muted: #666666; --a-accent: #d4af37; --a-price: #8a6508; --a-line: #dddddd;
  --a-head: "Sukhumvit Set", -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Segoe UI", sans-serif;
  --a-body: "Sukhumvit Set", -apple-system, BlinkMacSystemFont, "Noto Sans Thai", "Segoe UI", sans-serif;
  --a-hs: 1; --a-hw: 700; --a-tw: 700; --a-tw2: 700;
  --a-r: 12px; --a-ir: 12px; --a-pill: 21px; --a-dot: 10px;
  --a-btn-bg: #d4af37; --a-btn-fg: #000000; --a-btn-bd: #d4af37; --a-btn-hover: #e0bd4c;
  --a-on-bg: #d4af37; --a-on-fg: #000000; --a-on-bd: #d4af37; --a-off-bd: #dddddd;
  --a-bar-bg: #111111; --a-bar-fg: #ffffff; --a-bar-bd: 0; --a-bar-r: 40px; --a-bar-sh: 0 10px 25px rgba(0,0,0,0.3);
  --a-bar-accent: #d4af37; --a-barbtn-bg: #d4af37; --a-barbtn-fg: #000000;
  --a-sheet: #ffffff; --a-sheet-r: 20px; --a-input: #ffffff; --a-filter: none; --a-pad: 0px; --a-mat: 0; --a-matol: 0;
  --a-ph: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f2f2f2 10px, #f2f2f2 20px);
  --a-qr-bg: #0e3d6b; --a-qr-fg: #ffffff; --a-qr-bd: 0; --a-ali-bg: #1677ff; --a-ali-fg: #ffffff;
  --a-sel-bg: #fffaf0; --a-kick: #8a6508; --a-sticky: transparent;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--a-bg); color: var(--a-text);
  font-family: var(--a-body); font-size: 14px; line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.lock { overflow: hidden; }
body.dev { padding-top: 34px; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .6; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-bleed { max-width: var(--maxw); margin: 0 auto; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.small { font-size: 11.5px; }
.center { text-align: center; }
.grow { flex: 1; }
.it { font-style: italic; }
.kicker { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--a-kick); }
.kicker.muted { color: var(--a-muted); letter-spacing: .12em; }
.sub { font-size: 12px; color: var(--a-muted); line-height: 1.3; }
.price { color: var(--a-price); font-variant-numeric: tabular-nums; font-weight: var(--a-tw2); }
.price.big { font-size: 18px; }
.err-text { color: var(--danger); font-size: 12.5px; text-align: center; margin: 0; line-height: 1.5; }
.link { border: 0; background: transparent; padding: 2px 0; color: var(--a-price); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.rule { height: 1px; border: 0; background: var(--a-line); margin: 16px 20px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--a-pill);
  font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(15px * var(--a-hs));
  border: 1px solid var(--a-btn-bd); background: transparent; color: var(--a-text);
  transition: background .15s;
}
.btn.primary { background: var(--a-btn-bg); color: var(--a-btn-fg); }
.btn.primary:hover:not(:disabled) { background: var(--a-btn-hover); }
.btn.outline { border-color: var(--a-off-bd); }
.btn.outline:hover { background: var(--a-btn-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.block { width: 100%; }
.btn.lg { min-height: 52px; font-size: calc(16px * var(--a-hs)); }
.icon-btn { width: 40px; height: 40px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--a-text); border-radius: 50%; }
.icon-btn:hover { background: var(--a-btn-hover); }

.langs { display: flex; flex: none; border: 1px solid var(--a-off-bd); border-radius: var(--a-pill); overflow: hidden; }
.langs button { border: 0; padding: 7px 10px; font-size: 11.5px; background: transparent; color: var(--a-muted); min-height: 32px; }
.langs button.on { background: var(--a-on-bg); color: var(--a-on-fg); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--a-off-bd); border-radius: var(--a-pill); }
.stepper button { width: 34px; height: 32px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--a-text); }
.stepper span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.stepper.big { height: 48px; }
.stepper.big button { width: 44px; height: 46px; }
.stepper.big span { font-size: 15px; }

/* ---------- header ---------- */
.hdr { padding-top: calc(14px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 14px; }
.hdr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hdr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hdr-title { font-family: var(--a-head); font-weight: var(--a-hw); font-size: calc(30px * var(--a-hs)); line-height: 1.05; letter-spacing: -.01em; }
.search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border: 1px solid var(--a-off-bd); border-radius: var(--a-ir); background: var(--a-input); color: var(--a-muted); max-width: 560px; }
.search:focus-within { border-color: var(--a-accent); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--a-text); outline: none; }

/* ---------- carousels ---------- */
.carousel { position: relative; }
.picks { padding: 22px 0 2px; }
.picks-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; }
.sec-title { font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(20px * var(--a-hs)); }
.picks-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px var(--gutter) 6px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; }
.picks-row::-webkit-scrollbar, .cats::-webkit-scrollbar { display: none; }
.pick { scroll-snap-align: start; flex: none; width: 150px; text-align: left; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; gap: 6px; color: inherit; }
.pick-title { font-size: 13px; line-height: 1.3; font-weight: var(--a-tw2); }
.arrow { position: absolute; z-index: 2; border: 0; padding: 0; display: flex; align-items: center; color: var(--a-btn-fg); }
.arrow.round { top: 40px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--a-btn-bd); background: var(--a-sheet); justify-content: center; box-shadow: var(--shadow-sm); }
.arrow.round.left { left: 8px; } .arrow.round.right { right: 8px; }
.arrow.fade { top: 0; bottom: 0; width: 58px; background: transparent; }
.arrow.fade.left { left: 0; padding-left: 10px; justify-content: flex-start; background: linear-gradient(to right, var(--a-bg) 55%, transparent); }
.arrow.fade.right { right: 0; padding-right: 10px; justify-content: flex-end; background: linear-gradient(to left, var(--a-bg) 55%, transparent); }
.arrow.fade span { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--a-btn-bd); background: var(--a-sheet); display: flex; align-items: center; justify-content: center; box-shadow: var(--a-card-sh); }

.cats-bar { position: sticky; top: 0; z-index: 5; background: var(--a-bg); padding: 10px 0 8px; margin-top: 8px; border-bottom: 1px solid var(--a-sticky); }
body.dev .cats-bar { top: 34px; }
.cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.cats button { flex: none; height: 40px; padding: 0 16px; border-radius: var(--a-pill); border: 1px solid var(--a-off-bd); background: transparent; color: var(--a-muted); font-size: 13.5px; white-space: nowrap; }
.cats button:hover { border-color: var(--a-accent); }
.cats button.on { background: var(--a-on-bg); color: var(--a-on-fg); border-color: var(--a-on-bd); }

/* ---------- images ---------- */
.media { position: relative; display: block; overflow: hidden; line-height: 0; container-type: size; background: var(--color-surface); }
.media img { width: 100%; height: 100%; object-fit: cover; filter: var(--a-filter); }
/* Sideways source photos: swap box dimensions then rotate so the photo still covers the frame */
.media img.rot { position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqw; max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
.ph { display: flex; align-items: center; justify-content: center; background: var(--a-ph); font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--a-muted); }
.pick-img { width: 150px; height: 112px; border-radius: var(--a-ir); border: var(--a-mat); outline: var(--a-matol); }
.card-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 2px; }
.row-img { width: 92px; height: 92px; border-radius: var(--a-ir); border: var(--a-mat); outline: var(--a-matol); }
.hero-img { width: 100%; aspect-ratio: 16 / 9; max-height: 300px; border-radius: var(--a-ir); border: var(--a-mat); outline: var(--a-matol); }
.dish-img { width: 100%; height: 240px; border-radius: calc(var(--a-sheet-r) - 4px) calc(var(--a-sheet-r) - 4px) 2px 2px; }

/* ---------- items ---------- */
.items { padding-top: 16px; padding-bottom: 130px; }
.state { padding: 48px 0; text-align: center; color: var(--a-muted); margin: 0; }
.state.err { color: var(--danger); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.card { text-align: left; padding: 0; border: 1px solid var(--a-card-bd); background: var(--a-card); border-radius: var(--a-r); box-shadow: var(--a-card-sh); overflow: hidden; display: flex; flex-direction: column; color: inherit; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--a-accent); }
.card:active { transform: scale(.99); }
.card-media { position: relative; display: block; padding: var(--a-pad) var(--a-pad) 0; }
.card-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-title { font-size: 13.5px; line-height: 1.3; font-weight: var(--a-tw2); }
.card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.add { min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--a-dot); border: 1px solid var(--a-btn-bd); background: transparent; color: var(--a-btn-fg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.add.on { background: var(--a-on-bg); color: var(--a-on-fg); }
.add.float { position: absolute; right: -4px; bottom: -6px; background: var(--a-sheet); }
.add.float.on { background: var(--a-btn-bg); }
.dev-badge { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--a-pill); background: var(--a-sheet); border: 1px solid var(--a-btn-bd); color: var(--a-btn-fg); font-size: 10.5px; line-height: 1.3; }

.list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
.row { display: flex; gap: 14px; align-items: stretch; padding: 14px 0; border: 0; border-bottom: 1px solid var(--a-line); background: transparent; text-align: left; color: inherit; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-text .kicker { font-size: 9.5px; letter-spacing: .12em; }
.row-text .price { margin-top: auto; padding-top: 6px; font-size: 14px; }
.row-title { font-size: 14.5px; line-height: 1.3; font-weight: var(--a-tw2); }
.row-media { position: relative; flex: none; width: 92px; height: 92px; }
.row:hover .row-title { color: var(--a-price); }

.ed-group { padding: 24px 0 4px; max-width: 760px; margin: 0 auto; }
.ed-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--a-accent); padding-bottom: 6px; }
.ed-num { font-family: var(--a-head); font-size: calc(14px * var(--a-hs)); color: var(--a-price); font-variant-numeric: tabular-nums; }
.ed-name { font-family: var(--a-head); font-weight: var(--a-hw); font-size: calc(24px * var(--a-hs)); line-height: 1.1; }
.ed-count { margin-left: auto; font-size: 11px; color: var(--a-muted); }
.ed-hero, .ed-row { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--a-line); background: transparent; text-align: left; color: inherit; position: relative; }
.ed-hero { padding: 14px 0 12px; gap: 8px; }
.hero-title { font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(17px * var(--a-hs)); line-height: 1.2; }
.leader { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; line-height: 1.3; }
.dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--a-muted); transform: translateY(-4px); }

/* ---------- cart bar ---------- */
.cartbar {
  position: fixed; z-index: 20; left: 16px; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 9px 9px 20px;
  background: var(--a-bar-bg); color: var(--a-bar-fg); border: var(--a-bar-bd); border-radius: var(--a-bar-r); box-shadow: var(--a-bar-sh);
  animation: fade .2s;
}
.bar-text { display: flex; flex-direction: column; line-height: 1.25; }
.bar-count { font-size: 12px; opacity: .75; }
.bar-total { font-size: 17px; color: var(--a-bar-accent); font-weight: var(--a-tw2); }
.bar-go { height: 46px; padding: 0 20px; border-radius: var(--a-pill); border: 1px solid var(--a-btn-bd); background: var(--a-barbtn-bg); color: var(--a-barbtn-fg); font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(15px * var(--a-hs)); }
.bar-go:hover { background: var(--a-btn-hover); }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.overlay.center { align-items: center; padding: 20px; z-index: 70; }
.backdrop { position: absolute; inset: 0; background: rgba(20, 18, 16, .45); animation: fade .2s; }
.backdrop.dark { background: rgba(20, 18, 16, .82); }
.sheet { position: relative; width: 100%; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; background: var(--a-sheet); border-radius: var(--a-sheet-r) var(--a-sheet-r) 0 0; animation: up .3s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.sheet-foot { display: flex; gap: 12px; align-items: center; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--a-line); }
.dish-media { position: relative; padding: var(--a-pad) var(--a-pad) 0; }
.dish-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--a-line); background: var(--a-sheet); }
.dish-info { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.dish-info .sub { font-size: 13px; }
.dish-info .price { margin-top: 4px; }
.dish-title { font-family: var(--a-head); font-weight: var(--a-hw); font-size: calc(26px * var(--a-hs)); line-height: 1.12; }
.dish-notes { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 34px; padding: 0 12px; border-radius: var(--a-pill); border: 1px solid var(--a-off-bd); background: transparent; font-size: 12.5px; }
.chip.on { background: var(--a-on-bg); color: var(--a-on-fg); border-color: var(--a-on-bd); }
textarea { resize: none; padding: 10px 12px; border: 1px solid var(--a-off-bd); border-radius: var(--a-ir); background: var(--a-input); font-size: 16px; outline: none; }
textarea:focus { border-color: var(--a-accent); }

.dialog { position: relative; width: 100%; max-width: 320px; background: var(--a-sheet); border: 1px solid var(--a-off-bd); border-radius: var(--a-r); box-shadow: var(--shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; animation: fade .2s; }
.dialog-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dialog-head.row-between { flex-direction: row; justify-content: space-between; }
.dialog-title { font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(19px * var(--a-hs)); }
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions .btn { min-height: 44px; font-size: calc(14px * var(--a-hs)); }
.crop-frame { align-self: center; width: 256px; height: 256px; border: 1px solid var(--a-accent); border-radius: var(--a-ir); overflow: hidden; background: #141312; }
.crop-frame canvas { display: block; width: 256px; height: 256px; touch-action: none; cursor: grab; }
#crop-zoom { accent-color: var(--a-accent); }

.field { display: flex; flex-direction: column; gap: 2px; }
.lbl { font-size: 11px; color: var(--a-muted); }
.field input { border: 0; border-bottom: 1px solid var(--a-line); background: transparent; padding: 4px 0 6px; font-size: 16px; outline: none; width: 100%; }
.field input:focus { border-bottom-color: var(--a-accent); }
.field.boxed input { height: 42px; padding: 0 10px; border: 1px solid var(--a-off-bd); border-radius: var(--a-ir); background: var(--a-input); }
.field.boxed input:focus { border-color: var(--a-accent); }

/* ---------- checkout / receipt ---------- */
.screen { max-width: 600px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; animation: fade .2s; }
.sub-hdr { position: sticky; top: 0; z-index: 5; background: var(--a-bg); display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 10px 8px; border-bottom: 1px solid var(--a-line); }
body.dev .sub-hdr { top: 34px; }
.sub-title { flex: 1; font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(20px * var(--a-hs)); }
.co-body { flex: 1; padding: 18px var(--gutter) 24px; display: flex; flex-direction: column; gap: 24px; }
.co-body section { display: flex; flex-direction: column; gap: 10px; }
.panel { border: 1px solid var(--a-off-bd); background: var(--a-card); border-radius: var(--a-r); box-shadow: var(--a-card-sh); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.panel.center { align-items: center; text-align: center; }
.panel p { margin: 0; line-height: 1.55; font-size: 13px; }
.room-row { display: flex; align-items: flex-end; gap: 10px; }
.room-input { font-family: var(--a-head) !important; font-weight: var(--a-tw); font-size: calc(21px * var(--a-hs)) !important; }
.from-qr { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--a-price); flex: none; padding-bottom: 8px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--a-accent); }
.co-body section .sec-head { margin-bottom: -10px; }
.line { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--a-line); }
.line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.line-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(17px * var(--a-hs)); }
.total-row .price { font-size: calc(21px * var(--a-hs)); font-weight: var(--a-tw); }
.pay-opts { display: flex; flex-direction: column; gap: 8px; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--a-off-bd); border-radius: var(--a-r); background: transparent; text-align: left; }
.pay-opt.on { border-color: var(--a-accent); background: var(--a-sel-bg); }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--a-off-bd); display: flex; align-items: center; justify-content: center; flex: none; }
.radio span { width: 8px; height: 8px; border-radius: 50%; }
.pay-opt.on .radio { border-color: var(--a-accent); }
.pay-opt.on .radio span { background: var(--a-accent); }
.pay-text { display: flex; flex-direction: column; }
.pay-label { font-size: 14px; font-weight: var(--a-tw2); }
.qr-band { align-self: stretch; padding: 8px; border-radius: 8px; background: var(--a-qr-bg); color: var(--a-qr-fg); border: var(--a-qr-bd); font-size: 12px; letter-spacing: .06em; font-weight: var(--a-tw2); }
.qr-band.ali { background: var(--a-ali-bg); color: var(--a-ali-fg); }
.qr-slot { width: 212px; height: 212px; padding: 8px; background: #fff; }
.qr-slot img, .qr-slot canvas { width: 196px !important; height: 196px !important; }
.btn.outline.block { min-height: 44px; font-family: var(--a-body); font-weight: 400; font-size: 13px; border-color: var(--a-btn-bd); }
.slip { display: flex; flex-direction: column; gap: 8px; }
.slip-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tag { padding: 1px 8px; border-radius: 10px; border: 1px solid var(--a-btn-bd); background: var(--a-on-bg); color: var(--a-on-fg); font-size: 11px; }
.slip-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; border: 1px dashed var(--a-muted); border-radius: var(--a-r); color: var(--a-muted); font-size: 12.5px; cursor: pointer; padding: 10px; }
.slip-drop:hover { border-color: var(--a-accent); }
.slip-drop:focus-within { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.slip-drop.has { flex-direction: row; justify-content: flex-start; gap: 12px; border: 1px solid var(--a-accent); background: var(--a-sel-bg); color: var(--a-text); }
.slip-thumb { width: 48px; height: 64px; object-fit: cover; border-radius: 2px; }
.slip-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.slip-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok { color: var(--a-price); }
.co-foot { position: sticky; bottom: 0; padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--a-line); background: var(--a-bg); display: flex; flex-direction: column; gap: 8px; }

#receipt { padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 32px; gap: 20px; }
.rc-top { display: flex; justify-content: flex-end; }
.rc-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.rc-check { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--a-accent); color: var(--a-price); display: flex; align-items: center; justify-content: center; }
.rc-check svg { width: 26px; height: 26px; }
.rc-title { font-family: var(--a-head); font-weight: var(--a-hw); font-size: calc(28px * var(--a-hs)); line-height: 1.1; }
.rc-hero strong { color: var(--a-text); font-weight: inherit; }
.steps { list-style: none; margin: 0; padding: 16px 16px 2px; gap: 0; }
.steps li { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: start; padding-bottom: 14px; position: relative; color: var(--a-muted); font-size: 14px; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 19px; bottom: 0; width: 1px; background: var(--a-off-bd); }
.steps .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--a-off-bd); margin-top: 3px; }
.steps li.done { color: var(--a-text); }
.steps li.done .dot { border-color: var(--a-accent); background: var(--a-accent); }
.slip-receipt { font-size: 13px; line-height: 1.6; gap: 0; }
.rc-brand { text-align: center; border-bottom: 1px dashed var(--a-muted); padding-bottom: 10px; margin-bottom: 10px; }
.rc-brand-name { font-family: var(--a-head); font-weight: var(--a-tw); font-size: calc(16px * var(--a-hs)); letter-spacing: 1px; }
.kv { display: flex; justify-content: space-between; gap: 10px; }
.kv > span:last-child { text-align: right; }
.kv.strong { font-size: 16px; font-weight: var(--a-tw2); }
.rc-items { border-top: 1px dashed var(--a-muted); border-bottom: 1px dashed var(--a-muted); padding: 8px 0; margin: 8px 0; }
.slip-receipt .sub { margin-top: 10px; }
.rc-actions { display: flex; gap: 10px; }
.rc-actions .btn { font-size: calc(14px * var(--a-hs)); }

/* ---------- dev bar & toast ---------- */
.devbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; background: color-mix(in srgb, var(--a-bg) 85%, var(--a-accent)); border-bottom: 1px solid var(--a-accent); color: var(--a-on-fg); font-size: 11.5px; }
.dev-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-accent); flex: none; }
.dev-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-btn { border: 1px solid var(--a-accent); background: var(--a-sheet); color: var(--a-on-fg); border-radius: var(--a-ir); padding: 3px 9px; font-size: 11px; }
.devbar .link { font-size: 11px; color: var(--a-muted); align-self: center; }
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; padding: 9px 16px; border-radius: var(--a-pill); background: var(--a-text); color: var(--a-bg); font-size: 13px; animation: fade .2s; max-width: calc(100vw - 32px); text-align: center; }

@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
  .pick { width: 180px; }
  .pick-img { width: 180px; height: 135px; }
  .overlay:not(.center) { align-items: center; padding: 24px; }
  .sheet { max-width: 520px; max-height: 88vh; border-radius: var(--a-sheet-r); animation: fade .2s; box-shadow: var(--shadow-lg); }
  .dish-img { height: 300px; }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdr-title { font-size: calc(36px * var(--a-hs)); }
}
@media (min-width: 1200px) {
  .wrap-bleed { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .devbar, .cartbar, .rc-actions, .langs, .toast { display: none !important; }
}