/* One paper surface, two views of the same dishes. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Keep the small visual controls, give the hand a larger target. */
.icon-button, .category-button, .search-button, .close-button {
  min-width: 44px;
  min-height: 44px;
}
.filters button, .styles .chip { min-height: 44px; }
.dish-add::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
}
.cart-dishes .cart-quantity button { min-width: 44px; min-height: 44px; }
.cart-quantity:focus-visible, .empty-ticket-copy h3:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.cart-dishes[data-layout="table"] .cart-quantity b { min-width: 22px; }
#sheet[data-mode="dish"] .dish-action .quantity button { min-width: 44px; min-height: 44px; }
.search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--paper);
  padding: 6px 16px 0;
  font-size: 12px;
  line-height: 1.5;
}
.search-summary[hidden] { display: none; }
.search-summary > span { min-width: 0; overflow-wrap: anywhere; }
.search-summary button { min-width: 44px; min-height: 44px; flex: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.search-summary button:focus-visible { outline-color: var(--paper); }
/* Search owns the visible viewport, including while a mobile keyboard is open. */
body.search-open #main {
  position: fixed; z-index: 40;
  top: var(--visible-top, 0px); left: 0; right: 0;
  height: var(--visible-height, 100dvh); max-width: 720px;
  margin: 0 auto; padding: 0 0 env(safe-area-inset-bottom);
  overflow: auto; overscroll-behavior: contain; background: var(--paper);
}
body.search-open .menu-toolbar,
body.search-open .colophon,
body.search-open .table-tray { display: none; }
body.search-open .search-panel { position: sticky; top: 0; z-index: 5; padding: 8px 16px; border-radius: 0; }
body.search-open .search-summary { color: var(--muted); padding: 0 16px; }
body.search-open #menuList { margin: 0; border-radius: 0; }
.search-input input { min-width: 0; }
.search-input input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-input #clearSearch { display: grid; place-items: center; min-width: 36px; }
.search-input #clearSearch[hidden], body.search-open .filters[hidden] { display: none; }
.search-input #clearSearch .icon { width: 16px; height: 16px; }
.search-input #cancelSearch { font-size: 14px; white-space: nowrap; min-width: 48px; color: var(--red); }
body.search-open .filters { margin-top: 4px; }
body.search-open .filters button { border: 0; border-radius: 4px; padding: 4px 12px; }
.search-results { padding: 0 16px 16px; }
.search-result { border-bottom: 1px solid var(--line); }
.search-result-open { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 0; min-height: 88px; }
.search-result-open img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.search-result-open > span:not(.search-result-arrow) { min-width: 0; flex: 1; }
.search-result-open strong { display: block; font: 400 16px/1.4 var(--sans); }
.search-result-open small { display: block; margin-top: 5px; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.search-result-arrow { font-size: 22px; color: var(--muted); padding: 0 8px; }
@media (max-width: 760px) {
  html.keyboard-open #sheet[open] {
    position: fixed; inset: var(--visible-top, 0px) 0 auto;
    margin: 8px auto 0; height: auto; min-height: 0;
    max-height: calc(var(--visible-height, 100dvh) - 16px);
    overflow-y: auto;
  }
  html.keyboard-open #sheet[data-mode="cart"][open] {
    height: calc(var(--visible-height, 100dvh) - 16px);
    overflow: hidden;
  }
  html.keyboard-open #sheet.table-entry-sheet .sheet-content,
  html.keyboard-open #sheet[data-mode="profile"] .sheet-content { padding-bottom: 20px; }
}
.note-conflict, .review-update {
  border-left: 2px solid var(--red);
  padding: 8px 0 8px 14px;
  margin: 18px 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.65;
}
.note-conflict[hidden], .review-update[hidden] { display: none; }
.note-conflict p { margin: 0 0 10px; }
.note-conflict small { color: var(--muted); }
.note-conflict blockquote { margin: 4px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-conflict > div { display: flex; gap: 16px; flex-wrap: wrap; }
.note-conflict button { min-height: 44px; padding: 0; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.image-unavailable > img { visibility: hidden; }
.image-fallback {
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}
.image-fallback > .icon { width: 52px; height: 52px; opacity: .6; }
.image-fallback small { font: 11px/1.5 var(--sans); }
.image-fallback button { min-height: 44px; min-width: 60px; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
#sheet[data-mode="dish"] .detail-image { position: relative; }
#sheet[data-mode="dish"] .detail-image.image-unavailable { cursor: auto; touch-action: auto; }
#toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#toast[hidden] { display: none; }
#toast[data-kind="added"] {
  justify-content: center;
  gap: 7px;
  bottom: var(--added-toast-bottom, 108px);
  min-height: 40px;
  padding: 8px 15px 8px 11px;
  border: 1px solid #e8d1cf;
  border-radius: 999px;
  background: #fff;
  color: var(--red);
  box-shadow: 0 3px 14px #302a2410;
  font: 500 13px/1.4 var(--sans);
  white-space: nowrap;
  pointer-events: none;
}
#toast[data-kind="added"] > svg {
  width: 22px;
  height: 22px;
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: #b5232b0b;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.toast-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#toast button {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.viewing-table .table-tray {
  visibility: hidden;
}
/* The entire tray is tappable; the photo strip also retains native scrolling. */
.table-tray {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-block: 6px;
  cursor: pointer;
}
.table-tray .tray-pictures {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 0 2px;
  scrollbar-width: thin;
  scrollbar-color: #f5efe355 transparent;
  touch-action: pan-x;
}
.table-tray .tray-pictures[hidden] {
  display: none;
}
.table-tray .tray-pictures img,
.table-tray .tray-pictures > span {
  flex: 0 0 48px;
  width: 48px;
  height: 44px;
  margin: 0;
  transform: none;
  -webkit-user-drag: none;
  user-select: none;
}
.table-tray .tray-pictures > img + img {
  position: relative;
  margin-inline-start: -14px;
}
/* Only two new tray images have no archived alpha source. Keep their pixels
   unchanged and mask the studio background to the reviewed vessel contour. */
:is(.table-tray .tray-pictures img, .tray-flight)[src$="lunch-mince-red-oil-noodles-generated-v1-appetite-v1.webp"] { mask: url('/brand/tray-noodle-silhouette-v1.svg') center / contain no-repeat; }
:is(.table-tray .tray-pictures img, .tray-flight)[src$="oyster-lettuce-clean-v2-appetite-v1.webp"] { mask: url('/brand/tray-lettuce-silhouette-v1.svg') center / contain no-repeat; }
.table-tray .tray-pictures > span {
  display: grid;
  align-items: center;
  font-size: 10px;
}
.tray-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  color: inherit;
}
.tray-summary .tray-copy small { margin-top: 3px; }
.table-tray { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; }
.table-tray .tray-pictures { width: max-content; max-width: 84px; flex: 0 0 auto; padding: 0; scrollbar-width: none; }
.table-tray .tray-pictures::-webkit-scrollbar { display: none; }
.table-tray .tray-pictures img, .table-tray .tray-pictures > span { width: 36px; height: 36px; flex-basis: 36px; }
.table-tray .tray-pictures > img + img { margin-inline-start: -12px; }
.table-tray .tray-pictures > img:nth-of-type(n+4) { display: none; }
.table-tray .tray-summary { flex: 1; width: auto; min-width: 0; min-height: 44px; gap: 8px; }
.table-tray .tray-copy { flex: none; white-space: nowrap; }
.table-tray .tray-copy strong { font-size: 11px; }
.table-tray .tray-copy small { display: none; }
.table-tray .tray-action { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; padding: 0; margin-left: auto; white-space: nowrap; }
.table-tray .tray-action > span { font-size: 11px; }
.table-tray #trayActionLabel { display: none; }
.table-tray .tray-total { order: -1; font-size: 13px; margin: 0; }
@media (max-width: 360px) { .table-tray { gap: 8px; padding-inline: 10px; } .table-tray .tray-summary, .table-tray .tray-action { gap: 6px; } }
.tray-summary:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
  border-radius: 4px;
}
.detail-image:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -5px;
  border-radius: 12px;
}
.colophon {
  margin-bottom: 155px;
}
.colophon.restaurant-footer {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 52px 0 calc(160px + env(safe-area-inset-bottom));
  padding: 8px 30px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff4e6;
  font-size: 14px;
  letter-spacing: 0;
}
.footer-visit { position:relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 28px; margin-top:-10px; }
.footer-visit #footerFarewell { display:flex; align-items:center; min-height:44px; font-size:11px; line-height:1.5; letter-spacing:.04em; color:#f0d5bf; }
.footer-signoff address { margin:0; font-size:10px; line-height:1.5; font-style:normal; text-align:right; }
.footer-signoff address a { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-height:44px; color:inherit; text-decoration:none; }
.footer-signoff address a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.footer-links { position:absolute; right:0; display: flex; align-items: center; flex: none; }
.footer-links a { display: grid; place-items: center; width: 44px; min-height: 44px; color: inherit; text-decoration: none; font-size: 20px; }
.footer-links a:hover { color: #fff; border-bottom-color: currentColor; }
.footer-links a:focus-visible { outline: 2px solid #fff4e6; outline-offset: 4px; }
.footer-storefront { display:block; position: relative; margin: 0 -30px; aspect-ratio: 1.4; max-height: 470px; overflow: hidden; }
.footer-storefront[data-render-state="ready"] > .footer-storefront-fallback { visibility: hidden; }
.footer-storefront-fallback { position:absolute; width:155.75%; left:-12.69%; top:50%; transform:translateY(-50%); clip-path:polygon(12.375% 12.75%,67.5% 12.75%,68.125% 31.875%,67.25% 33.125%,66.0625% 33.125%,66.0625% 83.25%,14.75% 83.25%,14.75% 33.125%,12.5% 31.75%); }
.footer-storefront-fallback > img { display: block; width:100%; height:auto; filter: none; }
.footer-awning-logo { position: absolute; width: 18%; height: 11%; left: 26%; top: 20%; background: #fff9ef; mask: url('/brand/dumpling-lab-primary.png') center / contain no-repeat; -webkit-mask: url('/brand/dumpling-lab-primary.png') center / contain no-repeat; }
.footer-signoff { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top:8px; padding-top: 12px; border-top: 1px solid #fff4e625; font-size: 9px; line-height: 1.6; color: #e5bfa9; }
@media (max-width: 480px) {
  .colophon.restaurant-footer { padding: 8px 20px 14px; margin-top: 24px; }
  .footer-visit { gap: 14px; }
  .footer-signoff address { font-size:9px; letter-spacing:0; }
  .footer-storefront { margin-inline: -20px; }
  .footer-signoff { font-size: 9px; }
}
/* Detail reads as a menu note, not a boxed form. */
#sheet[data-mode="dish"] .detail-image {
  height: 220px;
  padding: 10px;
  background: none;
  touch-action: pan-y pinch-zoom;
  cursor: auto;
  overflow: hidden;
  user-select: none;
}
#sheet[data-mode="dish"] .detail-image img {
  width: 78%;
  height: 78%;
  transform: none;
  animation: none;
  pointer-events: none;
}
#sheet[data-mode="dish"] .sheet-content { padding-top: 12px; }
/* This corrected photo has a white studio background, not an alpha cutout. */
img[src*="oyster-lettuce-clean-v2"] { filter: none !important; }
#sheet[data-mode="dish"] .detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
}
#sheet[data-mode="dish"] .detail-top > div { display: contents; }
#sheet[data-mode="dish"] .detail-top h1 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: clamp(24px, 5.6vw, 32px);
  line-height: 1.45;
}
#sheet[data-mode="dish"] .detail-price {
  grid-column: 2;
  grid-row: 1;
  font-size: 23px;
  margin: 0;
}
#sheet[data-mode="dish"] .detail-other {
  grid-column: 1/-1;
  font-size: 15px;
  line-height: 1.5;
}
#sheet[data-mode="dish"] .detail-description {
  padding-left: 14px;
  border-left: 2px solid #a04b3e66;
  margin: 25px 0;
  font-size: 17px;
}
#sheet[data-mode="dish"] .detail-facts {
  border: 0;
  padding: 0;
  gap: 14px 25px;
  margin-bottom: 22px;
}
#sheet[data-mode="dish"] .detail-facts div { flex: initial; }
#sheet[data-mode="dish"] .detail-ingredients { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; margin: 12px 0 16px; }
#sheet[data-mode="dish"] .ingredient-heading { padding-right: 12px; border-right: 1px solid var(--line); color: var(--muted); font: 400 11px/1.5 var(--sans); white-space: nowrap; }
#sheet[data-mode="dish"] dl-ingredient-reveal { display: block; min-width: 0; }
#sheet[data-mode="dish"] .ingredient-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px; list-style: none; margin: 0; padding: 0; color: var(--red); }
.ingredient-item { display: inline-flex; max-width: 100%; }
.ingredient-name { display: inline-block; font: 400 14px/1.65 var(--sans); overflow-wrap: anywhere; }
#sheet[data-mode="dish"] .ingredient-note { grid-column: 2; margin: 6px 0 0; font: 400 12px/1.6 var(--sans); color: var(--muted); }
#sheet[data-mode="dish"] .ingredient-heading + .ingredient-note { margin-top: 0; }
#sheet[data-mode="dish"] .detail-top .detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
#sheet[data-mode="dish"] .detail-title h1 { min-width: 0; }
.preparation-badge { display: inline-flex; align-items: center; flex: none; padding: 3px 8px; border-radius: 4px; background: #9146370d; color: var(--red); font: 400 12px/1.5 var(--sans); }
.preparation-badge[hidden] { display: none; }
.ingredient-advisory { margin: 20px 0 0; color: var(--muted); font: 400 11px/1.65 var(--sans); }
.spice-value { position: relative; width: fit-content; padding-bottom: 10px; }
.spice-brush { position: absolute; left: -2px; bottom: -1px; color: var(--red); overflow: visible; }
#sheet[data-mode="dish"] .dish-action {
  align-items: center;
  border-top: 0;
  padding-top: 12px;
  gap: 16px;
}
#sheet[data-mode="dish"] .dish-action .quantity { border: 0; gap: 3px; }
#sheet[data-mode="dish"] .dish-action .quantity button {
  width: 38px;
  height: 44px;
  border-radius: 50%;
  background: #80684d0a;
}
#sheet[data-mode="dish"] .dish-action .primary {
  border-radius: 30px;
  padding-inline: 20px;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 360px) {
  #sheet[data-mode="dish"] .dish-action { padding-inline: 17px; gap: 10px; }
  #sheet[data-mode="dish"] .dish-action .primary { padding-inline: 14px; font-size: 12px; }
  #sheet[data-mode="dish"] .detail-price { font-size: 20px; }
}
#sheet[data-mode="cart"][open] {
  display: flex;
  flex-direction: column;
  width: min(660px, calc(100vw - 24px));
  height: min(940px, 96dvh);
  max-height: 96dvh;
  overflow: hidden;
  animation: none;
}
#sheet[data-mode="cart"] .sheet-header {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-bottom: 0;
  background: var(--paper);
  border-radius: 50%;
  padding: 0;
}
#sheet[data-mode="cart"] #sheetBody {
  flex: 1;
  min-height: 0;
  display: flex;
}
.cart-page {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cart-scroll {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px 26px 22px;
  scrollbar-width: thin;
}
.our-table-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 15px;
  padding: 0 44px 14px 0;
}
.our-table-head .eyebrow {
  font-size: 8px;
  margin: 0 0 8px;
  line-height: 1.7;
}
.our-table-head h2 {
  margin: 0;
  font: 500 var(--type-title)/1.35 var(--sans);
}
.table-number {
  text-align: right;
  flex: none;
  padding-bottom: 2px;
}
.table-number small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 4px;
}
.table-number strong {
  color: var(--red);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.table-members {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: var(--muted);
}
.table-members button {
  color: var(--red);
  min-height: 44px;
  padding: 0;
  text-align: right;
}
.cart-viewbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 14px;
}
.cart-viewbar .receipt-tabs {
  border: 0;
  gap: 22px;
  margin: 0;
}
.cart-viewbar .receipt-tabs button {
  font-size: 12px;
  padding: 8px 0;
}
.layout-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 10px;
  padding: 0;
  color: var(--muted);
  flex: none;
}
.layout-switch dl-table-view-motion {
  width: 21px;
  height: 21px;
  color: var(--red);
}
.cart-dishes {
  display: grid;
  align-items: start;
}
.cart-dishes[data-layout="table"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  align-items: stretch;
}
.cart-dishes[data-layout="table"] .shared-dish {
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  align-items: start;
}
.shared-dish {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 4px;
  min-width: 0;
}
.cart-dish-open {
  grid-column: 1/-1;
  width: 100%;
  padding: 0;
  text-align: left;
}
.cart-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.08;
  width: 100%;
  margin: 0 0 6px;
}
.cart-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 9px 9px #50392316);
}
.cart-dish-copy {
  display: block;
}
.cart-dish-copy strong {
  display: block;
  font: 400 20px/1.45 var(--serif);
}
.cart-dish-copy small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
  margin-top: 3px;
}
.cart-author {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 10px;
  margin: 4px 0 0;
}
.cart-author:empty {
  margin: 0;
}
.cart-unit-price {
  font-size: 14px;
  white-space: nowrap;
}
.cart-unit-price small {
  margin-left: 5px;
  color: var(--muted);
  font-size: 10px;
}
.cart-dishes[data-layout="table"] .cart-unit-price {
  grid-column: 1/-1;
  grid-row: 3;
  margin-top: 8px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.cart-dishes[data-layout="table"] .cart-quantity {
  grid-column: 1/-1;
  grid-row: 4;
  justify-self: start;
  margin: 4px 0 0 -10px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--red);
}
.cart-dishes[data-layout="table"] .cart-quantity button {
  width: 40px;
}
.cart-dishes[data-layout="table"] .cart-quantity b {
  min-width: 26px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cart-quantity {
  border: 0;
  gap: 0;
  justify-self: end;
}
.cart-quantity button {
  width: 36px;
  height: 44px;
  font-size: 19px;
}
.cart-quantity b {
  min-width: 17px;
  font-size: 12px;
}
.cart-dishes[data-layout="list"] {
  grid-template-columns: 1fr;
  gap: 0;
}
.cart-dishes[data-layout="list"] .shared-dish {
  padding: 17px 0;
  column-gap: 10px;
  border-bottom: 1px solid #dcd2c066;
}
.cart-dishes[data-layout="list"] .cart-dish-open {
  grid-column: 1;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}
.cart-dishes[data-layout="list"] .cart-photo {
  height: 62px;
  aspect-ratio: 1;
  margin: 0;
}
.cart-dishes[data-layout="list"] .cart-dish-copy strong {
  font-size: 18px;
}
.cart-dishes[data-layout="list"] .cart-dish-copy small {
  font-size: 10px;
}
.cart-dishes[data-layout="list"] .cart-author {
  grid-column: 1;
  grid-row: 2;
  padding-left: 75px;
  margin-top: 0;
}
.cart-dishes[data-layout="list"] .cart-unit-price {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  font-size: 12px;
}
.cart-dishes[data-layout="list"] .cart-quantity {
  grid-column: 2;
  grid-row: 1;
}
.table-note {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  font: 400 13px/1.5 var(--sans);
}
.table-note textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  min-height: 88px;
  font: 400 16px/1.5 var(--sans);
  resize: vertical;
}
.table-invite {
  display: block;
  min-height: 44px;
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--muted);
  padding: 0;
}
.cart-checkout {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
  padding: 13px 24px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 22px #302a2408;
  background: var(--paper);
}
.cart-checkout > span {
  flex: none;
}
.cart-checkout small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 5px;
}
.cart-checkout strong {
  font-weight: 400;
  font-size: 23px;
}
.cart-checkout .primary {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  border-radius: 3px;
}
.cart-viewbar[hidden], .table-members[hidden] { display: none; }
.empty-ticket { width: 100%; margin: 16px auto 4px; padding: 0; border: 0; background: none; text-align: left; }
.empty-ticket-copy { min-width: 0; }
.empty-ticket h3 { margin: 0; font: 500 18px/1.45 var(--sans); overflow-wrap: anywhere; }
html[lang="en"] .empty-ticket h3 { font: 400 16px/1.45 var(--sans); }
.empty-ticket-copy p { margin: 8px 0 24px; color: var(--muted); font: 400 13px/1.6 var(--sans); }
.empty-ticket-action.primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 12px; font: 500 15px/1.5 var(--sans); }
#sheet[data-mode="cart"].is-empty-cart[open] {
  height: fit-content;
}
#sheet[data-mode="cart"].is-empty-cart #sheetBody,
.is-empty-cart .cart-scroll { flex: 0 1 auto; }
.is-empty-cart .cart-dishes:empty,
.is-empty-cart .cart-checkout { display: none; }
.is-empty-cart .table-invite { margin: 16px auto 0; }
.receipt-submitter { display: flex; gap: 8px; margin: 0 0 14px; font-size: 11px; color: var(--muted); }
.receipt-submitter strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.nickname-form {
  display: grid;
  gap: 16px;
  padding: 20px 26px 28px;
}
.sheet-content .nickname-form {
  padding: 0;
}
.nickname-form label {
  display: block;
  margin: 0;
  font: 400 13px/1.5 var(--sans);
}
.nickname-form input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  background: transparent;
  font: 400 16px/1.5 var(--sans);
}
.nickname-form input:focus, .table-note textarea:focus, .share-link-fallback input:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-color: transparent;
}
.nickname-form p:empty { display: none; }
.nickname-form p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.nickname-form .field-error { color: var(--red); }
.nickname-form .primary { min-height: 48px; font-size: 15px; margin: 0; }
#sheet.table-entry-sheet {
  width: min(420px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  border-radius: 18px;
  margin: auto;
}
#sheet.table-entry-sheet .sheet-header { padding: 4px 12px; }
#sheet.table-entry-sheet .form-content { padding: 0 22px 24px; }
#sheet.table-entry-sheet h2 { font: 400 24px/1.4 var(--sans); margin: 0; }
#sheet.table-entry-sheet .form-hint { font: 400 13px/1.5 var(--sans); color: var(--muted); margin: 8px 0 20px; }
/* The optional name editor is a compact utility sheet, not another checkout. */
#sheet[data-mode="profile"] {
  width: min(420px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  border-radius: 18px;
}
@media (max-width: 700px) {
  #sheet[data-mode="profile"] { margin: auto auto max(12px, env(safe-area-inset-bottom)); }
}
#sheet[data-mode="profile"] .sheet-header {
  padding-inline: 14px;
}
#sheet[data-mode="profile"] .close-button { width: 44px; height: 44px; }
#sheet[data-mode="profile"] .nickname-content {
  padding: 4px 22px 22px;
}
#sheet[data-mode="profile"] .nickname-content h2 {
  margin: 0 0 20px;
  font: 400 24px/1.4 var(--sans);
}
#sheet[data-mode="profile"] .nickname-form { padding: 0; }
#sheet[data-mode="profile"] .nickname-form input {
  min-height: 48px;
  padding: 11px 12px;
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 16px;
  transition: border-color 150ms ease;
}
#sheet[data-mode="profile"] .nickname-form input:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-color: transparent;
}
#sheet[data-mode="profile"] .nickname-form input::placeholder { color: var(--muted); opacity: 1; }
#sheet[data-mode="profile"] .nickname-form p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}
#sheet[data-mode="profile"] .nickname-form .primary {
  width: 100%;
  min-height: 46px;
  padding: 11px 20px;
  font-size: 15px;
  border-radius: 6px;
  justify-content: center;
}
#sheet[data-return-to="table"] .detail-image img {
  animation: none;
}
.table-activity {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 36px);
  padding: 9px 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 5px 25px #302a2420;
  border-radius: 12px;
  font-size: 12px;
  pointer-events: none;
  z-index: 24;
}
.table-activity img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.dish-table-count {
  display: block;
  margin-top: 7px;
  font-size: 9px;
  color: var(--red);
  letter-spacing: 0.02em;
}
.receipt-page {
  padding: 14px 26px 30px;
}
.receipt-page > .primary,
.receipt-page > .secondary {
  margin-top: 14px;
}
.paper-receipt {
  position: relative;
  padding: 6px 0 20px;
  margin: 0 0 24px;
  border-bottom: 3px double var(--line);
}
/* Receipt feed is a confirmed-order visual, not a simulated payment. */
/* Chinese-first bilingual labels. No hidden alternate-language UI. */
.bilingual { display: inline-flex; flex-direction: column; min-width: 0; vertical-align: middle; line-height: 1.4; text-align: inherit; }
.bilingual { max-width: 100%; }
.bilingual > [lang], .dish-name, .dish-english, .section-heading .translation, .detail-other:not(:has(.bilingual)), .detail-top h1, .filling-picker strong, .filling-picker small:not(:has(.bilingual)):not(.price-from), .receipt-item-copy > strong, .receipt-item-copy > small[lang], .preparation-label > strong, .preparation-label > small, .category-choice > strong, .category-choice > .translation {
  white-space: nowrap !important;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
}
[style*="--fit-font"] { font-size: var(--fit-font) !important; letter-spacing: 0 !important; }
.dish-name .dish-word, .detail-top h1 .dish-word, .filling-picker strong .dish-word, .receipt-item-copy strong .dish-word { display: inline; }
.dish-name wbr, .detail-top h1 wbr, .filling-picker strong wbr, .receipt-item-copy strong wbr { display: none; }
.filling-picker strong, .filling-picker small, .receipt-item-copy > strong, .receipt-item-copy > small { display: block; }
.detail-top > div, .receipt-item-copy, .filling-picker button > span { min-width: 0; }
.bilingual > [lang="zh-CN"] { display: block; font: inherit; color: inherit; letter-spacing: inherit; }
.bilingual > .bilingual-en { display: block; margin-top: 3px; font: 400 11px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); white-space: normal; }
.primary .bilingual-en, .tray .bilingual-en, #tray .bilingual-en, .active .bilingual-en { color: inherit; opacity: .85; }
.section-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
.section-heading .translation { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.category-item .bilingual-en { font-size: 9px; margin-top: 4px; }
.category-item { padding-block: 10px; }
.side-category .bilingual { text-align: left; }
.sheet-content h2 .bilingual-en, .receipt-success-title .bilingual-en { font-size: 14px; margin-top: 7px; }
.lunch-step-title .bilingual-en { font-size: 12px; }
.lunch-options .chip { min-height: 52px; }
.lunch-options legend .bilingual-en { font-size: 10px; }
.lunch-options .bilingual { text-align: center; }
.lunch-options legend .bilingual { text-align: left; }
.dish-price .bilingual { vertical-align: top; font-size: inherit; }
.dish-price .bilingual-en { font-size: 9px; margin-top: 1px; }
.price-from { display: inline-flex !important; flex-direction: column; }
.price-from [lang="en"] { font: 400 9px/1.4 var(--sans); color: var(--muted); }
.receipt-stamp .bilingual-en { color: inherit; font-size: 8px; margin-top: 0; }
.receipt-printer .receipt-lines .bilingual-en { font-size: 9px; }
.receipt-lines > div > span:nth-child(2) { white-space: nowrap; }
.receipt-tabs .bilingual-en { font-size: 9px; }
.receipt-tabs button { display: inline-flex; align-items: flex-start; gap: 5px; }
.table-line { align-items: center; }
.table-line[hidden] { display: none; }
.table-button .status-dot { width: 4px; height: 4px; }
/* Keep the notice's white background in its own paint layer: WebKit otherwise
   leaves a transparent corner while the body is fixed behind a modal. */
.preview-notice { position: relative; z-index: 1; font: 400 9px/1.4 var(--sans); padding: 4px 12px; border: 0; color: var(--muted); }
.dish-price { white-space: nowrap; }
.category-footer { display: flex; gap: 18px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.category-footer button { min-height: 44px; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.table-line .plan-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px 0 12px; font: 400 11px/1.4 var(--sans); letter-spacing: 0; color: var(--muted); }
.table-line .plan-button:hover, .table-line .plan-button:focus-visible { color: var(--red); }
.connection .bilingual-en { font-size: 9px; max-width: 180px; }
.table-members { gap: 10px; align-items: flex-start; }
.table-members > span { min-width: 0; }
.table-members .bilingual-en { font-size: 9px; }
.cart-checkout .primary .bilingual-en, .dish-action .primary .bilingual-en { font-size: 10px; }
.dish-action .primary { gap: 8px; }
#toast, #tableEntryError, .drawer-note { white-space: pre-line; }
#sheetEyebrow .bilingual-en { font-size: 10px; }
.preview-notice .bilingual-en { font-size: 8px; color: inherit; }
@media(max-width:360px) { .cart-checkout .primary { padding-inline: 10px; } .dish-action .primary { padding-inline: 10px; } .category-item .bilingual-en { font-size: 8px; } }
.receipt-success-title { margin: 0 0 22px; font: 400 28px/1.4 var(--serif); }
/* Selected-language layout: no repeated translation rows. */
.dish-english, .section-heading > .translation, .detail-top .detail-other,
.preparation-label > small, .filling-picker button > span > small:not(.price-from),
.category-choice > .translation, .paper-heading > em, .paper-row > span > small,
.planner-item > span > small[lang] { display: none !important; }
.language-button { position:relative; inset-inline-start:8px; min-width: 44px; min-height: 44px; padding: 0 9px; font: 400 12px/1 var(--sans); color: var(--ink); }
.lunch-options .chip { min-height: 40px; padding: 10px 15px; }
.lunch-options legend { margin-bottom: 9px; }
.lunch-options { margin-block: 16px; }
.detail-top { align-items: baseline; gap: 16px; }
.detail-top h1 { margin-bottom: 0; }
/* Long English dish names wrap within their column; never cross into price. */
html[lang="en"] #sheet[data-mode="dish"] .detail-top h1 {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  font-size: 22px !important;
  line-height: 1.4;
}
.detail-top + .fineprint { margin-top: 18px; }
.fineprint { white-space: normal; line-height: 1.7; }
.section-heading { gap: 0; }
html[lang="en"] .section-heading h2 {
  font-family: var(--sans);
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
html[lang="en"] .sheet-content h1, html[lang="en"] .sheet-content h2 {
  font-family: var(--sans);
  letter-spacing: 0;
  font-weight: 500;
}
.filling-picker .filling-price { display: inline-block; white-space: nowrap; }
.sharing-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.sharing-option { display: flex; flex-direction: column; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 16px; padding: 12px 4px 18px; background: var(--paper); }
.sharing-option strong { font: 400 18px/1.5 var(--serif); margin-top: 8px; }
.sharing-option small { margin-top:4px; padding:0 4px; color:var(--muted); font:400 11px/1.5 var(--sans); }
.sharing-note { margin:16px 0 0; color:var(--muted); font:400 12px/1.65 var(--sans); }
.sharing-option:hover, .sharing-option:focus-visible { border-color: var(--red); }
@media(max-width:360px) { .sharing-options { gap: 10px; } .sharing-option { padding-inline: 4px; } }
.receipt-success-title:focus { outline: none; }
.receipt-printer { --paper: #fffefa; --ink: #302f2b; --muted: #6c6a61; --red: #b5232b; --line: #d9d7ce; margin-bottom: 10px; }
.receipt-printer .paper-receipt {
  background: var(--paper);
  color: var(--ink);
  padding: 24px 20px 30px;
  border: 0;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 6px),95% 100%,90% calc(100% - 6px),85% 100%,80% calc(100% - 6px),75% 100%,70% calc(100% - 6px),65% 100%,60% calc(100% - 6px),55% 100%,50% calc(100% - 6px),45% 100%,40% calc(100% - 6px),35% 100%,30% calc(100% - 6px),25% 100%,20% calc(100% - 6px),15% 100%,10% calc(100% - 6px),5% 100%,0 calc(100% - 6px));
}
.receipt-printer .receipt-masthead { padding-top: 0; border-bottom-style: dashed; }
.receipt-printer .receipt-heading { margin-top: 16px; }
.receipt-printer .receipt-heading h2 { font-size: 22px; }
.receipt-printer .receipt-stamp { width: 52px; height: 52px; font-size: 13px; border-width: 1px; box-shadow: none; transform: rotate(-8deg); }
[data-mode="success"] .receipt-printer .receipt-stamp { animation: none; }
.receipt-printer .receipt-dish-strip { display: none; }
.receipt-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.receipt-item-copy { min-width: 0; }
.receipt-line-photo { display: block; width: 48px; height: 48px; object-fit: contain; flex: none; }
.receipt-printer .receipt-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.receipt-printer .receipt-item-copy { min-width: 0; }
.receipt-printer .receipt-line-photo { display: block; width: 48px; height: 48px; object-fit: contain; flex: none; }
.receipt-printer .receipt-lines > div { align-items: center; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
.receipt-printer .receipt-lines > div > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt-printer .receipt-lines strong { font-size: 16px; }
.receipt-printer .receipt-lines > div { padding-block: 11px; font-size: 12px; }
.receipt-printer .receipt-meta { font-size: 9px; gap: 8px; flex-wrap: wrap; }
.receipt-printer .receipt-sum { margin: 20px 0; border-top: 1px dashed var(--line); padding-top: 18px; }
.receipt-printer .receipt-sum strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.receipt-printer .receipt-note { overflow-wrap: anywhere; }
button[data-action="submit"] { position: relative; overflow: hidden; min-height: 50px; }
button[data-order-state="submitting"] { opacity: .85; }
button[data-order-state="submitting"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 30%; background: currentColor; animation: receipt-sending 1100ms ease-in-out infinite; }
@keyframes receipt-sending { from { transform: translateX(-105%); } to { transform: translateX(440%); } }
@media (prefers-reduced-motion: reduce) { button[data-order-state="submitting"]::after { animation: none; width: 100%; opacity: .4; } }
@media (max-width: 360px) {
  .receipt-success { padding-inline: 18px; }
  .receipt-printer .paper-receipt { padding-inline: 15px; }
  .receipt-printer .receipt-lines strong { font-size: 15px; }
  .receipt-printer .receipt-line-photo { width: 38px; height: 38px; }
  .receipt-printer .receipt-item { gap: 6px; }
}
.receipt-masthead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0 15px;
  font-size: 10px;
  letter-spacing: 0.09em;
}
.receipt-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 14px;
}
.receipt-heading p {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.15em;
  margin: 0 0 10px;
}
.receipt-heading h2 {
  font: 400 30px/1.35 var(--serif);
  margin: 0;
}
.receipt-stamp {
  display: grid;
  place-items: center;
  flex: none;
  width: 66px;
  height: 66px;
  color: var(--red);
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 400 17px var(--serif);
  transform: rotate(-12deg);
  box-shadow:
    inset 0 0 0 3px var(--paper),
    inset 0 0 0 4px currentColor;
}
[data-mode="success"] .receipt-stamp {
  animation: receipt-ink 380ms cubic-bezier(0.22, 0.72, 0.18, 1) both;
}
.receipt-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: var(--muted);
  margin: 18px 0;
}
.receipt-dish-strip {
  display: none;
  gap: 8px;
  padding: 5px 0 18px;
}
.receipt-dish-strip img {
  width: calc((100% - 32px) / 5);
  max-width: 70px;
  height: 64px;
  object-fit: contain;
}
.receipt-lines > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35px auto;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
}
.receipt-lines strong {
  font: 400 17px/1.5 var(--serif);
}
.receipt-lines b {
  font-weight: 400;
}
.receipt-lines small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.receipt-lines > div > span:nth-child(2) {
  color: var(--muted);
}
.receipt-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin: 23px 0 18px;
}
.receipt-sum span {
  font-size: 12px;
}
.receipt-sum strong {
  font-weight: 400;
  font-size: 31px;
}
.receipt-note {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 18px;
}
.paper-receipt > footer {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
}
.placed-receipts .paper-receipt + .paper-receipt {
  padding-top: 20px;
}
.chapter-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  margin: 10px 0 22px;
}
.lunch-service {
  margin: 8px 0 22px;
  color: var(--red);
  font-size: 11px;
  letter-spacing: .12em;
}
.lunch-step-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.lunch-step-title > span {
  color: var(--red);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lunch-step-title h3 {
  margin: 0;
  font: 400 21px/1.5 var(--serif);
}
.lunch-step-title small {
  margin-left: auto;
  color: var(--red);
}
.lunch-preparations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 18px;
  margin: 12px 0 24px;
}
.lunch-preparations button {
  min-width: 0;
  min-height: 72px;
  padding: 9px 0;
  text-align: left;
  border: 0;
}
.preparation-photo { display: block; aspect-ratio: 1.25; position: relative; overflow: hidden; }
.preparation-photo img { position: absolute; inset: 0; margin: auto; width: 85%; height: 85%; object-fit: contain; }
#sheet[data-mode="filling"] .sheet-content { padding-top: 2px; }
#sheet[data-mode="filling"] #sheetTitle { font-size: 27px; margin-bottom: 6px; }
#sheet[data-mode="filling"] .detail-other { margin: 0 0 8px; font-size: 13px; }
.filling-picker { display: grid; margin-top: 4px; }
.filling-picker button { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 12px; gap: 10px; align-items: center; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--line); min-height: 80px; }
.filling-picker img { width: 56px; height: 56px; object-fit: contain; }
.filling-picker strong { font: 400 17px/1.5 var(--serif); }
.filling-picker small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 4px; }
.filling-picker .filling-price { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.filling-picker .filling-price small { display: inline; margin: 0; font-size: 10px; }
@media (max-width: 360px) {
  #sheet[data-mode="filling"] .sheet-content { padding-inline: 16px; }
  .filling-picker button { grid-template-columns: 46px minmax(0, 1fr) auto 10px; gap: 8px; }
  .filling-picker img { width: 46px; height: 46px; }
  .filling-picker strong { font-size: 16px; }
  .filling-picker small { font-size: 10px; }
}
.recommendation-card .dish-open:disabled { opacity: .65; }
.preparation-label { position: relative; display: block; padding: 10px 28px 10px 0; border-bottom: 1px solid var(--line); }
.preparation-label > span { position: absolute; right: 0; top: 15px; }
.preparation-label > .preparation-description { display: block; margin-top: 5px; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--muted); }
.preparation-label .preparation-state { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--muted); border-radius: 50%; color: var(--paper); }
.preparation-state svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lunch-preparations [aria-pressed="true"] .preparation-state { border-color: var(--red); background: var(--red); }
.lunch-preparations [aria-pressed="true"] .preparation-state svg { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .preparation-state { transition: background 140ms ease, border-color 140ms ease; } .preparation-state svg { transition: opacity 140ms ease; } }
.lunch-preparations [aria-pressed="true"] .preparation-label { border-color: var(--red); }
.lunch-chosen-flavor { display: flex; align-items: center; gap: 16px; justify-content: space-between; margin: 12px 0 28px; }
.lunch-chosen-flavor small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.lunch-chosen-flavor strong { font-size: 15px; font-weight: 400; line-height: 1.7; }
.lunch-chosen-flavor button { flex-shrink: 0; min-height: 44px; color: var(--red); }
.lunch-chosen-flavor strong { display: block; line-height: 1.2; }
.lunch-chosen-flavor .edit-preparation { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
.edit-preparation svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lunch-chosen-flavor > img { object-fit: contain; flex: none; }
.lunch-chosen-flavor > div { flex: 1; }
.category-directory #sheetTitle { margin-bottom: 16px; font-size: 28px; }
#sheet[data-mode="categories"] .sheet-header { position: absolute; top: 8px; right: 8px; padding: 0; background: transparent; border: 0; }
#sheet[data-mode="categories"] .category-directory { padding-top: 24px; }
#sheet[data-mode="categories"] #sheetTitle { padding-right: 44px; margin-top: 0; font-size: 24px; }
.category-directory-list { display: grid; }
.category-directory .category-choice { width: 100%; display: grid; grid-template-columns: 68px minmax(0,1fr) 12px; align-items: center; gap: 16px; padding: 8px 4px; min-height: 80px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.category-directory-photo { display: grid; place-items: center; }
.category-directory-photo img { width: 64px; height: 64px; object-fit: contain; }
.category-directory .category-choice strong { font-size: 22px; }
.category-current { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.category-choice.active .category-current { background: var(--red); }
.category-directory-footer { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; }
.category-directory-footer button { min-height: 44px; font-size: 12px; color: var(--muted); }
.share-link-fallback { display: block; margin-top: 18px; font-size: 12px; color: var(--muted); }
.share-link-fallback input { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 16px; }
html[lang="en"] .category-directory .category-choice strong { font: 400 19px/1.4 var(--sans); }

.lunch-preparations strong {
  display: block;
  font: 400 24px/1.4 var(--serif);
}
.lunch-preparations small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.lunch-preparations [aria-pressed="true"] {
  color: var(--red);
}
.lunch-fillings-title { margin-bottom: 12px; }
.lunch-options { border: 0; padding: 0; margin: 16px 0; min-width: 0; }
.lunch-options legend { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.lunch-options > div { display: flex; flex-wrap: wrap; gap: 8px; }
.lunch-options button { min-height: 44px; white-space: normal; }
.lunch-options .chip.active { background: var(--red); border-color: var(--red); color: var(--paper); }
.detail-portion { margin-top: 20px; color: var(--muted); }
.dish-placeholder .icon { width: 44px; height: 44px; color: var(--muted); opacity: .4; }
/* Menu entries without supplied photos stay compact; no unrelated food photo. */
.chapter-mains .text-dish .dish-open { grid-template-columns: 1fr; }
.chapter-mains .text-dish .dish-image { display: none; }
.chapter-mains .text-dish .dish-info { padding-left: 0; padding-bottom: 42px; }
.menu-section[data-section="drinks"] .text-dish .dish-image { display: none; }
.menu-section[data-section="drinks"] .dish-card { margin-top: 16px; }
.menu-section[data-section="diy"] .dish-name {
  letter-spacing: 0.05em;
}
.menu-section[data-section="diy"] .dish-image {
  aspect-ratio: 1.25;
}
.menu-section[data-section="diy"] .dish-grid {
  row-gap: 34px;
}
.menu-section.chapter-mains .dish-grid {
  grid-template-columns: 1fr;
  gap: 24px;
}
.chapter-mains .dish-open {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  align-items: center;
}
.chapter-mains .dish-image {
  aspect-ratio: 1.1;
}
/* Match visible bowl widths, not the differently padded source canvases.
   Factors measured against the six current noodle assets; no title offsets. */
.chapter-mains .dish-image img { scale: var(--bowl-scale, 1); }
.chapter-mains img[src*="lunch-mince-scallion-noodles-generated-v1-appetite-v1"] { --bowl-scale: 1.025; }
.chapter-mains img[src*="lunch-mince-chilli-noodles-generated-v1-appetite-v1"] { --bowl-scale: .968; }
.chapter-mains img[src*="lunch-kampong-chicken-soup-generated-v1-appetite-v1"] { --bowl-scale: .995; }
.chapter-mains img[src*="hot-oil-noodles-appetite-v2"] { --bowl-scale: 1.077; }
.chapter-mains img[src*="lunch-v2-century-egg-noodles-generated-v1-appetite-v1"] { --bowl-scale: .972; }
.chapter-mains img[src*="lunch-mince-red-oil-noodles-generated-v1-appetite-v1"] { --bowl-scale: .955; }
.chapter-mains .dish-info {
  padding: 12px 28px 12px 14px;
}
.chapter-mains .dish-name {
  font-size: 22px;
}
.chapter-mains .dish-flavor {
  font-family: var(--serif);
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chapter-mains .dish-add {
  right: 0;
  bottom: 14px;
}
.menu-section.chapter-small .dish-image img {
  width: 88%;
  height: 88%;
}
.menu-section.chapter-small .dish-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 14px;
}
.chapter-small .dish-open {
  text-align: left;
}
.chapter-small .dish-info {
  padding: 0 48px 0 0;
}
.chapter-small .dish-add {
  left: auto;
  right: 0;
  bottom: 16px;
}
.chapter-small .dish-name {
  font-size: 17px;
}
.menu-section .dish-add {
  width: 30px;
  height: 30px;
  font-size: 18px;
  font-weight: 400;
  border-color: #e8d1cf;
}
/* The absolute containing block excludes the 1px button border: -8px gives
   a real 44px hit box around the unchanged 30px visual circle. */
.menu-section .dish-add::after { content: ""; position: absolute; inset: -8px; }
/* Keep image intrinsic dimensions out of card height calculations. */
.menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-image {
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-image img {
  position: absolute;
  inset: 0;
  margin: auto;
}
/* Both languages use the original two-column cards. */
/* Neighbouring cards share actual content rows, including wrapped translations.
   Do not use per-dish offsets or fixed title heights to disguise misalignment. */
@supports (grid-template-rows: subgrid) {
  .menu-section:not(.chapter-mains) .dish-grid {
    row-gap: 0;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 7;
    padding-bottom: 0;
    margin-bottom: 24px;
    row-gap: 0;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-column: 1;
    grid-row: 1 / span 6;
    align-items: start;
    row-gap: 0;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-image {
    grid-row: 1;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: 2 / span 5;
    row-gap: 0;
    padding: 0;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-number {
    grid-row: 1;
    line-height: 1.5;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-name {
    grid-row: 2;
    align-self: start;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-english {
    grid-row: 3;
    align-self: start;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-price {
    grid-row: 4;
    align-self: stretch;
    align-content: center;
    min-height: 44px;
    margin-top: 6px;
    padding-right: 48px;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-table-count {
    grid-row: 5;
    margin-top: 0;
  }
  .menu-section:not(.chapter-mains) .dish-card:not(.featured) .dish-add {
    position: relative;
    grid-column: 1;
    grid-row: 5;
    align-self: center;
    justify-self: end;
    inset: auto;
    margin-top: 6px;
  }
  .menu-section.chapter-small .dish-card:not(.featured) .dish-price {
    padding-right: 48px;
  }
  .menu-section.chapter-small .dish-card:not(.featured) .dish-add {
    grid-row: 5;
    justify-self: end;
    margin-top: 6px;
  }
}
@keyframes receipt-ink {
  from {
    opacity: 0;
    transform: rotate(-12deg) scale(1.18);
  }
  to {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
  }
}
@media (max-width: 760px) {
  #sheet[data-mode="cart"][open] {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .cart-scroll {
    padding-inline: 22px;
  }
  .our-table-head h2 {
    font-size: var(--type-title);
  }
  .table-number strong {
    font-size: 30px;
  }
  .cart-dishes[data-layout="table"] {
    gap: 24px 20px;
  }
  .cart-dish-copy strong {
    font-size: 18px;
  }
  .cart-dish-copy small {
    font-size: 10px;
  }
  .cart-unit-price {
    font-size: 12px;
  }
  .cart-quantity button {
    width: 32px;
  }
  .cart-viewbar .receipt-tabs {
    gap: 18px;
  }
  .cart-checkout {
    gap: 16px;
    padding-inline: 22px;
  }
  .cart-checkout strong {
    font-size: 21px;
  }
  .chapter-mains .dish-name {
    font-size: 20px;
  }
  .chapter-mains .dish-english {
    font-size: 10px;
  }
  .chapter-mains .dish-info {
    padding-left: 12px;
  }
}
@media (max-width: 360px) {
  :root { --type-title: 24px; }
  .our-table-head {
    align-items: flex-start;
  }
  .our-table-head h2 {
    font-size: var(--type-title);
  }
  .cart-scroll {
    padding-inline: 17px;
  }
  .table-number strong {
    font-size: 26px;
  }
  .cart-dishes[data-layout="list"] .cart-dish-open {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
  }
  .cart-dishes[data-layout="list"] .cart-photo {
    height: 48px;
  }
  .cart-dishes[data-layout="list"] .cart-author {
    padding-left: 57px;
  }
  .cart-dishes[data-layout="list"] .cart-dish-copy strong {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .menu-section.chapter-small .dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-mode="success"] .receipt-stamp {
    animation: none;
  }
}

/* Recommendation entry and dish options; menu cards keep the original spacing. */
.recommendation-heading { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.section-suggestion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; color: var(--red); font: 400 12px/1.4 var(--sans); white-space: nowrap; }
.section-suggestion > span { font-size: 16px; }
#sheet[data-mode="dish"] #lunchOptions { padding-top: 2px; }
#sheet[data-mode="dish"] .lunch-options .chip { min-height: 44px; border-radius: 6px; }
#sheet[data-mode="dish"] .lunch-options-pieces { margin-top: 12px; margin-bottom: 20px; }
#sheet[data-mode="dish"] .lunch-options-pieces > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#sheet[data-mode="dish"] .lunch-options-pieces .chip { padding-inline: 8px; }

/* Ordering controls are isolated from menu-card geometry. */
.fulfilment-switch { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 8px; min-height: 44px; padding: 0 13px; border: 1px solid #e8d1cf; border-radius: 999px; background: #fcf7f6; color: var(--red); font: 400 13px/1.2 var(--sans); white-space: nowrap; }
.fulfilment-switch svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fulfilment-mode-icon { display: block; flex: none; width: 32px; height: 28px; object-fit: contain; }
.fulfilment-chevron { width: 14px; height: 14px; }
.fulfilment-switch:hover { border-color: var(--red); }
.fulfilment-switch { position: relative; isolation: isolate; min-height: 44px; padding-inline: 10px; gap: 5px; border: 0; background: transparent; font-size: 12px; }
.fulfilment-switch::before { content: ''; position: absolute; inset: 4px 0; z-index: -1; border: 1px solid #e8d1cf; border-radius: 999px; background: #fcf7f6; }
.fulfilment-switch:hover::before { border-color: var(--red); }
.fulfilment-mode-icon { width: 24px; height: 24px; }
.fulfilment-chevron { width: 12px; height: 12px; }
.fulfilment-switch:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.dinein-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1316px; margin: auto; padding: 4px 20px; background: #fff; }
.dinein-controls .table-button { border: 0; border-radius: 0; background: transparent; padding: 0 4px; gap: 8px; font-size: 12px; color: var(--muted); }
.dinein-controls .table-button::after { content: ''; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); margin: -3px 4px 0 2px; }
.dinein-controls .table-button b { font-size: 13px; color: var(--red); }
.dinein-controls .icon-button { color: var(--muted); }
.dinein-controls[hidden] { display: none; }
.header-actions #serviceButton[hidden] { display: none; }
.entry-change-table { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 4px 0; margin-top: 12px; border-top: 1px solid var(--line); color: var(--red); font: 400 13px/1.5 var(--sans); }
@media (max-width: 760px) {
  .masthead { padding-inline: 16px; }
  .masthead .brand img { width: 100px; }
  .header-actions { gap: 0; }
  .header-actions .fulfilment-switch { padding-inline: 8px; gap: 5px; font-size: 12px; }
  .header-actions .fulfilment-mode-icon { width: 24px; height: 24px; }
  .header-actions .language-button { inset-inline-start: 8px; padding-inline: 4px; }
}
@media (max-width: 360px) {
  .masthead { padding-inline: 10px; gap: 4px; }
  .header-actions .language-button { inset-inline-start: 6px; }
  .masthead .brand img { width: 76px; }
  .header-actions .fulfilment-switch { padding-inline: 6px; gap: 4px; font-size: 11px; }
}
@media (max-width: 360px) { .fulfilment-switch { padding-inline: 10px; gap: 6px; font-size: 12px; } }
.fulfilment-content { padding: 4px 22px 28px; }
/* Order-type selection is a centered dialog, not a mobile bottom sheet. */
#sheet[data-mode="fulfilment"], #sheet[data-mode="pickup"] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  height: fit-content;
  max-height: calc(100dvh - 32px);
  border-radius: 22px;
  overflow-y: auto;
  animation: none;
}
.fulfilment-content h2 { font: 500 26px/1.35 var(--sans); margin: 0 0 20px; }
.fulfilment-content h2:focus { outline: none; }
.fulfilment-content > p { font: 400 14px/1.6 var(--sans); }
.fulfilment-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.fulfilment-choices button { display: flex; flex-direction: column; align-items: start; gap: 10px; text-align: left; padding: 22px 16px; border: 1px solid var(--line); border-radius: 12px; min-height: 128px; }
.fulfilment-choices button:hover { border-color: var(--red); }
.fulfilment-choices strong { font: 500 18px/1.35 var(--sans); }
.fulfilment-choices small { font: 400 12px/1.5 var(--sans); color: var(--muted); }
/* A corner box for the close button. It also carries the language control on
   the entry sheet, so it grows with its contents instead of clamping to 44px. */
#sheet[data-mode="fulfilment"].plain-heading .sheet-header { position: absolute; top: 10px; right: 10px; width: auto; min-width: 44px; height: 44px; gap: 2px; padding: 0; background: transparent; }
.fulfilment-entry { --entry-red: #e51b00; padding: 26px 24px 16px; }
.fulfilment-entry h2 { padding-right: 96px; margin-bottom: 22px; font-size: 24px; }
.fulfilment-entry .entry-copy { display: grid; gap: 4px; min-width: 0; }
.fulfilment-entry .entry-copy > [lang] { display: block; white-space: normal; overflow-wrap: normal; }
.fulfilment-entry .entry-en { font: 400 12px/1.4 var(--sans); }
.fulfilment-entry h2 .entry-en { margin-top: 3px; font-size: 14px; color: var(--muted); }
.entry-choices strong .entry-en { color: var(--ink); }
.entry-choices small .entry-en { font-size: 11px; }
.entry-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.entry-choices button { position: relative; align-items: center; gap: 0; padding: 10px 6px 16px; border: 1px solid transparent; border-radius: 14px; background: transparent; text-align: center; min-width: 0; }
.entry-choices button:hover { border-color: transparent; background: transparent; }
.entry-choices .entry-art { display: block; width: 100%; max-width: 190px; height: auto; aspect-ratio: 260 / 220; object-fit: contain; margin-bottom: 0; pointer-events: none; }
.entry-choices strong { font-size: clamp(15px, 4.3vw, 21px); font-weight: 500; white-space: nowrap; }
.entry-choices small { max-width: 100%; min-height: 36px; text-wrap: balance; }
.entry-choices button:hover strong { color: var(--entry-red); }
.entry-choices button:focus-visible { outline: 2px solid var(--entry-red); outline-offset: -3px; border-radius: 12px; }
.fulfilment-entry .delivery-entry { margin-top: 0; color: var(--entry-red); padding-inline: 4px; }
@media (max-width: 360px) {
  .fulfilment-entry { padding-inline: 16px; }
  .fulfilment-entry h2 { font-size: 23px; }
  .entry-choices button { padding-inline: 4px; }
  .entry-choices strong { font-size: 15px; }
  .entry-choices small { font-size: 11px; }
}
.delivery-entry { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-top: 16px; padding: 12px 2px; border-top: 1px solid var(--line); color: var(--red); font: 400 14px/1.4 var(--sans); }
.online-policy { color: var(--muted); }
.pickup-location { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
/* Preserve the approved progress design independently of the menu theme. */
#sheet[data-mode="pickup"] { --ink: #242424; --muted: #686765; --line: #d4d4d1; --red: #bd3023; border-radius: 8px; border-top: 4px solid var(--red); }
#sheet[data-mode="pickup"] .primary { border-radius: 4px; }
.pickup-ticket { --ink: #242424; --muted: #686765; --line: #d4d4d1; --progress-red: #bd3023; margin: 20px 0; padding: 26px 0 0; border-top: 1px solid var(--line); font-family: var(--sans); }
.pickup-ticket .pickup-number { display: grid; justify-items: center; gap: 4px; text-align: center; }
.pickup-number > span { color: var(--ink); font-size: 13px; font-weight: 500; }
.pickup-number > small { color: var(--muted); font-size: 10px; letter-spacing: .15em; }
.pickup-number > strong { max-width: 100%; margin-top: 8px; color: var(--progress-red); font: 500 clamp(44px,12vw,64px)/1.15 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pickup-success h2 { font-size: 22px; }
.pickup-success .pickup-ticket { margin-top: 16px; }
.pickup-progress { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; margin: 28px 0 0; padding: 0; }
.pickup-progress li { position: relative; min-width: 0; text-align: center; color: #817d78; font: 400 11px/1.5 var(--sans); }
.pickup-progress li:not(:last-child)::after { content: ''; position: absolute; top: 38px; left: 82%; width: 36%; border-top: 1px dashed #ccc8c3; }
.pickup-progress .progress-art { position: relative; display: block; width: min(100%,86px); height: 80px; margin: 0 auto 10px; color: #aaa49d; transform: scale(.72); transform-origin: 50% 50%; }
.pickup-progress .progress-label { display: block; font-size: 13px; }
.pickup-progress small { display: block; margin-top: 3px; font-size: 10px; white-space: nowrap; }
.pickup-progress [aria-current="step"] .progress-label { font-weight: 600; }
.pickup-progress [aria-current="step"], .pickup-progress [aria-current="step"] .progress-art { color: var(--progress-red); }
.pickup-progress .is-complete::after { border-color: #c59c94; }
.pickup-progress .progress-art img { display: block; width: 100%; height: 80px; object-fit: contain; filter: grayscale(1); opacity: .48; }
.pickup-progress [aria-current="step"] .progress-art img { filter: none; opacity: 1; }
.pickup-progress .progress-art:has(.progress-generated-icon) { width: min(100%, 80px); transform: none; }
.pickup-progress .progress-art .progress-generated-icon { height: 80px; padding: 5px; filter: grayscale(1); opacity: .6; }
.pickup-progress .is-complete .progress-generated-icon { filter: none; opacity: .7; }
.pickup-progress [aria-current="step"] .progress-generated-icon { filter: none; opacity: 1; }
/* Freshly printed branded slip; preparation restores the preferred pot.
   Bag and completion artwork are deliberately unchanged. */
.progress-order-slip { --slip-edge: polygon(0 0,100% 0,100% 95%,90% 100%,80% 95%,70% 100%,60% 95%,50% 100%,40% 95%,30% 100%,20% 95%,10% 100%,0 95%); position: absolute; width: 46px; height: 64px; top: 8px; left: calc(50% - 25px); transform: rotate(-7deg); }
.progress-order-slip::before { content: ''; position: absolute; inset: 0; background: currentColor; clip-path: var(--slip-edge); }
.progress-order-slip::after { content: ''; position: absolute; inset: 1.4px 1.4px 1.8px; background: white; clip-path: var(--slip-edge); }
.progress-slip-logo { position: absolute; z-index: 1; top: 8px; left: 6px; width: 34px; height: 12px; background: currentColor; mask: url('/brand/order-packaging-lockup.svg') center / contain no-repeat; }
.progress-slip-items { position: absolute; z-index: 1; top: 27px; left: 8px; width: 23px; height: 14px; background: repeating-linear-gradient(to bottom,currentColor 0 1.4px,transparent 1.4px 6px); }
.progress-slip-items::before { content: ''; position: absolute; top: -4px; left: -2px; width: 34px; border-top: 1px dotted currentColor; opacity: .65; }
.progress-slip-items::after { content: ''; position: absolute; top: 0; left: 28px; width: 4px; height: 14px; background: inherit; }
.progress-slip-stamp { position: absolute; z-index: 2; width: 26px; height: 26px; right: -8px; bottom: 3px; background: white; border-radius: 50%; transform: rotate(17deg); }
.progress-slip-stamp::before { content: ''; position: absolute; inset: 0; background: currentColor; mask: url('/brand/order-complete-seal.svg') center / contain no-repeat; }
.progress-pot { position: absolute; isolation: isolate; width: 49px; height: 29px; left: calc(50% - 24.5px); bottom: 12px; border: 2px solid currentColor; border-radius: 3px 3px 17px 17px; background: #fff; box-shadow: inset 0 -6px 0 #f3efeb; }
.progress-pot::before { content: ''; position: absolute; width: 61px; height: 10px; top: 3px; left: -8px; border: 2px solid currentColor; border-radius: 5px; z-index: -1; }
.progress-pot::after { content: ''; position: absolute; inset: -6px -2px auto; height: 11px; border: 2px solid currentColor; border-radius: 50%; background: #fff; }
.progress-pot em { position: absolute; z-index: 1; width: 13px; height: 16px; top: -11px; background: currentColor; mask: url('/brand/dumpling-symbol.svg') center / contain no-repeat; transform: rotate(75deg); }
.progress-pot em:nth-child(1) { left: 2px; }
.progress-pot em:nth-child(2) { left: 16px; top: -14px; }
.progress-pot em:nth-child(3) { left: 30px; }
.progress-steam { position: absolute; top: 11px; left: calc(50% - 1px); width: 5px; height: 17px; border-left: 1.5px solid currentColor; border-radius: 50%; }
.progress-steam::before, .progress-steam::after { content: ''; position: absolute; top: 4px; width: 5px; height: 14px; border-left: 1.5px solid currentColor; border-radius: 50%; }
.progress-steam::before { left: -14px; }
.progress-steam::after { left: 12px; }
.pickup-progress [aria-current="step"] .progress-pot { background: var(--progress-red); box-shadow: none; }
.progress-brand-bag { position: absolute; width: 55px; height: 49px; top: 24px; left: calc(50% - 27.5px); border: 1px solid currentColor; background: #fff; transform: rotate(-5deg); }
.progress-brand-bag::before { content: ''; position: absolute; width: 23px; height: 22px; top: -21px; left: 14px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 11px 11px 0 0; }
.progress-brand-bag::after { content: ''; position: absolute; top: 0; left: 24px; width: 6px; height: 8px; background: currentColor; }
.progress-bag-lockup { position: absolute; width: 43px; height: 16px; top: 20px; left: 3px; background: currentColor; mask: url('/brand/order-packaging-lockup.svg') center / contain no-repeat; }
.progress-bag-fold { position: absolute; inset: 0 0 0 auto; width: 5px; border-left: 1px solid currentColor; background: currentColor; opacity: .16; }
.progress-seal { position: absolute; width: 62px; height: 62px; top: 9px; left: calc(50% - 31px); background: currentColor; mask: url('/brand/order-complete-seal.svg') center / contain no-repeat; }
.pickup-status { margin: 22px 0 0; padding: 15px 10px; text-align: center; background: #f8f7f5; }
.pickup-ticket[data-stage="ready"] .pickup-status { background: #fcf1ed; }
.pickup-status b { display: block; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink); }
.pickup-ticket[data-stage="ready"] .pickup-status b { color: var(--progress-red); }
.pickup-status small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.pickup-code { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pickup-code .pickup-qr { display: block; flex-shrink: 0; width: 112px; height: 112px; }
.pickup-code > div { min-width: 0; }
.pickup-code span { display: block; color: var(--ink); font-size: 13px; }
.pickup-code small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.pickup-code--collected { flex-direction: column; gap: 0; }
@media (max-width:360px) {
  .pickup-progress .progress-label { font-size: 12px; }
  .pickup-progress small { font-size: 9px; }
  .pickup-progress .progress-art { transform: scale(.64); }
  .pickup-progress li:not(:last-child)::after { left: 90%; width: 20%; }
  .pickup-code { gap: 12px; }
  .pickup-code .pickup-qr { width: 96px; height: 96px; }
}
.online-fields { display: grid; gap: 18px; margin-top: 24px; }
.online-field { display: grid; gap: 8px; min-width: 0; font: 400 14px/1.4 var(--sans); }
.online-field input, .online-field select { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.online-field :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.fulfilment-content .field-error { color: var(--red); font: 400 13px/1.6 var(--sans); margin: 18px 0; }
.fulfilment-content .field-error:empty { display: none; }
.fulfilment-content .primary { width: 100%; margin: 20px 0 0; min-height: 50px; font: 500 16px/1.4 var(--sans); }
.online-back { min-height: 44px; display: block; width: 100%; margin-top: 12px; text-align: center; color: var(--muted); }
.payment-breakdown { display: grid; gap: 12px; margin: 24px 0; font: 400 14px/1.5 var(--sans); }
.payment-breakdown > div { display: flex; justify-content: space-between; gap: 16px; }
.payment-breakdown dd { margin: 0; white-space: nowrap; }
.payment-breakdown dt { color: var(--muted); }
.payment-breakdown .payment-total { border-top: 1px solid var(--line); padding-top: 16px; font-size: 20px; color: var(--red); }
.payment-total dt { color: inherit; }
.online-review-items > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.5 var(--sans); }
.online-review-items small { display: block; color: var(--muted); font-size: 12px; }
.online-review-items b { font-weight: 400; white-space: nowrap; }
/* A single order journey: fixed navigation, independently scrolling content,
   and a payment dock that never covers the last field. Menu geometry is untouched. */
#sheet[data-mode="online"], #sheet[data-mode="pickup"], #sheet[data-mode="success"]:has(.order-result) {
  --order-accent: #b5232b;
  position: fixed; inset: 0; margin: auto;
  width: min(560px, calc(100% - 32px)); max-width: calc(100% - 32px);
  height: min(880px, 94dvh); max-height: 94dvh;
  border: 0; border-radius: 16px; overflow: hidden; background: #fff;
  animation: none;
}
#sheet[open][data-mode="online"], #sheet[open][data-mode="pickup"], #sheet[open][data-mode="success"]:has(.order-result) { display: flex; flex-direction: column; }
#sheet:is([data-mode="online"], [data-mode="pickup"], [data-mode="success"]:has(.order-result)) .sheet-header {
  position: relative; inset: auto; flex: none; width: auto; height: auto;
  min-height: 64px; padding: 8px 18px 8px 24px;
  justify-content: space-between; background: #fff; border-bottom: 1px solid #eeece9;
}
#sheet:is([data-mode="online"], [data-mode="pickup"], [data-mode="success"]:has(.order-result)) #sheetEyebrow {
  display: block; color: var(--ink); font: 500 19px/1.3 var(--sans); letter-spacing: 0; text-transform: none;
}
#sheet:is([data-mode="online"], [data-mode="pickup"], [data-mode="success"]:has(.order-result)) #sheetBody { flex: 1; min-height: 0; overflow: hidden; }
#sheet .checkout-page, #sheet .order-result { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; font-family: var(--sans); }
.checkout-scroll, .order-result-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 20px; background: #f5f4f2; }
.checkout-location { display: flex; align-items: center; gap: 16px; padding: 24px; background: #fff; }
.checkout-location > img { flex: none; width: 44px; height: 40px; object-fit: contain; }
.checkout-location > div { min-width: 0; }
.checkout-location .eyebrow { color: var(--order-accent); font-size: 10px; letter-spacing: .14em; margin: 0 0 6px; }
.checkout-location h3 { font-size: 20px; font-weight: 500; margin: 0; line-height: 1.4; }
.checkout-location p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.checkout-block { padding: 22px 24px; margin-top: 8px; background: #fff; }
.checkout-block h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.checkout-block h3 small { font-size: 11px; color: var(--muted); font-weight: 400; }
.checkout-text-action { min-height: 44px; padding: 0 4px 0 12px; margin-block: -10px; color: var(--order-accent); font: 400 13px var(--sans); }
.checkout-lines article { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.checkout-lines article + article { border-top: 1px solid #f0efec; }
.checkout-lines article:first-child { padding-top: 0; }
.checkout-lines article:last-child { padding-bottom: 0; }
.checkout-lines img { flex: none; width: 80px; height: 80px; object-fit: contain; background: #faf9f7; border-radius: 6px; }
.checkout-lines article > div { flex: 1; min-width: 0; }
.checkout-lines strong { display: block; font-size: 15px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.checkout-lines small { display: block; color: var(--muted); margin-top: 5px; font-size: 12px; line-height: 1.4; }
.checkout-lines b { align-self: flex-start; padding-top: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-note { margin: 18px 0 0; padding: 12px 14px; border-left: 2px solid #d7b0a6; background: #faf7f4; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.checkout-addons { background: #fcf9f6; }
.checkout-addons h3 { color: var(--order-accent); }
.checkout-addon-list { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
.checkout-addon-list::-webkit-scrollbar { display: none; }
.checkout-addon { display: flex; flex-direction: column; flex: 0 0 138px; min-width: 0; scroll-snap-align: start; }
.checkout-addon-photo { background: #f3eee8; border-radius: 8px; overflow: hidden; }
.checkout-addon img { display: block; width: 100%; height: 110px; padding: 6px; object-fit: contain; }
.checkout-addon > strong { display: block; flex: 1; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 8px 0 0; overflow-wrap: anywhere; }
.checkout-addon > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.checkout-addon button { position: relative; flex: none; width: 44px; height: 44px; padding: 0; color: #fff; background: transparent; border: 0; border-radius: 3px; font-size: 0; }
/* The 26px artwork is separate from the 44px touch target. The button's
   existing aria-label names the dish; CSS draws a consistently fine plus. */
.checkout-addon button::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid #d9b7b0; background: transparent; pointer-events: none; }
.checkout-addon button::after { content: ''; position: absolute; width: 12px; height: 12px; top: 16px; left: 16px; color: var(--red); background: linear-gradient(currentColor,currentColor) center / 12px 1px no-repeat, linear-gradient(currentColor,currentColor) center / 1px 12px no-repeat; pointer-events: none; }
.checkout-addon button:focus-visible { outline: 2px solid var(--order-accent); outline-offset: 1px; }
.checkout-addon button:disabled { opacity: .45; }
/* Reference-led add-ons: square product scenes, centered captions, small
   standalone pluses; the selection popup reuses exactly the same artwork. */
.checkout-block.addon-reference { --order-accent: #e51b00; position: relative; padding: 0 20px 14px; background: #fff; }
.addon-section-head { position: relative; min-height: 90px; display: flex; align-items: center; padding-right: 120px; }
.addon-section-head > div { position: relative; z-index: 1; }
.addon-kicker { display: none; }
.addon-open { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; color: #302a24; }
.addon-section-head h3 { display: block; margin: 0; }
.addon-open { font: 500 20px/1.3 var(--sans); }
dl-serving-motion { display: inline-block; width: 24px; height: 24px; flex: none; }
/* Motion stays on artwork: all tap targets, captions and prices stay still. */
@media (prefers-reduced-motion: no-preference) {
  .dish-image, .detail-image, .addon-scene { perspective: 750px; }
  .dish-image > img, .detail-image > img, .addon-scene > img { transition: transform 220ms cubic-bezier(.22,.72,.18,1), filter 220ms ease; }
  .dish-open .food-depth-active > img, .detail-image.food-depth-active > img, .addon-scene.food-depth-active > img { transform: rotateX(var(--food-rx,0deg)) rotateY(var(--food-ry,0deg)) translateZ(10px); filter: drop-shadow(var(--food-sx,0px) var(--food-sy,6px) 6px #37221924); }
  /* Detail playback is owned by dl-dish-serving, including mobile and replay. */
  .addon-dialog[open] .addon-popup-card { animation: dl-card-open 280ms cubic-bezier(.22,.72,.18,1) both; }
  .addon-dialog[open] .addon-popup-head > img { animation: dl-box-arrive 540ms cubic-bezier(.22,.72,.18,1) both; }
  .addon-dialog[open] .addon-popup-row { animation: dl-row-reveal 360ms cubic-bezier(.22,.72,.18,1) both; }
  .addon-popup-row:nth-child(2) { animation-delay: 60ms!important; }
  .addon-popup-row:nth-child(3) { animation-delay: 120ms!important; }
  .addon-popup-row:nth-child(4) { animation-delay: 180ms!important; }
  .addon-select input:checked + span::after { animation: dl-check-draw 180ms ease-out both; }
  .addon-small-button:active::before { transform: scale(.9); }
  .pickup-ticket:not([data-motion-settled]) [aria-current="step"] .progress-order-slip { animation: dl-slip-print 520ms cubic-bezier(.22,.72,.18,1) both; }
  .pickup-ticket:not([data-motion-settled]) [aria-current="step"] .progress-steam { animation: dl-steam-rise 1800ms ease-out 2; }
  .pickup-ticket:not([data-motion-settled]) [aria-current="step"] .progress-steam::before { animation: dl-steam-rise 1800ms 200ms ease-out 2; }
  .pickup-ticket:not([data-motion-settled]) [aria-current="step"] .progress-steam::after { animation: dl-steam-rise 1800ms 400ms ease-out 2; }
  .pickup-ticket:not([data-motion-settled]) [aria-current="step"] .progress-brand-bag { transform-origin: 50% -10px; animation: dl-bag-lift 900ms cubic-bezier(.22,.72,.18,1) both; }
  .pickup-ticket:not([data-motion-settled]) [aria-current="step"] .progress-seal { animation: dl-seal-press 440ms cubic-bezier(.22,.72,.18,1) both; }
  .order-brand-banner > img:first-child { animation: dl-banner-reveal 500ms cubic-bezier(.22,.72,.18,1) both; }
  .order-brand-banner .order-banner-logo { animation: dl-brand-ink 400ms 160ms ease-out both; }
}
@keyframes dl-plate-arrive { from { transform: perspective(750px) translateY(36px) rotateX(10deg) scale(.94); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes dl-card-open { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dl-box-arrive { from { transform: translate(10px,8px) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dl-row-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dl-check-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes dl-slip-print { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
@keyframes dl-steam-rise { 0% { opacity: .2; translate: 0 4px; } 65% { opacity: .85; } 100% { opacity: .15; translate: 1px -6px; } }
@keyframes dl-bag-lift { 0% { transform: rotate(-5deg); } 35% { transform: translateY(-3px) rotate(2deg); } 100% { transform: rotate(-5deg); } }
@keyframes dl-seal-press { from { transform: scale(1.12) rotate(-6deg); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes dl-banner-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes dl-brand-ink { from { opacity: 0; } to { opacity: 1; } }
.detail-steam { display: none; position: absolute; pointer-events: none; left: 38%; top: 19%; width: 24%; height: 25%; z-index: 1; }
.detail-steam i { position: absolute; left: 10%; bottom: 0; width: 16%; height: 75%; border-left: 3px solid #c9b8a08c; border-radius: 50%; filter: blur(2px); opacity: 0; }
.detail-steam i:nth-child(2) { left: 44%; height: 95%; }
.detail-steam i:nth-child(3) { left: 78%; height: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .detail-image.is-served[data-heat="hot"] .detail-steam { display: block; }
  #sheet[data-mode="dish"] .detail-top { animation: dl-row-reveal 480ms 140ms cubic-bezier(.22,.72,.18,1) backwards; }
}
@keyframes dl-detail-steam { 0% { transform: translateY(10px) scaleX(.7); opacity: 0; } 35% { opacity: .7; } 100% { transform: translateY(-28px) scaleX(1.15); opacity: 0; } }
/* Keep the original large photo sharp, with room for the arriving plate. */
#sheet[data-mode="dish"] .detail-image { height: 280px; background: radial-gradient(ellipse at 50% 60%,#fff7eb 0,transparent 66%); }
#sheet[data-mode="dish"] .detail-image > img { width: 96%; height: 96%; object-fit: contain; }
#sheet[data-mode="dish"] .detail-image.image-unavailable dl-dish-serving { display: none; }
/* New food art already contains a contact shadow on white; do not shadow
   its rectangular bitmap or place a cream rectangle behind it. */
img[src*="-appetite-v"] { filter: none !important; }
#sheet[data-mode="dish"] .detail-image:has(img[src*="-appetite-v"]) { background: none; }
@media (prefers-reduced-motion: reduce) {
  .dish-image > img, .detail-image > img, .addon-scene > img { animation: none; transition: none; transform: none; }
}
.addon-thumb { display: inline-block; flex: none; width: 20px; height: 20px; background: #e51b00; font-size: 0; mask: url('/brand/dumpling-symbol.svg') center / contain no-repeat; }
.addon-header-art { position: absolute; width: 126px; height: 88px; right: 0; top: 0; object-fit: contain; pointer-events: none; }
.addon-reference .checkout-addon-list { gap: 14px; margin-right: -20px; padding: 0 20px 0 0; }
.addon-reference .checkout-addon { flex-basis: calc((100% - 28px)/3.15); min-width: 94px; max-width: 150px; align-items: center; text-align: center; }
.addon-scene { position: relative; flex: none; width: 100%; aspect-ratio: 1; background: #fef6e6; overflow: hidden; }
.addon-scene img, .checkout-addon .addon-scene img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border-radius: 0; object-fit: cover; filter: none; }
.addon-reference .checkout-addon > strong { width: 100%; font-size: 13px; line-height: 1.4; font-weight: 400; margin: 10px 0 6px; }
.addon-price { display: block; font-size: 14px; line-height: 1.4; color: #302a24; font-variant-numeric: tabular-nums; }
.addon-reference .checkout-addon button { margin-top: 3px; }
.addon-dialog { --order-accent: #e51b00; position: fixed; inset: 0; width: min(370px,calc(100vw - 64px)); max-width: none; height: fit-content; max-height: none; margin: auto; padding: 0 0 58px; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; font-family: var(--sans); color: #302a24; }
.addon-dialog[open] { display: block; animation: none; }
.addon-dialog::backdrop { background: rgb(0 0 0 / 42%); }
.addon-popup-card { position: relative; display: flex; flex-direction: column; height: min(510px,calc(100dvh - 160px)); min-height: 260px; background: white; border-radius: 8px; }
.addon-popup-head { position: relative; flex: none; display: flex; align-items: center; min-height: 96px; padding: 12px 126px 12px 20px; border-radius: 8px 8px 0 0; background: #fff; overflow: hidden; }
.addon-popup-head h2 { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; margin: 0; font: 500 20px/1.3 var(--sans); color: #302a24; }
.addon-popup-head h2:focus { outline: none; }
.addon-popup-head > img { position: absolute; width: 120px; height: 94px; right: 6px; top: 0; object-fit: contain; pointer-events: none; }
.addon-popup-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 14px 20px 12px; scroll-padding-block: 14px; mask-image: linear-gradient(#000 calc(100% - 15px),transparent); }
.addon-popup-list::-webkit-scrollbar { display: none; }
.addon-popup-row { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 13px; padding: 0; margin: 0 0 16px; }
.addon-popup-row:last-child { margin-bottom: 0; }
.addon-popup-copy { min-width: 0; }
.addon-popup-copy h3 { margin: 0 0 7px; color: #302a24; font: 400 14px/1.4 var(--sans); overflow-wrap: anywhere; }
.addon-category { font-size: 10px; line-height: 1.4; color: #9a6330; }
.addon-popup-price { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 4px; }
.addon-popup-price strong { font: 500 15px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.addon-select { display: block; position: relative; flex: none; width: 44px; height: 44px; margin: -6px -9px -6px 0; cursor: pointer; }
.addon-select input { position: absolute; inset: 0; z-index: 1; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.addon-select > span { position: absolute; inset: 7px; border: 1px solid #d9b7b0; border-radius: 50%; background: transparent; color: var(--red); }
.addon-select > span::after { content: ''; position: absolute; inset: 8px; background: linear-gradient(currentColor,currentColor) center / 12px 1px no-repeat,linear-gradient(currentColor,currentColor) center / 1px 12px no-repeat; }
.addon-select input:checked + span { background: var(--red); border-color: var(--red); }
.addon-select input:checked + span::after { inset: 6px 6px 8px; background: none; border: solid white; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.addon-select input:focus-visible + span { outline: 2px solid var(--order-accent); outline-offset: 3px; }
.addon-select input:disabled + span { opacity: .45; }
.addon-popup-footer { flex: none; padding: 12px 20px 20px; }
.addon-apply { display: block; width: 100%; min-height: 48px; padding: 12px 8px; border: 0; border-radius: 0; background: var(--order-accent); color: #fff; font: 500 15px/1.4 var(--sans); text-transform: uppercase; }
.addon-apply:disabled { background: #f1f1f1; color: #777; cursor: default; opacity: 1; }
.addon-skip { display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 8px; color: var(--red); font: 400 14px/1.4 var(--sans); }
.addon-popup-error { margin: 0 0 10px; color: var(--order-accent); font: 400 12px/1.5 var(--sans); }
.addon-popup-error:empty { display: none; }
.addon-dismiss { position: absolute; bottom: 0; left: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff99; border-radius: 50%; color: #fff; background: transparent; font: 300 29px/1 var(--sans); }
.addon-dismiss:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width:360px) {
  .addon-dialog { width: calc(100vw - 40px); }
  .addon-popup-head { padding-left: 16px; padding-right: 114px; }
  .addon-popup-footer { padding-inline: 16px; }
  .addon-popup-list { padding-inline: 16px; }
  .addon-popup-row { grid-template-columns: 76px minmax(0,1fr); gap: 12px; }
  .addon-popup-head > img { width: 108px; right: 4px; }
}
.checkout-totals .payment-breakdown { margin: 0; gap: 10px; font-size: 13px; }
.checkout-totals .payment-total { font-size: 17px; padding-top: 14px; color: var(--ink); font-weight: 500; }
.checkout-payment { padding-bottom: 28px; }
.checkout-continue { display: block; min-height: 44px; width: 100%; padding: 12px 20px; text-align: center; color: var(--red); font: 400 13px/1.5 var(--sans); background: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cancel-payment-dialog { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(560px, 100%); max-width: 100%; padding: 28px 22px calc(22px + env(safe-area-inset-bottom)); border: 0; border-radius: 18px 18px 0 0; background: #fff; color: var(--ink); }
.cancel-payment-dialog::backdrop { background: #0007; }
.cancel-payment-dialog h2 { margin: 0 0 16px; font: 500 21px/1.4 var(--sans); }
.cancel-payment-dialog p { margin: 0 0 26px; font: 400 15px/1.6 var(--sans); }
.cancel-payment-dialog > div { display: flex; gap: 10px; }
.cancel-payment-dialog button { flex: 1; min-height: 48px; padding: 10px; font: 500 14px/1.4 var(--sans); border: 1px solid var(--red); border-radius: 6px; color: var(--red); }
.cancel-payment-dialog button.primary { background: var(--red); color: #fff; }
.checkout-page .fineprint { font: 400 12px/1.6 var(--sans); color: var(--muted); }
.checkout-email { margin-top: 24px; font-size: 13px; }
.checkout-email input { background: #faf9f7; border-color: #e5e1dc; border-radius: 8px; }
.checkout-paybar { flex: none; background: #fff; padding: 12px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #eeece9; z-index: 2; }
.checkout-pay-note { margin: 0 0 10px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.5; }
.checkout-paybar .primary { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 14px 18px; border-radius: 8px; background: var(--order-accent); color: white; font: 500 16px/1.4 var(--sans); }
.checkout-paybar [data-stripe-total] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-paybar .primary:disabled { opacity: .5; cursor: wait; }
.checkout-page .field-error { margin: 0 0 12px; font: 400 13px/1.5 var(--sans); color: var(--order-accent); overflow-wrap: anywhere; }
.checkout-paybar .field-error { max-height: 86px; overflow-y: auto; }
.checkout-page .field-error:empty { display: none; }
.checkout-demo { padding: 16px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; }
.checkout-recovery, .checkout-loading { padding: 32px 24px; background: #fff; }
.checkout-recovery h2 { margin: 12px 0 20px; font-size: 23px; }
.checkout-recovery .primary { width: 100%; margin-top: 20px; border-radius: 8px; min-height: 52px; }
.checkout-loading { text-align: center; padding-top: 64px; }
.checkout-loading > p { font-size: 16px; }
.checkout-loader { display: block; width: 28px; height: 28px; margin: 0 auto 20px; border: 2px solid #eee4de; border-top-color: var(--order-accent); border-radius: 50%; animation: checkout-spin 1s linear infinite; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .checkout-loader { animation: none; } }
.order-result .pickup-ticket { margin: 0; padding: 28px 20px 0; border-top: 0; background: #fcf9f6; }
.order-result .pickup-number > strong { font-size: clamp(44px, 12vw, 60px); }
.order-result .pickup-status { margin-inline: -20px; padding: 16px 20px; }
.order-result .pickup-code { margin-inline: -20px; padding: 22px 20px; border: 0; background: #fff; }
.order-result .pickup-code .pickup-qr { width: 104px; height: 104px; }
.order-result .checkout-block { margin-top: 8px; }
.order-brand-banner { position: relative; margin: 16px 20px; overflow: hidden; aspect-ratio: 3 / 1; background: #fef6e6; }
.order-brand-banner > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.order-brand-banner .order-banner-dish { position: absolute; left: 44%; top: 0; width: 36%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 4px rgb(65 37 15 / .12)); pointer-events: none; }
.order-brand-banner .order-banner-logo { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); width: 30%; height: auto; }
.order-banner-pattern { position: absolute; inset: 0; pointer-events: none; }
.order-banner-pattern i { position: absolute; width: 6%; aspect-ratio: 58 / 76; background: #e51b00; opacity: .08; mask: url('/brand/dumpling-symbol.svg') center / contain no-repeat; }
.order-banner-pattern i:nth-child(1) { left: 3%; top: 5%; transform: rotate(-25deg); }
.order-banner-pattern i:nth-child(2) { left: 27%; top: -6%; transform: rotate(28deg); }
.order-banner-pattern i:nth-child(3) { left: 8%; top: 70%; transform: rotate(-12deg); }
.order-banner-pattern i:nth-child(4) { left: 34%; top: 70%; transform: rotate(22deg); }
.order-banner-pattern i:nth-child(5) { left: 43%; top: 3%; transform: rotate(-24deg); }
.order-banner-pattern i:nth-child(6) { left: 93%; top: 4%; transform: rotate(20deg); }
.order-result .payment-breakdown { margin-bottom: 0; }
.order-result .payment-total { font-size: 17px; }
.order-result-meta { display: grid; gap: 12px; font-size: 12px; line-height: 1.5; margin: 0; }
.order-result-meta > div { display: flex; justify-content: space-between; gap: 20px; }
.order-result-meta dt { color: var(--muted); flex: none; }
.order-result-meta dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.order-result-footer { flex: none; padding: 14px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #eeece9; background: #fff; }
.order-result-footer .primary { width: 100%; min-height: 48px; margin: 0; border-radius: 8px; }
.dinein-paid { padding: 28px 24px; text-align: center; background: #fcf9f6; }
.dinein-paid > img { width: 42px; height: 42px; margin: 0 auto 12px; }
.dinein-paid .eyebrow { margin: 0 0 6px; color: var(--order-accent); }
.dinein-paid > strong { display: block; font: 500 48px/1.2 var(--sans); color: var(--order-accent); }
.dinein-paid > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 680px) {
  #sheet[data-mode="online"], #sheet[data-mode="pickup"], #sheet[data-mode="success"]:has(.order-result) {
    inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0;
  }
  html.keyboard-open #sheet[data-mode="online"] { top: var(--visible-top, 0px); bottom: auto; height: var(--visible-height, 100dvh); max-height: var(--visible-height, 100dvh); }
  .checkout-location, .checkout-block { padding-inline: 20px; }
  .checkout-paybar, .order-result-footer { padding-inline: 20px; }
}
@media (max-width: 360px) {
  .checkout-location, .checkout-block, .checkout-paybar, .order-result-footer { padding-inline: 16px; }
  .checkout-lines img { width: 64px; height: 64px; }
  .checkout-lines article { gap: 10px; }
  .checkout-lines strong { font-size: 14px; }
  .checkout-addon { flex-basis: 124px; }
.checkout-block h3 small { font-size: 10px; }
}

/* Desktop ordering is a three-column workspace, not the mobile page enlarged.
   Keep this breakpoint paired with atelier.css's desktop-ticket visibility. */
.desktop-ticket-frame { display: none; }
@media (min-width: 1151px) {
  body {
    background: #fff;
  }
  .preview-notice { background: transparent; }
  .masthead {
    max-width: 1600px;
    height: 68px;
    position: sticky;
    top: 0;
    z-index: 15;
    margin-inline: auto;
    padding: 12px 32px;
    background: #fff;
    border-bottom: 1px solid #ecebea;
  }
  .masthead .brand img { width: 130px; }
  .header-actions { gap: 18px; }
  .fulfilment-switch { font-size: 14px; padding-inline: 14px; }
  .fulfilment-switch::before {
    background: #fff;
    border-color: #e8d1cf;
  }
  .language-button { min-width: 44px; min-height: 44px; }
  .dinein-controls {
    max-width: 1536px;
    padding: 4px 0;
    margin-inline: max(32px, calc((100vw - 1536px) / 2));
    background: transparent;
  }
  .workspace {
    max-width: 1600px;
    grid-template-columns: 176px minmax(0, 1fr) 296px;
    gap: 24px;
    padding: 28px 32px 48px;
    align-items: start;
  }
  #main { min-width: 0; }
  .desktop-index {
    top: 92px;
    padding: 16px 0 0;
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    scrollbar-width: thin;
    color: var(--ink);
  }
  .desktop-index .eyebrow { color: var(--muted); margin: 0 12px; }
  .desktop-index nav { gap: 6px; margin-top: 24px; }
  .desktop-index .side-category {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    gap: 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    transition: background 150ms, color 150ms;
  }
  .desktop-index .side-category small { font-size: 10px; opacity: .65; flex: none; }
  .desktop-index .side-category:hover { background: #f5f5f5; }
  .desktop-index .side-category.active { background: var(--red); color: #fff8eb; }
  .desktop-index .side-category.active::after { content: none; }
  .desktop-index button:focus-visible { outline-color: var(--red); outline-offset: -2px; }
  .desktop-index .side-note { margin: 28px 12px 0; padding-top: 20px; border-color: #e6ddd0; }
  .desktop-index .tiny-seal { background: transparent; }

  /* Desktop categories live in the left rail; the same search control moves
     into the sticky header. The original toolbar is retained for mobile. */
  .menu-toolbar { display: none; }
  .header-actions > .search-button {
    display: flex;
    gap: 10px;
    width: auto;
    min-width: 160px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e0d5c8;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
  }
  .header-actions > .search-button::after { content: attr(aria-label); font-size: 13px; }
  .header-actions > .search-button:hover { border-color: var(--red); color: var(--red); }
  #menuList {
    margin-top: 0;
    border: 1px solid #ecebea;
    border-radius: 20px;
    background: #fff;
  }
  .menu-section { padding: 24px; scroll-margin-top: 80px; }
  .menu-section + .menu-section { padding-top: 28px; border-top: 1px solid #eee7dd; }
  .section-heading { margin-bottom: 16px; }
  .section-heading h2, html[lang="en"] .section-heading h2 { font-size: 26px; }
  .dish-grid { column-gap: 24px; }
  .menu-section .dish-image { aspect-ratio: 1.35; mix-blend-mode: multiply; }
  .menu-section .dish-image img { width: 90%; height: 90%; }
  .menu-section .dish-name {
    font-size: 17px !important;
    line-height: 1.45;
    white-space: normal !important;
    overflow-wrap: anywhere;
    letter-spacing: 0;
  }
  .menu-section .dish-number { color: #9a8e80; }
  .menu-section .dish-price { font-size: 14px; }
  .menu-section .dish-add {
    width: 40px;
    height: 40px;
    font-size: 22px;
    background: #fff;
    border-color: #d9b7ae;
  }
  .menu-section .dish-add::after { inset: -3px; }
  .menu-section .dish-add:hover, .menu-section .dish-add.selected {
    background: var(--red);
    color: #fff8eb;
    border-color: var(--red);
  }
  .menu-section .dish-add.selected { font-size: 15px; }
  .menu-section.chapter-small .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-mains .dish-open { grid-template-columns: 42% minmax(0, 1fr); }
  .chapter-mains .dish-info { padding-right: 48px; }
  .chapter-mains .dish-flavor { max-width: none; }
  .colophon { margin-bottom: 0; color: var(--muted); }
  .colophon b { color: var(--red); }

  /* Shadow belongs to the wrapper so the paper's existing zigzag clip does
     not cut it off. This keeps the torn edge visible on a pure-white page. */
  .desktop-ticket-frame {
    display: block;
    position: sticky;
    top: 92px;
    align-self: start;
    min-width: 0;
    filter: drop-shadow(0 2px 2px #302a2426);
  }
  .desktop-ticket {
    position: relative;
    top: 0;
    margin-top: 0;
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px;
    border: 1px solid #ecebea;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  .ticket-title { padding-bottom: 18px; border-bottom: 0; margin-bottom: 8px; color: var(--ink); }
  .ticket-title h3 { font-size: 22px; }
  .ticket-empty { height: 168px; }
  .ticket-empty p { font-size: 16px; }
  .ticket-empty small { font-size: 12px; }
  .ticket-line { font-size: 13px; line-height: 1.5; gap: 16px; }
  .ticket-line span:first-child { max-width: none; min-width: 0; flex: 1; overflow-wrap: anywhere; }
  .ticket-line span:last-child { flex: none; white-space: nowrap; }
  .ticket-summary { align-items: center; border-top: 1px solid #eee7dd; padding-top: 18px; margin-top: 18px; font-size: 13px; }
  .ticket-summary strong { font-size: 25px; }
  .desktop-ticket .primary { min-height: 48px; border-radius: 8px; font-size: 14px; }
  .ticket-foot { font-size: 10px; line-height: 1.5; letter-spacing: 0; }
  .table-tray { display: none; }
  /* Full-width desktop ending, in normal flow after both navigation rails.
     No fixed overlay and no giant illustration inside the menu column. */
  body > .colophon.restaurant-footer {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 32px;
    width: 100%;
    max-width: 1600px;
    margin: 12px auto 0;
    padding: 28px 32px 32px;
    border-top: 1px solid #e5e5e5;
    background: #fff;
    color: var(--ink);
  }
  body > .restaurant-footer .footer-storefront {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 176px;
    height: 126px;
    margin: 0;
    align-self: center;
  }
  body > .restaurant-footer .footer-visit {
    grid-column: 2;
    margin: 0;
    padding: 0;
    justify-content: space-between;
  }
  body > .restaurant-footer #footerFarewell { color: var(--ink); font-size: 15px; }
  body > .restaurant-footer .footer-links { position: static; }
  body > .restaurant-footer .footer-links a { color: var(--red); }
  body > .restaurant-footer .footer-links a:focus-visible { outline-color: var(--red); }
  body > .restaurant-footer .footer-signoff {
    grid-column: 2;
    align-self: start;
    margin: 0;
    padding-top: 12px;
    border-color: #e5e5e5;
    color: #655c55;
    font-size: 12px;
  }
  body > .restaurant-footer .footer-signoff address { font-size: 12px; }
  body.search-open > .colophon.restaurant-footer { display: none; }
}
@media (min-width: 1151px) and (max-width: 1279px) {
  .workspace { grid-template-columns: 152px minmax(0, 1fr) 264px; gap: 20px; padding-inline: 24px; }
  .masthead { padding-inline: 24px; }
  .desktop-index .side-category { font-size: 13px; padding-inline: 10px; }
  .menu-section { padding: 20px; }
  .desktop-ticket { padding: 18px; }
}