/* DamTorty v2: strona „Zapytaj o tort” (SPEC-v2-formularz, SPEC-v2-formularz-kroki). Ładowany po tokens.css i site.css,
   których nie zmienia. Kreator krok po kroku: zakładka drukarki z szyną kroków, kroki jako białe karty w stylu strony
   (cienkie linie, łuki, kafle wyboru); paragon z pracowni (papier z prążkami i ząbkami, podpis, pieczątka, kod
   kreskowy) tylko w kroku 6 „Sprawdź i wyślij” i na ekranie podziękowania. Zero literałów kolorów: wszystko z tokenów. Obrysy niosące informację (pola, pudełka,
   linie sekcji) biorą gotowe rgba z tokens.css (--c-ink-40…62); color-mix() tylko w dekoracjach, które mogą zniknąć.
   Punkty: sm 480, wewnętrzny paragonu 640 (wiersze etykieta / pole), md 768, lg 1024. */

/* ==========================================================================
   0. Narzędzia tej strony, nagłówek bez CTA, pasek kontaktu z dwiema komórkami
   ========================================================================== */


.muted { color: var(--c-muted); }

/* Pole trafienia linków z numerami i linków w zdaniach: pseudoelement wyśrodkowany na linku, więc wysokość wiersza
   i odstępy w zdaniu się nie zmieniają, a obrys fokusu obejmuje sam tekst; numer nie łamie się w środku.
   Numery w karcie kontaktu (wiersz 44 px) i w nagłówku paragonu: 44×44. Link w zdaniu (lead karty kontaktu,
   noscript, pytania): co najmniej 44 px szerokości, a w pionie wysokość linii, bo pole 44 px wchodziłoby na link
   w sąsiedniej linii (dotknięcie dolnej części jednego numeru wybierałoby drugi); linki w zdaniu to wyjątek
   WCAG 2.5.8 */
.text-link,
.talk-list__num,
.receipt__contact a {
  position: relative;
  white-space: nowrap;
}
.text-link::before,
.talk-list__num::before,
.receipt__contact a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 2 * var(--s-1));
  min-width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.text-link::before {
  width: calc(100% + 2 * var(--s-2));
  min-height: 24px;
  height: 1.5em;
  height: 1lh;
}

.contact-bar--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   1. Hero formularza (2.3): Róż pastelowy, bez ruchu na wejściu
   ========================================================================== */

.form-hero {
  --link: var(--c-accent-deep);
  --script: var(--c-accent-deep);
  --focus: var(--c-ink);
  position: relative;
  overflow-x: clip;
  background: var(--c-pink);
}

/* Hero wchodzi pod nagłówek na każdej szerokości (nagłówek Bernice, SPEC-v2-naglowek 6.1): pasek jest przezroczysty
   nad różem, a treść zaczyna się tam, gdzie wcześniej */
main > .form-hero { margin-top: calc(-1 * (var(--header-h) + var(--header-offset))); }
.form-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: calc(var(--header-h) + var(--header-offset) + 24px) 40px;
}

.form-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: var(--tr-h2);
  text-transform: uppercase;
}

.form-hero__lead { margin-top: var(--s-4); }

/* Skrót do paragonu tylko do lg: na telefonie papier zaczyna się ok. 2,5 ekranu niżej */
.form-hero__jump { margin-top: var(--s-5); }
@media (min-width: 1024px) {
  .form-hero__jump { display: none; }
}

.form-hero__script {
  width: fit-content;
  max-width: none;
  margin-top: var(--s-5);
  font-family: var(--ff-script);
  font-size: var(--fs-script);
  line-height: 1;
  font-weight: 700;
  color: var(--c-accent-deep);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}

/* Dekoracja: doodle tortu na kole w Różu pastelowym głębokim (dekoracja na różu), serce od lg */
.form-hero__deco {
  position: relative;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
  margin: var(--s-5) auto 0;
}
.form-hero__deco::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-pink-deep);
}
.form-hero__cake {
  position: relative;
  --dd-size: 96px;
  --dd-sw: 2;
  --dd-rot: -6deg;
}
.form-hero__heart { display: none; }

@media (min-width: 1024px) {
  .form-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--s-7);
    padding-block: calc(var(--header-h) + var(--header-offset) + 40px) 64px;
  }
  .form-hero__text { padding-top: var(--s-5); }
  .form-hero__deco {
    order: 1;
    width: 280px;
    height: 280px;
    margin: 0 var(--s-7) 0 auto;
  }
  .form-hero__cake { --dd-size: 160px; --dd-sw: 1.2; }
  .form-hero__heart {
    display: block;
    top: 6px;
    right: -6px;
    --dd-size: 48px;
    --dd-sw: 4;
    --dd-rot: 12deg;
  }
}

/* ==========================================================================
   2. Oś kroków i karta kontaktu (2.4)
   ========================================================================== */

.form-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Ta sama ramka co na stronie głównej, tu w wierszach (trzy kolumny obok karty byłyby za wąskie) */
.form-steps__list.frame--3 { grid-template-columns: minmax(0, 1fr); }
.form-steps .step { padding: var(--s-5); }
.form-steps .step__body h3 { margin-bottom: var(--s-2); }

/* Krok 01: tu jesteś (numer na pigułce Masło, ikona w kole z obrysem) */
.step--current .step__num {
  padding: 6px 14px 4px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-butter);
}
.step--current .step__icon { box-shadow: inset 0 0 0 2px var(--c-ink); }

@media (min-width: 768px) {
  .form-steps .step {
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: start;
    padding: var(--s-6);
  }
  .form-steps .step__head {
    justify-content: flex-start;
    gap: var(--s-3);
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .form-steps__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.talk-card {
  --link: var(--c-accent);
  --focus: var(--c-accent);
  padding: var(--s-5);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.talk-card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  font-stretch: 95%;
  letter-spacing: 0;
  text-transform: none;
}
.talk-card__lead {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}
.talk-list { display: grid; margin-top: var(--s-4); }
.talk-list__link,
.talk-list__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  font-weight: 600;
  line-height: 1.3;
}
.talk-list__link {
  color: var(--c-ink);
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1px;
}
.talk-list__link svg,
.talk-list__item svg { width: var(--icon-md); height: var(--icon-md); }
.talk-list__item { font-weight: 400; }
/* Adres e-mail w karcie kontaktu: łamie się w środku zamiast wystawać poza kartę na telefonie */
.talk-list__text { min-width: 0; }
.talk-list__mail,
.text-link--mail { white-space: normal; overflow-wrap: anywhere; }
/* Dwa numery w jednej pozycji (decyzja D1): każdy numer to osobny link z celem 44 px (pseudoelement jak .text-link,
   sekcja 0); przy wąskiej karcie drugi numer schodzi do nowej linii w całości */
/* Po zawinięciu każda linia ma 44 px, więc pola trafienia numerów w dwóch liniach na siebie nie nachodzą */
.talk-list__item--phones { align-items: flex-start; line-height: 44px; }
.talk-list__item--phones svg { margin-top: calc((44px - var(--icon-md)) / 2); }
.talk-list__num {
  color: var(--c-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1px;
}
.talk-card__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--bw-hair) solid var(--c-hair);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}
.talk-card__note svg { width: var(--icon-md); height: var(--icon-md); margin-top: 1px; color: var(--c-ink); }

@media (hover: hover) {
  .talk-list__link:hover,
  .talk-list__num:hover { color: var(--c-accent); text-decoration-thickness: 2px; }
}

@media (min-width: 1024px) {
  .talk-card {
    position: sticky;
    top: calc(var(--header-h) + var(--header-offset) + 24px);
  }
}

/* ==========================================================================
   3. Sekcja paragonu, opakowanie, zakładka drukarki (2.5, 3.1, 3.2)
   ========================================================================== */

.form-receipt { overflow-x: clip; }

.receipt-wrap {
  --paper-w: 672px;             /* szerokość papieru (3.1); ta sama miara w masce przyklejonej zakładki (3a) */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 768px;
  margin-inline: auto;
}

.form-receipt__whisk { display: none; }

@media (min-width: 1024px) {
  .form-receipt__whisk {
    display: block;
    top: 40px;
    right: -8px;
    --dd-size: 48px;
    --dd-sw: 4;
    --dd-rot: 15deg;
  }
}

.receipt__printer {
  position: relative;
  z-index: 1;
  width: 86%;
  max-width: 416px;
}
/* Belka bez tła, ramki i szczeliny (decyzja 2026-10-01, „bez obramówki”): z JS niesie sam dock kroków (3a),
   bez JS jest pusta i nic nie zajmuje */
.receipt__printer-bar {
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   3a. Szyna kroków (SPEC-v2-formularz-kroki 3, decyzja 2026-09-27)
   Port „Wizard Steps” (21st.dev, ddoemonn) i steppera z „Onboarding Wizard Form” (cnippet-dev) bez bibliotek,
   jako dock (decyzja 2026-10-01): z JS (form.js 5.18, klasa .has-wiz) zakładka niesie jedną białą listę z cieniem,
   bez ramek. Telefon: wiersz „Krok X z 6: nazwa” na Różu i same ikony. Od 768 px ikony z etykietami pod spodem.
   Stany: przyszły sama ikona w Popiele ciemnym, bez koła; odwiedzony ikona w Kakao na jasnym kole; gotowy do tego
   ptaszek; z błędem ikona i plakietka Warning w --c-error; bieżący pełne koło w Kakao (nigdy sam kolor, WCAG 1.4.1).
   Bez JS nav ma hidden, a belka jest pusta
   ========================================================================== */

.receipt__printer.has-wiz {
  --focus: var(--c-ink);
  --wiz-n: 6;
  --receipt-gap: 0px;           /* odstęp od nagłówka: 0, od lg pas pod pływającym nagłówkiem (site.css 9) */
  /* Na telefonie trochę szerzej niż 86 % z 3.2: pozycja i nazwa kroku mieszczą się w jednej linii przy 320 px */
  width: 90%;
}

/* Karty kroków zaczynają się 16 px pod dockiem (bez JS i w niskim oknie tak samo), paragon kroku 6 też */
.receipt__printer + .wiz { margin-top: var(--s-4); }

/* Przyklejanie (poprawki 2026-09-27) tylko na ekranie wysokim na co najmniej 560 px. W niskim oknie (telefon
   poziomo, 375-430 px) nagłówek, zakładka i pasek kontaktu zajęłyby ponad połowę ekranu: zakładka zostaje wtedy
   nad kreatorem jak w 3.2 i przewija się z nim (przyciski szyny działają). Bez screen w druku nie ma sensu */
@media screen and (min-height: 560px) {
  /* Tuż pod nagłówkiem (od lg tuż pod pasem, który wygasa 8 px pod pływającym paskiem);
     nad kartami (karta wjeżdża pod dock), pod paskiem kontaktu, nagłówkiem i menu.
     Odkleja się na końcu bieżącego kroku: dolny margines (--receipt-park, form.js 5.18, marker [data-wiz-park])
     kończy strefę przyklejenia wcześniej niż .receipt-wrap, a kreator cofa się o tyle samo, więc układ się nie zmienia.
     W krokach 1-5 zakładka trzyma się do przycisków kroku; w kroku 6 do sekcji „Zgoda i wysyłka”, więc podpis
     z pieczątką, przycisk, stopka i dolne ząbki zostają odsłonięte */
  .receipt__printer.has-wiz {
    position: sticky;
    top: calc(var(--header-h) + var(--header-offset) + var(--receipt-gap));
    z-index: var(--z-sticker);
    margin-bottom: var(--receipt-park, 0px);
  }
  .receipt__printer.has-wiz + .wiz { margin-top: calc(var(--s-4) - var(--receipt-park, 0px)); }

  /* Maska w Różu pastelowym za dockiem: od nagłówka do dolnej krawędzi docka, na szerokość karty z zapasem.
     Przyklejona zakładka wciąga kartę jak drukarka, więc nad nią i obok niej nie prześwituje ucięty tekst.
     W położeniu wyjściowym leży na tle sekcji i jej nie widać; szersza niż okno obcina .form-receipt */
  .receipt__printer.has-wiz::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--receipt-gap) - var(--s-2));
    bottom: 0;
    left: 50%;
    width: min(var(--paper-w) + 2 * var(--s-3), 100vw);
    background: var(--c-pink);
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* WCAG 2.4.11: fokus i kotwice lądują pod przyklejoną zakładką. --receipt-sticky-h (odstęp nad zakładką + jej
     wysokość) ustawia form.js 5.18 z ResizeObservera; bez JS i po wysłaniu zmiennej nie ma, zostaje wartość z site.css */
  html { scroll-padding-top: calc(var(--header-h) + var(--header-offset) + var(--receipt-sticky-h, 0px) + var(--s-4)); }

  /* Fokus w przyklejonej zakładce nie przewija strony (ten sam zabieg co w pasku nagłówka, site.css 9):
     zakładka leży w strefie scroll-padding-top, obszar przewijania jej przycisków jest przesunięty w dół.
     Tylko przy przyklejaniu: w niskim oknie zakładka przewija się z kreatorem i fokus ma ją normalnie odsłonić */
  .has-wiz :where(a, button) { scroll-margin: -200px 0 200px; }
}
/* Telefon: wiersz z pozycją („Krok 2 z 6”, Popiół ciemny) i nazwą kroku (Kakao), pod nim dock samych ikon */
.wiz-rail {
  display: grid;
  gap: var(--s-2);
}
.wiz-rail__where {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: 22px;
  max-width: none;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wiz-rail__pos {
  flex: none;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Węższy krój i tracking, żeby „Okazja i termin” mieściła się obok pozycji przy 320 px */
.wiz-rail__name {
  min-width: 0;
  overflow: hidden;
  color: var(--c-ink);
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 359px) {
  .wiz-rail__name { letter-spacing: .06em; }
}

/* Dock kroków (21st.dev Dock z Magic UI, port bez bibliotek; decyzja 2026-10-01): przejrzysty pasek z zaokrągleniem,
   w nim okrągłe ikony kroków. Mysz nad dockiem: ikony rosną z 40 do 60 px tym bardziej, im bliżej kursora (site.js,
   initDock ustawia --dock-s; tylko transform, więc układ stoi). Stan kroku nigdy nie jest samym kolorem: bieżący
   biało-czarny (pełne koło), gotowy ptaszek, do poprawienia ostrzeżenie, przyszły obrys przerywany (WCAG 1.4.1) */
.wiz-rail__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
  padding: var(--s-2);
  list-style: none;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--sh-lift);
}
/* Segmenty z telefonu zastępuje dock; znaczniki zostają dla form.js (stan segmentów) */
.wiz-rail__track { display: none; }
.wiz-rail__item {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}
.wiz-rail__btn {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wiz-rail__btn.is-future { cursor: default; }
.wiz-rail__btn:focus-visible { outline: none; }
.wiz-rail__btn:focus-visible .wiz-rail__tile { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.wiz-rail__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--bw-btn) solid transparent;   /* obrys tylko w forced-colors (16) */
  border-radius: 50%;
  background: var(--c-ink-06);
  color: var(--c-ink);
  scale: var(--dock-s, 1);
  transform-origin: 50% 100%;   /* rośnie w górę jak dock z kierunkiem „bottom”: podpis pod ikoną zostaje odsłonięty */
}
.wiz-rail__icon { width: var(--icon-md); height: var(--icon-md); }
.wiz-rail__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.wiz-rail__check,
.wiz-rail__warn { display: none; width: 12px; height: 12px; }
.wiz-rail__btn.is-future .wiz-rail__tile { background: none; color: var(--c-muted); }
.wiz-rail__btn.is-done .wiz-rail__badge { display: grid; background: var(--c-ink); color: var(--c-white); }
.wiz-rail__btn.is-done .wiz-rail__check { display: block; }
.wiz-rail__btn.is-error .wiz-rail__tile { color: var(--c-error); }
.wiz-rail__btn.is-error .wiz-rail__badge { display: grid; background: var(--c-error); color: var(--c-white); }
.wiz-rail__btn.is-error .wiz-rail__warn { display: block; }
.wiz-rail__btn[aria-current="step"] .wiz-rail__tile {
  background: var(--c-ink);
  color: var(--c-white);
}
.wiz-rail__label { display: none; }

/* Przejścia kolorów dopiero po pierwszym ustawieniu (.is-settled na .receipt-wrap, form.js): przy wejściu na stronę
   i przywróceniu kroku nic się nie rusza. Skala ikon (--dock-s) bez przejścia: sprężynę liczy initDock w rAF */
.receipt-wrap.is-settled .wiz-rail__tile {
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.receipt-wrap.is-settled .wiz-rail__label { transition: color var(--dur-1) var(--ease); }

@media (min-width: 768px) {
  .receipt__printer.has-wiz {
    width: min(100% - 32px, 620px);
    max-width: none;
  }
  /* Od 768 px nazwy kroków stoją pod ikonami, więc wiersz pozycji znika (bez diody i marki, decyzja 2026-10-01) */
  .wiz-rail__where { display: none; }
  /* Górny margines docka mieści ikonę powiększoną do 60 px (rośnie o 20 px w górę) */
  .wiz-rail__list { padding: 26px var(--s-3) var(--s-2); }
  /* Przyciski jednej szerokości (najszersza etykieta „Sprawdź” ma ok. 64 px): ikona powiększona do 60 px mieści się
     w swoim polu, więc dock nie musi rozsuwać sąsiadów */
  .wiz-rail__btn { min-width: 72px; }
  .wiz-rail__label {
    display: block;
    color: var(--c-muted);
    font-family: var(--ff-nav);
    font-size: var(--fs-bar);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .wiz-rail__btn.is-done .wiz-rail__label,
  .wiz-rail__btn.is-visited .wiz-rail__label { color: var(--c-ink); }
  .wiz-rail__btn.is-error .wiz-rail__label { color: var(--c-error); }
  .wiz-rail__btn[aria-current="step"] .wiz-rail__label { color: var(--c-ink); font-weight: 800; }
}
@media (min-width: 768px) and (hover: hover) {
  .wiz-rail__btn:not(.is-future):not([aria-current]):hover .wiz-rail__label { text-decoration: underline 1px; text-underline-offset: 3px; }
}
/* Od lg pod pływającym nagłówkiem wygasa 8-pikselowy pas w Mące (site.css 9, inset 0 0 -8px): zakładka staje
   pod nim, a szczelinę wypełnia maska, więc pas przechodzi w Róż pastelowy jak obok karty */
@media (min-width: 1024px) {
  .receipt__printer.has-wiz { --receipt-gap: var(--s-2); }
}

/* ==========================================================================
   4. Papier (3.1): biel z prążkami druku termicznego, cień w Kakao, ząbki w kolorze tła sekcji
   ========================================================================== */

.receipt {
  --link: var(--c-accent);
  --focus: var(--c-accent-deep);
  position: relative;
  isolation: isolate;
  width: min(var(--paper-w), 100%);
  margin-top: -4px;
  padding: 32px 32px 24px;
  background-color: var(--c-white);
  background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 3%, transparent) 0 1px, transparent 1px 3px);
  box-shadow: var(--sh-sticker);
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (max-width: 479px) {
  .receipt { padding: 24px 20px 40px; }
}
@media (min-width: 640px) {
  .receipt { padding: 48px 48px 72px; }
}

.receipt :where(p) { max-width: none; }

/* Ząbki naprawdę: trójkąty w Różu pastelowym „wycinają” krawędź papieru */
.receipt__edge {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 10px;
  pointer-events: none;
}
.receipt__edge--top {
  top: -1px;
  background:
    linear-gradient(135deg, var(--c-pink) 25%, transparent 25%) 50% 0 / 20px 20px,
    linear-gradient(225deg, var(--c-pink) 25%, transparent 25%) 50% 0 / 20px 20px;
}
.receipt__edge--bottom {
  bottom: -1px;
  background:
    linear-gradient(45deg, var(--c-pink) 25%, transparent 25%) 50% 100% / 20px 20px,
    linear-gradient(315deg, var(--c-pink) 25%, transparent 25%) 50% 100% / 20px 20px;
}

/* Honeypot poza ekranem (4.8) */
.hp {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   5. Nagłówek paragonu, linie, metryczka (3.3-3.5)
   ========================================================================== */

.receipt__head {
  margin-bottom: 24px;
  text-align: center;
}
.receipt__logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--c-brand);
  outline: var(--bw-hair) solid var(--c-ink);
  outline-offset: 3px;
}
.receipt__logo img { width: 36px; height: 36px; }
.receipt__brand {
  margin-top: 16px;
  font-family: var(--ff-display);
  font-size: 38px;
  line-height: 1;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.receipt__tagline-line { display: block; }
.receipt__tagline {
  margin-top: 8px;
  font-family: var(--ff-display);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-wrap: balance;
}
.receipt__contact {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-muted);
}
/* Dwa numery (decyzja D1): cel 44 px z pseudoelementu jak .text-link (sekcja 0), bez zmiany wysokości wiersza */
.receipt__contact a { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 479px) {
  .receipt__brand { font-size: 32px; }
  .receipt__tagline { letter-spacing: .12em; }
}

.receipt__rule {
  height: 0;
  margin: 16px 0;
  border: 0;
  border-top: var(--bw-hair) solid var(--c-ink);
}
.receipt__rule--dashed {
  margin-block: 20px;
  border-top: var(--bw-hair) dashed var(--c-ink-60);
}

.receipt__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 32px;
}
.receipt__meta > div {
  display: flex;
  flex-wrap: wrap;               /* gdy para się nie mieści, wartość schodzi pod etykietę zamiast na nią nachodzić */
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--s-3);
}
.receipt__meta dt,
.receipt__sum dt {
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.receipt__meta dd {
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .receipt__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Podziękowanie: trzy pary w jednym wierszu dopiero od md; kolumna nigdy węższa niż jej para (numer ~195 px) */
@media (min-width: 768px) {
  .receipt__meta--thanks {
    grid-template-columns: minmax(max-content, 1.6fr) minmax(max-content, 1fr) minmax(max-content, 1fr);
    gap: 6px 32px;
  }
}

.receipt__required {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}
.req {
  margin-left: 3px;
  color: var(--c-accent);
  font-weight: 700;
}

/* ==========================================================================
   6. Podsumowanie błędów i komunikaty (3.15, 5.10, 4.6)
   ========================================================================== */

.receipt__errors,
.wiz-step__errors {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: 20px;
  border: var(--bw-hair) solid var(--c-error);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-error) 6%, var(--c-white));
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.receipt__errors > svg,
.wiz-step__errors > svg { width: var(--icon-md); height: var(--icon-md); margin-top: 1px; color: var(--c-error); }
.receipt__errors-title { font-weight: 700; color: var(--c-error); }
.receipt__errors ul,
.wiz-step__errors ul {
  display: grid;
  gap: 2px;
  margin-top: var(--s-2);
  padding-left: 18px;
  list-style: disc;
}
.receipt__errors li::marker,
.wiz-step__errors li::marker { color: var(--c-error); }
.receipt__errors a,
.wiz-step__errors a {
  /* Blok, nie inline-block: kropka listy stoi przy pierwszej linii dwulinijkowego komunikatu */
  display: block;
  width: fit-content;
  padding-block: 2px;
  color: var(--c-error);
  font-weight: 600;
}
.receipt__errors:focus,
.wiz-step__errors:focus,
.receipt__errors-global:focus { outline: 2px solid var(--c-accent-deep); outline-offset: 3px; }

.receipt__errors-global {
  margin-top: var(--s-4);
  padding: 12px 16px;
  border: var(--bw-hair) solid var(--c-error);
  border-radius: var(--r-sm);
  color: var(--c-error);
  font-size: var(--fs-small);
  font-weight: 600;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 14px 16px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-butter);
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-align: left;
}
.alert > svg { width: var(--icon-md); height: var(--icon-md); margin-top: 1px; }
.alert:focus { outline: 2px solid var(--c-accent-deep); outline-offset: 3px; }
.alert__body .btn { margin-top: var(--s-3); }
.alert--soft > svg { color: var(--c-accent-2); }

.receipt__files-note { margin-bottom: var(--s-2); clear: both; }
.receipt__soft { margin-top: var(--s-5); }
.receipt__noscript { margin-top: var(--s-5); }

/* ==========================================================================
   7. Sekcje, wiersze, etykiety (3.6, 3.7)
   ========================================================================== */

.receipt__section { min-width: 0; }
.receipt__section > :not(legend) { clear: both; }

.receipt__legend {
  margin-bottom: 12px;
  font-family: var(--ff-display);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-ink);
}
legend.receipt__legend {
  float: left;
  width: 100%;
  padding: 0;
}
.receipt__legend:focus { outline: none; }
.receipt__legend:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 4px; }
.receipt__legend--center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.receipt__legend--center .stamp { width: 14px; height: 14px; }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 16px;
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  border: 0;
}
.row + .row,
.row + .delivery { margin-top: 2px; }
@media (max-width: 639px) {
  .row { padding: 10px 0; }
}
.row__label {
  font-family: var(--ff-display);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.row__field { position: relative; min-width: 0; }
/* Legenda grupy jako zwykły element siatki (pływająca legenda nie jest „renderowaną legendą”) */
.row--group > legend.row__label {
  float: left;
  width: 100%;
  padding: 0;
}

@media (min-width: 640px) {
  .row {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: baseline;
  }
  .row > :not(.row__label) { grid-column: 2; }
  .row.row--full { grid-template-columns: minmax(0, 1fr); }
  .row.row--full > * { grid-column: 1; }
  .row--group { align-items: start; }
  .row--group > legend.row__label { padding-top: 12px; }
}

.hint {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}
.hint strong { color: var(--c-ink); }
.hint--warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: 8px 12px;
  border-radius: var(--r-xs);
  background: var(--c-butter);
  color: var(--c-ink);
}
.hint--warn svg { width: 18px; height: 18px; margin-top: 2px; }

.err {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 600;
  color: var(--c-error);
}
.err svg { width: 16px; height: 16px; margin-top: 2px; }

/* Wielkość tortu (decyzja D5): liczba gości albo waga, dwa pola obok siebie od 480 px, na telefonie jedno pod
   drugim. Nazwę i gwiazdkę niesie legenda grupy, więc etykiety pól są mniejsze i bez wersalików. Od 640 px pierwsza
   linia etykiet stoi na wysokości legendy (legenda grupy ma tam padding-top 12 px) */
.size {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
}
.size__field { min-width: 0; }
.size__label {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
  color: var(--c-ink);
}
@media (min-width: 480px) {
  .size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .row--group > .size { padding-top: 10px; }
}

/* ==========================================================================
   7a. Karty kroków (SPEC-v2-formularz-kroki 2, 6.2)
   Krok to biała karta w stylu strony (jak .talk-card i .price-card): cienki obrys w tuszu, łuk --r-lg, bez cienia,
   prążków i ząbków. Nagłówek z ikoną w kole Różu (jak krok 01 osi „Jak zamawiasz”), licznik w Karmelu, tytuł
   Bricolage. Bez JS wszystkie karty stoją jedna pod drugą; z JS widać jedną (form.js 5.18). Krok 6 to paragon
   ========================================================================== */

/* Szerokość jak papier: formularz stoi w kolumnie flex (.receipt-wrap), więc bez własnej szerokości brałby ją
   z treści i karta zmieniałaby szerokość między krokami */
.wiz {
  --wiz-dx: 22px;               /* wejście kroku z prawej (Wizard Steps: x: d * 22) */
  width: min(var(--paper-w), 100%);
}
.wiz[data-direction="-1"] { --wiz-dx: -22px; }

.wiz-step {
  --focus: var(--c-accent-deep);
  --link: var(--c-accent);
  position: relative;
  width: 100%;
  padding: var(--s-5) var(--card-pad);
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.wiz-step :where(p) { max-width: none; }
.wiz-step + .wiz-step { margin-top: var(--s-4); }

@media (min-width: 480px) {
  .wiz-step { padding: var(--s-6) var(--s-5); }
}
@media (min-width: 640px) {
  .wiz-step { padding: var(--s-6) var(--s-7); }
}

/* Krok 6: karta bez własnej ramki, w środku paragon (.receipt.review__paper z sekcji 4), 16 px pod dockiem jak inne kroki */
.wiz-step--paper {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Nagłówek kroku */
.wiz-step__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: var(--bw-hair) solid var(--c-hair);
}
.wiz-step__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-pink);
  box-shadow: inset 0 0 0 2px var(--c-ink);
}
.wiz-step__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.wiz-step__text { min-width: 0; }
.wiz-step__count {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent-2);
  font-variant-numeric: tabular-nums;
}
/* Szerokość tekstu (fit-content): obrys fokusu po „Dalej” z klawiatury obejmuje nagłówek, a nie pusty blok */
.wiz-step__title {
  width: fit-content;
  max-width: 100%;
  margin-top: var(--s-1);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  font-stretch: 95%;
  letter-spacing: 0;
  text-transform: none;
}
.wiz-step__title:focus { outline: none; }
.wiz-step__title:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 4px; }
.wiz-step__lead {
  max-width: var(--measure);
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}
.wiz-step__note {
  margin-top: var(--s-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--c-muted);
}

@media (min-width: 640px) {
  .wiz-step__icon { width: 56px; height: 56px; }
  .wiz-step__icon svg { width: var(--icon-step); height: var(--icon-step); }
}
/* Na telefonie z JS „Krok X z 6” stoi już w wierszu szyny tuż nad kartą */
@media (max-width: 767px) {
  .wiz--on .wiz-step__count { display: none; }
  .wiz--on .wiz-step__title { margin-top: 0; }
}

/* Nagłówek kroku 6 w stylu paragonu: wyśrodkowany, bez ikony */
.wiz-step__head--paper {
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: center;
}
.wiz-step__head--paper .wiz-step__count { color: var(--c-muted); }
.wiz-step__head--paper .wiz-step__title {
  margin-inline: auto;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wiz-step__head--paper .wiz-step__lead {
  max-width: 46ch;
  margin-inline: auto;
}

/* Podsumowanie błędów kroku między nagłówkiem a polami (styl z sekcji 6) */
.wiz-step:not(.wiz-step--paper) .wiz-step__errors { margin: 0 0 var(--s-4); }

.wiz-step__body > :first-child { padding-top: 0; }

/* Jedna oś w karcie także od 640 px: etykieta nad polem, jak nad kaflami (grupy kafli stoją w .row--full) i jak
   w Onboarding Wizard Form. Dwie kolumny z sekcji 7 (etykieta 160 px) mieszały w jednej karcie dwie lewe krawędzie
   treści. Paragon kroku 6 (zgoda) zostaje w układzie blankietu */
@media (min-width: 640px) {
  .wiz-step:not(.wiz-step--paper) .row { grid-template-columns: minmax(0, 1fr); }
  .wiz-step:not(.wiz-step--paper) .row > * { grid-column: 1; }
  .wiz-step:not(.wiz-step--paper) .row--group > legend.row__label { padding-top: 0; }
  .wiz-step:not(.wiz-step--paper) .row--group > .size { padding-top: 0; }
}

/* Pola w kartach: cienkie pełne linie (kropki i kreski to język blankietu paragonu) */
.wiz-step:not(.wiz-step--paper) .inp { border-bottom-style: solid; }
.wiz-step:not(.wiz-step--paper) .inp--area { border-style: solid; }

/* Przyciski kroku (Onboarding Wizard Form: jeden szeroki „Dalej”, „Wstecz” obrysowany obok). Poniżej 768 px
   (treść karty do 576 px; trzy przyciski potrzebują ok. 540 px, więc przy 640-703 px „Dalej” spadał pod pozostałe)
   „Wróć do sprawdzenia” schodzi na pełną szerokość pod parę Wstecz/Dalej (jedyna różnica kolejności wizualnej
   i DOM, dla przycisku sąsiadującego z obydwoma) */
.wiz-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--bw-hair) solid var(--c-hair);
}
.wiz-step__actions .btn { min-height: 52px; }
/* Węższe boki przycisków obrysowanych: od 640 px trzy przyciski mieszczą się w jednym wierszu */
.wiz__back,
.wiz__review { flex: 0 1 auto; padding-inline: var(--s-4); }
.wiz__next { flex: 1 1 auto; }

@media (max-width: 767px) {
  .wiz__review { flex-basis: 100%; order: 3; }
}
/* Najwęższe telefony (320 px, treść karty 246 px): węższe boki i odstęp, żeby „Wstecz” i „Dalej” zostały parą
   w jednym wierszu (inaczej główna akcja spadała pod drugorzędną) */
@media (max-width: 359px) {
  .wiz-step__actions { gap: var(--s-2); }
  .wiz-step__actions .btn { padding-inline: var(--s-3); }
}

/* Wejście kroku: przenikanie i 22 px w kierunku ruchu, tylko po .is-settled (nie na wejściu strony, nie przy
   przywróceniu kroku) i bez ograniczenia ruchu; wyjście bez animacji (krok dostaje hidden od razu) */
@media (prefers-reduced-motion: no-preference) {
  .receipt-wrap.is-settled .wiz-step.is-entering { animation: wiz-enter var(--dur-2) var(--ease) both; }
}
@keyframes wiz-enter {
  from { opacity: 0; translate: var(--wiz-dx) 0; }
  to { opacity: 1; translate: 0 0; }
}

/* ==========================================================================
   8. Pola (3.8): kropkowana linia blankietu, textarea w przerywanej ramce
   ========================================================================== */

.inp {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: var(--bw-hair) dotted var(--c-ink-55);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-1) var(--ease);
}
.inp::placeholder { color: var(--c-muted); opacity: 1; }
.inp:focus-visible {
  border-bottom: 2px solid var(--c-ink);
  margin-bottom: -1px;
  outline: 2px solid var(--c-accent-deep);
  outline-offset: 3px;
}
.inp[aria-invalid="true"] {
  border-bottom: 2px solid var(--c-error);
  margin-bottom: -1px;
}

@media (hover: hover) {
  .inp:hover { border-bottom-color: var(--c-ink); }
}

.inp--select {
  padding-right: 40px;
  background-image: var(--i-caret);
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 18px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.inp--select option { color: var(--c-ink); }

.inp--number { font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.inp--number::-webkit-outer-spin-button,
.inp--number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.inp--date,
.inp--time { font-variant-numeric: tabular-nums; }
.inp--date::-webkit-calendar-picker-indicator,
.inp--time::-webkit-calendar-picker-indicator { cursor: pointer; }

.inp--area {
  min-height: 0;
  padding: 10px 12px;
  /* 62 %: jedyna widoczna granica pola, 4,09:1 na bieli i 3,79:1 na Cukrze pudrze (WCAG 1.4.11) */
  border: var(--bw-hair) dashed var(--c-ink-62);
  border-radius: var(--r-xs);
  line-height: 1.5;
  resize: vertical;
}
.inp--area:focus-visible {
  margin-bottom: 0;
  border: var(--bw-hair) solid var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ink);
}
.inp--area[aria-invalid="true"] {
  margin-bottom: 0;
  border: var(--bw-hair) solid var(--c-error);
  box-shadow: inset 0 0 0 1px var(--c-error);
}

/* Licznik napisu */
.row__field--counter .inp { padding-right: 56px; }
.counter {
  position: absolute;
  right: 0;
  bottom: 12px;
  font-size: var(--fs-meta);
  line-height: 1;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Grupa dostawy: Cukier puder; bez JS chowana przez :has, z JS przez hidden + disabled (5.4) */
.delivery {
  margin-top: var(--s-2);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--c-tint);
}
.wiz:has(input[name="odbior"][value="odbior"]:checked) .delivery { display: none; }
.wiz:has(input[name="odbior"][value="dostawa"]:checked) #pole-godzina { display: none; }
.delivery .inp { border-bottom-color: var(--c-ink-62); }

/* Przełożenia: bez JS cztery listy widoczne tylko przy „Wybiorę sam(a)” (tam, gdzie działa :has);
   z JS form.js ustawia hidden + disabled i czyści wybór (syncPrzelozenia) */
.wiz:has(input[name="przelozenia"][value="doradzcie"]:checked) .budowa__grupa { display: none; }

/* ==========================================================================
   9. Pola wyboru (3.9): kwadratowe pudełka paragonu, fokus na pudełku
   ========================================================================== */

.opts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
}
/* Kształt (siedem krótkich opcji) w dwóch kolumnach także na telefonie: krok „Tort” krótszy o ok. 130 px */
.opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) {
  .opts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts--3 { display: flex; flex-wrap: wrap; gap: 0 28px; }
}

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  font-size: var(--fs-body);
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.opt > input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0;
  opacity: 0;
  pointer-events: none;
}
.box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: var(--bw-btn) solid var(--c-ink-55);
  background: var(--c-white);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.box svg { width: 14px; height: 14px; color: var(--c-ink-dark); opacity: 0; }
.box--radio { border-radius: 50%; }
.box--radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ink-dark);
  opacity: 0;
}
.opt > input:checked + .box { background: var(--c-ink); border-color: var(--c-ink); }
.opt > input:checked + .box svg,
.opt > input:checked + .box--radio::after { opacity: 1; }
.opt > input:checked ~ .opt__text { font-weight: 600; }
.opt > input:focus-visible + .box { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
.row--error .box,
.consent--error .box { border-color: var(--c-error); }

@media (hover: hover) {
  .opt:hover .opt__text { color: var(--c-accent-deep); }
  .opt:hover .box { border-color: var(--c-ink); }
}

.opt--consent {
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: 1.55;
}
.opt--consent .box { margin-top: 2px; }
.opt--consent > input { top: 12px; }
.opt--consent strong { font-weight: 700; }

/* ==========================================================================
   9a. Kafle wyboru (SPEC-v2-formularz-kroki 6.3; Icon Card Radio Group i Choice Cards z tablicy, bez ikon)
   Okazja, rodzaj, biszkopt i sposób odbioru: cały kafel jest celem (min. 56 px), radio ukryte w label, pudełko
   w kole z ptaszkiem (ten sam znak co w szynie). Zaznaczony: Róż pastelowy i obrys 2 px w tuszu (inset, bez skoku
   układu). Kwota po prawej w Karmelu (Choice Cards), opis pod etykietą w Popiele. .tile__box ma własne reguły
   (także forced-colors), niezależne od .box z sekcji 9. Grupy kafli stoją w .row--full: kafle na pełnej treści
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tiles > li { display: flex; min-width: 0; }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) {
  .tiles--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .tiles--2,
  .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tile {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  border: var(--bw-hair) solid var(--c-ink-55);
  border-radius: var(--r-sm);
  background: var(--c-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.tile__input {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0;
  opacity: 0;
  pointer-events: none;
}
.tile__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: var(--bw-btn) solid var(--c-ink-55);
  border-radius: 50%;
  background: var(--c-white);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tile__box svg { width: 14px; height: 14px; color: var(--c-ink-dark); opacity: 0; }
.tile__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tile__label {
  font-size: var(--fs-body);
  line-height: 1.3;
}
.tile__meta {
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--c-muted);
}
.tile__price {
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  padding-top: 3px;
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-accent-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Telefon: kwota pod opisem, w linii tekstu (obok etykiety zostawiała na nazwę ok. 150 px i trzy linijki) */
@media (max-width: 479px) {
  .tile { flex-wrap: wrap; row-gap: 2px; }
  .tile__text { flex: 1 1 0; }
  .tile__price {
    flex-basis: 100%;
    margin-left: calc(20px + var(--s-3));
    padding-top: 0;
  }
}

/* Okazja przy 320 px (dwie kolumny po 120 px, na tekst 64 px): „dorosłego” wychodziło poza obrys kafla */
@media (max-width: 359px) {
  .tiles--2 .tile { gap: var(--s-2); padding-inline: var(--s-2); }
  .tiles--2 .tile__label { font-size: var(--fs-small); }
}
/* Biszkopt na telefonie: trzy kafle w jednym rzędzie (krok „Tort” krótszy o ok. 100 px), pudełko nad etykietą,
   więc „Doradźcie mi” ma całą szerokość kolumny. Poniżej 360 px zostaje jedna kolumna (etykieta dotykałaby obrysu) */
@media (min-width: 360px) and (max-width: 639px) {
  .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles--3 .tile {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    text-align: center;
  }
  .tiles--3 .tile__text { flex: none; }
  .tiles--3 .tile__label { font-size: var(--fs-small); }
}

/* Zaznaczony: :has na kaflu, pudełko także bez :has (przeglądarki bez wsparcia widzą stan w pudełku) */
.tile:has(.tile__input:checked) {
  border-color: var(--c-ink);
  background: var(--c-pink);
  box-shadow: inset 0 0 0 1px var(--c-ink);
}
.tile__input:checked + .tile__box { border-color: var(--c-ink); background: var(--c-ink); }
.tile__input:checked + .tile__box svg { opacity: 1; }
.tile__input:checked ~ .tile__text .tile__label { font-weight: 600; }

/* Fokus na całym kaflu; bez :has obrys na pudełku (jak dziś przy .box) */
.tile:has(.tile__input:focus-visible) { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
.tile__input:focus-visible + .tile__box { outline: 2px solid var(--c-accent-deep); outline-offset: 2px; }
@supports selector(:has(*)) {
  .tile__input:focus-visible + .tile__box { outline: none; }
}

.row--error .tile,
.row--error .tile__box { border-color: var(--c-error); }

@media (hover: hover) {
  .tile:hover { border-color: var(--c-ink); background: var(--c-tint); }
  .tile:has(.tile__input:checked):hover { background: var(--c-pink); }
}

/* ==========================================================================
   10. Combobox galerii i chipy (3.10)
   ========================================================================== */

.picker { position: relative; margin-top: 4px; }
.picker__field { position: relative; }
.picker__icon {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}
.picker__input { padding-left: 28px; text-overflow: ellipsis; }

.picked {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
/* Pozycja listy może być węższa od nazwy: pigułka zwęża się, a nazwa skraca wielokropkiem (320 px, WCAG 1.4.10) */
.picked > li { min-width: 0; max-width: 100%; }
.chip-tort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 44px;
  padding: 4px 4px 4px 6px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: var(--c-ink);
  line-height: 1.2;
}
.chip-tort__thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  background: var(--c-white);
  object-fit: cover;
  object-position: 50% 30%;
}
.chip-tort__thumb svg { width: 18px; height: 18px; }
.chip-tort__nr {
  flex: none;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.chip-tort__name {
  min-width: 0;
  max-width: 176px;
  overflow: hidden;
  font-size: var(--fs-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picked--static .chip-tort { padding-right: 14px; }
/* Przycisk „Usuń”: cel 44 px, widoczne koło 32 px (margines ujemny nie powiększa pigułki) */
.chip-tort__remove {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -4px -6px -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip-tort__remove::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-white) 55%, transparent);
  transition: background-color var(--dur-1) var(--ease);
}
.chip-tort__remove svg { position: relative; width: 16px; height: 16px; }
.chip-tort__remove:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }  /* Kakao na Różu marki 5,02:1 */

@media (hover: hover) {
  .chip-tort__remove:hover::before { background: var(--c-white); }
}

.picker__list,
.picker__empty {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-white);
  box-shadow: var(--sh-lift);
}
.picker__list {
  max-height: 304px;
  overflow: auto;
  overscroll-behavior: contain;
}
.picker__empty {
  padding: 16px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}

.picker__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border-bottom: var(--bw-hair) solid var(--c-hair);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.picker__opt:last-child { border-bottom: 0; }
.picker__opt.is-active {
  background: var(--c-tint);
  box-shadow: inset 0 0 0 2px var(--c-accent-deep);
}
.picker__opt[aria-disabled="true"] { cursor: not-allowed; }
.picker__opt[aria-disabled="true"] .picker__name { color: var(--c-muted); }
.picker__thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-xs);
  background: var(--c-tint);
  object-fit: cover;
  object-position: 50% 30%;
}
.picker__thumb svg { width: 22px; height: 22px; }
.picker__text { flex: 1; min-width: 0; }
.picker__name {
  display: block;
  overflow: hidden;
  font-size: var(--fs-body);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker__nr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.picker__nr svg { width: 12px; height: 12px; }
.picker__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: var(--bw-btn) solid var(--c-ink-55);
  border-radius: 50%;
}
.picker__check svg { width: 12px; height: 12px; color: var(--c-ink-dark); opacity: 0; }
.picker__opt[aria-selected="true"] .picker__check { background: var(--c-ink); border-color: var(--c-ink); }
.picker__opt[aria-selected="true"] .picker__check svg { opacity: 1; }
.picker__opt[aria-selected="true"] .picker__name { font-weight: 600; }

@media (hover: hover) {
  .picker__opt:not([aria-disabled="true"]):hover { background: var(--c-tint); }
}

@media (max-width: 479px) {
  /* Telefon: lista na całą szerokość papieru (318 px treści + marginesy papieru) */
  .picker__list,
  .picker__empty { left: -20px; right: -20px; }
  .picker__list { max-height: 50vh; }
}

/* ==========================================================================
   11. Pliki (3.8): własny przycisk, strefa upuszczania, lista z miniaturami
   ========================================================================== */

.drop {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 4px;
  padding: 20px;
  border: 2px dashed var(--c-ink-50);
  border-radius: var(--r-md);
  background: var(--c-tint);
  text-align: center;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.drop.is-dragover { border-color: var(--c-ink); background: var(--c-pink); }
.drop__icon { width: 28px; height: 28px; }
.drop__text { font-size: var(--fs-small); line-height: 1.3; }
.drop__btn { min-height: 44px; }
.drop__input:focus-visible + .drop__btn { outline: 2px solid var(--c-accent-deep); outline-offset: 3px; }
.row--error .drop { border-color: var(--c-error); }
/* Wariant lżejszy dla pola dodatkowego (opłatek): niższy, cieńsza linia, przygaszony tekst (decyzja 2026-09-28) */
.drop--slim { padding: 8px 14px; gap: 6px 10px; border-width: 1px; }
.drop--slim .drop__icon { width: 20px; height: 20px; color: var(--c-muted); }
.drop--slim .drop__text { color: var(--c-muted); }

@media (hover: none) and (pointer: coarse) {
  .drop { padding: 0; border: 0; background: none; }
  .drop__icon,
  .drop__text { display: none; }
  .drop__btn { width: 100%; }
}

.files {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.files__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px;
  border: var(--bw-hair) solid var(--c-hair);
  border-radius: var(--r-sm);
  background: var(--c-white);
}
.files__thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-xs);
  background: var(--c-tint);
  object-fit: cover;
}
.files__thumb svg { width: 24px; height: 24px; }
.files__info { display: grid; flex: 1; min-width: 0; }
.files__name {
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 1.35;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files__size {
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
  .files__thumb { width: 48px; height: 48px; }
}

/* ==========================================================================
   12. Podsumowanie na żywo (3.16), zgody (3.11), podpis i pieczątka (3.12)
   ========================================================================== */

.receipt__sum { display: grid; gap: 4px; }
.receipt__sum > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.receipt__sum dd {
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.receipt__sum-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: var(--bw-hair) solid var(--c-ink);
}
.receipt__sum-total dd { font-weight: 400; font-style: italic; }
/* W kroku 6 „Razem” stoi sam między przerywanymi liniami (wiersze podsumowania przeszły do przeglądu) */
.receipt__sum-total:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.receipt__consent-lead {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-muted);
}
.consent { margin-top: var(--s-3); }
.consent .err { margin-top: 4px; padding-left: 30px; }
.consent__info { margin-top: var(--s-3); }

.receipt__sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}
.receipt__signature {
  display: grid;
  flex: 1;
  min-width: 160px;
  max-width: 320px;
}
.receipt__caveat {
  display: block;
  margin-bottom: 4px;
  padding-left: 6px;
  font-family: var(--ff-script);
  font-size: 36px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--c-accent);
  transform: rotate(-4deg);
  transform-origin: left bottom;
}
.receipt__signature-label {
  padding-top: 6px;
  border-top: var(--bw-hair) solid var(--c-ink);
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.receipt__stamp {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  flex: none;
  width: 96px;
  height: 96px;
  margin-right: 4px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
  color: var(--c-muted);
  opacity: .55;
  font-family: var(--ff-display);
  font-weight: 700;
  font-stretch: 78%;
  line-height: 1.05;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-13deg);
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.receipt__stamp-top,
.receipt__stamp-nr { font-size: 11px; }
.receipt__stamp-nr { letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt__stamp-state {
  padding-block: 2px;
  border-block: var(--bw-hair) solid currentColor;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}
.receipt__stamp.is-ready {
  color: var(--c-accent);
  opacity: 1;
  box-shadow: inset 0 0 0 3px var(--c-white), inset 0 0 0 4px var(--c-brand);
}

@media (max-width: 479px) {
  .receipt__sign { gap: 16px; }
  .receipt__caveat { font-size: 30px; }
  .receipt__stamp { width: 80px; height: 80px; gap: 2px; }
  .receipt__stamp-top,
  .receipt__stamp-nr { font-size: 9.5px; }
  .receipt__stamp-state { font-size: 12px; }
}

/* ==========================================================================
   12a. Przegląd w kroku 6 (SPEC-v2-formularz-kroki 5)
   Paragon kroku 6 jako wydrukowane streszczenie: skrócony nagłówek (logo i nazwa w jednym wierszu), nota braków,
   grupy kroków 1-5 z „Zmień” i wierszami etykieta-wartość (dl.summary z sekcji 14, kropkowana linia paragonu
   zamiast zaokrąglonych wierszy z Wizard Steps)
   ========================================================================== */

.receipt__head--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: 0;
}
.receipt__head--compact .receipt__logo {
  width: 40px;
  height: 40px;
  margin: 0;
  outline-offset: 2px;
}
.receipt__head--compact .receipt__logo img { width: 28px; height: 28px; }
.receipt__head--compact .receipt__brand { margin: 0; font-size: 28px; }
.receipt__head--compact .receipt__contact { flex-basis: 100%; margin-top: 0; }

.review__missing { margin-top: var(--s-4); }

/* Karta opinii na stronie głównej to .review-card (site.css 5.10), tu .review jest tylko przeglądem zamówienia */
.review {
  position: static;
  display: grid;
  gap: var(--s-5);
  height: auto;
  padding: 0;
  border-radius: 0;
}
.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border-bottom: var(--bw-hair) solid var(--c-ink);
}
.review__title {
  font-family: var(--ff-display);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* „Zmień”: cel 44 px, podkreślenie w Malinie jak .btn--ghost */
.review__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  margin-right: calc(-1 * var(--s-2));
  padding: 0 var(--s-2);
  border-radius: var(--r-xs);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.review__edit svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .review__edit:hover { color: var(--c-accent-deep); text-decoration-thickness: 2px; }
}
.review .summary__row:last-child { border-bottom: 0; }
/* Bez JS przegląd jest pusty: bez niego i bez drugiej przerywanej linii pod nim */
.review:empty,
.review:empty + .receipt__rule { display: none; }
/* Wiersze przeglądu jak w Wizard Steps: etykieta po lewej, wartość po prawej, od 480 px. Węziej (320-479 px)
   kolumna wartości miała ok. 100 px i e-mail łamał się w środku słowa: jedno pod drugim jak streszczenie na ekranie
   podziękowania */
.review .summary dt { letter-spacing: .1em; }
@media (min-width: 480px) {
  .review .summary__row {
    grid-template-columns: minmax(0, 8.25rem) minmax(0, 1fr);
    align-items: baseline;
  }
}
@media (min-width: 640px) {
  .review .summary__row { grid-template-columns: 180px minmax(0, 1fr); }
}
.review__empty {
  padding-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--c-muted);
}
.summary__missing {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-error);
  font-weight: 600;
}
.summary__missing svg { width: var(--icon-sm); height: var(--icon-sm); }

/* ==========================================================================
   13. Kod kreskowy, „Dziękujemy”, przycisk, stopka paragonu, dopisek (3.13, 3.14)
   ========================================================================== */

.receipt__barcode {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 60px;
  margin-top: 24px;
}
.bar {
  display: block;
  flex: none;
  height: 86%;
  background: var(--c-ink);
}
.bar--tall { height: 100%; }
.bar--faint { opacity: .35; }
.bar--w1 { width: 1px; }
.bar--w2 { width: 2px; }
.bar--w3 { width: 3px; }
.bar--w4 { width: 4px; }
.bar--w6 { width: 6px; }

.receipt__barcode-nr {
  margin-top: 12px;
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.receipt__thanks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 32px auto 0;
  font-family: var(--ff-display);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
}
.receipt__thanks svg { width: 22px; height: 22px; }
/* Rozstrzelenie dodaje odstęp po ostatniej literze: oddajemy go, żeby gwiazdki stały symetrycznie */
.receipt__thanks span { margin-right: -.2em; }
.receipt__thanks-note {
  margin-top: 10px;
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-muted);
}

@media (max-width: 479px) {
  .receipt__thanks { gap: 10px; font-size: 24px; letter-spacing: .12em; }
  .receipt__thanks svg { width: 18px; height: 18px; }
  .receipt__thanks span { margin-right: -.12em; }
}

.receipt__captcha {
  margin-top: 24px;
  text-align: center;
}

.receipt__submit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-4);
  margin-top: 24px;
  text-align: center;
}
.receipt__submit .wiz__back { min-height: 52px; }
.btn--offset {
  min-height: 52px;
  padding: 0 40px;
}
.btn--offset::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--bw-btn));
  border: var(--bw-btn) solid var(--c-ink);
  border-radius: var(--r-pill);
  opacity: .55;
  transform: translate(3px, 4px);
  pointer-events: none;
  transition: transform var(--dur-1) var(--ease);
}
.btn--offset[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn--offset:disabled { opacity: .6; }

@media (hover: hover) {
  .btn--offset:not(:disabled):hover::after { transform: translate(0, 0); }
}

.receipt__submit-note {
  flex-basis: 100%;
  max-width: 44ch;
  margin: 2px auto 0;
  text-align: center;
}

@media (max-width: 479px) {
  .btn--offset { display: flex; width: 100%; min-height: 56px; padding-inline: 20px; }
  .receipt__submit .wiz__back { width: 100%; }
}

.receipt__foot {
  margin-top: 20px;
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-muted);
}

/* Dopisek w rogu: na telefonie w przepływie pod stopką (bez nachodzenia), od 640 px wystaje za papier */
.receipt__corner {
  position: relative;
  z-index: 3;
  margin-top: 16px;
  padding-right: 4px;
  font-family: var(--ff-script);
  font-size: 26px;
  line-height: .9;
  font-weight: 700;
  color: var(--c-accent-deep);
  text-align: right;
  transform: rotate(-8deg);
  transform-origin: right center;
  pointer-events: none;
}

@media (min-width: 640px) {
  .receipt__corner {
    position: absolute;
    right: -12px;
    bottom: 30px;
    margin: 0;
    padding: 0;
    font-size: 30px;
  }
}
@media (min-width: 768px) {
  .receipt__corner { right: -24px; }
}

/* ==========================================================================
   14. Ekran podziękowania (7)
   ========================================================================== */

.receipt--thanks { text-align: left; }
.thanks__badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-ink-dark);
}
.thanks__badge svg { width: 32px; height: 32px; }
.thanks__over { margin: 16px 0 0; }
.receipt__thanks.thanks__title { margin-top: 12px; }
.thanks__title:focus { outline: none; }
.thanks__title:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 6px; }
.thanks__lead {
  max-width: 46ch;
  margin: 16px auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-small);
  text-align: center;
  overflow-wrap: anywhere;
}
.thanks__save { text-align: left; }

/* Ticket (hierarchia Ticket Confirmation Card, SPEC-v2-formularz-kroki 7): numer formularza i termin odbioru dużym
   krojem tuż pod „Dziękujemy”, szczegóły niżej. Bez posypki i ruchu */
.ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: var(--bw-hair) dashed var(--c-ink-60);
  border-radius: var(--r-sm);
  background: var(--c-tint);
  text-align: left;
}
.ticket dt {
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ticket dd { margin-top: var(--s-1); }
.ticket__nr {
  font-family: var(--ff-display);
  font-size: var(--fs-number);
  line-height: 1;
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticket__date {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  text-wrap: balance;
}
.ticket__hour {
  display: block;
  margin-top: 2px;
  font-family: var(--ff-text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 400;
  color: var(--c-muted);
}
@media (min-width: 640px) {
  .ticket { grid-template-columns: minmax(max-content, 1fr) minmax(0, 1.4fr); column-gap: var(--s-5); }
}

.summary { display: grid; }
.summary__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 16px;
  padding: 8px 0;
  border-bottom: var(--bw-hair) dotted var(--c-ink-40);
}
.summary__row--group { margin-top: 14px; }
.summary__row:first-child { margin-top: 0; }
.summary dt {
  font-family: var(--ff-display);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.summary dd {
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.summary dd .picked { margin: 2px 0 0; }
.summary__file { display: block; }
.summary__file span { color: var(--c-muted); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .summary__row {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: baseline;
  }
}

.next-steps { display: grid; gap: 10px; }
.next-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.next-steps__num {
  font-family: var(--ff-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  font-stretch: 75%;
  color: var(--c-accent-2);
  font-variant-numeric: tabular-nums;
}

.thanks__actions { justify-content: center; margin-top: 28px; }

.receipt__demo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding: 12px;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-butter);
  color: var(--c-ink);
}
.receipt__demo svg { width: var(--icon-md); height: var(--icon-md); margin-top: 1px; }

@media (max-width: 479px) {
  .thanks__actions { flex-direction: column; align-items: stretch; }
  .thanks__actions > * { justify-content: center; }
}

/* ==========================================================================
   15. Cennik pod paragonem (8)
   ========================================================================== */

.form-prices__inner { max-width: calc(768px + 2 * var(--gutter)); }

.price-card {
  position: relative;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.form-prices__raspberry {
  top: -26px;
  right: -14px;
  z-index: 1;
  --dd-size: 48px;
  --dd-sw: 4;
  --dd-rot: 12deg;
}
.price-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 20px;
}
.price-list__row + .price-list__row { border-top: var(--bw-hair) solid var(--c-hair); }
.price-list dt { font-size: var(--fs-body); line-height: 1.4; }
.price-list dd {
  font-family: var(--ff-display);
  font-size: var(--fs-price);
  line-height: var(--lh-price);
  font-weight: 700;
  color: var(--c-accent-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.price-list__row--text dd {
  max-width: 15em;
  font-size: var(--fs-small);
  line-height: 1.4;
  white-space: normal;
}

/* Dwie grupy w jednej karcie (decyzja D14): nagłówek grupy w Cukrze pudrze, grupy rozdziela linia w tuszu.
   Dopisek pod nazwą (.price-list__sub) i jednostka pod kwotą (.price-list__per) w Popiele ciemnym */
.price-group + .price-group { border-top: var(--bw-hair) solid var(--c-ink); }
.price-group__title {
  padding: 12px 20px;
  border-bottom: var(--bw-hair) solid var(--c-hair);
  background: var(--c-tint);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  line-height: var(--lh-meta);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
/* Pierwszy nagłówek wypełnia zaokrąglone rogi karty (bez overflow na karcie, bo malina wystaje poza nią) */
.price-group:first-of-type .price-group__title {
  border-radius: calc(var(--r-md) - var(--bw-hair)) calc(var(--r-md) - var(--bw-hair)) 0 0;
}
.price-list__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-muted);
}
.price-list__per {
  display: block;
  margin-top: 2px;
  font-family: var(--ff-text);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  font-weight: 400;
  color: var(--c-muted);
}

@media (max-width: 479px) {
  .price-list__row { padding-inline: 16px; }
  .price-group__title { padding-inline: 16px; }
  .price-list__row--text { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .price-list__row--text dd { max-width: none; text-align: left; }
}

.form-prices__note { margin-top: var(--s-4); }
.form-prices__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.form-prices__trust svg { width: var(--icon-md); height: var(--icon-md); margin-top: 1px; color: var(--c-ink); }
.form-prices__link { margin-top: var(--s-4); }

/* ==========================================================================
   15a. Najczęstsze pytania (decyzja 2026-09-26)
   ========================================================================== */

/* Nagłówek jak w innych sekcjach (.section-head, .overline, .lead), lista pod nim. Poprawki 2026-09-27: ta sama
   kolumna 768 px co cennik nad nią (.form-prices__inner) i paragon, bez siatki 5/12 + 7/12 z przyklejonym
   nagłówkiem, bo na tym samym tle Mąki lista zaczynała się (przy 1440 px) 216 px w lewo od cennika. Cennik i pytania to jeden
   blok pod formularzem, więc między nimi jeden odstęp sekcji, nie dwa */
.form-faq__inner { max-width: calc(768px + 2 * var(--gutter)); }
.form-prices + .form-faq { padding-top: 0; }

/* Lista: biała ramka z obrysem w tuszu (ramki Le Pain Quotidien i Levain), pytania rozdzielone włosem jak wiersze cennika */
.faq {
  overflow: clip;
  border: var(--bw-hair) solid var(--c-ink);
  border-radius: var(--r-md);
  background: var(--c-white);
}
.faq__item + .faq__item { border-top: var(--bw-hair) solid var(--c-hair); }

/* Pytanie: cały wiersz klikalny, bez natywnego trójkąta (jak .filters__toggle w page-gallery.css) */
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 700;
  font-stretch: 95%;
  text-wrap: pretty;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
/* Fokus w środku wiersza: ramka przycina wszystko, co wystaje poza zaokrąglone rogi */
.faq__q:focus-visible { outline-offset: -4px; border-radius: var(--r-sm); }

/* Plus w kole: dwie kreski z obrysów (zostają w forced-colors, gdzie tła znikają), po otwarciu obrót o 45° do „x” */
.faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: var(--bw-hair) solid currentColor;
  border-radius: 50%;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 14px;
  height: 0;
  margin: auto;
  border-top: var(--bw-btn) solid currentColor;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] > .faq__q .faq__icon { transform: rotate(45deg); }

.faq__a {
  padding: 0 var(--s-4) var(--s-5);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.faq__a p { max-width: var(--measure); }
/* Lista kroków w odpowiedzi FAQ (przewóz tortu): bez punktorów (reset list z klasą), krok nazywa pogrubiony początek */
.faq__steps { max-width: var(--measure); margin: var(--s-3) 0 0; }
.faq__steps li + li { margin-top: var(--s-2); }

@media (min-width: 480px) {
  .faq__q,
  .faq__a { padding-inline: var(--s-5); }
}
@media (min-width: 1024px) {
  .faq__q { min-height: 64px; }
}

@media (hover: hover) {
  .faq__q:hover { background: var(--c-tint); }
}

/* Pytanie z adresu (#pytanie-…, :target) otwiera się bez przejścia: przy wejściu na stronę nic się nie rusza */
@media (prefers-reduced-motion: no-preference) {
  .faq__q { transition: background-color var(--dur-1) var(--ease); }
  .faq__icon { transition: transform var(--dur-1) var(--ease); }
  .faq__item:target .faq__icon { transition: none; }
}

/* Płynne rozwijanie (progresywne ulepszenie): tylko z ::details-content i bez ograniczenia ruchu;
   bez wsparcia (albo bez interpolate-size) odpowiedź pojawia się od razu */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .form-faq { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete;
    }
    .faq__item[open]::details-content { block-size: auto; }
    .faq__item:target::details-content { transition: none; }
  }
}

/* ==========================================================================
   16. Ruch ograniczony, wysoki kontrast, wydruk (10, 11)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .receipt__stamp,
  .btn--offset::after,
  .box,
  .inp,
  .drop,
  .faq__q,
  .faq__icon,
  .tile,
  .tile__box,
  .wiz-rail__tile,
  .wiz-rail__label,
  .wiz-step { transition: none !important; }
  .wiz-rail__tile { scale: none !important; }
  .wiz-step { animation: none !important; }
  .btn--offset:hover::after { transform: translate(3px, 4px); }
}

@media (forced-colors: active) {
  .receipt__edge { display: none; }
  .inp { border-bottom-color: CanvasText; }
  .inp--area { border-color: CanvasText; }
  .box,
  .picker__check { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .opt > input:checked + .box,
  .picker__opt[aria-selected="true"] .picker__check { background: Highlight; border-color: Highlight; }
  .box svg,
  .picker__check svg { color: HighlightText; }
  .box--radio::after { background: HighlightText; }
  .chip-tort { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: HighlightText; }
  .chip-tort__remove { color: HighlightText; }
  .picker__opt.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .opt > input:focus-visible + .box { outline-color: Highlight; }
  /* Strzałka z tokenu ma Kakao na stałe: w trybie kontrastu wraca natywna strzałka w kolorach systemu */
  .inp--select { background-image: none; -webkit-appearance: menulist; appearance: auto; }
  /* Pytania: ramka, linie i plus w kole w kolorze tekstu systemu */
  .faq,
  .faq__item + .faq__item,
  .faq__icon,
  .faq__icon::before,
  .faq__icon::after { border-color: CanvasText; }
  /* Szyna kroków (3a): tła znikają, więc zakładka dostaje ramkę, kafle obrysy, gotowe wypełnienie Highlight,
     bieżący grubszy obrys i podkreśloną etykietę (jak lampka w site.css), segmenty obrysy */
  .wiz-rail__list { border: var(--bw-hair) solid CanvasText; }
  .wiz-rail__tile { forced-color-adjust: none; border: var(--bw-hair) solid CanvasText; background: Canvas; color: CanvasText; }
  /* Przyszły krok zostaje przerywany jak poza trybem kontrastu: jedyna różnica od odwiedzonego niezależna od koloru */
  .wiz-rail__btn.is-future .wiz-rail__tile { border-style: dashed; }
  .wiz-rail__btn.is-done .wiz-rail__tile { border-color: Highlight; background: Highlight; color: HighlightText; }
  .wiz-rail__badge { forced-color-adjust: none; border: var(--bw-hair) solid CanvasText; background: Canvas; color: CanvasText; }
  .wiz-rail__btn.is-error .wiz-rail__tile { border-color: CanvasText; color: CanvasText; }
  .wiz-rail__btn[aria-current="step"] .wiz-rail__tile { border-width: 2px; border-color: CanvasText; background: Canvas; color: CanvasText; }
  .wiz-rail__btn[aria-current="step"] .wiz-rail__label { text-decoration: underline 2px; text-underline-offset: 4px; }
  .wiz-rail__track i { forced-color-adjust: none; border: var(--bw-hair) solid CanvasText; background: Canvas; }
  .wiz-rail__track i.is-done { background: Highlight; border-color: Highlight; }
  /* Bez tego wygrywały reguły ekranu (Masło na Canvas, poniżej 3:1): bieżący sam obrys, błąd wypełnienie tekstem */
  .wiz-rail__track i.is-current { border-width: 2px; border-color: CanvasText; background: Canvas; }
  .wiz-rail__track i.is-error { border-color: CanvasText; background: CanvasText; }
  .wiz-rail__track i.is-future { border-style: dashed; }
  /* Karty i kafle: obrysy w kolorze tekstu, zaznaczony kafel w Highlight razem z opisem i ceną */
  .wiz-step,
  .ticket { border-color: CanvasText; }
  .tile { border-color: CanvasText; }
  .tile:has(.tile__input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .tile:has(.tile__input:checked) .tile__meta,
  .tile:has(.tile__input:checked) .tile__price { color: HighlightText; }
  .tile__box { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .tile__input:checked + .tile__box { background: HighlightText; border-color: HighlightText; }
  .tile__box svg { color: Highlight; }
  .tile:has(.tile__input:focus-visible) { outline-color: Highlight; }
  .review__head { border-color: CanvasText; }
}

@media print {
  .form-hero,
  .form-steps,
  .form-prices,
  .form-faq,
  .receipt__printer,
  .receipt__edge,
  .receipt__corner,
  .form-receipt__whisk,
  .receipt__submit,
  .receipt__soft,
  .receipt__captcha,
  .thanks__actions,
  .drop { display: none !important; }
  .form-receipt { padding: 0; background: none; }
  .receipt {
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .delivery { background: none; padding: 0; }
  /* Kreator (SPEC-v2-formularz-kroki 8.3). Z JS drukuje się sam paragon kroku 6 z aktualnym przeglądem
     (beforeprint, form.js), niezależnie od bieżącego kroku; (0,3,0) z !important wygrywa z [hidden] z site.css.
     Bez JS sześć kart z wpisanymi wartościami. Po wysłaniu formularz ma hidden, drukuje się podziękowanie */
  .wiz { width: 100%; }
  .wiz--on .wiz-step:not(.wiz-step--paper) { display: none !important; }
  .wiz--on .wiz-step--paper[hidden] { display: block !important; }
  .wiz-rail,
  .wiz-step__actions,
  .review__edit,
  .review__missing,
  .wiz-step__errors,
  .receipt__errors-global { display: none !important; }
  .wiz-step {
    border: 1px solid;
    border-radius: 0;
    break-inside: avoid;
  }
  /* Paragon jest dłuższy niż strona: bez avoid, żeby nie zaczynał się dopiero na drugiej stronie */
  .wiz-step--paper,
  .wiz--on .wiz-step--paper { margin: 0; border: 0; break-inside: auto; }
  .wiz-step + .wiz-step { margin-top: 16px; }
}

/* ==========================================================================
   16. Budowa tortu (plan „Budowa tortu”): przełącznik przełożeń, grafika przekroju i cztery listy.
   ========================================================================== */

/* Układ grupy: przełącznik, potem grafika nad polami (cicha, wyśrodkowana, nie dominuje) i cztery listy. */
.budowa { min-width: 0; padding: 8px 0; }
.budowa__switch { padding-top: 0; }
.budowa__uklad { display: grid; gap: var(--s-4); min-width: 0; margin-top: var(--s-2); }

.budowa__grafika { margin: 0 auto; width: 100%; max-width: 640px; min-width: 0; }
/* Na telefonie grafika bez panelu (cała szerokość dla przekroju i podpisów), od 480 px w jasnym panelu */
@media (min-width: 480px) {
  .budowa__grafika {
    padding: var(--s-4) var(--s-3);
    border-radius: var(--r-lg);
    background: var(--c-bg);
    box-shadow: inset 0 0 0 1px var(--c-hair);
  }
}

.budowa__grupa + .budowa__grupa { margin-top: var(--s-3); }
.budowa__grupa-tytul {
  display: inline-block;
  margin-bottom: 4px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--c-pink);
  font-family: var(--ff-nav);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
}