/* Formularz zamówień dostaw — Ekoweki */
:root {
  --green-950: #173020;
  --green-900: #24452d;
  --green-800: #315a3a;
  --green-700: #3d6b46;
  --green-100: #edf3ec;
  /* Wspólne tło i białe karty dla nabiału krowiego oraz koziego. */
  --cream: #f5f7f2;
  --paper: #ffffff;
  --ink: #1e2720;
  --muted: #667066;
  --line: rgba(36, 69, 45, .14);
  --shadow: 0 24px 70px rgba(23, 48, 32, .12);
  --catalog-accent: var(--green-700);
  --catalog-accent-mid: var(--green-800);
  --catalog-accent-dark: var(--green-900);
  --catalog-accent-soft: var(--green-100);
  --radius-lg: 30px;
  --container: 1180px;
  --motion-fast: 150ms;
  --motion-ui: 220ms;
  --motion-accordion: 240ms;
  --motion-ease: cubic-bezier(.22,.72,.22,1);
}

/* Kolor akcentu zależny od wybranego rodzaju nabiału — te same odcienie
   co w cennikach (Generator_Cennikow_v_3.1/HURT/asortyment.txt: krowie
   = zielen, kozi/owczy = ochra), żeby klient uczył się skojarzenia raz.
   Ma obejmować całą stronę, nie tylko nagłówki kategorii — inaczej
   zielone akcenty gdzie indziej kłócą się z ochrą. */
body[data-catalog="krowie"] {
  --catalog-accent: #3B6D11;
  --catalog-accent-mid: #2C4A10;
  --catalog-accent-dark: #173404;
  --catalog-accent-soft: #EAF3DE;
}
body[data-catalog="kozie"] {
  --catalog-accent: #7D5210;
  --catalog-accent-mid: #5A3B0C;
  --catalog-accent-dark: #331F03;
  --catalog-accent-soft: #F4EEDF;
}

/* Globalnie, nie tylko na nagłówku kategorii — każdy dotykalny element
   (serce, stepper +/-, karta wariantu…) bez tego potrafi na telefonie
   pokazać natywny podświetlony prostokąt w kolorze systemowego akcentu
   urządzenia (np. zielonym, jeśli taki ma ustawiony telefon) zanim zdąży
   zadziałać nasza własna stylistyka. */
* { -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; transform: translateY(-160%); padding: 10px 16px; border-radius: 8px; background: #fff; color: #111; }
.skip-link:focus { transform: translateY(0); }

.order-hero { position: relative; overflow: hidden; padding: 70px 0 72px; background: var(--cream); }
.order-hero::after { content: ""; position: absolute; width: 520px; height: 520px; right: -190px; top: -220px; border: 1px solid rgba(36,69,45,.11); border-radius: 50%; box-shadow: 0 0 0 70px rgba(36,69,45,.027), 0 0 0 140px rgba(36,69,45,.018); pointer-events: none; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--green-700); font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.section-kicker { color: var(--catalog-accent); }
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.08; text-wrap: balance; }
h1 { max-width: 760px; margin-top: 15px; font-size: clamp(42px, 5vw, 68px); letter-spacing: -.045em; }
h2 { font-size: 32px; letter-spacing: -.025em; }
.order-form { padding: 66px 0 80px; }
.catalog, .customer-card, .summary-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 16px 45px rgba(23,48,32,.055); }
.catalog { padding: 32px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.section-heading h2 { margin-top: 7px; color: var(--green-950); }
.section-heading p { max-width: 610px; margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.section-heading--compact { margin-bottom: 23px; }
.selected-badge { flex: 0 0 auto; min-width: 80px; padding: 10px 12px; border-radius: 14px; background: var(--catalog-accent-soft); color: var(--catalog-accent-dark); text-align: center; }
.selected-badge strong, .selected-badge span { display: block; }
.selected-badge strong { font-size: 22px; line-height: 1; }
.selected-badge span { margin-top: 3px; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
/* Ten sam impuls skali co przy pojedynczym produkcie (stepper-pulse),
   zastosowany do licznika "X wybranych" — potwierdza zmianę liczby pozycji. */
.selected-badge.is-count-updated { animation: selected-badge-pulse 260ms var(--motion-ease); }
@keyframes selected-badge-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.catalog-tools { display: flex; gap: 12px; align-items: center; margin-top: 27px; }
.search-box { position: relative; flex: 1; }
.search-box svg { position: absolute; top: 50%; left: 15px; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: #738078; stroke-width: 1.8; pointer-events: none; }
.search-box input { width: 100%; height: 48px; padding: 0 44px 0 44px; border: 1px solid rgba(36,69,45,.16); border-radius: 14px; outline: none; background: #fff; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.search-box input:focus { border-color: color-mix(in srgb, var(--catalog-accent-mid) 48%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--catalog-accent-mid) 8%, transparent); }
/* type="search" dorzuca własny krzyżyk przeglądarki — obok naszego dawał dwa
   przyciski czyszczenia naraz. Zostaje tylko .search-clear. */
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-box input::-ms-clear { display: none; width: 0; height: 0; }
.search-clear { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: #657067; cursor: pointer; font-size: 22px; line-height: 1; }
.search-clear:hover { background: var(--catalog-accent-soft); color: var(--catalog-accent-mid); }
.search-clear:focus-visible { outline: 0; background: var(--catalog-accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--catalog-accent-mid) 35%, transparent); }
.text-button { flex: 0 0 auto; min-height: 45px; padding: 0 4px; border: 0; background: transparent; color: var(--catalog-accent); cursor: pointer; font-size: 12px; font-weight: 800; }
.text-button:disabled { color: #a5aaa6; cursor: default; }
.catalog-search-status { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.product-filter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.product-filter[hidden] { display: none; }
/* Kontrolka segmentowa: szary tor z białą pigułką na aktywnym filtrze.
   Zaokrąglenie należy do toru, a nie do skrajnych przycisków, więc liczba
   widocznych filtrów nie wpływa na rogi. */
.product-filter__company {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: #eef1ee;
}
.product-filter__button {
  position: relative;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  /* Etykiety niewybranych zakładek były jasnoszare (kontrast 4,5:1);
     ciemniejszy odcień podnosi go do ~6,7:1 i wyraźnie je przybliża. */
  color: #4a574f;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color var(--motion-ui, 220ms) ease, color var(--motion-ui, 220ms) ease, box-shadow var(--motion-ui, 220ms) ease;
}
.product-filter__button:hover { color: var(--catalog-accent-dark); background: rgba(255,255,255,.72); }
/* "Moje stałe" liczone są z historii na tym urządzeniu, więc dostają ten sam
   ciepły akcent co ulubione — to również dane prywatne, nie katalogowe. */
.product-filter__button--regular .product-filter__count { background: #f0e4d4; color: #7a5a30; }
.product-filter__button--regular.is-active .product-filter__count { background: var(--green-100); color: var(--green-800); }
/* Aktywna zakładka różni się nie tylko białym tłem, ale i grubością pisma —
   na jasnym torze sama pigułka to za słaby sygnał. */
.product-filter__button.is-active,
.product-filter__button.is-active:hover {
  background: #fff;
  color: var(--catalog-accent-dark);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(23,48,32,.10);
}
.product-filter__button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--catalog-accent-mid) 45%, transparent);
}
.product-filter__button[hidden] { display: none; }
.filter-label--mobile { display: none; }
.product-filter__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #dfe5df;
  color: #445247;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.product-filter__button.is-active .product-filter__count {
  background: var(--green-100);
  color: var(--green-800);
}
.product-filter__favorite-icon {
  flex: 0 0 auto;
  color: #C08592;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.product-filter__button--favorite.is-active .product-filter__favorite-icon { color: #B05D6D; font-size: 0; }
.product-filter__button--favorite.is-active .product-filter__favorite-icon::after { content: "\2665"; font-size: 16px; }
.product-filter__favorite-copy { display: inline-flex; align-items: center; line-height: 1.1; }
.product-filter__favorite-copy > span { font-size: 13px; font-weight: 600; }
.product-filter__button--favorite .product-filter__count { background: #f6e6ea; color: #8d5461; }
.product-filter__button--favorite.is-active .product-filter__count { background: var(--catalog-accent-soft); color: var(--catalog-accent-dark); }
.product-filter__button:active { transform: scale(.975); }
.product-groups.is-filter-switching { animation: filter-switch-in 190ms var(--motion-ease, ease-out); }
@keyframes filter-switch-in {
  from { opacity: .55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.product-groups { display: grid; gap: 11px; margin-top: 18px; }
/* Nagłówek zawsze ma zielonkawe tło — na białej karcie sama obwódka za słabo
   go oddziela od listy produktów. Stan rozwinięty jest o ton mocniejszy
   i ma grubszy pasek przy lewej krawędzi. */
/* Bez overflow:hidden na tym elemencie — psuje position:sticky nagłówka
   kategorii (klasyczny problem CSS: sticky nie działa, gdy najbliższy
   scrollowalny przodek ma overflow inny niż visible). Zaokrąglenie rogów
   przejmują osobno summary (góra) i .product-list (dół). */
.product-group { border: 1px solid rgba(36,69,45,.16); border-radius: 14px; background: var(--paper); }
.product-group--species-break { margin-top: 24px; }
.product-group[open] { border-color: color-mix(in srgb, var(--catalog-accent-mid) 32%, transparent); box-shadow: 0 10px 26px rgba(23,48,32,.055); }
.product-group[hidden] { display: none; }
.product-group summary {
  position: sticky;
  top: 0;
  z-index: 3;
  /* Wymusza własną warstwę kompozycji — bez tego Safari na iOS potrafi na
     ułamek klatki podczas przewijania pokazać spod sticky nagłówka pasek
     .product-list (patrz niżej), zanim domaluje właściwą pozycję. */
  will-change: transform;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: color-mix(in srgb, var(--catalog-accent-soft) 45%, white);
  border-radius: 13px;
  /* Pasek po lewej to inset box-shadow, nie osobny element — inset shadow
     zawsze automatycznie podąża za border-radius tego samego pudełka (to
     wbudowana własność box-shadow, nie wymaga overflow/clip-path), więc
     zaokrąglenie działa pewnie w każdej przeglądarce. Osobny element
     (::after) próbował to samo robić przez clip-path/overflow, ale oba
     w WebKicie potrafią nie przycinać zawartości elementu z position:sticky
     — stąd realnie brak zaokrąglenia mimo poprawnego kodu w Chrome.
     Cena: pasek może być tylko pełnej wysokości (bez efektu "wyrastania"
     od góry), bo inset shadow nie ma pojęcia częściowej wysokości. */
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--catalog-accent-mid) 18%, transparent);
  transition: background-color .18s ease, box-shadow var(--motion-accordion) var(--motion-ease);
  /* Bez tego dotknięcie nagłówka kategorii na telefonie podświetlało cały
     przycisk natywnym, systemowym prostokątem (szaro-niebieski "rozbłysk"
     na ułamek sekundy) zanim zdążyła zadziałać nasza własna, płynna
     tranzycja tła. */
  -webkit-tap-highlight-color: transparent;
}
.product-group[open] summary { border-radius: 13px 13px 0 0; }
.product-group summary::-webkit-details-marker { display: none; }
.product-group summary:hover { background: color-mix(in srgb, var(--catalog-accent-soft) 65%, white); }
.product-group summary:active { background: color-mix(in srgb, var(--catalog-accent-soft) 80%, white); }
.product-group[open] summary {
  background: var(--catalog-accent-soft);
  box-shadow: inset 4px 0 0 var(--catalog-accent);
}
.product-group__title { min-width: 0; flex: 1; }
/* Ta sama czerń co nazwy produktów niżej — kolor motywu (zielony/ochra) już
   mówi, w jakim jesteśmy katalogu przez pasek i tło, więc sam tytuł nie musi
   go powtarzać i lepiej kontrastuje z otwartym, kolorowym nagłówkiem. */
.product-group__title strong { display: block; color: #000; font-size: 15px; line-height: 1.25; }
.product-group summary .product-group__title > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  color: #6b766f;
  font-size: 11.5px;
  line-height: 1.3;
}
/* Instrukcja ważenia jest potrzebna dopiero po rozwinięciu — w zwiniętym
   nagłówku rozdymała wiersz do czterech linii. */
.product-group:not([open]) .product-group__hint { display: none; }

/* Ile pozycji kryje kategoria — bez tego wszystkie nagłówki wyglądają tak samo
   i nie wiadomo, czy warto rozwijać. */
.group-count {
  flex: 0 0 auto;
  width: 30px;
  padding: 2px 0;
  border-radius: 999px;
  background: #fff;
  color: #5a6a5e;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.product-group[open] .group-count { background: #fff; color: var(--catalog-accent-mid); }

.group-chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-left: 2px;
  border-right: 2px solid #8a948c;
  border-bottom: 2px solid #8a948c;
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease, border-color .18s ease;
}
.product-group[open] .group-chevron {
  border-color: var(--catalog-accent-mid);
  transform: rotate(-135deg) translate(-2px, -2px);
}

.group-selected {
  flex: 0 0 auto;
  width: 30px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: var(--catalog-accent-dark);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.group-selected:empty { display: none; }
.product-list { overflow: hidden; border-top: 1px solid rgba(36,69,45,.11); border-radius: 0 0 13px 13px; background: var(--paper); }
/* Ciąg dalszy paska z nagłówka — tu zwykły border-left wystarczy (bez
   sztuczek z inset shadow), bo ten element nie jest sticky, więc
   overflow:hidden + border-radius poprawnie przycina róg na każdej
   przeglądarce. */
.product-group[open] .product-list {
  border-left: 4px solid var(--catalog-accent);
  /* Bez tego szara linia (border-top bazowy, patrz wyżej) przecinała
     zielony pasek dokładnie na styku z nagłówkiem. */
  border-top: none;
}
.bulk-quantity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  min-height: 64px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid rgba(36,69,45,.12);
  background: var(--paper);
}
.bulk-quantity-row[hidden] { display: none; }
.bulk-quantity-row--with-card { padding-right: 21px; }
.bulk-quantity-row > span {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}
.product-variant-cluster {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(var(--variant-count), max-content);
  align-items: stretch;
  overflow: hidden;
  margin: 10px 2px;
  border: 1px solid color-mix(in srgb, var(--catalog-accent-mid) 22%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--catalog-accent-mid) 22%, transparent);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 3px 10px rgba(23,48,32,.025);
}
.product-variant-cluster[hidden] { display: none; }
.product-variant-cluster + .product-variant-cluster { margin-top: 13px; }
.product-variant-cluster:not(.product-variant-cluster--single-as-product):not([hidden]) + .product-row:not([hidden]) {
  border-top: 1px solid rgba(36,69,45,.075);
}
/* Nagłówek klastra: nazwa | podpowiedź | serce w stałej kolumnie po prawej. */
.product-variant-cluster__title {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-right: 1px solid rgba(36,69,45,.10);
  color: color-mix(in srgb, var(--catalog-accent-dark) 35%, black);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}
.product-variant-cluster__heading {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.product-variant-cluster__name { min-width: 0; }
.product-variant-cluster__title > .product-favorite { grid-column: 2; justify-self: center; }
/* Klaster wagowy nie ma ani podpowiedzi, ani serca w nagłówku — serce stoi niżej,
   przy gramaturze, w tej samej kolumnie co w pozostałych wierszach. */
.product-weight-cluster .product-weight-option.product-row--has-favorite {
  grid-template-columns: minmax(0, 1fr) 24px auto;
  column-gap: 10px;
}
/* Podpowiedź powtarzała się przy każdym klastrze, a warianty i tak nazywają
   same siebie ("250 ml", "ok. 1 kg"). Zostaje wyłącznie dla czytników ekranu,
   którym seria gołych gramatur bez kontekstu czyta się gorzej. */
.product-variant-cluster__hint {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.product-variant-cluster .product-row {
  grid-template-columns: auto auto;
  gap: 10px;
  min-height: 64px;
  padding: 8px 12px;
  border-bottom: 0;
  background: var(--paper);
}
.product-variant-cluster .product-name { justify-self: start; text-align: left; white-space: nowrap; font-size: 13px; }
.product-weight-cluster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-weight-cluster > .product-variant-cluster__title {
  grid-column: 1 / -1;
  min-height: 58px;
  border-right: 0;
  border-bottom: 1px solid rgba(36,69,45,.10);
}
.product-group__hint {
  display: block;
  margin-top: 4px;
  color: #5f7268;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.product-group__hint b { color: var(--catalog-accent-mid); font-weight: 750; }
.product-weight-cluster .product-weight-option {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch;
  align-items: center;
  padding-inline: 18px;
}
/* Obie opcje mają ten sam układ: etykieta u góry, dopisek pod spodem —
   dzięki temu lewa i prawa połowa klastra trzymają wspólną linię. */
.product-weight-cluster .product-weight-standard-label,
.product-weight-cluster .product-weight-entry { align-self: center; }
.product-weight-cluster .product-weight-standard-label small {
  margin: 3px 0 0;
  color: #7d877f;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}
.product-weight-standard-label > span { display: block; }
.product-weight-quantity {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.product-weight-quantity > span {
  display: none;
}
.product-weight-entry {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  gap: 2px 8px;
  color: #000;
  font-size: 11px;
  font-weight: 650;
}
.product-weight-entry__label { white-space: nowrap; }
.product-weight-entry small {
  grid-column: 1 / -1;
  color: #7d877f;
  font-size: 9px;
  font-weight: 600;
}
.product-weight-entry__field {
  height: 34px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(36,69,45,.16);
  border-radius: 10px;
  background: #fff;
}
.product-weight-entry__field:focus-within {
  border-color: color-mix(in srgb, var(--catalog-accent-mid) 48%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--catalog-accent-mid) 8%, transparent);
}
.product-weight-entry__field input {
  width: 72px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--green-950);
  font-size: 13px;
  font-weight: 750;
  text-align: right;
}
.product-weight-entry__field input::placeholder { color: #a1a7a2; font-size: 10px; font-weight: 600; }
.product-weight-entry__field b {
  padding-right: 8px;
  color: #667168;
  font-size: 10px;
  font-weight: 700;
}
.product-weight-entry.is-invalid .product-weight-entry__field {
  border-color: rgba(164,62,48,.55);
  box-shadow: 0 0 0 3px rgba(164,62,48,.07);
}
.product-weight-entry.is-invalid small { color: #a33c2e; }
/* Kolumny wariantów muszą pomieścić etykietę razem ze zwiniętym stepperem —
   przy minmax(0, 1fr) "1l Plastik" łamał się w środku słowa. */
.product-variant-cluster--many { grid-template-columns: repeat(var(--variant-count), minmax(132px, 1fr)); }
.product-variant-cluster--many .product-variant-cluster__title {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 1px solid rgba(36,69,45,.10);
}
.product-variant-cluster--many .product-row {
  grid-template-columns: auto auto;
  justify-content: end;
  gap: 12px;
}
@media (min-width: 1051px) {
  .product-variant-cluster--visible-one,
  .product-variant-cluster--visible-two {
    grid-template-columns: minmax(220px, 1fr) repeat(var(--visible-variant-count), max-content);
  }
  .product-variant-cluster--visible-one .product-variant-cluster__title,
  .product-variant-cluster--visible-two .product-variant-cluster__title {
    grid-column: auto;
    border-right: 0;
    border-bottom: 0;
  }
  .product-variant-cluster--visible-one .product-row,
  .product-variant-cluster--visible-two .product-row {
    grid-template-columns: auto auto;
    justify-content: end;
  }
  .product-variant-cluster--visible-one .product-row:not([hidden]),
  .product-variant-cluster--visible-two .product-row:not([hidden]) {
    border-left: 1px solid rgba(36,69,45,.10);
  }
  .product-variant-cluster--visible-many {
    grid-template-columns: repeat(var(--visible-variant-count), minmax(0, 1fr));
  }
  .product-variant-cluster--visible-many .product-variant-cluster__title {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid rgba(36,69,45,.10);
  }
  .product-variant-cluster--visible-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Zwinięty stepper zajmuje 46 px zamiast 122, więc etykieta wariantu dostaje
     tę odzyskaną przestrzeń — "1l Plastik" nie łamie się już w środku słowa.
     justify-content: end (a nie center) przypina "+" do prawej krawędzi
     kolumny na stałe — rozwinięcie licznika rośnie w lewo, w stronę etykiety,
     więc przycisk "+" nie ucieka spod kursora po kliknięciu (tak samo jak
     w układach z 1-2 wariantami, patrz wyżej). */
  .product-variant-cluster--visible-four .product-row:not([hidden]) {
    grid-template-columns: minmax(0, 74px) max-content;
    justify-content: end;
    gap: 6px;
    padding: 8px 6px;
  }
  /* Rozwinięty stepper (− liczba +) jest w tym układzie odrobinę węższy niż
     w pozostałych — dzięki temu razem z etykietą mieści się w kolumnie
     i po dodaniu sztuki nic się nie przesuwa ani nie chowa. */
  .product-variant-cluster--visible-four .stepper:not(.is-empty) {
    grid-template-columns: 32px 44px 32px;
  }
  .product-variant-cluster--visible-four .stepper:not(.is-empty) button { width: 32px; }
  .product-variant-cluster--visible-four .stepper:not(.is-empty) input { width: 44px; }
  .product-variant-cluster--visible-four .product-name {
    width: 100%;
    max-width: 74px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 11.5px;
    line-height: 1.15;
    text-align: center;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite-short {
    flex-direction: row;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite-short > .product-favorite {
    order: -1;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite-split {
    display: grid;
    grid-template-columns: 18px auto;
    grid-template-areas:
      "variant-heart variant-first"
      "variant-second variant-second";
    column-gap: 2px;
    row-gap: 0;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite-split .product-variant-label--split {
    display: contents;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite-split .product-variant-label__first {
    grid-area: variant-first;
    justify-self: start;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite-split .product-variant-label__second {
    grid-area: variant-second;
    justify-self: center;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite-split > .product-favorite {
    grid-area: variant-heart;
    justify-self: end;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite .product-favorite {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    margin: 0;
    font-size: 14px;
  }
  .product-variant-cluster--visible-four .product-name--variant-favorite .product-favorite[aria-pressed="true"] span::after { font-size: 14px; }
  /* Dokładnie 5 wariantów: 3 kolumny, więc naturalny porządek siatki daje
     3 w pierwszym rzędzie i 2 w drugim (bez żadnej dodatkowej logiki —
     wystarczy, że plik z produktami wymienia je w kolejności rosnącej
     pojemności, kończąc na dwóch wariantach 1-litrowych). */
  .product-variant-cluster--visible-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-variant-cluster--visible-five .product-variant-cluster__title {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
  .product-variant-cluster--visible-five .product-row:not([hidden]) {
    border-top: 1px solid rgba(36,69,45,.10);
  }
  .product-variant-cluster--visible-five .product-row--variant-first-column {
    border-left: 0;
  }
  .product-variant-cluster--visible-five-plus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-variant-cluster--visible-five-plus .product-variant-cluster__title {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
  .product-variant-cluster--visible-five-plus .product-row:not([hidden]) {
    border-top: 1px solid rgba(36,69,45,.10);
  }
  .product-variant-cluster--visible-five-plus .product-row--variant-first-column {
    border-left: 0;
  }
}
.product-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; min-height: 64px; padding: 10px 14px 10px 18px; border-bottom: 1px solid rgba(36,69,45,.075); }
.product-row--before-separator { border-bottom-color: transparent; }
.product-groups.is-filtered-view .product-row--before-separator { border-bottom-color: rgba(36,69,45,.075); }
.product-row:last-child { border-bottom: 0; }
.product-row[hidden] { display: none; }
.product-separator { height: 0; margin: 0; border-top: 2px solid rgba(36,69,45,.20); background: transparent; }
.product-separator::after { display: none; }
.product-separator[hidden] { display: none; }
.product-row.is-selected { background: color-mix(in srgb, var(--catalog-accent-soft) 22%, var(--paper)); }
.product-row.is-selected .stepper { border-color: var(--catalog-accent); }
.product-name { min-width: 0; color: color-mix(in srgb, var(--catalog-accent-dark) 35%, black); font-size: 14px; font-weight: 650; line-height: 1.35; }
/* Serce ma własną kolumnę wiersza, więc stoi zawsze w tym samym miejscu —
   niezależnie od długości nazwy i od tego, czy plakietka zawinęła się niżej. */
.product-row--has-favorite { grid-template-columns: minmax(0, 1fr) 24px auto; column-gap: 10px; }
.product-row__favorite { display: grid; place-items: center; align-self: center; }
.product-row__favorite > .product-favorite,
.product-variant-cluster__title > .product-favorite {
  width: 24px;
  height: 24px;
  margin: 0;
  font-size: 15px;
}
.product-row__favorite > .product-favorite[aria-pressed="true"] span::after,
.product-variant-cluster__title > .product-favorite[aria-pressed="true"] span::after { font-size: 15px; }
.product-favorite {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin: -5px 0 -5px 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9aa29b;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  vertical-align: -.08em;
  transition: color .16s ease, background-color .16s ease, transform .15s ease;
}
.product-favorite:hover { background: #f8e8ec; color: #A33E50; }
.product-favorite:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(163,62,80,.22); }
.product-favorite:active { transform: scale(.9); }
.product-favorite[aria-pressed="true"] { background: #f8e8ec; color: #B53650; }
.product-favorite[aria-pressed="true"] span { font-size: 0; }
.product-favorite[aria-pressed="true"] span::after { content: "♥"; font-size: 18px; }
/* Krótki "pop" przy zaznaczaniu/odznaczaniu ulubionego — tylko na przycisku,
   który faktycznie kliknięto (patrz zamowienia.js). */
.product-favorite.is-pop { animation: favorite-pop 320ms var(--motion-ease); }
@keyframes favorite-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  55% { transform: scale(.92); }
  100% { transform: scale(1); }
}
.product-name--variant-favorite {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.product-name--variant-favorite .product-favorite {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0 0 0 2px;
  font-size: 16px;
}
.product-name--variant-favorite .product-favorite[aria-pressed="true"] span::after { font-size: 16px; }
.product-variant-label--split {
  display: inline-flex;
  align-items: baseline;
  gap: .25em;
  line-height: 1.12;
}
.product-variant-label__first {
  display: inline;
  white-space: nowrap;
}
.product-variant-label__second { display: inline; }
.product-favorite--single-variant { flex: 0 0 auto; margin-left: 6px; }
/* Nazwa może się zawinąć, ale ikona i Nowość pozostają obok i na wspólnej osi. */
.product-name__line { display: inline-flex; align-items: center; max-width: 100%; vertical-align: middle; }
.product-name__text { min-width: 0; }
.product-name__line > .product-flavor-emoji { flex: 0 0 auto; }
/* Wspólny rozmiar i krój oznaczeń produktów. */
.product-status-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 19px;
  vertical-align: middle;
  margin-left: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.product-new-badge {
  background: #A3253A;
  color: #fff;
}
.product-group-new-badge { display: none; }
.product-groups.is-all-filter-active .product-group-new-badge { display: none; }
/* Wstążka dostępności odróżnia się kształtem od oznaczenia nowości. */
.product-scarce-badge {
  margin-left: 12px;
  padding: 0 8px 0 12px;
  border-radius: 0;
  background: #FAC775;
  color: #412402;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
}
.product-name small { display: block; margin-top: 3px; color: #5f7268; font-size: 10px; font-weight: 700; }
/* Medal z konkursu serowarskiego ArcySer 2026 — osobna linijka pod nazwą,
   żeby wyróżnienie nie ginęło wśród plakietek "Nowość". */
.product-medal-note { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 800; }
.product-medal-note--gold { color: #9a6b0c; }
.product-medal-note--silver { color: #6b6f76; }
.product-variant-cluster__name .product-medal-note { margin-top: 4px; }
/* min-width: max-content jest tu obowiązkowe. Przez overflow:hidden minimalna
   automatyczna szerokość steppera wynosi 0, więc w ciasnej kolumnie siatki
   ścieżka "auto" ściskała go poniżej 124 px i obcinała ostatnią kolumnę —
   czyli przycisk "+". Teraz w razie ciasnoty ustępuje etykieta, nie stepper. */
.stepper { display: grid; grid-template-columns: 36px 50px 36px; align-items: center; min-width: max-content; overflow: hidden; border: 1px solid rgba(36,69,45,.18); border-radius: 12px; background: var(--catalog-accent-soft); }
.stepper button { width: 36px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--catalog-accent-dark); cursor: pointer; font-size: 20px; line-height: 1; touch-action: manipulation; }
.stepper button:hover:not(:disabled) { background: var(--catalog-accent-soft); }
.stepper button:disabled { color: #b9beb9; cursor: default; }
.stepper button:focus-visible { outline: 0; background: var(--catalog-accent-soft); }
.stepper input { width: 50px; height: 38px; padding: 0 2px; border: 0; border-inline: 1px solid rgba(36,69,45,.10); outline: 0; background: rgba(255,255,255,.78); color: var(--green-950); text-align: center; font-size: 13px; font-weight: 850; }
.stepper:focus-within { border-color: color-mix(in srgb, var(--catalog-accent-mid) 48%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--catalog-accent-mid) 8%, transparent); }
/* Niewybrany produkt pokazuje sam "+". Liczba i minus pojawiają się dopiero
   wtedy, gdy jest co zmniejszać — dzięki temu w liście widać wyłącznie
   pozycje faktycznie zamówione. */
.stepper.is-empty { grid-template-columns: 46px; background: #fff; }
.stepper.is-empty > [data-minus],
.stepper.is-empty > input { display: none; }
.stepper.is-empty > [data-plus] { width: 46px; color: var(--catalog-accent-mid); }
.stepper.is-empty > [data-plus]:hover:not(:disabled) { background: var(--catalog-accent-soft); }
.stepper.is-empty > [data-plus]:disabled { color: #c2c7c2; }
.form-error { min-height: 22px; margin: 12px 0 0; color: #a33c2e; font-size: 12px; font-weight: 700; }
.customer-card, .summary-card { padding: 26px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: grid; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field > span { color: #48534a; font-size: 11px; font-weight: 800; }
.field b { color: #9c4638; }
.field small { color: #899089; font-weight: 600; }
.field input, .field textarea { width: 100%; border: 1px solid rgba(36,69,45,.15); border-radius: 12px; outline: 0; background: #fff; color: var(--ink); font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease; }
.field input { height: 44px; padding: 0 13px; }
.field textarea { min-height: 95px; padding: 11px 13px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: color-mix(in srgb, var(--catalog-accent-mid) 48%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--catalog-accent-mid) 7%, transparent); }
.field input:user-invalid { border-color: rgba(164,62,48,.55); }
.remember-customer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 13px;
  border: 1px solid rgba(36,69,45,.12);
  border-radius: 12px;
  background: color-mix(in srgb, var(--catalog-accent-soft) 55%, var(--paper));
}
.remember-customer__option {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #48534a;
  cursor: pointer;
}
.remember-customer__option input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--catalog-accent);
}
.remember-customer__option span { display: grid; gap: 2px; }
.remember-customer__option strong { font-size: 11px; font-weight: 800; }
.remember-customer__option small { color: #788179; font-size: 9.5px; font-weight: 600; line-height: 1.35; }
.remember-customer__clear {
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #80601F;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}
.remember-customer__clear:hover { color: #5f4617; }
.remember-customer__status {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0 0 0 28px;
  color: #6e786f;
  font-size: 9.5px;
  font-weight: 600;
}
.privacy-note { margin: 15px 0 0; color: #858c86; font-size: 10.5px; }

.summary-card h2 { margin-top: 5px; color: var(--green-950); font-size: 28px; }
.summary-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.summary-count { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--catalog-accent-soft); color: var(--catalog-accent-dark); font-size: 10px; font-weight: 750; }
/* Lista pozycji nie ma własnego scrolla — na ekranie weryfikacji zamówienia
   klient musi widzieć wszystko, co zamawia, bez zagnieżdżonego przewijania. */
.summary-list { margin-top: 17px; }
.summary-list__row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.summary-list__row:last-child { border-bottom: 0; }
.summary-list__row span { color: #000; font-size: 13px; font-weight: 600; line-height: 1.4; }
/* Kompaktowy stepper w podsumowaniu — ta sama mechanika co w liście produktów,
   tylko mniejszy, bo mieści się w wąskiej kolumnie obok nazwy. */
.stepper--summary {
  display: grid;
  grid-template-columns: 30px 40px 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(36,69,45,.18);
  border-radius: 10px;
  background: var(--catalog-accent-soft);
}
.stepper--summary button {
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--catalog-accent-dark);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.stepper--summary button:hover:not(:disabled) { background: var(--catalog-accent-soft); }
.stepper--summary button:disabled { color: #b9beb9; cursor: default; }
.stepper--summary input {
  width: 100%;
  height: 30px;
  padding: 0;
  border: 0;
  border-inline: 1px solid rgba(36,69,45,.10);
  outline: 0;
  background: #fff;
  color: var(--green-950);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stepper--summary:focus-within { border-color: color-mix(in srgb, var(--catalog-accent-mid) 48%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--catalog-accent-mid) 8%, transparent); }

.summary-list__row strong { color: var(--catalog-accent-mid); font-size: 13px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Był tu stały rgba(237,243,236,.34) — czyli zawsze lekko zielone tło
   co drugiej linii, niezależnie od wybranego nabiału. */
.summary-list__row:nth-child(even) { background: color-mix(in srgb, var(--catalog-accent-soft) 34%, transparent); }
/* Blok pod listą to jedna karta: wiersz z wartością, pod nim (gdy klient jest
   rozpoznany) wiersz "Informacja", a poniżej granicy żółty wiersz z minimum
   (.min-order-notice, dalej w pliku). Kolor mają tylko ten ostatni i nic poza nim. */
.summary-net-total {
  margin-top: 14px;
  padding: 13px 16px;
  overflow: hidden;
  border: 1px solid #d3d8c8;
  border-radius: 14px;
  background: #fff;
  color: var(--green-950);
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}
.summary-net-total .net-total-amount { font-size: 16px; }
.summary-net-total strong { font-variant-numeric: tabular-nums; }
.summary-net-total small { display: block; margin-top: 3px; color: var(--catalog-accent-mid); font-size: 11px; font-weight: 600; }
.net-total-reveal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  margin: 0;
  padding: 2px 4px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: default;
  border-radius: 6px;
}
.net-total-amount { filter: none; }
.net-total-hint { display: none; }
.submit-button { position: relative; width: 100%; min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; padding: 0 48px; border: 0; border-radius: 13px; background: var(--catalog-accent-dark); color: #fff; cursor: pointer; font-size: 13px; font-weight: 850; transition: transform .15s ease, background .15s ease; }
.submit-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--catalog-accent-mid); }
.submit-button:disabled { opacity: .48; cursor: default; }
.submit-button span:last-child { position: absolute; right: 18px; font-size: 19px; }
.form-status { min-height: 0; margin: 9px 0 0; color: #a43e30; font-size: 11px; font-weight: 700; }

.help-strip { padding: 27px 0; border-top: 1px solid var(--line); background: var(--cream); }
.help-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.help-strip strong { display: block; margin-top: 2px; color: var(--green-950); font-size: 13px; }

.help-strip__inner--credits {
  justify-content: center;
  gap: 7px 18px;
  flex-wrap: wrap;
  text-align: center;
}
.help-strip__inner--credits p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.help-strip__inner--credits strong {
  display: inline;
  margin: 0;
  color: var(--green-950);
  font-size: inherit;
}
/* Znacznik wydania — celowo o ton słabszy niż reszta stopki: przydaje się
   przy zgłaszaniu uwag ("mam wersję 3.83"), ale nie ma konkurować z podpisem.
   Pełna szerokość, żeby zawsze stał w osobnej linii pod kredytami. */
.help-strip__build {
  flex-basis: 100%;
  color: #8d968f;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.changelog-link {
  border: none;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.changelog-link:hover { color: var(--catalog-accent-mid); }

.changelog-entries { margin-top: 14px; display: grid; gap: 16px; }
.changelog-entry { padding-top: 14px; border-top: 1px solid rgba(36,69,45,.11); }
.changelog-entry:first-child { padding-top: 0; border-top: 0; }
.changelog-entry__meta { display: flex; align-items: baseline; gap: 8px; }
.changelog-entry__meta strong { color: var(--green-950); font-size: 13.5px; }
.changelog-entry__meta span { color: #8d968f; font-size: 11.5px; font-variant-numeric: tabular-nums; }

.review-dialog--changelog .changelog-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.review-dialog--changelog .changelog-list li {
  padding-left: 18px;
  position: relative;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}
.review-dialog--changelog .changelog-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--catalog-accent-mid);
}
.review-dialog--changelog .changelog-list strong { color: var(--green-950); }
/* Lista nowości może być długa i przewijana, ale przycisk "Zamknij" ma
   zostać zawsze widoczny i klikalny — panel dzielimy na nagłówek (stały),
   przewijaną listę i przypięty pasek przycisku. */
.review-dialog--changelog .review-dialog__panel { display: flex; flex-direction: column; overflow: hidden; }
.review-dialog--changelog .changelog-entries { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.review-dialog--changelog .ask-actions { justify-content: flex-end; flex: 0 0 auto; padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(36,69,45,.11); }

.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.noscript { position: fixed; z-index: 999; right: 15px; bottom: 15px; left: 15px; padding: 14px; border-radius: 12px; background: #8c3228; color: #fff; text-align: center; }

.review-dialog { width: min(650px, calc(100% - 28px)); max-height: min(88vh, 800px); padding: 0; border: 0; border-radius: 25px; background: transparent; color: var(--ink); box-shadow: var(--shadow); }
.review-dialog::backdrop { background: rgba(17,29,20,.62); backdrop-filter: blur(5px); }
.review-dialog__panel { position: relative; max-height: min(88vh, 800px); overflow: auto; padding: 31px; border-radius: 25px; background: var(--paper); }
.review-dialog h2 { margin-top: 6px; color: var(--green-950); font-size: 36px; }
.success-panel { display: grid; justify-items: center; text-align: center; }
.success-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 50%; background: var(--catalog-accent-soft); color: var(--catalog-accent-mid); font-size: 29px; font-weight: 900; }
.success-panel h2 { margin-top: 7px; }
.success-panel > p:not(.success-confirmation) { max-width: 450px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.success-new-order { width: min(100%, 300px); min-height: 48px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--catalog-accent-dark); color: #fff; cursor: pointer; font-size: 13px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 18px rgba(44,79,52,.16); }
.success-new-order:hover { background: var(--catalog-accent-mid); color: #fff; }

@media (max-width: 1050px) {
  .product-variant-cluster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-variant-cluster__title {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 1px solid rgba(36,69,45,.10);
  }
  .product-variant-cluster .product-row:nth-of-type(even) { border-left: 0; }
}

@media (max-width: 900px) {
  .product-weight-cluster { grid-template-columns: 1fr; }
  .product-weight-cluster .product-weight-option { border-left: 0; }
  .product-weight-cluster .product-weight-option + .product-weight-option {
    border-top: 1px solid rgba(36,69,45,.075);
  }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .catalog { padding: 20px 15px; border-radius: 20px; }
  .catalog-tools { align-items: stretch; flex-direction: column; gap: 3px; }
  .text-button { align-self: flex-end; min-height: 35px; }
  .product-group summary { min-height: 55px; padding-inline: 12px; }
  .product-group__title strong { font-size: 14px; }
  .bulk-quantity-row { min-height: 70px; padding: 11px 10px 11px 13px; gap: 9px; }
  .bulk-quantity-row--with-card { padding-right: 13px; }
  .bulk-quantity-row > span { font-size: 12px; }
  .product-row { min-height: 70px; padding: 11px 10px 11px 13px; gap: 9px; }
  .product-variant-cluster { grid-template-columns: 1fr; margin: 9px 2px; border-radius: 12px; }
  .product-variant-cluster__title { min-height: 70px; padding: 11px 13px; gap: 10px; font-size: 13px; }
  .product-variant-cluster .product-row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 70px;
    padding: 11px 10px 11px 13px;
    border-left: 0;
  }
  .product-variant-cluster .product-row + .product-row { border-top: 1px solid rgba(36,69,45,.075); }
  .product-variant-cluster .product-name { white-space: normal; }
  .product-weight-cluster .product-weight-option { min-width: 0; }
  .product-weight-cluster .product-weight-option--custom { min-height: 78px; }
  /* Na wąskim ekranie kolumna serca jest węższa, żeby nazwy produktów
     miały możliwie dużo miejsca i rzadziej zawijały się do drugiej linii. */
  .product-row--has-favorite { grid-template-columns: minmax(0, 1fr) 22px auto; column-gap: 6px; }
  .product-row__favorite > .product-favorite,
  .product-variant-cluster__title > .product-favorite { width: 22px; height: 22px; font-size: 14px; }
  .product-row__favorite > .product-favorite[aria-pressed="true"] span::after,
  .product-variant-cluster__title > .product-favorite[aria-pressed="true"] span::after { font-size: 14px; }
  /* Warianty z własnym sercem (gramatury i pojemności) też trzymają jedną kolumnę:
     etykieta zostaje po lewej, serce dosuwa się do prawej krawędzi swojej komórki. */
  .product-variant-cluster .product-row:has(.product-name--variant-favorite) { column-gap: 6px; }
  .product-variant-cluster .product-name--variant-favorite {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .product-variant-cluster .product-name--variant-favorite > .product-favorite {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0 0 0 auto;
    font-size: 14px;
  }
  .product-variant-cluster .product-name--variant-favorite > .product-favorite[aria-pressed="true"] span::after { font-size: 14px; }
    .product-weight-cluster .product-weight-option.product-row--has-favorite {
    grid-template-columns: minmax(0, 1fr) 22px auto;
    column-gap: 6px;
  }
  .product-variant-cluster__title {
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    row-gap: 4px;
    column-gap: 10px;
  }
  .product-variant-cluster__title > .product-favorite { grid-column: 2; grid-row: 1; }
  .product-weight-entry { grid-template-columns: 1fr; gap: 2px; }
  .product-weight-entry small { grid-column: auto; font-size: 8.5px; }
  .product-weight-entry__field { width: fit-content; }
  .product-weight-entry__field input { width: 70px; font-size: 16px; }
  .product-name { font-size: 13px; }
  .stepper { grid-template-columns: 35px 46px 35px; }
  .stepper input { width: 46px; font-size: 16px; }
  .field input, .field textarea { font-size: 16px; }
  .field-grid { grid-template-columns: 1fr; gap: 13px; }
  .field--wide { grid-column: auto; }
  .remember-customer { grid-template-columns: 1fr; }
  .remember-customer__clear { justify-self: start; margin-left: 28px; }
  .help-strip__inner { align-items: flex-start; flex-direction: column; }
}

/* Jeden widoczny wariant zachowuje się jak zwykły artykuł. */
.product-variant-cluster--single-as-product {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 64px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(36,69,45,.075);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}
.product-variant-cluster + .product-variant-cluster--single-as-product { margin-top: 0; }
.product-variant-cluster--single-as-product:has(.product-row.is-selected) { background: color-mix(in srgb, var(--catalog-accent-soft) 22%, var(--paper)); }
.product-variant-cluster--single-as-product .product-variant-cluster__title {
  grid-column: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 12px;
  align-self: center;
  min-width: 0;
  min-height: 0;
  padding: 10px 0 10px 18px;
  border: 0;
  background: transparent;
  font-size: 14px;
}
/* Nazwa | gramatura | serce — wszystkie trzy w jednym wierszu siatki, inaczej
   auto-placement wypycha gramaturę do drugiej linii. */
.product-variant-cluster--single-as-product .product-variant-cluster__heading { grid-column: 1; grid-row: 1; }
.product-variant-cluster--single-as-product .product-favorite--single-variant { grid-column: 3; grid-row: 1; }
.product-variant-cluster--single-as-product .product-variant-cluster__title::after {
  content: attr(data-single-variant);
  grid-column: 2;
  grid-row: 1;
  min-width: 58px;
  justify-self: end;
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
}
.product-variant-cluster--single-as-product .product-group-new-badge { display: inline-flex; }
.product-variant-cluster--single-as-product .product-row:not([hidden]) { display: contents; }
.product-variant-cluster--single-as-product .product-row:not([hidden]) .product-name { display: none; }
.product-variant-cluster--single-as-product .product-row:not([hidden]) .stepper { margin-right: 14px; }

@media (max-width: 760px) {
  .product-variant-cluster--single-as-product {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 70px;
    margin: 0;
    border-radius: 0;
  }
  .product-variant-cluster--single-as-product .product-variant-cluster__title {
    grid-template-columns: minmax(0, 1fr) auto 22px;
    gap: 6px;
    min-height: 0;
    padding: 11px 0 11px 13px;
    font-size: 13px;
  }
  .product-variant-cluster--single-as-product .product-variant-cluster__title::after { min-width: 46px; }
  .product-variant-cluster--single-as-product .product-row:not([hidden]) .stepper { margin-right: 10px; }
}

/* Linie { i } w pliku produktów tworzą jedną wspólną kartę. */
.product-card-block {
  overflow: hidden;
  margin: 10px 2px;
  border: 1px solid color-mix(in srgb, var(--catalog-accent-mid) 22%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--catalog-accent-mid) 22%, transparent);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 3px 10px rgba(23,48,32,.025);
}
.product-card-block[hidden] { display: none; }
.product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) {
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}
.product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) > .product-variant-cluster__title {
  min-height: 64px;
  margin-inline: 0;
  border-bottom-color: rgba(36,69,45,.09);
  background: var(--paper);
}
.product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) .product-row {
  min-height: 64px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}
.product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) .product-row.is-selected {
  background: color-mix(in srgb, var(--catalog-accent-soft) 22%, var(--paper));
}
.product-card-block > .product-row--standalone {
  min-height: 64px;
  padding-inline: 18px 14px;
  border-bottom: 1px solid rgba(36,69,45,.09);
  background: var(--paper);
}
.product-card-block > .product-row--standalone:last-child,
.product-card-block > .product-variant-cluster--single-as-product:last-child { border-bottom: 0; }
.product-card-block > .product-row--standalone.is-selected {
  background: color-mix(in srgb, var(--catalog-accent-soft) 22%, var(--paper));
}
.product-card-block > .product-variant-cluster + .product-variant-cluster,
.product-card-block > .product-row + .product-variant-cluster { border-top: 1px solid rgba(36,69,45,.09); }

@media (max-width: 760px) {
  .product-card-block { margin: 9px 2px; border-radius: 12px; }
  .product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) {
    gap: 0;
    padding: 0;
  }
  .product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) > .product-variant-cluster__title {
    min-height: 70px;
    margin-inline: 0;
  }
  .product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) .product-row {
    min-height: 70px;
    padding: 11px 10px 11px 13px;
  }
  .product-card-block > .product-row--standalone {
    min-height: 70px;
    padding: 11px 10px 11px 13px;
  }
}


/* Kompaktowe, nowoczesne okno potwierdzenia */
/* Pytanie o zapamiętanie danych — ten sam szkielet co okno potwierdzenia,
   tylko węższy, bo mieści dwa zdania i dwa przyciski. */
.review-dialog--ask { width: min(440px, calc(100% - 28px)); }
.review-dialog--ask .ask-panel { padding: 28px 28px 24px; text-align: left; }
.review-dialog--ask h2 { margin: 6px 0 0; font-size: 26px; }
.ask-lead { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ask-button {
  flex: 1 1 150px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ask-button--primary { border: 0; background: var(--catalog-accent-mid); color: #fff; }
.ask-button--primary:hover { background: var(--catalog-accent-dark); }
.ask-button--ghost { border: 1px solid rgba(36,69,45,.22); background: transparent; color: var(--catalog-accent-mid); }
.ask-button--ghost:hover { background: var(--catalog-accent-soft); border-color: rgba(36,69,45,.34); }
.ask-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--catalog-accent-mid) 28%, transparent); }

.review-dialog--success {
  width: min(390px, calc(100% - 28px));
  max-height: min(82vh, 560px);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20,43,29,.24);
}
.review-dialog--success .review-dialog__panel {
  max-height: min(82vh, 560px);
  padding: 20px 20px 18px;
  border: 1px solid rgba(53,91,63,.10);
  border-radius: 20px;
  background: linear-gradient(180deg, #fbfdfb 0%, #f6f8f5 100%);
}
.review-dialog--success .success-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--catalog-accent-mid) 14%, transparent);
  background: var(--catalog-accent-soft);
  color: var(--catalog-accent-dark);
  font-size: 22px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--catalog-accent-mid) 8%, transparent);
}
.review-dialog--success .section-kicker {
  color: #718078;
  font-size: 9px;
  letter-spacing: .12em;
}
.review-dialog--success h2 {
  max-width: 320px;
  margin-top: 5px;
  color: var(--catalog-accent-dark);
  font-size: 27px;
  line-height: 1.04;
}
.review-dialog--success .success-confirmation {
  margin-top: 8px;
  color: var(--catalog-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
}
.review-dialog--success .success-new-order {
  width: 100%;
  max-width: 320px;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--catalog-accent-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--catalog-accent-mid) 16%, transparent);
}
.review-dialog--success .success-new-order:hover {
  background: var(--catalog-accent-mid);
  color: #fff;
}
@media (max-width: 480px) {
  .review-dialog--success { width: min(360px, calc(100% - 24px)); }
  .review-dialog--success .review-dialog__panel { padding: 18px 16px 16px; }
  .review-dialog--success h2 { font-size: 25px; }
  .review-dialog--success .success-confirmation { font-size: 21px; }
}

/* ===== Wersja krokowa / mobile-first ===== */
.order-hero--compact {
  padding: 20px 0;
}
.order-hero--compact::after {
  width: 270px;
  height: 270px;
  right: -150px;
  top: -155px;
}
.order-schedule {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(175px, .82fr) repeat(3, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(36,69,45,.12);
  border-radius: 18px;
  background: rgba(251,252,250,.78);
}
/* Delikatny, rozmyty blask tylko zaraz po wejściu na stronę — TYLKO na
   kafelkach "Nabiał kozi/owczy" i "Nabiał krowi" (nie na nagłówku ani na
   "Realizacja zamówień"), na przemian: gdy jeden gaśnie, drugi się zapala.
   Blask jest DO WEWNĄTRZ (inset) z dużym rozmyciem i bez twardej krawędzi —
   poświata na zewnątrz byłaby ucięta przez overflow:hidden rodzica (który
   zaokrągla cały kafelek), więc w ogóle by się nie pokazała. Po kilku
   cyklach gaśnie na stałe i nie wraca przy zmianie kroku formularza. */
@media (prefers-reduced-motion: no-preference) {
  .order-schedule__item:not(.order-schedule__item--delivery) {
    animation: order-schedule-glow 2s ease-in-out 3;
  }
  .order-schedule__item:not(.order-schedule__item--delivery):nth-child(2) { animation-delay: 0s; }
  .order-schedule__item:not(.order-schedule__item--delivery):nth-child(3) { animation-delay: 1s; }
}
@keyframes order-schedule-glow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(224,168,0,0); }
  50% { box-shadow: inset 0 0 22px 0 rgba(224,168,0,.45); }
}
.order-schedule__heading,
.order-schedule__item {
  min-width: 0;
  padding: 13px 16px;
}
.order-schedule__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(237,243,236,.72);
}
.order-schedule__heading h1 {
  margin-top: 4px;
  font-size: clamp(21px, 2.3vw, 28px);
  letter-spacing: -.025em;
}
.order-schedule__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-left: 1px solid rgba(36,69,45,.10);
}
.order-schedule__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-100);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 17px;
  line-height: 1;
}
.order-schedule__item small,
.order-schedule__item strong {
  display: block;
}
.order-schedule__item small {
  color: #667066;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.order-schedule__item strong {
  margin-top: 2px;
  color: var(--green-950);
  font-size: 12.5px;
  line-height: 1.25;
}
.order-form--steps {
  padding: 30px 0 58px;
}
.step-shell {
  max-width: 840px;
}
.step-progress {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0 auto 22px;
  padding: 0 4px;
}
.step-progress__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a918b;
  cursor: pointer;
  text-align: center;
}
.step-progress__item:disabled { cursor: default; }
.step-progress__item span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(36,69,45,.15);
  border-radius: 50%;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}
.step-progress__item strong {
  font-size: 11px;
  font-weight: 800;
}
.step-progress__item.is-active { color: var(--catalog-accent-dark); }
.step-progress__item.is-active span {
  border-color: var(--catalog-accent-dark);
  background: var(--catalog-accent-dark);
  color: #fff;
}
.step-progress__item.is-complete { color: var(--catalog-accent); }
.step-progress__item.is-complete span {
  border-color: var(--catalog-accent-soft);
  background: var(--catalog-accent-soft);
  color: var(--catalog-accent-mid);
}
.order-step[hidden] { display: none !important; }
.customer-card--step,
.summary-card--step {
  padding: 30px;
}
.customer-card--step .section-heading p {
  max-width: 560px;
}
.step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 25px;
}
.step-actions--end { justify-content: flex-end; }
.step-next,
.step-back {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.step-next {
  position: relative;
  min-width: 250px;
  min-height: 54px;
  justify-content: center;
  padding: 0 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--catalog-accent-dark) 0%, var(--catalog-accent-mid) 55%, var(--catalog-accent) 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(35,69,45,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
.step-next span:first-child { letter-spacing: -.01em; }
.step-next span:last-child {
  position: absolute;
  right: 20px;
  font-size: 22px;
  line-height: 1;
  transition: transform var(--motion-fast) ease;
}
.step-next:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 14px 28px rgba(35,69,45,.24), inset 0 1px 0 rgba(255,255,255,.10);
}
.step-next:hover:not(:disabled) span:last-child { transform: translateX(3px); }
/* Wyłączony przycisk nie udaje aktywnego: traci wypełnienie i mówi, czego brakuje. */
.step-next:disabled {
  padding-inline: 26px;
  border: 1px solid rgba(36,69,45,.22);
  background: transparent;
  color: #6d7a71;
  cursor: default;
  box-shadow: none;
}
.step-next:disabled .step-next__arrow { opacity: .45; }
.step-next__count {
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step-next__arrow { margin-left: 10px; }
.step-back {
  border: 1px solid rgba(36,69,45,.17);
  background: transparent;
  color: var(--catalog-accent-mid);
}
.step-back:hover { background: var(--catalog-accent-soft); }
.summary-card--step {
  min-height: 0;
}
.summary-customer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.summary-customer div { min-width: 0; }
.summary-customer span,
.summary-customer strong { display: block; }
.summary-customer span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.summary-customer strong {
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--green-950);
  font-size: 11px;
  line-height: 1.4;
}
.summary-customer__wide { grid-column: 1 / -1; }
/* Komunikat przypisany do klienta jest częścią ramki z szacunkową wartością
   zamówienia, dzięki czemu informacja o przedpłacie i kwota są zawsze razem. */
.summary-customer-info {
  margin: 13px -16px -13px;
  padding: 13px 16px;
  border: 0;
  border-top: 1px solid #e1e5d8;
  background: transparent;
  color: #3a2f26;
  text-align: center;
}
.summary-customer-info__label {
  display: block;
  margin-bottom: 4px;
  color: #7a8272;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.summary-customer-info strong {
  display: block;
  color: #3a2f26;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
}
.summary-card--step .summary-list {
  margin-top: 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.step-actions--summary {
  align-items: stretch;
}
.step-actions--summary .submit-button {
  width: auto;
  min-width: 230px;
  margin-top: 0;
}
.step-back--dark {
  border-color: rgba(36,69,45,.17);
  color: var(--catalog-accent-mid);
}
.step-back--dark:hover {
  background: var(--catalog-accent-soft);
}

@media (max-width: 760px) {
  .order-hero--compact { padding: 12px 0; }
  .order-schedule {
    grid-template-columns: 1fr 1fr;
    border-radius: 15px;
  }
  .order-schedule__heading {
    grid-column: 1 / -1;
    padding: 9px 12px;
  }
  .order-schedule__heading .eyebrow {
    display: inline-flex;
    font-size: 9px;
    letter-spacing: .14em;
  }
  .order-schedule__heading .eyebrow::before { width: 22px; }
  .order-schedule__heading h1 { margin-top: 2px; font-size: 20px; }
  .order-schedule__item {
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 7px;
    padding: 9px 10px;
    border-top: 1px solid rgba(36,69,45,.10);
  }
  .order-schedule__heading + .order-schedule__item { border-left: 0; }
  .order-schedule__item--delivery {
    display: none;
  }
  .order-schedule__icon { width: 29px; height: 29px; font-size: 15px; }
  .order-schedule__item small { font-size: 9px; letter-spacing: .025em; }
  .order-schedule__item strong { font-size: 11.5px; }
  .order-form--steps { padding: 18px 0 40px; }
  .step-progress { gap: 6px; margin-bottom: 15px; }
  .step-progress__item { gap: 5px; }
  .step-progress__item span { width: 27px; height: 27px; }
  .step-progress__item strong { display: none; }
  .customer-card--step,
  .summary-card--step { padding: 20px 15px; border-radius: 20px; }
  .section-heading { gap: 12px; }
  .section-heading h2 { font-size: 27px; }
  .section-heading p { margin-top: 8px; font-size: 12px; }
  .selected-badge { min-width: 62px; padding: 8px 10px; }
  .selected-badge strong { font-size: 19px; }
  .product-groups { gap: 9px; }
  .step-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 20px;
  }
  /* Przyklejamy tylko listę produktów: krok 2 mieści się w niecałe dwa ekrany,
     a krok 3 w jeden — tam pasek zabierałby miejsce bez pożytku. */
  .order-step[data-step="1"] .step-actions {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 30;
    margin-inline: -7px;
    padding: 7px;
    border: 1px solid rgba(36,69,45,.12);
    border-radius: 18px;
    background: rgba(250,252,249,.93);
    box-shadow: 0 10px 28px rgba(28,58,36,.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .step-actions--end { display: block; }
  .step-next,
  .step-back,
  .step-actions--summary .submit-button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
  }
  .summary-customer { grid-template-columns: 1fr; }
  .summary-customer__wide { grid-column: auto; }
  .help-strip { padding: 22px 0; }
}
.order-form--steps h2 { color: var(--green-950); }

/* Niezależnie od szerokości ekranu widoczny jest zawsze tylko jeden krok. */
.order-form--steps .order-step { width: 100%; }
.order-form--steps .order-step.is-active { display: block; }
.catalog-type {
  margin: 26px 0 22px;
  padding: 0;
  border: 0;
}
.catalog-type legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--green-950);
  font-size: 13px;
  font-weight: 850;
}
.catalog-type__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.catalog-type__option {
  position: relative;
  display: block;
  cursor: pointer;
}
.catalog-type__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.catalog-type__option > span {
  min-height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 48px;
  border: 1.5px solid rgba(36,69,45,.23);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 4px 13px rgba(23,48,32,.055);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.catalog-type__icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(167,122,63,.16);
  color: var(--green-900);
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}
.catalog-type__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.catalog-type__option > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 17px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border: 1.5px solid rgba(36,69,45,.34);
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 4px #fff;
}
.catalog-type__option strong {
  color: var(--green-950);
  font-size: 14px;
}
/* Kolor podświetlenia po najechaniu ma odpowiadać rodzajowi nabiału TEGO
   przycisku, nie aktualnie wybranego typu — inaczej najechanie na "kozi"
   przy wybranym "krowim" świeciło się na zielono zamiast na ochrę. */
.catalog-type__option:has(input[value="krowie"]) {
  --option-hover-border: rgba(59,109,17,.42);
  --option-hover-bg: #EAF3DE;
}
.catalog-type__option:has(input[value="kozie"]) {
  --option-hover-border: rgba(125,82,16,.42);
  --option-hover-bg: #F4EEDF;
}
.catalog-type__option:hover > span {
  border-color: var(--option-hover-border, rgba(49,90,58,.42));
  background: var(--option-hover-bg, #f3f7f2);
}
.catalog-type__option input:checked + span {
  border-color: color-mix(in srgb, var(--catalog-accent) 72%, transparent);
  background: var(--catalog-accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--catalog-accent) 9%, transparent), 0 5px 14px rgba(23,48,32,.07);
}
.catalog-type__option input:checked + span .catalog-type__icon {
  background: color-mix(in srgb, var(--catalog-accent) 14%, transparent);
}
.catalog-type__option input:checked + span::before {
  border-color: var(--catalog-accent-mid);
  background: var(--catalog-accent-mid);
}
.catalog-type__option input:focus-visible + span {
  outline: 3px solid rgba(49,90,58,.14);
  outline-offset: 2px;
}
.catalog-type > p {
  margin: 9px 1px 0;
  color: #8b6a3e;
  font-size: 10.5px;
  font-weight: 700;
}
.repeat-last-order { margin: -8px 0 22px; }
.repeat-last-order[hidden] { display: none; }
.repeat-last-order__button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border: 1px solid rgba(36,69,45,.08);
  border-radius: 13px;
  background: transparent;
  color: var(--green-950);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background-color .18s ease, transform .15s ease;
}
.repeat-last-order__button:hover { border-color: rgba(49,90,58,.22); background: #f7faf6; }
.repeat-last-order__button:active { transform: scale(.992); }
.repeat-last-order__button:disabled { cursor: wait; opacity: .62; }
.repeat-last-order__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2f6f1;
  color: #687169;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.repeat-last-order__copy { min-width: 0; display: grid; gap: 2px; }
.repeat-last-order__copy strong { font-size: 12px; font-weight: 850; }
.repeat-last-order__copy small { overflow: hidden; color: #6f7970; font-size: 9.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.repeat-last-order__arrow { color: #94a196; font-size: 16px; font-weight: 700; }
.repeat-last-order__status { margin: 6px 3px 0; color: #647068; font-size: 9.5px; font-weight: 650; }
.catalog-placeholder {
  margin: 18px 0 0;
  padding: 15px 16px;
  border: 1px dashed rgba(36,69,45,.16);
  border-radius: 14px;
  background: rgba(237,243,236,.58);
  color: var(--muted);
  font-size: 12px;
}
.catalog-placeholder[hidden] { display: none; }
.catalog-placeholder.is-error {
  border-color: rgba(163,60,46,.22);
  color: #a33c2e;
}

@media (max-width: 600px) {
  .catalog-type { margin-top: 20px; }
  .catalog-type__options { grid-template-columns: 1fr; }
  .catalog-type__option > span { min-height: 68px; gap: 10px; }
}

@media (max-width: 720px) {
  .help-strip__inner--credits {
    align-items: center;
    flex-direction: column;
    gap: 3px;
  }
}
/* Kategorie produktów: spokojne otwieranie karty (obwódka + cień całej
   .product-group, nie nagłówka — ten ma własną tranzycję wyżej). */
.product-group {
  transition: border-color var(--motion-ui) ease, box-shadow var(--motion-ui) ease;
}
/* Lista "rozwija się" od góry w dół — każda pozycja (wiersz, klaster
   wariantów, karta zbiorcza…) dostaje odrobinę większe opóźnienie niż
   poprzednia. Po kilku pierwszych pozycjach opóźnienie się nie zwiększa,
   żeby duże kategorie (40+ pozycji) nie czekały sekundami na dotarcie fali
   na dół — i tak widać tylko to, co mieści się na ekranie. */
.product-group[open] .product-list > * {
  animation: product-list-reveal var(--motion-accordion) var(--motion-ease) backwards;
}
.product-group[open] .product-list > *:nth-child(1) { animation-delay: 0ms; }
.product-group[open] .product-list > *:nth-child(2) { animation-delay: 22ms; }
.product-group[open] .product-list > *:nth-child(3) { animation-delay: 44ms; }
.product-group[open] .product-list > *:nth-child(4) { animation-delay: 66ms; }
.product-group[open] .product-list > *:nth-child(5) { animation-delay: 88ms; }
.product-group[open] .product-list > *:nth-child(6) { animation-delay: 110ms; }
.product-group[open] .product-list > *:nth-child(7) { animation-delay: 132ms; }
.product-group[open] .product-list > *:nth-child(8) { animation-delay: 154ms; }
.product-group[open] .product-list > *:nth-child(9) { animation-delay: 176ms; }
.product-group[open] .product-list > *:nth-child(n+10) { animation-delay: 198ms; }
@keyframes product-list-reveal {
  from { opacity: .35; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Impuls potwierdzenia ilości korzystał z cienia inset, który w kartach
   i klastrach wariantów nakładał się na stałą, kolorową obwódkę po lewej
   stronie i wyglądał jak jej pogrubienie — najbardziej widoczne przy
   wpisywaniu wartości z klawiatury telefonu. Usunięty całkowicie, żeby
   wykluczyć ten efekt, zamiast dalej zawężać, której krawędzi ma dotyczyć.
   Potwierdzenie zmiany ilości wraca jako impuls skali na samym stepperze —
   dotyka tylko jego własnej obwódki, nigdy krawędzi wiersza czy karty. */
.product-row {
  transition: background-color var(--motion-ui) ease;
}
.product-row.is-quantity-updated .stepper {
  animation: stepper-pulse 220ms var(--motion-ease);
}
@keyframes stepper-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Pasek postępu: płynnie wypełniane linie i delikatny akcent aktywnego kroku. */
.step-progress__item {
  transition: color var(--motion-ui) ease;
}
.step-progress__item span {
  transition:
    transform var(--motion-ui) var(--motion-ease),
    background-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease;
}
.step-progress__item.is-active span {
  transform: scale(1.055);
  box-shadow: 0 5px 14px rgba(36,69,45,.13);
}
.step-progress__line {
  position: relative;
  overflow: hidden;
  height: 2px;
  border-radius: 999px;
  background: rgba(36,69,45,.12);
}
.step-progress__line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--catalog-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--motion-ease);
}
.step-progress__line.is-complete::after {
  transform: scaleX(1);
}

/* Przejścia pomiędzy krokami pozostają krótkie, ale są bardziej miękkie. */
.order-step.is-active {
  animation: step-fade-modern var(--motion-ui) var(--motion-ease);
}
@keyframes step-fade-modern {
  from { opacity: .35; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fizyczne, ale bardzo subtelne wrażenie naciśnięcia. */
.stepper button,
.step-next,
.step-back,
.submit-button,
.success-new-order,
.text-button,
.search-clear {
  transition:
    transform var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}
.stepper button:active:not(:disabled),
.step-next:active:not(:disabled),
.step-back:active:not(:disabled),
.submit-button:active:not(:disabled),
.success-new-order:active,
.text-button:active:not(:disabled),
.search-clear:active {
  transform: scale(.975);
}

/* Okno potwierdzenia: lekkie przyciemnienie i subtelne wejście panelu. */
.review-dialog[open] {
  animation: dialog-opacity-in var(--motion-ui) ease-out;
}
.review-dialog[open]::backdrop {
  animation: dialog-backdrop-in var(--motion-ui) ease-out;
}
.review-dialog[open] .review-dialog__panel {
  animation: dialog-panel-in var(--motion-ui) var(--motion-ease);
}
.review-dialog--success[open] .success-icon {
  animation: success-icon-in 360ms cubic-bezier(.2,.82,.24,1.16);
}
@keyframes dialog-opacity-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dialog-backdrop-in {
  from { background: rgba(17,29,20,0); backdrop-filter: blur(0); }
  to { background: rgba(17,29,20,.62); backdrop-filter: blur(5px); }
}
@keyframes dialog-panel-in {
  from { opacity: 0; transform: translateY(7px) scale(.982); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes success-icon-in {
  0% { opacity: 0; transform: scale(.72); }
  72% { opacity: 1; transform: scale(1.055); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
  .product-filter {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  /* Cztery segmenty nie mieszczą się w 390 px, więc tor przewija się w poziomie
     zamiast ściskać etykiety — działa niezależnie od tego, ile filtrów przybędzie. */
  .product-filter__company {
    width: 100%;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .product-filter__company::-webkit-scrollbar { display: none; }
  /* Maska na krawędziach pokazuje, że tor da się przesunąć — bez niej
     ostatnia zakładka po prostu ucinała się bez żadnego sygnału. */
  .product-filter__company {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .product-filter__company.is-scroll-start {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
  .product-filter__company.is-scroll-end {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px);
    mask-image: linear-gradient(to right, transparent 0, #000 14px);
  }
  .product-filter__company.is-scroll-none { -webkit-mask-image: none; mask-image: none; }
  .product-filter__company .product-filter__button {
    flex: 0 0 auto;
    min-width: 0;
    gap: 6px;
    padding-inline: 12px;
    font-size: 12.5px;
  }
  .filter-label--desktop { display: none; }
  .filter-label--mobile { display: inline; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .product-group[open] .product-list,
  .product-groups.is-filter-switching,
  .order-step.is-active,
  .review-dialog[open],
  .review-dialog[open]::backdrop,
  .review-dialog[open] .review-dialog__panel,
  .review-dialog--success[open] .success-icon {
    animation: none !important;
  }
  .step-progress__item.is-active span { transform: none; }
}

/* ==========================================================================
   Klastry wariantów na wąskim ekranie
   Nagłówek grupy (np. „Kozi twaróg") leżał w tym samym rytmie co gramatury
   pod nim, więc nie było widać, że „150 g" i „200 g" dotyczą właśnie jego.
   Nagłówek dostaje bardzo jasne tło (#f6faf5 — wyraźnie słabsze niż #e8f0e7
   otwartej kategorii, żeby nie konkurowało z jej nagłówkiem) i mocniejszą
   kreskę po lewej, a wiersze
   schodzą z 70 px do 56 px — karta z dwiema gramaturami zajmuje ~156 px
   zamiast 210 px.
   ========================================================================== */
@media (max-width: 1050px) {
  .product-variant-cluster:not(.product-variant-cluster--single-as-product) > .product-variant-cluster__title,
  .product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) > .product-variant-cluster__title {
    border-bottom: 1px solid rgba(36,69,45,.2);
    /* Był tu stały #f6faf5 (delikatny odcień zieleni) niezależnie od
       wybranego nabiału — przy kozim/owczym dawało to dokładnie ten sam
       "zielonkawy" nagłówek co przy krowim. color-mix z --catalog-accent-soft
       daje ten sam, "wyraźnie słabszy" efekt, ale we właściwym kolorze. */
    background: color-mix(in srgb, var(--catalog-accent-soft) 45%, white);
    color: color-mix(in srgb, var(--catalog-accent-dark) 35%, black);
    font-weight: 750;
  }
  /* Mocniejszy pasek po lewej spina nagłówek z wariantami w jedną całość. */
  .product-variant-cluster:not(.product-variant-cluster--single-as-product) {
    border-left-color: color-mix(in srgb, var(--catalog-accent-mid) 42%, transparent);
  }
}

@media (max-width: 760px) {
  .product-variant-cluster { margin: 8px 2px; }
  .product-variant-cluster + .product-variant-cluster { margin-top: 10px; }
  .product-variant-cluster:not(.product-variant-cluster--single-as-product) > .product-variant-cluster__title,
  .product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) > .product-variant-cluster__title {
    min-height: 44px;
    padding: 8px 13px;
  }
  /* Klastry wagowe zostają bez zmian wysokości — mają własne pole na wagę. */
  .product-variant-cluster .product-row:not(.product-weight-option),
  .product-card-block > .product-variant-cluster:not(.product-variant-cluster--single-as-product) .product-row:not(.product-weight-option) {
    min-height: 56px;
    padding: 7px 10px 7px 13px;
  }
}

/* --- Sezonowość nabiału kozi/owczy ---
   Poza sezonem kategoria zostaje widoczna (klient pamięta, co jest w ofercie),
   ale jest wyszarzona, z kłódką, a jej przyciski są wyłączone. Pasek informacji
   nad listą jest celowo niebieski — jedyny chłodny kolor na ciepłej stronie,
   więc rzuca się w oczy i nie wygląda jak ostrzeżenie. */
.season-notices { display: grid; gap: 8px; margin-top: 16px; }
.season-notices[hidden] { display: none; }
.season-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid #9CBEDF;
  border-radius: 12px;
  background: #E3EEF9;
  color: #17324f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.season-notice .season-icon { flex: 0 0 auto; margin-top: 1px; color: #2F6DA8; }

.product-group--off summary,
.product-group--off[open] summary {
  background: #eeeee9;
  box-shadow: inset 3px 0 0 #b9b9b0;
}
.product-group--off summary:hover,
.product-group--off summary:active { background: #e8e8e2; }
.product-group--off .product-group__title strong { color: #5d625a; }
.product-group--off .group-count,
.product-group--off[open] .group-count { background: #e2e2dc; color: #6f736c; }
.product-group summary .product-group__title > .product-group__season-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  overflow: visible;
  color: #5d625a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.product-group__season-note .season-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.product-group--off .stepper { pointer-events: none; border-color: #dfe3df; background: #f1f3f1; }
.product-group--off .stepper button:disabled,
.product-group--off .stepper.is-empty > [data-plus]:disabled { background: #f1f3f1; color: #b5bcb5; }
.product-group__off-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 14px 0;
  padding: 11px 0 13px;
  border-top: 1px solid #9CBEDF;
  color: #2F6DA8;
  font-size: 13px;
  font-weight: 600;
}
.product-group__off-note .season-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* --- Minimalna wartość zamówienia (krok 3, rozpoznany klient) --- */
.min-order-notice {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #d3d8c8;
  border-radius: 14px;
  background: #fff6dc;
  color: #4a3500;
}
/* Gdy nad nim jest karta z wartością, żółty wiersz staje się jej dolną częścią. */
.summary-net-total:not([hidden]) + .min-order-notice {
  margin-top: -1px;
  border-top-color: #e1e5d8;
  border-radius: 0 0 14px 14px;
}
.summary-net-total:has(+ .min-order-notice:not([hidden])) { margin-bottom: 0; border-radius: 14px 14px 0 0; }
.min-order-notice[hidden] { display: none; }
.late-notice {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #e2b9a6;
  border-radius: 14px;
  background: #f7e9e2;
  color: #6e3a25;
  text-align: center;
}
.late-notice[hidden] { display: none; }
.late-notice__icon { vertical-align: -3px; margin-right: 6px; }
.late-notice strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.late-notice p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.min-order-notice p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }