/* =============================================================================
   Plan przyjęcia (SPEC-PLAN-PRZYJECIA-2026-10-18; stille makiety/v10-plan/plan.css): pasek planu z miarami, koszyk z ilością i „Zamień”,
   blok „Zapamiętaj ten wynik” w kalkulatorze, dopisek na kafelku, karta produktu w trybie planu, strony „Zastąpić koszyk?” i „Plan usunięty”.
   Tylko tokeny z styl.css: śliwka atramentem, złoto wyłącznie jako linie, ikony i kreska „gotowe”, krem kartami. Nic nie jest przyklejone do
   ekranu (pasek planu leży w treści pod okruszkami). Ruch: kreska rośnie cubic-bezier(0.16, 1, 0.3, 1) 600 ms, liczby z mgły 240 ms (plan.js);
   prefers-reduced-motion: bez ruchu. Kreska to SVG w jednostkach viewBox (bez atrybutu style), więc działa bez JS i przechodzi bramkę układu.
   ============================================================================= */

/* ---------- Miara (jedna kategoria planu) ---------- */
.miara { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nazwa stan" "liczby liczby" "tor tor"; gap: 2px 6px; min-width: 0; }
.miara__nazwa { grid-area: nazwa; font-size: var(--fs-14); font-weight: 700; line-height: 1.35; color: var(--tekst-900); }
.miara__stan { grid-area: stan; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); font-weight: 600; color: var(--tekst-600); white-space: nowrap; }
.miara__stan .ikona { width: 15px; height: 15px; color: var(--zloto-700); stroke-width: 2.4; }
.miara__liczby { grid-area: liczby; font-size: var(--fs-14); line-height: 1.35; color: var(--tekst-600); font-variant-numeric: lining-nums tabular-nums; }
.miara__liczby b { font-weight: 700; color: var(--sliwka-900); }
.miara__dopisek { display: block; font-size: var(--fs-13); color: var(--tekst-600); }
.miara__tor { grid-area: tor; display: block; width: 100%; height: 4px; margin-top: 6px; border-radius: 4px; overflow: hidden; }
.miara__tor-tlo { fill: color-mix(in srgb, var(--tekst-600) 22%, transparent); }
.miara__tor-wyp { fill: var(--sliwka-500); }
.miara__tor-po { fill: color-mix(in srgb, var(--sliwka-500) 40%, transparent); }
.miara--gotowa .miara__tor-wyp { fill: var(--zloto-700); }
@media (prefers-reduced-motion: no-preference) {
  .miara__tor-wyp, .miara__tor-po { transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .miara__liczby.miara__liczby--zmiana { animation: miara-mgla 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes miara-mgla { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }

/* ---------- Pasek planu (katalog, kategoria, karta, koszyk, podsumowanie). W treści, nie przyklejony. ---------- */
.plan { margin: 4px 0 24px; padding: 14px 16px 12px; background: var(--biel); border: 1px solid var(--krem-200); border-radius: var(--promien); box-shadow: inset 0 2px 0 var(--zloto-linia), var(--cien-maly); }
.plan-forma { display: block; }
.plan__glowa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.plan__tytul { margin: 0; font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.15; color: var(--sliwka-900); }
.plan__tytul .nadtytul { display: block; margin-bottom: 2px; }
.plan__koszyk { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cel); font-size: var(--fs-15); font-weight: 700; color: var(--sliwka-700); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--sliwka-700) 35%, transparent); text-underline-offset: 3px; }
.plan__koszyk .ikona { width: 16px; height: 16px; }
.plan__miary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin: 10px 0 0; padding: 0; list-style: none; }
.plan__brak { margin-top: 10px; font-size: var(--fs-15); line-height: 1.45; color: var(--tekst-900); }
.plan__stopka { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 6px; }
.plan__stopka .przycisk-tekst { display: inline-flex; align-items: center; min-height: var(--cel); font-size: var(--fs-14); }
.plan__zamkniety { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: var(--promien-m); background: var(--krem-50); border: 1px solid var(--zloto-linia); font-size: var(--fs-16); line-height: 1.45; color: var(--tekst-900); }
.plan__zamkniety .ikona { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--zloto-700); stroke-width: 2.4; }
.plan__zamkniety strong { color: var(--sliwka-900); }
@media (max-width: 429px) {
  .plan { padding: 12px 14px 8px; }
  .plan__tytul { font-size: var(--fs-18); font-family: var(--czcionka-ui); font-weight: 700; }
  .plan__miary { gap: 10px; }
  .miara__nazwa, .miara__liczby { font-size: var(--fs-13); }
  .miara__stan span { display: none; }
}
/* Duo rozłożony i tablet: miary w połówkach (nic w pasie zgięcia x 421-469) */
@media (min-width: 768px) and (max-width: 1023px) {
  .plan__miary { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rynna); }
  .plan__glowa { display: grid; grid-template-columns: var(--polowka) var(--polowka); column-gap: var(--rynna); }
  .plan__koszyk { justify-self: start; }
}
@media (max-width: 767px) { .plan:not(.plan--kolumna) .miara__stan span { display: none; } }
/* w prawej kolumnie koszyka i podsumowania: miary jedna pod drugą; na telefonie i tablecie pasek nad listą, od 1024 px w prawej kolumnie */
.plan--kolumna .plan__miary { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.plan--kolumna .plan__glowa { display: block; }
.plan--kolumna .miara__nazwa, .plan--kolumna .miara__liczby { font-size: var(--fs-15); }
.plan--kolumna .miara__stan span { display: inline; }
.plan--szeroko { display: none; }
@media (min-width: 1024px) { .koszyk .plan--wasko { display: none; } .plan--szeroko { display: block; } }

/* ---------- 1. Kalkulator: zapis planu ---------- */
.plan-zapis { border: 1px solid var(--zloto-linia); box-shadow: inset 0 2px 0 var(--zloto-linia); }
.plan-zapis__tekst { font-size: var(--fs-15); line-height: 1.55; color: var(--tekst-600); }
.plan-zapis__cele { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.plan-zapis__cele li { padding: 4px 10px; border-radius: var(--promien-pelny); background: var(--sliwka-50); font-size: var(--fs-14); font-weight: 600; color: var(--sliwka-900); }
.plan-zapis form { display: block; }
.plan-zapis .przycisk--caly { min-height: 52px; margin-top: 4px; white-space: normal; }
.plan-zapis__drobne { font-size: var(--fs-13); line-height: 1.5; color: var(--tekst-600); }

/* ---------- 2. Koszyk ---------- */
.koszyk__glowa { grid-area: tytul; min-width: 0; }
.koszyk__glowa .podsumowanie__tytul { grid-area: auto; }
.koszyk__lead { margin-top: 8px; max-width: 40em; font-size: var(--fs-17); line-height: 1.5; color: var(--tekst-600); }
.koszyk__info { margin-top: 14px; }
.koszyk .pozycja--koszyk { grid-template-areas: "foto opis cena" "foto ilosc akcja" "zamien zamien zamien"; row-gap: 8px; }
.pozycja--koszyk .pozycja__nazwa a { color: inherit; text-decoration: none; }
.pozycja--koszyk .pozycja__nazwa a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pozycja__ilosc { grid-area: ilosc; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.krok-ilosci { display: inline-flex; align-items: center; height: 46px; border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel); }
.krok-ilosci button { display: inline-grid; place-items: center; width: var(--cel); height: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--sliwka-900); font: inherit; cursor: pointer; border-radius: var(--promien-pelny); }
.krok-ilosci button:disabled { color: var(--tekst-600); cursor: default; opacity: 0.5; }
.krok-ilosci button:focus-visible { outline: 3px solid var(--sliwka-500); outline-offset: -3px; }
.krok-ilosci button .ikona { width: 16px; height: 16px; }
.krok-ilosci output { min-width: 22px; text-align: center; font-weight: 700; line-height: 1; color: var(--sliwka-900); font-variant-numeric: tabular-nums; }
.pozycja__wklad { font-size: var(--fs-14); color: var(--tekst-600); }
.pozycja__sklad { margin-top: 4px; font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-600); }
.pozycja__sklad strong { color: var(--tekst-900); }
.pozycja--niedostepna { background: var(--krem-50); }
.zamien { grid-area: zamien; border-radius: var(--promien-m); }
.zamien > summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cel); font-size: var(--fs-15); font-weight: 700; color: var(--sliwka-700); cursor: pointer; list-style: none; }
.zamien > summary::-webkit-details-marker { display: none; }
.zamien > summary .ikona { width: 16px; height: 16px; transition: rotate 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.zamien[open] > summary .ikona { rotate: 180deg; }
.zamien__lista { display: grid; gap: 8px; margin: 2px 0 6px; padding: 0; list-style: none; }
.zamien__opcja { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 1px solid var(--krem-200); border-radius: var(--promien-m); background: var(--krem-50); }
.zamien__opcja .foto { grid-area: auto; width: 52px; }
.zamien__nazwa { font-weight: 700; line-height: 1.3; color: var(--tekst-900); }
.zamien__meta { font-size: var(--fs-14); color: var(--tekst-600); }
.koszyk__poza { margin-top: 14px; font-size: var(--fs-14); color: var(--tekst-600); }
.koszyk__pusty { margin-top: 16px; }
.koszyk__podpowiedz-dnia { margin: 2px 0 10px; }
.koszyk__limit { margin-top: 14px; }
.koszyk__limit-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.koszyk__limit-akcje .przycisk-tekst { display: inline-flex; align-items: center; min-height: var(--cel); }
.koszyk .zamow__pole { margin-top: 18px; }
.koszyk .odbior { margin-top: 22px; }
.razem__lista .razem__ilosc { color: var(--tekst-600); font-weight: 400; }
.razem__dopisek a { display: inline-flex; align-items: center; min-height: var(--cel); color: var(--sliwka-700); }
.dzien-koszyka { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--promien-m); background: var(--krem-50); border: 1px solid var(--krem-200); }
.dzien-koszyka strong { color: var(--sliwka-900); }
.dzien-koszyka__ok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-15); color: var(--tekst-900); }
.dzien-koszyka__ok .ikona { width: 16px; height: 16px; color: var(--zloto-700); stroke-width: 2.4; }
.dzien-koszyka .pole__podpowiedz { margin: 0; }
.koszyk-strona .podsumowanie__siatka { grid-template-areas: "tytul" "lewa" "prawa"; }
@media (min-width: 768px) { .koszyk-strona .podsumowanie__siatka { grid-template-areas: "tytul prawa" "lewa prawa"; } }
@media (min-width: 1024px) { .koszyk-strona .podsumowanie__siatka { grid-template-areas: "tytul tytul" "lewa prawa"; } }

/* ---------- 3. Kafel kategorii: cichy dopisek ---------- */
.kafel__plan { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px 3px 8px; border-radius: var(--promien-pelny); border: 1px solid var(--zloto-linia); font-size: var(--fs-13); font-weight: 600; color: var(--tekst-900); background: var(--biel); }
.kafel__plan .ikona { width: 14px; height: 14px; color: var(--zloto-700); stroke-width: 2.4; }

/* ---------- 4. Karta produktu w trybie planu ---------- */
.zamow__plan { margin-top: 18px; padding: 14px; border-radius: var(--promien-m); background: var(--krem-50); border: 1px solid var(--krem-200); }
.zamow__plan .plan__miary { grid-template-columns: minmax(0, 1fr); margin: 0; }
.zamow__plan .miara__nazwa, .zamow__plan .miara__liczby { font-size: var(--fs-15); }
.zamow__plan-po { margin-top: 8px; font-size: var(--fs-15); line-height: 1.45; color: var(--tekst-900); }
.zamow__plan-po strong { color: var(--sliwka-900); }
.zamow__koszyk-suma { margin-top: 4px; font-size: var(--fs-14); color: var(--tekst-600); }

/* ---------- 5. Podsumowanie: napis przy torcie, blok planu ---------- */
.pozycja__napis { grid-column: 2 / -1; margin-top: 2px; }
.pozycja__napis .wejscie { max-width: 420px; }
.podsumowanie--koszyk .pozycja--koszyk { grid-template-areas: "foto opis cena" "foto opis akcja" "foto napis napis"; }
.podsumowanie--koszyk .pozycja__napis { grid-area: napis; }
.podsumowanie__plan { padding-top: 20px; border-top: 1px solid var(--zloto-linia); }
.podsumowanie__plan .plan { margin-bottom: 4px; }

/* ---------- Strony „Zastąpić koszyk?” i „Plan usunięty” ---------- */
.plan-pytanie { padding-top: 16px; }
.plan-pytanie__karta { max-width: 640px; margin-top: 8px; padding: 24px 20px 26px; }
.plan-pytanie__karta h1 { margin-top: 10px; font-size: clamp(var(--fs-32), 6vw, var(--fs-44)); line-height: 1.08; }
.plan-pytanie__tekst { margin-top: 12px; font-size: var(--fs-17); line-height: 1.55; color: var(--tekst-600); }
.plan-pytanie__tekst strong { color: var(--sliwka-900); }
.plan-pytanie__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.plan-pytanie__akcje form { display: contents; }
.plan-pytanie__akcje .przycisk-tekst { display: inline-flex; align-items: center; min-height: var(--cel); }
.plan-pytanie__drobne { margin-top: 16px; font-size: var(--fs-14); }
.plan-przywroc { display: grid; justify-items: start; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: var(--promien-m); background: var(--krem-50); border: 1px solid var(--krem-200); }
.plan-przywroc p { font-size: var(--fs-17); color: var(--tekst-900); }
@media (min-width: 768px) { .plan-pytanie__karta { padding: 28px 28px 30px; } }

/* ---------- Konto: karta planu ---------- */
.konto-plan__akcje { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.konto-plan__akcje form { display: contents; }
.konto-plan__akcje .przycisk-tekst { display: inline-flex; align-items: center; min-height: var(--cel); }
.koszyk__konto { margin-top: 10px; font-size: var(--fs-14); color: var(--tekst-600); }
.koszyk__konto form { display: inline; }
.koszyk__konto .przycisk-tekst { display: inline-flex; align-items: center; min-height: var(--cel); font-size: var(--fs-14); }

/* koszyk: kalendarz jak na karcie produktu (styl-klient.css): poniżej 1024 px siatka dni ma min. 308 px (7 × 44 px celu), wystaje symetrycznie poza krem karty */
@media (max-width: 429px) { .koszyk .podsumowanie__karta { padding-inline: 12px; } }
@media (max-width: 1023px) {
  .koszyk .kal, .koszyk .kal__naglowek { width: max(100%, 308px); margin-left: min(0px, calc((100% - 308px) / 2)); }
}
/* karta produktu w trybie planu na telefonie: pasek zwięzły (tytuł + link do koszyka), żeby „Wybierz dzień i zamów” został w pierwszym ekranie 466×678;
   miary tej kategorii są niżej w formularzu („Torty w planie”), pełny pasek w koszyku */
@media (max-width: 767px) {
  .plan--zwiezly { margin-bottom: 16px; padding: 10px 14px; }
  .plan--zwiezly .plan__miary, .plan--zwiezly .plan__stopka, .plan--zwiezly .plan__zamkniety, .plan--zwiezly .plan__brak { display: none; }
  .plan--zwiezly .plan__tytul { font-size: var(--fs-16); font-family: var(--czcionka-ui); font-weight: 700; }
  .plan--zwiezly .plan__tytul .nadtytul { display: inline; margin: 0 6px 0 0; }
  .plan--zwiezly .plan__tytul .nadtytul::after { content: ":"; }
}