/* ============================================================================
   HIDDEN — must come first.
   Several components set `display: flex` explicitly, which beats the browser's
   built-in `[hidden] { display: none }`. That is why the meal filters kept
   showing on Snacks even though the JS had set .hidden = true. One rule fixes
   it everywhere, and it has to stay at the top of the cascade.
   ========================================================================== */
[hidden] { display: none !important; }

/* ============================================================================
   shared/components.css — everything v6 adds on top of v5's base.css.
   Order lifecycle, chat, verticals nav, sort bar, item cards, overlays,
   toasts, QR, cook signup. Colours come from tokens.css.
   ========================================================================== */

/* ===== VERTICALS NAV (replaces v5's row-1 category chips) ================= */

.nav-section-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  padding: 14px 14px 6px; letter-spacing: .01em;
}
.nav-item .nav-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 2px 7px;
}
.nav-item.active .nav-count { background: #FFF; }

.account-card {
  margin-top: auto; border-top: 1px solid var(--border-color); padding-top: 12px;
}
.account-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text-dark);
}
.account-row:hover { background: var(--surface-sunken); }
.account-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-yellow);
  display: grid; place-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0;
  color: var(--dark-black);
}
.account-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.account-sub { font-size: 11.5px; color: var(--text-muted); }

/* ===== VERTICAL HEADER + FILTER BAR ====================================== */
/* Each vertical declares which filters it shows. Meals gets the full search
   pill; snacks and gifts get a product search; catering and produce get very
   little. The bar is built from the vertical config, never hard-coded. */

.vertical-head { padding: 20px 24px 0; }
.vertical-title {
  font-family: var(--font-serif); font-weight: 620; font-size: 26px;
  line-height: 1.15; margin-bottom: 4px;
}
.vertical-blurb { font-size: 14px; color: var(--text-muted); max-width: 62ch; }

.item-search {
  display: flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--border-color); border-radius: var(--radius-pill);
  padding: 10px 16px; box-shadow: var(--shadow-card); flex: 1; min-width: 200px; max-width: 460px;
}
.item-search input {
  border: none; outline: none; background: transparent; font: inherit;
  font-size: 14.5px; font-weight: 600; width: 100%;
}
.item-search .ic { color: var(--text-muted); }

.sort-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 24px; border-bottom: 1px solid var(--border-color); background: var(--surface);
}
.sort-bar .spacer { flex: 1; }
.sort-select {
  border: 1px solid var(--border-color); border-radius: var(--radius-pill);
  padding: 9px 14px; font: inherit; font-size: 13.5px; font-weight: 600;
  background: var(--surface); cursor: pointer; min-height: 40px;
}
.diet-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.diet-chip {
  border: 1px solid var(--border-color); background: var(--surface); cursor: pointer;
  border-radius: var(--radius-pill); padding: 7px 13px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); min-height: 36px;
}
.diet-chip[aria-pressed="true"] {
  background: var(--dark-black); color: #FFF; border-color: var(--dark-black);
}

/* ===== ITEM CARD (snacks, gifts, produce) ================================ */
/* Browse unit for listed verticals is the ITEM, not the kitchen — someone
   searching "ladoo" wants boxes, not a list of shops. */

.item-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px;
}
/* Fixed height, same as vendor and product tiles. A long name or an extra
   stock note must not make one tile taller than the row it sits in. */
.item-card {
  height: var(--tile-h);
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
}
.item-card:hover { box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.item-photo { aspect-ratio: var(--tile-media); flex: none; background: var(--surface-sunken); position: relative; }
.item-photo.no-photo { background:
  radial-gradient(circle at 25% 30%, rgba(255,255,255,.5), transparent 45%),
  linear-gradient(135deg, #F3E3C3, #E8CFA6); }
.item-photo.no-photo img { display: none; }
.item-photo.no-photo::after {
  content: attr(data-fallback); position: absolute; inset: 0;
  display: grid; place-items: center; padding: 14px; text-align: center;
  font-family: var(--font-serif); font-size: 15px; font-weight: 620; color: #7A5A33;
}
.item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-flags { position: absolute; left: 9px; bottom: 9px; display: flex; gap: 5px; flex-wrap: wrap; }
.item-flag {
  background: rgba(255,255,255,.95); border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; padding: 4px 9px;
  display: inline-flex; align-items: center; gap: 4px;
}
.item-flag .ic { width: 12px; height: 12px; }
.item-body {
  padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 5px;
  flex: 1; min-height: 0; overflow: hidden;
}
.item-name {
  font-size: 14.5px; font-weight: 700; line-height: 1.3; flex: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-seller {
  font-size: 12.5px; color: var(--text-muted); font-weight: 600; flex: none;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-seller .ic { flex: none; }
.item-seller a { color: inherit; text-decoration: none; }
.item-seller a:hover { text-decoration: underline; }
.item-desc {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.45; flex: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-card .stock-note { flex: none; }
.item-card .allergens { flex: none; }
.item-foot {
  margin-top: auto; padding-top: 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex: none;
}
.item-lead { flex: none; }
.item-price { font-size: 15px; font-weight: 800; }
.item-price .unit { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.item-price.quoted { font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.item-lead { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.btn-add {
  background: var(--primary-yellow); color: var(--dark-black); border: none;
  border-radius: var(--radius-pill); padding: 9px 15px; font-weight: 700; font-size: 13.5px;
  cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
}
.btn-add:hover { background: var(--primary-yellow-hover); }
.btn-add[disabled] { background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed; }
.btn-danger { background: var(--danger-fg); color: #FFF; }

.item-card.is-unavailable .item-photo img { filter: grayscale(1); opacity: .6; }
.stock-note {
  font-size: 12px; font-weight: 700; border-radius: var(--radius-sm);
  padding: 6px 10px; background: var(--surface-sunken); color: var(--text-muted);
}
.stock-note.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* ===== KITCHEN CARD ADDITIONS ============================================ */

.cook-card.is-paused { opacity: .62; }
.cook-card.is-paused .cook-img-wrapper img { filter: grayscale(1); }
.pause-banner {
  position: absolute; inset: auto 0 0 0; background: rgba(15,15,17,.82); color: #FFF;
  font-size: 12px; font-weight: 700; padding: 7px 11px;
}
.badge-new {
  background: var(--info-bg); color: var(--info-fg);
  font-size: 11px; font-weight: 800; border-radius: var(--radius-pill); padding: 3px 9px;
}
.fulfil-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.fulfil-flag {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 3px 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
.fulfil-flag .ic { width: 12px; height: 12px; }

/* ===== ORDER STATUS ====================================================== */

.hm-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 5px 11px;
  background: var(--surface-sunken); color: var(--text-muted);
}
.hm-status .ic { width: 13px; height: 13px; }
.hm-status.tone-ok { background: var(--ok-bg); color: var(--ok-fg); }
.hm-status.tone-warn { background: var(--warn-bg); color: var(--warn-fg); }
.hm-status.tone-danger { background: var(--danger-bg); color: var(--danger-fg); }
.hm-status.tone-info { background: var(--info-bg); color: var(--info-fg); }

.order-card {
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 11px;
}
.order-card.is-pending { border-color: #EFD08A; background: #FFFDF6; }
.order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.order-kitchen { font-size: 15px; font-weight: 700; }
.order-when { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.order-lines { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.order-line { display: flex; justify-content: space-between; gap: 12px; }
.order-line .qty { color: var(--text-muted); font-weight: 700; }
.order-note {
  font-size: 12.5px; color: var(--text-muted); background: var(--surface-sunken);
  border-radius: var(--radius-sm); padding: 8px 11px; line-height: 1.45;
}
.order-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border-color); padding-top: 11px;
}
.order-foot .total { font-weight: 800; font-size: 15px; margin-right: auto; }
.order-foot .cash-note { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

/* QR / code block — the QR carries the order id, the letters are for humans */
.code-block {
  display: flex; align-items: center; gap: 14px; background: var(--dark-black); color: #FFF;
  border-radius: var(--radius-md); padding: 14px 16px;
}
.code-qr {
  width: 76px; height: 76px; background: #FFF; border-radius: var(--radius-sm);
  padding: 6px; flex-shrink: 0;
}
.code-qr svg { width: 100%; height: 100%; display: block; }
.code-meta .label { font-size: 11px; font-weight: 700; opacity: .72; }
.code-meta .value { font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 21px; font-weight: 700; letter-spacing: .06em; }
.code-meta .hint { font-size: 11.5px; opacity: .72; margin-top: 3px; }

/* ===== CHAT ============================================================== */
/* One thread per (customer, kitchen) pair. System lines and order-change
   proposals are first-class message kinds so the record never drifts from
   the conversation. */

.chat-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-head {
  display: flex; align-items: center; gap: 11px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}
.chat-head .who { font-weight: 700; font-size: 14.5px; }
.chat-head .sub { font-size: 12px; color: var(--text-muted); }
.chat-head .spacer { flex: 1; }
.chat-log {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-light); min-height: 240px;
}
.msg { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.msg .bubble {
  padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  background: var(--surface); border: 1px solid var(--border-color);
}
.msg .at { font-size: 11px; color: var(--text-muted); }
.msg.from-customer { align-self: flex-end; align-items: flex-end; }
.msg.from-customer .bubble { background: var(--dark-black); color: #FFF; border-color: var(--dark-black); }
.msg.from-cook { align-self: flex-start; }
.msg.from-system { align-self: center; max-width: 92%; }
.msg.from-system .bubble {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; text-align: center; padding: 4px 0;
}
.msg-proposal {
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); padding: 12px; font-size: 13.5px;
}
.msg-proposal h5 { font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.msg-proposal .row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.msg-proposal .actions { display: flex; gap: 8px; margin-top: 10px; }

.chat-compose {
  display: flex; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--border-color);
  background: var(--surface);
}
.chat-compose textarea {
  flex: 1; resize: none; border: 1px solid var(--border-color); border-radius: 14px;
  padding: 10px 13px; font: inherit; font-size: 14px; min-height: 44px; max-height: 120px; outline: none;
}
.chat-compose textarea:focus { border-color: var(--border-strong); }
.chat-gate {
  padding: 14px 16px; font-size: 13px; color: var(--text-muted); text-align: center;
  border-top: 1px solid var(--border-color); background: var(--surface); line-height: 1.5;
}

/* ===== OVERLAY / SHEET =================================================== */

body.hm-overlay-open { overflow: hidden; }
.hm-overlay { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; }
.hm-overlay-scrim { position: absolute; inset: 0; background: rgba(15,15,17,.42); }
.hm-overlay-box {
  position: relative; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal); width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden;
}
.hm-overlay-box.wide { width: min(880px, calc(100vw - 32px)); }
.hm-overlay-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-color);
}
.hm-overlay-head h3 { font-size: 17px; font-weight: 700; }
.hm-overlay-body { padding: 18px; overflow-y: auto; }
.hm-overlay-foot {
  display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px;
  border-top: 1px solid var(--border-color); background: var(--bg-light);
}
.hm-dialog-text { font-size: 14.5px; line-height: 1.55; color: var(--text-dark); }
.icon-btn { background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-muted);
  border-radius: var(--radius-sm); display: inline-flex; }
.icon-btn:hover { background: var(--surface-sunken); color: var(--text-dark); }

@media (max-width: 720px) {
  .hm-overlay:not(.no-sheet) { place-items: end stretch; }
  .hm-overlay:not(.no-sheet) .hm-overlay-box {
    width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0;
  }
  .hm-overlay:not(.no-sheet) .hm-overlay-foot { flex-direction: column-reverse; }
  .hm-overlay:not(.no-sheet) .hm-overlay-foot > * { width: 100%; justify-content: center; }
}

/* ===== TOAST ============================================================= */

.hm-toast-host {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px;
  z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.hm-toast {
  pointer-events: auto; background: var(--dark-black); color: #FFF;
  border-radius: var(--radius-pill); padding: 11px 18px; font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow-modal);
  max-width: min(440px, calc(100vw - 32px));
}
.hm-toast.tone-ok { background: var(--ok-fg); }
.hm-toast.tone-danger { background: var(--danger-fg); }
.hm-toast button {
  background: none; border: none; color: var(--primary-yellow); font: inherit;
  font-weight: 700; cursor: pointer; padding: 0 0 0 6px;
}
.hm-toast.out { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) { .hm-toast.out { transition: none; } }

/* ===== SKELETON ========================================================== */

.hm-skel {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, #ECECEF 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%; border-radius: var(--radius-lg); height: 260px;
  animation: hm-shimmer 1.3s ease-in-out infinite;
}
.hm-skel.row { height: 74px; border-radius: var(--radius-md); }
@keyframes hm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .hm-skel { animation: none; } }

/* ===== FORMS (cook signup, checkout, enquiry) ============================ */

.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 11px 13px; font: inherit; font-size: 14.5px; outline: none; background: var(--surface);
  min-height: 44px;
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--border-strong); }
.field .help { font-size: 12px; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }
.field .err { font-size: 12.5px; color: var(--danger-fg); font-weight: 600; margin-top: 5px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger-fg); }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }

.callout {
  border-radius: var(--radius-md); padding: 13px 15px; font-size: 13.5px; line-height: 1.5;
  background: var(--info-bg); color: var(--info-fg); display: flex; gap: 10px;
}
.callout .ic { flex-shrink: 0; margin-top: 2px; }
.callout.warn { background: var(--warn-bg); color: var(--warn-fg); }
.callout.ok { background: var(--ok-bg); color: var(--ok-fg); }
.callout a { color: inherit; font-weight: 700; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice {
  border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px;
  cursor: pointer; background: var(--surface); text-align: left; font: inherit;
}
.choice[aria-pressed="true"] { border-color: var(--dark-black); box-shadow: inset 0 0 0 1px var(--dark-black); }
.choice .t { font-weight: 700; font-size: 14px; display: block; }
.choice .d { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: block; line-height: 1.4; }

/* ===== MOBILE ============================================================ */

.mobile-tabs { display: none; }
@media (max-width: 980px) {
  .vertical-head { padding: 16px 16px 0; }
  .sort-bar { padding: 12px 16px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .item-card { height: var(--tile-h-sm); }
  .mobile-tabs {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 200;
    background: var(--surface); border-top: 1px solid var(--border-color);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-tabs button {
    flex: 1; background: none; border: none; cursor: pointer; padding: 7px 2px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; font-weight: 700; color: var(--text-muted); min-height: 52px;
  }
  .mobile-tabs button .ic { width: 20px; height: 20px; }
  .mobile-tabs button[aria-current="true"] { color: var(--dark-black); }
  body.has-mobile-tabs .results-col { padding-bottom: 84px; }
  .hm-toast-host { bottom: 84px; }
}

/* ===== UTILITIES ========================================================= */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mobile map is a full-screen overlay toggled by the floating Map button,
   because a 42% side column is useless on a phone. */
@media (max-width: 980px) {
  .map-col { display: none; }
  .map-col.show-mobile {
    display: block; position: fixed; inset: 0; z-index: 300;
    padding: 0; height: 100vh; width: 100vw;
  }
  .map-col.show-mobile #map { border-radius: 0; height: 100%; }
}

/* ===== TWO-LEVEL VERTICALS: VENDOR GRID ==================================
   Level 1 of Snacks & sweets. Every tile is a KITCHEN, and every tile is the
   same size — fixed height, fixed 4:3 photo, text clamped. A long kitchen
   name or a wordy blurb truncates instead of pushing its row out of line.
   ======================================================================== */

.vendor-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.vendor-card {
  height: var(--tile-h);
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: box-shadow .15s, border-color .15s;
}
.vendor-card:hover, .vendor-card:focus-visible {
  box-shadow: var(--shadow-lift); border-color: var(--border-strong); outline: none;
}
.vendor-card:focus-visible { box-shadow: 0 0 0 3px var(--primary-yellow); }

.vendor-photo { aspect-ratio: var(--tile-media); flex: none; position: relative; background: var(--surface-sunken); }
.vendor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vendor-body {
  flex: 1; min-height: 0; padding: 13px 15px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.vendor-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vendor-name {
  font-size: 15.5px; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.vendor-rating {
  font-size: 13px; font-weight: 700; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.vendor-rating .ic { width: 14px; height: 14px; color: var(--primary-yellow); }
.vendor-blurb {
  font-size: 13px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vendor-match {
  font-size: 12.5px; font-weight: 700; color: var(--ok-fg);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vendor-match .ic { width: 13px; height: 13px; flex: none; }
.vendor-foot {
  margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; overflow: hidden; max-height: 26px;
}

/* ===== VENDOR DETAIL PAGE ================================================ */

.vendor-page { display: flex; flex-direction: column; gap: 20px; }

.back-link {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 13.5px; font-weight: 700; color: var(--text-muted); text-decoration: none;
  padding: 8px 12px 8px 8px; border-radius: var(--radius-pill); min-height: 40px;
}
.back-link:hover { background: var(--surface-sunken); color: var(--text-dark); }

.vendor-hero {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px;
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); overflow: hidden;
}
.vendor-hero-img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; display: block; }
.vendor-hero-body { padding: 20px 22px 22px 0; display: flex; flex-direction: column; gap: 10px; }
.vendor-hero-name { font-family: var(--font-serif); font-weight: 620; font-size: 27px; line-height: 1.15; }
.vendor-hero-meta {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.vendor-hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.vendor-hero-meta .ic { width: 14px; height: 14px; }
.vendor-hero-bio { font-size: 14px; line-height: 1.55; max-width: 62ch; }
.vendor-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

.vendor-section { font-size: 17px; font-weight: 700; }

/* Product tiles — same fixed-size treatment as the vendor cards. */
.product-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.product-tile {
  height: var(--tile-h); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
}
.product-photo { aspect-ratio: var(--tile-media); flex: none; position: relative; background: var(--surface-sunken); }
.product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-sold {
  position: absolute; inset: auto 0 0 0; background: rgba(15,15,17,.82); color: #FFF;
  font-size: 12px; font-weight: 700; padding: 7px 11px; text-align: center;
}
.product-tile.is-unavailable .product-photo img { filter: grayscale(1); opacity: .6; }
.product-body { flex: 1; min-height: 0; padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 6px; }
.product-name {
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-desc {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}

@media (max-width: 760px) {
  .vendor-hero { grid-template-columns: 1fr; }
  .vendor-hero-img { min-height: 160px; max-height: 190px; }
  .vendor-hero-body { padding: 16px 18px 18px; }
  .vendor-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .vendor-card { height: var(--tile-h-sm); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .product-tile { height: var(--tile-h-sm); }
}

/* A 404'd photo should not punch a white hole in an aligned grid. */
.vendor-photo.no-photo, .product-photo.no-photo { background:
  radial-gradient(circle at 25% 30%, rgba(255,255,255,.5), transparent 45%),
  linear-gradient(135deg, #F3E3C3, #E8CFA6); }
.vendor-photo.no-photo img, .product-photo.no-photo img { display: none; }

/* ===== SORT ON THE CUISINE ROW ===========================================
   Sorting used to own a whole horizontal band. It now sits at the right end
   of the cuisine row, which gives that vertical space back to the grid.
   ======================================================================== */

.cuisine-row { display: flex; align-items: center; gap: 16px; }
.cuisine-row .row-subcategories { flex: 1; min-width: 0; }
.row-tools { flex: none; display: flex; align-items: center; gap: 8px; }

/* ===== ALLERGENS =========================================================
   A fixed vocabulary, shown on every product tile. Free text would mean
   "milk", "dairy" and "contains milk" all appearing across listings.
   ======================================================================== */

.allergens { display: flex; gap: 5px; flex-wrap: wrap; max-height: 24px; overflow: hidden; }
.allergen {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--warn-fg); background: var(--warn-bg);
  border-radius: var(--radius-sm); padding: 3px 7px; white-space: nowrap;
}
.allergen .ic { width: 12px; height: 12px; }
.allergens.none { color: var(--ok-fg); font-size: 11.5px; font-weight: 700; align-items: center; }
.allergens.none .ic { width: 13px; height: 13px; }

/* ===== VENDOR HERO: SOCIALS ============================================== */

.vendor-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vendor-socials { display: flex; gap: 6px; flex: none; }
.vendor-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-color); color: var(--text-muted); background: var(--surface);
}
.vendor-socials a:hover { color: var(--text-dark); border-color: var(--border-strong); background: var(--surface-sunken); }

/* ===== ABOUT ============================================================= */

.vendor-about { border-top: 1px solid var(--border-color); padding-top: 22px; }
/* The facts column is reference material, not reading material — it gets a
   fixed, narrow track so the story keeps a comfortable measure and the rows
   stay scannable instead of stretching across the page. */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; margin-top: 12px; }
.about-story p { font-size: 14.5px; line-height: 1.65; max-width: 66ch; }
.about-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.about-facts { display: flex; flex-direction: column; gap: 2px; }
.about-facts {
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 4px 16px;
}
.about-fact {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border-color); align-items: start;
}
.about-fact:last-child { border-bottom: none; }
.about-fact dt {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; padding-top: 1px;
}
.about-fact dt .ic { width: 14px; height: 14px; }
.about-fact dd { font-size: 12.5px; line-height: 1.5; }

/* A missing product photo shows the dish name rather than a broken icon. */
.product-photo.no-photo::after {
  content: attr(data-fallback); position: absolute; inset: 0;
  display: grid; place-items: center; padding: 14px; text-align: center;
  font-family: var(--font-serif); font-size: 15px; font-weight: 620; color: #7A5A33;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 20px; }
  .about-fact { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
  .cuisine-row { flex-wrap: wrap; gap: 10px; }
}

/* ===== MAP AS A PREFERENCE, NOT A FIXTURE ================================
   Only Meals declares map: true, and even there it collapses. Two reasons:
   scanning "who is cooking Gujarati on Thursday" does not need half a screen
   of map, and a layout that rearranges itself on every sidebar click reads as
   unstable even when each individual arrangement is defensible.
   ======================================================================== */

.results-head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.map-switch {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-pill); padding: 9px 15px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-dark);
  cursor: pointer; min-height: 40px;
}
.map-switch:hover { border-color: var(--border-strong); background: var(--surface-sunken); }
.map-switch .ic { width: 15px; height: 15px; color: var(--text-muted); }
.map-switch[aria-pressed="false"] .ic { color: var(--primary-yellow-hover); }

/* With the map gone the results column takes the full width, so let the grid
   breathe into three or four columns instead of staying at two. */
.search-layout.no-map .cook-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 980px) {
  .map-switch { display: none; }   /* mobile already has the floating Map button */
  .results-head-row { display: block; }
}

/* ===== SELECTED DAY ======================================================
   v5 styled every day-card state except the selected one, because selection
   used to live on a different element. It is a button now, so it needs one.
   ======================================================================== */

.day-card.is-selected {
  background: var(--dark-black); border-color: var(--dark-black); color: #FFF;
}
.day-card.is-selected .dow, .day-card.is-selected .st { color: rgba(255,255,255,.78); }
.day-card:focus-visible { outline: 2px solid var(--primary-yellow); outline-offset: 2px; }

/* Dish cards reuse the product photo wrapper so they inherit the same
   fixed aspect ratio and the same missing-image fallback. */
.dish-card .product-photo { aspect-ratio: var(--tile-media); }

.cook-card:focus-visible { outline: 2px solid var(--primary-yellow); outline-offset: 2px; }


/* ===== DISH CARDS INHERIT THE SAME TILE =================================
   v5 let dish cards size to their content, which is why Kanchan's page and
   the meals menus had ragged rows while the seller grids stayed square.
   They now use the platform tile height like everything else.
   ======================================================================= */

.dish-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dish-card { height: var(--tile-h); }
.dish-card .product-photo { aspect-ratio: var(--tile-media); flex: none; }
.dish-card .dish-body { min-height: 0; overflow: hidden; padding: 12px 14px 13px; gap: 5px; }
.dish-card .dish-name {
  flex: none; font-size: 14.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dish-card .dish-desc, .dish-card .dish-portion,
.dish-card .dish-tags, .dish-card .dish-qty,
.dish-card .dish-thumbs, .dish-card .allergens { flex: none; }
.dish-card .dish-tags { max-height: 22px; overflow: hidden; }
.dish-card .dish-foot { flex: none; }

@media (max-width: 760px) {
  .dish-card { height: var(--tile-h-sm); }
  .dish-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}

/* Meals seller cards carry the pickup window and cutoff; other verticals
   have no window to show, so the line simply does not render. */
.vendor-when {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.vendor-when .ic { width: 13px; height: 13px; flex: none; }

.vendor-card.is-paused { opacity: .62; }
.vendor-card.is-paused .vendor-photo img { filter: grayscale(1); }

/* ===== TILE MEDIA — one definition for every tile photo ==================
   Fixed height + absolutely positioned image. Any picture, any intrinsic
   ratio, always the same box. Overrides the earlier per-component rules.
   ======================================================================== */

.vendor-photo, .product-photo, .item-photo, .dish-card .product-photo {
  height: var(--tile-media-h) !important;
  aspect-ratio: auto !important;
  flex: 0 0 var(--tile-media-h) !important;
  position: relative; overflow: hidden; background: var(--surface-sunken);
}
.vendor-photo > img, .product-photo > img, .item-photo > img, .dish-card .product-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Bodies take exactly what is left, and clip rather than push the tile open. */
.vendor-body, .product-body, .item-body, .dish-card .dish-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}

@media (max-width: 760px) {
  .vendor-photo, .product-photo, .item-photo, .dish-card .product-photo {
    height: var(--tile-media-h-sm) !important;
    flex: 0 0 var(--tile-media-h-sm) !important;
  }
}

/* Anything layered over a tile photo must clear the absolute image. */
.heart-btn, .cook-badge, .pause-banner, .item-flags,
.product-sold, .vendor-photo.no-photo::after,
.product-photo.no-photo::after, .item-photo.no-photo::after { z-index: 2; }

.vendor-photo.no-photo::after, .product-photo.no-photo::after,
.item-photo.no-photo::after { display: flex; align-items: center; justify-content: center; }

/* ===== SITE FOOTER ======================================================= */

.site-footer {
  border-top: 1px solid var(--border-color); background: var(--surface);
  padding: 40px 24px 24px; margin-top: 48px;
}
.footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: 32px; max-width: 1200px;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.footer-col h3 { font-size: 13px; font-weight: 800; margin-bottom: 3px; }
.footer-col a {
  font-size: 13.5px; color: var(--text-muted); text-decoration: none; line-height: 1.4;
}
.footer-col a:hover { color: var(--text-dark); text-decoration: underline; }
.footer-col a strong { color: var(--text-dark); font-weight: 700; }
.footer-pitch p { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 40ch; }
.footer-pitch .btn-black { margin-top: 4px; }

.footer-legal {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--border-color); margin-top: 32px; padding-top: 18px;
  font-size: 12.5px; color: var(--text-muted);
}
.footer-legal a { color: var(--text-muted); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; color: var(--text-dark); }
.footer-mark { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--text-dark); }
.footer-mark .ic { width: 15px; height: 15px; color: var(--primary-yellow-hover); }
.footer-note { flex: 1; min-width: 240px; line-height: 1.5; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { display: inline-flex; color: var(--text-muted); }
.footer-social a:hover { color: var(--text-dark); }

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .site-footer { padding: 32px 16px 90px; }
}

/* ===== SELLER PAGE: RAIL + MAIN ==========================================
   Modelled on the pattern every marketplace converges on, for a good reason:
   the facts you check before deciding stay pinned while you scroll the thing
   you are deciding about.
   ======================================================================== */

.vendor-shell {
  display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 26px;
  align-items: start; margin-top: 4px;
}
.vendor-main { min-width: 0; }
.vendor-rail { position: sticky; top: calc(var(--header-h) + 14px); }
.rail-card {
  background: var(--surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 18px;
}
.rail-title { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.rail-sub {
  font-size: 12px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px;
}
.rail-card .rail-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  background: var(--ok-bg); color: var(--ok-fg); border-radius: var(--radius-pill);
  padding: 5px 10px; margin-bottom: 12px;
}
.rail-card .rail-line {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; margin-bottom: 8px; line-height: 1.45;
}
.rail-card .rail-line .ic { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
.rail-card .rail-line strong { display: inline-flex; align-items: center; gap: 5px; }
.rail-card .rail-muted { color: var(--text-muted); font-weight: 500; }
.rail-card .rail-divider { border: none; border-top: 1px solid var(--border-color); margin: 14px 0; }
.rail-hours { margin-bottom: 2px; }
.rail-card .rail-hour-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 5px 0; color: var(--text-dark);
}
.rail-card .rail-hour-row.is-today {
  font-weight: 800; background: var(--surface-sunken);
  margin: 0 -8px; padding: 5px 8px; border-radius: var(--radius-sm);
}
.rail-card .rail-hour-row.closed { color: var(--text-muted); }
.rail-tier {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 5px 0;
}
.rail-tier strong { font-weight: 700; }

/* ===== HERO SIDE PANEL ===================================================
   The column beside the social icons used to be dead space. Pickup and cutoff
   are what a customer re-reads standing on the doorstep, so they live there.
   ======================================================================== */

.vendor-hero { grid-template-columns: 240px minmax(0, 1fr) 260px; }
.vendor-hero-side {
  border-left: 1px solid var(--border-color); padding: 20px 20px 20px 22px;
  display: flex; flex-direction: column; gap: 3px;
}
.vendor-hero-side h3 {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; color: var(--text-muted); margin-top: 10px;
}
.vendor-hero-side h3:first-child { margin-top: 0; }
.vendor-hero-side h3 .ic { width: 13px; height: 13px; }
.vendor-hero-side p { font-size: 12.5px; line-height: 1.5; }
.hero-side-note {
  margin-top: auto; padding-top: 12px; color: var(--text-muted); font-size: 11.5px;
}

/* ===== WEEKLY PLAN ======================================================= */

.plan-hint { margin-bottom: 12px; }
.day-card { position: relative; }
.day-tick {
  position: absolute; top: 5px; right: 5px; width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong); border-radius: 5px;
  display: grid; place-items: center;
}
.day-card.is-selected .day-tick { border-color: #FFF; background: #FFF; }
.day-tick .ic { width: 12px; height: 12px; color: var(--dark-black); }

.plan-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--dark-black); color: #FFF; border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 18px;
}
.plan-bar-main { margin-right: auto; }
.plan-bar-main strong { font-size: 15px; font-weight: 800; display: block; }
.plan-bar-sub { font-size: 12.5px; opacity: .75; }
.plan-bar .hm-status { background: rgba(255,255,255,.14); color: #FFF; }
.plan-bar .hm-status.tone-ok { background: var(--ok-fg); color: #FFF; }
.plan-bar .hm-status.tone-warn { background: rgba(255,255,255,.16); color: #FFF; }
.plan-bar .btn-black { background: var(--primary-yellow); color: var(--dark-black); }

/* One row per day, because the menu genuinely differs day to day. */
.day-menu { margin-bottom: 26px; }
.day-menu-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.day-menu-head .vendor-section { margin-right: auto; }
.day-menu-when {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
}
.day-menu-when .ic { width: 13px; height: 13px; }
.day-menu.is-weekly {
  border-left: 3px solid var(--primary-yellow); padding-left: 16px;
}

@media (max-width: 1080px) {
  .vendor-hero { grid-template-columns: 220px minmax(0, 1fr); }
  .vendor-hero-side {
    grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--border-color);
    padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 20px;
  }
  .hero-side-note { grid-column: 1 / -1; margin-top: 4px; }
}
@media (max-width: 900px) {
  .vendor-shell { grid-template-columns: 1fr; gap: 18px; }
  .vendor-rail { position: static; }
}
@media (max-width: 760px) {
  .vendor-hero { grid-template-columns: 1fr; }
  .plan-bar { position: sticky; bottom: 66px; z-index: 30; }
}

/* ===== THE BUY BUTTON IS NEVER THE THING THAT GETS CUT ===================
   Tiles are a fixed height with overflow hidden. Previously every child of
   the body was flex:none, so a dish with a long name, tags, allergens AND a
   stock line pushed the footer — the Add button — off the bottom. The middle
   block now absorbs the squeeze; the name and the footer never move.
   ======================================================================== */

.dish-meta {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
}
.dish-card .dish-foot, .product-tile .product-foot, .item-card .item-foot {
  flex: 0 0 auto; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border-color);
}
.dish-card .dish-name, .product-tile .product-name { flex: 0 0 auto; }
.dish-card .dish-desc {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== ABOUT: THE COOK, NOT THE FACTS ===================================
   The facts panel repeated the left rail line for line, so it is gone. What
   replaces it is the only thing the rail cannot carry — the person.
   ======================================================================== */

.about-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.about-portrait { margin: 0; }
.about-portrait img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--radius-lg); background: var(--surface-sunken);
}
.about-portrait.no-photo img { display: none; }
.about-portrait.no-photo::before {
  content: ""; display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(135deg, #F3E3C3, #E8CFA6);
}
.about-portrait figcaption {
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  margin-top: 10px; text-align: center; line-height: 1.4;
}
.about-story p { font-size: 14.5px; line-height: 1.7; max-width: 64ch; margin-bottom: 12px; }
.about-contact {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px !important; color: var(--text-muted); margin-top: 14px !important;
}
.about-contact .ic { width: 15px; height: 15px; flex: none; }

@media (max-width: 700px) {
  .about-grid { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
}


/* ===== HERO IMAGE — same fix as the tiles ===============================
   `height: 100%` on a grid cell with no definite row height resolves to auto,
   so the image's intrinsic height set the height of the whole hero. A tall
   portrait photo stretched the banner to 500px+. Fixed height, cover, done.
   ======================================================================= */

.vendor-hero { align-items: stretch; }
.vendor-hero-img {
  height: var(--hero-media-h) !important;
  min-height: 0 !important;
  width: 100%; object-fit: cover; display: block; align-self: stretch;
}
.vendor-hero-body { padding: 20px 22px 20px 0; }
.vendor-hero-side { padding-top: 18px; padding-bottom: 18px; }

@media (max-width: 1080px) {
  .vendor-hero-img { height: var(--hero-media-h-sm) !important; }
  .vendor-hero-body { padding: 16px 20px; }
}

/* ===== COOKING ON OTHER DAYS =============================================
   A kitchen that cooks Tue/Wed/Fri should not vanish because you happened to
   open the site on a Thursday. Same treatment as a paused kitchen: present,
   quieter, and clear about when it is next available.
   ======================================================================== */

.other-days { margin: 30px 24px 0; padding-top: 26px; border-top: 1px solid var(--border-color); }
.other-days-head { margin-bottom: 16px; }
.other-days-head h2 { font-size: 17px; font-weight: 700; }
.other-days-head p { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

.vendor-card.is-otherday .vendor-photo img { filter: saturate(.65); }
.vendor-card.is-otherday:hover .vendor-photo img { filter: none; }
.next-banner {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  background: rgba(15,15,17,.84); color: #FFF;
  font-size: 11.5px; font-weight: 700; padding: 7px 11px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.next-banner .ic { width: 13px; height: 13px; flex: none; }

@media (max-width: 980px) { .other-days { margin: 24px 16px 0; } }

/* ============================================================================
   MOBILE
   Everything below exists because of something that is wrong on a 380px
   screen, not because of a breakpoint convention.
   ========================================================================== */

/* Drawer: a panel that slides in needs a way out that is not the button that
   opened it. Dim the page, take the taps. */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 190; background: rgba(15,15,17,.42);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-scrim.show { opacity: 1; pointer-events: auto; }
body.drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .drawer-scrim { transition: none; } }

/* Bottom sheets get a grip. Without one a sheet reads as a stuck dialog. */
.sheet-grip { display: none; }
@media (max-width: 720px) {
  .hm-overlay:not(.no-sheet) .sheet-grip {
    display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--border-strong); margin: 10px auto 2px; cursor: pointer;
  }
  .hm-overlay:not(.no-sheet) .hm-overlay-head { padding-top: 8px; }
  .hm-overlay-body { padding: 16px; }
  .hm-overlay-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 980px) {

  /* The three-field search pill is three targets in 300px. Replaced by one
     line that reads like a sentence and opens a proper sheet. */
  .search-pill { display: none !important; }
  .mobile-filter {
    display: flex; align-items: center; gap: 7px; width: calc(100% - 32px);
    margin: 12px 16px 0; padding: 12px 14px; min-height: 48px;
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-pill); font: inherit; font-size: 14px; cursor: pointer;
    text-align: left; box-shadow: var(--shadow-card);
  }
  .mobile-filter .ic { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
  .mf-main { font-weight: 700; text-transform: capitalize; }
  .mf-sep { color: var(--border-strong); }
  .mf-edit {
    margin-left: auto; font-size: 12.5px; font-weight: 700;
    color: var(--primary-yellow-hover); flex: none;
  }

  /* Header keeps only what is useful with one thumb. */
  .top-header { gap: 10px; padding: 10px 14px; }
  .header-actions .fulfilment-toggle { display: none !important; }

  /* Day strip: snap to cards so a flick lands on a day rather than between
     two, and fade the right edge so it is visibly scrollable. */
  .date-strip-wrap { position: relative; }
  .date-strip-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 8px; width: 28px;
    background: linear-gradient(90deg, transparent, var(--bg-light)); pointer-events: none;
  }
  .date-strip {
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .date-strip .day-card { scroll-snap-align: start; min-width: 76px; }

  /* Every tappable thing clears 44px. */
  .heart-btn { width: 44px; height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .diet-chip, .subcat-link, .sort-select { min-height: 44px; }
  .qty-stepper button { min-width: 40px; min-height: 40px; }

  /* Cart count on the tab bar, so you never lose track of an order in flight. */
  .mobile-tabs button { position: relative; }
  .mobile-tabs button.has-badge::after {
    content: attr(data-badge); position: absolute; top: 2px; left: 50%; margin-left: 6px;
    background: var(--primary-yellow); color: var(--dark-black);
    font-size: 10px; font-weight: 800; line-height: 1;
    min-width: 17px; height: 17px; border-radius: 999px;
    display: grid; place-items: center; padding: 0 4px;
  }

  /* A running total that follows you down a fortnight of menus. */
  .order-bar {
    position: fixed; left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 150; display: flex; align-items: center; gap: 12px;
    background: var(--dark-black); color: #FFF;
    border-radius: var(--radius-pill); padding: 10px 10px 10px 18px;
    box-shadow: var(--shadow-modal);
  }
  .ob-main { margin-right: auto; line-height: 1.3; }
  .ob-main strong { display: block; font-size: 14.5px; font-weight: 800; }
  .ob-main span { font-size: 12px; opacity: .75; }
  .order-bar .btn-black { background: var(--primary-yellow); color: var(--dark-black); flex: none; }

  .plan-bar { bottom: calc(140px + env(safe-area-inset-bottom)); }
  .hm-toast-host { bottom: calc(140px + env(safe-area-inset-bottom)); }
}

@media (min-width: 981px) { .mobile-filter, .order-bar { display: none !important; } }

/* Notch and home-indicator safety. */
@media (max-width: 980px) {
  .sidebar { padding-top: calc(20px + env(safe-area-inset-top)); }
  body.has-mobile-tabs .results-col,
  body.has-mobile-tabs .vendor-page { padding-bottom: 120px; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}


/* iOS zooms into any input smaller than 16px on focus, and does not zoom back
   out cleanly. Everything typeable is 16px on a phone. */
@media (max-width: 980px) {
  input, select, textarea, .field input, .field select, .field textarea,
  .item-search input, .chat-compose textarea { font-size: 16px !important; }
}

/* Report sheet — options stack, because they are sentences not labels. */
.report-kinds { grid-template-columns: 1fr; }
.report-kinds .choice { padding: 14px; }
.field label .opt { font-weight: 500; color: var(--text-muted); }

/* Two reasons a kitchen is not in the main grid — a different day, or a
   different meal — shown as two groups because they are not the same problem. */
.other-days-group + .other-days-group {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-color);
}