/* Pierogowe Love — /zamow/: konfigurator zgłoszenia zamówienia. Wczytywany tylko na /zamow/ (po main.css i form.css).
   Te same tokeny co HOME; nowe są tylko wymiary komponentów. Bohaterowie: nazwy smaków (Fraunces), Firmowe (Malina)
   i „bilecik” zamówienia z falbanką — karteczka, która zapełnia się, gdy dodajesz paczki.
   Bez JS: lista z polami liczbowymi + formularz (bilecik, pasek i arkusz są ukryte). */

@layer sections {
  .order { --qty-btn: 48px; --row-pad: clamp(0.875rem, 0.7rem + 0.6vw, 1.25rem); --orderbar-h: 72px; --cats-h: 60px; }

  /* ═════════ A. Intro — kompaktowe, od razu do działania ═════════ */
  .order-intro { display: grid; gap: 1.5rem; padding-top: clamp(1.75rem, 1rem + 3vw, 4rem); }
  .order-intro__text { display: grid; gap: 1rem; justify-items: start; align-content: start; }
  .order-intro__title { font-size: clamp(2.25rem, 1.55rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -0.015em; max-width: 13ch; }
  .order-intro__lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--color-text-muted); max-width: 32ch; }
  .order-intro__media { display: none; }

  .order-facts { display: grid; width: 100%; max-width: 40rem; margin-top: 0.25rem; font-size: var(--fs-small); }
  .order-facts > div { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.5rem; border-top: 1px dashed var(--line); }
  .order-facts > div:last-child { border-bottom: 1px dashed var(--line); }
  .order-facts dt { font-weight: 600; color: var(--color-text-muted); }
  .order-facts dd { font-variant-numeric: tabular-nums; }

  @media (min-width: 768px) {
    .order-intro { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
    .order-intro__media { display: block; justify-self: end; width: min(100%, 22rem); rotate: 2deg; margin-bottom: 0.5rem; }
    .order-intro__media img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 30px 50px -34px rgb(60 38 20 / 0.55); }
    .order-facts { font-size: 1rem; }
  }

  /* ═════════ Układ: lista + dane (lewa) · bilecik (prawa, sticky) od 1024 px ═════════ */
  .order-form { display: grid; gap: 2.5rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: var(--section-y); }
  .order-main { display: grid; gap: clamp(3rem, 2rem + 4vw, 5rem); min-width: 0; }
  /* minmax(0, 1fr): przewijany w poziomie pasek kategorii nie może poszerzyć kolumny ponad ekran telefonu. */
  .order-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
  .order-picks:focus { outline: none; }
  .order-ticket { display: none; }
  @media (min-width: 1024px) {
    .js .order-form { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
    .js .order-ticket { display: block; position: sticky; top: calc(var(--header-h) + 1.75rem); }
  }

  /* ═════════ B. Smaki ═════════ */
  .flavour { position: relative; }
  .flavour__name { font-family: var(--font-display); font-weight: 620; font-size: clamp(1.3125rem, 1.15rem + 0.55vw, 1.625rem); line-height: 1.1; letter-spacing: -0.008em; }
  .flavour__qualifier { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); }
  .flavour__filling { margin-top: 0.35rem; color: var(--crust); line-height: 1.4; }
  .flavour__serve { margin-top: 0.15rem; font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.4; }
  .flavour__badges { margin-top: 0.5rem; }
  /* Cena paczki przy smaku — ta sama plakietka co w katalogach (main.css .price), tu nieco mniejsza. */
  .flavour__price { margin-top: 0.5rem; }
  .flavour__price .price__amount { font-size: 1.1875rem; }
  .flavour--signature .flavour__price { margin-top: 1rem; }
  .flavour--signature .price__unit, .flavour--signature .price__per { color: inherit; }
  .flavour--signature .price__tbc { border-color: rgb(255 253 249 / 0.75); color: var(--flour); }
  .badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: var(--chip-radius);
    background: rgb(86 112 74 / 0.12); color: #3F5536; font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  }
  .badge::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }

  .flavour-group { display: grid; gap: 0.75rem; scroll-margin-top: calc(var(--header-h) + var(--cats-h) + 1rem); }
  .flavour-group[hidden], .flavour-list > .flavour[hidden] { display: none; }
  .flavour-group__head { display: grid; gap: 0.25rem; }
  .flavour-group__head .flavour-group__title { margin-bottom: 0.25rem; }
  .flavour-group__meta { order: 2; font-size: var(--fs-small); color: var(--color-text-muted); }
  /* Jak się zamawia produkt spoza paczek (sztuki, opakowania, wagę) — drobna linijka pod ceną. */
  .flavour__unit { margin-top: 0.35rem; font-size: var(--fs-small); line-height: 1.4; color: var(--color-text-muted); max-width: 36ch; }
  .flavour-group__title {
    display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--crust);
    font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem); line-height: 1.05; letter-spacing: -0.01em;
  }
  .flavour-group__title::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--group-dot, var(--butter)); }
  .flavour-group--na-slodko { --group-dot: var(--raspberry); }

  /* Wiersz menu: nazwa jest bohaterem; zdjęcie (gdy jest) po prawej, więc nazwy wszystkich smaków stoją w jednej linii. */
  .flavour-list { container-type: inline-size; }
  .flavour-list > .flavour {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info media" "qty qty";
    column-gap: 1rem; row-gap: 0.875rem; padding: var(--row-pad) clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--header-h) + var(--cats-h) + 1rem); scroll-margin-bottom: calc(var(--orderbar-h) + 1rem);
    transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
  }
  .flavour-list > .flavour:last-child { border-bottom-color: transparent; }
  .flavour__info { min-width: 0; }
  .flavour-list .flavour__info { grid-area: info; }
  .flavour-list .flavour__media { grid-area: media; width: 76px; }
  .flavour-list .flavour__media img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 18px -12px rgb(60 38 20 / 0.5); }
  .flavour-list .qty { grid-area: qty; justify-self: end; }

  /* Wybrany smak: maślane tło + pasek po lewej (kolor nie jest jedynym nośnikiem — jest też licznik „N paczek”). */
  .flavour-list > .flavour.is-selected { background: var(--butter-soft); border-bottom-color: transparent; border-radius: 14px; box-shadow: inset 4px 0 0 var(--butter); }
  .flavour-list > .flavour:has(+ .flavour.is-selected) { border-bottom-color: transparent; }

  @container (min-width: 34rem) {
    .flavour-list > .flavour { grid-template-columns: minmax(0, 1fr) auto 11.75rem; grid-template-areas: "info media qty"; align-items: center; column-gap: clamp(1rem, 2.5cqi, 1.75rem); }
    .flavour-list .flavour__media { width: 112px; }
  }

  /* — Firmowe: karta wyróżniona (Malina tylko tutaj i w akcentach Firmowych) — */
  .flavour--signature {
    display: grid; overflow: hidden; border-radius: 20px; background: var(--raspberry); color: var(--flour);
    scroll-margin-top: calc(var(--header-h) + 1rem);
    transition: box-shadow var(--dur-base) ease;
  }
  .flavour--signature :focus-visible { outline-color: var(--color-focus-on-dark); }
  .flavour--signature .flavour__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }
  .flavour__body { display: grid; gap: 1.5rem; align-content: space-between; padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
  .flavour__tag { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; font-size: var(--fs-small); font-weight: 600; color: var(--flour); }
  .flavour__tag::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
  .flavour--signature .flavour__name { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1; letter-spacing: -0.015em; }
  .flavour--signature .flavour__qualifier { margin-top: 0.4rem; font-size: 1.0625rem; color: var(--flour); }
  .flavour__note { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.45; max-width: 30ch; }
  .flavour--signature .qty { justify-self: start; }
  .flavour--signature.is-selected { outline: 4px solid var(--butter); outline-offset: -4px; } /* outline rysuje się nad zdjęciem */
  @media (min-width: 640px) {
    .flavour--signature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .flavour--signature .flavour__media img { height: 100%; aspect-ratio: 4 / 5; }
  }

  /* ═════════ Kontrolka ilości: „Dodaj” ↔ „− N paczek +”. Stała szerokość — „+” nie ucieka spod palca. ═════════ */
  .qty { display: flex; align-items: center; min-height: var(--qty-btn); }
  .qty-native { display: grid; gap: 0.25rem; font-size: var(--fs-small); font-weight: 600; }
  .qty-native__input {
    width: 6.5rem; min-height: 48px; padding: 0.5rem 0.75rem; border: 1.5px solid var(--color-border-control); border-radius: 10px;
    background: var(--flour); font-size: 1.0625rem; font-variant-numeric: tabular-nums;
  }
  .qty__add, .qty__stepper { display: none; }
  .js .qty-native { display: none; }
  .js .qty__add:not([hidden]) { display: inline-flex; }
  .js .qty__stepper:not([hidden]) { display: inline-grid; }

  .qty__add {
    align-items: center; justify-content: center; gap: 0.4rem; min-width: 7.25rem; height: var(--qty-btn); padding: 0 1.1rem;
    border: 2px solid var(--crust); border-radius: var(--button-radius); background: var(--flour); color: var(--crust);
    font-weight: 600; font-size: 1.0625rem; line-height: 1;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
  }
  .qty__add .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.25; }
  .qty__add:hover { background: var(--crust); color: var(--flour); }
  .qty__add:active { transform: scale(0.97); }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .qty__add:hover { translate: 0 -2px; box-shadow: 0 4px 0 0 var(--butter); }
  }

  .qty__stepper { grid-template-columns: var(--qty-btn) minmax(5.25rem, auto) var(--qty-btn); align-items: center; gap: 0.25rem; }
  .qty__btn {
    display: grid; place-items: center; width: var(--qty-btn); height: var(--qty-btn); padding: 0;
    border: 2px solid var(--crust); border-radius: 12px; background: var(--flour); color: var(--crust);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .qty__btn--inc { background: var(--crust); color: var(--flour); }
  .qty__btn .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2.25; }
  .qty__btn:hover { background: var(--dough); }
  .qty__btn--inc:hover { background: var(--crust-deep); }
  .qty__btn:active { transform: scale(0.94); }
  .qty__btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
  .qty__value { display: grid; justify-items: center; line-height: 1; text-align: center; }
  .qty__num { font-family: var(--font-display); font-weight: 620; font-size: 1.5rem; font-variant-numeric: lining-nums tabular-nums; }
  .qty__unit { margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); }
  /* Produkty na wagę (etap 11): środek stepera to pole do wpisania kilogramów — wygląda jak liczba, podkreślenie mówi „edytowalne”. */
  .qty__kg {
    width: 4.25ch; padding: 0 0 0.05em; border: 0; border-bottom: 1.5px solid var(--field); border-radius: 0; background: transparent;
    font: inherit; font-family: var(--font-display); font-weight: 620; font-size: 1.375rem; line-height: 1.1; text-align: center; color: inherit;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .qty__kg:hover { border-bottom-color: currentColor; }
  .qty__kg:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-bottom-color: currentColor; }

  /* Kontrolka na Malinie */
  .flavour--signature .qty__add { border-color: var(--flour); background: var(--flour); color: var(--crust); }
  .flavour--signature .qty__add:hover { background: var(--dough); color: var(--crust); }
  .flavour--signature .qty__btn { border-color: var(--flour); background: transparent; color: var(--flour); }
  .flavour--signature .qty__btn:hover { background: rgb(255 253 249 / 0.14); }
  .flavour--signature .qty__btn--inc { background: var(--flour); color: var(--crust); }
  .flavour--signature .qty__btn--inc:hover { background: var(--dough); }
  .flavour--signature .qty__unit { color: var(--flour); }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .flavour--signature .qty__add:hover { box-shadow: 0 4px 0 0 var(--blush); }
  }

  /* Informacja zwrotna: liczba „podskakuje”, wybrany wiersz miękko zmienia tło; preselekcja z linku — maślana poświata. */
  @media (prefers-reduced-motion: no-preference) {
    .qty__num.is-bump, .qty__kg.is-bump, .ticket [data-total-label].is-bump, .order-bar [data-total-label].is-bump, .ticket__value [data-total-value].is-bump { animation: qty-bump 200ms var(--ease-out); }
    @keyframes qty-bump { 45% { scale: 1.18; } }
    .flavour.is-flash { animation: flavour-flash 1400ms var(--ease-out); }
    @keyframes flavour-flash { 0%, 35% { box-shadow: 0 0 0 6px var(--butter), inset 4px 0 0 var(--butter); } }
    .flavour--signature.is-flash { animation-name: signature-flash; }
    @keyframes signature-flash { 0%, 35% { box-shadow: 0 0 0 6px var(--butter); } }
    .ticket__line { animation: line-in var(--dur-enter) var(--ease-out); }
    @keyframes line-in { from { opacity: 0; translate: 0 6px; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .flavour.is-flash { box-shadow: 0 0 0 4px var(--butter); }
  }

  /* ═════════ C. Bilecik „Twoje zamówienie” — biała karteczka z falbanką (jak „Co w środku?” na HOME) ═════════ */
  .ticket {
    position: relative; margin-top: 10px; padding: 1.5rem clamp(1.125rem, 0.9rem + 1vw, 1.75rem) 1.375rem;
    background: var(--flour); border-radius: 0 0 16px 16px;
    filter: drop-shadow(0 18px 22px rgb(60 38 20 / 0.14)) drop-shadow(0 2px 3px rgb(60 38 20 / 0.1));
  }
  .ticket::before {
    content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: var(--flour);
    -webkit-mask: radial-gradient(circle at 50% 100%, #000 9.5px, transparent 10px) 0 0 / 20px 10px repeat-x;
            mask: radial-gradient(circle at 50% 100%, #000 9.5px, transparent 10px) 0 0 / 20px 10px repeat-x;
  }
  .ticket__title { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.01em; }
  .ticket__empty { margin-top: 0.75rem; padding: 1rem; border: 1.5px dashed var(--line); border-radius: 12px; color: var(--color-text-muted); }
  .ticket__lines { margin-top: 0.75rem; }
  /* Lista pozycji przewija się w bileciku: sumy, wartość i przycisk zostają na ekranie także na niskich oknach (768 px). */
  .order-ticket .ticket__lines { max-height: max(9.5rem, min(30rem, 100vh - var(--header-h) - 29rem)); overflow-y: auto; overscroll-behavior: contain; margin-inline: -0.5rem; padding-inline: 0.5rem; }
  /* Opis paczki jest w bileciku, dopóki jest pusty; po dodaniu smaku miejsce zajmują sumy (opis paczki jest też w intrze). */
  .order[data-has-items] .order-ticket .ticket__note { display: none; }
  .ticket__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; padding-block: 0.75rem; border-bottom: 1px dashed var(--line); }
  .ticket__line:first-child { padding-top: 0.25rem; }
  .ticket__name { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 560; font-size: 1.125rem; line-height: 1.2; }
  .ticket__name--signature { color: var(--raspberry-deep); }
  /* Wyliczenie pozycji: „2 × 0,5 kg × 16,00 zł = 32,00 zł”. Wartość pozycji pogrubiona; bez ceny — „cena do potwierdzenia”. */
  .ticket__calc { grid-column: 1 / -1; font-size: var(--fs-small); line-height: 1.4; color: var(--color-text-muted); font-variant-numeric: lining-nums tabular-nums; }
  .ticket__calc strong { color: var(--crust); font-weight: 600; white-space: nowrap; }
  .ticket__calc--tbc strong { font-weight: 600; color: var(--color-text-muted); }
  /* Licznik rośnie z treścią („2 opakowania”, „1 słoiczek”) — przycisk „+” nigdy na niego nie nachodzi. */
  .ticket__qty { justify-self: start; display: inline-grid; grid-template-columns: 44px minmax(5.5rem, max-content) 44px; align-items: center; gap: 0.25rem; }
  .ticket__qty .qty__btn { width: 44px; height: 44px; border-width: 1.5px; border-radius: 10px; }
  .ticket__qty .qty__btn .icon { width: 1.05rem; height: 1.05rem; }
  .ticket__count { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ticket__remove {
    min-height: 44px; padding: 0 0.25rem; border: 0; background: none; color: var(--color-text-muted);
    font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em;
  }
  .ticket__remove:hover { color: var(--crust); text-decoration-thickness: 2px; }
  .ticket__lines--static .ticket__line { grid-template-columns: minmax(0, 1fr) auto; }
  .ticket__lines--static .ticket__name { grid-column: auto; }
  .ticket__lines--static .ticket__calc { grid-row: 2; }
  .ticket__total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin-top: 0.875rem; padding-top: 0.75rem; border-top: 2px solid var(--crust); font-weight: 600;
  }
  .ticket__total strong { display: inline-block; font-family: var(--font-display); font-weight: 620; font-size: 1.375rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
  /* Pod „Razem”: łączna waga (drobniej) i wartość zgłoszenia — najważniejsza liczba bileciku. */
  .ticket__weight, .ticket__value { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-variant-numeric: lining-nums tabular-nums; }
  .ticket__weight { margin-top: 0.375rem; font-size: var(--fs-small); color: var(--color-text-muted); }
  .ticket__value { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); font-weight: 600; }
  .ticket__value strong { display: inline-block; font-family: var(--font-display); font-weight: 620; font-size: 1.75rem; line-height: 1; white-space: nowrap; }
  /* Wartość niepełna (pozycja z ceną do potwierdzenia): słowo zamiast kwoty, mniejszym stopniem — nie udaje sumy. */
  .ticket__value strong.is-tbc { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
  .ticket__value-note { margin-top: 0.5rem; font-size: var(--fs-small); line-height: 1.45; color: var(--color-text-muted); }
  .order-sheet__foot .ticket__total { padding-top: 0.5rem; }
  .ticket__note { margin-top: 0.625rem; font-size: var(--fs-small); color: var(--color-text-muted); }
  .ticket__next { width: 100%; margin-top: 1.125rem; }

  /* ═════════ D/E. Dane klienta — „deska” w kolorze ciasta ═════════ */
  .order-details {
    scroll-margin-top: calc(var(--header-h) + 1rem);
    padding: clamp(1.5rem, 1rem + 2.6vw, 3rem) clamp(1.125rem, 0.6rem + 2.4vw, 3rem);
    background: var(--dough); border-radius: 20px;
  }
  .order-details__title { font-size: var(--fs-h2); letter-spacing: -0.005em; }
  .order-details__title:focus { outline: none; }
  .order-details__title:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
  .order-details__intro { margin-top: 0.75rem; color: var(--color-text-muted); max-width: 44ch; }
  .order-details .form { margin-top: 1.5rem; }
  .order-recap {
    display: flex; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
    margin-top: 1.25rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 12px; background: var(--flour);
  }
  .order-recap strong, .order-recap__value { font-variant-numeric: tabular-nums; }
  .order-recap__value { white-space: nowrap; }
  .order-recap__edit { min-height: 44px; padding: 0 0.75rem; border: 0; background-color: transparent; color: var(--crust); font-size: 1rem; }
  @media (min-width: 1024px) { .order-recap { display: none; } }
  .order-submit { min-width: 15rem; }
  /* „Co dalej” nad przyciskiem: oddzwonimy, odbiór osobisty, płatność przy odbiorze — bilecik w kolorze mąki, jak przypomnienie zamówienia. */
  .order-next {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start;
    max-width: 62ch; padding: 0.875rem 1rem; border-radius: 12px; background: var(--flour); line-height: 1.5;
  }
  .order-next .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--dill); }
  .order-next a { color: var(--crust); font-weight: 600; white-space: nowrap; }
  .order-done__facts { margin-top: 0.5rem; color: var(--color-text-muted); }

  /* Dev: wyraźnie oznaczone miejsce na klauzulę informacyjną (site.legal.orderPrivacyNotice = null). */
  .privacy-todo { padding: 0.875rem 1rem; border: 2px dashed var(--cocoa); border-radius: 10px; background: var(--flour); font-size: var(--fs-small); color: var(--color-text-muted); }
  .privacy-todo__flag { margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.03em; color: var(--crust); }

  /* Wysyłanie: lista i podsumowanie zablokowane (inert), przycisk „Wysyłanie…”. */
  .order-form[aria-busy="true"] .order-picks, .order-form[aria-busy="true"] .order-ticket { opacity: 0.6; transition: opacity var(--dur-base) ease; }

  /* ═════════ F. Sukces ═════════ */
  .order-done { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--section-y); }
  .order-done__ticket { max-width: 40rem; margin-inline: auto; padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) clamp(1.25rem, 0.8rem + 2.4vw, 3rem); }
  .order-done__mark { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 50%; background: var(--dill); color: var(--flour); }
  .order-done__mark .icon { width: 1.6rem; height: 1.6rem; stroke-width: 2.5; }
  .order-done__title { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); line-height: 1.05; letter-spacing: -0.01em; }
  .order-done__title:focus { outline: none; }
  .order-done__lead { margin-top: 0.75rem; font-size: var(--fs-lead); color: var(--color-text-muted); }
  .order-done__dry { margin-top: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 10px; background: var(--color-info-bg); font-size: var(--fs-small); }
  .order-done__sub { margin-top: 1.75rem; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
  .order-done__contact { display: grid; margin-top: 0.5rem; }
  .order-done__contact > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.5rem; border-bottom: 1px dashed var(--line); }
  .order-done__contact dt { color: var(--color-text-muted); font-size: var(--fs-small); padding-top: 0.1em; }
  .order-done__contact dd { overflow-wrap: anywhere; white-space: pre-line; }
  .order-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }
  .order-done__again { min-height: 44px; padding: 0; border: 0; background-color: transparent; color: var(--crust); font-size: 1rem; }
  @media (max-width: 479px) { .order-done__actions .btn { width: 100%; } }

  /* ═════════ Telefon / tablet (< 1024): pasek zamówienia ═════════ */
  .order-bar { display: none; }
  @media (max-width: 1023px) {
    .js .order-bar {
      position: fixed; inset: auto 0 0 0; z-index: 25;
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem;
      padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom));
      background: rgb(255 253 249 / 0.97); border-top: 1px solid var(--color-border-decor);
      box-shadow: 0 -10px 24px -18px rgb(60 38 20 / 0.45);
      transform: translateY(110%); visibility: hidden;
      transition: transform var(--dur-base) var(--ease-in), visibility 0s linear var(--dur-base);
    }
    .js .order-bar[data-visible] { transform: none; visibility: visible; transition: transform var(--dur-enter) var(--ease-out), visibility 0s; }
    .order-bar__summary {
      display: grid; align-content: center; justify-items: start; gap: 0.1rem; min-height: var(--button-height); padding: 0.25rem 0.875rem;
      border: 2px solid var(--crust); border-radius: var(--button-radius); background: var(--flour); color: var(--crust); text-align: left;
      touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .order-bar__summary { padding-inline: 0.75rem; }
    .order-bar__label { font-weight: 600; line-height: 1.15; }
    .order-bar__label strong { display: inline-block; font-variant-numeric: tabular-nums; }
    .order-bar__hint { font-size: 0.8125rem; line-height: 1.15; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
    .order-bar__value { color: var(--crust); font-weight: 600; white-space: nowrap; }
    .order-bar__next { min-width: 6rem; padding-inline: 1rem; }
    @media (max-width: 399px) { .order-bar__more { display: none; } }
    .js .order[data-has-items] .order-form { padding-bottom: calc(var(--section-y) + var(--orderbar-h)); }
  }
  @media (prefers-reduced-motion: reduce) { .js .order-bar, .js .order-bar[data-visible] { transition: visibility 0s; } }

  /* ═════════ Arkusz z podsumowaniem (<dialog> + showModal: pułapka fokusu, Esc, powrót fokusu) ═════════ */
  .order-sheet {
    width: 100%; max-width: 40rem; max-height: min(85dvh, 100% - 2rem); margin: auto auto 0;
    flex-direction: column; overflow: hidden;
    background: var(--flour); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 40px -20px rgb(43 33 26 / 0.4);
  }
  .order-sheet[open] { display: flex; }
  .order-sheet::backdrop { background: rgb(43 33 26 / 0.45); }
  .order-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.75rem 0.5rem var(--gutter); }
  .order-sheet__title { font-size: 1.625rem; line-height: 1.1; }
  .order-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) 0.5rem; }
  .order-sheet__body .ticket__lines { margin-top: 0; }
  .order-sheet__foot { padding: 0.25rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--flour); }
  .order-sheet__foot .ticket__total { margin-top: 0; border-top: 0; }
  .order-sheet__actions { display: grid; gap: 0.625rem; margin-top: 0.875rem; }
  @media (min-width: 480px) { .order-sheet__actions { grid-template-columns: 1fr 1fr; } }
  @media (prefers-reduced-motion: no-preference) {
    .order-sheet, .order-sheet::backdrop { transition: transform var(--dur-exit) var(--ease-in), opacity var(--dur-exit) var(--ease-in), overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete; }
    .order-sheet { transform: translateY(100%); }
    .order-sheet::backdrop { opacity: 0; }
    .order-sheet[open] { transform: none; transition-duration: var(--dur-enter); transition-timing-function: var(--ease-out); }
    .order-sheet[open]::backdrop { opacity: 1; }
    @starting-style { .order-sheet[open] { transform: translateY(100%); } .order-sheet[open]::backdrop { opacity: 0; } }
  }

  /* ═════════ Pasek kategorii (etap 10): 9 kategorii całej oferty, przyklejony pod nagłówkiem jak filtr w /pierogi/.
     Telefon: jeden rząd przewijany w poziomie w obrębie paska (strona nie przewija się w bok). Bieżącą kategorię podświetla order.js. ═════════ */
  .order-cats {
    position: sticky; top: 0; z-index: 15; margin-inline: calc(var(--gutter) * -1); padding: 0.5rem 0;
    background: var(--flour); border-bottom: 1px solid var(--color-border-decor);
    transition: top var(--dur-base) var(--ease-out);
  }
  .site-header:not([data-hidden]) ~ main .order-cats { top: var(--header-h); }
  .order-cats__list {
    display: flex; gap: 0.375rem; padding: 2px var(--gutter); overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-padding-inline: var(--gutter);
  }
  .order-cats__list::-webkit-scrollbar { display: none; }
  .order-cats__link {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.9rem; border-radius: 10px;
    background: var(--dough); font-weight: 600; font-size: 0.9375rem; line-height: 1.15; white-space: nowrap; text-decoration: none;
    /* Bez przejścia koloru: w połowie animacji (ciemne tło + jasny tekst) kontrast spadałby poniżej 4,5:1. */
  }
  .order-cats__link:hover { background: var(--butter-soft); }
  .order-cats__link[aria-current] { background: var(--crust); color: var(--flour); }
  .order-cats__link--season::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--raspberry); }
  @media (min-width: 1024px) {
    .order-cats { margin-inline: 0; padding: 0.625rem 0; border-radius: 0 0 14px 14px; }
    .order-cats__list { flex-wrap: wrap; overflow: visible; padding-inline: 0; }
  }

  /* Wyszukiwarka (tylko z JS) */
  .order-search { display: grid; gap: 0.375rem; min-width: 0; margin-top: -1rem; }
  .order-search[hidden] { display: none; }
  .order-search__label { font-weight: 600; font-size: var(--fs-small); }
  .order-search__field { position: relative; max-width: 30rem; }
  .order-search__input {
    width: 100%; min-height: 48px; padding: 0.625rem 3rem 0.625rem 1rem; border: 1.5px solid var(--color-border-control); border-radius: 12px;
    background: var(--flour); font-size: 1.0625rem; /* ≥ 16 px: iOS nie przybliża strony */
  }
  .order-search__input::-webkit-search-cancel-button { display: none; }
  .order-search__clear {
    position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 10px; background: transparent; color: var(--crust);
  }
  .order-search__clear[hidden] { display: none; }
  .order-search__status { min-height: 1.25rem; font-size: var(--fs-small); color: var(--color-text-muted); }
  /* Stary link do wycofanego produktu (etap 11) — spokojna informacja, bez czerwieni. */
  .order-retired { margin-bottom: 1rem; padding: 0.875rem 1.125rem; border-radius: 14px; background: var(--color-info-bg); font-size: var(--fs-small); line-height: 1.5; }
  .order-search__empty { padding: 1.25rem; border: 1.5px dashed var(--line); border-radius: 14px; color: var(--color-text-muted); }
  .flavour--signature[hidden] { display: none; }

  /* Produkty świąteczne przy wyłączonym przełączniku sezonu: informacja zamiast listy z kontrolkami. */
  .season-off { display: grid; gap: 1rem; padding: clamp(1.125rem, 0.9rem + 1vw, 1.75rem); border-radius: 16px; background: var(--dough); }
  .season-off__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; align-items: start; line-height: 1.5; font-weight: 500; }
  .season-off__lead .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--raspberry-deep); }
  .season-off__list { display: grid; gap: 0.5rem; }
  .season-off__list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--field); }
  .season-off__name { font-family: var(--font-display); font-weight: 560; font-size: 1.1875rem; }
  .season-off__price .price__amount { font-size: 1.0625rem; }
  .season-off__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
  .flavour-group--off .flavour-group__title::before { background: var(--raspberry); }

  /* ═════════ 2.1 Dostępność produktów (panel /admin/ → /api/dostepnosc.php → order.js) ═════════
     Status zawsze tekstem i ikoną, nie samym kolorem. Niedostępny produkt zostaje na liście: spokojnie wyciszone zdjęcie i nazwa,
     wyłączone „Dodaj” — bez przekreśleń i bez czerwieni. */
  .avail { display: flex; margin-top: 0.4rem; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
  .avail[hidden] { display: none; }
  .avail > span { display: inline-flex; align-items: center; gap: 0.3rem; }
  .avail .icon { width: 1em; height: 1em; stroke-width: 2.5; }
  .avail__on { color: #3F5536; }
  .avail__off { padding: 0.15rem 0.6rem 0.15rem 0.5rem; border-radius: var(--chip-radius); background: var(--dough); color: var(--crust); }
  .avail[data-state="on"] .avail__off, .avail[data-state="off"] .avail__on { display: none !important; }
  .flavour--signature .avail__on { color: var(--flour); }
  .flavour--signature .avail__off { background: rgb(255 253 249 / 0.92); color: var(--crust); }

  .flavour.is-unavailable .flavour__media img { filter: grayscale(0.85); opacity: 0.6; }
  /* Tekst bez przezroczystości (kontrast WCAG AA zostaje) — wyciszony tylko kolor nazwy. */
  .flavour-list .flavour.is-unavailable .flavour__name { color: var(--color-text-muted); }
  .flavour-list > .flavour.is-unavailable.is-selected { background: var(--dough); box-shadow: inset 4px 0 0 var(--field); }
  .flavour--signature.is-unavailable .flavour__media img { opacity: 0.75; }
  .qty__add:disabled { border-color: var(--line); background: var(--dough); color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; translate: none; transform: none; }
  .flavour--signature .qty__add:disabled { border-color: rgb(255 253 249 / 0.5); background: transparent; color: rgb(255 253 249 / 0.85); }

  .qty__remove { display: none; }
  .js .qty__remove:not([hidden]) {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--qty-btn); padding: 0 1rem;
    border: 2px solid var(--crust); border-radius: var(--button-radius); background: var(--flour); color: var(--crust); font-weight: 600; line-height: 1.1;
  }
  .qty__remove .icon { width: 1rem; height: 1rem; stroke-width: 2.25; }
  .qty__remove:hover { background: var(--dough); }
  .flavour--signature .qty__remove:not([hidden]) { border-color: var(--flour); }

  .ticket__line--off .ticket__name { color: var(--color-text-muted); }
  .ticket__line--off .ticket__calc { color: var(--crust); font-weight: 600; }
  .ticket__line--off .ticket__calc strong { color: var(--crust); }
  .order-recap__value[hidden], .order-bar__value[hidden] { display: none; }

  /* Niedostępne pozycje w zamówieniu: blokada wysłania, jeden przycisk usunięcia (nad „Wyślij zgłoszenie”). */
  .order-unavailable {
    display: grid; gap: 0.875rem; justify-items: start; padding: 1rem 1.125rem; border: 2px solid var(--crust); border-radius: 14px;
    background: var(--butter-soft); scroll-margin-top: calc(var(--header-h) + 1.5rem);
  }
  .order-unavailable[hidden] { display: none; }
  .order-unavailable:focus { outline: none; }
  .order-unavailable__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; align-items: start; line-height: 1.5; font-weight: 500; }
  .order-unavailable__lead .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; }
  .order-unavailable__remove { min-height: 48px; }
  .order-avail-error { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; margin-bottom: 1rem; padding: 0.875rem 1.125rem; border-radius: 14px; background: var(--dough); font-size: var(--fs-small); line-height: 1.5; }
  .order-avail-error[hidden] { display: none; }
  .order-avail-error .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--raspberry-deep); }
}