/* ==========================================================================
   Brastos Sodas — base layer · v3
   --------------------------------------------------------------------------
   Promoted from prototype/_boards/_home.css (the D-04 reference board,
   client-approved 2026-09-15) with the corrections listed in
   docs/design/01-foundations.md §12 and 03-page-homepage.md §7:

     · every token is the 01 §11 name (tokens.css is the only place a colour,
       size, radius, duration or font-size literal lives);
     · no border-radius on :focus-visible (§12 #20);
     · header inline logo 26 px (§12 #22);
     · .farm__pic declared once, 96 px, grid column 96 px (03 §5/§7 — raised from 72 in the 2026-09-15 QA pass);
     · footer column headings are <h3> under the hidden <h2>Poraštė</h2>;
     · scroll-padding-top removed — the header is not sticky;
     · the site-menu popover uses --shadow-sheet, the one shadow on the site;
     · cart drawer + scrim: moved to css/cart.css on 2026-09-15 (P-cart, PLAN-B3 §1).

   Owner: B-home (BUILD-CONTRACT.md). Variant-C-only blocks live in home.css;
   the fulfilment sheet lives in components/fulfilment.css (B-fulfil).
   ========================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; font-synthesis: none; font-optical-sizing: auto; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--ff-body); font-size: var(--fz-body); line-height: var(--lh-body); font-weight: 400; text-wrap: pretty; }
body[data-lock] { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl { margin: 0; }
ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--focus-ring-w) solid var(--focus); outline-offset: var(--focus-ring-offset); }
.band--dark :focus-visible, .foot :focus-visible { outline-color: var(--focus-on-dark); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-live); padding: var(--sp-2) var(--sp-4); background: var(--forest); color: var(--cream); border-radius: var(--rad-s); text-decoration: none; }
.skip:focus { top: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  /* tokens.css zeroes the three durations; this stops the one keyframe too */
  *, *::before, *::after { animation: none !important; }
}

/* ---------- type roles ---------- */
h1, .h1 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fz-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; color: var(--ink); }
h2, .h2 { font-family: var(--ff-display); font-weight: 600; font-size: var(--fz-h2); line-height: var(--lh-h2); letter-spacing: 0; text-wrap: balance; color: inherit; }
h3 { font-size: var(--fz-h3); font-weight: 600; line-height: var(--lh-tight); text-wrap: balance; }
.moment { font-family: var(--ff-display); font-weight: 600; font-size: var(--fz-moment); line-height: var(--lh-moment); text-wrap: balance; max-width: var(--measure-moment); }
.lead { font-size: var(--fz-lead); line-height: var(--lh-lead); max-width: var(--measure-lead); }
.meta { font-size: var(--fz-meta); color: var(--ink-soft); }
.link { color: var(--ink); font-size: var(--fz-ui); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; transition: color var(--t-colour) var(--ease-out); }
.link:hover { color: var(--forest); }

/* ---------- buttons (rectangles; pills are for chips) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4);
  border-radius: var(--rad-s); border: 1px solid transparent; font-size: var(--fz-ui); font-weight: 500; line-height: var(--lh-ui);
  text-decoration: none; white-space: nowrap; transition: background-color var(--t-colour), color var(--t-colour), border-color var(--t-colour), transform var(--t-press); transition-timing-function: var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--forest); color: var(--cream); }
.btn--primary:hover { background: var(--forest-deep); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--add { width: 100%; background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--add:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--block { width: 100%; }
/* the gated checkout CTA: cart.js upgrades the <a> to a <button> so `disabled` is real; the attribute
   state is styled as well so an un-upgraded link cannot paint as the live primary (QA 2026-09-15 cro 1).
   Disabled face on ANY ground (01 §6): --surface fill, --ink-muted text, --line keyline — a white slab reads
   as a resting control on chrome and on the page alike, and is plainly not forest (QA2 design R4) */
.btn[disabled], .btn[aria-disabled="true"] { background: var(--surface); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; pointer-events: none; transform: none; }

/* ---------- breadcrumb — ONE implementation for every page (QA2 design Y5): list reset, `›` separator,
   the current item in --ink, the product name ellipsised at 40ch (24ch ≤ 599). Pages set only the margin. ---------- */
.crumbs { font-size: var(--fz-meta); color: var(--ink-soft); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--ink-muted); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
@media (max-width: 599px) { .crumbs [aria-current="page"] { max-width: 24ch; } }

/* ---------- chips (the only pills, with search / stepper / day cells) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--sp-4); border-radius: var(--rad-pill);
  background: var(--chip); color: var(--ink); font-size: var(--fz-ui); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; transition: background-color var(--t-colour), color var(--t-colour), border-color var(--t-colour), transform var(--t-press); transition-timing-function: var(--ease-out); }
.chip:hover { background: var(--line); }
.chip:active { transform: scale(.97); }
.chip--on { background: var(--chip-active); color: var(--on-chip-active); }
.chip--on:hover { background: var(--chip-active); }
.chip--honey { min-height: 22px; padding: 0 var(--sp-2); font-size: var(--fz-tag); background: var(--honey-tint); color: var(--honey-ink); }
.chip--honey:hover { background: var(--honey-tint); }
.chip--info { min-height: 22px; padding: 0 var(--sp-2); font-size: var(--fz-tag); background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.chip--info:hover { background: transparent; }

/* ---------- header (03 §0) ----------
   Row 1 (64 px) · the website: menu button (popover with the site pages) · logo · fulfilment chip · cart.
   Row 2 (56 px, hairline above) · the shop: search field · seven category chips · Visos prekės.
   Everything in row 1 sits on one 44 px control height; the menu button is flush with the left content
   edge and the cart with the right one. Not sticky. */
/* notice bar (client, 2026-09-15): one slim dark line above the header with a running sentence. The kill-list
   bans marquees; this one is the client's call — kept slim (32 px, 13 px type), transform-only, slow, paused on
   hover/focus, static under prefers-reduced-motion. The threshold prints from BS_RULES. */
.notice { height: 32px; overflow: hidden; background: var(--footer); color: var(--on-footer); font-size: var(--fz-meta); line-height: 32px; white-space: nowrap; }
.notice__track { display: flex; width: max-content; animation: notice-run 48s linear infinite; }
.notice__set { display: inline-flex; flex: none; }
.notice__item { display: inline-flex; align-items: center; gap: var(--sp-6); padding-right: var(--sp-6); }
.notice__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fresh); }   /* leaf green speaks on the dark band */
.notice:hover .notice__track, .notice:focus-within .notice__track { animation-play-state: paused; }
@keyframes notice-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .notice__track { animation: none; width: 100%; justify-content: center; } .notice__item[aria-hidden], .notice__set[aria-hidden], .notice__dot { display: none; } }
/* header v6 (client, 2026-09-15): row 1 = menu button · centred logo · account / wishlist / cart, at every width;
   the site pages live in the menu popover. Row 2 = the shop toolbar (search + quiet category pills).
   Sticky: on scroll down the header slides up by row 1 so only the toolbar stays pinned; on scroll up row 1
   returns (js/site.js toggles .is-compact; transform only, 200 ms, zero under reduced motion). */
.hdr { --hdr-top-h: 64px; background: var(--chrome); position: sticky; top: 0; z-index: var(--z-header); transition: transform var(--t-fade) var(--ease-out); }
.hdr.is-compact { transform: translateY(calc(-1 * var(--hdr-top-h))); }
.hdr__band { background: color-mix(in srgb, var(--chrome) 94%, var(--line-strong)); }   /* the shop toolbar sits on a slightly dimmed band — visual separation from the site row (client, 2026-09-15) */
.hdr.is-compact .hdr__band { box-shadow: 0 1px 0 var(--line); }
.hdr__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--hdr-top-h); }
.hdr__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.hdr__icon { display: grid; place-items: center; flex: none; width: var(--target-min); height: var(--target-min); border-radius: var(--rad-pill); color: var(--ink); transition: background-color var(--t-colour), transform var(--t-press); transition-timing-function: var(--ease-out); }
@media (max-width: 1199px) { .sitenav + .hdr__icon { margin-left: auto; } }
.hdr__icon svg { width: 22px; height: 22px; }
.hdr__icon:hover { background: var(--page); }
.hdr__icon:active { transform: scale(.97); }
.hdr__menuwrap { position: relative; justify-self: start; }
.hdr__menu { display: grid; width: var(--target-min); height: var(--target-min); margin-left: calc(-1 * var(--sp-2) - 2px); border-radius: var(--rad-pill); color: var(--ink); place-items: center; text-decoration: none; transition: background-color var(--t-colour), transform var(--t-press); transition-timing-function: var(--ease-out); }
.hdr__menu svg { width: 22px; height: 22px; }
.hdr__menu:hover, .hdr__menu[aria-expanded="true"] { background: var(--page); }
.hdr__menu:active { transform: scale(.97); }
.hdr__logo { display: inline-flex; align-items: center; justify-self: center; color: var(--ink); --bs-logo-leaf: var(--fresh); }
.hdr__logo img { height: 32px; width: auto; display: block; }
.hdr__logo .mark { display: none; height: 34px; }
.cart { position: relative; flex: none; height: var(--target-min); padding: 0 var(--sp-4) 0 var(--sp-3); margin-right: -2px; margin-left: var(--sp-1); }
.cart svg { width: 20px; height: 20px; }
.cart__count { position: absolute; top: -6px; left: var(--sp-5); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rad-pill);
  background: var(--forest); color: var(--cream); font-size: var(--fz-tag); font-weight: 600; line-height: 18px; text-align: center; }
.cart__count.pop { animation: pop var(--t-fade) var(--ease-out); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.hdr__shop { display: flex; align-items: center; gap: var(--sp-3); height: 52px; }
.hdr__search { margin-right: calc(-1 * var(--sp-2)); }   /* the shop toolbar: search + category pills, one line, no rule (client, 2026-09-15) */
.search { display: flex; align-items: center; flex: none; width: 220px; height: 40px; padding: 0 0 0 var(--sp-4); gap: var(--sp-2);
  border-radius: var(--rad-pill); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--t-colour) var(--ease-out); }
.search:focus-within { border-color: var(--ink); outline: var(--focus-ring-w) solid var(--focus); outline-offset: var(--focus-ring-offset); }
.search svg { width: 18px; height: 18px; flex: none; color: var(--ink-soft); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: var(--fz-ui); color: var(--ink); }
.search input::placeholder { color: var(--ink-muted); opacity: 1; }
.search input:focus { outline: none; } /* the field's ring is drawn by .search:focus-within on the pill */
.search button { flex: none; width: 40px; height: 40px; margin: -1px -1px -1px 0; border: 0; border-radius: var(--rad-pill); background: transparent; color: var(--ink-soft); display: grid; place-items: center; }   /* 44 px, the house target (08 §1); the negative margin absorbs the pill's border */
.search button svg { width: 16px; height: 16px; }
/* search modal (client, 2026-09-15): the header search is an icon; the field lives in a dialog */
.search-modal { display: none; position: fixed; inset: 0; z-index: var(--z-sheet); }
.search-modal:target, .search-modal[data-open] { display: block; }
.search-modal__scrim { position: absolute; inset: 0; background: var(--scrim); }
.search-modal__card { position: relative; margin: var(--sp-9) auto 0; width: min(640px, 100% - 2 * var(--gutter)); padding: var(--sp-5) var(--sp-6) var(--sp-6); border-radius: var(--rad-l); background: var(--surface); box-shadow: var(--shadow-sheet); }
.search-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.search-modal__head h2 { font-family: var(--ff-body); font-size: var(--fz-body); font-weight: 600; }
.search--modal { width: 100%; height: 56px; padding-left: var(--sp-5); gap: var(--sp-3); border-color: var(--line-strong); }
.search--modal input { font-size: var(--fz-body); }
.search--modal .btn { width: auto; height: 44px; margin: 0 5px 0 0; padding: 0 var(--sp-5); border-radius: var(--rad-pill); background: var(--forest); color: var(--cream); font-size: var(--fz-ui); font-weight: 500; display: inline-flex; place-items: center; }
.search--modal .btn:hover { background: var(--forest-deep); }
.search--modal:focus-within { border-color: var(--line-strong); outline-offset: 3px; }   /* one ring, not two: the border stays grey, the 2 px ring carries focus */
.search-modal__hint { margin-top: var(--sp-3); font-size: var(--fz-meta); color: var(--ink-soft); }
.search-modal__close { display: grid; margin-right: calc(-1 * var(--sp-2)); place-items: center; width: var(--target-min); height: var(--target-min); border-radius: var(--rad-pill); color: var(--ink); }
.search-modal__close:hover { background: var(--page); }
.search-modal__close svg { width: 20px; height: 20px; }
@media (max-width: 599px) { .search-modal__card { margin-top: var(--sp-6); padding: var(--sp-5); } .search--modal .btn { display: none; } }
/* the category row is ONE scrolling line at every width: hidden scrollbar, right-edge fade, snap per chip */
.catnav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); }
.catnav__title { flex: none; font-size: var(--fz-meta); font-weight: 600; color: var(--ink); padding-right: var(--sp-1); }
.catnav ul { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--sp-6)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--sp-6)), transparent); }
.catnav ul::-webkit-scrollbar { display: none; }
.catnav ul::after { content: ""; flex: none; width: var(--sp-6); }
.catnav li { flex: none; scroll-snap-align: start; }
.catnav .chip { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fz-meta); background: transparent; border-color: color-mix(in srgb, var(--line-strong) 55%, transparent); }   /* quiet pills: no fill, half-strength hairline, 13 px (client, 2026-09-15) */
.catnav .chip:hover { background: var(--chrome); }
.catnav .chip--on { background: var(--chip-active); border-color: var(--chip-active); color: var(--on-chip-active); }

/* site menu — a compact popover under the button, not a full-width drawer (client, 2026-09-15) */
.sitemenu { display: none; position: absolute; left: calc(-1 * var(--sp-2) - 2px); top: calc(100% + var(--sp-2)); z-index: var(--z-raised); width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-m); padding: var(--sp-2) 0 var(--sp-3); box-shadow: var(--shadow-sheet); }
.sitemenu:target, .sitemenu.is-open { display: block; }
.sitemenu:target { scroll-margin-top: var(--sp-9); } /* the no-JS :target scroll keeps the logo row on screen */
.sitemenu__head { display: flex; justify-content: space-between; align-items: center; padding: 6px var(--sp-4) 6px; font-size: var(--fz-meta); color: var(--ink-soft); }
.sitemenu__close { display: grid; place-items: center; width: 32px; height: 32px; margin-right: calc(-1 * var(--sp-2)); border: 0; background: transparent; border-radius: var(--rad-pill); font-size: var(--fz-h3); line-height: 1; text-decoration: none; color: var(--ink); }
.sitemenu__close:hover { background: var(--page); }
.sitemenu__site a { display: block; padding: 10px var(--sp-4); font-size: var(--fz-ui); font-weight: 500; color: var(--ink); text-decoration: none; transition: background-color var(--t-colour) var(--ease-out); }
.sitemenu__site a:hover { background: var(--page); }
.sitemenu__site a[aria-current="page"] { font-weight: 600; }
.sitemenu__nap { margin: var(--sp-2) var(--sp-4) 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fz-meta); color: var(--ink-soft); line-height: var(--lh-lead); }

/* 600–899: the search narrows to 200 px and the chips take the phone size (32 px, --fz-meta), so the seven
   fit in two rows beside it — at 240 / 34 px the list was down to ~350 px and wrapped to four (QA 2026-09-15) */
@media (max-width: 899px) {
  .search { width: 200px; }
  .catnav .chip { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fz-meta); }
}
@media (max-width: 799px) {
  .hdr__top { gap: var(--sp-3); }
}
@media (max-width: 599px) {
  .hdr { --hdr-top-h: 56px; }
  .hdr__top { grid-template-columns: auto 1fr auto; column-gap: var(--sp-3); }
  .hdr__logo { justify-self: start; }
  .hdr__logo img { height: 28px; }
  .hdr__menu, .cart { height: 40px; width: 40px; }
  .hdr__menu { margin-left: calc(-1 * var(--sp-2)); }
  .cart { padding: 0 6px; border-color: transparent; margin-right: -6px; }
  .cart .cart__total { display: none; }
  .cart__count { left: var(--sp-4); }
  /* 56 + 1 + 4 + 44 + 48 = 153 px — under the 156 px mobile ceiling (00 kill-list); the board's 8 + 8 made 165 */
  .hdr__shop { gap: var(--sp-2); height: 48px; }
  .catnav { height: 100%; }
  .hdr__search { margin-right: calc(-1 * var(--sp-1)); }
  .catnav .chip { min-height: 32px; padding: 0 var(--sp-4); font-size: var(--fz-meta); }
  .sitemenu { left: calc(-1 * var(--sp-2)); width: min(300px, calc(100vw - 2 * var(--sp-4))); }
}

/* ---------- day control (mode pills + 7 day cells + Kita data) ---------- */
.fulfil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.modes { display: inline-flex; gap: 6px; padding: 3px; border-radius: var(--rad-pill); background: var(--chrome); }
.modes label { position: relative; display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--sp-4); border-radius: var(--rad-pill); font-size: var(--fz-ui); font-weight: 500; cursor: pointer; transition: background-color var(--t-colour), color var(--t-colour); transition-timing-function: var(--ease-out); }
.modes input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.modes label:has(input:checked) { background: var(--chip-active); color: var(--on-chip-active); }
.modes label:has(input:focus-visible) { outline: var(--focus-ring-w) solid var(--focus); outline-offset: var(--focus-ring-offset); }
.days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.days::-webkit-scrollbar { display: none; }
.day { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 88px; height: 52px; padding: 0 6px;
  border-radius: var(--rad-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer;
  font-variant-numeric: tabular-nums lining-nums; line-height: 1.15; transition: background-color var(--t-colour), border-color var(--t-colour), transform var(--t-press); transition-timing-function: var(--ease-out); }
.day:active { transform: scale(.97); }
.day input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.day__d { font-size: var(--fz-ui); font-weight: 500; }
.day__cap { font-size: var(--fz-tag); color: var(--ink-soft); margin-top: 2px; }
.day:has(input:checked) { background: var(--added); border-color: var(--added); color: var(--added-ink); }
.day:has(input:checked) .day__cap { color: var(--added-ink); }
.day:has(input:disabled) { border-color: var(--line); color: var(--ink-muted); cursor: not-allowed; }
.day:has(input:disabled) .day__cap { color: var(--ink-muted); }
.day:has(input:disabled) input { cursor: not-allowed; }
.day:has(input:focus-visible) { outline: var(--focus-ring-w) solid var(--focus); outline-offset: var(--focus-ring-offset); }
.day--more { text-decoration: none; color: var(--ink); border-style: dashed; }
.day--more:hover { background: var(--page); }
.fulfil__submit { font-size: var(--fz-meta); }
html:not(.no-js) .fulfil__submit { display: none; } /* with JS a change commits through the sheet model */
.promise { font-size: var(--fz-ui); max-width: 60ch; line-height: var(--lh-body); color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.promise b { font-weight: 500; color: var(--ink); }

/* ---------- product card (02 / 03 §2) — no box, no edge, no shadow ---------- */
.shelf + .promise { margin-top: var(--sec-y-half); }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
.card { display: flex; flex-direction: column; min-width: 0; }
.card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--rad-m); background: var(--photo-ground); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: 6px; padding-top: var(--sp-4); }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 22px; }
.card__producer { font-size: var(--fz-meta); color: var(--ink-soft); line-height: var(--lh-tight); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__name { font-family: var(--ff-body); font-size: var(--fz-name); font-weight: 500; line-height: var(--lh-tight); text-wrap: pretty; }
.card__name a { text-decoration: none; }
.card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card__pack { font-size: var(--fz-meta); color: var(--ink-soft); }
.card__pack .low { color: var(--ink-soft); } /* 03 §7: the low-stock fact stays, the third accent goes */
.card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sp-2); margin-top: var(--sp-1); font-variant-numeric: tabular-nums lining-nums; }
.price { font-size: var(--fz-price); font-weight: 600; line-height: 1.2; }
.price--sale { color: var(--tomato-ink); }
.was { font-size: var(--fz-meta); color: var(--ink-muted); text-decoration: line-through; }
.unit { font-size: var(--fz-meta); color: var(--ink-soft); }
.card__add { margin-top: var(--sp-3); }

/* ---------- stepper (pill on --forest; the add button becomes it in place) ---------- */
.stepper { display: flex; align-items: stretch; height: 40px; border-radius: var(--rad-pill); background: var(--forest); color: var(--cream); overflow: hidden; }
.stepper button { width: 40px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; transition: background-color var(--t-colour), transform var(--t-press); transition-timing-function: var(--ease-out); }
.stepper button:hover { background: var(--forest-deep); }
.stepper button:active { transform: scale(.94); }
.stepper button svg { width: 16px; height: 16px; }
.stepper input { flex: 1; min-width: 0; width: 3ch; border: 0; background: transparent; color: inherit; text-align: center; font-size: var(--fz-ui); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: var(--focus-ring-w) solid var(--butter); outline-offset: -3px; }
.stepper button:focus-visible { outline: var(--focus-ring-w) solid var(--butter); outline-offset: -3px; }

@media (max-width: 899px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); } }
@media (max-width: 699px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* list rows on a phone — 96 px image, text, add control right (03 §2) */
@media (max-width: 599px) {
  .shelf--list { grid-template-columns: 1fr; gap: 0; }
  /* the add form lives inside .card__body, so the body is the grid that puts it right and centred
     (the board's "media body add" areas targeted a grandchild and never applied — 03 §7 spirit) */
  .shelf--list .card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
  .shelf--list .card:first-child { border-top: 0; padding-top: 0; }
  .shelf--list .card__media { width: 96px; }
  .shelf--list .card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: 2px; padding-top: 0; align-items: center; }
  .shelf--list .card__body > * { grid-column: 1; }
  .shelf--list .card__add { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: center; }
  .shelf--list .btn--add { width: auto; min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fz-meta); }
  .shelf--list .stepper { height: 36px; }
  .shelf--list .stepper button { width: 34px; }
  .shelf--list .stepper input { width: 2.5ch; }
  /* the producer line keeps at least 12ch; a chip that does not fit beside it wraps under it */
  .shelf--list .card__top { flex-wrap: wrap; justify-content: flex-start; row-gap: 2px; }
  .shelf--list .card__producer { flex: 1 1 auto; min-width: 12ch; }
  /* the unit price is its own line on every row, so a sale row has the same anatomy as its neighbours */
  .shelf--list .unit { flex: 1 0 100%; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ---------- sections — the one rhythm (01 §3.2) ---------- */
.sec { padding-block: var(--sec-y); }
.sec + .sec:not([class*="band--"]) { padding-top: 0; } /* two light sections share one gap */
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.sec__head p { margin-top: var(--sp-2); color: var(--ink-soft); max-width: 48ch; }
.band--chrome .card__media { background: var(--page); }
.band--chrome { background: var(--chrome); }
.band--tint { background: var(--band-tint); }
.band--dark { background: var(--band-dark); color: var(--on-footer); }
.band--dark .muted { color: var(--on-footer-muted); }
.band--dark .fresh { color: var(--fresh); }
.band--dark .link { color: var(--on-footer); }
.band--dark .link:hover { color: var(--fresh); }

/* ---------- producers — "Šią savaitę" list, not a logo wall ---------- */
.farms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
.farm { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-5); align-items: start; }
.farm__pic { width: 96px; aspect-ratio: 1; border-radius: var(--rad-m); overflow: hidden; background: var(--photo-ground); }
.farm__pic img { width: 100%; height: 100%; object-fit: cover; }
.farm h3 { font-family: var(--ff-body); font-size: var(--fz-h3); font-weight: 600; line-height: var(--lh-tight); }
.farm__place { font-size: var(--fz-meta); color: var(--ink-soft); }
.farm__week { margin-top: 6px; font-size: var(--fz-body); line-height: var(--lh-body); }
.farm__week b { font-weight: 500; }
@media (max-width: 799px) { .farms { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ---------- story band (dark, same ink as the footer — still ONE band) ---------- */
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-9); align-items: center; }
.story__pic { border-radius: var(--rad-m); overflow: hidden; background: var(--band-card); aspect-ratio: 3 / 2; }
.story__pic img { width: 100%; height: 100%; object-fit: cover; }
.story__text { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 44ch; }
.story__text .lead { color: var(--on-footer-muted); }
.story__nap { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); font-size: var(--fz-ui); font-variant-numeric: tabular-nums lining-nums; }
.story__nap dt { color: var(--on-footer-muted); }
.story__nap dd { margin: 0; }
@media (max-width: 799px) { .story { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ---------- footer — the dark band; pattern via mask + background-color ---------- */
.foot { position: relative; background: var(--footer); color: var(--on-footer); }
.foot .wrap { position: relative; z-index: var(--z-raised); }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-8); padding-block: var(--sec-y) var(--sec-y-half); }
.foot__brand { display: flex; flex-direction: column; gap: var(--sp-3); --bs-logo-leaf: var(--fresh); }
.foot__brand svg { height: 26px; width: 197px; display: block; color: var(--on-footer); margin-bottom: var(--sp-2); }
.foot__legalid { margin-top: var(--sp-3); font-size: var(--fz-meta); color: var(--on-footer-muted); line-height: 1.5; }
.foot__brand .moment { max-width: 20ch; }
.foot h3 { font-family: var(--ff-body); font-size: var(--fz-ui); font-weight: 600; line-height: var(--lh-tight); margin-bottom: var(--sp-3); }
.foot li { margin-bottom: 6px; }
.foot a { color: var(--on-footer); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--fresh); }
.foot address { font-style: normal; line-height: 1.6; font-variant-numeric: tabular-nums lining-nums; }
.foot__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); margin-inline-start: calc((22px - var(--target-min)) / 2); }   /* glyph edge on the text edge */
.foot__social a { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); border-radius: var(--rad-s); }
.foot__social a:hover { background: var(--footer-line); }
.foot__social svg { width: 22px; height: 22px; }   /* the header icon size (.hdr__icon svg) */
.foot__legal { border-top: 1px solid var(--footer-line); padding-block: var(--sp-5) var(--sp-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-5); font-size: var(--fz-meta); color: var(--on-footer-muted); }
.foot__legal ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.foot__legal a { color: var(--on-footer-muted); }
@media (max-width: 799px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .foot__brand { grid-column: 1 / -1; } }

/* ---------- live region / toast ---------- */
.live { position: fixed; left: 50%; bottom: max(var(--sp-4), env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(8px); z-index: var(--z-live);
  padding: 10px var(--sp-4); border-radius: var(--rad-s); background: var(--added); color: var(--added-ink); font-size: var(--fz-ui); font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fade) var(--ease-out), transform var(--t-fade) var(--ease-out); }
.live.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- cart drawer + scrim: promoted to css/cart.css on 2026-09-15 (P-cart) — every page loads it ---------- */