:root {
  /* BRAND -- extracted from the live logo/site, identical in both themes */
  --cook-white: #ffffff;
  --cook-orange: #fc4a04;
  --cook-orange-dark: #b73b04;
  --cook-primary: var(--cook-orange);
  --cook-primary-dark: var(--cook-orange-dark);

  /* SEMANTIC -- what components reference; these are what flip in dark mode.
     MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase A1: light mode moves off
     pure white onto a warm cream canvas -- --cook-bg-elevated stays true
     white so cards/modals visibly "lift" off that warmer page background,
     which is the actual premium cue (a considered surface, not a flatter
     one). Text/border neutrals get a faint warm tint to match rather than
     staying cool-gray against a warm backdrop. */
  --cook-text: #241f1a;
  --cook-muted: #57524a;
  --cook-border: #e8e1d3;
  --cook-bg-page: #faf6ef;
  --cook-bg-surface: #fbf8f2;
  --cook-bg-elevated: var(--cook-white);
  --cook-bg-muted: #f1eadc;
  --cook-bg-disabled: #ded6c5;
  --cook-orange-ink: #b74a04;
  --cook-orange-soft: #fff3eb;
  --cook-orange-border: #c4591a;
  --cook-soft: var(--cook-orange-soft);
  --cook-footer: #1f1f1f;
  --cook-success: #166534;
  --cook-success-bg: #ecfdf5;
  --cook-success-border: #bbf7d0;
  --cook-warning: var(--cook-orange-ink);
  --cook-warning-bg: var(--cook-orange-soft);
  --cook-warning-border: var(--cook-orange-border);
  --cook-danger: #b91c1c;
  --cook-danger-bg: #fff1f2;
  --cook-danger-border: #fecdd3;
  --cook-overlay: rgba(0, 0, 0, 0.5);
  --cook-header-bg: rgba(250, 246, 239, 0.92);

  /* TYPE -- MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase A2. Fraunces
     (self-hosted, assets/fonts/) is the display face for h1-h3 and dish
     names -- a genuine, characterful serif instead of the previous Georgia
     system-font stand-in. Inter (self-hosted) replaces the Segoe UI/Arial
     system stack for everything else. Both fall back to their prior system
     stacks if the font file fails to load. */
  --cook-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cook-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* SPACING -- 8px-based scale. Existing hand-picked rem values across the
     app already land close to these steps; this names them so new/changed
     spacing has a shared vocabulary to reach for instead of one-off values. */
  --cook-space-1: 0.25rem;
  --cook-space-2: 0.5rem;
  --cook-space-3: 0.75rem;
  --cook-space-4: 1rem;
  --cook-space-5: 1.5rem;
  --cook-space-6: 2rem;
  --cook-space-7: 3rem;

  /* RADIUS / SHADOW / TOUCH TARGET */
  --cook-radius-sm: 12px;
  --cook-radius-md: 16px;
  --cook-radius-lg: 22px;
  --cook-radius: var(--cook-radius-lg);
  --cook-shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
  --cook-shadow-card: 0 12px 30px rgba(15, 23, 42, 0.06);
  --cook-shadow: var(--cook-shadow-soft);
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: barely-there elevation for filled
     (primary) buttons only -- a tinted, close, low-blur shadow rather than
     a heavy drop shadow. Secondary/outline-less buttons stay flat by
     design (see .button-secondary), so the shadow itself reinforces which
     action is primary rather than every button looking equally "raised". */
  --cook-shadow-button: 0 3px 10px rgba(183, 59, 4, 0.28);
  --cook-tap-target: 44px;

  /* Real value comes from initStickyHeaderOffset() in cookonline.js, which
     measures the actual rendered .site-header height (it differs by
     breakpoint and content) and writes it here -- this static fallback
     only covers the brief window before that JS runs on first paint.
     Anything that sticks directly below the header (e.g. .cook-shop-
     toolbar) should offset by this var, not a bare rem value, or it ends
     up stuck underneath the header instead of below it. */
  --cook-header-height: 128px;

  /* Same pattern as --cook-header-height above: initStickyHeaderOffset()
     measures .cook-shop-toolbar's real rendered height and writes it here;
     this static fallback only covers the brief window before that JS
     runs. Lets .cook-product-card h2 stick immediately below the toolbar
     instead of guessing a fixed offset. */
  --cook-shop-toolbar-height: 92px;
}

/*
 * Dark theme -- redefines SEMANTIC tokens only. --cook-orange/--cook-orange-dark
 * (the actual brand primary) are deliberately absent here: the brand colour never
 * flips between themes, only the surfaces/text/status colours built around it do.
 * Set by inline script in header.php (before first paint, to avoid a white flash)
 * and toggled by the theme switcher in the header; persisted via localStorage +
 * a cookie mirror so PHP can server-render the right attribute on next load.
 */
[data-theme="dark"] {
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: a deep, desaturated indigo-charcoal
     tone (hue ~231, low saturation) in place of the previous near-neutral
     near-black -- a background/surface tone change only, verified to keep
     the same relative contrast steps between page/surface/elevated/muted/
     border as before (each pair's WCAG contrast ratio recomputed to land
     within ~0.05 of the value it's replacing) so nothing here reads as a
     new design language, just a richer version of the same one. The brand
     orange (--cook-primary/--cook-primary-dark, set in :root above) is
     untouched -- it never had a dark-theme override and still doesn't. */
  --cook-text: #f2f2f0;
  --cook-muted: #b1b5cd;
  --cook-border: #36394a;
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase A1: a further, modest
     deepen pass on the same indigo-charcoal direction above -- each surface
     step nudged darker/richer by the same small amount, so the four levels
     (page/surface/elevated/muted) keep the same relative spacing and this
     still reads as one consistent scale, not a new palette. */
  --cook-bg-page: #0b0d16;
  --cook-bg-surface: #181a28;
  --cook-bg-elevated: #212437;
  --cook-bg-muted: #262a40;
  --cook-bg-disabled: #2a2e46;
  --cook-orange-ink: #ff9a5c;
  --cook-orange-soft: #3a2213;
  --cook-orange-border: #8a4d22;
  --cook-footer: #090a0e;
  --cook-success: #6ee7a0;
  --cook-success-bg: #123423;
  --cook-success-border: #1f5c3b;
  --cook-warning: var(--cook-orange-ink);
  --cook-warning-bg: var(--cook-orange-soft);
  --cook-warning-border: var(--cook-orange-border);
  --cook-danger: #ff8a8a;
  --cook-danger-bg: #3a1414;
  --cook-danger-border: #6b2323;
  --cook-overlay: rgba(6, 7, 12, 0.72);
  --cook-header-bg: rgba(11, 13, 22, 0.92);
  /* A colour-tinted shadow reads as mud against a dark surface -- neutral
     black elevation instead, kept equally subtle. */
  --cook-shadow-button: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase A2: self-hosted (not loaded
   from fonts.googleapis.com -- no third-party runtime request) variable
   fonts, Latin subset only. font-weight ranges let the single variable
   file stand in for every weight declared below instead of downloading a
   separate file per weight. See assets/fonts/README.md for licensing. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/fraunces-variable-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Several component classes (.button, .quantity-stepper, etc.) set their own
   display value, which overrides the native [hidden] attribute's UA style.
   This rule makes hidden="" always win, so JS show/hide toggles work as intended
   regardless of what display a component's own class sets. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 3: this is a standard
   server-rendered multi-page site (every route is a real navigation, not
   client-side routing), so a route transition means the CSS View
   Transitions API's cross-document mode -- a single opt-in declaration,
   no JS, and it degrades to a normal instant navigation in any browser
   that doesn't support it (no feature-detection needed). Deliberately
   scoped to prefers-reduced-motion: no-preference rather than relying on
   the *,*::before,*::after rule above -- the ::view-transition-* pseudo-
   elements this creates aren't ::before/::after, so that rule wouldn't
   reach them; gating the whole declaration here means reduced-motion
   users get a plain instant navigation instead, same as before this. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

body {
  margin: 0;
  font-family: var(--cook-font-body);
  line-height: 1.5;
  color: var(--cook-text);
  background: var(--cook-bg-page);
}

::selection {
  background: var(--cook-orange);
  color: #fff;
}

/*
 * PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: typography hierarchy baseline.
 * Most simpler pages (cart, checkout, sign-in, order confirmation, partner
 * signup, customer dashboard, ...) use a bare <h1>/<h2> with no wrapping
 * class -- there was no global h1/h2/h3 rule anywhere in this file, so
 * those fell all the way through to the raw browser UA stylesheet (2em/
 * 1.5em bold, em-based margins) instead of this app's own weight/spacing
 * vocabulary. This is deliberately a low-specificity baseline: every
 * existing contextual override (.hero h1, .cook-meal-hero h1,
 * .cook-cart-drawer__head h2, etc.) has higher specificity and is
 * completely unaffected -- this only fills in the pages that had nothing.
 */
h1 {
  margin: 0 0 0.5rem;
  font-family: var(--cook-font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* h2/h3 stay in the body face -- these mostly label dense UI chrome (modal
   titles, drawer headers, section labels) rather than hero/page-level
   content, where the display serif reads as considered instead of
   over-decorated. h1 (page-level headings) and dish names (.cook-dish-
   card__body strong above) are the deliberate display-font moments. */
h2 {
  margin: 0 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 750;
  line-height: 1.25;
}

h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

img {
  max-width: 100%;
  display: block;
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase B1: dish/category photos are
   sourced from different places (Wikimedia, Pexels, admin uploads) with
   varying original lighting -- this shared, subtle warm grade (gentle
   sepia lift + a touch more contrast/saturation) is applied uniformly so
   the catalog reads as one considered shoot rather than a scrapbook,
   without re-sourcing or re-processing every image file. Deliberately
   light -- this should read as "one consistent light source", not a
   heavy Instagram-style filter. */
.cook-category-tile__image,
.cook-dish-card__image,
.cook-dish-detail__image,
.cook-product-card .product-card__media img {
  filter: sepia(0.08) saturate(1.12) contrast(1.05) brightness(1.01);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Themed default for text-like form controls -- the classic dark-mode leak
   (native white input backgrounds that don't follow the page theme). Every
   more specific input/select rule elsewhere already sets its own tokenized
   background/border and simply overrides this by specificity. */
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
select,
textarea {
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  border-color: var(--cook-border);
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D4: every type="number"
   input in the app already sits inside a custom +/- stepper (recipe-line
   qty, negotiable-amount widget) -- the browser's native spinner arrows are
   redundant, clash with the custom controls, and steal width from an
   already-tight column. */
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cook-header-bg);
  border-bottom: 1px solid var(--cook-border);
  backdrop-filter: blur(16px);
  /* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 4: the border-bottom
     alone was the only depth cue, whether the page was scrolled or not.
     .is-scrolled (see initStickyHeaderShadow() in cookonline.js) adds a
     subtle shadow once the page actually has content behind the header
     to separate from, easing in/out rather than popping. */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.site-header__inner,
.page-container,
.site-footer__inner {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
}

.site-brand {
  display: inline-flex;
  align-items: center;
}

.site-brand__image {
  display: block;
  width: auto;
  max-width: 210px;
  height: 52px;
  object-fit: contain;
}

.site-search input,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--cook-tap-target);
  border: 1px solid var(--cook-border);
  border-radius: 16px;
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  font-size: 1rem;
  padding: 0.95rem 1rem;
  /* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 2: focus-state used to
     snap straight to the orange border/outline; now eases in. */
  transition: border-color 0.18s ease, outline-color 0.18s ease;
}

.field textarea {
  min-height: 72px;
}

.site-search input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D7: this was a stray
     Tailwind-default orange (#f97316) left over from before the brand
     orange (--cook-orange, #fc4a04) was locked in -- every text field on
     every form site-wide (checkout, sign-in, sign-up, addresses) was
     focus-ringing in the wrong shade. */
  outline: 2px solid rgba(252, 74, 4, 0.25);
  border-color: var(--cook-primary);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--cook-danger);
}

.field-error {
  display: block;
  color: var(--cook-danger);
  font-size: 0.82rem;
  margin-top: 0.3rem;
  /* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 2: inline validation
     used to snap into place the instant [hidden] was toggled off. CSS
     animations restart whenever an element goes from display:none to
     rendered, so this replays every time a field is revalidated invalid --
     no extra JS needed. */
  animation: cook-field-error-in 0.18s ease;
}

@keyframes cook-field-error-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-error[hidden] {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.site-nav__link {
  color: var(--cook-muted);
  font-weight: 600;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--cook-primary-dark);
}

.site-nav__action,
.site-nav__cart,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 52px;
  padding: 0.85rem 1.35rem;
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: was a one-off 18px, inconsistent
     with the --cook-radius-md (16px) every other standardized component
     already uses -- standardized onto that same token rather than a new
     magic number. */
  border-radius: var(--cook-radius-md);
  border: 1px solid var(--cook-primary);
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* A form's submit button while its own request is in flight (see
   initFormSubmitGuard() in cookonline.js) -- disabled + relabeled so a
   second tap on a slow connection can't fire a duplicate submission,
   with a visible "not clickable right now" state to match. */
.button:disabled,
.button[aria-busy="true"] {
  background: var(--cook-bg-disabled);
  border-color: var(--cook-bg-disabled);
  color: var(--cook-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.site-nav__action,
.button-primary {
  /* --cook-primary (bright brand orange) only reaches 3.43:1 contrast
     against white text, short of WCAG AA's 4.5:1 for normal-size text.
     --cook-primary-dark is the accessible fill (5.77:1); the bright
     orange still appears everywhere else (borders, icons, accents). */
  background: var(--cook-primary-dark);
  border-color: var(--cook-primary-dark);
  color: #fff;
  box-shadow: var(--cook-shadow-button);
}

.site-nav__action:hover,
.site-nav__action:focus-visible,
.button-primary:hover,
.button-primary:focus-visible {
  filter: brightness(0.88);
  transform: translateY(-1px);
}

/* Tactile pressed state -- a premium app's buttons never just swap colour
   on tap. Shared across every .button variant (primary, secondary, small)
   since they all inherit the same base transition above. */
.site-nav__action:active,
.button:active {
  transform: scale(0.97);
  box-shadow: none;
}

.site-nav__cart,
.button-secondary {
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: restraint on borders -- .button
     (shared with .button-primary above) sets a 1px solid --cook-primary
     border for every button; left un-overridden, that put a permanent
     bright-orange outline on every secondary CTA app-wide. No border at
     rest here; a subtle neutral fill (bg-muted, distinct from the page
     background in both themes) stands in for it, with the border
     reappearing only on hover/focus. */
  border-color: transparent;
  background: var(--cook-bg-muted);
  color: var(--cook-orange-ink);
}

.site-nav__cart:hover,
.site-nav__cart:focus-visible,
.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--cook-orange-border);
  background: var(--cook-soft);
  color: var(--cook-primary-dark);
}

.site-nav__cart-meta {
  color: var(--cook-primary-dark);
}


.cook-header-inner {
  display: grid;
  width: min(1380px, calc(100% - 2rem));
  min-height: 72px;
  margin: 0 auto;
  padding: 0.55rem 0;
  /* make like ocado: .cook-header-quick-actions is display:contents, so its
     children (mobile-search-toggle [hidden on desktop], theme-toggle, cart)
     auto-place as their own top-level grid items alongside logo/search/
     actions -- 5 real items before the hamburger button became a 6th. One
     more auto track up front for the hamburger, first in source order,
     keeps all 6 (hamburger, logo, search, actions, theme-toggle, cart) on
     one row instead of the last one wrapping. */
  grid-template-columns: auto auto minmax(280px, 1fr) auto auto auto;
  gap: 0.75rem;
  align-items: center;
}

.cook-hamburger-toggle {
  min-width: var(--cook-tap-target);
  min-height: var(--cook-tap-target);
  padding: 0;
}

.cook-header-quick-actions {
  display: contents;
}

.cook-header-control.cook-mobile-search-toggle {
  display: none;
}

.cook-mobile-search-head {
  display: none;
}

.cook-header-logo {
  display: inline-flex;
  align-items: center;
}

.cook-header-logo img {
  display: block;
  width: auto;
  max-width: 180px;
  height: 42px;
  object-fit: contain;
}

/* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: two flattened PNGs (light/dark ink),
   swapped by theme rather than filtered live -- see header.php for why.
   Each selector below repeats ".cook-header-logo img" (not just the single
   light/dark class) specifically to out-specificity the "display: block"
   rule directly above -- a lone ".cook-header-logo-dark { display: none }"
   loses to ".cook-header-logo img" (class+type beats class-only), which is
   exactly what silently showed both logos stacked in light mode. */
.cook-header-logo img.cook-header-logo-dark {
  display: none;
}

[data-theme="dark"] .cook-header-logo img.cook-header-logo-light {
  display: none;
}

[data-theme="dark"] .cook-header-logo img.cook-header-logo-dark {
  display: block;
}

.cook-header-search,
.cook-market-pill-inner {
  position: relative;
  min-width: 0;
}

.cook-market-pill-bar {
  border-bottom: 1px solid var(--cook-border);
  background: var(--cook-bg-surface);
}

.cook-market-pill-inner {
  display: flex;
  width: min(1380px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0.45rem 0;
}

.cook-market-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--cook-tap-target);
  padding: 0.35rem 0.75rem;
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: restraint on borders -- this pill
     sits right next to "Sign in"/"Choose location" in the header, so a
     resting-state orange border here compounded the same "too many orange
     outlines visible at once" problem. No border by default; one appears
     only on hover/focus, same treatment as .cook-header-control below. */
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}

.cook-market-pill:hover,
.cook-market-pill:focus-visible,
.cook-market-pill[aria-expanded='true'] {
  border-color: var(--cook-orange-border);
}

.cook-market-pill strong {
  font-weight: 800;
}

.cook-market-pill-menu {
  left: 0;
  right: auto;
}

.cook-search-form {
  position: relative;
}

.cook-search-input {
  width: 100%;
  min-height: 50px;
  padding: 0 3.35rem 0 1rem;
  border: 1px solid var(--cook-orange-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cook-search-input:hover {
  border-color: var(--cook-orange);
}

.cook-search-input:focus {
  outline: 0;
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 4px var(--cook-orange-soft);
}

.cook-search-button {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  display: grid;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
}

.cook-search-button:hover,
.cook-search-button:focus-visible {
  background: var(--cook-orange);
  color: #fff;
}

.cook-header-actions {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.cook-header-control {
  display: inline-flex;
  min-width: 0;
  min-height: 48px;
  padding: 0.65rem 0.9rem;
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: "Sign in" and "Choose location" no
     longer carry a permanent orange outline -- a subtle neutral fill
     (bg-muted: a shade lighter than the page in dark mode, a shade of grey
     in light mode) stands in for it at rest; the border only appears on
     hover/focus, restoring the visible-boundary affordance for keyboard/
     mouse interaction without it being a resting-state decoration. */
  border: 1px solid transparent;
  border-radius: var(--cook-radius-md);
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--cook-bg-muted);
  color: var(--cook-orange-ink);
  cursor: pointer;
  font-weight: 750;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cook-header-control:hover,
.cook-header-control:focus-visible,
.cook-header-control[aria-expanded='true'] {
  border-color: var(--cook-orange-border);
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

/* The signed-in greeting's name is variable-length (unlike every other
   fixed-text header control), so it needs its own truncation instead of
   the shared white-space: nowrap silently overflowing a narrow flex/grid
   track on mobile. */
.cook-header-account span {
  overflow: hidden;
  max-width: 12rem;
  text-overflow: ellipsis;
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D6: the shared base class
   for every header icon button (cart, theme toggle, search, sign-in,
   choose-location) had no pressed-state at all -- matches the
   .button:active convention used everywhere else in the app. */
.cook-header-control:active {
  transform: scale(0.97);
}

.cook-header-chevron {
  width: 0.48rem;
  height: 0.48rem;
  margin: -0.2rem 0.1rem 0 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.cook-header-toggle[aria-expanded='true'] .cook-header-chevron {
  margin-top: 0.25rem;
  transform: rotate(225deg);
}

.cook-cart-button {
  border-color: var(--cook-orange);
  background: var(--cook-orange);
  color: #fff;
}

.cook-cart-button:hover,
.cook-cart-button:focus-visible {
  border-color: var(--cook-orange-dark);
  background: var(--cook-orange-dark);
  color: #fff;
}

.cook-cart-button-meta {
  color: inherit;
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 2: add-to-cart
   confirmation -- the icon bounces and the count badge pops, triggered by
   .is-cart-pulse (see pulseCartIcon() in cookonline.js). Both play once
   and the class is removed afterwards, so nothing loops or animates at
   rest. */
.cook-cart-button.is-cart-pulse .cook-header-icon {
  animation: cook-cart-bounce 0.3s ease;
}

.cook-cart-button.is-cart-pulse .cook-cart-button-meta {
  animation: cook-cart-count-pop 0.26s ease;
}

@keyframes cook-cart-bounce {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22);
  }
  60% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes cook-cart-count-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

.cook-theme-toggle {
  position: relative;
  min-width: var(--cook-tap-target);
  min-height: var(--cook-tap-target);
  padding: 0;
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 2: the icons used to
   swap via display:none/block -- an instant, jarring cut. Both icons now
   sit stacked in the same spot and cross-fade with a quarter-turn, so the
   toggle reads as one icon smoothly rotating into the other. */
.cook-theme-icon-light,
.cook-theme-icon-dark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cook-theme-icon-dark {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-80deg) scale(0.5);
}

[data-theme='dark'] .cook-theme-icon-light {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(80deg) scale(0.5);
}

[data-theme='dark'] .cook-theme-icon-dark {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* .cook-search-suggestions (the ingredient-search autocomplete) is
   deliberately NOT part of the FIX_MODAL_OVERLAYS_CLAUDE_CODE.md rework
   below -- it's a small inline suggestion list under a text input, the
   same widely-used pattern search boxes everywhere use without a
   full-screen backdrop, and was never reported as broken. It keeps its
   original lightweight absolute-positioned-dropdown treatment. */
.cook-search-suggestions {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  left: 0;
  z-index: 70;
  width: 100%;
  padding: 0.55rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  box-shadow: var(--cook-shadow-soft);
}

.cook-search-suggestions[hidden] {
  display: none !important;
}

/* FIX_MODAL_OVERLAYS_CLAUDE_CODE.md: Sign In, Choose Location, and the
   market-pill switcher (everything using .cook-header-dropdown) used to
   be positioned absolute/relative to their trigger button -- no backdrop,
   page content bleeding around the edges, everything behind still
   tappable. Now a true fixed-position overlay on every viewport size:
   a bottom sheet (matches the referenced Ocado address-picker pattern) up
   to 640px, a centered dialog above that -- paired with
   .cook-header-dropdown-overlay (see header.php) as the dimmed backdrop,
   same underlying mechanism as .cook-cart-drawer/.cook-cart-drawer-overlay
   below, not a third one. z-index sits above the header (50) and below
   the cart drawer (90/91), which nothing here can be open alongside. */
.cook-header-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: var(--cook-overlay);
  /* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 3: FIX_MODAL_OVERLAYS
     above fixed the positioning; open/close itself was still an abrupt
     [hidden] display:none cut with no transition. Fades now, driven by
     .is-open (see showModalEl()/hideModalEl() in cookonline.js) rather
     than [hidden] alone, since display:none can't be transitioned. */
  opacity: 0;
  transition: opacity 0.22s ease;
}

.cook-header-dropdown-overlay.is-open {
  opacity: 1;
}

.cook-header-dropdown-overlay[hidden] {
  display: none !important;
}

.cook-header-dropdown {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 76;
  width: 100%;
  max-width: none;
  max-height: min(85dvh, 620px);
  overflow-y: auto;
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-lg) var(--cook-radius-lg) 0 0;
  background: var(--cook-bg-elevated);
  box-shadow: var(--cook-shadow-card);
  /* Mobile: a bottom sheet slides up from off-screen. */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.cook-header-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
}

.cook-header-dropdown[hidden] {
  display: none !important;
}

@media (min-width: 640px) {
  .cook-header-dropdown {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    /* Desktop: a centered dialog scales in slightly instead of sliding. */
    transform: translate(-50%, -50%) scale(0.96);
    width: min(400px, calc(100vw - 2rem));
    max-height: min(80dvh, 620px);
    border-radius: var(--cook-radius-lg);
    padding: 1.25rem;
  }

  .cook-header-dropdown.is-open {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Choose location: a larger, premium dialog than the default dropdown --
   Ocado's own address picker reads as a near-full dialog with room for a
   map, not a compact 400px menu. */
@media (min-width: 640px) {
  .cook-location-picker-menu {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(88dvh, 780px);
    padding: 1.5rem;
  }
}

.cook-header-dropdown-title {
  margin: 0;
  padding: 0.55rem 0.65rem;
  color: var(--cook-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cook-search-suggestions-list a {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem;
  border-radius: var(--cook-radius-sm);
}

.cook-search-suggestions-list a:hover,
.cook-search-suggestions-list a:focus-visible {
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

.cook-location-status--active {
  color: var(--cook-orange-ink) !important;
  font-weight: 800;
}

.cook-search-suggestions-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem;
}

.cook-search-suggestions-list a {
  font-weight: 700;
}

/* make like ocado: .cook-header-nav (Meals/Buy Ingredients/Partners/
   Support as a permanent second header row) is gone -- those links now
   live in #cookHamburgerMenu (see .cook-hamburger-menu-item below),
   opened from .cook-hamburger-toggle. */

.site-main {
  min-height: calc(100vh - 170px);
}

.hero {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.page-section {
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.page-container--narrow {
  width: min(760px, calc(100% - 2rem));
  margin: 0 auto;
}

.hero__content {
  display: grid;
  gap: 1.5rem;
}

.hero__content--center {
  text-align: center;
  justify-items: center;
}

.hero h1,
.section-heading h1,
.info-card h1 {
  font-family: var(--cook-font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--cook-primary);
  margin: 0;
}

.section-heading--compact h1,
.info-card h1 {
  color: var(--cook-text);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.card,
.catalogue-toolbar,
.product-card {
  background: var(--cook-bg-elevated);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius);
  box-shadow: var(--cook-shadow);
}

.card {
  padding: clamp(1.4rem, 3vw, 2rem);
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--cook-orange-ink);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lead {
  color: var(--cook-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.section-heading {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.section-heading--compact {
  margin-bottom: 1rem;
}

.cook-meal-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.5vw, 1.2rem);
  max-width: 1240px;
  margin-inline: auto;
}

.cook-meal-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 264px;
  padding: clamp(1.25rem, 2vw, 1.55rem);
  overflow: hidden;
  border: 1px solid var(--cook-border);
  border-radius: 20px;
  background: var(--cook-bg-elevated);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  cursor: pointer;
  flex-direction: column;
  gap: 1.15rem;
  isolation: isolate;
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.cook-meal-tile::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--cook-primary);
  content: '';
  opacity: 0;
  transform: scaleX(0.72);
  transform-origin: left center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.cook-meal-tile:hover,
.cook-meal-tile:focus-visible {
  border-color: var(--cook-primary);
  background: var(--cook-soft);
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D8: same stray
     Tailwind-orange bug found and fixed at .field input:focus (D7) and
     .cook-next-steps__strip li.is-active .cook-next-steps__dot (D8) --
     this whole file had several leftover rgba(249, 115, 22, ...) instances
     from before the brand orange (#fc4a04) was locked in. */
  box-shadow: 0 20px 42px rgba(252, 74, 4, 0.16);
  transform: translateY(-4px);
}

.cook-meal-tile:hover::before,
.cook-meal-tile:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 2: pressed state on
   press/tap, partially negating the hover lift (not scale()) since that's
   the mechanic this card already uses for hover. */
.cook-meal-tile:active {
  box-shadow: 0 8px 20px rgba(252, 74, 4, 0.16);
  transform: translateY(-1px);
}

.cook-meal-tile:focus-visible {
  outline: 3px solid rgba(252, 74, 4, 0.3);
  outline-offset: 3px;
}

/* PREMIUM_UX_ROUND2_CLAUDE_CODE.md: .cook-meal-tile-featured used to give
   "Buy ingredients from local market" a permanent orange border/tint/arrow
   fill -- page-meals.php was the only thing ever setting that flag
   (`'featured' => true` on one tile, for no documented reason), so it read
   as an unconditional leftover-state bug rather than a deliberate "this
   one's more important" design choice, especially once PR #89 established
   that a resting-state orange border/highlight is reserved for real
   primary actions. Removed here and in page-meals.php; every tile is now
   visually identical until actually hovered/focused. */

.cook-meal-tile-icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
}

.cook-meal-tile-content {
  display: grid;
  gap: 0.8rem;
}

.cook-meal-tile-title {
  color: var(--cook-text);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
}

.cook-meal-tile-description {
  color: var(--cook-muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
  /* PREMIUM_UX_ROUND2_CLAUDE_CODE.md: clamped so description-length
     differences between tiles (e.g. "Cook your meal"'s shorter blurb vs
     "Buy ingredients..."'s longer one) can't make one card grow taller
     than another once the grid drops to a single column on mobile, where
     grid's own row-stretch no longer equalizes them. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__unit,
.dashboard-card p,
.partner-card p,
.auth-switch,
.inline-note,
.notice-card,
.info-card p {
  color: var(--cook-muted);
  line-height: 1.6;
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D9: this list had no CSS
   rules anywhere in the file -- the account page's order history rendered
   as a completely unstyled default <ul>, the largest single gap found in
   the whole audit. */
.order-history-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-history-list li {
  border-bottom: 1px solid var(--cook-border);
}

.order-history-list li:last-child {
  border-bottom: 0;
}

.order-history-list a {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-radius: var(--cook-radius-sm);
  color: var(--cook-text);
  transition: background-color 0.15s ease;
}

.order-history-list a:hover,
.order-history-list a:focus-visible {
  background: var(--cook-bg-muted);
}

.order-history-list a span:last-child {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--cook-border);
  border-radius: 999px;
  color: var(--cook-muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* PREMIUM_UX_ROUND2_CLAUDE_CODE.md: this arrow is the actual primary
   action per tile, but used to render as a pale 10%-opacity tint at rest
   and only reach a solid fill on hover -- the two most important taps on
   the homepage were the least visually confident elements on it. Now
   solid-filled at rest, same accessible fill + shadow token as every
   .button-primary post-PR-#89. */
.cook-meal-tile-arrow {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  margin-top: auto;
  border-radius: 999px;
  background: var(--cook-primary-dark);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  place-items: center;
  box-shadow: var(--cook-shadow-button);
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.cook-meal-tile:hover .cook-meal-tile-arrow,
.cook-meal-tile:focus-visible .cook-meal-tile-arrow {
  filter: brightness(0.88);
  transform: translateX(4px);
}

/* CATEGORY_TILE_PHOTOS_CLAUDE_CODE.md: a separate component from
   .cook-meal-tile (used by page-meals.php's unrelated "Get Meal" nav,
   which has no photo of its own) rather than adding an image to that
   shared class -- same card language (border/radius/shadow/hover lift)
   as .cook-dish-card, since these tiles are meant to read as "the same
   card component, one level up" per the design ask. */
.cook-category-tile {
  display: flex;
  flex-direction: column;
  background: var(--cook-bg-elevated);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius);
  box-shadow: var(--cook-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cook-category-tile:hover,
.cook-category-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--cook-shadow-card);
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 2: pressed state,
   partially negating the hover lift rather than scale() -- same
   convention as .cook-meal-tile:active above. */
.cook-category-tile:active {
  transform: translateY(-1px);
  box-shadow: var(--cook-shadow);
}

.cook-category-tile__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--cook-bg-muted);
}

.cook-category-tile__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
}

.cook-category-tile__title {
  color: var(--cook-text);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

.cook-category-tile__arrow {
  display: grid;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: rgba(252, 74, 4, 0.1);
  color: var(--cook-primary-dark);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  place-items: center;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.cook-category-tile:hover .cook-category-tile__arrow,
.cook-category-tile:focus-visible .cook-category-tile__arrow {
  background: var(--cook-primary);
  color: #fff;
  transform: translateX(4px);
}

.form-stack,
.form-grid {
  display: grid;
  gap: 1rem;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field span {
  font-weight: 700;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  padding-right: 3.75rem;
}

.password-toggle {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cook-tap-target);
  min-height: var(--cook-tap-target);
  background: none;
  border: none;
  padding: 0.25rem 0.35rem;
  color: var(--cook-primary);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus {
  text-decoration: underline;
}

.field-full {
  grid-column: 1 / -1;
}

.cook-markets-page {
  min-width: 0;
}

.cook-market-form-panel {
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase A1: this used to carry a
     permanent orange border -- .card's neutral border (see above) reads
     as more considered; orange is reserved for the CTAs/active states
     inside the panel instead. */
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.15rem);
  box-shadow: var(--cook-shadow-soft);
}

.cook-market-form-panel h1 {
  max-width: 720px;
  font-size: clamp(2.55rem, 5vw, 3.75rem);
  line-height: 1.02;
}

.cook-market-form-panel .lead {
  max-width: 640px;
  margin-bottom: 0;
}

.market-selector-form {
  gap: 1rem;
  margin-top: 1.6rem;
}

.cook-market-back-link {
  display: inline-flex;
  margin-top: 1.25rem;
  color: var(--cook-orange-ink);
  font-weight: 800;
}

.cook-market-back-link:hover,
.cook-market-back-link:focus-visible {
  text-decoration: underline;
}

.cook-market-coming-soon {
  background: linear-gradient(145deg, var(--cook-bg-elevated) 0%, var(--cook-orange-soft) 100%);
}

.cook-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

.cook-select-wrap::after {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 2px solid var(--cook-orange-dark);
  border-bottom: 2px solid var(--cook-orange-dark);
  content: '';
  pointer-events: none;
  transform: translateY(-72%) rotate(45deg);
}

.cook-select {
  width: 100%;
  min-height: 54px;
  padding: 0 3rem 0 1.1rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cook-select:hover {
  border-color: var(--cook-orange-border);
}

.cook-select:focus {
  outline: 0;
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 4px var(--cook-orange-soft);
}

.market-selector-submit {
  width: 100%;
  min-height: 54px;
  border-radius: var(--cook-radius-md);
}

.cook-market-catalogue {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.cook-market-breadcrumb,
.cook-product-count {
  margin: 0;
  color: var(--cook-muted);
  font-weight: 700;
}

.cook-market-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.cook-market-breadcrumb__change {
  color: var(--cook-primary-dark);
  font-weight: 700;
  text-decoration: underline;
}

.cook-market-breadcrumb__days {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
  font-size: 0.78rem;
  font-weight: 750;
}

.cook-market-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.cook-category-nav {
  position: sticky;
  top: 0.75rem;
  padding: 0.6rem;
  border-radius: var(--cook-radius-md);
  border: 1px solid var(--cook-border);
  background: var(--cook-bg-elevated);
  box-shadow: var(--cook-shadow-card);
}

.cook-category-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cook-category-nav__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--cook-radius-sm);
  background: transparent;
  color: var(--cook-text);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cook-category-nav__item:hover {
  background: var(--cook-orange-soft);
}

.cook-category-nav__item:active {
  transform: scale(0.97);
}

.cook-category-nav__item.is-active {
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

.cook-category-nav__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
}

.cook-category-nav__label {
  flex: 1;
  min-width: 0;
}

.cook-category-nav__count {
  min-width: 1.5rem;
  color: var(--cook-muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.cook-category-nav__item.is-active .cook-category-nav__count {
  color: var(--cook-orange-ink);
}

.cook-market-main {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.cook-shop-toolbar {
  display: grid;
  gap: 1.1rem;
  padding: 1.15rem;
  margin: 0;
  border-radius: var(--cook-radius-md);
  box-shadow: var(--cook-shadow-card);
  position: sticky;
  /* Was a bare 0.75rem, which put this behind the sticky site header
     (z-index 50) instead of below it -- it visually looked like the
     search bar just scrolled away instead of staying pinned. */
  top: calc(var(--cook-header-height) + 0.75rem);
  z-index: 5;
  background: var(--cook-bg-elevated);
}

.cook-market-search input {
  width: 100%;
  min-height: 54px;
  padding: 0 1.1rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  font: inherit;
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cook-market-search input:hover {
  border-color: var(--cook-orange-border);
}

.cook-market-search input:focus {
  outline: 0;
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 4px var(--cook-orange-soft);
}

.cart-summary__actions,
.dashboard-grid,
.card-grid {
  display: flex;
  flex-wrap: wrap;
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: matched to the 1rem gap now used by
     every other card grid in the app (see .cook-product-grid,
     .cook-dish-grid) -- this was the tightest at 0.7rem. */
  gap: 1rem;
}

@media (max-width: 900px) {
  .cook-market-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cook-category-nav {
    position: static;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .cook-category-nav ul {
    flex-direction: row;
    gap: 0.5rem;
  }

  .cook-category-nav__item {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.3rem;
    min-width: 84px;
    /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: a fixed height (rather than
       min-height, which only floors it) plus the 2-line label clamp below
       is what actually keeps every pill in this horizontal strip the same
       height regardless of label length -- "Grains, Flours & Swallow"
       used to wrap across 3-4 lines and grow taller than "Tubers & Roots"
       (2 lines), visibly mismatching card heights in the same row. */
    height: 104px;
    padding: 0.5rem 0.4rem;
    text-align: center;
  }

  .cook-category-nav__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.15;
  }

  .cook-category-nav__count {
    text-align: center;
  }
}

.cook-product-tools {
  padding-top: 0.25rem;
  border-top: 1px solid var(--cook-border);
}


.cook-product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md: brought up from 0.85rem to match
     the 1rem already used by .cook-dish-grid/.cook-menu-category-grid --
     this is the app's biggest, most-seen card grid (ingredient shopping),
     and it was the tightest of the three. */
  gap: 1rem;
}

.cook-product-card {
  display: flex;
  min-width: 0;
  padding: 0.8rem;
  border-radius: var(--cook-radius-md);
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: var(--cook-shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.65rem;
}

.cook-product-card:hover {
  border-color: var(--cook-orange-border);
  box-shadow: var(--cook-shadow-soft);
  transform: translateY(-2px);
}

.cook-product-card .product-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--cook-radius-sm);
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D4: matches the 4:3 ratio
     every other photo container in the app uses (.cook-dish-card__image,
     .cook-category-tile__image, .cook-dish-detail__image) -- this grid was
     the one Phase B2 missed. */
  aspect-ratio: 4 / 3;
  background: var(--cook-orange-soft);
}

.stock-pill--fresh {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--cook-success-bg);
  color: var(--cook-success);
  border: 1px solid var(--cook-success-border);
}

.cook-product-card .product-card__media.is-loading {
  background: linear-gradient(90deg, var(--cook-bg-surface) 25%, var(--cook-border) 37%, var(--cook-bg-surface) 63%);
  background-size: 400% 100%;
  animation: cook-shimmer 1.4s ease infinite;
}

@keyframes cook-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 1: same shimmer as the
   markets grid above, extended to category tiles, dish cards, and the
   dish-detail hero photo -- these had no equivalent and would blank-flash
   while the real photo loaded. Unlike .product-card__media there's no
   wrapper div to hold the shimmer while a child img fades in -- the img
   IS the element, and before it's decoded it paints nothing but its own
   background anyway, so the shimmer goes straight on it with no opacity
   trick needed (opacity:0 here would hide the shimmer itself, not just
   an unloaded photo). */
.cook-category-tile__image.is-loading,
.cook-dish-card__image.is-loading,
.cook-dish-detail__image.is-loading {
  background: linear-gradient(90deg, var(--cook-bg-surface) 25%, var(--cook-border) 37%, var(--cook-bg-surface) 63%);
  background-size: 400% 100%;
  animation: cook-shimmer 1.4s ease infinite;
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 1: the cart page's
   contents come from localStorage (see page-cart.php), so PHP can't
   pre-render #cartEmptyState/#cartDetails -- this stand-in row shape
   (thumbnail + one text bar, matching .cart-item's layout) fills the gap
   between paint and renderCartPage() resolving, instead of a blank card. */
.cook-skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--cook-border);
}

.cook-skeleton-row:last-child {
  border-bottom: none;
}

.cook-skeleton-row::before,
.cook-skeleton-row::after {
  content: '';
  background: linear-gradient(90deg, var(--cook-bg-surface) 25%, var(--cook-border) 37%, var(--cook-bg-surface) 63%);
  background-size: 400% 100%;
  animation: cook-shimmer 1.4s ease infinite;
}

.cook-skeleton-row::before {
  width: 56px;
  height: 56px;
  border-radius: var(--cook-radius-sm);
  flex-shrink: 0;
}

.cook-skeleton-row::after {
  flex: 1;
  height: 14px;
  border-radius: 7px;
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 3: category/dish grids
   are server-rendered (all cards present at first paint, not JS-injected),
   so a subtle staggered fade-in-on-load is a pure CSS animation -- no JS
   needed. Capped at the first 8 cards per grid; anything beyond that has
   no explicit nth-child delay and just uses the base 0s, which in
   practice means it's already below the fold. */
@keyframes cook-grid-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cook-category-tile,
.cook-dish-card,
.cook-meal-tile,
.cook-product-card {
  animation: cook-grid-fade-in 0.3s ease both;
}

.cook-category-tile:nth-child(2), .cook-dish-card:nth-child(2), .cook-meal-tile:nth-child(2), .cook-product-card:nth-child(2) { animation-delay: 0.04s; }
.cook-category-tile:nth-child(3), .cook-dish-card:nth-child(3), .cook-meal-tile:nth-child(3), .cook-product-card:nth-child(3) { animation-delay: 0.08s; }
.cook-category-tile:nth-child(4), .cook-dish-card:nth-child(4), .cook-meal-tile:nth-child(4), .cook-product-card:nth-child(4) { animation-delay: 0.12s; }
.cook-category-tile:nth-child(5), .cook-dish-card:nth-child(5), .cook-meal-tile:nth-child(5), .cook-product-card:nth-child(5) { animation-delay: 0.16s; }
.cook-category-tile:nth-child(6), .cook-dish-card:nth-child(6), .cook-meal-tile:nth-child(6), .cook-product-card:nth-child(6) { animation-delay: 0.2s; }
.cook-category-tile:nth-child(7), .cook-dish-card:nth-child(7), .cook-meal-tile:nth-child(7), .cook-product-card:nth-child(7) { animation-delay: 0.24s; }
.cook-category-tile:nth-child(8), .cook-dish-card:nth-child(8), .cook-meal-tile:nth-child(8), .cook-product-card:nth-child(8) { animation-delay: 0.28s; }

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 4: scroll-triggered
   reveals for the two longer-page cases the brief names -- dish-detail
   ingredient lines (page-cook-your-meal.php) and the diet weekly-plan
   accordion's day rows (page-diet-meals.php). Driven by IntersectionObserver
   (initScrollReveals() in cookonline.js) rather than the pure-CSS
   nth-child stagger above, since these lists can run well past 8 items
   and the point here is "as it scrolls into view", not "as the page
   loads". Content-safe by construction: .cook-scroll-reveal elements are
   fully visible by default -- only initScrollReveals() opts an element
   into the hidden-until-revealed state (.cook-scroll-reveal-pending,
   added right before observing it), so real content/ingredient data is
   never gated behind JS running successfully. */
.cook-scroll-reveal {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cook-scroll-reveal-pending {
  opacity: 0;
  transform: translateY(12px);
}

.cook-product-card .product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.cook-product-card .product-card__media.is-loading img {
  opacity: 0;
}

.cook-product-card:hover .product-card__media img {
  transform: scale(1.05);
}

.cook-product-empty {
  margin: 1.5rem 0 0;
  padding: 2rem 1rem;
  border: 1px dashed var(--cook-border);
  border-radius: var(--cook-radius-md);
  text-align: center;
  color: var(--cook-muted);
  font-weight: 700;
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 5: shared empty/edge-
   case state -- icon + heading + copy + a real next-action button, same
   visual language as .cook-cart-drawer__empty (already this considered)
   rather than a bare line of text. Used for the full cart page, markets
   no-results/empty-market, diet-categories-empty, and 404. */
.cook-empty-state {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  margin: 1.5rem 0 0;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--cook-border);
  border-radius: var(--cook-radius-md);
  text-align: center;
}

.cook-empty-state__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  fill: none;
  stroke: var(--cook-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.cook-empty-state h2 {
  margin: 0;
}

.cook-empty-state p {
  margin: 0;
  color: var(--cook-muted);
  max-width: 34ch;
}

.product-card__tag,
.stock-pill {
  width: fit-content;
  min-height: 30px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.product-card__tag {
  /* Ocado's "Featured" ribbon sits on the photo, not as inline body text
     below it -- this real merchandising signal (an admin-set product tag,
     e.g. "Popular") deserves the same prominent corner-banner treatment
     instead of getting buried under the product name. No fabricated
     ratings/discounts here -- only real product data the catalogue
     already has. */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

.cook-product-card h2 {
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D4: an ingredient name here
     plays the same role .cook-dish-card__body strong plays on the dish
     grids -- the food item's name on a photo card -- so it gets the same
     display-face treatment instead of the generic h2 body-face default. */
  margin: 0;
  font-family: var(--cook-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  /* On a tall card (the negotiable-price ones especially -- stepper, six
     price chips, an Add to cart button) the sticky .cook-shop-toolbar
     used to swallow the card's own image and name while its price/qty
     controls stayed on screen below, leaving shoppers looking at an
     unlabelled floating widget with no idea which ingredient it belonged
     to. Sticking the name itself right under the toolbar (bounded by
     .product-card__body's own box, so it un-sticks once the card's
     actions scroll past too) keeps that context on screen the whole time.
     Needs an opaque background: sticky reserves its normal-flow space, so
     the alt-name/price content below scrolls up underneath it visually. */
  position: sticky;
  top: calc(var(--cook-header-height) + 0.75rem + var(--cook-shop-toolbar-height));
  z-index: 4;
  padding: 0.35rem 0;
  background: var(--cook-bg-elevated);
}

.product-card__alt-name {
  margin: 0;
  color: var(--cook-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.cook-product-card .product-card__unit {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
}

.cook-unit-select-wrap {
  position: relative;
  display: block;
}

.cook-unit-select-wrap::after {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--cook-orange-dark);
  border-bottom: 2px solid var(--cook-orange-dark);
  content: '';
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.cook-unit-select {
  width: 100%;
  min-height: 38px;
  padding: 0 2rem 0 0.7rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cook-unit-select:hover {
  border-color: var(--cook-orange-border);
}

.cook-unit-select:focus {
  outline: 0;
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 3px var(--cook-orange-soft);
}

.cook-product-card .product-card__price {
  margin: auto 0 0;
  font-size: 1.08rem;
  font-weight: 800;
}

.cook-negotiable-widget {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cook-negotiable-widget .negotiable-note {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--cook-warning-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-warning-bg);
  color: var(--cook-text);
  font-size: 0.78rem;
  line-height: 1.4;
}

.cook-negotiable-widget .amount-stepper {
  display: grid;
  grid-template-columns: var(--cook-tap-target) 1fr var(--cook-tap-target);
  align-items: center;
  gap: 0.4rem;
}

.cook-negotiable-widget .stepper-btn {
  min-height: var(--cook-tap-target);
  border: 1px solid var(--cook-orange-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cook-negotiable-widget .stepper-btn:hover,
.cook-negotiable-widget .stepper-btn:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange);
  color: #fff;
}

.cook-negotiable-widget .stepper-btn:active {
  transform: scale(0.97);
}

.cook-negotiable-widget .stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
}

.cook-negotiable-widget .stepper-value {
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D4: a number input has no
     default min-width: 0, so inside the 1fr grid track it was overflowing
     its column and bleeding into the next product card. */
  width: 100%;
  min-width: 0;
  min-height: var(--cook-tap-target);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  text-align: center;
  font: inherit;
  font-weight: 800;
  color: var(--cook-text);
}

.cook-negotiable-widget .quick-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cook-negotiable-widget .chip {
  min-height: var(--cook-tap-target);
  min-width: var(--cook-tap-target);
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--cook-border);
  border-radius: 999px;
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cook-negotiable-widget .chip:hover,
.cook-negotiable-widget .chip.active {
  border-color: var(--cook-primary-dark);
  background: var(--cook-primary-dark);
  color: #fff;
}

.cook-negotiable-widget .chip:active {
  transform: scale(0.97);
}

.cook-product-card__actions {
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
}

.quantity-stepper {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem;
  border: 1px solid var(--cook-border);
  border-radius: 14px;
}

.stepper-button,
.button-small {
  min-height: var(--cook-tap-target);
  min-width: var(--cook-tap-target);
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--cook-primary);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  font-weight: 800;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D4: this shared stepper
   class (recipe-line qty, market ingredient qty, cart-item qty) had no
   pressed-state -- matches the .button:active convention used everywhere
   else in the app. */
.stepper-button:active,
.button-small:active {
  transform: scale(0.97);
}

.cook-add-button,
.cook-qty-stepper {
  width: 100%;
  min-height: 44px;
}

.cook-add-button[hidden],
.cook-qty-stepper[hidden] {
  display: none !important;
}

.cook-add-button {
  border-radius: var(--cook-radius-sm);
}

.cook-qty-stepper {
  display: grid;
  padding: 0.2rem;
  border: 1px solid var(--cook-orange-border);
  border-radius: var(--cook-radius-sm);
  grid-template-columns: var(--cook-tap-target) 1fr var(--cook-tap-target);
  align-items: center;
  background: var(--cook-orange-soft);
  text-align: center;
}

.cook-qty-stepper .stepper-button {
  min-height: var(--cook-tap-target);
  padding: 0;
  border: 1px solid var(--cook-orange-border);
  border-radius: 9px;
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  cursor: pointer;
  font-weight: 800;
}

.cook-qty-stepper .stepper-button:hover,
.cook-qty-stepper .stepper-button:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange);
  color: #fff;
}

.stock-pill--out {
  margin-top: auto;
  background: var(--cook-bg-muted);
  color: var(--cook-muted);
}

.cart-layout,
.checkout-layout {
  display: grid;
  gap: var(--cook-space-6);
}

.checkout-layout {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  align-items: start;
}

.checkout-main {
  display: grid;
  gap: var(--cook-space-6);
  min-width: 0;
}

.checkout-trust-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
}

.checkout-trust-note__icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--cook-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--cook-border);
}

.cart-item__thumbnail {
  width: 56px;
  height: 56px;
  border-radius: var(--cook-radius-sm);
  border: 1px solid var(--cook-border);
  object-fit: cover;
  background: var(--cook-orange-soft);
}

.cart-item:last-child {
  border-bottom: 0;
}

.cart-summary {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}

.cart-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
}

/* LIVE_AUDIT_FIXES_CLAUDE_CODE1.md item 4: the order-confirmation item list
   used to reuse .cart-summary__row (built for a handful of totals rows) for
   every ingredient + cooking-fee line, with no border/spacing between rows
   and no visual difference between an ingredient and a fee -- a dense wall
   of text. This gives each line its own padded, bordered row (matching
   .cart-item's rhythm elsewhere in checkout) and mutes/italicises fee rows
   so they read as a distinct line, not another ingredient. */
.order-summary-heading {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.order-summary-items {
  display: grid;
  margin-bottom: 1rem;
  border-top: 1px solid var(--cook-border);
}

.order-summary-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--cook-border);
}

.order-summary-item__meta {
  display: grid;
  gap: 0.3rem;
}

.order-summary-item__name {
  color: var(--cook-text);
}

.order-summary-item--fee .order-summary-item__name {
  color: var(--cook-muted);
  font-style: italic;
}

.order-summary-item__note {
  color: var(--cook-danger);
}

.order-summary-item__price {
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
  color: var(--cook-text);
}

.auth-card {
  display: grid;
  gap: 1rem;
}

.auth-brand {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
}

.auth-logo {
  display: flex;
  justify-content: center;
}

.auth-brand__icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(252, 74, 4, 0.25);
  background: var(--cook-soft);
  padding: 0.45rem;
}

.auth-social-row {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
}

.auth-social-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--cook-border);
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  font-weight: 900;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.auth-social-icon:hover,
.auth-social-icon:focus-visible {
  border-color: var(--cook-orange-border);
  background: var(--cook-orange-soft);
  transform: translateY(-1px);
}

.auth-social-icon:focus-visible {
  outline: 3px solid var(--cook-orange-border);
  outline-offset: 2px;
}

.auth-social-icon--facebook {
  color: #1877f2;
}

.auth-social-icon--apple {
  color: #111827;
}

/* Live-site audit finding: the Apple mark's near-black color computes to
   ~1.16:1 contrast against --cook-bg-elevated's dark-mode value (#212437)
   -- effectively invisible, far under WCAG's 3:1 minimum for UI icons.
   Apple's own "Sign in with Apple" guidelines require the mark to flip to
   white on dark surfaces for exactly this reason. */
[data-theme="dark"] .auth-social-icon--apple {
  color: #fff;
}

.back-link {
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--cook-primary-dark);
  font-weight: 700;
  padding: 0;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--cook-muted);
}

.checkbox input {
  margin-top: 0.25rem;
  accent-color: var(--cook-primary);
}

.checkbox a {
  color: var(--cook-primary-dark);
  text-decoration: underline;
}

.signup-honeypot {
  position: absolute !important;
  left: -9999px !important;
}

.notice-card {
  border-radius: 16px;
  padding: 0.95rem 1rem;
  border: 1px solid var(--cook-border);
  background: var(--cook-bg-elevated);
}

.notice-card--success {
  background: var(--cook-success-bg);
  color: var(--cook-success);
  border-color: var(--cook-success-border);
}

.notice-card--error {
  background: var(--cook-danger-bg);
  color: var(--cook-danger);
  border-color: var(--cook-danger-border);
}

.inline-note--strong {
  font-weight: 700;
}

.cook-order-number {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--cook-border);
  background: var(--cook-bg-elevated);
}

.cook-order-number__label {
  font-size: 0.8rem;
  color: var(--cook-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cook-order-number__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cook-order-number__value {
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  letter-spacing: 0.02em;
  user-select: all;
}

.cook-order-number__copy {
  min-height: var(--cook-tap-target);
  white-space: nowrap;
}

.cook-next-steps__strip {
  display: flex;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  gap: 0.5rem;
}

.cook-next-steps__strip li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--cook-muted);
}

.cook-next-steps__dot {
  width: 14px;
  height: 14px;
  border-radius: var(--cook-radius-full);
  background: var(--cook-border);
}

.cook-next-steps__strip li.is-done .cook-next-steps__dot {
  background: var(--cook-primary);
}

.cook-next-steps__strip li.is-active {
  color: var(--cook-text);
  font-weight: 700;
}

.cook-next-steps__strip li.is-active .cook-next-steps__dot {
  background: var(--cook-primary);
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D8: --cook-primary-bg was
     never defined anywhere in this file, so this always silently fell back
     to a stray Tailwind orange (#f97316) instead of the real brand orange
     (--cook-orange, #fc4a04) -- same bug class as the checkout focus ring
     fixed in Phase D7. */
  box-shadow: 0 0 0 4px rgba(252, 74, 4, 0.18);
}

.cook-next-steps__strip li.is-done {
  color: var(--cook-text);
}

.dashboard-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-footer {
  margin-top: 3rem;
  background: var(--cook-footer);
  color: #fff;
}

.site-footer__inner {
  padding: 1.2rem 0;
  text-align: center;
  font-weight: 600;
}

.site-footer__link {
  margin-left: 0.75rem;
  text-decoration: underline;
}

.cook-bottom-nav {
  display: none;
}

@media (max-width: 960px) {
  /* The single highest-impact mobile change per the UX spec: a thumb-reachable
     fixed tab bar beats a header full of dropdowns for a shopping flow. */
  .cook-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Below .site-header's z-index (50) -- .site-header is its own stacking
       context, so anything inside it (like the full-screen search overlay)
       needs this nav to rank lower at the body level in order to actually
       cover it, not just have a numerically higher z-index in isolation. */
    z-index: 40;
    background: var(--cook-bg-elevated);
    border-top: 1px solid var(--cook-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .cook-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: var(--cook-tap-target);
    padding: 0.4rem 0 0.3rem;
    color: var(--cook-muted);
    font-size: 0.68rem;
    font-weight: 750;
  }

  .cook-bottom-nav__item .cook-header-icon {
    width: 1.3rem;
    height: 1.3rem;
  }

  .cook-bottom-nav__item.is-active {
    color: var(--cook-orange-ink);
  }

  /* Keep the fixed bar from covering the last bit of content on every page,
     including the negotiable-price widget's Add-to-cart button and the
     checkout submit button. */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
  }
}

@media (max-width: 1080px) {
  .site-header__inner {
    grid-template-columns: 1fr;
  }

  .cook-meal-options,
  .product-grid,
  .dashboard-grid,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .site-header__inner,
  .page-container,
  .site-footer__inner,
  .page-container--narrow {
    width: min(100% - 1.25rem, 100%);
  }

  .site-brand__image {
    max-width: 180px;
    height: 42px;
  }

  .market-selector-card {
    margin: 0 auto;
    padding: 1.5rem;
  }

  .market-selector-card h1 {
    font-size: clamp(2.15rem, 10vw, 2.6rem);
  }

  .cook-select,
  .market-selector-submit {
    min-height: 52px;
  }

  .site-nav {
    justify-content: flex-start;
  }

  .hero h1,
  .section-heading h1,
  .info-card h1 {
    font-size: clamp(2.2rem, 10vw, 3.3rem);
  }

  .hero__actions,
  .cart-summary__actions {
    flex-direction: column;
  }

  .button,
  .site-nav__action,
  .site-nav__cart {
    width: 100%;
  }

  .cook-meal-options,
  .product-grid,
  .dashboard-grid,
  .card-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 1080px) {
  .cook-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cook-market-form-panel {
    padding: 1.5rem;
  }

  .cook-market-form-panel h1 {
    font-size: clamp(2.15rem, 10vw, 2.6rem);
  }

  /* Ocado's mobile catalogue is a single-column list of horizontal rows
     (thumbnail left, details right), not a stacked-card grid. */
  .cook-product-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .cook-product-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 0.75rem;
    gap: 0.85rem;
  }

  .cook-product-card:hover {
    transform: none;
  }

  .cook-product-card .product-card__media {
    width: 104px;
    height: 104px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }
}


@media (max-width: 960px) {
  /* Compact mobile header (spec target: a single ~56px bar) -- logo, a
     search icon that opens a full-screen overlay instead of an always-on
     input row, theme toggle, and cart. Sign-in/choose-location drop to a
     second, shorter row; Markets navigation itself lives in the bottom tab
     bar now, so this row matters less than it used to. */
  .cook-header-inner {
    grid-template-areas:
      "hamburger logo controls"
      "actions actions actions";
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
    min-height: 0;
    padding: 0.5rem 0;
  }

  .cook-hamburger-toggle {
    grid-area: hamburger;
  }

  .cook-header-logo {
    grid-area: logo;
  }

  .cook-header-logo img {
    max-width: 165px;
    height: 36px;
  }

  .cook-header-quick-actions {
    display: flex;
    grid-area: controls;
    align-items: center;
    gap: 0.4rem;
  }

  .cook-header-control.cook-mobile-search-toggle {
    display: inline-flex;
    min-width: var(--cook-tap-target);
    min-height: var(--cook-tap-target);
    padding: 0;
  }

  .cook-theme-toggle,
  .cook-cart-button {
    min-height: var(--cook-tap-target);
  }

  .cook-cart-button span:not(.cook-cart-button-meta) {
    display: none;
  }

  /* The search panel becomes a full-screen overlay on mobile, opened by the
     search icon in the controls row, instead of an always-visible input --
     this is most of the height saving that gets the header down to a
     compact single row. */
  .cook-header-search {
    display: none;
  }

  .cook-header-search.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    /* Explicit width/height rather than relying on inset alone to stretch --
       this element is still a grid item of .cook-header-inner, whose
       align-items: center otherwise sizes a position:fixed child to its
       content height instead of the full viewport. */
    width: 100vw;
    height: 100dvh;
    padding: 1rem;
    background: var(--cook-bg-page);
    overflow-y: auto;
  }

  .cook-header-search.is-open .cook-mobile-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .cook-header-search.is-open .cook-search-suggestions {
    position: static;
    box-shadow: none;
    margin-top: 0.75rem;
  }

  /* The markets page has its own ingredient search right above the results;
     showing the global header search too is redundant clutter on mobile. */
  .cook-header-search--catalogue {
    display: none !important;
  }

  .cook-header-actions {
    display: grid;
    grid-area: actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cook-header-toggle {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .cook-header-inner {
    width: min(100% - 1.25rem, 100%);
  }

  .cook-header-logo img {
    max-width: 145px;
    height: 32px;
  }

  .cook-header-control,
  .cook-search-input {
    min-height: 46px;
  }

  .cook-header-control {
    padding-inline: 0.65rem;
    font-size: 0.9rem;
  }
}

/* Cook Your Meal guided workflow. */
.cook-meal-flow {
  display: grid;
  gap: 1.25rem;
}

.cook-flow-steps {
  display: flex;
  gap: 0.55rem;
  padding: 0.25rem 0 0.55rem;
  margin: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.cook-flow-step {
  min-width: max-content;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--cook-border);
  border-radius: 999px;
  color: var(--cook-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.cook-flow-step.is-active {
  border-color: var(--cook-orange);
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

.cook-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 1.1rem;
  align-items: start;
}

.cook-flow-main {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.cook-flow-card,
.cook-meal-summary,
.cook-progress-card,
.cook-dispatch-card,
.cook-feedback-card {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  box-shadow: var(--cook-shadow-card);
}

.cook-flow-card h2,
.cook-meal-summary h2,
.cook-flow-card h3,
.cook-progress-card h3,
.cook-dispatch-card h3,
.cook-feedback-card h3 {
  margin: 0;
}

.cook-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.cook-flow-tile {
  display: flex;
  min-height: 94px;
  padding: 1rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cook-flow-tile:hover,
.cook-flow-tile:focus-visible,
.cook-flow-tile-active {
  border-color: var(--cook-orange);
  background: var(--cook-orange-soft);
  box-shadow: var(--cook-shadow-card);
  color: var(--cook-orange-ink);
  transform: translateY(-2px);
}

.cook-flow-note,
.cook-inline-cart p,
.cook-payment-success p,
.cook-progress-card p,
.cook-dispatch-card p {
  margin: 0;
  color: var(--cook-muted);
  line-height: 1.6;
}

.cook-ingredient-list {
  display: grid;
  gap: 0.65rem;
}

.cook-ingredient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  align-items: center;
}

.cook-ingredient-row.is-removed {
  display: none;
}

.cook-ingredient-row span {
  display: block;
  margin-top: 0.2rem;
  color: var(--cook-muted);
  font-size: 0.88rem;
}

.cook-ingredient-qty {
  display: grid;
  grid-template-columns: 38px minmax(26px, auto) 38px;
  gap: 0.25rem;
  align-items: center;
  text-align: center;
}

.cook-ingredient-qty button,
.cook-ingredient-remove {
  min-height: 38px;
  border: 1px solid var(--cook-orange-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  cursor: pointer;
  font-weight: 800;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.cook-ingredient-remove {
  padding: 0.45rem 0.65rem;
}

.cook-ingredient-qty button:hover,
.cook-ingredient-qty button:focus-visible,
.cook-ingredient-remove:hover,
.cook-ingredient-remove:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange-soft);
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase C1: matches the shared
   .button:active pressed-state treatment (PREMIUM_UX_OVERHAUL_CLAUDE_CODE.md
   -- "a premium app's buttons never just swap colour on tap") that these
   recipe-builder controls had missed. */
.cook-ingredient-qty button:active,
.cook-ingredient-remove:active {
  transform: scale(0.97);
}

.cook-meal-summary {
  position: sticky;
  top: 135px;
}

.cook-meal-summary-total {
  color: var(--cook-orange-ink);
  font-size: 1.65rem;
}

.cook-inline-cart,
.cook-cart-meal-costs,
.cook-payment-success,
.cook-progress-list,
.cook-dispatch-card dl,
.cook-issue-form {
  display: grid;
  gap: 0.75rem;
}

.cook-payment-options,
.cook-delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.cook-progress-list {
  padding-left: 1.25rem;
  margin: 0;
}

.cook-progress-list .is-active::marker {
  color: var(--cook-orange);
}

.cook-dispatch-card dl,
.cook-dispatch-card dd {
  margin: 0;
}

.cook-dispatch-card dl div {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--cook-border);
}

.cook-dispatch-card dt {
  color: var(--cook-muted);
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .cook-flow-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .cook-meal-summary {
    position: static;
  }
}

@media (max-width: 620px) {
  .cook-flow-grid {
    grid-template-columns: 1fr;
  }

  .cook-ingredient-row {
    grid-template-columns: 1fr auto;
  }

  .cook-ingredient-remove {
    grid-column: 1 / -1;
    width: 100%;
  }

  .cook-payment-options,
  .cook-delivery-actions {
    display: grid;
  }

  .cook-payment-options .button,
  .cook-delivery-actions .button,
  .cook-meal-summary .button,
  .cook-inline-cart .button {
    width: 100%;
  }
}

.cook-meal-flow [hidden],
.cook-meal-checkout[hidden],
.cook-meal-checkout [hidden],
.cook-cart-meal-costs[hidden] {
  display: none !important;
}

/* Premium Nigerian Cook Your Meal builder. */
.cook-meal-builder,
.cook-meal-builder-main,
.cook-meal-builder-card,
.cook-meal-builder-fields,
.cook-ingredient-builder,
.cook-meal-success,
.cook-meal-summary-list {
  display: grid;
  gap: 1rem;
}

.cook-meal-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
  gap: 1rem;
  align-items: start;
}

.cook-meal-builder-card {
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  box-shadow: var(--cook-shadow-card);
}

.cook-delivery-estimate {
  border-color: var(--cook-orange-border);
}

.cook-meal-builder-select,
.cook-meal-stepper {
  min-width: 0;
}

.cook-meal-builder-card h2,
.cook-meal-summary-list,
.cook-meal-summary-list dd,
.cook-meal-summary p {
  margin: 0;
}

.cook-meal-builder-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cook-meal-builder-field {
  display: grid;
  gap: 0.45rem;
}

.cook-meal-builder-field span:first-child,
.cook-meal-summary-list dt {
  color: var(--cook-muted);
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cook-meal-builder-field input,
.cook-ingredient-variant select {
  width: 100%;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
}

.cook-meal-builder-field input:focus,
.cook-ingredient-variant select:focus {
  outline: 0;
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 4px var(--cook-orange-soft);
}

.cook-ingredient-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
}

.cook-ingredient-meta,
.cook-ingredient-line-price,
.cook-ingredient-variant {
  display: grid;
  gap: 0.35rem;
}

.cook-ingredient-meta span,
.cook-ingredient-line-price span,
.cook-distance-placeholder {
  color: var(--cook-muted);
  font-size: 0.86rem;
}

.cook-optional-badge {
  display: inline-flex;
  width: fit-content;
  margin-left: 0.35rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink) !important;
  font-size: 0.72rem !important;
  font-weight: 800;
}

.cook-ingredient-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 42px minmax(70px, 100px) 42px auto;
  gap: 0.35rem;
  align-items: center;
}

.cook-ingredient-controls button,
.cook-meal-continue {
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--cook-orange-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  cursor: pointer;
  font-weight: 800;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.cook-ingredient-controls button:hover,
.cook-ingredient-controls button:focus-visible,
.cook-meal-continue:hover,
.cook-meal-continue:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange-soft);
}

.cook-ingredient-controls button:active,
.cook-meal-continue:active {
  transform: scale(0.97);
}

.cook-ingredient-controls input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  text-align: center;
}

.cook-meal-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--cook-border);
}

.cook-meal-validation,
.cook-meal-success {
  margin: 0;
}

.cook-meal-success {
  padding-top: 0.85rem;
  border-top: 1px solid var(--cook-border);
}

.cook-meal-success p {
  color: var(--cook-orange-ink);
  font-weight: 800;
}

.cook-distance-placeholder {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.75rem;
  border-radius: var(--cook-radius-sm);
  background: var(--cook-orange-soft);
}

.cook-meal-builder [hidden] {
  display: none !important;
}

@media (max-width: 860px) {
  .cook-meal-builder-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .cook-meal-builder-fields,
  .cook-ingredient-card {
    grid-template-columns: 1fr;
  }

  .cook-ingredient-controls {
    grid-template-columns: 42px minmax(60px, 1fr) 42px;
  }

  .cook-ingredient-controls .cook-ingredient-remove {
    grid-column: 1 / -1;
    width: 100%;
  }

  .cook-meal-summary .button,
  .cook-meal-success .button,
  .cook-meal-continue {
    width: 100%;
  }
}


/* Cook Your Meal premium cleanup and localized delivery selectors. */
.cook-search-button {
  color: var(--cook-orange-ink);
}

.cook-header-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.cook-cart-button .cook-header-icon {
  color: #fff;
}

.cook-header-control:focus-visible,
.cook-meal-serving-chip:focus-visible,
.cook-meal-combobox input:focus-visible,
.cook-meal-combobox-menu button:focus-visible {
  outline: 3px solid var(--cook-orange-border);
  outline-offset: 2px;
}

.cook-meal-page-section {
  padding-top: clamp(1rem, 2.5vw, 1.8rem);
}

.cook-meal-hero {
  display: grid;
  gap: 0.35rem;
}

.cook-meal-hero h1,
.cook-meal-hero p {
  margin: 0;
}

.cook-meal-hero h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.cook-meal-hero p {
  max-width: 720px;
  color: var(--cook-muted);
  line-height: 1.6;
}

.cook-meal-steps {
  display: flex;
  gap: 0.45rem;
  padding: 0.1rem 0 0.2rem;
  margin: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.cook-meal-step {
  flex: 0 0 auto;
  padding: 0.42rem 0.68rem;
  border: 1px solid var(--cook-border);
  border-radius: 999px;
  color: var(--cook-muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.cook-meal-step.is-active {
  border-color: var(--cook-orange-border);
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

.cook-meal-form-card {
  padding-block: 1.1rem;
}

.cook-meal-servings {
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
  margin: 0;
}

.cook-meal-servings legend {
  margin-bottom: 0.45rem;
  color: var(--cook-muted);
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cook-meal-serving-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cook-meal-serving-chip {
  min-width: 44px;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--cook-border);
  border-radius: 999px;
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  cursor: pointer;
  font-weight: 800;
}

.cook-meal-serving-chip:hover,
.cook-meal-serving-chip.is-active {
  border-color: var(--cook-orange);
  background: var(--cook-orange);
  color: #fff;
}

.cook-meal-combobox {
  position: relative;
}

.cook-meal-combobox input {
  width: 100%;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
}

.cook-meal-combobox input:focus {
  outline: 0;
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 4px var(--cook-orange-soft);
}

.cook-meal-combobox-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  display: grid;
  width: 100%;
  max-height: 250px;
  padding: 0.35rem;
  overflow-y: auto;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  box-shadow: var(--cook-shadow-soft);
}

.cook-meal-combobox-menu[hidden] {
  display: none !important;
}

.cook-meal-combobox-menu button {
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  cursor: pointer;
  text-align: left;
}

.cook-meal-combobox-menu button:hover,
.cook-meal-combobox-menu button:focus-visible {
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

.cook-combobox-empty {
  margin: 0;
  padding: 0.65rem 0.75rem;
  color: var(--cook-muted);
}

.cook-delivery-area b,
.cook-delivery-landmark em {
  color: var(--cook-orange-ink);
  font-size: 0.72rem;
  font-style: normal;
}

@media (max-width: 620px) {
  .cook-meal-page-section {
    padding-top: 0.8rem;
  }

  .cook-meal-builder {
    gap: 0.75rem;
  }

  .cook-meal-steps {
    width: calc(100vw - 2rem);
    padding-bottom: 0.35rem;
  }

  .cook-meal-hero h1 {
    font-size: 2rem;
  }
}

/* Flexible ingredient photo catalog for Cook Your Meal. */
.cook-custom-ingredient-section,
.cook-custom-ingredient-grid {
  display: grid;
  gap: 1rem;
}

.cook-custom-ingredient-grid {
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
}

.cook-custom-ingredient-card {
  display: grid;
  grid-template-rows: 104px 1fr auto;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
}

.cook-custom-ingredient-card img,
.cook-ingredient-thumbnail {
  width: 100%;
  object-fit: cover;
  border-radius: var(--cook-radius-sm);
  background: var(--cook-orange-soft);
}

.cook-custom-ingredient-card img {
  height: 104px;
}

.cook-custom-ingredient-card div {
  display: grid;
  gap: 0.3rem;
}

.cook-custom-ingredient-card span,
.cook-custom-ingredient-card b,
.cook-ingredient-meta small {
  color: var(--cook-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.cook-custom-ingredient-card button {
  min-height: 42px;
  border: 1px solid var(--cook-orange-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
  cursor: pointer;
  font-weight: 800;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cook-custom-ingredient-card button:hover,
.cook-custom-ingredient-card button:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange);
  color: #fff;
}

.cook-custom-ingredient-card button:active {
  transform: scale(0.97);
}

.cook-ingredient-thumbnail {
  grid-column: 1 / -1;
  height: 116px;
}

@media (min-width: 700px) {
  .cook-ingredient-card {
    grid-template-columns: 92px minmax(0, 1fr) auto;
  }

  .cook-ingredient-thumbnail {
    grid-column: auto;
    height: 92px;
  }
}

@media (max-width: 420px) {
  .cook-custom-ingredient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cook-custom-ingredient-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.cook-custom-ingredient-add input {
  width: 100%;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
}

@media (max-width: 620px) {
  .cook-custom-ingredient-add {
    grid-template-columns: 1fr;
  }

  .cook-custom-ingredient-add .button {
    width: 100%;
  }
}

/* Premium grocery dropdown and authentication polish. */
.cook-meal-builder-select {
  min-height: 56px;
  padding-right: 3rem;
  border-color: var(--cook-orange-border);
  background-color: var(--cook-bg-elevated);
  color: var(--cook-text);
  font-weight: 700;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cook-meal-builder-select:hover {
  border-color: var(--cook-orange);
  background-color: var(--cook-bg-elevated);
}

.cook-meal-builder-select:focus {
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 4px var(--cook-orange-soft);
}

.cook-coming-soon-banner {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cook-orange-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
}

.cook-coming-soon-banner[hidden] {
  display: none !important;
}

.cook-coming-soon-banner span {
  color: var(--cook-text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.auth-card {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-lg);
  box-shadow: var(--cook-shadow-soft);
}

.auth-brand__copy {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
}

.auth-brand__copy span,
.auth-switch {
  color: var(--cook-muted);
}

.auth-switch {
  margin: 0;
}

.password-requirements {
  margin: 0;
  color: var(--cook-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.password-requirements strong {
  color: var(--cook-text);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--cook-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  background: var(--cook-border);
  content: '';
  flex: 1;
}

.auth-switch a {
  color: var(--cook-orange-ink);
  font-weight: 800;
}

/* Cook Your Meal site estimate and explicit confirmation step. */
.cook-meal-estimate-note,
.cook-meal-confirmation-check,
.cook-meal-confirmation-status {
  border-radius: var(--cook-radius-sm);
}

.cook-meal-estimate-note {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cook-orange-border);
  background: var(--cook-orange-soft);
}

.cook-meal-estimate-note strong,
.cook-meal-confirmation-status {
  color: var(--cook-orange-ink);
}

.cook-meal-estimate-note span,
.cook-meal-confirmation-status {
  font-size: 0.9rem;
  line-height: 1.45;
}

.cook-meal-confirmation {
  display: grid;
  gap: 1rem;
  border-color: var(--cook-orange-border);
}

.cook-meal-confirmation-check {
  display: flex;
  gap: 0.75rem;
  padding: 0.95rem;
  border: 1px solid var(--cook-border);
  background: var(--cook-bg-elevated);
  align-items: flex-start;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.45;
}

.cook-meal-confirmation-check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--cook-orange);
  flex: 0 0 auto;
}

.cook-meal-confirmation-check:focus-within {
  border-color: var(--cook-orange);
  box-shadow: 0 0 0 4px var(--cook-orange-soft);
}

.cook-meal-confirmation-status {
  margin: 0;
  padding: 0.75rem 0.85rem;
  background: var(--cook-orange-soft);
}

.cook-meal-summary .button[disabled] {
  border-color: var(--cook-border);
  background: var(--cook-bg-disabled);
  color: var(--cook-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* Cart row alignment cleanup. */
.cart-item {
  align-items: center;
}

.cart-item__details {
  min-width: 0;
}

.cart-item__substitution {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cook-muted);
  cursor: pointer;
}

.cart-item__substitution input {
  width: 16px;
  height: 16px;
  accent-color: var(--cook-primary);
}

.cart-item__actions,
.cart-item__quantity,
.cart-item__total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cart-item__actions .stepper-button {
  min-width: 96px;
  justify-content: center;
}

.cart-item__quantity {
  min-width: 112px;
  white-space: nowrap;
}

.cart-item__total {
  min-width: 92px;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .cart-item__actions,
  .cart-item__quantity,
  .cart-item__total {
    justify-content: flex-start;
  }

  .cart-item__actions .stepper-button {
    width: 100%;
  }
}

/* ==========================================================================
   Slide-out cart drawer (UX spec Section 5) -- opens from the right, 100%
   width on mobile / 420px on desktop, over a dimmed overlay. Reuses
   .cart-item/.cart-group/.cart-summary__row styling from the full cart
   page; only the container chrome and the narrow-width overrides below are
   new. z-index 90+ sits above the header (50) and its dropdowns (70).
   ========================================================================== */
.cook-cart-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--cook-overlay);
  /* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 3: same open/close
     fade-in treatment as .cook-header-dropdown-overlay above, driven by
     .is-open (see showModalEl()/hideModalEl() in cookonline.js). */
  opacity: 0;
  transition: opacity 0.22s ease;
}

.cook-cart-drawer-overlay.is-open {
  opacity: 1;
}

.cook-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  background: var(--cook-bg-elevated);
  box-shadow: var(--cook-shadow-card);
  /* Slides in from the right instead of an abrupt appear/disappear. */
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

.cook-cart-drawer.is-open {
  transform: translateX(0);
}

.cook-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cook-border);
}

.cook-cart-drawer__head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.cook-cart-drawer__body {
  flex: 1;
  min-height: 0;
  padding: 0 1.25rem;
  overflow-y: auto;
}

.cook-cart-drawer__empty {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding: 3rem 1rem;
  text-align: center;
}

.cook-cart-drawer__empty-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  fill: none;
  stroke: var(--cook-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.cook-cart-drawer__footer {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--cook-border);
}

.cook-cart-drawer__checkout {
  width: 100%;
}

/* The drawer is always narrow-width content, even at its 420px desktop
   max-width, so it always gets the same stacked cart-item layout the full
   cart page only switches to under 620px. */
.cook-cart-drawer .cart-item {
  grid-template-columns: 1fr;
}

.cook-cart-drawer .cart-item__actions,
.cook-cart-drawer .cart-item__quantity,
.cook-cart-drawer .cart-item__total {
  justify-content: flex-start;
}

.cook-cart-drawer .cart-item__actions .stepper-button {
  width: 100%;
}

/* Add-to-cart toast (UX spec Section 7) -- 2s, non-blocking, never opens
   the drawer on every add. */
.cook-offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--cook-warning-bg);
  color: var(--cook-warning);
  border-bottom: 1px solid var(--cook-warning-border);
}

.cook-offline-banner[hidden] {
  display: none;
}

.cook-toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: 0.65rem 1.1rem;
  border-radius: var(--cook-radius-full, 999px);
  background: var(--cook-text);
  color: var(--cook-bg-elevated);
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: var(--cook-shadow-card);
}

/* Premium header delivery checker polish with CookOnline-branded interaction. */
.cook-site-header {
  --cook-header-accent: var(--cook-orange);
  --cook-header-ink: var(--cook-orange-ink);

  position: sticky;
  isolation: isolate;
}

.cook-search-input {
  border-color: var(--cook-header-accent);
}

.cook-search-button {
  border-left: 1px solid rgba(252, 74, 4, 0.18);
  background: var(--cook-orange-soft);
  color: var(--cook-header-ink);
}

.cook-header-control:not(.cook-cart-button) {
  color: var(--cook-header-ink);
}

.cook-header-control:not(.cook-cart-button):hover,
.cook-header-control:not(.cook-cart-button):focus-visible,
.cook-header-control:not(.cook-cart-button)[aria-expanded='true'] {
  border-color: var(--cook-header-accent);
  background: var(--cook-orange-soft);
  color: var(--cook-header-ink);
  box-shadow: 0 0 0 4px rgba(252, 74, 4, 0.08);
}

.cook-header-dropdown-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.cook-header-dropdown-close {
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--cook-tap-target);
  height: var(--cook-tap-target);
  border: 1px solid var(--cook-orange-border);
  border-radius: 999px;
  background: var(--cook-bg-elevated);
  color: var(--cook-header-ink);
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  place-items: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cook-header-dropdown-close:hover,
.cook-header-dropdown-close:focus-visible {
  background: var(--cook-orange-soft);
  border-color: var(--cook-orange);
  outline: 0;
}

.cook-header-dropdown-close:active {
  transform: scale(0.97);
}

.cook-delivery-checker-account p {
  color: var(--cook-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.cook-delivery-checker-account a {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgba(252, 74, 4, 0.18);
  border-radius: var(--cook-radius-md);
  background: var(--cook-orange-soft);
  color: var(--cook-header-ink);
  font-weight: 850;
}

.cook-delivery-checker-account a:hover,
.cook-delivery-checker-account a:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
}

.cook-location-search-form {
  display: grid;
  gap: 0.45rem;
  margin: 0.9rem 0 0.7rem;
}

.cook-location-search-form label {
  color: var(--cook-text);
  font-size: 0.85rem;
  font-weight: 800;
}

.cook-delivery-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.15rem;
  overflow: hidden;
  border: 2px solid var(--cook-orange);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
}

.cook-delivery-search-row:focus-within {
  box-shadow: 0 0 0 4px rgba(252, 74, 4, 0.12);
}

.cook-delivery-search-row input {
  min-width: 0;
  border: 0;
  padding: 0.9rem 1rem;
  outline: 0;
  background: transparent;
  color: var(--cook-text);
}

.cook-delivery-search-row button {
  display: grid;
  border: 0;
  border-left: 1px solid rgba(252, 74, 4, 0.2);
  background: var(--cook-orange-soft);
  color: var(--cook-header-ink);
  cursor: pointer;
  place-items: center;
}

.cook-delivery-search-row button:hover,
.cook-delivery-search-row button:focus-visible {
  background: var(--cook-orange);
  color: #fff;
  outline: 0;
}

.cook-location-locate-btn {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  color: var(--cook-orange-ink);
  font-weight: 800;
  margin-bottom: 0.7rem;
}

.cook-location-locate-btn:hover,
.cook-location-locate-btn:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange-soft);
  outline: 0;
}

.cook-location-search-feedback {
  margin: -0.3rem 0 0.7rem;
  color: var(--cook-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.cook-location-search-feedback[hidden] {
  display: none !important;
}

.cook-location-search-feedback--error {
  color: var(--cook-orange-ink);
}

/* Decorative Nigeria pin map -- honest about what it is (a stylized,
   shaded illustration, not a precise coastline) via the "not to scale"
   caption, but the underlying shape is real Nigeria state boundary data
   (assets/images/nigeria-outline.svg, CC BY 4.0 -- see file header for
   attribution) and the three pins are plotted from that same data's real
   state centroids, not guessed. No Maps API/tiles/billing involved. */
.cook-location-map {
  margin: 0.9rem 0 1rem;
  padding: 0.9rem 0.9rem 0.6rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
}

.cook-location-map-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.cook-location-map-img {
  display: block;
  width: 100%;
  height: auto;
}

.cook-location-map-pin {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  transform: translate(-50%, -50%);
}

.cook-location-map-pin-dot {
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--cook-muted);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.cook-location-map-pin--active .cook-location-map-pin-dot {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--cook-orange);
  box-shadow: 0 0 0 4px rgba(252, 74, 4, 0.22), 0 1px 4px rgba(0, 0, 0, 0.35);
}

.cook-location-map-pin-label {
  padding: 0.1rem 0.4rem;
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cook-location-map-pin--active .cook-location-map-pin-label {
  color: var(--cook-orange-ink);
}

.cook-location-map-caption {
  margin: 0.5rem 0 0;
  color: var(--cook-muted);
  font-size: 0.72rem;
  text-align: center;
}

.cook-delivery-location-list {
  display: grid;
  gap: 0.55rem;
  margin: 0.75rem 0;
}

.cook-delivery-location-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
}

.cook-delivery-location-row:hover,
.cook-delivery-location-row:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange-soft);
}

.cook-delivery-location-row strong,
.cook-delivery-location-row small {
  display: block;
}

.cook-delivery-location-row strong {
  color: var(--cook-text);
  font-size: 1rem;
}

.cook-delivery-location-row small {
  margin-top: 0.15rem;
  color: var(--cook-muted);
  font-size: 0.85rem;
  font-weight: 750;
}

.cook-delivery-location-row.is-active small,
.cook-delivery-location-arrow,
.cook-delivery-location-pin {
  color: var(--cook-header-ink);
}

.cook-delivery-location-pin {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--cook-orange-soft);
  font-weight: 900;
  place-items: center;
}

.cook-delivery-location-arrow {
  font-size: 1.55rem;
  font-weight: 800;
}

/* Live-site bug report fix: the header greeting had no way to sign out --
   matches the .cook-delivery-location-row row-list convention above,
   simplified to a single-line link since there's no icon/pin here. */
.cook-account-menu-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

/* make like ocado: same row-list treatment as .cook-delivery-location-row
   (Choose Location already uses this convention), reused for Your
   Account's two entries rather than inventing a near-identical pattern. */
.cook-account-menu-item {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  font-weight: 700;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.cook-account-menu-item:hover,
.cook-account-menu-item:focus-visible {
  border-color: var(--cook-orange);
  background: var(--cook-orange-soft);
}

.cook-account-menu-item:active {
  transform: scale(0.98);
}

.cook-account-menu-item--danger {
  color: var(--cook-danger);
}

.cook-account-menu-item--danger:hover,
.cook-account-menu-item--danger:focus-visible {
  border-color: var(--cook-danger-border);
  background: var(--cook-danger-bg);
}

/* make like ocado (round 2): a real screenshot comparison showed the
   bordered-card rows above read as a form, not the plain, near-full-
   height panel Ocado's own hamburger opens -- sliding down from the very
   top of the screen instead of a compact bottom sheet, no visible "Menu"
   title (just the floating close button), and a flat divided list rather
   than boxed rows. Overrides .cook-header-dropdown's shared positioning
   only for this one panel -- open/close, focus trap and backdrop still
   come from the same menus-array mechanism in initHeaderInteractions(). */
.cook-hamburger-menu {
  position: fixed;
  top: 0;
  bottom: auto;
  max-height: min(94dvh, 720px);
  padding-top: calc(3.9rem + env(safe-area-inset-top, 0px));
  border-radius: 0 0 var(--cook-radius-lg) var(--cook-radius-lg);
  transform: translateY(-100%);
}

.cook-hamburger-menu.is-open {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .cook-hamburger-menu {
    top: 1.5rem;
    left: 50%;
    right: auto;
    bottom: auto;
    padding-top: 3.9rem;
    border-radius: var(--cook-radius-lg);
    transform: translate(-50%, -14px);
  }

  .cook-hamburger-menu.is-open {
    transform: translate(-50%, 0);
  }
}

/* The floating circular close button sits over the panel's own top-left
   corner (Ocado's own X is a separate element, not part of a title row)
   -- .cook-hamburger-menu's padding-top above reserves the room for it. */
.cook-hamburger-menu-close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  box-shadow: var(--cook-shadow-card);
}

.cook-hamburger-menu-list {
  display: grid;
  margin: 0;
}

/* Flat, generously spaced rows divided by hairlines instead of boxed
   cards -- closer to Ocado's own list, and set in the brand's display
   face (Fraunces, the same one product/dish names use) rather than
   inheriting the account menu's bordered-card body-face treatment. */
.cook-hamburger-menu-item {
  display: block;
  padding: 1.05rem 0.35rem;
  border-bottom: 1px solid var(--cook-border);
  color: var(--cook-text);
  font-family: var(--cook-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.cook-hamburger-menu-list .cook-hamburger-menu-item:last-child {
  border-bottom: none;
}

.cook-hamburger-menu-item:hover,
.cook-hamburger-menu-item:focus-visible {
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
  outline: 0;
}

.cook-hamburger-menu-item:active {
  transform: scale(0.99);
}

/* Marks which menu item is the page the shopper is already on -- opening
   the menu previously gave no "you are here" cue at all. */
.cook-hamburger-menu-item.is-current-page {
  color: var(--cook-orange-ink);
  font-weight: 800;
}

/* Sign out was only reachable from the separate account-pill dropdown --
   opening the "everything else" hamburger menu while signed in had no way
   out of the account at all. Same danger-color language as the account
   menu's own Sign out row (.cook-account-menu-item--danger). */
.cook-hamburger-menu-item--danger {
  color: var(--cook-danger);
}

.cook-hamburger-menu-item--danger:hover,
.cook-hamburger-menu-item--danger:focus-visible {
  background: var(--cook-danger-bg);
  color: var(--cook-danger);
}

/* make like ocado: Sign in moved from the compact header row into the
   hamburger menu (screenshot 3 of the reference shows Ocado's own Log in
   entry sitting first, visually distinct from Register/Browse/etc below
   it) -- a filled pill instead of the plain divided-row treatment so it
   still reads as the primary action once it's just one row among several. */
.cook-hamburger-menu-item--accent {
  margin-bottom: 0.35rem;
  padding: 0.95rem 1rem;
  border-bottom: none;
  border-radius: var(--cook-radius-md);
  background: var(--cook-orange);
  color: #fff;
  font-family: var(--cook-font-body);
  text-align: center;
}

.cook-hamburger-menu-item--accent:hover,
.cook-hamburger-menu-item--accent:focus-visible {
  background: var(--cook-orange-dark);
  color: #fff;
}

.cook-delivery-checker-account {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem;
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
}

.cook-delivery-checker-account p {
  margin: 0;
}

@media (max-width: 960px) {
  .cook-site-header {
    position: sticky;
  }
}

@media (max-width: 560px) {
  .cook-header-actions {
    gap: 0.5rem;
  }

  .cook-header-control:not(.cook-cart-button) {
    justify-content: center;
    border-width: 2px;
  }

  .cook-delivery-location-row {
    min-height: 76px;
    padding: 1rem;
  }
}

/* ============================================================
   Cook Your Meal (CYM-B): menu categories, dish cards, dish detail
   (pilot quantity step + scaled recipe step), and the cart's
   grouped "Cook Your Meal" line-sets. Mobile-first at 360px.
   ============================================================ */

.cook-menu-category-grid,
.cook-dish-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cook-space-5);
  margin-top: var(--cook-space-6);
}

@media (min-width: 560px) {
  .cook-dish-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .cook-menu-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cook-dish-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cook-dish-card {
  display: flex;
  flex-direction: column;
  background: var(--cook-bg-elevated);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius);
  box-shadow: var(--cook-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cook-dish-card:hover,
.cook-dish-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--cook-shadow-card);
}

/* DYNAMIC_EFFECTS_FINISHING_CLAUDE_CODE.md Section 2: pressed state,
   same lift-negation convention as .cook-meal-tile:active. */
.cook-dish-card:active {
  transform: translateY(0);
  box-shadow: var(--cook-shadow);
}

.cook-dish-card.is-featured {
  border-color: var(--cook-orange-border);
  box-shadow: 0 0 0 2px var(--cook-orange-soft);
}

.cook-dish-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--cook-bg-muted);
}

.cook-dish-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
}

.cook-dish-card__body strong {
  color: var(--cook-text);
  font-family: var(--cook-font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.cook-dish-card__from {
  color: var(--cook-muted);
  font-size: 0.9rem;
}

.cook-dish-detail__hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.cook-dish-detail__image {
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase B2: matches the same
     4:3 aspect ratio every other photo card in the app uses (.cook-dish-
     card__image, .cook-category-tile__image) instead of a bare max-height
     clamp, so this hero reads as part of the same considered photo system. */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--cook-radius);
  background: var(--cook-bg-muted);
}

@media (min-width: 640px) {
  .cook-dish-detail__hero {
    flex-direction: row;
    align-items: center;
  }
  .cook-dish-detail__image {
    max-width: 240px;
  }
}

.cook-pilot-step,
.cook-recipe-step {
  margin-bottom: 1.5rem;
}

.cook-pilot-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.cook-pilot-pill {
  min-height: var(--cook-tap-target);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid var(--cook-border);
  background: var(--cook-bg-surface);
  color: var(--cook-text);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cook-pilot-pill:hover,
.cook-pilot-pill:focus-visible {
  border-color: var(--cook-orange-border);
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D3: matches the shared
   .button:active pressed-state every other interactive control in the
   app already has -- this servings selector had missed it. */
.cook-pilot-pill:active {
  transform: scale(0.97);
}

.cook-pilot-pill.is-active {
  background: var(--cook-primary-dark);
  border-color: var(--cook-primary-dark);
  color: var(--cook-white);
}

.cook-recipe-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.cook-recipe-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--cook-bg-surface);
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
}

.cook-recipe-line.is-removed {
  opacity: 0.5;
}

.cook-recipe-line.is-removed .cook-recipe-line__qty,
.cook-recipe-line.is-removed .cook-recipe-line__price {
  visibility: hidden;
}

.cook-recipe-line__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cook-recipe-line__name strong {
  color: var(--cook-text);
}

.cook-recipe-line__lock {
  display: inline-flex;
}

.cook-recipe-line__lock svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: var(--cook-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cook-recipe-line__remove {
  background: none;
  border: none;
  color: var(--cook-danger);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

.cook-recipe-line__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cook-recipe-line__qty input[data-qty-value] {
  width: 4.5rem;
  min-height: var(--cook-tap-target);
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  text-align: center;
}

.cook-recipe-line__qty span[data-unit-label] {
  color: var(--cook-muted);
  font-size: 0.9rem;
}

.cook-recipe-line__price {
  color: var(--cook-primary);
  font-size: 1.05rem;
}

.cook-cym-summary-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--cook-bg-elevated);
  border-top: 1px solid var(--cook-border);
  box-shadow: var(--cook-shadow);
  padding: 1rem;
  margin: 0 -1rem;
}

.cook-cym-summary-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cook-cym-summary-bar__inner strong {
  color: var(--cook-primary);
  font-size: 1.15rem;
}

.cook-cym-success {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* Grouped "Cook Your Meal" line-sets on the cart page -- a dish header
   (name + pilot quantity) that expands to show its ingredient lines +
   cooking fee, per decision in Step 2/4 of the CYM build prompt. */
.cart-group {
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
}

.cart-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--cook-bg-muted);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}

.cart-group__summary::-webkit-details-marker {
  display: none;
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D6: matches the
   .cook-diet-accordion-header fix from Phase D5 -- this clickable <summary>
   disclosure trigger had no hover, focus, or pressed feedback either. */
.cart-group__summary:hover {
  background: var(--cook-orange-soft);
}

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

.cart-group__summary:active {
  background: var(--cook-orange-soft);
}

.cart-group__lines {
  padding: 0.5rem 1rem 1rem;
}

.cart-group__lines .cart-item {
  border-bottom: 1px solid var(--cook-border);
}

.cart-group__lines .cart-item:last-child {
  border-bottom: none;
}

/* ============================================================
   Cook Your Meal (CYM-C): order status page -- cooking scene,
   delivery person card, confirm/reject, star-rating review form.
   The global prefers-reduced-motion rule near the top of this file
   already flattens every animation-duration to ~0, so the cooking
   animation below needs no reduced-motion override of its own.
   ============================================================ */

.cook-cym-status {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cook-cooking-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem 0;
}

.cook-cooking-scene__image {
  max-width: 220px;
  border-radius: var(--cook-radius-md);
}

.cook-cooking-scene__animation {
  position: relative;
  width: 140px;
  height: 110px;
}

.cook-pot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 55px;
  background: var(--cook-primary);
  border-radius: 0 0 20px 20px;
}

.cook-pot::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -8px;
  right: -8px;
  height: 14px;
  background: var(--cook-primary-dark);
  border-radius: 8px;
}

.cook-steam {
  position: absolute;
  bottom: 60px;
  width: 10px;
  height: 24px;
  background: var(--cook-muted);
  border-radius: 999px;
  opacity: 0.55;
  animation: cook-steam-rise 2.2s ease-in-out infinite;
}

.cook-steam--1 {
  left: 40px;
  animation-delay: 0s;
}

.cook-steam--2 {
  left: 65px;
  animation-delay: 0.5s;
}

.cook-steam--3 {
  left: 90px;
  animation-delay: 1s;
}

@keyframes cook-steam-rise {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 0;
  }
  30% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(-40px) scaleY(1.4);
    opacity: 0;
  }
}

.cook-delivery-person {
  padding: 0.9rem 1rem;
  background: var(--cook-bg-muted);
  border-radius: var(--cook-radius-md);
}

.cook-delivery-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.cook-delivery-reject-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cook-border);
}

.cook-delivery-reject-form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
}

.cook-review-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* CSS-only star rating: radios rendered highest-value-first in the DOM,
   laid out reversed so visual order reads low-to-high, with :checked/
   :hover on a later (visually-earlier) star filling every star before it
   via the general sibling selector. */
.cook-star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
  border: none;
  padding: 0;
  margin: 0;
}

.cook-star-rating legend {
  width: 100%;
  color: var(--cook-muted);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

.cook-star-rating input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cook-star-rating label {
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  color: var(--cook-muted);
  font-size: 1.3rem;
  border-radius: var(--cook-radius-sm);
}

.cook-star-rating input[type="radio"]:checked ~ label,
.cook-star-rating label:hover,
.cook-star-rating label:hover ~ label {
  color: var(--cook-primary);
}

.cook-star-rating input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--cook-primary);
  outline-offset: 2px;
}

/* Approved dish reviews on the Cook Your Meal dish detail page. */
.cook-dish-reviews {
  margin-top: 2rem;
}

.cook-dish-review {
  padding: 1rem;
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  margin-bottom: 0.75rem;
}

.cook-dish-review__rating {
  color: var(--cook-primary);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   "Get Diets" (GET_DIETS_UX_BUILD_CLAUDE_CODE.md) -- landing/category tiles,
   the mandatory disclaimer (banner + inline note + checkout checkbox), the
   2-tab switcher, the 7-day accordion, and Screen 3's variant badge. The
   --cook-warning-* tokens used for the banner are the same ones already
   proven WCAG AA in both themes on .negotiable-note elsewhere in this file.
   ========================================================================== */

.cook-diet-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--cook-warning-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-warning-bg);
}

.cook-diet-disclaimer__icon {
  flex: none;
  font-size: 1.1rem;
  line-height: 1.4;
}

.cook-diet-disclaimer p {
  margin: 0;
  color: var(--cook-text);
  font-size: 0.88rem;
  line-height: 1.5;
}

.cook-diet-inline-note {
  margin: 0.75rem 0 0;
}

.cook-diet-inline-note__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--cook-tap-target);
  padding: 0 0.2rem;
  border: none;
  border-radius: var(--cook-radius-sm);
  background: none;
  color: var(--cook-warning);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: text-decoration-color 0.15s ease;
}

.cook-diet-inline-note__toggle:hover,
.cook-diet-inline-note__toggle:focus-visible {
  text-decoration: underline;
}

.cook-diet-inline-note__toggle:focus-visible {
  outline: 2px solid var(--cook-primary);
  outline-offset: 2px;
}

.cook-diet-inline-note--static {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--cook-warning);
  font-size: 0.85rem;
  font-weight: 600;
}

.cook-diet-inline-note__full {
  display: block;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--cook-warning-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-warning-bg);
  color: var(--cook-text);
  font-size: 0.82rem;
  line-height: 1.5;
}

.cook-dish-card__description {
  color: var(--cook-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.cook-diet-coming-soon-strip {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-muted);
}

.cook-diet-coming-soon-strip__label {
  margin: 0 0 0.5rem;
  color: var(--cook-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cook-diet-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cook-diet-chip {
  padding: 0.4rem 0.85rem;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--cook-border);
  background: var(--cook-bg-elevated);
  color: var(--cook-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.cook-diet-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.3rem;
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-muted);
}

.cook-diet-tab {
  min-height: var(--cook-tap-target);
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--cook-radius-sm);
  background: transparent;
  color: var(--cook-muted);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.cook-diet-tab.is-active {
  background: var(--cook-bg-elevated);
  color: var(--cook-text);
  box-shadow: var(--cook-shadow-card);
}

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

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D5: matches the shared
   .button:active pressed-state convention every other control in the app
   uses. */
.cook-diet-tab:active {
  transform: scale(0.97);
}

.cook-diet-tab-panel {
  margin-top: 1.25rem;
}

.cook-diet-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cook-diet-accordion-day {
  border: 1px solid var(--cook-border);
  border-radius: var(--cook-radius-md);
  background: var(--cook-bg-elevated);
  overflow: hidden;
}

.cook-diet-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--cook-tap-target);
  padding: 0.9rem 1.1rem;
  border: none;
  background: none;
  color: var(--cook-text);
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D5: this full-width
   clickable header had no interactive feedback at all -- no hover, no
   focus ring, no pressed state -- unlike every other clickable control in
   the app. */
.cook-diet-accordion-header:hover {
  background: var(--cook-bg-muted);
}

.cook-diet-accordion-header:focus-visible {
  outline: 2px solid var(--cook-primary);
  outline-offset: -2px;
}

.cook-diet-accordion-header:active {
  background: var(--cook-orange-soft);
}

.cook-diet-accordion-caret {
  color: var(--cook-muted);
  transition: transform 0.15s ease;
}

.cook-diet-accordion-header[aria-expanded="true"] .cook-diet-accordion-caret {
  transform: rotate(180deg);
}

.cook-diet-accordion-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.1rem 1rem;
}

.cook-diet-meal-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cook-diet-meal-row__slot {
  color: var(--cook-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cook-diet-meal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cook-diet-meal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--cook-tap-target);
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--cook-border);
  background: var(--cook-bg-surface);
  color: var(--cook-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.cook-diet-meal-chip:hover,
.cook-diet-meal-chip:focus-visible {
  border-color: var(--cook-orange-border);
}

.cook-diet-meal-chip:active {
  transform: scale(0.97);
}

.cook-diet-meal-chip--static {
  cursor: default;
  color: var(--cook-muted);
}

.cook-diet-meal-chip img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cook-bg-muted);
}

.cook-diet-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25rem 0.65rem;
  margin-bottom: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--cook-orange-soft);
  color: var(--cook-orange-ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.cook-diet-variant-note {
  font-style: italic;
}

.cook-diet-checkout-disclaimer {
  border: 1px solid var(--cook-warning-border);
  border-radius: var(--cook-radius-sm);
  background: var(--cook-warning-bg);
  padding: 0.85rem 1rem;
}

.cook-diet-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cook-text);
}

.cook-diet-checkbox-label input[type="checkbox"] {
  /* MASTER_PREMIUM_UX_AUDIT_CLAUDE_CODE.md Phase D7: matches
     .cart-item__substitution input's accent-color -- this checkbox (a
     compliance acknowledgment gating checkout) was left on the browser's
     default tint instead of the brand color every other checkbox uses. */
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  accent-color: var(--cook-primary);
}

#checkoutOrderForm button[type="submit"].is-disclaimer-blocked {
  opacity: 0.5;
}