/* ============================================================================
   shared/base.css — shell, chrome and every component carried over from
   mockup v5 unchanged: sidebar, search pill, filter rows, results grid, map,
   cook card, kitchen profile, day cards, dish cards, cart, checkout, portal.

   Colours and sizes come from tokens.css. Nothing here defines a raw hex
   unless it is a one-off shade with no token.

   New v6 components (order lifecycle, chat, verticals, sort bar, cook
   signup, QR) live in components.css so the v5 inheritance stays legible.
   ========================================================================== */

/* ===== TOKENS ===== */

* { box-sizing: border-box; margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background: var(--bg-light); color: var(--text-dark); display: flex; min-height: 100vh; }
button { font: inherit; }
:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }

/* ===== ICONS ===== */
.ic { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.ic-lg { width: 18px; height: 18px; }
[data-icon] { display: inline-flex; }

/* ===== SIDEBAR ===== */
.sidebar { width: var(--sidebar-width); background: #FFF; border-right: 1px solid var(--border-color);
  height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column;
  padding: 20px 16px; z-index: 150; }
.brand-logo { font-size: 21px; font-weight: 800; color: var(--dark-black); display: flex;
  align-items: center; gap: 10px; margin-bottom: 24px; text-decoration: none; }
.brand-mark { color: var(--primary-yellow); background: var(--dark-black); padding: 7px;
  border-radius: 9px; display: inline-flex; }
.brand-mark .ic { width: 18px; height: 18px; }
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nav-item a { display: flex; align-items: center; gap: 13px; padding: 11px 14px;
  color: var(--text-dark); text-decoration: none; font-size: 15px; font-weight: 600;
  border-radius: 8px; }
.nav-item a:hover { background: #FAFAFA; }
.nav-item.active a { background: #F4F4F5; box-shadow: inset 3px 0 0 var(--primary-yellow); }
.nav-item .ic { color: var(--text-muted); }
.nav-item.active .ic { color: var(--dark-black); }
.chef-onboarding-card { margin-top: auto; background: #FFF9E6; border: 1px dashed #F7CA53;
  border-radius: 12px; padding: 16px; text-align: center; }
.chef-onboarding-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.chef-onboarding-card p { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.45; }
.btn-join-cook { background: var(--dark-black); color: #FFF; font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 20px; border: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px; }

.main-wrapper { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ===== SEARCH BAR ===== */
.top-header { min-height: var(--header-h); background: #FFF; border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; position: sticky; top: 0; z-index: 90; }
.mobile-menu-btn { display: none; background: none; border: 1px solid var(--border-color);
  border-radius: 10px; width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; }

.search-pill { display: flex; align-items: stretch; background: #FFF; border: 1px solid var(--border-color);
  border-radius: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; }
.pill-seg { display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 7px 16px; border-right: 1px solid var(--border-color); min-width: 0; }
.pill-seg:last-of-type { border-right: none; }
.pill-seg label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.pill-seg input, .pill-seg select { border: none; background: transparent; outline: none;
  font-size: 14px; font-weight: 600; color: var(--text-dark); padding: 0; cursor: pointer; max-width: 150px; }
.pill-seg input#zip-input { cursor: text; width: 74px; }
.btn-search { background: var(--primary-yellow); color: var(--dark-black); border: none; width: 42px;
  margin: 6px; border-radius: 50%; cursor: pointer; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; }
.btn-search:hover { background: var(--primary-yellow-hover); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fulfilment-toggle { display: flex; background: #F4F4F5; padding: 3px; border-radius: 20px; }
.toggle-btn { padding: 6px 14px; border: none; border-radius: 16px; font-weight: 600; font-size: 13px;
  cursor: pointer; background: transparent; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.toggle-btn.active { background: #FFF; color: var(--text-dark); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.toggle-btn:disabled { cursor: not-allowed; opacity: .55; }
.toggle-btn .soon { font-size: 10px; font-weight: 700; background: #E4E4E7; color: var(--text-muted);
  padding: 1px 5px; border-radius: 6px; }
.btn-black { background: var(--dark-black); color: #FFF; padding: 9px 16px; border-radius: 20px;
  border: none; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; }
.btn-ghost { background: #F4F4F5; color: var(--text-dark); }

/* ===== FILTER ROWS ===== */
.filter-section { background: #FFF; border-bottom: 1px solid var(--border-color);
  padding: 14px 24px; display: flex; flex-direction: column; gap: 11px; }
.row-1-categories { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.row-1-categories::-webkit-scrollbar, .row-subcategories::-webkit-scrollbar { display: none; }
.cat-chip { display: flex; align-items: center; gap: 8px; background: #F4F4F5; padding: 9px 16px;
  border-radius: 20px; font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; color: var(--text-dark); }
.cat-chip .ic { color: var(--text-muted); }
.cat-chip.active { background: var(--primary-yellow); border-color: #e5b742; }
.cat-chip.active .ic { color: var(--dark-black); }
.row-subcategories { display: flex; gap: 20px; border-top: 1px solid #F4F4F5; padding-top: 9px;
  overflow-x: auto; scrollbar-width: none; }
.row-subcategories.hidden { display: none !important; }
.subcat-link { color: var(--text-muted); font-size: 14px; font-weight: 600; white-space: nowrap;
  padding-bottom: 4px; border-bottom: 2px solid transparent; cursor: pointer; }
.subcat-link.active { color: var(--dark-black); border-bottom-color: var(--dark-black); }

/* ===== RESULTS + MAP ===== */
.search-layout { display: flex; align-items: flex-start; flex: 1; min-height: 0; }
.results-col { flex: 1 1 58%; min-width: 0; padding: 22px 24px; }
.map-col { flex: 0 0 42%; position: sticky; top: calc(var(--header-h) + 1px);
  height: calc(100vh - var(--header-h)); padding: 16px 16px 16px 0; }
.map-col.hidden, .results-head.hidden { display: none !important; }
#map { width: 100%; height: 100%; border-radius: 16px; border: 1px solid var(--border-color); background: #E8EDE6; }
.map-caption { position: absolute; left: 28px; bottom: 28px; right: 28px; z-index: 500;
  background: rgba(255,255,255,.94); border: 1px solid var(--border-color); border-radius: 10px;
  padding: 8px 12px; font-size: 12px; color: var(--text-muted); pointer-events: none; line-height: 1.4; }

.results-head { margin-bottom: 16px; }
.results-title { font-size: 21px; font-weight: 700; margin-bottom: 3px; }
.results-sub { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.price-pin { background: #FFF; border: 1px solid var(--border-color); border-radius: 18px;
  padding: 5px 11px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.18);
  white-space: nowrap; text-align: center; }
.price-pin.active { background: var(--dark-black); color: #FFF; border-color: var(--dark-black); }

/* ===== COOK CARD ===== */
.cook-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.cook-card { background: #FFF; border-radius: 16px; border: 1px solid var(--border-color);
  overflow: hidden; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cook-card:hover, .cook-card.pin-hover { box-shadow: 0 8px 18px rgba(0,0,0,.08); border-color: #D4D4D8; }
.cook-img-wrapper { height: 168px; width: 100%; background: #E4E4E7; position: relative; }
.cook-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cook-badge { position: absolute; top: 11px; left: 11px; background: rgba(255,255,255,.95);
  padding: 5px 10px; border-radius: 14px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px; }
.cook-badge .ic { width: 13px; height: 13px; color: #15803D; }
.heart-btn { position: absolute; top: 9px; right: 9px; background: none; border: none; color: #FFF;
  cursor: pointer; padding: 4px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); display: flex; }
.heart-btn .ic { width: 20px; height: 20px; }

.cook-info { padding: 12px 15px 14px; }
.cook-top-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cook-name { font-size: 16px; font-weight: 700; }
.cook-rating { font-size: 13px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.cook-rating .ic { width: 13px; height: 13px; }
.cook-rating em { font-style: normal; color: var(--text-muted); font-weight: 500; }
.cook-specialty { font-size: 13px; color: var(--text-muted); margin: 2px 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* one condensed meta row instead of three stacked lines */
.cook-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px;
  color: var(--text-dark); flex-wrap: wrap; }
.cook-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cook-meta .ic { color: var(--text-muted); width: 14px; height: 14px; }

.cook-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid #F4F4F5; }
.cook-price { font-size: 15px; font-weight: 700; }
.cook-price em { font-style: normal; font-weight: 500; color: var(--text-muted); font-size: 12.5px; }
.cutoff-chip { display: inline-flex; align-items: center; gap: 5px; background: #FEF3C7;
  color: #92400E; border-radius: 12px; padding: 4px 9px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; }
.cutoff-chip .ic { width: 12px; height: 12px; }

/* empty states */
.empty-state { background: #FFF; border: 1px solid var(--border-color); border-radius: 16px;
  padding: 34px 28px; max-width: 560px; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }
.empty-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== COOK PROFILE (v4 + UX pass) =====
   Tokens align with Homemade_PartA_Handoff §1.3 on the kitchen view. */

body.kitchen-view .filter-section { display: none !important; }
body.kitchen-view .font-serif,
body.kitchen-view .profile-title,
body.kitchen-view .dish-price,
body.kitchen-view .feat-price,
body.kitchen-view .menu-heading h2,
body.kitchen-view .about-cook-name,
body.kitchen-view .reviews-score .big {
  font-family: Fraunces, Georgia, serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 10;
  font-weight: 620;
}

.cook-header-view.hidden, .section-header.hidden, .profile-shell.hidden,
.profile-hero.hidden, .profile-crumb-row.hidden { display: none !important; }

/* —— Change 1: breadcrumbs —— */
.profile-crumb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  min-height: 44px; }
.profile-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); overflow: hidden;
  width: 100%; white-space: nowrap; }
.profile-crumbs button, .profile-crumbs .crumb-expand {
  background: none; border: none; color: var(--ink-soft); font: inherit; font-weight: 600;
  cursor: pointer; padding: 8px 4px; min-height: 44px; flex-shrink: 0; }
.profile-crumbs button:hover, .profile-crumbs .crumb-expand:hover { color: var(--ink); text-decoration: underline; }
.profile-crumbs .crumb-cur { color: var(--ink); flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.profile-crumbs .crumb-sep { opacity: .5; flex-shrink: 0; padding: 0 2px; }
.profile-crumbs .crumb-hidden { display: none; }
.profile-crumbs.is-expanded .crumb-hidden { display: inline; }
.profile-crumbs.is-expanded .crumb-expand { display: none; }

/* —— Change 3: hero —— */
.profile-hero { position: relative; margin-bottom: 52px; }
.profile-hero-frame { position: relative; width: 100%; border-radius: 16px; overflow: hidden;
  background: var(--brand); aspect-ratio: 16 / 9; max-height: 200px; }
@media (min-width: 981px) {
  .profile-hero-frame { aspect-ratio: 3 / 1; max-height: 240px; }
}
.profile-hero-banner { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-hero-scrim { position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(46, 32, 24, .55), transparent); pointer-events: none; }
.profile-hero-fallback { width: 100%; height: 100%; display: flex; align-items: flex-end;
  justify-content: flex-start; padding: 20px 24px 28px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,.12), transparent 45%),
    var(--brand); }
.profile-hero-fallback span { font-family: Fraunces, Georgia, serif; font-optical-sizing: none;
  font-variation-settings: "opsz" 10; font-weight: 620; font-size: clamp(22px, 4vw, 32px);
  color: #FFF; text-shadow: 0 1px 2px rgba(0,0,0,.25); max-width: 80%; }
.profile-hero-avatar { position: absolute; left: 16px; bottom: -40px; width: 80px; height: 80px;
  border-radius: 50%; object-fit: cover; border: 4px solid var(--cream);
  background: #FFF; box-shadow: 0 2px 10px rgba(46,32,24,.16); z-index: 2; }
@media (min-width: 981px) {
  .profile-hero-avatar { width: 88px; height: 88px; left: 20px; bottom: -44px; }
}

.profile-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px;
  align-items: start; padding-bottom: 96px; }
.profile-rail { position: sticky; top: calc(var(--header-h) + 12px); align-self: start;
  background: #FFF; border: 1px solid var(--border-color); border-radius: 16px; padding: 18px; }
.rail-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  background: #F0FDF4; color: #15803D; border-radius: 12px; padding: 5px 10px; margin-bottom: 8px; }
.rail-permit { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--ink); margin-bottom: 12px; }
.rail-permit .ic { color: #15803D; }
.rail-line { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap; }
.rail-line .ic { color: var(--ink-soft); width: 14px; height: 14px; }
.rail-muted { color: var(--ink-soft); font-weight: 500; }
.rail-area { font-size: 13px; font-weight: 700; margin: 10px 0 8px; }
.rail-mini-map { height: 160px; border-radius: 12px; border: 1px solid var(--border-color);
  overflow: hidden; margin-bottom: 12px; background: #E8EDE6; }
.rail-hours { margin: 12px 0 4px; }
.rail-hours h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-soft); margin-bottom: 8px; }
.rail-hour-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px;
  padding: 5px 0; color: var(--ink); }
.rail-hour-row.is-today { font-weight: 700; background: var(--cream); margin: 0 -8px; padding: 5px 8px;
  border-radius: 8px; }
.rail-hour-row.closed { color: var(--ink-soft); }
.rail-divider { border: none; border-top: 1px solid var(--border-color); margin: 14px 0; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 10px;
  border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.rail-nav a:hover { background: var(--cream); }
.rail-nav a.active { background: #F4F4F5; box-shadow: inset 3px 0 0 var(--brand); }

.profile-main { min-width: 0; }
.profile-title-row { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 8px 0 14px; flex-wrap: wrap; }
.profile-title { font-size: 28px; font-weight: 620; line-height: 1.15; color: var(--ink); }
.kitchen-search { display: flex; align-items: center; gap: 8px; background: #FFF;
  border: 1px solid var(--border-color); border-radius: 24px; padding: 8px 14px; min-width: 220px; }
.kitchen-search input { border: none; outline: none; font-size: 14px; font-weight: 600;
  width: 100%; background: transparent; }
.kitchen-search .ic { color: var(--ink-soft); }

.fulfil-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border-color); border-radius: 14px; background: #FFF;
  padding: 12px 14px; margin-bottom: 18px; font-size: 13px; font-weight: 600; }
.fulfil-strip .sep { color: var(--border-color); }
.fulfil-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: 20px; border: 1px solid var(--border-color); background: #F4F4F5;
  color: var(--ink-soft); min-height: 44px; }
.fulfil-pill.active { background: var(--ink); color: #FFF; border-color: var(--ink); }
.fulfil-pill:disabled { opacity: .55; cursor: not-allowed; }
.fulfil-pill .soon { font-size: 10px; font-weight: 700; background: #E4E4E7; color: var(--ink-soft);
  padding: 1px 5px; border-radius: 6px; }
.cutoff-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.cutoff-live.warn { background: #FEF3C7; color: #92400E; border-radius: 12px; padding: 6px 10px; }

.date-mode { display: inline-flex; background: #F4F4F5; padding: 3px; border-radius: 12px;
  margin-bottom: 10px; }
.date-mode [role="tab"] { border: none; background: transparent; padding: 10px 16px;
  border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; min-height: 44px; }
.date-mode [role="tab"][aria-selected="true"] { background: #FFF; color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* —— Change 2: daypart + slim date cards —— */
.daypart-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px; }
.daypart-toggle { display: inline-flex; background: #F4F4F5; padding: 3px; border-radius: 12px; }
.daypart-toggle [role="radio"] { border: none; background: transparent; padding: 10px 16px;
  border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; min-height: 44px; min-width: 72px; }
.daypart-toggle [role="radio"][aria-checked="true"] { background: var(--ink); color: #FFF; }
.daypart-static { font-size: 14px; font-weight: 700; color: var(--ink); padding: 10px 0; }

.date-strip-wrap { position: relative; margin-bottom: 10px; }
.date-strip-wrap::before, .date-strip-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 10px; width: 28px; z-index: 1; pointer-events: none; }
.date-strip-wrap::before { left: 0; background: linear-gradient(to right, var(--cream), transparent); }
.date-strip-wrap::after { right: 0; background: linear-gradient(to left, var(--cream), transparent); }
.date-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 4px 12px 10px; scroll-behavior: smooth; }
.date-strip::-webkit-scrollbar { display: none; }
.date-chevron { position: absolute; top: 50%; transform: translateY(-60%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color);
  background: #FFF; cursor: pointer; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.date-chevron.prev { left: -6px; }
.date-chevron.next { right: -6px; }
@media (min-width: 981px) {
  .date-chevron { display: flex; }
  .date-strip { padding-left: 28px; padding-right: 28px; }
  .date-strip-wrap::before, .date-strip-wrap::after { display: none; }
}
.day-card { flex: 0 0 76px; scroll-snap-align: start; background: #FFF;
  border: 1px solid var(--border-color); border-radius: 14px; padding: 10px 8px;
  text-align: center; cursor: pointer; min-height: 88px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; }
.day-card .dow { font-size: 11px; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; }
.day-card .dom { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.day-card .st { font-size: 10px; color: var(--ink-soft); font-weight: 700; margin-top: 4px;
  line-height: 1.25; }
.day-card[aria-current="date"], .day-card[aria-checked="true"] {
  border: none; background: var(--ink); color: #FFF; }
.day-card[aria-current="date"] .dow,
.day-card[aria-current="date"] .dom,
.day-card[aria-current="date"] .st,
.day-card[aria-checked="true"] .dow,
.day-card[aria-checked="true"] .dom,
.day-card[aria-checked="true"] .st { color: #FFF; }
.day-card.is-disabled { opacity: .5; cursor: not-allowed; background: #F4F4F5;
  border-style: dashed; }
.day-card.is-soldout .st::before { content: "⊘ "; }
.day-card.is-cutoff .st::before { content: "⌛ "; }
.day-card.is-closed .st::before { content: "– "; }
.day-fall-note { font-size: 13px; color: #92400E; background: #FEF3C7; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px; font-weight: 600; }

.menu-heading { margin: 18px 0 6px; }
.menu-heading h2 { font-size: 20px; color: var(--ink); }
.menu-heading p { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

.featured-wrap { margin: 16px 0 22px; scroll-margin-top: 96px; }
.featured-wrap h3 { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.featured-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: thin; scroll-behavior: smooth; }
.feat-card { flex: 0 0 148px; scroll-snap-align: start; background: #FFF;
  border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; position: relative; }
.feat-card img { width: 100%; height: 100px; object-fit: cover; display: block; }
.feat-card .feat-body { padding: 8px 10px 12px; }
.feat-card .feat-name { font-size: 13px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-card .feat-price { font-size: 13px; margin-top: 4px; color: var(--ink); }
.feat-add { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--brand); color: #FFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.feat-add:disabled { background: #E4E4E7; color: var(--ink-soft); cursor: not-allowed; }

.menu-section { margin-bottom: 26px; scroll-margin-top: 96px; }
.menu-section h3 { font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dish-card { background: #FFF; border: 1px solid var(--border-color); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; }
.dish-card.is-soldout { opacity: .55; }
.dish-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #E4E4E7; }
.dish-body { padding: 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.dish-name { font-size: 15px; font-weight: 800; }
.dish-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dish-portion { font-size: 12px; font-weight: 600; color: var(--ink); }
.dish-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 10.5px; font-weight: 700; background: #F4F4F5; color: var(--ink);
  border-radius: 8px; padding: 3px 7px; }
.dish-thumbs { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.dish-qty { font-size: 12px; font-weight: 700; color: #B45309; }
.dish-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 8px; }
.dish-price { font-size: 16px; color: var(--ink); }
.btn-add-cart { background: var(--brand); color: #FFF; border: none;
  padding: 10px 14px; border-radius: 16px; font-weight: 700; font-size: 13px; cursor: pointer;
  min-height: 44px; }
.btn-add-cart:hover { background: var(--brand-pressed); }
.btn-add-cart:disabled { background: #E4E4E7; color: var(--ink-soft); cursor: not-allowed; }
.qty-stepper { display: inline-flex; align-items: center; gap: 4px; background: #F4F4F5;
  border-radius: 16px; padding: 4px; }
.qty-stepper button { width: 36px; height: 36px; border-radius: 12px;
  background: #FFF; cursor: pointer; font-weight: 800; font-size: 16px;
  border: 1px solid var(--border-color); }
.qty-stepper span { min-width: 22px; text-align: center; font-weight: 700; font-size: 14px; }

/* —— v5: weekly plan compact day panels —— */
.profile-main.is-weekly .date-strip-wrap {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 25;
  background: var(--cream); padding-top: 4px; margin-bottom: 8px;
}
.weekly-panels { display: flex; flex-direction: column; gap: 10px; }
.week-panel { border: 1px solid var(--border-color); border-radius: 14px; background: #FFF;
  overflow: hidden; max-height: none; }
.week-panel.is-open { max-height: 330px; }
.week-panel-toggle { width: 100%; border: none; background: #FFF; cursor: pointer; text-align: left;
  padding: 12px 14px; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font: inherit; color: inherit; }
.week-panel-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.week-panel-toggle-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.week-panel-title { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.week-panel-meta { font-size: 12px; font-weight: 600; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.week-panel-chip { display: inline-flex; align-items: center; background: var(--cream);
  color: var(--ink); border: 1px solid #F0E6DA; border-radius: 999px; padding: 2px 8px;
  font-size: 11.5px; font-weight: 700; }
.week-panel-chevron { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; color: var(--ink-soft); transition: transform .18s ease; }
.week-panel.is-open .week-panel-chevron { transform: rotate(90deg); }
.week-panel-body { display: none; padding: 0 12px 12px; }
.week-panel.is-open .week-panel-body { display: block; }
.week-panel-subline { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 0 0 8px; }

.week-dish-rail-wrap { position: relative; }
.week-dish-row { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 6px;
  scroll-behavior: smooth; }
.week-dish-row::-webkit-scrollbar { display: none; }
.week-dish-chevron { position: absolute; top: 50%; transform: translateY(-70%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-color);
  background: #FFF; cursor: pointer; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.week-dish-chevron.prev { left: -4px; }
.week-dish-chevron.next { right: -4px; }
.week-dish-chevron:disabled { opacity: .35; cursor: default; }
@media (min-width: 981px) {
  .week-dish-rail-wrap.has-overflow .week-dish-chevron { display: flex; }
  .week-dish-rail-wrap.has-overflow .week-dish-row { padding-left: 28px; padding-right: 28px; }
}

.week-dish-card { flex: 0 0 210px; width: 210px; height: 250px; scroll-snap-align: start;
  background: #FFF; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; }
.week-dish-card.is-soldout { opacity: .55; }
.week-dish-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.week-dish-photo { width: 100%; height: 118px; padding: 0; border: none; cursor: pointer;
  display: block; background: #E4E4E7; overflow: hidden; border-radius: 0; }
.week-dish-photo img { width: 100%; height: 118px; object-fit: cover; display: block; }
.week-dish-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.week-dish-cat { font-size: 11px; font-weight: 600; color: var(--ink-soft); line-height: 1.2;
  text-transform: none; }
.week-dish-name { font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: none;
  padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.week-dish-name:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-radius: 4px; }
.week-dish-portion { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-dish-tags { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.week-dish-tags .tag { font-size: 10px; padding: 2px 6px; flex: 0 0 auto; }
.week-dish-qty { font-size: 11px; font-weight: 700; color: #B45309; }
.week-dish-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 4px; }
.week-dish-price { font-size: 14px; font-weight: 800; color: var(--ink); }
.week-dish-foot .btn-add-cart { padding: 8px 12px; font-size: 12px; min-height: 36px; border-radius: 14px; }
.week-dish-foot .qty-stepper { padding: 2px; gap: 2px; }
.week-dish-foot .qty-stepper button { width: 30px; height: 30px; border-radius: 10px; font-size: 14px; }
.week-dish-foot .qty-stepper span { font-size: 13px; min-width: 18px; }

@media (max-width: 980px) {
  .week-dish-card { flex: 0 0 78%; width: 78%; max-width: 260px; }
}

.dish-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 280;
  display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
@media (min-width: 640px) {
  .dish-detail-overlay { align-items: center; }
}
.dish-detail-sheet { background: #FFF; border-radius: 18px; width: min(440px, 100%);
  max-height: min(88vh, 640px); overflow: auto; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.dish-detail-sheet img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 18px 18px 0 0; background: #E4E4E7; }
.dish-detail-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.dish-detail-cat { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.dish-detail-name { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.dish-detail-desc { font-size: 14px; line-height: 1.55; color: #4B5563; }
.dish-detail-meta { font-size: 13px; color: var(--ink); font-weight: 600; }
.dish-detail-meta span { color: var(--ink-soft); font-weight: 500; }
.dish-detail-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.92); cursor: pointer;
  font-weight: 800; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.dish-detail-sheet { position: relative; }
.dish-detail-actions { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }

.weekly-summary-bar { position: sticky; bottom: 12px; z-index: 40; margin-top: 18px;
  background: var(--ink); color: #FFF; border-radius: 16px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.weekly-summary-bar button { background: var(--brand); color: #FFF;
  border: none; border-radius: 20px; padding: 10px 16px; font-weight: 800; cursor: pointer;
  min-height: 44px; }

.reviews-block { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px;
  margin: 28px 0; scroll-margin-top: 96px; }
.reviews-score { background: #FFF; border: 1px solid var(--border-color); border-radius: 16px;
  padding: 20px 16px; text-align: center; }
.reviews-score .big { font-size: 42px; line-height: 1; color: var(--ink); }
.reviews-score .of { font-size: 13px; color: var(--ink-soft); font-weight: 600; margin: 6px 0; }
.reviews-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; scroll-behavior: smooth; }
.review-card { flex: 0 0 260px; scroll-snap-align: start; background: #FFF;
  border: 1px solid var(--border-color); border-radius: 14px; padding: 14px; }
.review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.review-av { width: 40px; height: 40px; border-radius: 50%; background: #F4F4F5;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.review-name { font-size: 14px; font-weight: 700; }
.review-meta { font-size: 11.5px; color: var(--ink-soft); }
.review-verdict { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 8px;
  padding: 3px 8px; margin-bottom: 8px; }
.review-verdict.loved { background: #F0FDF4; color: #15803D; }
.review-verdict.nope { background: #FEF2F2; color: #B91C1C; }
.review-text { font-size: 13px; line-height: 1.5; color: #4B5563;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* —— Change 4: About this kitchen —— */
.about-cook { background: #FFF; border: 1px solid var(--border-color); border-radius: 16px;
  padding: 20px; margin: 22px 0; scroll-margin-top: 96px;
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
.about-cook-portrait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px;
  border: 3px solid var(--cream); box-shadow: 0 2px 10px rgba(46,32,24,.1); background: #E4E4E7; }
.about-cook-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.about-cook-tags .tag { background: var(--cream); color: var(--ink); border: 1px solid #F0E6DA; }
.about-cook-name { font-size: clamp(26px, 4vw, 34px); line-height: 1.15; color: var(--ink); margin-bottom: 4px; }
.about-cook-name .surname { color: var(--brand); display: block; }
.about-cook-bio { font-size: 14px; line-height: 1.6; color: #4B5563; margin: 10px 0 6px; }
.about-cook-bio.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.about-read-more { background: none; border: none; color: var(--ink); font-size: 13px;
  font-weight: 700; cursor: pointer; padding: 8px 0; min-height: 44px; text-decoration: underline; }
.about-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.about-actions button, .about-actions a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px;
  border-radius: 20px; border: 1px solid var(--border-color); background: #FFF;
  color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.about-actions button:hover, .about-actions a:hover { background: var(--cream); }
.about-meta { font-size: 13px; font-weight: 600; color: var(--ink); display: flex;
  flex-direction: column; gap: 4px; margin-top: 8px; }
.about-meta .rail-muted { font-weight: 500; }
.share-toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  background: var(--ink); color: #FFF; padding: 10px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 700; z-index: 400; box-shadow: 0 6px 18px rgba(0,0,0,.2); }

.allergens-block { background: #FFF; border: 1px solid var(--border-color);
  border-radius: 16px; padding: 20px; margin: 22px 0; scroll-margin-top: 96px; }
.allergens-block h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.allergens-block p { font-size: 14px; line-height: 1.6; color: #4B5563; margin-bottom: 10px; }
.safety-box { background: var(--cream); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 14px; font-size: 13px; line-height: 1.55; color: var(--ink); }

.mobile-order-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
  background: #FFF; border-top: 1px solid var(--border-color); padding: 12px 16px;
  align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.mobile-order-bar .mob-meta { font-size: 13px; font-weight: 600; }
.mobile-order-bar .mob-meta strong { font-size: 16px; display: block; }
.mobile-order-bar button { background: var(--ink); color: #FFF; border: none;
  border-radius: 20px; padding: 12px 18px; font-weight: 800; min-height: 44px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .date-strip, .featured-strip, .reviews-carousel, .week-dish-row { scroll-behavior: auto; }
  .week-panel-chevron { transition: none; }
}

@media (max-width: 980px) {
  .profile-shell { grid-template-columns: 1fr; padding-bottom: 88px; }
  .profile-rail { position: static; }
  .rail-nav { display: none; }
  .rail-mini-map { height: 140px; }
  .profile-title { font-size: 24px; }
  .dish-grid { grid-template-columns: 1fr; }
  .reviews-block, .about-cook { grid-template-columns: 1fr; }
  .about-cook-portrait { max-width: 200px; }
  .mobile-order-bar:not([hidden]) { display: flex; }
  .weekly-summary-bar { bottom: 76px; }
}

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.section-header { margin-bottom: 18px; }
.section-title { font-size: 21px; font-weight: 700; }

/* ===== CART + CHECKOUT ===== */
.cart-modal, .checkout-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 200; justify-content: flex-end; }
.modal-box { background: #FFF; width: 400px; max-width: 100%; height: 100%; padding: 26px;
  display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.icon-btn { border: none; background: none; cursor: pointer; display: flex; padding: 4px; }
.cart-items-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.checkout-center-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 300; justify-content: center; align-items: center; }
.checkout-box { background: #FFF; width: 480px; max-width: 92vw; border-radius: 16px; padding: 30px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-group input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; }

.map-toggle { display: none; position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--dark-black); color: #FFF; border: none; padding: 11px 20px; border-radius: 24px;
  font-weight: 700; font-size: 14px; z-index: 120; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  cursor: pointer; align-items: center; gap: 8px; }


/* ===== COOK PORTAL ===== */
.mode-switch { display: flex; background: #F4F4F5; padding: 3px; border-radius: 20px;
  margin-bottom: 16px; width: 100%; }
.mode-switch .toggle-btn { flex: 1; justify-content: center; padding: 7px 10px; min-height: 36px; }

#nav-cook.hidden, #nav-customer.hidden,
#chef-card-onboarding.hidden, #chef-card-portal.hidden,
#cook-portal.hidden, .cook-panel.hidden,
#cook-header-bar.hidden, #ordering-search.hidden, #ordering-header-actions.hidden,
#cook-mobile-tabs.hidden { display: none !important; }

#chef-card-portal { margin-top: auto; background: #FFF; border: 1px solid var(--border-color);
  border-radius: 12px; padding: 14px; }
#chef-card-portal .portal-kit-name { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
#chef-card-portal .portal-status-row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 12px; }
.status-chip.live { background: #F0FDF4; color: #15803D; }
.status-chip.paused { background: #FEF3C7; color: #92400E; }
.status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

body.cook-portal-view {
  --brand: #E07A2E;
  --brand-pressed: #C4661F;
  --cream: #FBF5EE;
  --ink: #2E2018;
  --ink-soft: #8C6D57;
  --primary-yellow: var(--brand);
  --primary-yellow-hover: var(--brand-pressed);
  --dark-black: var(--ink);
  --bg-light: var(--cream);
  --text-dark: var(--ink);
  --text-muted: var(--ink-soft);
  background: var(--cream);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.cook-portal-view .filter-section,
body.cook-portal-view .search-layout,
body.cook-portal-view #map-toggle,
body.cook-portal-view #mobile-order-bar { display: none !important; }
body.cook-portal-view .font-serif,
body.cook-portal-view .cp-title,
body.cook-portal-view .cp-pickup-code,
body.cook-portal-view .cp-dish-price,
body.cook-portal-view .cp-kit-name {
  font-family: Fraunces, Georgia, serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 10;
  font-weight: 620;
}

#cook-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex: 1; min-width: 0; flex-wrap: wrap; }
.cp-header-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-header-name { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cp-header-sub { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cp-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.open-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; user-select: none; min-height: 44px; }
.open-toggle input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }

.cook-portal { padding: 22px 24px 40px; flex: 1; min-width: 0;
  animation: cp-enter .32s ease both; }
.cook-panel { animation: cp-panel .22s ease both; }
@keyframes cp-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes cp-panel {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cp-check-pop {
  0% { transform: scale(.6); opacity: .4; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cook-portal, .cook-panel { animation: none; }
  .cp-check.done .cp-check-mark { animation: none; }
}

.cp-title { font-size: 26px; font-weight: 620; color: var(--ink); margin-bottom: 4px; }
.cp-lead { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.45; max-width: 42rem; }

.cp-checklist { background: #FFF; border: 1px solid var(--border-color); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 20px; }
.cp-checklist h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-soft); margin-bottom: 10px; }
.cp-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-top: 1px solid #F4F4F5; font-size: 14px; font-weight: 600; color: var(--ink); }
.cp-check:first-of-type { border-top: none; }
.cp-check-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-color);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
  color: transparent; background: #FFF; }
.cp-check.done .cp-check-mark { background: var(--brand); border-color: var(--brand); color: #FFF;
  animation: cp-check-pop .28s ease both; }
.cp-check.done { color: var(--ink-soft); font-weight: 500; }
.cp-check .cp-check-action { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand);
  background: none; border: none; cursor: pointer; min-height: 44px; padding: 0 4px; white-space: nowrap; }

.cp-seg { display: inline-flex; background: #F4F4F5; padding: 3px; border-radius: 12px;
  margin-bottom: 14px; }
.cp-seg button { border: none; background: transparent; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft); cursor: pointer; min-height: 44px; }
.cp-seg button.active { background: #FFF; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.cp-order-list { display: flex; flex-direction: column; gap: 12px; }
.cp-order { background: #FFF; border: 1px solid var(--border-color); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cp-order-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  flex-wrap: wrap; }
.cp-pickup-code { font-size: 28px; letter-spacing: .08em; color: var(--ink); line-height: 1; }
.cp-order-window { font-size: 13px; font-weight: 600; color: var(--ink); display: flex;
  align-items: center; gap: 6px; }
.cp-order-window .ic { color: var(--ink-soft); }
.cp-order-meta { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.cp-order-meta strong { color: var(--ink); font-weight: 700; }
.cp-order-items { font-size: 13px; font-weight: 600; color: var(--ink); }
.cp-order-note { font-size: 13px; background: var(--cream); border-radius: 10px; padding: 10px 12px;
  color: var(--ink); line-height: 1.45; }
.cp-order-note span { font-weight: 700; color: var(--ink-soft); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 2px; }
.cp-order-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 12px; }
.cp-order-status.ready { background: #FEF3C7; color: #92400E; }
.cp-order-status.picked { background: #F0FDF4; color: #15803D; }
.cp-order-status.noshow { background: #FEE2E2; color: #B91C1C; }
.cp-order-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-order-actions button { min-height: 44px; padding: 10px 14px; border-radius: 20px; font-weight: 700;
  font-size: 13px; cursor: pointer; border: none; }
.cp-btn-primary { background: var(--ink); color: #FFF; }
.cp-btn-ghost { background: #F4F4F5; color: var(--ink); }
.cp-empty-hint { font-size: 14px; color: var(--ink-soft); padding: 18px 4px; }

.cp-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap; }
.cp-dish-list { display: flex; flex-direction: column; gap: 10px; }
.cp-dish { display: flex; align-items: center; gap: 12px; background: #FFF;
  border: 1px solid var(--border-color); border-radius: 14px; padding: 12px; }
.cp-dish-photo { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg, #F4F4F5, #E4E4E7); }
.cp-dish-body { flex: 1; min-width: 0; }
.cp-dish-name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-dish-price { font-size: 16px; color: var(--ink); }
.cp-avail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cp-avail label { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.cp-switch { position: relative; width: 44px; height: 26px; }
.cp-switch input { opacity: 0; width: 0; height: 0; }
.cp-switch span { position: absolute; inset: 0; background: #E4E4E7; border-radius: 20px;
  cursor: pointer; transition: background .15s; }
.cp-switch span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #FFF; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cp-switch input:checked + span { background: var(--brand); }
.cp-switch input:checked + span::before { transform: translateX(18px); }

.cp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.cp-day { background: #FFF; border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 8px;
  min-width: 0; }
.cp-day.is-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cp-day-name { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase;
  margin-bottom: 6px; }
.cp-daypart { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.cp-chip { display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
  font-weight: 700; padding: 4px 6px; border-radius: 8px; background: #F4F4F5; color: var(--ink);
  white-space: nowrap; }
.cp-chip.off { background: transparent; color: var(--ink-soft); border: 1px dashed var(--border-color); }
.cp-qty { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.cp-sched-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cp-kit-cover { height: 120px; border-radius: 14px; overflow: hidden; margin-bottom: 16px;
  background: var(--brand);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(135deg, #E07A2E, #C4661F); }
.cp-kit-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-kit-name { font-size: 28px; color: var(--ink); margin-bottom: 4px; }
.cp-kit-hood { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px; }
.cp-bio { font-size: 14px; line-height: 1.55; color: var(--ink); margin-bottom: 18px; max-width: 40rem; }
.cp-bio-count { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }
.cp-reg-block { background: #FFF; border: 1px solid var(--border-color); border-radius: 14px;
  padding: 16px; }
.cp-reg-block h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-soft); margin-bottom: 8px; }
.cp-reg-block p { font-size: 14px; color: var(--ink); line-height: 1.5; }
.cp-reg-tag { display: inline-flex; margin-top: 10px; font-size: 12px; font-weight: 700;
  background: var(--cream); color: var(--ink); padding: 6px 10px; border-radius: 10px; }

.cook-mobile-tabs { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 135;
  background: #FFF; border-top: 1px solid var(--border-color);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(4, 1fr); gap: 2px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.cook-mobile-tabs button { border: none; background: transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; min-height: 48px; font-size: 11px;
  font-weight: 700; color: var(--ink-soft); cursor: pointer; border-radius: 10px; padding: 4px; }
.cook-mobile-tabs button.active { color: var(--ink); background: var(--cream); }
.cook-mobile-tabs .ic { width: 18px; height: 18px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1240px) {
  .fulfilment-toggle .soon { display: none; }
  .results-col { flex-basis: 55%; }
  .map-col { flex-basis: 45%; }
}
@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }
  .mobile-menu-btn { display: flex; }
  .map-col { position: fixed; inset: 0; z-index: 140; padding: 12px; background: var(--bg-light);
    height: 100vh; display: none; }
  .map-col.mobile-open { display: block; }
  .map-toggle { display: flex; }
  body.cook-portal-view .map-toggle { display: none !important; }
  .results-col { flex-basis: 100%; }
  .top-header { flex-wrap: wrap; }
  .search-pill { order: 3; width: 100%; }
  .pill-seg { flex: 1; padding: 7px 12px; }
  .pill-seg input, .pill-seg select { max-width: 100%; width: 100%; }
  .cook-grid { grid-template-columns: 1fr; }
  body.cook-portal-view .cook-mobile-tabs:not(.hidden) { display: grid; }
  body.cook-portal-view .cook-portal { padding: 16px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }
  .cp-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-title { font-size: 22px; }
  .cp-pickup-code { font-size: 24px; }
}
@media (max-width: 420px) {
  .cp-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-dish { flex-wrap: wrap; }
  .cp-avail { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}