/* WhatToEat storefront — base layout. Section 0.
   RTL, mobile-first. Premium / trustworthy / calm. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-text);
  margin: 0 0 var(--space-3);
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* button-styled links never underline on hover */
.btn-primary:hover, .btn-ghost:hover, .btn-add:hover, .btn-more:hover { text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0;            /* icons sit close together */
}
.header-actions--start { justify-content: flex-start; }
.header-actions--end { justify-content: flex-end; }
/* Desktop only: hide the barcode scan (camera is a mobile feature) + the hamburger menu; mobile keeps both. */
@media (min-width: 1024px) { #scan-open, label[for="nav-toggle"] { display: none; } }
/* Desktop-only horizontal nav bar (replaces the hamburger menu); hidden on mobile. */
.desktop-nav { display: none; }
@media (min-width: 1024px) {
  .desktop-nav { display: block; background: var(--c-white); border-block-start: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
  .desktop-nav .container { max-width: none; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; justify-content: safe center; padding-block: var(--space-2); padding-inline: var(--space-5); }
  /* Short labels (db.NAV_SHORT_LABELS) → a bigger, airier nav like Noy's. Items
     are content-sized and the group is centered (not stretched to fill), so they
     sit a little closer together; each label is centered in its cell via the
     symmetric padding, with thin dividers between. Fixed-px line-height keeps the
     bar height constant; on narrow desktops it scrolls (safe center). */
  .desktop-nav a { flex: 0 0 auto; white-space: nowrap; font-family: var(--font-head); font-weight: 500;
    font-size: 1.15rem; line-height: 22px;
    color: var(--c-text); text-decoration: none;
    text-align: center; padding-inline: 8px;
    background-origin: content-box; background-clip: content-box; }   /* band only under the text, not the divider padding */
  .desktop-nav a:hover { background-image: var(--hl-band); }   /* hover shows the band, not a colour change */
  /* thin vertical divider between items */
  .desktop-nav a:not(:first-child) { border-inline-start: 1px solid color-mix(in srgb, var(--c-line), var(--c-text-muted) 35%); }
  /* active category carries the reusable .hl highlighter (single source) */
}

.logo {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--c-primary);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo__img { display: block; height: 44px; width: auto; max-width: 100%; transform: scaleY(.84); transform-origin: center; }
.logo small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--c-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
}
.icon-btn:hover { background: var(--c-bg-muted); color: var(--c-primary-dark); }

/* ── SVG icon images (files are bordeaux on transparent) ─────────────────── */
.icn { display: inline-block; object-fit: contain; vertical-align: middle; flex: none; }
.icon-btn .icn { width: 34px; height: 34px; }
.cart-link .icn { width: auto; height: 34px; }
.allergen-trigger .icn { height: 30px; width: auto; }   /* kosher star — match the filter-bar icons */
/* white on the dark footer */
.footer-delivery .icn { width: 1.5em; height: 1.5em; vertical-align: -0.35em; filter: brightness(0) invert(1); }

/* ── Sticky allergen filter bar (Section 2 fills it; Section 0 = shell) ── */
.allergen-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 35;
  min-height: var(--allergen-bar-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}
.allergen-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--allergen-bar-h);
  padding-block: var(--space-2);
}
.allergen-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  background: var(--c-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  padding: var(--space-1) var(--space-4);
  border-radius: 999px;
  cursor: pointer;
}
.allergen-trigger:hover { background: var(--c-surface); }
.allergen-bar__hint {
  font-size: 0.82rem;
  color: var(--c-text-muted);
}
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Main ─────────────────────────────────────────────────────────────── */
main { display: block; min-height: 50vh; padding-block: var(--space-5); }

.section { margin-block: var(--space-6); }
.section__title {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.placeholder-card {
  background: var(--c-white);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-6);
  text-align: center;
  color: var(--c-text-muted);
  box-shadow: var(--shadow-sm);
}

/* ── Footer (two distinct safety lines) ───────────────────────────────── */
.site-footer {
  background: var(--c-primary-dark);
  color: #f4eceb;
  margin-top: var(--space-7);
  padding-block: var(--space-6) var(--space-5);
}
.site-footer a { color: #f4eceb; text-decoration: underline; }
.footer-brand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-white);
  margin-bottom: var(--space-2);
}
.footer-legal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
}
.footer-legal__line { margin: 0 0 var(--space-2); opacity: 0.92; }
.footer-safety {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background: rgba(225, 29, 46, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.82rem;
  line-height: 1.5;
}
.footer-safety__icon { flex: 0 0 auto; height: 22px; width: auto; }

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

.section__count {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
.crumbs {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  margin-block: var(--space-2) var(--space-4);
}
.crumbs span { margin-inline: var(--space-1); }

/* ── Category chips (horizontal scroll on mobile) ─────────────────────── */
.cat-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.cat-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  color: var(--c-text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.cat-chip:hover { border-color: var(--c-primary); text-decoration: none; }
.cat-chip__name { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; }
.cat-chip__count {
  font-size: 0.72rem;
  color: var(--c-white);
  background: var(--c-primary);
  border-radius: 999px;
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}

/* ── Product grid ─────────────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 560px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--c-bg-muted);
  text-decoration: none;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}
.product-card__noimg { width: 100%; height: 100%; object-fit: contain; }

.badge {
  position: absolute;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge--gov { background: var(--c-accent); color: var(--c-white); }

/* Note 3: info strip for products cleared by ingredient analysis but with no
   explicit manufacturer warning. Calm/info tone — bright alert-red is reserved
   for actual "contains your allergen" danger, not for this ~19% of the catalog. */
.product-card__warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--space-3);
  background: var(--c-bg-muted);
  border-top: 2px solid var(--c-accent);
  color: var(--c-accent);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}
.product-card__warn-icon { font-size: 0.8rem; flex: none; }
.product-card__warn-text { font-weight: 700; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  flex: 1;
}
.product-card__brand {
  font-size: 0.85rem;
  color: var(--c-text-muted);
  font-weight: 600;
}
.product-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__title a { color: var(--c-text); text-decoration: none; }
.product-card__title a:hover { color: var(--c-primary); }

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}
.price { display: flex; align-items: baseline; gap: 2px; color: var(--c-primary); }
.price__num { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.price__cur { font-weight: 700; font-size: 0.85rem; }
.price--none { color: var(--c-text-muted); font-size: 0.8rem; font-weight: 600; }

.btn-add {
  border: none;
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-add:disabled { background: var(--c-line); color: var(--c-text-muted); cursor: not-allowed; }
.btn-add:not(:disabled):hover { background: var(--c-primary-dark); }

/* ── Load more ────────────────────────────────────────────────────────── */
.load-more { grid-column: 1 / -1; display: flex; justify-content: center; padding-block: var(--space-4); }
.btn-more {
  border: 1px solid var(--c-primary);
  background: var(--c-white);
  color: var(--c-primary);
  font-family: var(--font-head);
  font-weight: 700;
  padding: var(--space-3) var(--space-6);
  border-radius: 999px;
  cursor: pointer;
}
.btn-more:hover { background: var(--c-surface); }

/* ── Allergen bar: trigger count + pills ──────────────────────────────── */
.allergen-trigger { user-select: none; }
.allergen-trigger__count {
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 0.72rem;
  border-radius: 999px;
  padding: 0 7px;
  min-width: 18px;
  text-align: center;
}
.allergen-bar__inner { flex-wrap: wrap; }

.pill-form { display: inline; margin: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}
.pill__x {
  border: none;
  background: var(--c-primary);
  color: var(--c-white);
  width: 18px; height: 18px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.pill-clear {
  border: none; background: none;
  color: var(--c-text-muted);
  text-decoration: underline;
  font-size: 0.8rem; cursor: pointer;
}

/* ── Transparency lines ───────────────────────────────────────────────── */
.transparency { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.transparency .container { padding-block: var(--space-2); }
.transparency__line {
  margin: 0;
  font-size: 0.82rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-block: 2px;
}
.transparency__line--allergen { color: var(--c-alert); font-weight: 600; }
.transparency__line--unverified { color: var(--c-text-muted); }
.transparency__line--kosher { color: var(--c-accent); font-weight: 600; }

/* Note 5: top-layer diet quick-filters (vegan / vegan-friendly) */
/* Diet buttons now live in the unified .filter-triggers row (same size/shape
   as the allergen + kosher triggers; green when active). */
.diet-form { display: inline; margin: 0; }
/* Same pill as the allergen/kosher triggers (bordeaux outline); filled when on. */
.diet-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--c-primary);
  background: var(--c-white); color: var(--c-primary);
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  padding: var(--space-1) var(--space-4); border-radius: 999px; cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.diet-btn:hover { background: var(--c-surface); }
.diet-btn.is-on {
  background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white);
}

/* Unified filter row — allergens + kosher + diet on ONE scrollable line. */
.filter-triggers {
  display: flex; gap: var(--space-2); flex: 1 1 100%;
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.filter-triggers::-webkit-scrollbar { display: none; }
.filter-triggers > * { flex: 0 0 auto; }
.allergen-trigger { white-space: nowrap; }
.allergen-trigger--kosher { /* same shape as allergen trigger; navy accent via count */ }

.pill--kosher { gap: 4px; }
.pill__logo { height: 16px; width: auto; border-radius: 3px; object-fit: contain; }

.kosher-list { display: flex; flex-direction: column; gap: var(--space-2); }
.kosher-opt {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.kosher-opt:has(input:checked) { border-color: var(--c-accent); background: var(--c-surface); }
.kosher-opt input { width: 18px; height: 18px; accent-color: var(--c-accent); flex: none; }
.kosher-opt__logo {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  overflow: hidden;
}
.kosher-opt__logo img { width: 100%; height: 100%; object-fit: contain; }
.kosher-opt__name { font-family: var(--font-head); font-weight: 700; font-size: 0.88rem; }
.kosher-opt__count {
  margin-inline-start: auto; font-size: 0.72rem; font-weight: 700;
  color: var(--c-text-muted); background: var(--c-bg-muted);
  padding: 1px 8px; border-radius: 999px;
}
.inline-form { display: inline; margin: 0; }
.linklike {
  border: none; background: none; padding: 0;
  color: var(--c-accent); text-decoration: underline;
  font-size: 0.82rem; cursor: pointer; font-family: var(--font-body);
}

/* ── Bottom sheet ─────────────────────────────────────────────────────── */
.sheet-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(28, 27, 27, 0.45);
  z-index: 50;
}
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 51;
  background: var(--c-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-up);
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  /* bottom spacing now lives on the sticky .sheet__actions footer */
  padding: var(--space-3) var(--space-4) 0;
}
/* Each toggle opens only its own sheet (scoped by id, not the shared class). */
#sheet-toggle:checked ~ .sheet-overlay--allergen { display: block; }
#sheet-toggle:checked ~ .sheet--allergen { transform: translateY(0); }
#sheet-toggle-kosher:checked ~ .sheet-overlay--kosher { display: block; }
#sheet-toggle-kosher:checked ~ .sheet--kosher { transform: translateY(0); }
#sheet-toggle-sugar:checked ~ .sheet-overlay--sugar { display: block; }
#sheet-toggle-sugar:checked ~ .sheet--sugar { transform: translateY(0); }

/* Sugar trigger emoji glyph — sized to sit like the other trigger icons. */
.trigger-emoji { font-size: 1.05rem; line-height: 1; }

/* Medical-ish filter disclaimer (e.g. diabetes) under the filter bar. */
.filter-disclaimer {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: var(--c-text-muted);
  line-height: 1.4;
}
/* Diabetes-suitability badge on the product detail page. */
.diab-badge {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: #f4faf6;
}
.diab-badge__icon { font-size: 1.4rem; line-height: 1; }
.diab-badge__title { font-weight: 700; color: var(--c-primary); }
.diab-badge__reasons { margin: 2px 0 0; font-size: 0.85rem; color: var(--c-text); }
.diab-badge__disclaimer { margin: 4px 0 0; font-size: 0.72rem; color: var(--c-text-muted); }

.sheet__grip {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--c-line);
  margin: 2px auto var(--space-3);
}
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.sheet__title { margin: 0; font-size: 1.15rem; }
.sheet__close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--c-text-muted);
  cursor: pointer; border-radius: 999px;
}
.sheet__close:hover { background: var(--c-bg-muted); }
.sheet__hint { font-size: 0.85rem; color: var(--c-text-muted); margin: 0 0 var(--space-4); }

.allergen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.allergen-opt {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-3);
  cursor: pointer;
}
.allergen-opt:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-surface);
}
.allergen-opt input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.allergen-opt__name { font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; }
.allergen-opt__sub { font-size: 0.7rem; color: var(--c-text-muted); margin-inline-start: auto; }

/* Note 1: subtype drill-down (nuts / gluten). JS-free <details> disclosure. */
.allergen-group { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-2); }
.allergen-subs {
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  padding: 0 var(--space-3);
}
.allergen-subs > summary {
  cursor: pointer; list-style: none;
  padding: var(--space-2) 0;
  font-size: 0.8rem; font-weight: 700; color: var(--c-accent);
}
.allergen-subs > summary::-webkit-details-marker { display: none; }
.allergen-subs > summary::before { content: "▾ "; }
.allergen-subs[open] > summary::before { content: "▴ "; }
.allergen-subs__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2); padding-bottom: var(--space-3);
}
.allergen-opt--sub { padding: var(--space-2); }
.allergen-opt--sub .allergen-opt__name { font-weight: 600; font-size: 0.82rem; }

.sheet__future {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  color: var(--c-text-muted);
  font-size: 0.82rem;
  display: flex; align-items: center; gap: var(--space-2);
}

.unverified-row {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--c-alert-bg);
  border: 1px solid var(--c-alert-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.unverified-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-alert); }
.unverified-row small { display: block; color: var(--c-text-muted); font-size: 0.74rem; }

.sheet__actions {
  display: flex; gap: var(--space-3);
  /* Pinned footer: always visible while the options scroll above it. */
  position: sticky;
  bottom: 0;
  margin-top: var(--space-4);
  /* span the sheet's horizontal padding and sit flush at its bottom */
  margin-inline: calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
}
.btn-primary {
  flex: 1;
  border: none;
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--font-head); font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  cursor: pointer; font-size: 1rem;
}
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line);
  color: var(--c-text);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Section 3: search + sort */
.search-head { margin-bottom: var(--space-4); }
.search-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 1rem;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-white); color: var(--c-text);
}
.search-input:focus { outline: none; border-color: var(--c-primary); }
.sort-select {
  margin-inline-start: auto; font-family: var(--font-body); font-weight: 600;
  font-size: 0.82rem; padding: 4px 10px;
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-white);
}
.results-head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.results-count { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.empty-state {
  text-align: center; padding: var(--space-7) var(--space-4);
  color: var(--c-text-muted);
}
.empty-state__icon { font-size: 2.5rem; opacity: 0.5; }
.empty-state__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--c-text); margin: var(--space-3) 0 var(--space-1); }
.empty-state__hint { font-size: 0.85rem; margin: 0; }

/* Section 3: scan verdict modal (near full-page) */
#scan-result:empty { display: none; }
.scan-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28, 27, 27, 0.55);
  display: flex; justify-content: center;
  padding: var(--space-3);
}
.scan-modal__card {
  position: relative;
  width: 100%; max-width: var(--maxw);
  max-height: 96vh; margin: auto;
  overflow-y: auto;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-up);
  padding: var(--space-5);
  border-top: 8px solid var(--c-line);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.scan-pop--ok .scan-modal__card { border-top-color: var(--c-success); }
.scan-pop--bad .scan-modal__card { border-top-color: var(--c-alert); }
.scan-pop--neutral .scan-modal__card { border-top-color: var(--c-accent); }
.scan-pop--miss .scan-modal__card { border-top-color: var(--c-text-muted); }
.scan-pop__close { position: absolute; inset-inline-end: var(--space-3); top: var(--space-2); border: none; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--c-text-muted); z-index: 1; }
.scan-pop__head { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.35em; }
.scan-pop--bad .scan-pop__head { color: var(--c-alert); }
.scan-pop--ok .scan-pop__head { color: var(--c-success); }

/* clickable product block — large image */
.scan-modal__product { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; }
.scan-modal__product:hover { text-decoration: none; }
.scan-modal__product:hover .scan-pop__name { color: var(--c-primary); }
.scan-modal__media {
  width: 100%; aspect-ratio: 1 / 1; max-height: 52vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-muted); border-radius: var(--radius); overflow: hidden;
}
.scan-modal__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }
.scan-modal__media .product-card__noimg { font-size: 3rem; }
.scan-modal__info { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.scan-modal__link-hint { color: var(--c-primary); font-weight: 700; font-size: 0.9rem; margin-top: var(--space-2); }
.scan-pop__brand { font-size: 0.8rem; color: var(--c-text-muted); font-weight: 600; }
.scan-pop__name { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.scan-pop__price { color: var(--c-primary); font-weight: 800; font-size: 1.2rem; }
.scan-pop__reasons { margin: 0; padding-inline-start: var(--space-4); color: var(--c-alert); font-weight: 600; }
.scan-pop__msg { margin: 0; text-align: center; }
.scan-pop--miss .scan-pop__head { flex-direction: column; gap: 0.4em; }
.scan-pop__note { margin: 0; font-size: 0.82rem; color: var(--c-text-muted); }

/* Section 3: scan camera overlay */
.scan-overlay { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; }
.scan-overlay[hidden] { display: none; }
.scan-overlay__head { display: flex; align-items: center; justify-content: space-between; color: var(--c-white); padding: var(--space-3) var(--space-4); font-family: var(--font-head); font-weight: 700; }
.scan-overlay__close { background: none; border: none; color: var(--c-white); font-size: 1.6rem; cursor: pointer; }
.scan-reader { flex: 1; }
.scan-manual { display: flex; gap: var(--space-2); padding: var(--space-4); background: var(--c-white); }
.scan-manual input { flex: 1; padding: var(--space-3); border: 1.5px solid var(--c-line); border-radius: var(--radius); font-size: 1rem; }
.scan-manual .btn-primary { white-space: nowrap; }

/* ── Section 4: product page ─────────────────────────────────────────────── */
.breadcrumb { font-size: .85rem; padding: 12px 0; color: var(--c-accent); display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--c-accent); text-decoration: none; }
.breadcrumb [aria-current] { color: var(--c-text); opacity: .7; }

.product { display: flex; flex-direction: column; gap: 20px; padding-bottom: 32px; }
.product__brand { color: var(--c-accent); font-weight: 600; font-size: .9rem; }
.product__title { font-family: var(--font-head); font-size: 1.5rem; margin: 4px 0 6px; color: var(--c-text); }
.product__cat { font-size: .85rem; color: var(--c-accent); text-decoration: none; }
.product__price-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.price--lg .price__num { font-size: 1.8rem; font-weight: 800; }
.product__buy { display: flex; gap: 12px; align-items: center; }
.btn-add--lg { flex: 1; padding: 14px; font-size: 1rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-bg-muted); border-radius: 10px; overflow: hidden; }
.qty__btn { width: 40px; height: 44px; border: 0; background: var(--c-bg-muted); font-size: 1.2rem; }
.product__unavailable { background: var(--c-bg-muted); border-radius: 10px; padding: 14px; color: var(--c-text); font-weight: 600; }

.product__section { border-top: 1px solid var(--c-bg-muted); padding-top: 16px; }
.product__h { font-family: var(--font-head); font-size: 1.1rem; margin: 0 0 10px; }
.product__ingredients { line-height: 1.7; }
.product__muted { opacity: .65; }
.product__marketing { line-height: 1.6; margin: 0 0 8px; }
.product__meta { font-size: .9rem; margin: 4px 0; }

/* gallery */
.gallery__main { width: 100%; max-width: 420px; aspect-ratio: 1/1; object-fit: contain; background: #fff; border-radius: 14px; display: block; margin-inline: auto; }
.gallery--empty { min-height: 220px; display: grid; place-items: center; background: var(--c-bg-muted); border-radius: 14px; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.gallery__thumb { width: 56px; height: 56px; padding: 2px; border: 2px solid transparent; border-radius: 8px; background: #fff; }
.gallery__thumb.is-active { border-color: var(--c-primary); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* allergen chips */
.allergen-banner { background: var(--c-alert-bg); border: 1px solid var(--c-alert-border); color: var(--c-alert); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: .9rem; }
.chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.chip-row__label { font-weight: 700; font-size: .9rem; }
.chip { border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 600; }
.chip--danger { background: var(--c-alert-bg); color: var(--c-alert); border: 1px solid var(--c-alert-border); }
.chip--warn { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.chip--diet { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* kashrut */
.kashrut-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kashrut-row { display: flex; align-items: center; gap: 10px; }
.kashrut-row__logo { width: 40px; height: 40px; object-fit: contain; }
.kashrut-row__label { font-weight: 700; }

/* nutrition */
.nutrition { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nutrition th, .nutrition td { border: 1px solid var(--c-bg-muted); padding: 8px 10px; text-align: start; }
.nutrition thead th { background: var(--c-bg-muted); }
.nutrition tbody th { font-weight: 600; }

/* ── product drawer ──────────────────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 1200; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(560px, 100%); background: var(--c-surface); display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.2); animation: drawer-in .22s ease-out; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--c-bg-muted); position: sticky; top: 0; background: var(--c-surface); }
.drawer__title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.drawer__close { border: 0; background: var(--c-bg-muted); width: 36px; height: 36px; border-radius: 50%; font-size: 1.3rem; }
.drawer__body { overflow-y: auto; padding: 16px; }
@media (max-width: 600px) {
  .drawer__panel { inset-block-start: auto; inset-block-end: 0; inset-inline: 0; width: 100%; height: 92vh; border-radius: 18px 18px 0 0; animation: drawer-up .24s ease-out; }
  @keyframes drawer-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
}

/* ── Section 5: cart / checkout ──────────────────────────────────────────── */
.cart-link { position: relative; }
.cart-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--c-primary); color: #fff; font-size: .66rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.cart-badge[hidden] { display: none; }

.page-title { font-family: var(--font-head); font-size: 1.4rem; margin: 12px 0 16px; }

.cart-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cart-line { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--c-bg-muted); padding-bottom: 12px; }
.cart-line--gone { opacity: .7; }
.cart-line__media { width: 64px; height: 64px; flex: 0 0 auto; display: grid; place-items: center; background: #fff; border-radius: 10px; }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__info { flex: 1 1 auto; min-width: 0; }
.cart-line__brand { color: var(--c-accent); font-size: .8rem; }
.cart-line__name { font-weight: 600; }
.cart-line__unit { font-size: .82rem; opacity: .7; }
.cart-line__gone { color: var(--c-alert); font-size: .82rem; }
.cart-line__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-line__total { font-weight: 700; }
.cart-line__remove { background: none; border: 0; color: var(--c-alert); font-size: .82rem; cursor: pointer; }

.cart-summary { margin-top: 18px; }
.cart-summary__row { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; padding: 8px 0; }
.cart-summary__warn { color: var(--c-alert); font-size: .85rem; }
.cart-checkout { display: block; text-align: center; margin-top: 12px; }
.cart-checkout.is-disabled { opacity: .5; pointer-events: none; }
.cart-empty { opacity: .7; margin: 16px 0; }

.checkout-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field__label { font-size: .85rem; font-weight: 600; }
.form-field input, .form-field textarea { padding: 10px 12px; border: 1px solid var(--c-bg-muted);
  border-radius: 10px; font: inherit; background: #fff; }
.form-field--err input, .form-field--err textarea { border-color: var(--c-alert); }
.form-field__msg { color: var(--c-alert); font-size: .8rem; }
.checkout-summary { margin-top: 8px; }
.checkout-note { font-size: .82rem; opacity: .75; margin: 6px 0 12px; }

.order-conf__num { font-size: 1.05rem; }
.order-conf__msg { opacity: .85; }
.order-conf__addr { margin: 14px 0; font-size: .9rem; opacity: .85; }

/* toast */
.toast { position: fixed; inset-block-end: 20px; inset-inline: 0; margin-inline: auto;
  width: max-content; max-width: 80%; background: var(--c-text); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: .9rem; z-index: 1300;
  opacity: 0; transform: translateY(12px); pointer-events: none; }
.toast--show { animation: toast-pop 2.2s ease forwards; }
@keyframes toast-pop {
  10% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

/* product-page qty stepper input */
.qty__num { width: 42px; text-align: center; border: 0; background: transparent; font: inherit; }

/* ── Section 6: order admin ──────────────────────────────────────────────── */
body.admin { background: var(--c-bg-muted); }
.admin-header { background: var(--c-primary); color: #fff; padding: 10px 0; }
.admin-header__inner { display: flex; align-items: center; justify-content: space-between; }
.admin-brand { color: #fff; text-decoration: none; font-family: var(--font-head); font-weight: 700; }
.admin-logout .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.admin-main { padding: 20px 0 40px; }
.admin-login { max-width: 360px; margin: 40px auto; background: #fff; padding: 24px; border-radius: 14px; }
.admin-error { background: var(--c-alert-bg); color: var(--c-alert); border: 1px solid var(--c-alert-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }

.admin-search { display: flex; gap: 8px; margin: 12px 0; }
.admin-search input[type=search] { flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 10px; font: inherit; }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-tab { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; text-decoration: none; color: var(--c-text); font-size: .85rem; }
.admin-tab.is-active { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.admin-table th, .admin-table td { text-align: start; padding: 10px 12px; border-bottom: 1px solid #eef0f2; font-size: .9rem; }
.admin-table thead th { background: #f8fafc; font-weight: 700; }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover { background: #f8fafc; }
.admin-empty { background: #fff; padding: 24px; border-radius: 12px; text-align: center; opacity: .7; }
.admin-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; }

.status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.status-badge--new { background: #eff6ff; color: #1d4ed8; }
.status-badge--packed { background: #fef9c3; color: #854d0e; }
.status-badge--shipped { background: #ecfeff; color: #0e7490; }
.status-badge--done { background: #dcfce7; color: #166534; }
.status-badge--cancelled { background: #fee2e2; color: #991b1b; }
.status-badge--pending { background: #fef9c3; color: #854d0e; }
.status-badge--published { background: #dcfce7; color: #166534; }

.admin-hint { color: var(--c-text-muted); font-size: .9rem; margin: 0 0 var(--space-4); line-height: 1.6; }
.admin-table .admin-actions { margin: 0; flex-wrap: wrap; align-items: center; }
.admin-table .admin-actions form { margin: 0; }

.admin-actions { display: flex; gap: 10px; margin: 14px 0; }
.admin-card { background: #fff; border-radius: 12px; padding: 16px; margin: 12px 0; }
.admin-card p { margin: 4px 0; }
.admin-cancel { color: var(--c-alert); border-color: var(--c-alert-border); }

/* ── Section 7: CMS content (announcement, hero, WhatsApp, admin form) ───── */
.announce-bar { background: var(--c-accent); color: #fff; text-align: center; font-size: .9rem; padding: 7px 0; font-weight: 600; }
.announce-bar__icon { height: 1.25em; width: auto; vertical-align: -0.28em; filter: brightness(0) invert(1); }

.hero { position: relative; border-radius: 0 0 18px 18px; overflow: hidden; margin-bottom: 16px; background: var(--c-bg-muted); }
.hero--image { min-height: 220px; }
.hero__bg { width: 100%; height: 100%; max-height: 360px; object-fit: cover; display: block; }
.hero__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 24px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0)); color: #fff; }
.hero:not(.hero--image) .hero__inner { position: static; color: var(--c-text); background: none; padding: 28px 20px; }
.hero__heading { font-family: var(--font-head); font-size: 1.8rem; margin: 0 0 50px; }
.hero__sub { margin: 0; font-size: 1rem; max-width: 40ch; }
.hero__cta {
  margin-top: 6px;
  flex: 0 0 auto;            /* override btn-primary flex:1 → don't stretch */
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
}

.footer-contact { margin: 6px 0; font-size: .85rem; opacity: .9; }
.footer-contact a { color: inherit; }

.wa-float { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 1250;
  width: 52px; height: 52px; border-radius: 50%; background: #128c4b; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.wa-float:active { cursor: grabbing; }
.wa-float.is-dragging { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
/* hide the WhatsApp button while the barcode scanner overlay is open (it covers the input) */
#scan-overlay:not([hidden]) ~ .wa-float { display: none; }

.admin-nav { display: flex; gap: 14px; }
.admin-nav a { color: #fff; text-decoration: none; font-size: .9rem; opacity: .9; }
.admin-flash { padding: 10px 12px; border-radius: 10px; margin: 10px 0; }
.admin-flash--ok { background: #dcfce7; color: #166534; }
.admin-flash--err { background: var(--c-alert-bg); color: var(--c-alert); }
.admin-content-form .form-field { margin: 10px 0; }
.form-field--safety { border-inline-start: 3px solid var(--c-alert); padding-inline-start: 10px; }
.form-field--safety em { color: var(--c-alert); font-style: normal; font-size: .8rem; }
.admin-reset { font-size: .72rem; padding: 2px 8px; margin-top: 4px; }
.admin-switch { display: inline-flex; gap: 6px; align-items: center; }
.admin-img-preview { max-width: 240px; border-radius: 10px; display: block; margin-bottom: 8px; }
.admin-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Section 8: accessibility ────────────────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 8px; inset-block-start: -48px;
  z-index: 2000; background: var(--c-primary); color: #fff; padding: 8px 14px;
  border-radius: 0 0 10px 10px; transition: inset-block-start .15s; }
.skip-link:focus { inset-block-start: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, .icon-btn:focus-visible, .cat-chip:focus-visible,
.product-card a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px;
}
.search-input:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ── Section 9: desktop responsive polish ─────────────────────────────────
   Mobile-first layout is locked; everything below lives inside min-width
   desktop queries (or @media hover) so phones are never affected.
   Goal: the 720px column scales up gracefully to wide monitors — wider but
   bounded content, 4→5 product columns, wrapping chips, premium hover. */

/* Widen the shared content max-width on desktop (header, grid, footer align).
   Reading-heavy pages are re-capped narrower further down. */
@media (min-width: 1024px) {
  :root { --maxw: min(1500px, 95vw); }   /* near full-width box, slim gutter */
  /* Full-width container with a 24px gutter so all content right/left edges line up
     with the full-bleed hero heading (24px). Reading-heavy pages re-cap below. */
  .container { padding-inline: var(--space-5); max-width: none; }
}
@media (min-width: 1440px) {
  :root { --maxw: min(1840px, 95vw); }   /* stays close to full on wide monitors */
}

/* Product grids: 2 (mobile) → 3 (≥560) → 4 (≥1024) → 5 (≥1440) columns. */
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 1440px) {
  .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Category chips: stop horizontal-scrolling on wide screens, wrap cleanly. */
@media (min-width: 1024px) {
  .cat-row { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
}

/* Keep reading-heavy pages at a comfortable line length even when the
   container is wide (avoids 1280px-wide paragraphs on the product page). */
@media (min-width: 1024px) {
  .breadcrumb, .product { max-width: 760px; margin-inline: auto; }
}

/* Hero image: never let it dominate a tall/wide monitor. */
.hero__bg { object-position: center; }
@media (min-width: 1024px) {
  .hero__bg { max-height: 420px; }
}

/* Premium hover — gated to real pointing devices so touch is untouched. */
@media (hover: hover) and (pointer: fine) {
  .product-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
  .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .product-card__media img { transition: transform 0.3s ease; }
  .product-card:hover .product-card__media img { transform: scale(1.04); }

  .btn-add:not(:disabled) { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
  .btn-add:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

  .cat-chip { transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
  .cat-chip:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

  .logo:hover, .header-actions a:hover { opacity: 0.82; }
}

/* Section 10: header side-nav drawer (CSS-only) — slides in from the side,
   covers most of the screen, lists all categories. RTL → opens from the right. */
.nav-overlay {
  position: fixed; inset: 0; z-index: 59;
  background: rgba(28, 27, 27, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.nav-menu {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
  width: 86vw; max-width: 400px;
  display: flex; flex-direction: column;
  background: var(--c-white);
  box-shadow: -8px 0 28px rgba(0, 0, 0, .25);
  transform: translateX(100%);              /* off-screen to the right (RTL) */
  transition: transform .28s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-toggle:checked ~ .nav-overlay { opacity: 1; visibility: visible; }
.nav-toggle:checked ~ .nav-menu { transform: translateX(0); }

.nav-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-4);
  background: var(--c-primary); color: #fff;
  position: sticky; top: 0; z-index: 1;
}
.nav-menu__title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.nav-menu__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.nav-menu__close:hover { background: rgba(255, 255, 255, .3); }

.nav-menu__links { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.nav-menu__links a {
  padding: var(--space-3) var(--space-4);
  color: var(--c-text); font-family: var(--font-head); font-weight: 600;
  border-bottom: 1px solid var(--c-line);
}
.nav-menu__links a:hover { background: var(--c-bg-muted); text-decoration: none; }

.nav-menu__label {
  display: block; padding: var(--space-3) var(--space-4) var(--space-2);
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  color: var(--c-text-muted); letter-spacing: .02em;
}
.nav-cat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--c-accent); font-family: var(--font-head); font-weight: 600;
  border-bottom: 1px solid var(--c-line);
}
.nav-cat:hover { background: var(--c-bg-muted); text-decoration: none; }
.nav-cat__chev { color: var(--c-text-muted); font-size: 1.1rem; line-height: 1; }

/* ── Section 10: landing page + footer ───────────────────────────────────── */
.header-actions--end { position: relative; }       /* anchor for .nav-menu */

/* Recommended — MOBILE (unchanged): horizontal cards (text right / image left
   in RTL), vertical stack, first 4 only (we fetch 12 for the desktop slider). */
.rec-list { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.rec-list > .rec-card:nth-child(n+5) { display: none; }   /* mobile shows 4 */
.rec-slider__arrow { display: none; }                      /* arrows are desktop-only */

.rec-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3);
  padding: var(--space-2);   /* image fills full height: top lines up with the brand, bottom with the button */
  background: var(--c-white); border: none; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); }
.rec-card__media { position: relative; align-self: stretch; display: flex;
  align-items: center; justify-content: center; background: #fff; }
.rec-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rec-card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: 0; }
.rec-card__title { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line */
.rec-card__title a { color: var(--c-text); }
.rec-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; }

/* DESKTOP (≥1024) — Noy-style horizontal slider: a scroll-snap row of VERTICAL
   product cards with circular ‹ › arrows. Placed AFTER the base .rec-card rules
   so these win. */
@media (min-width: 1024px) {
  .section__title--big { font-size: 2.4rem; }   /* recommended + leading-categories headings, Noy-scale */
  .rec-slider { position: relative; }
  .rec-list {
    display: flex; flex-wrap: nowrap; gap: var(--space-5);
    overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
    scrollbar-width: none; padding-block: var(--space-2);
  }
  .rec-list::-webkit-scrollbar { display: none; }
  .rec-list > .rec-card:nth-child(n+5) { display: flex; }   /* show all in the slider */

  /* vertical card (image on top, body below); fixed width so several fit + scroll */
  .rec-card {
    display: flex; flex-direction: column; gap: 0;
    flex: 0 0 auto; width: 210px;
    scroll-snap-align: start; padding: 0;
  }
  .rec-card__media { align-self: auto; aspect-ratio: auto; width: 100%; height: 168px; }
  .rec-card__media img { object-fit: contain; padding: var(--space-2); }
  .rec-card__body { padding: var(--space-3); gap: var(--space-1); flex: 1; }
  .rec-card__title { white-space: normal; }                 /* 2 lines OK in the taller card */
  /* narrow card → stack price over a full-width add button (no clipping) */
  .rec-card__foot { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .rec-card__foot .btn-add { width: 100%; }

  /* circular arrows overlapping the row edges (RTL: prev=right, next=left) */
  .rec-slider__arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset-block-start: 50%; transform: translateY(-50%);
    z-index: 3; width: 56px; height: 56px; border-radius: 50%;
    border: none; background: var(--c-primary); color: #fff;
    font-size: 2.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
    font-family: var(--font-head); padding-bottom: 5px;
  }
  .rec-slider__arrow--prev { inset-inline-end: -10px; }     /* right edge in RTL */
  .rec-slider__arrow--next { inset-inline-start: -10px; }   /* left edge in RTL */
}
.section__cta { display: flex; justify-content: center; padding-block: var(--space-6) var(--space-2); }

/* Leading categories — 2-col (→3 on desktop) */
/* Category slider — horizontal scroll-snap (peeks the next card). */
.cat-grid {
  display: flex; gap: var(--space-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
.cat-card {
  flex: 0 0 50%; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-2);
  text-decoration: none; color: var(--c-text);
  transition: transform .15s ease;
}
.cat-card__media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--c-bg-muted); display: block; }
/* zoom the photo 1.3× from the center (mobile + desktop); frame crops via overflow:hidden */
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transform-origin: center; }
.cat-card__name { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--c-accent); }
@media (min-width: 560px)  { .cat-card { flex-basis: 36%; } }
@media (min-width: 1024px) {
  .cat-card { flex-basis: 26%; }
  .cat-card__name { font-size: 1.3rem; }
}
@media (min-width: 1440px) { .cat-card { flex-basis: 21%; } }
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover { transform: translateY(-4px); }
  .cat-card:hover .cat-card__media { box-shadow: var(--shadow); }
}

/* Category page hero banner (uploaded per-category photo) — full-bleed, above the bars */
.cat-hero { position: relative; overflow: hidden; }
.cat-hero__img { display: block; width: 100%; height: 170px; object-fit: cover; }
.cat-hero__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: var(--space-4); background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0) 62%); }
.cat-hero__title { margin: 0; color: #fff; font-family: var(--font-head); font-weight: 800;
  font-size: 1.9rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (min-width: 768px)  { .cat-hero__img { height: 240px; } .cat-hero__title { font-size: 2.4rem; } }
@media (min-width: 1440px) { .cat-hero__img { height: 300px; } }

/* Story hero */
/* Full-bleed + ≥50vh, like the main hero (breaks out of the content container). */
.story-hero { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); }
/* Desktop: breathing room between קטגוריות מובילות and the קצת עלינו story hero. */
@media (min-width: 1024px) { [data-page="landing"] .story-hero { margin-top: 4rem; } }
.story-hero__img { width: 100%; height: 50vh; max-height: none; object-fit: cover; object-position: center; display: block; }
.story-hero__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.6rem; text-decoration: none; }

/* About block */
.about-block { text-align: center; padding-block: var(--space-6); }
.about-block__text { max-width: 60ch; margin: var(--space-3) auto 0; line-height: 1.7; }
/* Consistent breathing room above the section CTA button (matches .section__cta). */
.about-block__cta { display: inline-block; margin-top: var(--space-6); }

/* Feature slider (CSS scroll-snap + dots) */
.feature-slider {                                   /* hugs the card with breathing room */
  display: flex; flex-direction: column;
  margin-block: var(--space-6);
  padding-block: calc(var(--space-7) + var(--space-6));   /* ~80px */
}
.feature-slider__track { display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                          /* hide the scrollbar (swipe/dots) */
  padding-top: 76px; }                            /* room so the protruding icon (≈68px above the card) isn't clipped by overflow */
.feature-slider__track::-webkit-scrollbar { display: none; }
/* One card visible at a time — each slide spans the full track width. */
.feature-slide { flex: 0 0 100%; scroll-snap-align: center;
  display: flex; justify-content: center; padding-inline: var(--space-4); }
/* Desktop: show 3 cards side by side, still a scroll-snap slider (5 cards → scroll). */
@media (min-width: 1024px) {
  .feature-slide { flex: 0 0 33.333%; scroll-snap-align: start; }
}
/* Slider arrows — desktop only (mobile uses swipe + dots). */
.feature-slider__viewport { position: relative; }
.feature-slider__arrow { display: none; }
@media (min-width: 1024px) {
  .feature-slider__arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset-block-start: 50%; transform: translateY(-50%);
    z-index: 3; width: 56px; height: 56px; border-radius: 50%;
    border: none; background: var(--c-primary); color: #fff;
    font-size: 2.4rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
    font-family: var(--font-head); padding-bottom: 5px;
  }
  .feature-slider__arrow--prev { inset-inline-end: -6px; }   /* right edge in RTL */
  .feature-slider__arrow--next { inset-inline-start: -6px; } /* left edge in RTL */
}
.feature-card { position: relative; width: 100%; max-width: 323px; min-height: 272px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2);
  background: var(--c-white); box-shadow: var(--shadow); border-radius: 0;
  padding: 76px var(--space-5) var(--space-5); text-align: center; }
/* Icon straddles the top edge (half outside the card). Source icons are all
   normalised to the same height, and we render at a fixed height with auto width,
   so every icon is the SAME size (uniform height) and large. */
.feature-slide__icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  height: 136px; width: auto; margin: 0; }
.feature-slider__dots { display: flex; gap: var(--space-2); justify-content: center; padding-top: var(--space-4); }
.feature-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-line); }
.feature-dot:hover { background: var(--c-primary); }

/* Promo banner */
.promo-banner { position: relative; border-radius: var(--radius); overflow: hidden; margin-block: var(--space-5); }
.promo-banner__img { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.promo-banner__body { padding: var(--space-4); }
.promo-banner__h { margin: 0 0 var(--space-2); }

/* Footer redesign */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.footer-col { border-bottom: 1px solid rgba(255,255,255,.18); }
.footer-col__head { cursor: pointer; padding: var(--space-3) 0; font-family: var(--font-head);
  font-weight: 700; font-size: 1.15rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.footer-col__head::-webkit-details-marker { display: none; }
/* rotating chevron (down when closed, up when open) */
.footer-col__head::after { content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease; }
.footer-col[open] .footer-col__head::after { transform: rotate(-135deg); }
.footer-col__list { list-style: none; padding: 0 0 var(--space-3); margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col__list a, .footer-col__list li { color: #f4eceb; font-size: 1rem; }
.newsletter { text-align: center; padding-block: var(--space-5); position: relative; }
.newsletter__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-2); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 420px; margin-inline: auto; }
.newsletter__input { flex: 1 1 200px; padding: var(--space-3); border-radius: var(--radius); border: 0; }
.newsletter__consent { flex: 1 1 100%; font-size: .8rem; opacity: .9; display: flex; gap: 6px; align-items: center; justify-content: center; }
.newsletter__msg--ok { color: #b9f6c8; }
.newsletter__msg--err { color: #ffd0d0; }
.footer-trust { text-align: center; padding-block: var(--space-4); }
.footer-social { display: flex; gap: var(--space-4); justify-content: center; align-items: center; flex-wrap: wrap; }
.footer-social a { color: #f4eceb; display: inline-flex; line-height: 0; }
.social-ic { height: 28px; width: auto; transition: transform .15s ease, opacity .15s ease; }
.footer-social a:hover .social-ic { transform: translateY(-2px); opacity: .85; }
.footer-pay { display: flex; gap: var(--space-2); justify-content: center; margin-block: var(--space-3); }
.footer-pay img { height: 24px; width: auto; }

/* Desktop: footer columns open + side-by-side */
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: start; }
  .footer-col__head { pointer-events: none; }          /* not collapsible on desktop */
  .footer-col__head::after { display: none; }          /* hide the open/close chevron on desktop */
}

/* ── Section 10: landing hero — full-width banner above the filter bar ────── */
/* Rendered in base.html's `above_filters` block → outside the content
   container, so it's naturally full-width + flush under the header.
   Just drop the rounded "box" corners and the bottom gap so the global
   filter bar sits directly beneath it.                                       */
.landing-hero .hero { border-radius: 0; margin-bottom: 0; min-height: 50vh; }
/* Fill ≥ half the viewport: bg image covers the whole hero, no height cap. */
.landing-hero .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
/* Shop page: same hero, a bit shorter than the home hero. */
.shop-hero .hero { min-height: 28vh; }

/* Desktop hero scaling (≥1024) — applies to every hero site-wide (landing /,
   shop, about, contact all share partials/hero.html). Mobile base sizes above
   are locked; these overrides are desktop-only. Image ~1.3× taller (the image
   fills the hero via the absolute .hero__bg), heading 3×, sub + CTA grow in
   proportion to keep the hierarchy balanced. */
@media (min-width: 1024px) {
  .landing-hero .hero { min-height: 65vh; }          /* was 50vh → ×1.3 */
  .shop-hero .hero    { min-height: 36vh; }           /* was 28vh → ×1.3 */
  /* Center the heading / subheading / button block. */
  .hero__inner   { align-items: center; text-align: center; }
  .hero__heading { font-size: 5.4rem; margin-bottom: 28px; }  /* 1.8rem × 3 */
  .hero__sub     { font-size: 2rem; max-width: 48ch; }        /* grows in relation */
  .hero__cta     { font-size: 1.5rem; padding: 16px 40px; align-self: center; }  /* grows in relation */
}

/* ── Product badges (logos / health / origin marks on cards) ─────────────── */
.pbadges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 2px; }
.pbadge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.66rem; line-height: 1.3;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.pbadge--logo { padding: 0; border-radius: 4px; height: 22px; width: auto; background: transparent; }
.pbadge--il { padding: 0; background: transparent; height: 24px; width: auto; border-radius: 0; }   /* made-in-Israel flag */
.pbadge--diet { background: #e7f3ea; color: #1f6f3f; }                        /* ללא גלוטן / טבעוני / צמחוני */
.pbadge--symbol { padding: 0; height: 26px; width: auto; }                    /* official red/green food symbols */
.pbadge--dietlogo { padding: 0; background: transparent; border-radius: 0; height: 26px; width: auto; }  /* gluten-free / vegan / vegetarian logos */

/* Product detail page — large, prominent badges (2× the card size). */
.product__buybox .pbadges { gap: var(--space-3); margin: var(--space-4) 0; }
.product__buybox .pbadge { font-size: 1.6rem; padding: 8px 22px; }
.product__buybox .pbadge--logo { height: 68px; }
.product__buybox .pbadge--symbol { height: 84px; }
.product__buybox .pbadge--il { height: 54px; padding: 0; }
.product__buybox .pbadge--dietlogo { height: 60px; padding: 0; }

/* ── Landing: blog / recipe slider (above the footer) ────────────────────── */
.blog-slider { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); }
.blog-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.blog-slider__track::-webkit-scrollbar { display: none; }
.blog-slide { flex: 0 0 100%; scroll-snap-align: center;
  background: var(--c-white); box-shadow: var(--shadow-sm); }
.blog-slide__media { position: relative; height: 46vh; min-height: 300px; background: var(--c-bg-muted); }
.blog-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* circular prev/next arrows — centered pair straddling the image's bottom edge */
.blog-slide__nav { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-4); z-index: 2; }
.blog-arrow { width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff; font-size: 1.4rem; line-height: 1;
  box-shadow: var(--shadow-sm); }
.blog-arrow:hover { background: var(--c-primary-dark); text-decoration: none; }
.blog-slide__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  max-width: 640px; margin-inline: auto;       /* keep text readable on a full-width card */
  padding: var(--space-6) var(--space-5) var(--space-5); text-align: center; }
.blog-slide__title { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
  color: var(--c-accent); margin: 0; }
.blog-slide__excerpt { margin: 0; color: var(--c-text-muted); line-height: 1.7; }
.blog-slide__more { flex: 0 0 auto; align-self: center; }   /* override btn-primary flex:1 */

/* ── Category bar — text-only chips right beneath the filters (/shop, /category) */
/* Mobile category bar — styled like the desktop nav (plain text + dividers +
   highlighter on the active item), still horizontally scrollable. */
.cat-bar { background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.cat-bar__inner { display: flex; gap: var(--space-2); overflow-x: auto;
  padding-block: var(--space-2); scrollbar-width: none; }
.cat-bar__inner::-webkit-scrollbar { display: none; }
.cat-bar__chip { flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; line-height: 1.6;
  color: var(--c-text); text-decoration: none;
  background-origin: content-box; background-clip: content-box; }
.cat-bar__chip:not(:first-child) { border-inline-start: 1px solid color-mix(in srgb, var(--c-line), var(--c-text-muted) 35%); padding-inline-start: var(--space-2); }
.cat-bar__chip.is-current,
.cat-bar__chip:hover, .cat-bar__chip:focus, .cat-bar__chip:active { background-image: var(--hl-band); text-decoration: none; }   /* tap shows the band, not the underline */
/* desktop shows the top horizontal nav instead, so hide this duplicate */
@media (min-width: 1024px) { .cat-bar { display: none; } }

/* ── Intro text block under the main hero (landing) ──────────────────────── */
.intro-section { padding-block: var(--space-6); text-align: center; }
.intro-section__h { font-size: 1.5rem; margin: 0 0 var(--space-3); }
.intro-section__text { max-width: 60ch; margin-inline: auto; line-height: 1.7; color: var(--c-text-muted); }

/* ── Contact page ────────────────────────────────────────────────────────── */
.contact-page { max-width: 640px; padding-block: var(--space-5) var(--space-7); }
.contact-page__h { font-size: 1.7rem; margin-bottom: var(--space-3); }
.contact-page__intro { line-height: 1.7; margin: 0 0 var(--space-2); }
.contact-page__hours { color: var(--c-text-muted); margin: 0 0 var(--space-5); }

.contact-methods { list-style: none; padding: 0; margin: 0 0 var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3); }
.contact-method { display: flex; align-items: center; gap: var(--space-3);
  color: var(--c-text); font-weight: 600; }
.contact-method__icon { flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--c-white); box-shadow: var(--shadow-sm); }
.contact-method__icon--wa { background: #128c4b; }
a.contact-method:hover { text-decoration: none; color: var(--c-primary); }

/* message form */
.contact-form__banner { font-size: 1.35rem; color: var(--c-text); margin: 0 0 var(--space-5); }

/* Reusable highlighter band — a solid navy band sitting under the bottom third
   of the text. Single source: `.hl` class OR the --hl-band variable (e.g. nav
   hover). Edit here once. */
:root {
  --hl-band: linear-gradient(
      transparent 70%,
      var(--c-highlight) 70%,
      var(--c-highlight) 100%);
}
.hl { display: inline; line-height: 1.6; background-image: var(--hl-band); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-form__row { display: flex; gap: var(--space-3); }
.contact-form__row .field { flex: 1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 600; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--c-text);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--space-3); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(128,0,32,.12); }
.contact-form__submit { align-self: flex-start; flex: 0 0 auto; }
.contact-form__msg { margin: var(--space-2) 0 0; font-weight: 600; }
.contact-form__msg--ok { color: #128c4b; }
.contact-form__msg--err { color: var(--c-alert); }
@media (max-width: 479px) { .contact-form__row { flex-direction: column; gap: var(--space-3); } }

/* Scan verdict icons (keep their green/red; scan-fail is bordeaux) */
.scan-pop__icon { width: auto; height: 1.3em; flex: none; }   /* a touch taller than the verdict text */
.scan-pop__icon--fail { width: auto; height: 4.8em; max-width: 100%; }   /* "no product found" — large barcode, on its own line */
/* Story play button: branded bordeaux play icon, no backing circle */
.story-hero__play { background: transparent; color: var(--c-primary); width: 120px; height: 120px; }
.story-hero__play .icn { width: 120px; height: 120px; filter: drop-shadow(0 2px 6px rgba(255,255,255,.55)); }

/* Transparency-line warning icon (light bar) */
.tl-icon { height: 1.5em; width: auto; vertical-align: -0.4em; }   /* warning + kosher star, same height (1.3x) */

/* Filter-bar logo icons (allergen funnel + diet/gluten badges) — same height as the kosher star */
.filter-ic, .diet-ic { height: 30px; width: auto; vertical-align: middle; flex: none; }

/* ── Bina: AI recipe assistant (beta) ─────────────────────────────────────── */
.bina { max-width: 760px; margin-inline: auto; }
/* Hero: heading + text beside a big Bina (left), who comes out from behind the
   search bar below (mirrors the homepage teaser). */
.bina__hero { display: flex; align-items: flex-start; gap: var(--space-3); position: relative; z-index: 0; }
.bina__intro { flex: 1 1 auto; min-width: 0; }
.bina__mascot-lg {
  height: 230px; width: auto; flex: 0 0 auto; align-self: flex-end;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2));
}
.bina__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.bina__title { font-family: var(--font-head); font-size: 1.4rem; margin: 0; }
.bina__beta {
  font-size: 0.7rem; font-weight: 700; color: var(--c-white); background: var(--c-accent);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.bina__disclaimer { color: var(--c-text-muted); font-size: 0.9rem; line-height: 1.6; margin: var(--space-2) 0 0; }
/* the search bar is a card that overlaps Bina's feet → she emerges from behind it */
.bina__form {
  position: relative; z-index: 1; margin-top: -28px; margin-bottom: var(--space-5);
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.bina__input { width: 100%; }
.bina__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bina__chips-label { font-size: 0.8rem; color: var(--c-text-muted); }
.bina__chip { background: var(--c-bg-muted); border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; }

/* "Bina is thinking" indicator — shown only while the HTMX request is in flight
   (htmx adds .htmx-request to the hx-indicator target). */
.bina-thinking { display: none; align-items: center; gap: var(--space-3);
  color: var(--c-text); font-size: 1.25rem; padding: var(--space-5) 0; }
.bina-thinking.htmx-request { display: flex; }
.bina-thinking__txt { font-weight: 700; font-family: var(--font-head); }
.bina-thinking__dots { display: inline-flex; gap: 7px; }
.bina-thinking__dots span {
  width: 11px; height: 11px; border-radius: 50%; background: var(--c-primary);
  animation: bina-flicker 1s infinite steps(1, end) both;
}
.bina-thinking__dots span:nth-child(2) { animation-delay: 0.2s; }
.bina-thinking__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bina-flicker {
  0%, 40% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
@media (prefers-reduced-motion: reduce) {
  .bina-thinking__dots span { animation: none; opacity: 0.7; }
}

/* "New search" link shown on top of results / a chosen recipe — always a way back. */
.bina-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.9rem; font-weight: 600; color: var(--c-primary);
  background: none; border: none; cursor: pointer; padding: 0; margin-bottom: var(--space-2);
}
.bina-back:hover { text-decoration: none; opacity: 0.8; }
.bina-recipe__nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.bina-recipe__nav form { margin: 0; }
.bina-recipe__cta { margin-top: var(--space-5); }

.bina-results, .bina-recipe { display: flex; flex-direction: column; gap: var(--space-4); }
.bina-results__lead { color: var(--c-text-muted); font-size: 0.9rem; margin: 0; }
.bina-empty { color: var(--c-text-muted); padding: var(--space-5) 0; }

.bina-card {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--space-4);
}
.bina-card__title { font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 var(--space-2); }
.bina-card__sum { color: var(--c-text-muted); margin: 0 0 var(--space-3); }
.bina-card__foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.bina-card__foot form { flex: 0 0 auto; }
.bina-card__src { color: var(--c-text-muted); font-size: 0.85rem; }

.bina-recipe__title { font-family: var(--font-head); font-size: 1.3rem; margin: 0; }
.bina-recipe__sum { color: var(--c-text-muted); margin: 0; }
.bina-recipe__src { font-size: 0.85rem; }
.bina-recipe__h { font-family: var(--font-head); font-size: 1.05rem; margin: var(--space-2) 0 0; }
.bina-recipe__hint { color: var(--c-text-muted); font-size: 0.85rem; margin: 0; }
.bina-recipe__ings, .bina-recipe__steps { margin: 0; padding-inline-start: 1.3em; line-height: 1.7; }

.bina-bundle-form { display: flex; flex-direction: column; gap: var(--space-3); }
.bina-bundle { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bina-bundle__line {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--c-bg-muted); border-radius: var(--radius-sm); padding: var(--space-3);
}
.bina-bundle__check { display: flex; align-items: center; gap: var(--space-2); flex: 1; cursor: pointer; }
.bina-bundle__name { font-weight: 600; }
.bina-bundle__for { color: var(--c-text-muted); font-size: 0.8rem; }
.bina-bundle-form .btn-primary { align-self: flex-start; flex: 0 0 auto; }

.bina-also { color: var(--c-text-muted); }
.bina-also__h { font-size: 0.9rem; margin: 0 0 var(--space-2); }
.bina-also__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.bina-also__item { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bina-also__name { color: var(--c-text); font-weight: 600; }
.bina-also__for { color: var(--c-text-muted); font-weight: 400; font-size: 0.85rem; }
.bina-also__add { margin-inline-start: auto; }   /* push the add button to the row end */

.bina-feedback { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.bina-feedback__label { color: var(--c-text-muted); font-size: 0.85rem; }
.bina-feedback__btn {
  border: 1px solid var(--c-line); background: var(--c-white); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3); font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.bina-feedback__btn:hover { background: var(--c-bg-muted); }

/* ── מתכונים browse + free-of tags ──────────────────────────────────────── */
.recipes-browse__lead { color: var(--c-text-muted); margin: 0 0 var(--space-4); line-height: 1.6; }
.recipes-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.recipes-cat {
  background: var(--c-bg-muted); border-radius: 999px; padding: 6px 14px;
  font-size: 0.9rem; font-weight: 600; color: var(--c-text);
}
.recipes-cat.is-active { background: var(--c-primary); color: #fff; }
.recipes-browse__active { color: var(--c-text-muted); margin: 0 0 var(--space-4); }
.recipes-browse__empty { color: var(--c-text-muted); padding: var(--space-5) 0; }

.recipes-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr; gap: var(--space-3); }
.recipe-card { background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: 14px; padding: var(--space-4); }
.recipe-card__link { display: block; color: inherit; text-decoration: none; }
.recipe-card__title { font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 var(--space-2); }
.recipe-card__sum { color: var(--c-text-muted); margin: 0; font-size: 0.9rem; }
.recipe-card__tags, .recipe-freeof { list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-card__tag, .recipe-freeof__tag {
  background: #dcfce7; color: #166534; border-radius: 999px;
  padding: 3px 10px; font-size: 0.8rem; font-weight: 600;
}
.recipe-freeof { margin: var(--space-2) 0 var(--space-3); }
.recipe-viewer-note {
  background: #eff6ff; color: #1d4ed8; border-radius: 10px;
  padding: 10px 14px; font-size: 0.9rem; line-height: 1.5; margin: 0 0 var(--space-3);
}

@media (min-width: 560px) { .recipes-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .recipes-grid { grid-template-columns: 1fr 1fr 1fr; } }

@media (min-width: 1024px) {
  .bina-results, .bina-recipe { gap: var(--space-5); }
  .bina-bundle__line:hover { background: #ececec; }
}

/* Landing teaser → links into /bina (replaces the blog slider when enabled) */
/* Bina (left) + heading at her mid-height; the box overlaps her feet (a little behind) */
.bina-teaser__head {
  display: flex; align-items: center; gap: var(--space-3);
  position: relative; z-index: 0;
}
.bina-teaser__title { margin: 0; flex: 1 1 auto; }
.bina-teaser__mascot {
  height: 270px; width: auto; flex: 0 0 auto;   /* DOM order (h2,img) → Bina on the LEFT in RTL */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2));
}
.bina-teaser__cta {
  position: relative; z-index: 1;          /* box in front → overlaps Bina's feet */
  margin-top: -48px;                        /* slide up so she's a little behind the box top */
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--space-5);
}
.bina-teaser__h { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; gap: var(--space-2); }
.bina-teaser__p { color: var(--c-text-muted); line-height: 1.6; }
.bina-teaser__cta .btn-primary { flex: 0 0 auto; pointer-events: none; }   /* the whole card is the link */