/* Shared viewport geometry for the catalogue, dock and native sheets. */
:root {
  --gutter: 16px;
  --edge-left: max(var(--gutter), env(safe-area-inset-left));
  --edge-right: max(var(--gutter), env(safe-area-inset-right));
  --search-top: max(10px, env(safe-area-inset-top));
  --discovery-height: calc(var(--search-top) + 94px);
  --hero-height: clamp(224px, 37svh, 326px);
  --sheet-gap: max(10px, env(safe-area-inset-top));
  --screen-height: 100vh;
  --keyboard-offset: 0px;
  --dock-bottom: calc(8px + env(safe-area-inset-bottom));
  --sheet-height: min(850px, calc(var(--screen-height) - var(--sheet-gap)));
}

/* Page zoom can make a phone's layout viewport wider than the desktop shell. */
.app-shell { border-inline: 0; }
@media (max-width: 600px), (pointer: coarse) {
  :root { --phone: 100%; }
}

@supports (height: 100dvh) {
  :root { --screen-height: 100dvh; }
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--discovery-height) + 10px);
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
}
html:has(dialog[open]) { overflow: hidden; }
.header {
  padding: calc(11px + env(safe-area-inset-top)) var(--edge-right) 10px var(--edge-left);
}
.featured {
  block-size: var(--hero-height);
  overscroll-behavior-inline: contain;
}
.feature { min-width: 0; background: var(--surface-deep); }
.feature > img, .feature:active > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: none;
}
.feature::after {
  background: linear-gradient(180deg, #091f30e6 0%, #0a263840 36%, #0b263963 52%, #102c40f5 100%);
}
.feature-text { inset-inline: var(--gutter); bottom: 47px; }
.feature h3 { font-size: clamp(25px, 7.4vw, 33px); }
.feature-price { margin-top: 5px; }
.featured-pagination { top: calc(var(--hero-height) - 45px); left: 7px; }

.menu-surface {
  padding-inline: var(--edge-left) var(--edge-right);
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.discovery-bar {
  margin-inline: calc(-1 * var(--edge-left)) calc(-1 * var(--edge-right));
  padding: var(--search-top) var(--edge-right) 0 var(--edge-left);
}
.search-wrap { height: 46px; }
.search-wrap svg { flex-shrink: 0; }
.mobile-categories {
  height: 48px;
  min-height: 48px;
  margin-inline: calc(-1 * var(--edge-left)) calc(-1 * var(--edge-right));
  padding: 2px max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left));
  gap: 4px;
  overscroll-behavior-inline: contain;
}
.mobile-categories button { padding-inline: 8px; }
.mobile-categories button:focus-visible { outline-offset: -3px; }
.menu-result-head { flex-wrap: wrap; gap: 5px 12px; margin: 18px 0 14px; }
.menu-result-head h2, .category-title { overflow-wrap: anywhere; }
.category-title { margin-bottom: 12px; }
.category-title small { flex-shrink: 0; }
.category-section { scroll-margin-top: 0; margin-bottom: 28px; }
.showing-all .menu-content { padding-top: 18px; }
.dish-grid { gap: 20px 12px; }
.dish-photo-button, .text-only .dish-visual {
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: 14px;
}
.dish-photo-button {
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
}
.text-only .dish-visual { background: var(--surface-raised); }
.dish-photo-button img, .detail-image, .cart-row > img, .dish-dialog .motion-bridge {
  object-fit: contain;
  object-position: center;
}
.dish-info { padding: 8px 0 0; }
.dish-title-button { min-height: 44px; line-height: 1.25; }
.dish-action { gap: 6px; padding-top: 7px; }
.dish-action .price { line-height: 22px; }
.dish .dish-actions-overlay .add-button[data-qty] { padding: 0 8px; }
.dish .dish-actions-overlay .add-button svg { width: 15px; height: 15px; flex-shrink: 0; }
.dish-actions-overlay .quantity-control button, .cart-row .quantity-control button {
  height: 44px;
  min-height: 44px;
}
.cart-count[hidden] { display: none; }
.bottom-dock {
  bottom: var(--dock-bottom);
  width: min(calc(100% - var(--edge-left) - var(--edge-right)), calc(var(--phone) - 24px));
  min-height: 64px;
  padding: 6px;
}
.cart-button { gap: 15px; }
.cart-label strong {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.1;
}
#toast { bottom: calc(82px + var(--dock-bottom)); overflow-wrap: anywhere; }
html.keyboard-open .bottom-dock, html.keyboard-open #toast { visibility: hidden; }

.dialog {
  bottom: var(--keyboard-offset);
  max-width: min(var(--phone), calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: var(--sheet-height);
  scroll-padding-block: 80px 12px;
}
.dialog.dish-dialog {
  inset: auto 0 var(--keyboard-offset);
  height: var(--screen-height);
  max-height: none;
}
#dish-content { max-height: var(--sheet-height); }
.sheet-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.sheet-header h2 { font-size: clamp(24px, 6vw, 29px); }
.detail-tools {
  position: sticky;
  top: 0;
  z-index: 9;
  height: 54px;
  background: var(--cream);
}
.dish-dialog .detail-tools .close-button { top: 5px; }
.detail-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.detail-image, .dish-dialog .motion-bridge {
  background: var(--cream);
}
.detail-body { margin-top: 0; padding: 16px 16px 0; overflow-wrap: anywhere; }
.detail-body h2 { font-size: clamp(25px, 6.9vw, 32px); }
.detail-description { margin-top: 12px; }
.detail-note { padding-block: 12px 16px; }
.detail-bottom {
  margin-inline: -16px;
  min-height: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.detail-bottom .price { min-width: 0; overflow-wrap: anywhere; }
.detail-controls { flex: 0 1 148px; min-width: 130px; }
.detail-controls .quantity-control { width: 100%; }
#cart-content, #sync-cart-status { padding-inline: 16px; }
.cart-row { padding-block: 12px; gap: 10px; }
.cart-row > img { width: clamp(50px, 16vw, 70px); height: 62px; padding: 3px; }
.cart-row-name { overflow-wrap: anywhere; }
.cart-row-bottom { flex-wrap: wrap; gap: 6px 10px; }
.cart-row-bottom strong {
  order: 0;
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cart-checkout {
  position: static;
  margin-inline: -16px;
  padding: 12px 16px;
  box-shadow: none;
}
.cart-summary { flex-wrap: wrap; }
.cart-summary strong { font-size: clamp(22px, 6vw, 27px); white-space: normal; overflow-wrap: anywhere; }
.cart-comment { margin: 14px 0 16px; }
.cart-comment textarea { min-height: 76px; }
.empty-cart { padding-block: 24px; }
.empty-cart p { color: var(--muted); }
.sync-request-title { margin: 0; }
.sync-request-heading > * { min-width: 0; }
.sync-requests h3 { font-size: 22px; }

.utility-dialog { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.utility-top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cream);
  margin: -16px -16px 12px;
  padding: 12px 16px 8px;
}
.utility-dialog h2 { font-size: clamp(24px, 6.9vw, 30px); }
.utility-copy { margin: 12px 0 16px; overflow-wrap: anywhere; }
.utility-symbol { width: 48px; height: 48px; border-radius: 15px; }
.table-picker { gap: 8px; margin-top: 14px; }
.table-picker button { min-height: 52px; }
.category-picker { gap: 0 12px; }
.category-picker button { min-height: 48px; }
.waiter-option { min-height: 48px; padding: 10px; }
.waiter-options { gap: 8px; margin-bottom: 14px; }
.receipt-row > span { overflow-wrap: anywhere; }
.receipt-row strong, .receipt-total strong { flex-shrink: 0; max-width: 50%; overflow-wrap: anywhere; }

@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .brand-name { font-size: 23px; }
  .brand img { width: 38px; height: 38px; }
  .dock-menu, .dock-waiter { width: 53px; }
}
@media (max-height: 430px) and (orientation: landscape) {
  :root { --hero-height: 215px; --sheet-gap: max(4px, env(safe-area-inset-top)); }
  .header { padding-top: max(8px, env(safe-area-inset-top)); }
}