/* ============================================================
   Shi Wei Tian — design tokens
   Palette:
     --lacquer   #A32B2B  (deep lacquer red — primary)
     --lacquer-d #7A1F1F  (darker red, hover/pressed)
     --ink       #22201D  (warm near-black, text)
     --paper     #F5EFE3  (warm rice-paper background)
     --paper-2   #EDE3CF  (slightly deeper paper, cards)
     --gold      #B8892E  (brass/gold accent, dividers, prices)
     --jade      #4B6B57  (jade green, veg tags, success)
   Type:
     Display: "Noto Serif TC" (has real weight for CJK-adjacent character, used sparingly)
     Body:    "Inter"
     Numerals/utility: "IBM Plex Mono" (dish numbers, prices — reference/ticket feel)
   Signature: dish numbers rendered as a small red seal/chop badge,
   because on this menu the numbers are the real way dishes are
   ordered and spoken about — not decoration.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --lacquer:#A32B2B;
  --lacquer-d:#7A1F1F;
  --ink:#22201D;
  --paper:#F5EFE3;
  --paper-2:#EDE3CF;
  --gold:#B8892E;
  --jade:#4B6B57;
  --line: rgba(34,32,29,0.12);
  --shadow: 0 8px 24px rgba(34,32,29,0.14);
  --radius: 2px;
  --maxw: 960px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

a{color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center;
  flex-wrap:wrap; gap:14px;
  padding:14px 20px;
}
.topbar-buttons{display:flex; align-items:center; gap:14px;}
.brand{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none;
}
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  background:var(--lacquer); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif TC',serif; font-weight:900; font-size:17px;
  flex:none;
}
.brand-name{
  font-family:'Noto Serif TC',serif; font-weight:700;
  font-size:17px; letter-spacing:0.01em; color:var(--ink);
}
.brand-sub{font-size:11px; color:var(--lacquer); text-transform:uppercase; letter-spacing:0.14em;}

/* Desktop: language switch + login/reserve/cart cluster together on the
   right of the brand, in a single row — achieved by pushing the language
   switch (and everything after it in source order) rightward with an
   auto left-margin, rather than justify-content:space-between (which
   would spread brand / lang / buttons apart instead of grouping the
   latter two together, the way this design has always looked). */
.lang-switch{display:flex; gap:6px; align-items:center; margin-left:auto;}
.lang-switch a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  padding:5px 9px; border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); background:transparent;
}
.lang-switch a.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.cart-btn{
  position:relative;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:var(--radius);
  padding:9px 14px; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:8px;
}
.cart-count{
  background:var(--lacquer); color:var(--paper);
  border-radius:50%; min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}

/* ==== Mobile topbar (<=600px) — CSS Grid, deterministic two-row layout ====
   This used to be a flex-wrap row where row 1 (brand + lang-switch +
   account button) stayed on one line only because their combined width
   happened to fit under the viewport width. That's fragile by
   construction: any small tweak to padding/font-size/copy nudges the
   total past the container width and flex-wrap silently drops the
   overflowing item onto a 3rd line — which is exactly the repeated
   regression this is replacing.
   Grid removes that guesswork: each element is assigned to an explicit
   cell, so row 1 can structurally never receive a 4th item and row 2
   can never merge into row 1. The 4th column (1fr) is a flexible
   spacer — per the grid sizing algorithm, an item that spans a flexible
   track (row 2's full-width .topbar-buttons) draws its extra space from
   that flexible track first, not from the fixed-content columns 1–3, so
   row 2 being wide never pushes row 1's columns around.
   .brand-name/.brand-sub get white-space:nowrap so the restaurant name
   and red subtitle can never break onto a second line internally — the
   one thing that must never happen regardless of available width. That
   trades away one failure mode (mid-word wrap) for another (the row
   could in principle overflow its container if it never fits), so the
   sizes below are kept deliberately small — verified in Chrome/Blink to
   leave >50px of slack at 360px, up from the ~26px an earlier pass had.
   #account-btn's label is also given overflow:hidden + ellipsis as a
   last-resort fallback: if some engine renders wider than tested here,
   the login button's text truncates instead of the row breaking.
   Note: this file's automated check only runs in headless Chrome
   (Blink). Safari/Brave-iOS use WebKit, which can render the same CSS
   with different glyph metrics — not independently verified here; the
   large margin below is the mitigation for that gap, not a substitute
   for real-device testing. */
@media (max-width:600px){
  .topbar-inner{
    display:grid;
    grid-template-columns:auto auto minmax(0,auto) 1fr;
    align-items:center;
    column-gap:5px; row-gap:6px;
    padding:10px 14px;
  }
  .brand{grid-column:1; grid-row:1; gap:5px; min-width:0;}
  .brand-mark{width:22px; height:22px; font-size:11px;}
  .brand-name{font-size:13px; white-space:nowrap;}
  .brand-sub{font-size:9.5px; letter-spacing:0.07em; white-space:nowrap;}
  .lang-switch{grid-column:2; grid-row:1; margin-left:0; gap:3px;}
  .lang-switch a{padding:3px 5px; font-size:10px;}
  #account-btn{
    grid-column:3; grid-row:1;
    font-family:'Inter',sans-serif; font-size:10px; font-weight:600;
    padding:4px 7px;
    min-width:0;
  }
  #account-btn span{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    min-width:0;
  }
  .topbar-buttons{
    grid-column:1/-1; grid-row:2;
    justify-self:end;
    gap:8px;
  }
  .cart-btn{padding:6px 10px; font-size:11.5px; gap:6px;}
}

/* ---------- top banner ---------- */
.top-banner{line-height:0;}
.top-banner img{
  /* height:auto (not a fixed clamp() + object-fit:cover) so the banner
     always follows the source photo's own aspect ratio at every viewport
     width. A fixed-height box with cover crops whichever dimension the
     source photo is relatively larger on — cropping top/bottom was fine,
     but this sign has full-width text at both edges, and a wide replacement
     photo (this one is ~14:1, the previous one was ~8.5:1) made a
     fixed-height box start cropping the sides instead, cutting into
     "ČÍNSKÁ" / "RESTAURANT". Auto height has no crop direction to get
     wrong regardless of what aspect ratio a future replacement photo has. */
  display:block; width:100%; height:auto;
}

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:56px 20px 40px;
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end;
}
@media (max-width:760px){ .hero{grid-template-columns:1fr; padding-top:34px; gap:20px;} }

.hero-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.16em;
  color:var(--lacquer); text-transform:uppercase; margin-bottom:14px;
}
.hero h1{
  font-family:'Noto Serif TC',serif; font-weight:900;
  font-size:clamp(32px,5.4vw,54px); line-height:1.04; margin:0 0 18px;
  color:var(--ink);
}
.hero p{font-size:15px; color:rgba(34,32,29,0.75); max-width:46ch; margin:0;}

.hero-panel{
  background:var(--paper-2); border:1px solid var(--line);
  padding:20px 22px; border-radius:var(--radius);
}
.hero-panel .status{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; margin-bottom:12px;
}
.status-dot{width:8px; height:8px; border-radius:50%; background:var(--jade); flex:none;}
.status-dot.closed{background:var(--lacquer);}
.hero-panel dl{margin:0; font-size:13.5px;}
.hero-panel dt{color:rgba(34,32,29,0.55); margin-top:10px;}
.hero-panel dd{margin:2px 0 0; font-weight:500;}
.hero-panel dd a{text-decoration:none; border-bottom:1px solid var(--line);}

/* ---------- category nav ---------- */
.catnav{
  position:sticky; top:var(--topbar-h, 61px); z-index:30;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.catnav-inner{
  max-width:var(--maxw); margin:0 auto; padding:10px 44px;
  display:grid; grid-template-rows:repeat(2,auto); grid-auto-flow:column; gap:6px;
  overflow-x:auto; white-space:nowrap;
  -ms-overflow-style:none; scrollbar-width:none;
}
.catnav-inner::-webkit-scrollbar{display:none;}
.catnav a{
  text-decoration:none; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:999px; color:rgba(34,32,29,0.7);
  border:1px solid transparent; text-align:center;
}
.catnav a:hover{border-color:var(--line);}
.catnav a.current{background:var(--lacquer); color:var(--paper);}

.catnav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--jade); color:var(--paper); font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(34,32,29,0.18); z-index:5; padding:0;
  transition:opacity .15s ease;
}
.catnav-arrow-left{left:6px;}
.catnav-arrow-right{right:6px;}
.catnav-arrow.hidden{opacity:0; pointer-events:none;}

/* ---------- menu ---------- */
.menu{max-width:var(--maxw); margin:0 auto; padding:36px 20px 100px;}
.category{margin-bottom:44px; scroll-margin-top:var(--sticky-offset, 112px);}
.category-head{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:6px;
}
.category-head h2{
  font-family:'Noto Serif TC',serif; font-weight:700; font-size:22px; margin:0;
}
.category-head .count{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(34,32,29,0.45);
}

.item{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:14px;
  align-items:center; padding:14px 0; border-bottom:1px solid var(--line);
  cursor:pointer;
}
@media (max-width:600px){
  .item{grid-template-columns:auto 1fr; grid-template-areas:"seal name" ". price" ". add"; row-gap:8px;}
  .item .price{grid-area:price; justify-self:start;}
  .item .add, .item .qty-inline{grid-area:add; justify-self:start;}
}
.seal{
  width:36px; height:36px; border-radius:6px;
  border:1.5px solid var(--lacquer); color:var(--lacquer);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
  flex:none;
}
.thumb{
  width:52px; height:52px; border-radius:6px; flex:none;
  object-fit:cover; border:1px solid var(--line); background:var(--paper-2);
}
.item.has-photo{grid-template-columns:auto auto 1fr auto auto;}
@media (max-width:600px){
  .item.has-photo{grid-template-columns:auto auto 1fr; grid-template-areas:"thumb seal name" ". . price" ". . add";}
}
.item-name{font-size:15px; font-weight:500;}
.item .price{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; color:var(--gold);
  white-space:nowrap;
}
.add{
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.add:hover{background:var(--ink); color:var(--paper);}
.add.in-cart{background:var(--jade); border-color:var(--jade); color:var(--paper); font-size:13px; width:auto; padding:0 10px; border-radius:16px; font-family:'IBM Plex Mono',monospace;}
.add[data-open-modal]{
  width:auto;
  height:auto;
  border-radius:20px;
  padding:8px 16px;
  font-size:13px;
  white-space:nowrap;
}

.qty-inline{display:flex; align-items:center;}
.qty-inline-stepper{
  display:flex; align-items:center; gap:8px;
  background:var(--jade); border-radius:19px; padding:2px 6px;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; color:var(--paper);
}
.qty-inline-stepper button{
  width:26px; height:26px; border-radius:50%; border:none; background:rgba(255,255,255,0.18);
  color:var(--paper); cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.qty-inline-stepper button:hover{background:rgba(255,255,255,0.32);}
.qty-inline-stepper .qty-inline-value{min-width:14px; text-align:center;}

/* ---------- cart drawer ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(34,32,29,0.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:50;
}
.overlay.open{opacity:1; pointer-events:auto;}

.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%);
  background:var(--paper); z-index:60; box-shadow:var(--shadow);
  transform:translateX(100%); transition:transform .28s ease;
  overflow-y:auto;
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:2; background:var(--paper);
}
.drawer-head h3{font-family:'Noto Serif TC',serif; margin:0; font-size:19px;}
.drawer-close{background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink);}
.drawer-body{padding:14px 20px;}
.drawer-foot{border-top:1px solid var(--line); padding:16px 20px 22px;}

/* ---------- order receipt ---------- */
.receipt{font-size:13.5px;}
.receipt-store{font-family:'Noto Serif TC',serif; font-weight:700; font-size:16px; text-align:center;}
.receipt-status{color:var(--lacquer); font-weight:600; text-align:center; margin:4px 0 14px;}
.receipt-section{padding:10px 0; border-top:1px dashed var(--line);}
.receipt-row{display:flex; justify-content:space-between; gap:12px; padding:2px 0; line-height:1.5;}
.receipt-row .mono{font-family:'IBM Plex Mono',monospace;}
.receipt-item-code{opacity:0.55;}
.receipt-total{font-weight:700; font-size:16px; margin-top:6px; padding-top:6px; border-top:1px solid var(--line);}
.receipt-footer{
  padding:14px 0 4px; border-top:1px dashed var(--line);
  text-align:center; font-size:12px; color:rgba(34,32,29,0.65); line-height:1.6;
}
.receipt-qr{display:flex; justify-content:center; margin-top:10px;}
.receipt-actions{display:flex; gap:10px; padding:16px 20px 22px; border-top:1px solid var(--line);}
.receipt-actions .btn-primary, .receipt-actions .btn-secondary{margin-top:0; width:auto; flex:1;}

.cart-row{display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line);}
.cart-row .name{flex:1; font-size:13.5px;}
.cart-row .qty-ctrl{display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.cart-row .qty-ctrl button{width:30px; height:30px; border:1px solid var(--line); background:none; border-radius:4px; cursor:pointer;}
.cart-row .linetotal{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; width:64px; text-align:right;}
.cart-empty{color:rgba(34,32,29,0.5); font-size:14px; padding:30px 0; text-align:center;}

.table-summary-box{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:16px;}
.table-summary-head{font-family:'Noto Serif TC',serif; font-size:14.5px; font-weight:700; margin-bottom:2px;}
.table-summary-row{display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--line);}
.table-summary-row .mono{font-family:'IBM Plex Mono',monospace;}
.table-summary-total{display:flex; justify-content:space-between; font-weight:700; font-size:13.5px; margin-top:8px; font-family:'IBM Plex Mono',monospace;}

.subtotal-row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px;}
.subtotal-row.total{font-weight:700; font-size:17px; font-family:'IBM Plex Mono',monospace; margin-top:8px; padding-top:8px; border-top:1px solid var(--line);}

.btn-primary{
  width:100%; background:var(--lacquer); color:var(--paper); border:none;
  padding:13px; border-radius:var(--radius); font-weight:600; font-size:14.5px;
  cursor:pointer; margin-top:12px;
}
.btn-primary:hover{background:var(--lacquer-d);}
.btn-primary:disabled{background:rgba(34,32,29,0.25); cursor:not-allowed;}
.btn-secondary{
  width:100%; background:transparent; color:var(--ink); border:1px solid var(--line);
  padding:11px; border-radius:var(--radius); font-weight:600; font-size:13.5px; cursor:pointer;
}

/* ---------- checkout form ---------- */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:rgba(34,32,29,0.7);}
.field input, .field textarea, .field select{
  width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
}
.field textarea{resize:vertical; min-height:56px;}
.toggle-group{display:flex; gap:8px; margin-bottom:16px;}
.toggle-group button{
  flex:1; padding:10px; border:1px solid var(--line); background:#fff; border-radius:var(--radius);
  cursor:pointer; font-weight:600; font-size:13.5px;
}
.toggle-group button.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.toggle-group button:disabled{opacity:0.4; cursor:not-allowed;}
.toggle-group.tip-group button{
  padding:8px 4px; font-size:12px; line-height:1.25;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:58px;
}
/* 5 tip-tier buttons (Bez tipu / 3% / 5% / 8% / Zaokr.) fit one row at
   390px; below that, wrap to two rows instead of squeezing/deforming. */
@media (max-width:375px){
  .toggle-group.tip-group{flex-wrap:wrap;}
  .toggle-group.tip-group button{flex:1 1 30%;}
}
.fee-note{font-size:12.5px; color:rgba(34,32,29,0.6); margin:-6px 0 14px; line-height:1.5;}
.fee-note.warn{color:var(--lacquer); font-weight:600;}
.hidden{display:none !important;}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:var(--radius);
  font-size:13.5px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:80;
  max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- item modifier modal (variants / add-ons) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(34,32,29,0.5);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:70;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
@media (min-width:640px){ .modal-overlay{align-items:center;} }
.modal{
  background:var(--paper); width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  border-radius:var(--radius) var(--radius) 0 0; box-shadow:var(--shadow);
  transform:translateY(24px); transition:transform .22s ease;
}
.modal-overlay.open .modal{transform:translateY(0);}
@media (min-width:640px){ .modal{border-radius:6px;} }
.modal-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:20px 20px 6px;
}
.modal-photo{width:100%; max-height:180px; object-fit:cover; border-radius:6px; display:block; margin:0 0 4px;}
.modal-head h3{font-family:'Noto Serif TC',serif; font-size:19px; margin:0;}
.modal-close{background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); line-height:1;}
.modal-body{padding:4px 20px 20px;}
.modal-group{margin-top:16px;}
.modal-group-label{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:rgba(34,32,29,0.6); margin-bottom:8px;}
.opt-row{
  display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line);
  font-size:14px; cursor:pointer;
}
.opt-row input{accent-color:var(--lacquer); width:16px; height:16px; flex:none;}
.opt-row .opt-label{flex:1;}
.opt-row .opt-extra{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--gold);}
.modal-foot{display:flex; align-items:center; gap:12px; padding:14px 20px 22px; border-top:1px solid var(--line);}
.qty-stepper{display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono',monospace; font-weight:600;}
.qty-stepper button{width:30px; height:30px; border-radius:50%; border:1px solid var(--ink); background:none; cursor:pointer; font-size:16px;}
.modal-foot .btn-primary{margin-top:0;}
.modal-detail-price{font-size:17px; font-weight:700; color:var(--gold); margin-bottom:4px;}
.modal-allergen-block{
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  padding:10px 12px; font-size:13px; margin-bottom:4px;
}
.modal-allergen-block.ask-staff{color:var(--lacquer); font-weight:600;}
.modal-allergen-block.allergen-badges{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 12px;
}
.allergen-badge-label{font-weight:600; margin-right:2px;}
.allergen-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--paper); border:1px solid var(--gold); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
}

/* ---------- footer allergen legend (collapsed by default) ---------- */
.allergen-legend{margin-top:8px; font-size:12px; color:rgba(34,32,29,0.6);}
.allergen-legend summary{cursor:pointer; user-select:none;}
.allergen-legend-list{
  margin:8px auto 0; padding-left:18px; max-width:360px; text-align:left;
}
.allergen-legend-list li{margin:2px 0;}

/* ---------- about us ---------- */
.about-us{
  background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:56px 20px; scroll-margin-top:var(--sticky-offset, 112px);
}
.about-us-inner{max-width:var(--maxw); margin:0 auto;}
.about-us h2{
  font-family:'Noto Serif TC',serif; font-weight:900; font-size:clamp(26px,4vw,36px);
  color:var(--ink); text-align:center; margin:0 0 32px;
}
/* Big-image-over-grid-of-3 layout: row 1 is the wide panorama shot at
   its own native ratio (1280/470, the source file's exact pixel
   dimensions) so it never gets force-cropped to a square —
   object-fit:cover on a box that already matches the source ratio
   crops nothing, it's just there as a safety net against rounding.
   Row 2 is the original 3-across square grid. */
.about-gallery{
  display:grid; gap:14px; margin-bottom:36px;
}
.about-gallery-big img{
  width:100%; height:auto; aspect-ratio:1280/470; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line); display:block;
}
.about-gallery-small{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.about-gallery-small img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line); display:block;
}
@media (max-width:700px){
  /* Stay 3 columns (just shrink the gap) instead of stacking to 1 —
     three vertically-stacked square photos on top of the big one would
     make this section very tall on mobile. */
  .about-gallery{gap:8px;}
  .about-gallery-small{gap:6px;}
}
.about-text{max-width:68ch; margin:0 auto;}
.about-text p{font-size:15px; line-height:1.7; color:rgba(34,32,29,0.85); margin:0 0 18px;}
.about-text h3{
  font-family:'Noto Serif TC',serif; font-weight:700; font-size:19px; color:var(--lacquer);
  margin:28px 0 10px;
}
.about-text p:last-child{margin-bottom:0; font-weight:600; color:var(--ink);}

footer{
  border-top:1px solid var(--line); padding:26px 20px 40px; text-align:center;
  font-size:12.5px; color:rgba(34,32,29,0.5);
}
footer a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
footer .footer-legal{display:inline-block; margin-top:6px;}

/* ---------- legal page (§435 identification + privacy policy) ----------
   No app.js on this page — it's static content, no cart/menu interactivity
   needed, so it skips the whole SPA bundle on purpose. */
.legal-header{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 20px; border-bottom:1px solid var(--line);
}
.legal-header .lang-switch{margin-left:0;}
.legal-header-actions{display:flex; align-items:center; gap:14px;}
@media (max-width:600px){
  /* .brand-name/.brand-sub get white-space:nowrap from the topbar's
     mobile rule above (shared class, tuned for that 3-column grid) —
     harmless here too as long as the brand gets its own full-width row
     to sit in, which this wrap achieves, instead of fighting the
     actions group for horizontal space on one line. */
  .legal-header{flex-wrap:wrap; row-gap:10px;}
  .legal-header-actions{flex-wrap:wrap; row-gap:8px;}
}
.back-link{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
  color:var(--ink); text-decoration:none; border:1px solid var(--line);
  border-radius:var(--radius); padding:6px 12px; white-space:nowrap;
}
.legal-main{max-width:var(--maxw); margin:0 auto; padding:40px 20px 60px;}
.legal-toc{
  display:flex; gap:18px; flex-wrap:wrap; margin:0 0 40px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
}
.legal-toc a{color:var(--lacquer); text-decoration:none; border-bottom:1px solid currentColor;}
.legal-main section + section{margin-top:52px; padding-top:4px;}
.legal-main h2{
  font-family:'Noto Serif TC',serif; font-weight:900; font-size:clamp(20px,3vw,26px);
  color:var(--ink); margin:0 0 22px; padding-bottom:12px; border-bottom:2px solid var(--lacquer);
  scroll-margin-top:20px;
}
.legal-main h3{
  font-family:'Noto Serif TC',serif; font-weight:700; font-size:17px; color:var(--lacquer);
  margin:26px 0 8px;
}
.legal-main p, .legal-main li{font-size:15px; line-height:1.7; color:rgba(34,32,29,0.85);}
.legal-main p{margin:0 0 14px;}
.legal-main ul{margin:0 0 14px; padding-left:22px;}
.legal-main li{margin-bottom:8px;}
.legal-main a{color:var(--lacquer);}

/* ---------- receipt print view ----------
   Hide every other top-level section of the page and lay the drawer out as a
   normal static block so only the receipt itself (not the drawer's own head/
   close button, the order form behind it, or the cart-open backdrop) ends up
   on the printed page / saved PDF. */
@media print{
  body > *:not(#drawer){display:none !important;}
  #drawer{
    position:static !important; transform:none !important; box-shadow:none !important;
    width:100% !important; height:auto !important; overflow:visible !important;
  }
  #drawer .drawer-head, #drawer #order-form, .receipt-actions{display:none !important;}
}

/* ---------- view mode toggle (list / grid) ---------- */
.view-toggle-bar{background:var(--paper);}
.view-toggle-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 20px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.view-toggle-title{
  font-family:'Noto Serif TC',serif; font-weight:700; font-size:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto;
}
.view-toggle-group{display:flex; gap:6px; flex:none;}
.view-toggle-btn{
  flex:none; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.view-toggle-btn:hover{border-color:var(--ink);}
.view-toggle-btn.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
@media (max-width:375px){
  .view-toggle-title{font-size:13px;}
}

/* ---------- menu: grid (photo card) view ---------- */
.item-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px; padding-top:4px;
}
.item-card{
  display:flex; flex-direction:column; gap:8px;
  padding:12px; border:1px solid var(--line); border-radius:6px; background:#fff;
  cursor:pointer;
}
.item-card-name{font-size:13.5px; font-weight:600; line-height:1.35;}
.item-card-photo{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:4px;
  overflow:hidden; background:var(--paper-2);
}
.item-card-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(34,32,29,0.28);
}
.item-card-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.item-card-price{font-size:14px; color:var(--gold); font-weight:700;}
.item-card-add{margin-top:auto; display:flex; justify-content:center;}
.item-card-add .add{width:38px; height:38px; flex:none;}
.item-card-add .add.in-cart,
.item-card-add .add[data-open-modal]{width:auto; height:auto;}
.item-card-add .qty-inline{justify-content:center;}
.item-card-add .qty-inline-stepper{justify-content:center;}