/* ==========================================================================
   Brastos Sodas — cart · v4 (PLAN-B3 §1–§2, 02-components.md §3.11–§3.12, §5.2)
   --------------------------------------------------------------------------
   Loaded by EVERY page (tools/gen-shared.js head()): the side cart and the
   scrim live in every generated page, so their rules cannot sit in a page
   stylesheet. The drawer block was promoted here from base.css on 2026-09-15
   (owner: P-cart); the cart page (krepselis.html) rules are the second half.

   Tokens only (01 §11). Animates transform / opacity only, ≤ --t-fade (200 ms),
   --ease-out; reduced motion zeroes the durations in tokens.css. The drawer is
   the one surface that leaves the plane (--shadow-sheet).
   ========================================================================== */

/* ---------- scrim + drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); opacity: 0; visibility: hidden;
  transition: opacity var(--t-fade) var(--ease-out), visibility var(--t-fade); }
.scrim.is-on { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-sheet); width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sheet); border-radius: var(--rad-l) 0 0 var(--rad-l);
  transform: translateX(100%); visibility: hidden; transition: transform var(--t-fade) var(--ease-out), visibility var(--t-fade); }
/* the open state transitions transform only, so visibility flips on the same frame and focus() lands
   inside the dialog at once; the closed state keeps the visibility transition so it hides after the slide */
.drawer[data-open] { transform: none; visibility: visible; transition: transform var(--t-fade) var(--ease-out); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 64px; padding: 0 var(--sp-3) 0 var(--sp-5); border-bottom: 1px solid var(--line); flex: none; }
.drawer__head h2 { font-family: var(--ff-body); font-size: var(--fz-h3); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__count { font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.drawer__close { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); border: 0; border-radius: var(--rad-pill); background: transparent; color: var(--ink); flex: none; transition: background-color var(--t-colour) var(--ease-out); }
.drawer__close:hover { background: var(--page); }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-5); }
.drawer__foot { flex: none; padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); }
/* `Tęsti apsipirkimą` closes the drawer — a text control, not a third rectangle (02 §3.11) */
.drawer__continue { min-height: var(--target-min); border: 0; background: transparent; color: var(--ink); font-size: var(--fz-ui); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-colour) var(--ease-out); }
.drawer__continue:hover { color: var(--forest); }

/* ≤ 599: a bottom sheet with the filter sheet's geometry — 64 px of page kept, rounded top (QA2 design Y4) */
@media (max-width: 599px) {
  .drawer { left: 0; top: auto; width: 100%; max-height: calc(100dvh - var(--sp-8)); border-radius: var(--rad-l) var(--rad-l) 0 0; transform: translateY(100%); }
  .drawer[data-open] { transform: none; }
}

/* ---------- the selector at the top of the drawer (PLAN-B3 §1) ----------
   Orderday's server-rendered `full` mount (data-orderday-collapsible): it opens collapsed to the sentence +
   `Keisti` and expands in place itself (hidden toggles — no layout animation). */
.cart-fulfil { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }

/* ---------- rows (drawer 72 px · page 96 px) ---------- */
.cart-rows { display: flex; flex-direction: column; }
.cart-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.cart-row:first-child { border-top: 0; padding-top: 0; }
.cart-row__img { width: 72px; aspect-ratio: 1; border-radius: var(--rad-m); overflow: hidden; background: var(--photo-ground); }
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cart-row__name { font-size: var(--fz-name); font-weight: 500; line-height: var(--lh-tight); }
.cart-row__name a { text-decoration: none; }
.cart-row__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-row__producer { font-size: var(--fz-meta); color: var(--ink-soft); line-height: var(--lh-tight); }
.cart-row__meta { font-size: var(--fz-meta); color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.cart-row__main .stepper { margin-top: var(--sp-1); width: max-content; }
.cart-row__main .stepper input { width: 4ch; }
.cart-row__end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: var(--sp-1); }   /* × top-right, the line total on the stepper's line (QA2 design G1) */
.cart-row__sum { font-size: var(--fz-price); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.cart-row__rm { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) 0 0; border: 0; border-radius: var(--rad-pill); background: transparent; color: var(--ink-soft); text-decoration: none; transition: background-color var(--t-colour), color var(--t-colour); transition-timing-function: var(--ease-out); }
.cart-row__rm:hover { background: var(--page); color: var(--ink); }
.cart-row__rm svg { width: 16px; height: 16px; }
/* the conflict row: chip (rendered by cart.js from Orderday's availability(), or painted by Orderday into [data-orderday-conflict]) + the reason + the fix actions */
.cart-row__why { font-size: var(--fz-tag); color: var(--ink-soft); line-height: var(--lh-tight); }
.cart-row__fix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); }
.cart-row__fixbtn { min-height: calc(var(--target-min) - var(--sp-3)); padding: 0; border: 0; background: transparent; color: var(--link); font-size: var(--fz-meta); font-weight: 500; text-decoration: underline; text-underline-offset: .15em; transition: color var(--t-colour) var(--ease-out); }
.cart-row__fixbtn:hover { color: var(--link-hover); }
.cart-row.is-conflict .cart-row__img img { opacity: .55; }

/* ---------- empty state: one sentence + one action (02 §5.2) ---------- */
.cart-empty { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; padding-block: var(--sp-4); }
.cart-empty p { color: var(--ink-soft); }
.cart-empty .btn { margin-top: var(--sp-1); }

/* ---------- threshold sentence + meter (cart.js; delivery mode only) ---------- */
.cart__meter { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fz-meta); color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.cart__meter b { color: var(--ink); font-weight: 600; }
.cart__meter-bar { height: var(--sp-1); border-radius: var(--rad-pill); background: var(--line); overflow: hidden; }
.cart__meter-bar > span { display: block; height: 100%; background: var(--forest); transform-origin: left; transition: transform var(--t-fade) var(--ease-out); }

/* ---------- totals ---------- */
.cart__totals { display: grid; gap: var(--sp-1); }
.cart__totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.cart__totals dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.cart__sum { font-weight: 500; }
.cart__sum dd { font-size: var(--fz-price); font-weight: 600; }
.cart__fee { font-size: var(--fz-ui); color: var(--ink-soft); }
.cart__grand { font-weight: 500; padding-top: var(--sp-1); border-top: 1px solid var(--line); }
.cart__grand dd { font-size: var(--fz-price); font-weight: 600; }
.cart__vat { font-size: var(--fz-meta); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.cart__gate { font-size: var(--fz-meta); color: var(--ink-soft); } /* the gate reason, repeated directly above the disabled CTA */

/* ==========================================================================
   cart page — krepselis.html (PLAN-B3 §2)
   ========================================================================== */
.cartpg .crumbs { margin-bottom: var(--sp-4); }   /* the breadcrumb itself is base.css .crumbs */

.cartpg { padding-block: var(--sec-y-half) var(--sec-y); }
.cartpg h1 { font-size: var(--fz-h2); line-height: var(--lh-h2); margin-bottom: var(--sp-5); }
.cartpg h1 .h1__count { font-family: var(--ff-body); font-size: var(--fz-lead); font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cartpg__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); align-items: start; }
.cartpg__lines { min-width: 0; }
.cart-rows--page .cart-row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-4); padding-block: var(--sp-4); }
.cart-rows--page .cart-row__img { width: 96px; }
.cart-rows--page .cart-row__name { font-size: var(--fz-body); }
.cart-rows--page .cart-row__sum { font-size: var(--fz-price); }
.cartpg__continue { margin-top: var(--sp-5); }
/* no-JS only: the quantity fields post as a plain form, and each row's × is a real link; the −/+ buttons are
   JS-only and hidden, so only the working number field shows (QA2 cro 9) */
html:not(.no-js) .nojs-only { display: none; }
.no-js .js-only { display: none; }
html.no-js .cart-rows--page .stepper button { display: none; }
.cart-update { margin-top: var(--sp-4); }

/* the summary card: on --chrome, radius --rad-l, holds the selector `full` (PLAN-B3 §2) */
.cartpg__sum { background: var(--chrome); border-radius: var(--rad-l); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.cartpg__sum > h2 { font-family: var(--ff-body); font-size: var(--fz-h3); font-weight: 600; }
.cartpg__sum .cart-fulfil { padding-bottom: var(--sp-3); margin-bottom: 0; }
.cartpg__sum .cart-fulfil__host:empty { display: none; }
.cartpg__sum .cart__meter { margin-bottom: 0; }
.cartpg__sum .cart__vat { margin-bottom: 0; }
.cartpg__sum .cart__totals { margin-top: var(--sp-1); }
.cartpg__sum .btn--primary { margin-top: var(--sp-2); }
.cartpg__sum .cartpg__continue { margin-top: 0; align-self: center; }
/* related row under the columns (`Galbūt dar reikia`) */
.cartpg__more { margin-top: var(--sec-y); }

@media (max-width: 899px) {
  .cartpg__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 599px) {
  .cart-rows--page .cart-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--sp-3); padding-block: var(--sp-3); }
  .cart-rows--page .cart-row__img { width: 72px; }
  .cartpg__sum { padding: var(--sp-4); border-radius: var(--rad-m); }
}