/* The menu page's front of house (round 4, 9 Oct 2026): delivery bar, media
   slot, filter chips and the recommended row. Kept out of menu.css because the
   dish page loads that file too and has none of these. Loads after menu.css. */
/* Today's Picks and Recommended: the same card in a swipe row. */
.featured-card.product-card { scroll-snap-align: start; }
.rec-row { grid-auto-columns: minmax(260px, 78%); }
@media (min-width: 768px) { .rec-row { grid-auto-columns: 320px; } }
.is-stepped-aside { display: none !important; }

/* ---- Round 4: delivery bar, media slot, filter chips ---- */
.menu-where { position: relative; margin-top: var(--sp-4); font-size: var(--fs-14); }
.where__btn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 44px; margin: 0; color: var(--text-2); }
.where__btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.where__btn strong { color: var(--text); font-weight: 700; }
.where__k { font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.where__chev { transition: transform var(--t-fast) var(--ease); }
.where__btn[aria-expanded="true"] .where__chev { transform: rotate(180deg); }
.where__note { margin: 0 0 var(--sp-2); color: var(--danger); font-size: var(--fs-13); }
.where__list { position: absolute; z-index: 20; top: 100%; left: 0; width: min(380px, 100%); max-height: 60vh; overflow-y: auto; padding: var(--sp-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2); }
.where__list[hidden] { display: none; }
.where__opt { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: var(--sp-3); border: 0; border-radius: var(--r-md); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.where__opt:hover { background: var(--surface-2); }
.where__opt[aria-pressed="true"] { background: var(--accent-soft); }
:root[data-theme="dark"] .where__opt[aria-pressed="true"] { background: var(--surface-3); }
.where__opt-t { font-weight: 700; }
.where__opt-s { color: var(--text-3); font-size: var(--fs-13); }
.where__opt--add { color: var(--accent-ink); font-weight: 700; align-content: center; }
/* A guest's list: Delivery or Pickup, then where. */
.where__modes { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.where__modes .chip { min-height: 40px; }
.where__modes .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.where__hint { margin: 0; padding: var(--sp-3); color: var(--text-2); font-size: var(--fs-13); }
.where__find { padding: var(--sp-1) var(--sp-3); }
.where__status { margin: 0; padding: 0 var(--sp-3); color: var(--text-2); font-size: var(--fs-13); }
.where__status:empty { display: none; }
.where__status--bad { color: var(--danger); }

.menu-hero { position: relative; margin: var(--sp-4) 0 var(--sp-5); border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.menu-hero[hidden] { display: none; }
.menu-hero__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-hero::after { content: ""; position: absolute; inset: 0; background: var(--photo-scrim); pointer-events: none; }
.menu-hero__title { position: absolute; z-index: 1; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4); margin: 0; color: #fff; font: 700 var(--fs-24)/1.1 var(--font-display); letter-spacing: -.02em; }
@media (min-width: 768px) { .menu-hero__title { font-size: var(--fs-32); left: var(--sp-6); bottom: var(--sp-5); } }

/* ---- the Filter button, the chips for what is on, and the sheet (menu-filters.js, 10 Oct) ----
   The app's pattern: one square-ish button beside the search box, a sheet with
   the groups, chips under the search row. No rules or lines: spacing does it. */
.menu-controls .menu-search__input { min-height: 56px; }
.fbtn {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 60px; min-height: 56px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); font: 600 var(--fs-11)/1 var(--font-ui); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fbtn[hidden] { display: none; }
.fbtn__ico { display: flex; }
.fbtn__ico .ico, .fbtn__ico svg { width: 22px; height: 22px; }
.fbtn.is-on { border-color: var(--accent); }
.fbtn__n {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font: 700 var(--fs-11)/20px var(--font-ui); text-align: center;
}
.fbtn__n[hidden] { display: none; }
@media (hover: hover) { .fbtn:hover { background: var(--surface-2); } }

.menu-filters { display: flex; gap: var(--sp-2); margin: var(--sp-2) calc(var(--gutter) * -1); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
.menu-filters::-webkit-scrollbar { display: none; }
.menu-filters[hidden] { display: none; }
@media (min-width: 1024px) { .menu-filters { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; } }
.fchip { flex: none; min-height: 40px; }
.fchip__x { margin-left: 2px; color: var(--text-3); font-size: var(--fs-16); line-height: 1; }

.fsheet { flex-direction: column; max-height: 90vh; max-height: 90dvh; padding: 0; overflow: hidden; }
.fsheet[open] { display: flex; }
.fsheet__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-5) 0; }
.fsheet__head h2 { margin: 0; font: 700 var(--fs-24)/1.2 var(--font-display); letter-spacing: -.02em; }
.fsheet__clear { min-height: 44px; padding: 0 var(--sp-2); border: 0; background: none; color: var(--accent-ink); font: 700 var(--fs-14)/1 var(--font-ui); cursor: pointer; }
.fsheet__body { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: var(--sp-6); padding: var(--sp-3) var(--sp-5) var(--sp-5); overflow-y: auto; overscroll-behavior: contain; }
.fsheet__foot { flex: none; padding: var(--sp-2) var(--sp-5) calc(var(--sp-4) + var(--safe-b)); }
.fgroup__t { margin: 0 0 var(--sp-3); color: var(--text-3); font: 700 var(--fs-12)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.fgroup__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fchip--opt { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-14); }
.fchip--opt[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fgroup--row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.fgroup--row .fgroup__t { margin: 0; color: var(--text); font-size: var(--fs-16); font-weight: 600; letter-spacing: 0; text-transform: none; }
.fswitch { position: relative; flex: none; width: 52px; height: 32px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.fswitch__knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: var(--e-1); transition: transform var(--t-fast) var(--ease); }
.fswitch[aria-checked="true"] { background: var(--accent); }
.fswitch[aria-checked="true"] .fswitch__knob { transform: translateX(20px); }
@media (min-width: 768px) {
  .fsheet { width: min(480px, calc(100vw - 48px)); max-height: 80vh; }
  .fsheet .sheet__grab { display: none; }
  .fsheet__head { padding-top: var(--sp-6); }
}

/* ---- sideways rows a mouse can use (row-scroll.js, 10 Oct) ----
   Arrows only for a mouse or trackpad, and only on the side where the row
   continues; a touch screen swipes. While a mouse drags, snapping steps aside
   or it would fight every pixel. */
.rowscroll { position: relative; }
.rowscroll__row { overscroll-behavior-x: contain; }
.rowscroll__btn {
  display: none; position: absolute; top: 50%; z-index: 3; width: 36px; height: 36px; margin-top: -18px; padding: 0; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--e-2);
  font: 600 var(--fs-20)/1 var(--font-ui); cursor: pointer;
}
.rowscroll:has(.featured-scroll-row) .rowscroll__btn { top: 30%; }
/* Phones bleed the cards to the screen edges; in the desktop columns that
   showed half a card in each gutter once the row was scrolled. */
@media (min-width: 1024px) {
  .featured-scroll-row { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}
.rowscroll__btn--prev { left: 4px; }
.rowscroll__btn--next { right: 4px; }
@media (hover: hover) and (pointer: fine) {
  .rowscroll[data-prev="true"] .rowscroll__btn--prev, .rowscroll[data-next="true"] .rowscroll__btn--next { display: grid; }
  .rowscroll__btn:hover { background: var(--surface-2); }
  .rowscroll__row.is-scrollable { cursor: grab; }
  .rowscroll__row.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
}