:root {
  --accent-primary: #2D6A4F;
  --accent-primary-hover: #1B4332;
  --accent-primary-light: #D8F3DC;
  --accent-secondary: #52796F;
  --affiliate-cta-bg: #2D6A4F;
  --affiliate-cta-hover: #1B4332;
  --affiliate-cta-text: #FAFAF7;
  --affiliate-disclosure-text: #57534E;
  --border-focus: #2D6A4F;
  --border-input: #D6D3D1;
  --border-subtle: #E7E5E4;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --error-bg: #FEF2F2;
  --error-border: #FECACA;
  --error-text: #991B1B;
  --font-bold: 700;
  --font-medium: 500;
  --font-normal: 400;
  --font-semibold: 600;
  --grade-A-bg: #D1FAE5;
  --grade-A-text: #065F46;
  --grade-B-bg: #DBEAFE;
  --grade-B-text: #1E40AF;
  --grade-C-bg: #FEF3C7;
  --grade-C-text: #92400E;
  --grade-D-bg: #FFEDD5;
  --grade-D-text: #9A3412;
  --grade-E-bg: #F5F5F4;
  --grade-E-text: #78716C;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-tight: 1.2;
  --local-shop-bg: #F5ECE0;
  --local-shop-border: #E7CBA6;
  --local-shop-text: #7A3E1A;
  --nutriscore-a-bg: #1E8449;
  --nutriscore-a-text: #FFFFFF;
  --nutriscore-b-bg: #58AB27;
  --nutriscore-b-text: #FFFFFF;
  --nutriscore-c-bg: #F9C623;
  --nutriscore-c-text: #1C1917;
  --nutriscore-d-bg: #E67E22;
  --nutriscore-d-text: #FFFFFF;
  --nutriscore-e-bg: #C0392B;
  --nutriscore-e-text: #FFFFFF;
  --radius-full: 9999px;
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --retailer-sainsburys: #F06C00;
  --retailer-tesco: #00539F;
  --retailer-waitrose: #5E8E3E;
  --shadow-lg: 0 4px 16px rgba(28, 25, 23, 0.12);
  --shadow-md: 0 2px 8px rgba(28, 25, 23, 0.08);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --space-1: 4px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --sponsored-bg: #FBE7E7;
  --sponsored-border: #FCA5A5;
  --sponsored-text: #881337;
  --success-bg: #F0FDF4;
  --success-text: #166534;
  --surface-base: #FAFAF7;
  --surface-card: #FFFFFF;
  --surface-overlay: rgba(28, 25, 23, 0.4);
  --surface-raised: #F5F4F0;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-base: 1rem;
  --text-inverse: #FAFAF7;
  --text-lg: 1.125rem;
  --text-muted: #A8A29E;
  --text-primary: #1C1917;
  --text-secondary: #57534E;
  --text-sm: 0.875rem;
  --text-xl: 1.25rem;
  --text-xs: 0.75rem;
  --warning-bg: #FFFBEB;
  --warning-text: #92400E;
}

/* ── Font faces ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0300-0301, U+0304, U+0308, U+0329,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-latin-wght-italic.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0300-0301, U+0304, U+0308, U+0329,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ────────────────────────────────────────────────────────── */

/* Single source of truth. Every color, size, and spacing value comes from    */

/* here. No bare hex values anywhere else in this file.                       */

/* ── Reset ───────────────────────────────────────────────────────────────── */

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

/* ── Base ────────────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
  /* Belt-and-braces: any rogue child overflow (long words, third-party
     widgets, leaflet tile bleed) is clipped at the viewport edge instead of
     producing a horizontal scrollbar. `clip` does not create a scroll
     container so does not break sticky/fixed children. */
  overflow-x: clip;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--surface-base);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ── Skip link (accessibility) ───────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  z-index: 300;
  clip-path: inset(100%);
  transition: clip-path var(--duration-fast) var(--easing-default);
}

.skip-link:focus {
  clip-path: inset(0%);
}

/* ── Container ───────────────────────────────────────────────────────────── */

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.admin-link,
.settings-link {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px var(--space-2);
}

.admin-link:hover,
.settings-link:hover {
  color: var(--text-secondary);
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.header-logo {
  height: 32px;
  width: auto;
  display: block;
}

.subtitle {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */

.hidden { display: none !important; }

.muted {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Form shell ──────────────────────────────────────────────────────────── */

form {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Fieldset ────────────────────────────────────────────────────────────── */

.form-fieldset {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-fieldset legend {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  padding: 0 var(--space-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fieldset-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  margin-top: calc(-1 * var(--space-2));
}

/* ── Dietary toggles ─────────────────────────────────────────────────────── */

.dietary-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dietary-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
  /* Ensure touch target */
  min-width: 44px;
  user-select: none;
}

.dietary-pill:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-secondary);
  color: var(--accent-primary);
}

.dietary-pill--active,
.dietary-pill[aria-pressed="true"] {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: var(--font-semibold);
}

.effort-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
  min-width: 44px;
  user-select: none;
}

.effort-pill:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-secondary);
  color: var(--accent-primary);
}

.effort-pill--active,
.effort-pill[aria-pressed="true"] {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: var(--font-semibold);
}

/* priority, occasion, allergen pills reuse the same visual pattern */

.priority-pill,
.occasion-pill,
.allergen-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
  min-width: 44px;
  user-select: none;
}

.priority-pill:hover,
.occasion-pill:hover,
.allergen-pill:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-secondary);
  color: var(--accent-primary);
}

.priority-pill--active,
.occasion-pill--active,
.allergen-pill--active,
.priority-pill[aria-pressed="true"],
.occasion-pill[aria-pressed="true"],
.allergen-pill[aria-pressed="true"] {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: var(--font-semibold);
}

/* ── Shared-URL banner ─────────────────────────────────────────────────────── */

.shared-url-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-primary-light);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.shared-url-banner__text {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.shared-url-banner__actions {
  display: flex;
  gap: var(--space-2);
}

.shared-url-banner__btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  background: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.shared-url-banner__btn--primary {
  background: var(--accent-primary);
  color: white;
}

.shared-url-banner__btn:hover {
  opacity: 0.9;
}

/* ── Onboarding modal ──────────────────────────────────────────────────────── */

.onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-modal.hidden {
  display: none !important;
}

.onboarding-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--surface-overlay);
}

.onboarding-modal__content {
  position: relative;
  z-index: 1;
  width: min(92vw, 480px);
  max-height: 90vh;
  overflow: auto;
  padding: var(--space-5);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.onboarding-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onboarding-modal__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.onboarding-modal__close {
  background: transparent;
  border: none;
  font-size: var(--text-xl);
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}

.onboarding-modal__lede {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.onboarding-modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.onboarding-modal__btn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-input);
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
}

.onboarding-modal__btn--primary {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.onboarding-modal__btn:hover {
  opacity: 0.9;
}

/* ── Form row ────────────────────────────────────────────────────────────── */

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-row label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--text-base); /* 16px prevents iOS zoom */
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-card);
  transition: border-color var(--duration-fast) var(--easing-default);
  appearance: none;
  -webkit-appearance: none;
}

.form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2357534E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.form-row input::placeholder {
  color: var(--text-muted);
}

.constraints {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Advanced nutrition collapsible ──────────────────────────────────────── */

.advanced-nutrition {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
  margin-top: var(--space-1);
}

.advanced-nutrition__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-primary);
  padding: var(--space-1) 0;
  user-select: none;
}

.advanced-nutrition__toggle::-webkit-details-marker {
  display: none;
}

.advanced-nutrition__chevron {
  flex-shrink: 0;
  color: var(--accent-primary);
  transition: transform var(--duration-normal) var(--easing-default);
}

.advanced-nutrition[open] .advanced-nutrition__chevron {
  transform: rotate(180deg);
}

.advanced-nutrition__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* ── Submit button ───────────────────────────────────────────────────────── */

button[type="submit"] {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
  margin-top: var(--space-1);
}

button[type="submit"]:hover {
  background: var(--accent-primary-hover);
}

button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ── Section headings ────────────────────────────────────────────────────── */

h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

/* ── How it works ────────────────────────────────────────────────────────── */

.how-it-works {
  margin-bottom: var(--space-6);
}

.how-it-works details {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.how-it-works summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--accent-primary);
  list-style: none;
  user-select: none;
}

.how-it-works summary::-webkit-details-marker {
  display: none;
}

.how-it-works p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Location input row (postcode + geolocate button) ────────────────────── */

.location-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.location-input-wrapper {
  position: relative;
  flex: 1 1 auto;
}

.location-input-wrapper input {
  width: 100%;
}

/* Address suggestions dropdown */

.location-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: var(--space-1) 0;
  max-height: 200px;
  overflow-y: auto;
}

.location-suggestions__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  line-height: var(--leading-relaxed);
}

.location-suggestions__item:hover,
.location-suggestions__item:focus {
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  outline: none;
}

.location-suggestions__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: default;
}

/* Geolocate button */

.geolocate-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-3);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  min-width: 44px;
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

.geolocate-btn:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-secondary);
  color: var(--accent-primary);
}

.geolocate-btn--loading {
  opacity: 0.7;
  cursor: wait;
}

@media (max-width: 480px) {
  .geolocate-btn__label {
    display: none;
  }
}

/* ── Radius picker ───────────────────────────────────────────────────────── */

.radius-picker {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.radius-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 64px;
  padding: 0 var(--space-3);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}

.radius-btn:hover {
  background: var(--accent-primary-light);
  border-color: var(--accent-secondary);
  color: var(--accent-primary);
}

.radius-btn--active,
.radius-btn[aria-pressed="true"] {
  background: var(--accent-primary-light);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  font-weight: var(--font-semibold);
}

/* ── Stores ──────────────────────────────────────────────────────────────── */

#stores-section {
  margin-bottom: var(--space-6);
}

/* Collapsible stores affordance — uses native <details>/<summary> for
   zero-JS keyboard-accessible expand/collapse.
   RN: replace with Pressable + controlled boolean state.                    */

.stores-collapsible {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.stores-collapsible__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--duration-fast) var(--easing-default);
}

.stores-collapsible__summary::-webkit-details-marker {
  display: none;
}

.stores-collapsible__summary:hover {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}

.stores-collapsible[open] .stores-collapsible__summary {
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.stores-collapsible__summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.stores-collapsible__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.stores-collapsible__chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform var(--duration-normal) var(--easing-default);
}

.stores-collapsible[open] .stores-collapsible__chevron {
  transform: rotate(180deg);
}

.stores-collapsible__body {
  padding: var(--space-4);
}

.stores-layout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

/* GRID: page-level 2-col layout — will need RN reimplementation */

#stores-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

#stores-map {
  flex: 0 0 300px;
  align-self: stretch;
  min-height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* Mobile: map full-width above store list */

@media (max-width: 640px) {
  .stores-layout {
    flex-direction: column;
  }
  #stores-map {
    flex: none;
    width: 100%;
    min-height: 180px;
    max-height: 220px;
    order: -1;
    align-self: auto;
  }
  #stores-list {
    grid-template-columns: 1fr;
  }
}

/* .stores-cap-note removed — count now lives in .stores-collapsible__summary */

/* User position marker animation */

.user-position-marker {
  animation: position-pulse 2s ease-in-out infinite;
}

@keyframes position-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ── Store chip: 2-row layout with fixed height ──────────────────────────── */

.store-chip {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-height: 64px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--easing-default),
              transform var(--duration-fast) var(--easing-default);
  overflow: hidden;
}

.store-chip:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.store-chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.store-chip[data-retailer="tesco"]      { border-left: 3px solid var(--retailer-tesco); }

.store-chip[data-retailer="sainsburys"] { border-left: 3px solid var(--retailer-sainsburys); }

.store-chip[data-retailer="waitrose"]   { border-left: 3px solid var(--retailer-waitrose); }

/* Row 1: retailer label (small, colored) + store name */

.store-chip__primary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.store-chip__retailer {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.store-chip[data-retailer="tesco"]      .store-chip__retailer { color: var(--retailer-tesco); }

.store-chip[data-retailer="sainsburys"] .store-chip__retailer { color: var(--retailer-sainsburys); }

.store-chip[data-retailer="waitrose"]   .store-chip__retailer { color: var(--retailer-waitrose); }

.store-chip__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Row 2: distance · walk · opening status */

.store-chip__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.store-chip__distance {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.store-chip__sep {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

/* Opening-status inline in the meta row — dot + label, not a filled pill */

.store-chip__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.store-chip__status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* Dot colors per status */

.store-chip__status--open        .store-chip__status-dot { background: #1e5c2c; }

.store-chip__status--closes_soon .store-chip__status-dot { background: #8a6900; }

.store-chip__status--closed      .store-chip__status-dot { background: #842029; }

.store-chip__status--unknown     .store-chip__status-dot { background: var(--text-muted); }

/* Label colors per status */

.store-chip__status--open        .store-chip__status-label { color: #1e5c2c; font-weight: var(--font-medium); }

.store-chip__status--closes_soon .store-chip__status-label { color: #8a6900; font-weight: var(--font-medium); }

.store-chip__status--closed      .store-chip__status-label { color: #842029; }

/* "unknown" is deliberately muted — it is absence-of-data, not a warning */

.store-chip__status--unknown     .store-chip__status-label { color: var(--text-muted); font-weight: var(--font-normal); }

/* ── Results section ─────────────────────────────────────────────────────── */

#results-section {
  margin-bottom: var(--space-8);
}

/* ── Meal card ───────────────────────────────────────────────────────────── */

/* Uses flexbox for all internal layout — portable to React Native.           */

.meal-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.meal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.meal-header__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.meal-name {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.meal-rank {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  flex-shrink: 0;
}

.meal-category {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Dietary badges on meal card ─────────────────────────────────────────── */

.dietary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.dietary-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}

/* ── Grade badge ─────────────────────────────────────────────────────────── */

.grade-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}

.grade-A { background: var(--grade-A-bg); color: var(--grade-A-text); }

.grade-B { background: var(--grade-B-bg); color: var(--grade-B-text); }

.grade-C { background: var(--grade-C-bg); color: var(--grade-C-text); }

.grade-D { background: var(--grade-D-bg); color: var(--grade-D-text); }

.grade-E { background: var(--grade-E-bg); color: var(--grade-E-text); }

/* ── Recipe badges ───────────────────────────────────────────────────────── */

.recipe-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.recipe-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border: 1px solid var(--border-subtle);
}

.recipe-badge--easy   { background: var(--grade-A-bg); color: var(--grade-A-text); border-color: transparent; }

.recipe-badge--medium { background: var(--grade-C-bg); color: var(--grade-C-text); border-color: transparent; }

.recipe-badge--hard   { background: var(--grade-D-bg); color: var(--grade-D-text); border-color: transparent; }

/* ── Per-serving toggle ──────────────────────────────────────────────────── */

.nutrition-grid-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(-1 * var(--space-2));
}

.per-serving-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.per-serving-toggle__option {
  font-size: var(--text-xs);
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--easing-default);
  user-select: none;
}

.per-serving-toggle__option--active {
  color: var(--accent-primary);
  font-weight: var(--font-semibold);
}

.per-serving-toggle__switch {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.per-serving-checkbox {
  /* Visually hidden but accessible */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.per-serving-toggle__track {
  display: block;
  width: 36px;
  height: 20px;
  background: var(--border-input);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--duration-fast) var(--easing-default);
  flex-shrink: 0;
}

.per-serving-toggle__track::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: var(--surface-card);
  border-radius: var(--radius-full);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform var(--duration-fast) var(--easing-default);
  box-shadow: var(--shadow-sm);
}

.per-serving-checkbox:checked + .per-serving-toggle__track {
  background: var(--accent-primary);
}

.per-serving-checkbox:checked + .per-serving-toggle__track::after {
  transform: translateX(16px);
}

/* ── Nutrition grid — 8 macros in 2 rows of 4 ────────────────────────────── */

/* Uses flexbox so it ports cleanly to React Native.                          */

.nutrition-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nutrition-item {
  flex: 1 1 calc(25% - var(--space-2));
  min-width: 56px;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}

.nutrition-item .value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.nutrition-item .label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ── Meal items ──────────────────────────────────────────────────────────── */

.meal-items {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.meal-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-subtle);
}

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

.meal-item__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Breathing room between quantity text and the right-hand edge of the row,
     particularly for from-pantry rows whose tinted background bleeds further. */
  padding-right: var(--space-2);
}

.meal-item .slot {
  color: var(--text-muted);
  font-size: var(--text-xs);
  min-width: 76px;
  flex-shrink: 0;
}

.meal-item .product-name {
  flex: 1;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  min-width: 0;
}

.meal-item .quantity {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Per-ingredient macro disclosure (kcal · protein · fat) ------------------ */

/* Chevron button at the far right of the row toggles a small inline panel. */

.item-macros__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44x44 touch target via padding; visual icon is 14x14 */
  width: 28px;
  height: 28px;
  margin: -8px -4px -8px 0;
  padding: 7px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 120ms ease, background 120ms ease, transform 160ms ease;
}

.item-macros__toggle:hover,
.item-macros__toggle:focus-visible {
  color: var(--text-primary);
  background: var(--surface-raised, var(--surface-muted));
}

.item-macros__toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.item-macros__toggle--open {
  color: var(--text-primary);
}

.item-macros__toggle--open svg {
  transform: rotate(180deg);
}

.item-macros__toggle svg {
  transition: transform 160ms ease;
}

.item-macros__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0 var(--space-1) calc(76px + var(--space-2));
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.item-macros__field {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}

.item-macros__value {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.item-macros__unit {
  color: var(--text-muted);
}

.item-macros__sep {
  color: var(--text-muted);
  opacity: 0.6;
}

.meal-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: calc(76px + var(--space-2));
}

/* Wrapper for multiple store badges — provides the gap the user requested */

.item-store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.item-store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  /* Outline treatment: retailer color as text, neutral surface background */
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.item-store-badge--unknown {
  background: var(--surface-raised);
  color: var(--text-muted);
  border-color: var(--border-subtle);
}

/* Retailer identity: brand color as text only, never as background fill */

.item-store-badge[data-retailer="tesco"]      { color: var(--retailer-tesco); border-color: color-mix(in srgb, var(--retailer-tesco) 25%, transparent); }

.item-store-badge[data-retailer="sainsburys"] { color: var(--retailer-sainsburys); border-color: color-mix(in srgb, var(--retailer-sainsburys) 25%, transparent); }

.item-store-badge[data-retailer="waitrose"]   { color: var(--retailer-waitrose); border-color: color-mix(in srgb, var(--retailer-waitrose) 25%, transparent); }

.grade-badge--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Availability rationale disclosure ───────────────────────────────────── */

/* Uses native <details>/<summary> for keyboard-accessible expand/collapse.   */

/* RN: replace with Pressable + controlled boolean state.                     */

.item-rationale {
  /* Sits inline with the store badge in .meal-item__meta */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

/* The summary IS the grade badge — clicking it toggles the panel */

.item-rationale__trigger {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity var(--duration-fast) var(--easing-default);
}

.item-rationale__trigger::-webkit-details-marker {
  display: none;
}

.item-rationale[open] .item-rationale__trigger {
  opacity: 0.8;
}

.item-rationale__trigger:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Expanded panel — appears below the meta row */

.item-rationale__panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  /* Anchor to the RIGHT edge of the rationale trigger (the grade pill, which
     sits at the row's right edge) so the panel grows leftward and never
     spills past the card on narrow viewports — primary cause of mobile
     horizontal scroll on the results page. */
  right: 0;
  left: auto;
  z-index: 100;
  /* Cap min-width by available viewport so panel never exceeds card width
     on small phones. 220px is the design comfort width; on viewports under
     ~280px it shrinks rather than overflowing. */
  min-width: min(220px, calc(100vw - 2rem));
  max-width: min(320px, calc(100vw - 2rem));
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.item-rationale__header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-2);
}

.item-rationale__grade-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.item-rationale__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
}

.item-rationale__list li {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  /* Indent with a subtle left marker */
  padding-left: var(--space-3);
  position: relative;
}

.item-rationale__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.item-rationale__empty {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* On narrow viewports, pin panel to the right edge of the card */

@media (max-width: 480px) {
  .item-rationale__panel {
    left: auto;
    right: 0;
  }
}

/* ── Recipe section ──────────────────────────────────────────────────────── */

.recipe-section {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
}

.recipe-section[hidden] {
  display: none;
}

.recipe-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.recipe-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.recipe-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  margin-top: 1px;
}

.recipe-step__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.recipe-step__text strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.recipe-step__duration {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--surface-card);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  border: 1px solid var(--border-subtle);
}

/* View recipe toggle button */

.recipe-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
  align-self: flex-start;
}

.recipe-toggle-btn:hover {
  background: var(--accent-primary-light);
}

/* ── Score bar ───────────────────────────────────────────────────────────── */

/* Implemented as <details> so the breakdown rows collapse by default.        */

/* RN: replace <details>/<summary> with Pressable + controlled boolean state. */

.score-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* <summary> resets — suppress the default disclosure triangle */

.score-bar__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity var(--duration-fast) var(--easing-default);
}

.score-bar__summary::-webkit-details-marker {
  display: none;
}

.score-bar__summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.score-bar[open] .score-bar__summary {
  opacity: 0.85;
}

/* Breakdown panel — only visible when <details> is open */

.score-bar .score-breakdown {
  margin-top: var(--space-1);
}

.score-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.score-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.score-pct {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.score-track {
  height: 6px;
  background: var(--surface-raised);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--easing-default);
}

.score-fill.tier-excellent { background: var(--accent-primary); }

.score-fill.tier-good      { background: var(--accent-secondary); }

.score-fill.tier-fair      { background: var(--grade-C-text); }

.score-fill.tier-weak      { background: var(--text-muted); }

/* ── Score breakdown ─────────────────────────────────────────────────────── */

.score-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.breakdown-row {
  /* GRID: page-level — will need RN reimplementation as flex row */
  display: grid;
  grid-template-columns: 140px 1fr 36px;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.breakdown-label {
  color: var(--text-secondary);
  white-space: nowrap;
}

.breakdown-weight {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.breakdown-bar-track {
  height: 4px;
  background: var(--surface-raised);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.breakdown-bar-fill {
  height: 100%;
  background: var(--accent-secondary);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--easing-default);
}

.breakdown-value {
  text-align: right;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ── Error section ───────────────────────────────────────────────────────── */

#error-section {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--error-text);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

#empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */

.loading-card {
  height: 220px;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border: 1px solid var(--border-subtle);
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ── Focus states ────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

footer {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.disclaimer {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.disclaimer a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Responsive: tablet and up ───────────────────────────────────────────── */

@media (min-width: 600px) {
  h1 {
    font-size: var(--text-3xl);
  }

  .constraints {
    flex-direction: row;
  }

  .constraints > * {
    flex: 1;
  }

  .meal-card {
    padding: var(--space-6);
  }
}

/* ── Responsive: desktop ─────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .container {
    padding: var(--space-10) var(--space-6);
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

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

/* ── PWA banners ─────────────────────────────────────────────────────────── */

.pwa-banner {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-family: var(--font-family-base);
}

.pwa-banner.hidden {
  display: none;
}

/* Offline — top, amber */

.pwa-banner--offline {
  top: 0;
  background: #F59E0B;
  color: #1C1917;
}

/* Update — top, accent */

.pwa-banner--update {
  top: 0;
  background: var(--accent-primary);
  color: var(--text-inverse);
}

/* Install — bottom, card surface */

.pwa-banner--install {
  bottom: 0;
  background: var(--surface-card);
  color: var(--text-primary);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.pwa-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pwa-banner__action {
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

.pwa-banner--update .pwa-banner__action {
  background: var(--surface-card);
  color: var(--accent-primary);
}

.pwa-banner--install .pwa-banner__action {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.pwa-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: var(--space-xs);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Admin page footer (outside .container so needs its own positioning) */

.admin-footer {
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

/* ── Footer legal links ──────────────────────────────────────────────────── */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
  list-style: none;
}

.footer-links a {
  font-size: var(--text-xs);
  color: var(--accent-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--easing-default),
    text-decoration-color var(--duration-fast) var(--easing-default);
}

.footer-links a:hover {
  color: var(--accent-primary);
  text-decoration-color: currentColor;
}

.footer-links a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  text-decoration-color: currentColor;
}

/* De-emphasise the current-page link — still keyboard accessible */

.footer-links a[aria-current="page"] {
  color: var(--text-secondary);
  text-decoration-color: transparent;
  pointer-events: none;
  cursor: default;
}

/* ── Legal page layout ───────────────────────────────────────────────────── */

/* Readable long-form column. 72ch ≈ 720px at 16px base. */

.legal-content {
  max-width: 72ch;
  margin: 0 auto;
  padding: 0 var(--space-4);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legal-content img,
.legal-content pre {
  max-width: 100%;
  height: auto;
}

.legal-content a {
  overflow-wrap: anywhere;
}

.legal-content h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  /* Prevent anchor scroll from hiding heading under any future sticky header */
  scroll-margin-top: var(--space-8);
}

.legal-content h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  scroll-margin-top: var(--space-8);
}

.legal-content p {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.legal-content ul,
.legal-content ol {
  font-size: var(--text-base);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.legal-content li {
  margin-bottom: var(--space-2);
}

/* Tables inside legal content — wrapped in .table-scroll for horizontal overflow handling */

.legal-content .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-6);
  -webkit-overflow-scrolling: touch;
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.legal-content th,
.legal-content td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  vertical-align: top;
}

.legal-content th {
  background: var(--surface-raised);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.legal-content td {
  color: var(--text-secondary);
}

/* Version / date meta line below H1 */

.legal-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
}

/* Draft status banner */

.legal-draft-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.legal-draft-banner strong {
  font-weight: var(--font-semibold);
}

/* Missing inputs block (TO CONFIRM items from MD frontmatter) */

.legal-missing-inputs {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--warning-text);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}

.legal-missing-inputs h2 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--warning-text);
  margin-top: 0;
  margin-bottom: var(--space-3);
  scroll-margin-top: var(--space-8);
}

.legal-missing-inputs .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-missing-inputs table {
  font-size: var(--text-sm);
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.legal-missing-inputs th,
.legal-missing-inputs td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  vertical-align: top;
}

.legal-missing-inputs th {
  background: var(--surface-card);
  font-weight: var(--font-semibold);
}

/* Inline [TO CONFIRM] and [SOLICITOR REVIEW] markers */

.legal-marker {
  display: inline;
  background: #FEF9C3;
  color: #78350F;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  padding: 1px var(--space-1);
  font-size: 0.8em;
  font-weight: var(--font-medium);
  font-style: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* In-page table of contents */

.legal-toc {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
}

.legal-toc h2 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: var(--space-4);
  scroll-margin-top: var(--space-8);
}

.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Single column by default (mobile-first) */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.legal-toc a {
  font-size: var(--text-sm);
  color: var(--accent-primary);
  text-decoration: none;
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}

.legal-toc a:hover {
  background: var(--accent-primary-light);
  color: var(--accent-primary);
}

.legal-toc a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 2-column TOC on wider viewports */

@media (min-width: 600px) {
  .legal-toc ol {
    display: grid;
    /* GRID: two-column TOC only — will need RN reimplementation */
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-6);
  }
}

/* Legal page simplified header */

.legal-header {
  text-align: center;
  margin-bottom: var(--space-8);
  padding-top: var(--space-4);
}

.legal-header a {
  display: inline-block;
  text-decoration: none;
}

.legal-header a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ── Product detail drawer ───────────────────────────────────────────────── */

/* Mobile: fixed bottom sheet. Desktop: fixed right rail.                     */

/* Uses transform for animation — GPU-composited, no layout thrash.           */

/* RN: replace backdrop with Modal component; drawer-panel with Animated.View */

/* z-index scale: modal layer = 200 */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--surface-overlay);
  /* Fade-in the backdrop */
  animation: drawer-backdrop-in var(--duration-normal) var(--easing-default) forwards;
}

@keyframes drawer-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Drawer panel — mobile bottom sheet ─────────────────────────────────── */

.drawer-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80dvh; /* dynamic viewport — accounts for browser chrome */
  background: var(--surface-card);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Slide up from bottom */
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--easing-default);
}

.drawer-panel[data-open="true"] {
  transform: translateY(0);
}

/* ── Drawer panel — desktop right rail ──────────────────────────────────── */

@media (min-width: 640px) {
  .drawer-panel {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 380px;
    max-height: 100dvh;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: 0;
    /* Slide in from right */
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--easing-default);
  }

  .drawer-panel[data-open="true"] {
    transform: translateX(0);
  }
}

/* ── Scroll area ─────────────────────────────────────────────────────────── */

.drawer-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.drawer-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.drawer-header__thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-thumb-placeholder {
  display: block;
}

.drawer-header__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.drawer-product-name {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  /* Prevent very long product names from overflowing */
  overflow-wrap: break-word;
  word-break: break-word;
}

.drawer-product-brand {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ── Close button ────────────────────────────────────────────────────────── */

.drawer-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  transition:
    background var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default);
  /* Meet 44×44 touch target with padding trick */
  padding: 0;
  min-width: 44px;
  min-height: 44px;
}

.drawer-close-btn:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

.drawer-close-btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Loading-state close button: position in top-right corner */

.drawer-close-btn--loading {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

/* ── Generic section wrapper ─────────────────────────────────────────────── */

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Retailer pills ──────────────────────────────────────────────────────── */

.drawer-retailer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.drawer-retailer-pill {
  /* Base styling matches .item-store-badge outline treatment */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

/* Per-retailer accent — matches .item-store-badge outline treatment */

.drawer-retailer-pill[data-retailer="tesco"]      { color: var(--retailer-tesco); border-color: color-mix(in srgb, var(--retailer-tesco) 25%, transparent); }

.drawer-retailer-pill[data-retailer="sainsburys"] { color: var(--retailer-sainsburys); border-color: color-mix(in srgb, var(--retailer-sainsburys) 25%, transparent); }

.drawer-retailer-pill[data-retailer="waitrose"]   { color: var(--retailer-waitrose); border-color: color-mix(in srgb, var(--retailer-waitrose) 25%, transparent); }

.drawer-no-store-data {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── Pack-size explainer ─────────────────────────────────────────────────── */

.drawer-pack-explainer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  line-height: var(--leading-normal);
}

.drawer-pack-explainer svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-muted);
}

.drawer-serving-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  padding-left: var(--space-1);
}

/* ── Section heading ─────────────────────────────────────────────────────── */

.drawer-section-heading {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* ── Nutrition table ─────────────────────────────────────────────────────── */

.drawer-nutrition {
  display: flex;
  flex-direction: column;
}

.drawer-nutrition-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.drawer-nutrition-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-subtle);
}

.drawer-nutrition-table__label {
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  width: 60%;
}

.drawer-nutrition-table__value {
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Score badges ────────────────────────────────────────────────────────── */

.drawer-score-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.drawer-score-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

/* Nutri-Score / Eco-Score letter grades — token-referenced, see tokens.css */

.drawer-score-badge--nutriscore-a { background: var(--nutriscore-a-bg); color: var(--nutriscore-a-text); }

.drawer-score-badge--nutriscore-b { background: var(--nutriscore-b-bg); color: var(--nutriscore-b-text); }

.drawer-score-badge--nutriscore-c { background: var(--nutriscore-c-bg); color: var(--nutriscore-c-text); }

.drawer-score-badge--nutriscore-d { background: var(--nutriscore-d-bg); color: var(--nutriscore-d-text); }

.drawer-score-badge--nutriscore-e { background: var(--nutriscore-e-bg); color: var(--nutriscore-e-text); }

.drawer-score-badge--none         { background: var(--surface-raised); color: var(--text-muted); border: 1px solid var(--border-subtle); }

/* NOVA groups 1–4 — reuse availability grade tokens (shared semantic lightness ramp) */

.drawer-score-badge--nova-1 { background: var(--grade-A-bg); color: var(--grade-A-text); }

.drawer-score-badge--nova-2 { background: var(--grade-B-bg); color: var(--grade-B-text); }

.drawer-score-badge--nova-3 { background: var(--grade-C-bg); color: var(--grade-C-text); }

.drawer-score-badge--nova-4 { background: var(--grade-D-bg); color: var(--grade-D-text); }

.drawer-score-caveat {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ── Ingredients disclosure ──────────────────────────────────────────────── */

.drawer-ingredients {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.drawer-ingredients__toggle {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-raised);
  min-height: 44px;
  user-select: none;
}

.drawer-ingredients__toggle::-webkit-details-marker {
  display: none;
}

.drawer-ingredients__toggle::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform var(--duration-fast) var(--easing-default);
}

.drawer-ingredients[open] .drawer-ingredients__toggle::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.drawer-ingredients__toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}

.drawer-ingredients__text {
  padding: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  background: var(--surface-card);
}

/* ── ODbL attribution ────────────────────────────────────────────────────── */

.drawer-attribution {
  font-size: var(--text-xs);
  color: var(--text-secondary); /* --text-muted fails WCAG AA at 12px on --surface-card */
  line-height: var(--leading-relaxed);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
  margin-top: auto;
}

.drawer-attribution__link {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.drawer-attribution__link:hover {
  color: var(--accent-primary-hover);
}

/* ── Error state ─────────────────────────────────────────────────────────── */

.drawer-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  color: var(--error-text);
  font-size: var(--text-sm);
}

.drawer-error__close {
  align-self: flex-start;
}

/* ── Loading skeleton ────────────────────────────────────────────────────── */

.drawer-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.drawer-skeleton__header {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.drawer-skeleton__thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  flex-shrink: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.drawer-skeleton__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.drawer-skeleton__line {
  height: 14px;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.drawer-skeleton__line--title {
  width: 75%;
  height: 18px;
}

.drawer-skeleton__line--sub {
  width: 45%;
}

.drawer-skeleton__line--short {
  width: 55%;
}

/* ── Product name as interactive button ─────────────────────────────────── */

.product-name--interactive {
  /* Reset button styles */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  /* Match .product-name styles */
  flex: 1;
  font-weight: var(--font-medium);
  color: var(--accent-primary);
  min-width: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-fast) var(--easing-default);
  line-height: inherit;
  /* Touch target height handled by parent .meal-item__top */
}

.product-name--interactive:hover {
  text-decoration-color: currentColor;
}

.product-name--interactive:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion: disable drawer slide animation ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .drawer-backdrop {
    animation: none;
  }
  .drawer-panel {
    transition: none;
  }
}

/* ── Dev panel — advanced settings (store selection, low-avail toggle, V2) ── */

.dev-panel {
  margin: 1.5rem 0;
  border: 1px solid var(--color-border, #ccc);
  border-radius: 8px;
  background: var(--color-bg-subtle, #f7f7f7);
}

.dev-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.dev-panel__toggle > span:first-child { font-weight: 600; }

.dev-panel__summary {
  flex: 1;
  margin-left: 0.75rem;
  color: var(--color-text-subtle, #555);
  font-size: 0.9rem;
}

.dev-panel__body { padding: 0 1rem 1rem; }

.dev-panel__warn {
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border-left: 3px solid #c27a00;
  background: #fff5e6;
  color: #6b4400;
  font-size: 0.9rem;
}

.dev-panel__section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #ddd);
}

.dev-panel__section:first-of-type { border-top: none; padding-top: 0; }

.dev-panel__section h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.dev-panel__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.dev-panel__actions { display: flex; gap: 0.25rem; }

.dev-panel__actions button {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.dev-panel__hint {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-subtle, #555);
  margin-top: 0.25rem;
}

.dev-panel__stores { list-style: none; padding: 0; margin: 0.5rem 0; }

.dev-panel__brand-group {
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: #fff;
  border-radius: 6px;
}

.dev-panel__brand-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.dev-panel__badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #e8e8e8;
  color: #444;
}

.dev-panel__badge--convenience { background: #fff3cd; color: #8a6900; }

.dev-panel__badge--supermarket_main { background: #d4edda; color: #1e5c2c; }

.dev-panel__badge--hypermarket { background: #cce5ff; color: #0b3d70; }

.dev-panel__badge--discount { background: #f4d0ff; color: #5a1f6b; }

.dev-panel__count { font-size: 0.8rem; color: var(--color-text-subtle, #666); margin-left: auto; }

.dev-panel__store-list {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
}

.dev-panel__store-list li { margin: 0.15rem 0; }

.dev-panel__store-list label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.dev-panel__store-name { flex: 1; }

.dev-panel__distance { color: var(--color-text-subtle, #666); font-size: 0.75rem; }

.dev-panel__toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.dev-panel__radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0;
}

.dev-panel__radio-group label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.dev-panel__footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.dev-panel__apply {
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── Opening-hours badge ─────────────────────────────────────────────── */

.opening-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: baseline;
}

.opening-badge--open         { background: #d4edda; color: #1e5c2c; }

.opening-badge--closes_soon  { background: #fff3cd; color: #8a6900; }

.opening-badge--closed       { background: #f8d7da; color: #842029; }

.opening-badge--unknown      { background: #e9ecef; color: #495057; }

/* ── Phase 1.7 Wedge UI ──────────────────────────────────────────────────── */

/* Hero line ----------------------------------------------------------------- */

.hero-line {
  font-size: clamp(1.35rem, 4.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0.5rem;
  max-width: 38ch;
}

.hero-sub {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
  max-width: 46ch;
}

/* Mode selector section ----------------------------------------------------- */

.mode-selector-section {
  margin: 0 0 var(--space-6);
}

/* ── Shared mode-option base — applies to BOTH homepage cards and tab pills.
   All visual decisions reference tokens so both variants stay in sync.      */

/* Homepage variant */

.mode-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mode-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  min-height: 44px;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    background var(--duration-fast) var(--easing-default);
}

.mode-option:hover {
  border-color: var(--accent-primary);
  background: var(--surface-raised);
}

.mode-option:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.mode-option--active {
  border-color: var(--accent-primary);
  background: var(--accent-primary-light);
}

.mode-option--active:hover {
  background: var(--accent-primary-light);
}

/* Primary CTA — accent border to draw the eye, but neutral surface so it
   doesn't read as "selected" until the user actually picks it. */

.mode-option--primary {
  border-width: 2px;
  border-color: var(--accent-primary);
  background: var(--surface-card);
}

.mode-option--primary:hover {
  background: var(--surface-raised);
}

.mode-option--primary.mode-option--active,
.mode-option--primary.mode-option--active:hover {
  background: var(--accent-primary-light);
}

/* Label + description — consistent across primary and secondary options */

.mode-option__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.mode-option__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* Progressive-disclosure toggle for secondary modes */

.mode-secondary-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--easing-default);
}

.mode-secondary-toggle:hover {
  color: var(--text-primary);
}

.mode-secondary-toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.mode-secondary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Tabs variant (results page) ─────────────────────────────────────────── */

/* Shares the same token vocabulary as the homepage variant.                  */

.mode-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-4);
}

.mode-tabs::-webkit-scrollbar {
  display: none;
}

.mode-tab {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    color var(--duration-fast) var(--easing-default),
    background var(--duration-fast) var(--easing-default);
}

.mode-tab:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.mode-tab:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.mode-tab--active,
.mode-tab--active:hover {
  border-color: var(--accent-primary);
  background: var(--accent-primary-light);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

/* Pantry section ------------------------------------------------------------ */

.pantry-section {
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.pantry-section__heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.pantry-section__hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

/* Pantry input */

.pantry-input {
  position: relative;
}

.pantry-input--disabled {
  opacity: 0.6;
}

.pantry-input__inactive-hint {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.75rem;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-subtle);
}

.pantry-input__token-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: 48px;
  cursor: text;
}

.pantry-input__token-area:focus-within {
  border-color: var(--accent-primary);
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.pantry-token {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--accent-primary-light);
  border: 1px solid var(--accent-primary);
  border-radius: 100px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  font-weight: 500;
}

.pantry-token__label {
  line-height: 1.3;
}

.pantry-token__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
}

.pantry-token__remove:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.06);
}

.pantry-input__field {
  flex: 1;
  min-width: 160px;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--text-primary);
  outline: none;
  padding: 0.1rem 0;
}

.pantry-input__field::placeholder {
  color: var(--text-muted);
}

.pantry-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.pantry-dropdown__item {
  padding: 0.625rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-primary);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.pantry-dropdown__item:hover {
  background: var(--surface-raised);
}

.pantry-input__hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Sponsored badge ----------------------------------------------------------- */

.badge-sponsored {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: var(--sponsored-bg);
  border: 1px solid var(--sponsored-border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sponsored-text);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.meal-card__commercial-badge {
  margin-bottom: 0.5rem;
}

.sponsored-disclosure {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  line-height: 1.4;
}

/* Local shop badge ---------------------------------------------------------- */

.badge-local-shop {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: var(--local-shop-bg);
  border: 1px solid var(--local-shop-border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--local-shop-text);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Affiliate CTA ------------------------------------------------------------- */

.affiliate-cta-wrapper {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-subtle);
}

/* From-pantry meal item — wedge-pantry-substitution -------------------------- */

.meal-item--from-pantry {
  background: var(--accent-primary-light);
  border-left: 2px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding-left: var(--space-2);
  /* Tinted background extends to the rounded right corner; explicit padding
     keeps the quantity text from butting against that edge. */
  padding-right: var(--space-3);
  transition: background 120ms ease;
}

.meal-item--from-pantry .product-name--interactive:hover,
.meal-item--from-pantry .product-name--interactive:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Recipe-required pantry item the user has NOT declared. Distinct amber
   accent (different from the green "from your pantry" treatment) so the
   user reads "I need to buy this" not "I already have this". */

.meal-item--needs-shopping {
  background: color-mix(in srgb, #f59e0b 12%, var(--surface-card));
  border-left: 2px solid #d97706;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding-left: var(--space-2);
  padding-right: var(--space-3);
  transition: background 120ms ease;
}

.meal-item--needs-shopping .product-name--needs-shopping {
  font-weight: var(--font-semibold);
  color: #92400e;
}

.meal-item--needs-shopping .product-name--interactive:hover,
.meal-item--needs-shopping .product-name--interactive:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.meal-item__meta--needs-shopping {
  padding-left: calc(76px + var(--space-2));
  padding-bottom: var(--space-1);
}

.badge-needs-shopping {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  background: color-mix(in srgb, #f59e0b 18%, var(--surface-card));
  border: 1px solid #d97706;
  font-size: 0.7rem;
  font-weight: var(--font-medium);
  color: #92400e;
  letter-spacing: 0.01em;
}

.meal-item--from-pantry .product-name--pantry {
  font-weight: var(--font-semibold);
  color: var(--accent-primary-hover);
}

.badge-pantry-source {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--accent-primary-hover);
  opacity: 0.8;
}

/* Pantry items assumed at home (salt, oil, etc.) — recipe transparency */

.pantry-assumed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
  padding: 0.6rem 0.85rem;
  margin-top: 0.5rem;
  background: var(--surface-muted, #f7f5f1);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.825rem;
  color: var(--text-secondary, #4a4a4a);
}

.pantry-assumed__label {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.pantry-assumed__items {
  flex: 1 1 auto;
}

.pantry-assumed__hint {
  font-size: 0.72rem;
  color: var(--text-muted, #777);
  font-style: italic;
}

.button-affiliate-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--affiliate-cta-bg);
  color: var(--affiliate-cta-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s ease;
  text-align: center;
  gap: 0.5rem;
}

.button-affiliate-cta:hover {
  background: var(--affiliate-cta-hover);
}

.button-affiliate-cta:focus-visible {
  outline: 3px solid var(--affiliate-cta-bg);
  outline-offset: 2px;
}

.button-affiliate-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.affiliate-disclosure {
  font-size: 0.75rem;
  color: var(--affiliate-disclosure-text);
  text-align: center;
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Hybrid split / component chips -------------------------------------------- */

.hybrid-split,
.pantry-split {
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.assembly-time {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.component-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.component-row__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding-top: 0.15rem;
  min-width: 7ch;
}

.component-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.component-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
}

.component-chip--ready {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}

.component-chip--staple {
  background: #FFF8E1;
  color: #E65100;
  border: 1px solid #FFCC80;
}

.component-chip--pantry {
  background: #E8F5E9;
  color: #1B5E20;
  border: 1px solid #81C784;
}

.component-chip--gap {
  background: #FBE9E7;
  color: #BF360C;
  border: 1px solid #FFAB91;
}

/* Local shops sidecar — Phase 2.3.5 ---------------------------------------- */

.local-shops-section {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.local-shops-section__heading {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-tight);
}

.local-shops-section__anchor {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-normal);
}

.local-shops-section__empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* List container — no bullet styling */

.local-shops-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Individual local-shop card */

.local-shop-card {
  background: var(--surface-card);
  border: 1px solid var(--local-shop-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 44px; /* touch target floor */
}

.local-shop-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.local-shop-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--leading-tight);
}

.local-shop-card__sponsored-suffix {
  font-weight: var(--font-medium);
  color: var(--local-shop-text);
  font-size: var(--text-sm);
}

.local-shop-card__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.local-shop-card__distance {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.local-shop-card__postcode {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Responsive: two-column chip wrap at tablet+ */

@media (min-width: 600px) {
  .local-shops-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .local-shop-card {
    flex: 1 1 calc(50% - var(--space-3));
    max-width: calc(50% - var(--space-3));
  }
}

/* Footer links -------------------------------------------------------------- */

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-links a:hover {
  color: var(--text-primary);
}

/* Responsive adjustments ---------------------------------------------------- */

@media (min-width: 640px) {
  .hero-line {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }

  .mode-selector {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Only the pantry-first button is a direct flex child; secondary buttons
     live inside .mode-secondary-list (column context) so must not inherit
     the 50% flex-basis meant for the row layout. */
  .mode-selector > .mode-option {
    flex: 1 1 calc(50% - var(--space-1));
    min-width: 180px;
  }

  .mode-option--primary {
    flex: 1 1 100%;
  }

  .mode-secondary-list {
    flex: 1 1 100%;
  }
}