/* Shared customer layout for the demo builds. */
.tabs-bar:has(> .view-switch) { flex-direction: column; align-items: stretch; padding: 0; }
.tabs-bar > .tabs { flex: none; width: 100%; box-sizing: border-box; }
.tabs-bar > .view-switch { align-self: flex-end; margin: 0 16px 8px; }
.tabs-bar .tab { min-height: 44px; }
.page-footer a, .page-footer button, .faves-label a {
  display: inline-flex; align-items: center; min-height: 44px;
}
body:has(#pay-btn) .qty button { width: 44px; height: 44px; }
.food-card .qty-pill { display: none; }
@media (min-width: 900px) {
  .menu-grid:not(.list-view) { max-width: 1200px; margin: 0 auto; padding: 0 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs-bar { padding-inline: max(0px, calc((100% - 1200px) / 2)); }
}
@media (min-width: 1200px) {
  .menu-grid:not(.list-view) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hero { padding-inline: max(16px, calc((100% - 1200px) / 2 + 16px)); }
}