/* A single checkout scroll area keeps every field and action reachable. */
.order-dialog {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: 110px 24px;
  scrollbar-width: thin;
  scrollbar-color: #b8a071 transparent;
}
.order-dialog[open] { display: block; }
.order-dialog>.dialog-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 20px 24px 18px;
  background: var(--surface);
}
.order-dialog .dialog-heading h2 { font-size: 36px; margin-top: 5px; }
.order-dialog .order-body { overflow: visible; flex: none; min-height: 0; padding: 0 24px 22px; }
.order-dialog #order-options { padding: 20px 0 5px; }
.order-dialog #order-requests { padding-top: 18px; }
.order-dialog label { font-size: 14px; margin-bottom: 8px; }
.order-dialog select, .order-dialog textarea { font-size: 16px; min-height: 46px; padding: 11px 12px; }
.order-dialog textarea { max-height: 220px; }
.order-dialog .order-item { padding-block: 18px; }
.order-dialog .order-item h3 { font-size: 23px; }
.order-dialog .quantity button { min-width: 44px; min-height: 44px; }
.order-dialog .order-bottom { overflow: visible; max-height: none; padding: 18px 24px max(22px,env(safe-area-inset-bottom)); }
.order-dialog .order-bottom>p { margin: 10px 0 14px; }
.order-dialog .chat-label { margin: 14px 0 10px; }
.order-dialog .messenger-actions>.button { min-height: 46px; padding: 10px 12px; }
.order-dialog .chat-divider { margin: 10px 0; }
.order-dialog .order-bottom>.text-link { min-height: 44px; margin-top: 8px; }
.order-dialog .order-bottom .order-hint { margin: 10px 0 0; }
.order-dialog .messenger-fallback { margin-top: 10px; }
@media(max-height:500px) {
  .order-dialog>.dialog-heading { position: static; padding-block: 14px; }
  .order-dialog .dialog-heading h2 { font-size: 32px; }
}
/* About 12.5% less mobile scale and spacing, preserving legible copy and touch targets. */
@media(max-width:800px) {
  body { font-size: 14px; }
  .site-header { min-height: 92px; padding: 10px 21px; gap: 18px; }
  .brand { gap: 16px; }
  .brand .brand-chef { width: 54px; height: 70px; }
  .brand .brand-wordmark { width: 274px; }
  .site-header nav { gap: 10px; }
  .site-header .header-order.button { min-width: 44px; min-height: 44px; padding: 9px; }
  .header-checkout.button { min-height: 44px; padding: 10px 12px; }
  .menu-section { padding: 57px 21px 49px; }
  .section-heading { margin-bottom: 44px; }
  .section-heading h2 { font-size: 51px; }
  .section-heading>p { font-size: 20px; margin-top: 12px; }
  .section-rule { gap: 21px; margin-bottom: 19px; }
  .section-rule:before, .section-rule:after { width: 70px; }
  .menu-search { margin-bottom: 28px; }
  .menu-search-field { min-height: 53px; padding-inline: 12px; gap: 10px; }
  .menu-search-field input { padding-block: 14px; font-size: 16px; }
  .menu-layout { gap: 26px; }
  .category-rail { margin-inline: -21px; padding: 9px 21px; }
  .category-button { min-height: 44px; padding: 10px 15px; font-size: 13px; }
  #categories { gap: 8px; }
  .menu-category-heading { padding-bottom: 17px; gap: 16px; }
  .menu-category-heading h3 { font-size: 38px; }
  .menu-item { min-height: 146px; padding-block: 24px; }
  .menu-item.has-photo { grid-template-columns: 128px minmax(0,1fr) 44px; gap: 22px; }
  .dish-photo { width: 128px; height: 132px; }
  .menu-item h4 { font-size: 25px; }
  .menu-item p { font-size: 14px; }
  .add-button { width: 44px; height: 44px; }
  .menu-footnote { margin-top: 26px; }
  .cuisine-band.cuisine-shortcuts { width: calc(100% - 36px); margin-top: 19px; gap: 10px; }
  .cuisine-shortcuts .cuisine-shortcut { min-height: 98px; padding: 19px 22px; gap: 10px; }
  .cuisine-shortcut .outline-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .cuisine-shortcut strong { font-size: 17px; }
  .locations-section { gap: 25px; padding: 47px 21px; }
  .locations-intro h2 { font-size: 39px; margin-block: 16px; }
  .locations-intro p { font-size: 14px; }
  .branch-card { padding: 14px 16px; }
  .branch-card-name { font-size: 14px; }
  .branch-card-address { margin-top: 8px; }
  .branch-list { gap: 10px; }
  .branch-map-details { padding: 19px; }
  .branch-map-heading h3 { font-size: 28px; }
  .restaurant-gallery, .guest-reviews { padding: 49px 21px; }
  .restaurant-gallery .section-heading, .guest-reviews .section-heading { margin-bottom: 38px; }
  .restaurant-gallery .section-heading h2, .guest-reviews .section-heading h2 { font-size: 37px; }
  .restaurant-photo-grid, .guest-review-grid { column-gap: 21px; }
  .restaurant-photo { margin-bottom: 26px; }
  .guest-review { padding: 19px 21px; margin-bottom: 21px; }
  .guest-review blockquote { font-size: 14px; margin-bottom: 21px; }
  .guest-review figcaption { padding-top: 15px; }
  .review-quote-mark { font-size: 63px; height: 39px; }
  .site-footer { padding: 31px 21px 100px; }
  .footer-topline { gap: 21px; margin-bottom: 28px; }
  .footer-contact-panel { padding: 26px 12px; gap: 26px 0; }
  .footer-invitation { font-size: 28px; margin-bottom: 20px; }
  .footer-label { margin-bottom: 22px; }
  .footer-qr { width: min(100%,194px); }
  .footer-socials { margin-top: 22px; }
  .basket-float { min-height: 48px; bottom: max(18px,env(safe-area-inset-bottom)); padding: 12px 18px; gap: 16px; }
  .toast { bottom: 84px; }
}
@media(max-width:760px) {
  .branch-list { max-height: 280px; }
  .branch-map-frame { height: 263px; }
}
@media(max-width:700px) {
  .site-header { display: block; min-height: 127px; padding: 10px 18px 15px; }
  .brand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .brand .brand-chef { width: 57px; height: 74px; }
  .brand .brand-wordmark { width: 350px; max-width: 100%; height: auto; align-self: center; }
  .site-header nav { top: 24px; right: 18px; }
}
@media(max-width:600px) {
  .cuisine-shortcuts .cuisine-shortcut { min-height: 124px; padding: 16px 7px; gap: 9px; }
  .cuisine-shortcut strong { font-size: 14px; }
  .menu-search { margin-top: -7px; }
  .menu-category-heading h3 { font-size: 33px; }
  .menu-item { min-height: 136px; padding-block: 21px; }
  .menu-item.has-photo { grid-template-columns: 91px minmax(0,1fr) 44px; gap: 13px; }
  .dish-photo { width: 91px; height: 101px; }
  .menu-item h4 { font-size: 22px; }
  .menu-item p { font-size: 13px; }
  .dish-title { gap: 6px; margin-bottom: 8px; }
  .menu-item .price { font-size: 14px; margin-top: 9px; }
  .order-dialog>.dialog-heading { padding: 17px 20px; }
  .order-dialog .dialog-heading h2 { font-size: 33px; }
  .order-dialog .order-body { padding: 0 20px 20px; }
  .order-dialog .order-bottom { padding: 16px 20px max(20px,env(safe-area-inset-bottom)); }
  .order-dialog .order-item { gap: 12px; padding-block: 16px; }
  .order-dialog .order-item h3 { font-size: 21px; }
  .order-dialog .subtotal strong { font-size: 22px; }
  .order-dialog .messenger-actions>.button { font-size: 12px; padding: 10px; }
}
@media(max-width:360px) {
  .menu-section { padding-inline: 16px; }
  .category-rail { margin-inline: -16px; padding-inline: 16px; }
  .menu-item.has-photo { grid-template-columns: 79px minmax(0,1fr) 44px; gap: 10px; }
  .dish-photo { width: 79px; height: 93px; }
  .menu-item h4 { font-size: 21px; }
  .order-dialog .order-item { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .order-dialog .quantity { justify-self: start; }
}

/* Keep the bulk action beside the item list, directly below branch selection. */
.order-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 15px; }
.order-list-heading[hidden] { display: none; }
.order-list-heading h3 { font-size: 24px; line-height: 1.2; }
.clear-cart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid #b8a07180; border-radius: 4px; color: #785923; background: #fffaf0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.clear-cart svg { width: 18px; height: 18px; flex: 0 0 18px; }
.clear-cart:hover { color: #691c15; border-color: #965b43; background: #f6eadb; }
@media(max-width:600px) {
 .order-list-heading { padding-top: 12px; }
 .order-list-heading h3 { font-size: 21px; }
}