/* Meal ordering shares the product's scalable C-end blue design tokens. */
.on-meal-page .app-header { padding-inline: 0; }
.meal-page-heading { --meal-heading-side: 104px; display: grid; grid-template-columns: var(--meal-heading-side) minmax(0, 1fr) var(--meal-heading-side); align-items: center; width: 100%; min-height: 56px; }
.meal-page-heading h1 { text-align: center; text-wrap: balance; font-size: 1.375rem; line-height: 1.45; overflow-wrap: anywhere; }
.meal-back { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 56px; justify-self: start; margin-left: 4px; padding: 8px; background: transparent; border-radius: var(--radius-control); font-size: 1.125rem; }
.meal-back .icon { width: 20px; }
.meal-back > span { white-space: nowrap; }
.on-meal-page main { padding-top: 8px; padding-bottom: calc(16px + var(--safe-area-bottom)); }
#meal-content { padding-bottom: var(--meal-bar-height, 0px); font-size: 1.25rem; overflow-wrap: anywhere; }
#meal-content h2 { font-size: 1.375rem; line-height: 1.5; }
.meal-text-link { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 56px; min-width: 56px; padding: 8px 4px; border-radius: 10px; background: transparent; color: var(--primary-text); font-size: 1.125rem; font-weight: 600; }
.meal-text-link .icon { width: 22px; height: 22px; }
.meal-store-overview { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.meal-store-heading { display: grid; grid-template-columns: clamp(80px, 24vw, 104px) minmax(0, 1fr); align-items: start; gap: 12px; }
.meal-store-cover { display: block; width: 100%; height: 112px; object-fit: cover; border-radius: var(--radius-control); background: var(--surface-tint); }
.meal-store-info { display: grid; gap: 6px; min-width: 0; }
.meal-store-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.125rem; line-height: 1.5; }
.meal-store-address { display: flex; gap: 6px; align-items: flex-start; color: var(--text-secondary); font-size: 1.125rem; line-height: 1.5; }
.meal-store-address .icon { flex: 0 0 18px; width: 18px; height: 27px; }
.meal-store-address > span { min-width: 0; }
.meal-store-tags { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.meal-store-tags .meal-badge { border: 1px solid var(--border-accent); border-radius: 6px; font-size: var(--font-supporting); line-height: 1.5; }
.meal-selection { margin-top: 12px; }
.meal-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--background); }
.meal-mode-options button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 8px 4px; min-height: 56px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 1.25rem; line-height: 1.3; }
.meal-mode-options button > .icon { flex: 0 0 24px; width: 24px; height: 24px; }
.meal-mode-options button > span { min-width: 0; }
.meal-mode-options button small { display: block; margin-top: 2px; font-size: var(--font-supporting); line-height: 1.2; }
.meal-mode-options button[aria-pressed="true"] { color: var(--primary-text); background: var(--surface); font-weight: 600; }
.meal-order-filters button[aria-pressed="true"] { color: var(--primary-text); background: var(--surface-tint); border-color: var(--primary-text); font-weight: 600; }
.meal-mode-options button:disabled { cursor: default; color: var(--text-secondary); opacity: .6; }
.meal-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.meal-section-heading > span { font-size: 1.125rem; color: var(--text-secondary); }
.meal-store-tabs { position: sticky; top: var(--app-header-height); z-index: 2; display: flex; align-items: stretch; gap: 16px; margin: 12px 0 8px; border-bottom: 1px solid var(--border); background: var(--background); }
.meal-store-tabs button { position: relative; min-width: 64px; min-height: 56px; padding: 10px 4px; background: transparent; color: var(--text-secondary); font-size: 1.25rem; line-height: 1.5; }
.meal-store-tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; }
.meal-store-tabs button[aria-selected="true"]::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 28px; height: 4px; transform: translateX(-50%); border-radius: 2px; background: var(--primary); }
.meal-store-tabpanel { min-height: 0; }
.meal-review-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 8px 0 16px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.meal-review-score { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.meal-review-score strong { color: var(--primary-text); font-size: 3rem; font-weight: 600; line-height: 1.1; }
.meal-review-score > span, .meal-review-summary p { color: var(--text-secondary); font-size: var(--font-supporting); }
.meal-review-summary p { margin-top: 8px; }
.meal-review-stars { display: inline-block; background: linear-gradient(90deg, var(--primary-text) var(--rating-fill), var(--border) var(--rating-fill)); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 1.5rem; letter-spacing: 3px; }
.meal-review-heading { margin-bottom: 4px; }
.meal-review { padding: 12px 0; border-bottom: 1px solid var(--border); }
.meal-review:last-child { border-bottom: 0; }
.meal-review header { display: flex; align-items: center; gap: 10px; }
.meal-review-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--surface-tint); color: var(--primary-text); font-size: 1.125rem; }
.meal-review header > div { min-width: 0; }
.meal-review header h3 { font-size: 1.125rem; line-height: 1.5; }
.meal-review header p { color: var(--text-secondary); font-size: var(--font-supporting); line-height: 1.5; }
.meal-review-rating { margin-left: auto; color: var(--primary-text); font-size: var(--font-supporting); white-space: nowrap; }
.meal-review-text { margin-top: 12px; font-size: 1.125rem; line-height: 1.7; }
.meal-review-tags, .meal-merchant-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.meal-review-tags > span { padding: 3px 8px; border-radius: 6px; background: var(--background); color: var(--text-secondary); font-size: var(--font-supporting); }
.meal-merchant-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.meal-merchant-photos figure { position: relative; min-width: 0; height: 112px; margin: 0; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-tint); }
.meal-merchant-photos img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.meal-merchant-photos figure:last-child img { object-position: center bottom; }
.meal-merchant-photos figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 12px 8px; background: linear-gradient(transparent, #0009); color: #FFF; font-size: var(--font-supporting); }
.meal-merchant-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.meal-merchant-row:last-child { border-bottom: 0; }
.meal-merchant-row > .icon { flex: 0 0 24px; width: 24px; height: 28px; color: var(--text-secondary); }
.meal-merchant-row > div { min-width: 0; }
#meal-content .meal-merchant-row h2 { font-size: 1.125rem; }
.meal-merchant-row p { margin-top: 6px; color: var(--text-secondary); font-size: 1.125rem; line-height: 1.65; }
.meal-merchant-phone { display: inline-flex; align-items: center; min-height: 56px; margin-top: 2px; color: var(--primary-text); font-size: 1.125rem; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; }
.meal-merchant-tags { margin-top: 8px; }
.meal-merchant-tags > span { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: var(--font-supporting); line-height: 1.5; }
.meal-menu-layout { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 12px; }
.meal-category-nav { position: sticky; top: calc(var(--app-header-height) + 72px); display: grid; align-self: start; max-height: calc(100dvh - var(--app-header-height) - var(--meal-bar-height, 0px) - 84px); overflow-y: auto; background: var(--background); border-radius: 10px; }
.meal-category-nav button { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; width: 100%; min-height: 56px; padding: 10px 8px; background: transparent; color: var(--text-secondary); font-size: var(--font-supporting); line-height: 1.5; text-align: center; }
.meal-category-nav button[aria-pressed="true"] { color: var(--primary-text); background: var(--surface-tint); font-weight: 600; }
.meal-category-nav button[aria-pressed="true"]::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--primary-text); }
.meal-category-count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; padding: 0 4px; border-radius: var(--radius-control); background: var(--primary-text); color: var(--surface); font-size: var(--font-supporting); line-height: 1.5; }
.meal-category-items { min-width: 0; }
.meal-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
#meal-content .meal-category-heading h2 { font-size: 1.125rem; }
.meal-category-heading > span { color: var(--text-secondary); font-size: var(--font-supporting); }
.meal-menu { display: grid; }
.meal-food-card { display: grid; grid-template-columns: clamp(72px, 20vw, 96px) minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--border); }
.meal-food-card:last-child { border-bottom: 0; }
.meal-food-picture { display: flex; flex-direction: column; align-items: center; border-radius: 10px; overflow: hidden; padding-bottom: 4px; background: var(--surface-tint); }
.meal-food-picture img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.meal-food-picture > span { font-size: var(--font-supporting); padding-inline: 4px; color: var(--primary-text); }
.meal-food-copy { min-width: 0; }
.meal-food-copy h3 { font-size: 1.25rem; line-height: 1.45; }
.meal-food-copy p { margin-top: 6px; font-size: var(--font-supporting); color: var(--text-secondary); }
.meal-food-footer { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.meal-food-footer .meal-price { font-size: 1.375rem; }
.meal-food-footer .meal-price > span { font-size: var(--font-supporting); margin-left: 2px; }
.meal-price { font-size: 1.75rem; color: var(--primary-text); font-weight: 600; }
.meal-price > span { font-size: 1.125rem; margin-left: 4px; }
.meal-quantity { display: flex; gap: 4px; align-items: center; }
/* Keep the visible symbols compact while preserving full touch targets. */
.meal-quantity button { position: relative; display: flex; justify-content: center; align-items: center; flex: 0 0 auto; width: 56px; height: 56px; min-width: 56px; min-height: 56px; padding: 0; border: 0; border-radius: 50%; color: var(--primary-text); font-size: 0; background: transparent; line-height: 1; }
.meal-quantity-symbol { position: relative; display: block; width: 28px; height: 28px; border: 1px solid var(--primary-text); border-radius: 50%; background: var(--surface-tint); pointer-events: none; }
.meal-quantity-symbol::before, .meal-quantity button[data-delta="1"] .meal-quantity-symbol::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; transform: translate(-50%, -50%); border-radius: 1px; background: currentColor; pointer-events: none; }
.meal-quantity button[data-delta="1"] .meal-quantity-symbol::after { width: 2px; height: 14px; }
.meal-quantity button[data-delta="1"] .meal-quantity-symbol { background: var(--primary-text); color: var(--surface); }
.meal-quantity button:disabled { cursor: default; }
.meal-quantity button:disabled .meal-quantity-symbol { background: var(--disabled-surface); border-color: var(--control); color: var(--text-secondary); }
.meal-quantity output { min-width: 16px; text-align: center; font-size: 1.125rem; }
.meal-sold-out { padding: 6px 8px; color: var(--text-secondary); background: var(--background); border-radius: 8px; font-size: var(--font-supporting); }
.meal-bottom { position: fixed; z-index: 3; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--page-gutter) calc(8px + var(--safe-area-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.meal-bottom > .primary-button, .meal-bottom > .secondary-button { flex: 1; min-width: 0; width: auto; }
.meal-bottom > .meal-text-link { flex: 0 1 auto; }
.meal-cart-summary { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.4; }
.meal-cart-summary > span { font-size: 1.125rem; color: var(--text-secondary); }
.meal-cart-summary > strong { font-size: 1.875rem; color: var(--primary-text); }
.meal-cart-summary small { margin-left: 4px; font-size: 1.125rem; }
.meal-cart-summary > span:last-child:not(:first-child) { margin-top: 4px; }
.meal-intro { color: var(--text-secondary); font-size: 1.125rem; margin: 16px 0; }
.meal-error { margin: 0 0 12px; padding: var(--space-content); border-radius: var(--radius-control); font-size: 1.125rem; }
.meal-error { color: var(--rose); background: var(--rose-surface); border: 1px solid var(--rose); }
.meal-panel + .meal-panel { margin-top: 12px; }
.meal-stack .meal-panel + .meal-panel { margin-top: 0; }
.meal-panel > .primary-button, .meal-panel > .secondary-button { margin-top: 16px; }
.meal-panel > h2 { margin-bottom: 8px; }
.meal-detail-list, .meal-price-list { margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.meal-detail-list > div, .meal-price-list > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; }
.meal-price-list > div { align-items: center; }
.meal-detail-list dt, .meal-price-list dt { color: var(--text-secondary); font-size: 1.125rem; }
.meal-detail-list dd, .meal-price-list dd { margin: 0; min-width: 0; max-width: 100%; font-size: 1.25rem; }
.meal-price-list > div:last-child { border-top: 1px solid var(--border); padding-top: 12px; }
.meal-discount { color: var(--green); font-weight: 600; }
.meal-price-list > .meal-coupon-fee-row { gap: 0 12px; }
.meal-coupon-fee-row > dd { display: flex; align-items: center; margin-left: auto; }
/* Keep the 56px hit area without adding height to the price-list text rhythm. */
#meal-content .meal-coupon-entry { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: auto; max-width: 100%; min-width: 56px; min-height: 56px; margin-block: min(0px, calc(1rem - 28px)); padding: 0 8px; border-radius: var(--radius-control); background: transparent; color: var(--primary-text); font-size: 1.125rem; text-align: right; }
.meal-coupon-entry > span { min-width: 0; }
.meal-coupon-entry .icon { width: 18px; height: 24px; }
#meal-content .meal-coupon-entry.is-applied { color: var(--green); font-weight: 600; }
.meal-coupon-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 80px; text-align: left; }
.meal-coupon-option[aria-pressed="true"] { border-color: var(--primary-text); }
.meal-coupon-option-amount { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; color: var(--primary-text); }
.meal-coupon-option-amount strong { font-size: 2rem; line-height: 1.35; }
.meal-coupon-option-amount > span { font-size: var(--font-supporting); }
.meal-coupon-option-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.meal-coupon-option-copy strong { font-size: 1.25rem; text-wrap: balance; }
.meal-coupon-option-copy > span { color: var(--text-secondary); font-size: var(--font-supporting); }
.meal-coupon-option-check { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--control); border-radius: 50%; font-size: 18px; line-height: 1; }
.meal-coupon-option[aria-pressed="true"] .meal-coupon-option-check { background: var(--primary-text); border-color: var(--primary-text); color: var(--on-primary); }
.meal-badge, .meal-section-heading > .meal-badge { color: var(--primary-text); background: var(--surface-tint); border-radius: 8px; padding: 2px 8px; display: inline-flex; font-size: 1.125rem; }
.meal-address-choice { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 64px; margin-top: 8px; padding: 12px 0; background: transparent; }
.meal-address-choice > span { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 8px; }
.meal-address-choice > span > span { color: var(--text-secondary); font-size: 1.125rem; }
.meal-location-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.meal-pickup-contact { margin-top: 16px; }
.meal-delivery-options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.meal-delivery-options > label { flex: 1 1 140px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.meal-delivery-options > label:has(input:checked) { border-color: var(--primary-text); color: var(--primary-text); background: var(--surface-tint); }
.meal-delivery-options > label:has(input:disabled) { color: var(--text-secondary); cursor: not-allowed; }
.meal-delivery-options input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary-text); flex-shrink: 0; }
.meal-time-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin-top: 16px; }
.meal-time-fields > div { min-width: 0; }
.meal-time-fields label { display: block; margin-bottom: 6px; font-size: 1.125rem; color: var(--text-secondary); }
.meal-delivery-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-tint); color: var(--primary-text); font-size: var(--font-supporting); line-height: 1.5; }
.meal-delivery-hint > .icon { flex: 0 0 18px; width: 18px; height: 24px; }
.meal-delivery-hint > span { min-width: 0; }
#meal-content .meal-time-fields select, #meal-content .meal-time-fields input[type="date"], #meal-content .meal-time-fields input[type="time"] { display: block; width: 100%; min-width: 0; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); min-height: 56px; border-width: 1px; font-size: 1.125rem; padding: 10px; }
#meal-content .meal-time-fields input[aria-invalid="true"], #meal-content .meal-time-fields select[aria-invalid="true"] { border-color: var(--rose); }
.meal-coupon-choice { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 16px 0; font-size: 1.25rem; cursor: pointer; }
.meal-coupon-choice input { width: 28px; height: 28px; flex: 0 0 28px; margin: 3px 0 0; accent-color: var(--primary-text); }
.meal-coupon-choice > span { display: flex; flex-direction: column; gap: 6px; }
.meal-coupon-choice > span > span { color: var(--text-secondary); font-size: 1.125rem; }
.meal-muted { margin-top: 8px; color: var(--text-secondary); font-size: 1.125rem; }
.meal-line-items { display: grid; gap: 12px; margin-top: 12px; }
.meal-line-items > div { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.meal-line-items > div > span { flex: 1 1 160px; }
.meal-line-items small { display: block; color: var(--text-secondary); font-size: 1.125rem; margin-top: 4px; }
.meal-line-items-with-covers > div { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.meal-line-cover { display: block; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--surface-tint); }
.meal-line-items-with-covers > div > span { min-width: 0; overflow-wrap: anywhere; }
.meal-line-items-with-covers > div > strong { white-space: nowrap; }
@media (max-width: 380px) {
  .meal-line-items-with-covers > div { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; }
  .meal-line-cover { width: 64px; height: 64px; grid-row: span 2; }
  .meal-line-items-with-covers > div > strong { grid-column: 2; }
}
.meal-order-rules { margin: 16px 0 12px; color: var(--text-secondary); font-size: 1.125rem; }
.meal-order-rules h2 { color: var(--text); margin-bottom: 8px; }
.meal-order-rules p + p { margin-top: 8px; }
.meal-order-rules .secondary-button { margin-top: 16px; }
#meal-content input, #meal-content select, #meal-content textarea { font-family: inherit; }
#meal-content select, #meal-content textarea { display: block; width: 100%; min-width: 0; min-height: 64px; padding: 12px; border: 2px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-size: 1.25rem; resize: vertical; }
#meal-content textarea::placeholder { color: var(--text-secondary); opacity: 1; }
#meal-content input:focus-visible, #meal-content select:focus-visible, #meal-content textarea:focus-visible { outline: 3px solid var(--primary-text); outline-offset: 3px; }
.meal-address-list { gap: 12px; }
.meal-address-card { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; padding: 12px 12px 4px; border-radius: var(--radius-card); }
.meal-address-card.is-selected { border-color: var(--primary-text); background: var(--surface-tint); }
.meal-address-card.is-managed { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 4px; }
.meal-address-card.is-managed .meal-address-footer { grid-column: 1; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.meal-address-select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border-radius: inherit; background: transparent; }
.meal-address-select:active { background: transparent; }
.meal-address-select:disabled { background: transparent; cursor: not-allowed; }
.meal-address-check { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 4px; border: 1.5px solid var(--control); border-radius: 50%; font-size: var(--font-supporting); font-weight: 600; }
.is-selected .meal-address-check { color: var(--surface); border-color: var(--primary-text); background: var(--primary-text); }
.meal-address-copy { min-width: 0; }
.meal-address-contact { margin-top: 4px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.meal-address-title { font-size: 1.25rem; line-height: 1.5; overflow-wrap: anywhere; }
.meal-address-contact > span { color: var(--text-secondary); font-size: 1.125rem; }
.meal-address-footer { grid-column: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 8px; }
.meal-address-footer .meal-badge { border: 1px solid var(--border-accent); border-radius: var(--radius-control); background: var(--surface); color: var(--primary-text); font-size: 1.125rem; line-height: 1.5; padding: 2px 7px; }
.meal-address-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.meal-address-footer .meal-text-link { min-width: 56px; min-height: 56px; padding: 8px; font-size: 1.125rem; }
.meal-address-delete { color: var(--rose); }
#meal-address-form .meal-inline-error { color: var(--rose); }
#meal-address-form [aria-invalid="true"] { border-color: var(--rose); }
#meal-address-form .meal-coupon-choice > span { display: block; word-break: keep-all; text-wrap: balance; }
.meal-inline-error { color: var(--rose); margin-top: 12px; font-size: 1.125rem; }
.meal-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.meal-empty > .icon { width: 64px; height: 64px; padding: 12px; color: var(--primary-text); background: var(--surface-tint); border-radius: var(--radius-panel); }
.meal-empty p { color: var(--text-secondary); font-size: 1.125rem; }
.meal-order-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; overflow-x: visible; }
.meal-order-count { margin: 24px 0 12px; }
.meal-order-filters button { flex: 1 0 auto; white-space: nowrap; min-width: 56px; min-height: 56px; padding: 8px; background: var(--surface); border: 2px solid var(--control); border-radius: var(--radius-control); font-size: 1.125rem; }
.meal-section-heading > .meal-order-status { color: var(--green); font-weight: 600; }
.meal-section-heading > .meal-order-status.is-cancelled { color: var(--text-secondary); }
.meal-order-card > p { margin-top: 12px; font-size: 1.125rem; }
.meal-order-foods { color: var(--text-secondary); }
.meal-order-card-footer { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.meal-order-card-footer .secondary-button { width: auto; flex: 0 1 auto; }
.meal-result { text-align: center; padding: 12px 0 16px; }
.meal-result > span { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: var(--radius-card); background: var(--green-surface); color: var(--green); }
.meal-result > span .icon { width: 40px; height: 40px; }
#meal-content .meal-result h2 { font-size: 1.75rem; }
.meal-result p { margin-top: 8px; color: var(--text-secondary); font-size: 1.125rem; }
.meal-result.is-cancelled > span { color: var(--text-secondary); background: var(--disabled-surface); }
.meal-arrangement { border-color: var(--border-accent); background: var(--surface); }
.meal-arrangement-time { margin: 16px 0; }
.meal-arrangement-time strong { font-size: 1.75rem; color: var(--primary-text); }
.meal-arrangement > p + p { margin-top: 8px; }
.meal-credential { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 12px; margin-top: 12px; border-top: 1px dashed var(--control); font-size: 1.125rem; }
.meal-credential strong { font-size: 1.375rem; }
.meal-loading { padding: 24px 8px; text-align: center; color: var(--text-secondary); }
body.large-text .meal-food-card { grid-template-columns: 1fr; }
body.large-text .meal-page-heading { grid-template-columns: 1fr 1fr; }
body.large-text .meal-back { grid-column: 1; grid-row: 1; }
body.large-text .meal-page-heading h1 { grid-column: 1 / -1; grid-row: 2; padding: 4px 16px 12px; }
body.large-text .meal-food-picture { width: 100%; flex-direction: row; justify-content: center; gap: 8px; padding: 0 8px; }
body.large-text .meal-food-picture img { width: 72px; }
body.extra-large-text .meal-mode-options { grid-template-columns: 1fr; }
body.extra-large-text .meal-mode-options button { flex-direction: row; flex-wrap: wrap; min-height: 64px; }
body.extra-large-text .meal-bottom { flex-wrap: wrap; }
body.extra-large-text .meal-bottom > .meal-cart-summary { flex-basis: 100%; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
body.extra-large-text .meal-bottom > .meal-cart-summary > span:last-child:not(:first-child) { flex-basis: 100%; }
@media (max-width: 359px) {
  .meal-page-heading { --meal-heading-side: 102px; }
  .meal-page-heading h1 { font-size: 1.25rem; }
  .meal-menu-layout { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
  .meal-category-nav button { padding-inline: 4px; }
  .meal-food-card { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
  .meal-bottom { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { #meal-content * { scroll-behavior: auto; transition: none; } }

/* Store-specific dine-in payment shares checkout typography and controls. */
.meal-dine-form { display:grid; gap:12px; }
.meal-dine-form label { font-weight:600; }
.meal-dine-form input { min-width:0; width:100%; box-sizing:border-box; min-height:64px; padding:12px 16px; border:1px solid var(--control); border-radius:var(--radius-control); background:var(--surface); color:var(--text); font:inherit; }
.meal-dine-form input[aria-invalid=true] { border-color:var(--rose); }
.meal-bottom:has(.meal-dine-pay-total) { flex-wrap:wrap; }
.meal-bottom:has(.meal-dine-pay-total) > .primary-button { flex-basis:100%; }
.meal-dine-pay-total { flex:1 1 100%; display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; width:100%; }
.meal-payment-panel { border: 0; }
.meal-payment-options { display: grid; gap: 8px; }
.meal-payment-method { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 20px; padding: 8px 0; min-height: 64px; cursor: pointer; }
.meal-payment-label { color: var(--text); font-size: var(--font-body); line-height: 1.5; text-wrap: balance; overflow-wrap: anywhere; }
.meal-payment-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; }
.meal-payment-icon img { width: 44px; height: 44px; }
.meal-payment-icon-wechat { background: #07C160; }
.meal-payment-icon-wechat img { width: 32px; height: 32px; filter: brightness(0) invert(1); }
.meal-payment-method input { appearance: none; display: grid; place-content: center; width: 28px; height: 28px; margin: 0; border: 2px solid var(--control); border-radius: 50%; background: var(--surface); cursor: pointer; }
.meal-payment-method input:checked { border-color: var(--primary); background: var(--primary); }
.meal-payment-method input:checked::after { content: ''; width: 8px; height: 14px; margin-top: -3px; border: solid #FFFFFF; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.meal-payment-method input:focus-visible { outline: 3px solid var(--primary-text); outline-offset: 3px; }
.dialog.dialog-sheet:has(.meal-payment-cashier) {
  max-height: calc(100dvh - var(--safe-area-top) - 16px);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
}
.dialog-sheet:has(.meal-payment-cashier) .dialog-heading,
.meal-payment-details { width: min(360px, calc(100% - 2 * var(--page-gutter))); margin-inline: auto; background: var(--surface); }
.dialog-sheet:has(.meal-payment-cashier) .dialog-heading { align-items: center; padding-block: 4px; border-radius: var(--radius-modal) var(--radius-modal) 0 0; }
.dialog-sheet:has(.meal-payment-cashier) .dialog-heading::before { content: none; }
.dialog-sheet:has(.meal-payment-cashier) .dialog-heading h2 { grid-row: 1; padding-top: 0; }
.dialog-sheet:has(.meal-payment-cashier) .dialog-heading h2:focus { outline: none; }
.dialog-sheet:has(.meal-payment-cashier) .dialog-heading .close-button { grid-area: 1 / 1; border: 0; }
.dialog-sheet:has(.meal-payment-cashier) #dialog-content { flex: 0 0 auto; padding: 0; overflow: visible; }
.meal-payment-details { padding: var(--space-content) var(--page-gutter); border-radius: 0 0 var(--radius-modal) var(--radius-modal); }
.meal-payment-summary { text-align: center; }
.meal-payment-cashier p { font-size: var(--font-supporting); color: var(--text-secondary); }
.meal-payment-summary > strong { display: block; margin-block: 2px 8px; font-size: 2.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.meal-payment-summary > strong [aria-hidden] { margin-inline-end: 4px; font-size: 0.72em; }
.meal-payment-channel { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding-block: 8px; border-block: 1px solid var(--border); color: var(--text-secondary); font-size: var(--font-supporting); }
.meal-payment-channel strong { display: flex; align-items: center; gap: 8px; color: var(--text); }
.meal-payment-channel img { border-radius: 4px; }
.meal-payment-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 48px; margin-block: 12px 8px; border: 1px solid var(--control); border-radius: 8px; }
.meal-payment-slots span { display: grid; place-items: center; }
.meal-payment-slots span + span { border-inline-start: 1px solid var(--control); }
.meal-payment-slots .is-filled::before { content: ''; width: 0.65em; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.meal-payment-hint, .meal-payment-error { text-align: center; }
.meal-payment-cashier .meal-payment-error { color: var(--rose); margin-top: 4px; }
.meal-payment-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: clamp(12px, 6dvh, 48px); padding: 8px 8px calc(8px + var(--safe-area-bottom)); background: var(--disabled-surface); }
.meal-payment-keypad button { display: grid; place-items: center; min-height: 56px; padding: 4px; border: 1px solid var(--control); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 1.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.meal-payment-keypad button:active { background: var(--surface-tint); }
.meal-payment-keypad [data-payment-key="0"] { grid-column: 2; }

.meal-location-button { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; min-width: 56px; max-width: 100%; padding: 8px 4px; border-radius: 10px; background: transparent; color: var(--primary-text); font-size: 1.125rem; font-weight: 600; text-align: left; }
.meal-location-button > span { min-width: 0; overflow-wrap: anywhere; }
.meal-location-button .icon { width: 24px; height: 24px; }
.meal-location-button:disabled { color: var(--text-secondary); background: transparent; }


.meal-point-card { position: relative; display: grid; grid-template-columns: clamp(80px, 24vw, 96px) minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); min-width: 0; }
.meal-point-card:hover { border-color: var(--border-accent); }
.meal-point-card:active { background: var(--surface-tint); }
.meal-point-card:focus-within { outline: 3px solid var(--primary-text); outline-offset: 3px; }
.meal-point-cover { width: 100%; height: 96px; object-fit: cover; border-radius: var(--radius-control); background: var(--surface-tint); }
.meal-point-info { display: grid; gap: 4px; min-width: 0; }
.meal-point-open { display: block; width: 100%; padding: 0; margin: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; line-height: 1.4; overflow-wrap: anywhere; }
.meal-point-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.meal-point-open:focus-visible { outline: none; }
.meal-point-tags, .meal-point-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.meal-point-tags { align-items: flex-start; }
.meal-point-modes > span, .meal-point-coupon { padding: 1px 6px; border: 1px solid transparent; border-radius: 6px; color: var(--primary-text); background: var(--surface-tint); font-size: 1.125rem; line-height: 1.4; }
.meal-point-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 1.125rem; line-height: 1.5; }
.meal-point-rating { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline; color: var(--primary-text); }
.meal-point-rating strong { font-weight: 600; }
.meal-point-sales { color: var(--text-secondary); }
.meal-point-price { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--text-secondary); font-size: 1.125rem; line-height: 1.5; }
.meal-point-price strong { font-weight: 600; margin-inline: 4px; color: var(--text); }
.meal-point-price .meal-distance { color: var(--text-secondary); }
body.large-text .meal-point-card { grid-template-columns: 80px minmax(0, 1fr); }
body.large-text .meal-point-cover { height: 112px; }
body.extra-large-text .meal-point-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
body.extra-large-text .meal-point-cover { height: 88px; }
@media (max-width: 359px) {
  .meal-point-card { padding: 12px; gap: 12px; grid-template-columns: 80px minmax(0, 1fr); }
}

/* A quiet, single-row toolbar keeps the service list close to the header. */
.meal-point-controls { position: relative; z-index: 3; margin: 0 calc(-1 * var(--page-gutter)) 4px; padding: 0 var(--page-gutter); background: transparent; border: 0; }
.meal-point-toolbar { display: flex; align-items: stretch; min-height: 56px; }
.meal-point-filter-toggle { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 56px; min-height: 56px; padding: 8px 3px; background: transparent; font-size: 1.125rem; line-height: 1.5; color: var(--text-secondary); border-radius: 8px; }
.meal-point-filter-toggle > span { white-space: nowrap; }
.meal-point-filter-toggle .icon { width: 13px; height: 13px; }
.meal-point-filter-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.meal-point-filter-toggle.is-active, .meal-point-filter-toggle[aria-expanded="true"] { color: var(--primary-text); font-weight: 600; }
.meal-point-sort-options { flex: 4 1 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
.meal-point-sort-options button { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 56px; padding: 8px 2px; color: var(--text-secondary); background: transparent; font-size: 1.125rem; line-height: 1.5; border-radius: 8px; }
.meal-point-sort-options button > span:first-child { white-space: nowrap; }
.meal-point-sort-options button[aria-pressed="true"] { color: var(--primary-text); font-weight: 600; }
.meal-point-sort-options button[aria-pressed="true"]::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--primary); border-radius: 2px; }
.meal-point-sort-arrow { flex: 0 0 auto; font-size: var(--font-supporting); }
.meal-point-filter-panel { position: absolute; z-index: 1; top: 100%; left: 0; right: 0; padding: 6px var(--page-gutter) 18px; max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--radius-card) var(--radius-card); box-shadow: var(--shadow-floating); }
.meal-point-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.125rem; }
.meal-point-filter-heading .meal-text-link { font-weight: 400; }
.meal-point-mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.meal-point-mode-options button { min-height: 56px; min-width: 0; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--background); font-size: 1.125rem; line-height: 1.5; }
.meal-point-mode-options button[aria-pressed="true"] { border-color: var(--primary-text); background: var(--surface-tint); color: var(--primary-text); font-weight: 600; }
body.large-text .meal-point-toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.large-text .meal-point-sort-options { display: contents; }
body.extra-large-text .meal-point-toolbar, body.large-text .meal-point-mode-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.meal-toast { position: fixed; z-index: 20; left: 50%; bottom: calc(var(--meal-bar-height, 0px) + 20px + var(--safe-area-bottom)); transform: translateX(-50%); width: max-content; max-width: min(calc(100% - 40px), 400px); padding: 12px 18px; border-radius: var(--radius-control); background: #102A63F5; color: #FFFFFF; box-shadow: var(--shadow-floating); font-size: 1.125rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; pointer-events: none; }

/* List navigation keeps location beside Back and orders within easy reach. */
body.on-meal-list main { padding-top: 8px; padding-bottom: calc(16px + var(--safe-area-bottom)); }
body.on-meal-list .meal-stack { gap: 8px; }
body.on-meal-list .meal-subsidy-tip { margin-bottom: 4px; }
body.on-meal-list .meal-page-heading { display: flex; padding-right: calc(var(--capsule-width) + var(--capsule-right) + var(--capsule-gap)); }
body.on-meal-list .meal-back { flex: 0 0 56px; }
.meal-heading-location { flex: 1; min-width: 0; }
.meal-heading-location .meal-location-button { gap: 5px; font-size: 1.125rem; line-height: 1.4; }
.meal-heading-location .meal-location-button .icon { flex: 0 0 22px; width: 22px; }
.meal-tab-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: var(--tab-bar-padding); padding-bottom: calc(var(--tab-bar-padding) + var(--safe-area-bottom)); box-shadow: var(--shadow-nav); }
.meal-tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; min-width: 0; padding: 2px 8px; border-radius: 10px; background: transparent; color: var(--text-secondary); font-size: 1.125rem; line-height: 1.4; }
.meal-tab-item .icon { width: 26px; height: 26px; }
.meal-tab-item[aria-current="page"] { color: var(--primary-text); font-weight: 600; }

.meal-point-search { margin: 0 0 4px; }

/* Multi-day schedules use the same scalable controls and shared surfaces. */
.meal-plan-entry-button { width: 100%; margin-bottom: var(--space-content, 12px); }
.meal-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px; }
.meal-plan-actions > button { flex: 1 1 120px; }
.meal-plan-group > summary { display: list-item; min-height: 56px; padding-block: 12px; cursor: pointer; color: var(--text); font-weight: 600; }
.meal-plan-entry { padding-block: var(--space-detail,16px); border-top: 1px solid var(--border); }
.meal-plan-entry > p, .meal-plan-refund { margin-block: 8px; }
.meal-plan-entry h3 { font-size: 1.25rem; }
.meal-plan-choice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; overflow-wrap: anywhere; cursor: pointer; }
.meal-plan-choice input { flex: 0 0 24px; width: 24px; height: 24px; accent-color: var(--primary-action); }
.meal-plan-copy { min-width: 0; margin-block: 12px; padding: 12px; border: 1px solid var(--control); border-radius: var(--radius-control); }
#meal-content .meal-plan-refund { padding: 12px; border-radius: var(--radius-control); background: var(--surface-tint); }
#meal-content .meal-plan-entry .meal-price-list { margin-block: 8px; }
#meal-content .meal-plan-entry { scroll-margin-top: calc(var(--app-header-height, 64px) + 16px); }
.meal-plan-group summary:focus-visible { outline: 3px solid var(--primary-text); outline-offset: 3px; }
.meal-bottom:has([data-plan-action]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

/* Seven-day ordering keeps restaurant, date, time and menu in one continuous surface. */
.meal-week-editor { min-width: 0; background: var(--surface); border-radius: var(--radius-panel); overflow: clip; }
.meal-week-section { padding: var(--space-detail); border-bottom: 1px solid var(--border); }
.meal-week-section:last-child { border-bottom: 0; }
.meal-week-section .meal-mode-options { margin-top: var(--space-content); }
.meal-week-dates { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; scroll-padding-inline: 16px; }
.meal-week-dates::-webkit-scrollbar { display: none; }
.meal-week-dates button { display: flex; flex: 0 0 7rem; flex-direction: column; justify-content: center; gap: 4px; min-width: 56px; min-height: 72px; padding: 8px 4px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); }
.meal-week-dates button > span { font-size: var(--font-supporting); white-space: nowrap; }
.meal-week-dates button > strong { font-size: var(--font-body); }
.meal-week-dates button[aria-pressed="true"], .meal-week-times button[aria-pressed="true"] { background: var(--primary-action); border-color: var(--primary-action); color: var(--on-primary); }
.meal-week-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 8px; margin-top: var(--space-content); }
.meal-week-times button { min-width: 0; min-height: 56px; padding: 8px; background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius-control); font-size: var(--font-body); overflow-wrap: anywhere; }
.meal-week-time-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meal-week-time-heading > h2 { flex: 1; min-width: 0; }
.meal-week-more { flex: 0 1 auto; max-width: 50%; margin: 0; padding: 0; color: var(--primary-text); font-size: var(--font-supporting); font-weight: 400; line-height: 1.5; text-align: right; text-decoration: none; }
.meal-week-saved > summary { min-width: 56px; min-height: 56px; padding-block: 12px; color: var(--primary-text); cursor: pointer; font-size: var(--font-supporting); }
.meal-week-saved { margin-top: var(--space-content); }
.meal-week-section > h2, .meal-week-time-heading > h2 { text-wrap: balance; }

.meal-slot-context { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--font-supporting); font-weight: 400; line-height: 1.5; }
.meal-week-menu > .meal-menu-layout { margin-top: var(--space-content); }
.meal-week-menu > .meal-menu-layout .meal-category-nav { top: calc(var(--app-header-height) + 12px); }

@media (max-width: 389px) {
  .meal-week-menu .meal-food-card { grid-template-columns: minmax(0, 1fr); }
  .meal-week-menu .meal-food-picture { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0 8px; }
  .meal-week-menu .meal-food-picture img { flex: 0 0 64px; width: 64px; max-width: 64px; }
  .meal-week-menu .meal-food-picture > span { min-width: 0; }
}