/* =============================================================================
   styl-klient.css · strona publiczna (klient): nagłówek, hero, sekcje, stopka, karta produktu, kontakt, podsumowanie,
   status zamówienia, "Od 1895", pasek komunikatu, tryb edycji treści.
   Ładowany PO styl.css (tokeny, tryb nocny, komponenty wspólne). Źródło: makiety v2 (§3-7) i v3-klient (ekrany 05-10).
   Pominięte elementy makiet, które nie są treścią strony: .notatka i .storyboard (notatki projektowe ekranu 08).
   ============================================================================= */

/* ---------- 3. Strona klienta: pasek górny ---------- */
.pasek-gorny { position: relative; z-index: 20; background: var(--biel); border-bottom: 1px solid var(--krem-200); }
.pasek-gorny__wnetrze { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px; }
.pasek-gorny__lewa { display: flex; align-items: center; gap: 32px; }
.pasek-gorny .logo { height: 48px; }
.logo-link { display: block; flex: none; }
.nawigacja { display: none; }
.nawigacja ul { display: flex; gap: 4px; }
.nawigacja a {
  display: inline-flex; align-items: center; min-height: var(--cel); padding: 0 12px;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-16); font-weight: 600; line-height: 1.2; color: var(--tekst-900); text-decoration: none;
}
.nawigacja a:hover, .nawigacja a[aria-current] { border-color: var(--zloto-700); }
.pasek-gorny__prawa { display: flex; align-items: center; gap: 10px; }
.pasek-gorny__cta { display: none; }
.cta__dopisek { display: none; }
.tel-skrot {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 16px;
  border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel);
  font-size: var(--fs-16); font-weight: 700; color: var(--sliwka-900); text-decoration: none; white-space: nowrap;
}
.tel-skrot:hover { border-color: var(--sliwka-900); }
@media (max-width: 359px) { .tel-skrot { padding: 0; width: 48px; justify-content: center; } .tel-skrot span { display: none; } }

@media (min-width: 768px) {
  .pasek-gorny .logo { height: 56px; }
  .pasek-gorny__wnetrze { padding-block: 12px; }
}
/* Fala 2 (koordynator 17.10): osiem pozycji menu (z „Dla firm” i „Blog”) mieści się dopiero od 1280 px; niżej menu rozwijane z polem szukania */
@media (min-width: 1280px) {
  .nawigacja { display: block; }
  .menu-mobilne { display: none; }
  .pasek-gorny__wnetrze { gap: 24px; }
}
/* Lupa w pasku (N22): okrągły przycisk jak telefon (własna klasa: brak telefonu nie może ukrywać lupy), prowadzi do /szukaj; widoczna razem z pełną nawigacją */
.szukaj-skrot {
  display: none; align-items: center; justify-content: center; width: 48px; min-height: 48px; padding: 0;
  border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel); color: var(--sliwka-900); text-decoration: none;
}
.szukaj-skrot:hover { border-color: var(--sliwka-900); }
@media (min-width: 1280px) { .szukaj-skrot { display: inline-flex; } }
@media (min-width: 768px) { .pasek-gorny__cta { display: inline-flex; min-height: 48px; padding: 0 22px; } }
@media (min-width: 1140px) { .cta__dopisek { display: inline; } .pasek-gorny__lewa { gap: 40px; } .pasek-gorny__cta { padding: 0 28px; } }

/* ---------- 4. Strona główna: hero ---------- */
.hero { background: var(--krem-50); padding-block: 24px 48px; }
.hero__siatka { display: grid; gap: 28px; }
.hero__tekst { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { margin-top: 14px; font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
.hero h1 > span { display: block; }
.hero h1 em { color: var(--sliwka-500); }
@media (max-width: 359px) { .hero h1 { font-size: var(--fs-32); } }
.hero__akapit { margin-top: 16px; max-width: 34em; }
.hero__przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__zaufanie { margin-top: 20px; max-width: 40em; font-size: var(--fs-16); font-weight: 500; line-height: 1.6; color: var(--tekst-600); }
.hero__zaufanie strong { font-weight: 700; color: var(--sliwka-900); }
.hero__zaufanie span { white-space: nowrap; }
.hero__foto .foto { aspect-ratio: 4 / 3; border-radius: var(--promien-duzy); }
@media (min-width: 768px) {
  .hero { padding-block: 48px 72px; }
  .hero__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: center; }
  .hero h1 { font-size: clamp(36px, 5.4vw, 48px); }
  .hero__foto .foto { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .hero { padding-block: 56px 80px; }
  .hero__siatka { grid-template-columns: 7fr 5fr; column-gap: 64px; }
  .hero h1 { font-size: var(--fs-64); line-height: 72px; }
}

/* ---------- 5. Strona główna: sekcje ---------- */
.sekcja { padding-block: 56px; }
.sekcja--krem { background: var(--krem-100); }
.sekcja h2 { font-size: var(--fs-32); }
.sekcja__naglowek { margin-bottom: 32px; }
@media (min-width: 1024px) { .sekcja { padding-block: 96px; } .sekcja h2 { font-size: var(--fs-40); } .sekcja__naglowek { margin-bottom: 48px; } }
@media (min-width: 768px) and (max-width: 1023px) { .sekcja__naglowek { max-width: calc((100% - var(--rynna)) / 2); } }

.jak__siatka { display: grid; gap: 8px; }
.kroki { display: grid; gap: 32px; }
.krok { padding-top: 20px; border-top: 1px solid var(--zloto-700); }
.krok__numer { display: block; margin-bottom: 14px; font-family: var(--czcionka-naglowki); font-size: var(--fs-48); font-weight: 600; line-height: 1; color: var(--zloto-duzy); font-variant-numeric: lining-nums; }
.krok h3 { font-size: var(--fs-24); }
.krok p { margin-top: 10px; color: var(--tekst-600); }
/* tablet: nagłówek i trzy kroki w dwóch połówkach (2 + 2), nic na zgięciu */
@media (min-width: 768px) and (max-width: 1023px) {
  .jak__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); row-gap: 40px; }
  .kroki { display: contents; }
  .jak .sekcja__naglowek { align-self: center; margin-bottom: 0; }
}
@media (min-width: 1024px) {
  .jak__siatka { grid-template-columns: 1fr; gap: 0; }
  .kroki { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

.kategorie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
.kafel { display: flex; }
.kafel > a, .kafel__karta { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-decoration: none; }
.kafel .foto { border-radius: var(--promien); }
.kafel h3 { flex: 1 1 auto; margin-top: 14px; font-size: var(--fs-24); line-height: 1.15; }
.kafel__czas { margin-top: 6px; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--tekst-600); }
.kafel--info { align-items: flex-start; }
.kafel__info {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%;
  aspect-ratio: 1 / 1; padding: 20px; border: 1px solid var(--zloto-linia); border-radius: var(--promien); background: var(--krem-100);
  text-align: center;
}
.kafel__info h3 { flex: none; margin: 0; }
.kafel__info p { font-size: var(--fs-15); color: var(--tekst-600); }
@media (min-width: 768px) { .kategorie { column-gap: var(--rynna); row-gap: 40px; } }
@media (min-width: 1024px) { .kategorie { grid-template-columns: repeat(4, 1fr); column-gap: 24px; } }

.rodzina { padding-block: 56px; background: var(--tusz); color: var(--krem-staly); text-align: center; }
.rodzina__linia { width: 48px; height: 1px; margin: 0 auto 24px; background: var(--zloto-500); }
.rodzina p { max-width: 20em; margin-inline: auto; font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-style: italic; font-weight: 500; line-height: 1.25; text-wrap: balance; }
@media (min-width: 768px) and (max-width: 1023px) {
  .rodzina { text-align: left; }
  .rodzina .kontener > * { max-width: calc((100% - var(--rynna)) / 2); margin-inline: 0; }
}
@media (min-width: 1024px) { .rodzina { padding-block: 80px; } .rodzina p { max-width: none; font-size: var(--fs-32); } }

.wyroznienia { padding-block: 36px; background: var(--krem-50); }
.wyroznienia p {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  font-size: var(--fs-16); font-weight: 600; line-height: 1.5; color: var(--zloto-tekst);
}
.wyroznienia p::before { content: ""; width: 40px; height: 1px; background: var(--zloto-700); }
@media (min-width: 768px) and (max-width: 1023px) {
  .wyroznienia { padding-block: 44px; }
  .wyroznienia p { align-items: flex-start; max-width: calc((100% - var(--rynna)) / 2); text-align: left; }
}
@media (min-width: 1024px) {
  .wyroznienia { padding-block: 44px; }
  .wyroznienia p { flex-direction: row; justify-content: center; gap: 24px; }
  .wyroznienia p::before, .wyroznienia p::after { content: ""; flex: 1 1 24px; max-width: 200px; height: 1px; background: var(--zloto-700); }
}

/* ---------- 6. Stopka strony: wariant B (decyzja Przemka 18.10.2026), reguły w sekcji „STOPKA B” niżej w pliku ---------- */

/* ---------- 7. Karta produktu (ekran 02) ---------- */
.produkt { padding-block: 8px 64px; }
.produkt__siatka {
  display: grid; gap: 28px;
  grid-template-areas: "naglowek" "galeria" "zamow" "opis";
}
.produkt__naglowek { grid-area: naglowek; }
.galeria { grid-area: galeria; }
.zamow { grid-area: zamow; }
.produkt__opis { grid-area: opis; }
.produkt__naglowek h1 { font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
.produkt__podtytul { margin-top: 14px; max-width: 34em; color: var(--tekst-600); }
.produkt__cena { margin-top: 10px; font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; line-height: 1.1; color: var(--sliwka-700); font-variant-numeric: lining-nums; }
.produkt__linia { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--zloto-700); font-size: var(--fs-15); font-weight: 600; line-height: 1.7; color: var(--sliwka-900); }
.produkt__linia span { white-space: nowrap; }
.produkt__termin { margin-top: 6px; font-size: var(--fs-14); line-height: 1.5; color: var(--tekst-600); }
@media (min-width: 768px) {
  .produkt { padding-block: 16px 80px; }
  .produkt__siatka {
    grid-template-columns: 1fr 1fr; column-gap: var(--rynna); row-gap: 32px; align-items: start;
    grid-template-areas: "naglowek zamow" "galeria zamow" "opis zamow";
    grid-template-rows: auto auto 1fr;
  }
  .produkt__naglowek h1 { font-size: var(--fs-44); }
  .zamow { position: sticky; top: 24px; }
}
@media (min-width: 1024px) {
  .produkt__siatka { grid-template-columns: 7fr 5fr; column-gap: 64px; }
  .produkt__naglowek h1 { font-size: var(--fs-64); line-height: 72px; }
}

.galeria__glowne .foto { border-radius: var(--promien-l); }
.galeria__miniatury { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.galeria__miniatury .foto:first-child { outline: 2px solid var(--sliwka-900); outline-offset: 2px; }

.produkt__opis { display: grid; gap: 28px; }
.produkt__opis h2 { margin-bottom: 8px; font-size: var(--fs-28); }
.produkt__opis p { color: var(--tekst-600); }
.produkt__opis strong { color: var(--tekst-900); font-weight: 700; }
.produkt__opis .opis__wariant { margin-bottom: 8px; color: var(--tekst-900); }
.produkt__opis .opis__alergeny { margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--zloto-700); background: color-mix(in srgb, var(--zloto-500) 8%, var(--krem-50)); color: var(--tekst-900); }

/* panel zamówienia */
.zamow { padding: 16px; background: var(--biel); border: 1px solid var(--krem-200); border-radius: var(--promien-l); box-shadow: var(--cien); }
.zamow__tytul { font-size: var(--fs-32); line-height: 1.1; }
.zamow__tytul::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 12px; background: var(--zloto-700); }
.zamow__pole { margin-top: 24px; }
.zamow__pole > .etykieta, .zamow__pole > .pole__etykieta-wiersz { margin-bottom: 10px; }
.zamow__pole--grupa { padding-top: 24px; border-top: 1px solid var(--krem-200); }
.zamow__pole > .etykieta--grupa { margin-bottom: 14px; font-size: var(--fs-17); font-weight: 700; color: var(--sliwka-900); }
.zamow__pola { display: grid; gap: 18px; }
.zamow__info { margin-top: 24px; }
.zamow__uwaga { margin-top: 12px; font-size: var(--fs-15); line-height: 1.55; color: var(--tekst-900); }
.zamow__alergeny {
  display: block; margin-top: 20px; padding: 12px 14px; border-left: 3px solid var(--zloto-700);
  background: color-mix(in srgb, var(--zloto-500) 8%, var(--biel));
  font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-900); text-decoration: none;
}
.zamow__alergeny:hover { background: color-mix(in srgb, var(--zloto-500) 14%, var(--biel)); }
.zamow__alergeny-link { color: var(--sliwka-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.suma { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--krem-200); font-family: var(--czcionka-naglowki); font-size: var(--fs-32); font-weight: 600; line-height: 1.1; color: var(--sliwka-900); font-variant-numeric: lining-nums; }
.suma strong { color: var(--sliwka-700); font-weight: 600; white-space: nowrap; }
.zamow .przycisk--caly { min-height: 56px; margin-top: 16px; padding: 12px 24px; line-height: 1.3; white-space: normal; text-wrap: balance; }
.zamow__drobne { margin-top: 14px; font-size: var(--fs-14); line-height: 1.55; color: var(--tekst-600); }
.zamow__linki { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
.zamow__linki a { display: inline-flex; align-items: center; min-height: var(--cel); font-size: var(--fs-14); font-weight: 600; color: var(--sliwka-700); text-underline-offset: 3px; }
@media (min-width: 768px) { .zamow { padding: 28px; } }
@media (min-width: 1024px) { .zamow { padding: 32px; } }

/* cele dotykowe: dzień kalendarza ma co najmniej 44 px szerokości, więc siatka 7 kolumn ma min. 308 px. W węższej karcie
   (połówka ekranu 768-839 px, panel 5/12 przy 1024-1052 px) wchodzi symetrycznie w wewnętrzny margines karty. */
@media (min-width: 360px) {
  .zamow .kal, .zamow .kal__naglowek { width: max(100%, 308px); margin-left: min(0px, calc((100% - 308px) / 2)); }
}
@media (max-width: 359px) { .zamow { padding: 12px; } }

/* przycisk telefonu zwija się do samej ikony, gdy w nagłówku jest za mało miejsca (numer jest w stopce i w aria-label) */
@media (max-width: 429px) {
  .pasek-gorny--noc .tel-skrot { width: 48px; padding: 0; justify-content: center; }
  .pasek-gorny--noc .tel-skrot span { display: none; }
}
/* E1 (17.10): siedem pozycji menu z „Dla firm”: numer zwija się do ikony aż do 1439 px (inaczej „Kontakt” nachodzi na telefon przy 1280) */
@media (min-width: 768px) and (max-width: 1439px) {
  .pasek-gorny--noc .tel-skrot { width: 48px; padding: 0; justify-content: center; }
  .pasek-gorny--noc .tel-skrot span { display: none; }
}

.edycja-sesja { display: flex; align-items: center; gap: 10px; }
.edycja-sesja__panel {
  display: inline-flex; align-items: center; min-height: var(--cel); padding: 0 12px;
  font-size: var(--fs-16); font-weight: 600; line-height: 1.2; color: var(--sliwka-900); text-underline-offset: 4px;
  text-decoration: underline; text-decoration-color: var(--zloto-700); text-decoration-thickness: 2px;
}
.edycja-sesja__panel:hover { text-decoration-color: var(--sliwka-900); }
.edycja-sesja__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: var(--promien-pelny); background: var(--sliwka-100);
  font-size: var(--fs-14); font-weight: 600; line-height: 1.2; color: var(--sliwka-900); white-space: nowrap;
}
.edycja-sesja__chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
/* poniżej 1280 px sesja edycji przechodzi do drugiego rzędu nagłówka (pierwszy: logo, menu, telefon; drugi: Panel i chip) */
@media (max-width: 1279px) {
  .pasek-gorny--edycja .pasek-gorny__wnetrze { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
  .pasek-gorny--edycja .pasek-gorny__prawa { display: contents; }
  .pasek-gorny--edycja .tel-skrot { order: 1; margin-left: auto; }
  .pasek-gorny--edycja .menu-mobilne { order: 2; }
  .pasek-gorny--edycja .edycja-sesja { order: 3; flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--krem-200); }
  .pasek-gorny--edycja .edycja-sesja__panel { margin-left: -12px; }
}

/* toast po zapisie: zielony chip 44 px w prawym górnym rogu (w makiecie zawieszony pod nagłówkiem) */
.toast {
  position: absolute; top: calc(100% + 8px); right: var(--gutter); z-index: 24;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 16px;
  border-radius: var(--promien-pelny); background: var(--ok); color: var(--na-przycisku); box-shadow: var(--cien);
  font-size: var(--fs-15); font-weight: 600; line-height: 1.2;
}
.toast__tekst { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.toast__cofnij {
  min-height: var(--cel); padding: 0 12px; border: 0; border-radius: var(--promien-pelny); background: none; color: var(--na-przycisku);
  font-size: var(--fs-15); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.toast__cofnij:hover { background: color-mix(in srgb, var(--na-przycisku) 16%, transparent); }
.toast :focus-visible { outline-color: var(--na-przycisku); }

/* podpowiedź pod polem po lewej, licznik po prawej (ekran 05) */
.pole__pod { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px 16px; margin-top: 6px; }
.pole__pod .pole__podpowiedz { flex: 1 1 auto; margin-top: 0; }
.pole__pod .pole__licznik { flex: none; margin-top: 0; }

/* ---------- 3. Pasek komunikatu nad nagłówkiem (09): tło śliwkowe, złoto tylko jako linia 2 px i ikona ---------- */
.komunikat { position: relative; z-index: 21; background: var(--komunikat-tlo); color: var(--komunikat-tekst); border-bottom: 2px solid var(--zloto-500); }
.komunikat__wnetrze { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.komunikat__ikona { flex: none; width: 20px; height: 20px; color: var(--zloto-500); }
/* na telefonach węższych niż 430 px ikona znika: z nią tekst zawijałby się do trzech linii (pasek 57-64 px zamiast 46 px) */
@media (max-width: 429px) { .komunikat__ikona { display: none; } }
.komunikat__tekst { flex: 1 1 auto; margin: 0; padding-block: 3px; font-size: var(--fs-13); font-weight: 600; line-height: 1.25; text-wrap: balance; }
@media (min-width: 390px) { .komunikat__tekst { font-size: var(--fs-15); } }
.komunikat__link {
  flex: none; display: inline-flex; align-items: center; min-height: var(--cel); padding: 0 8px;
  font-size: var(--fs-15); font-weight: 700; line-height: 1.2; color: var(--komunikat-tekst);
  text-decoration: underline; text-underline-offset: 3px;
}
.komunikat__link:hover { text-decoration-thickness: 2px; }
.komunikat__zamknij {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; border-radius: var(--promien-pelny);
  background: none; color: var(--komunikat-tekst);
}
.komunikat__zamknij:hover { background: color-mix(in srgb, var(--komunikat-tekst) 14%, transparent); }
.komunikat :focus-visible { outline-color: var(--zloto-500); }
@media (min-width: 768px) and (max-width: 1023px) {
  /* ikona i tekst razem w lewej połówce (tekst = połowa minus ikona i odstęp), "Zamów" i zamknięcie po prawej: nic nie leży w rynnie */
  .komunikat__wnetrze { min-height: 46px; }
  .komunikat__tekst { flex: 0 1 calc(var(--polowka) - 28px); font-size: var(--fs-15); }
  .komunikat__link { margin-left: auto; }
}
@media (min-width: 1024px) {
  .komunikat__wnetrze { justify-content: center; min-height: 46px; position: relative; padding-inline: 64px; }
  .komunikat__tekst { flex: 0 1 auto; font-size: var(--fs-15); }
  /* separator jest częścią tekstu, nie linku: link jest inline-flex, więc dziedziczyłby podkreślenie */
  .komunikat__tekst::after { content: "·"; margin-left: 10px; }
  .komunikat__zamknij { position: absolute; right: calc(var(--gutter) - 12px); top: 1px; margin-right: 0; }
}

/* ---------- 4. Kafle kategorii: odznaki i linia produktu (09, 10) ---------- */
.kafel__opis { flex: 1 1 auto; }
.kafel__opis h3 { margin-top: 14px; }
.kafel__produkt { display: block; margin-top: 6px; font-size: var(--fs-15); font-weight: 600; line-height: 1.35; color: var(--sliwka-900); }

/* ---------- 5. Ekran 05: Kontakt ---------- */
.kontakt { padding-block: 24px 64px; }
.kontakt__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.kontakt__lewa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; min-width: 0; }
.kontakt__wstep h1 { font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
.kontakt__lead { margin-top: 12px; max-width: 34em; color: var(--tekst-600); }
.kontakt__szybko { margin-top: 20px; }
@media (min-width: 768px) {
  .kontakt { padding-block: 40px 80px; }
  .kontakt__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: start; }
  .kontakt__wstep h1 { font-size: var(--fs-44); }
  .kontakt__szybko { display: none; }
}
@media (min-width: 1024px) {
  .kontakt__siatka { grid-template-columns: 7fr 5fr; column-gap: 64px; }
  .kontakt__wstep h1 { max-width: none; font-size: var(--fs-64); line-height: 72px; }
}

.kontakt__formularz { padding: 20px 16px; background: var(--biel); border: 1px solid var(--krem-200); border-radius: var(--promien-l); box-shadow: var(--cien); }
@media (min-width: 768px) { .kontakt__formularz { padding: 28px; } }
@media (min-width: 1024px) { .kontakt__formularz { padding: 32px; } }
.kform__pola { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.kform__pole { margin-top: 22px; }
@media (min-width: 1024px) {
  .kform__pola { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .kform__pole--calosc { grid-column: 1 / -1; }
}
.kform__plik { align-items: flex-start; text-align: left; }
.kform__plik p { max-width: 30em; }
.kform__zgoda { margin-top: 20px; }
.kform__zgoda .opcja { align-items: flex-start; padding-block: 8px; }
.kform__zgoda .opcja input { margin-top: 2px; }
.kform__zgoda-link {
  display: inline-flex; align-items: center; min-height: var(--cel); margin-left: 36px;
  font-size: var(--fs-14); font-weight: 600; color: var(--sliwka-700); text-underline-offset: 3px;
}
.antybot {
  display: flex; align-items: center; justify-content: center; width: 300px; max-width: 100%; height: 65px; margin-top: 18px;
  border: 1px solid var(--panel-ramka); border-radius: var(--promien-xs); background: var(--panel-tlo);
  font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.04em; color: var(--tekst-600);
}
.kform__wyslij { min-height: 56px; margin-top: 20px; }
@media (min-width: 768px) { .kform__wyslij { display: inline-flex; width: auto; min-width: 260px; } }

.kontakt__karta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; background: var(--biel); border: 1px solid var(--krem-200); border-radius: var(--promien-l); box-shadow: var(--cien); }
@media (min-width: 768px) { .kontakt__karta { padding: 24px; } }
@media (min-width: 1024px) { .kontakt__karta { padding: 28px; } }
.kontakt__marka { display: flex; align-items: center; gap: 16px; }
.kontakt__marka h2 { font-size: var(--fs-24); line-height: 1.1; }
.kontakt__adres { margin-top: 6px; font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600); }
.kontakt__godziny p { margin-top: 2px; font-size: var(--fs-17); font-weight: 600; line-height: 1.45; color: var(--tekst-900); }
.kontakt__fb { padding-top: 14px; border-top: 1px solid var(--krem-200); font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600); }
.kontakt__fb a { display: inline-flex; align-items: center; min-height: var(--cel); font-weight: 600; color: var(--sliwka-700); text-underline-offset: 3px; }

.dojazd__lista { margin-top: 4px; }
.dojazd__lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--krem-200); font-size: var(--fs-16); line-height: 1.4; }
.dojazd__lista strong { font-weight: 700; color: var(--sliwka-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dojazd__trasa { margin-top: 6px; margin-left: -10px; }

/* mapy: statyczny obraz z OpenStreetMap (public/mapa, narzedzia/mapa-statyczna.mjs), przyciski do map, atrybucja ODbL;
   po zgodzie na cookies funkcjonalne obraz na kontakcie zastępuje iframe Google (public/app.js) w tej samej ramce */
.mapa { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--krem-200); border-radius: var(--promien); background: var(--krem-100); }
.mapa__ramka { position: relative; background: #f2efe9; }
.mapa__obraz { display: block; width: 100%; height: auto; }
.mapa__iframe { display: block; width: 100%; aspect-ratio: 720 / 450; border: 0; }
.mapa__podpis { display: grid; gap: 8px; padding: 12px 14px 10px; }
.mapa__przyciski { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.mapa__przyciski .przycisk { flex: 1 1 auto; }
.mapa__atrybucja { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; font-size: var(--fs-13); line-height: 1.4; color: var(--tekst-600); }
.mapa__atrybucja a { display: inline-flex; align-items: center; min-height: var(--cel); color: inherit; text-underline-offset: 2px; }

/* ---------- 6. Ekran 06: Podsumowanie zamówienia ---------- */
.podsumowanie { padding-block: 8px 64px; }
.podsumowanie__tytul { grid-area: tytul; font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
.podsumowanie__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; grid-template-areas: "tytul" "lewa" "prawa"; margin-top: 4px; }
.podsumowanie__lewa { grid-area: lewa; min-width: 0; }
.podsumowanie__prawa { grid-area: prawa; min-width: 0; }
@media (min-width: 768px) {
  .podsumowanie { padding-block: 16px 80px; }
  .podsumowanie__tytul { font-size: var(--fs-44); }
  /* połówki: tytuł i karta zamówienia po lewej, karta "Razem" po prawej od samej góry */
  .podsumowanie__siatka { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "tytul prawa" "lewa prawa"; column-gap: var(--rynna); row-gap: 24px; align-items: start; }
  .podsumowanie__prawa { position: sticky; top: 24px; }
}
@media (min-width: 1024px) {
  .podsumowanie__tytul { font-size: var(--fs-48); }
  .podsumowanie__siatka { grid-template-columns: 7fr 5fr; grid-template-areas: "tytul tytul" "lewa prawa"; column-gap: 64px; }
}

.podsumowanie__karta { padding: 20px 16px 4px; border-radius: var(--promien-l); }
@media (min-width: 768px) { .podsumowanie__karta { padding: 28px 28px 8px; } }
.podsumowanie__h2 { font-size: var(--fs-28); line-height: 1.1; }
.podsumowanie__h2::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 12px; background: var(--zloto-700); }

.pozycje { margin-top: 16px; }
.pozycja {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "foto opis cena" "foto opis akcja";
  column-gap: 14px; align-items: start; padding-block: 16px; border-top: 1px solid var(--krem-200);
}
.pozycja .foto { grid-area: foto; width: 72px; }
.pozycja__opis { grid-area: opis; min-width: 0; }
.pozycja__nazwa { font-size: var(--fs-24); line-height: 1.15; }
.pozycja__opcje { margin-top: 4px; font-size: var(--fs-15); line-height: 1.45; color: var(--tekst-600); }
.pozycja__cena { grid-area: cena; font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; line-height: 1.1; color: var(--sliwka-900); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums; }
.pozycja__akcja { grid-area: akcja; justify-self: end; margin-right: -10px; }

/* informacje przed formularzem: płatność przy odbiorze, telefon potwierdzający i skład, zaraz pod listą pozycji, na każdej szerokości */
.przed-danymi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 20px 24px; border-top: 1px solid var(--krem-200); }
.przed-danymi .zamow__alergeny { margin-top: 0; }
.upsell { margin-top: 0; padding-top: 22px; border-top: 1px solid var(--zloto-linia); }
.upsell__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.upsell__karta {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  padding: 12px; border: 1px solid var(--krem-200); border-radius: var(--promien); background: var(--krem-50);
}
.upsell__karta--dodana { border-color: var(--sliwka-900); background: var(--sliwka-50); }
.upsell__foto { width: 72px; aspect-ratio: 1 / 1; }
.upsell__opis { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.upsell__nazwa { font-size: var(--fs-24); line-height: 1.15; }
.upsell__meta { font-size: var(--fs-15); line-height: 1.4; color: var(--tekst-600); }
.upsell__przycisk { white-space: nowrap; }
.przycisk--dodane { background: var(--sliwka-100); border-color: var(--sliwka-900); color: var(--sliwka-900); }
.przycisk--dodane:hover { background: var(--sliwka-100); }
/* wąsko (telefon do 429 px i połówka 768-1023): przycisk pod tekstem, w prawej kolumnie karty */
@media (max-width: 429px), (min-width: 768px) and (max-width: 1023px) {
  .upsell__karta { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "foto opis" "foto przycisk"; row-gap: 10px; align-items: start; }
  .upsell__foto { grid-area: foto; }
  .upsell__opis { grid-area: opis; }
  .upsell__przycisk { grid-area: przycisk; justify-self: start; }
}
/* desktop: trzy karty w rzędzie, pionowo */
@media (min-width: 1024px) {
  .upsell__lista { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
  .upsell__karta { position: relative; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: stretch; row-gap: 12px; padding: 12px; }
  .upsell__foto { width: 100%; aspect-ratio: 4 / 3; }
  .upsell__przycisk { width: 100%; }
  .upsell__opis .odznaka { position: absolute; top: -12px; left: 14px; box-shadow: var(--cien-maly); }
}

.odbior, .dane { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--krem-200); }
.odbior__wiersz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 4px; }
.odbior__termin { font-size: var(--fs-17); line-height: 1.5; }
.odbior__termin strong { font-weight: 700; color: var(--sliwka-900); }
.odbior__wiersz .przycisk-tekst { margin-left: -10px; }
.dane { padding-bottom: 24px; }
.dane__pola { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 14px; }
@media (min-width: 1024px) { .dane__pola { grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; } }
.dane__kod { max-width: 180px; }
.dane__pole--calosc { grid-column: 1 / -1; }

.razem { padding: 20px 16px; background: var(--biel); border: 1px solid var(--krem-200); border-radius: var(--promien-l); box-shadow: var(--cien); }
@media (min-width: 768px) { .razem { padding: 28px; } }
.razem__tytul { font-size: var(--fs-28); line-height: 1.1; }
.razem__tytul::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 12px; background: var(--zloto-700); }
.razem__lista { margin-top: 12px; }
.razem__lista li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--krem-200); font-size: var(--fs-16); line-height: 1.4; }
.razem__lista li span:last-child { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.razem__suma { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; }
.razem__suma span { font-size: var(--fs-15); font-weight: 600; color: var(--tekst-600); }
.razem__suma strong { font-family: var(--czcionka-naglowki); font-size: 36px; font-weight: 600; line-height: 1.1; color: var(--sliwka-900); white-space: nowrap; font-variant-numeric: lining-nums; }
.razem__przycisk { min-height: 56px; margin-top: 20px; padding: 12px 24px; line-height: 1.3; white-space: normal; text-wrap: balance; }

/* przyklejony pasek zamówienia: tylko telefon, żeby główny przycisk był zawsze w zasięgu; druga linia przypomina o płatności i regulaminie */
.pasek-zamow { display: none; }
@media (max-width: 767px) {
  .pasek-zamow {
    position: sticky; bottom: 0; z-index: 25; display: grid; gap: 4px;
    margin: 8px calc(-1 * var(--gutter)) -64px; padding: 10px var(--gutter) 8px; background: var(--biel);
    border-top: 1px solid var(--krem-200); box-shadow: 0 -6px 20px color-mix(in srgb, var(--sliwka-900) 8%, transparent);
  }
  .pasek-zamow__rzad { display: flex; align-items: center; gap: 14px; }
  .pasek-zamow__suma { display: grid; flex: none; line-height: 1.1; }
  .pasek-zamow__suma span { font-size: var(--fs-13); font-weight: 600; color: var(--tekst-600); }
  .pasek-zamow__suma strong { font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; color: var(--sliwka-900); white-space: nowrap; font-variant-numeric: lining-nums; }
  .pasek-zamow .przycisk { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 8px 14px; font-size: var(--fs-15); line-height: 1.25; white-space: normal; text-wrap: balance; }
  .pasek-zamow__info { margin: 0; text-align: center; font-size: var(--fs-13); font-weight: 600; line-height: 1.35; color: var(--tekst-600); }
  /* przy 320 px druga linia (13 px, 291 px szerokości) zawijałaby się do dwóch, więc boczne pole paska maleje z 16 do 12 px */
  @media (max-width: 359px) { .pasek-zamow { padding-inline: 12px; } }
  html.z-paskiem-zamow { scroll-padding-bottom: calc(var(--pasek-zamow-wys) + 16px); }
  /* gdy któreś pole formularza ma fokus (klawiatura ekranowa albo Tab), pasek chowa się: nie zasłania pola ani nie zjada miejsca nad klawiaturą.
     Przeglądarka nie przewija do pola, które już jest w oknie, ale leży pod paskiem, więc sam scroll-padding nie wystarcza. Wraca po zejściu z pola (a sam pasek jest dostępny Tabem). */
  .pasek-zamow { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
  .podsumowanie__formularz:has(:focus:not(.pasek-zamow, .pasek-zamow *)) .pasek-zamow { transform: translateY(120%); transition: none; }
}
@media (prefers-reduced-motion: reduce) { .pasek-zamow { transition: none; } }

/* ---------- 7. Ekran 07: Status zamówienia ---------- */
.status { padding-block: 24px 64px; }
.status__uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 760px; margin-inline: auto; }
.status__kolumna { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; min-width: 0; }
@media (min-width: 768px) and (max-width: 1023px) {
  .status { padding-block: 40px 80px; }
  /* dwie połówki z rynną: treść płynie przez dwie kolumny (nagłówek i zdjęcie, potem przebieg i karta odbioru), sekcje się nie dzielą */
  .status__uklad { display: block; max-width: none; columns: 2; column-gap: var(--rynna); }
  .status__kolumna { display: contents; }
  .status .status__uklad > *, .status .status__kolumna > * { break-inside: avoid; margin-bottom: 32px; }
}
@media (min-width: 1024px) { .status { padding-block: 56px 96px; } .status__uklad { gap: 36px; } .status__kolumna { gap: 36px; } }
.status__naglowek h1 { margin-top: 10px; font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
@media (min-width: 768px) { .status__naglowek h1 { font-size: var(--fs-44); } }
@media (min-width: 1024px) { .status__naglowek h1 { font-size: var(--fs-48); } }
.status__chip { margin-top: 16px; }
.status__odbior { margin-top: 14px; font-size: var(--fs-17); line-height: 1.5; color: var(--tekst-900); }
.status__odbior strong { font-weight: 700; color: var(--sliwka-900); }
.status__trasa { margin-top: 18px; }
.status__zdjecie { margin: 0; }
.status__zdjecie figcaption { margin-top: 12px; font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600); }

.status__przebieg > .nadtytul { margin-bottom: 16px; }
.os-statusu { display: grid; }
.os-statusu__krok { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; padding-bottom: 22px; }
.os-statusu__krok:last-child { padding-bottom: 0; }
.os-statusu__znak { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sliwka-900); color: var(--biel); }
.os-statusu__krok::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--zloto-700); }
.os-statusu__krok:last-child::before { display: none; }
.os-statusu__krok--zrobiony:nth-last-child(2)::before { background: linear-gradient(var(--obrys) 55%, transparent 0) 0 0 / 2px 8px repeat-y; }
.os-statusu__krok--czeka .os-statusu__znak { background: var(--panel-tlo); box-shadow: inset 0 0 0 2px var(--obrys); }
.os-statusu__tytul { font-size: var(--fs-17); font-weight: 700; line-height: 1.35; color: var(--sliwka-900); }
.os-statusu__krok--czeka .os-statusu__tytul { color: var(--tekst-600); }
.os-statusu__meta { margin-top: 2px; font-size: var(--fs-15); line-height: 1.45; color: var(--tekst-600); }

.odbior-karta { padding: 22px 18px 22px; border-radius: var(--promien-l); }
@media (min-width: 768px) { .odbior-karta { padding: 24px 24px 26px; } }
.odbior-karta__termin { margin-top: 10px; font-family: var(--czcionka-naglowki); font-size: var(--fs-32); font-weight: 600; line-height: 1.1; color: var(--sliwka-900); font-variant-numeric: lining-nums; }
.odbior-karta__adres { margin-top: 6px; font-size: var(--fs-17); font-weight: 600; line-height: 1.4; }
.odbior-karta__trasa { margin-top: 2px; margin-left: -10px; }
.odbior-karta__lista { display: grid; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--krem-200); }
.odbior-karta__lista dt { font-size: var(--fs-13); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--tekst-600); }
.odbior-karta__lista dd { margin: 4px 0 0; font-size: var(--fs-17); line-height: 1.5; overflow-wrap: anywhere; }
.odbior-karta__lista strong { font-weight: 700; color: var(--sliwka-900); }
.odbior-karta__akcje { display: grid; gap: 10px; margin-top: 20px; }
.odbior-karta__akcje .przycisk { width: 100%; }
@media (min-width: 1024px) { .odbior-karta__akcje { grid-template-columns: 1fr 1fr; } }
.status__zmiana { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: var(--fs-17); font-weight: 600; }
.status__zmiana a { display: inline-flex; align-items: center; min-height: var(--cel); color: var(--sliwka-700); text-underline-offset: 3px; }
.pozycje-zam > .nadtytul { margin-bottom: 4px; }
.pozycje-zam__lista li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--krem-200); }
.pozycje-zam__nazwa { font-weight: 700; line-height: 1.4; color: var(--tekst-900); }
.pozycje-zam__opcje { margin-top: 2px; font-size: var(--fs-15); line-height: 1.45; color: var(--tekst-600); }
.pozycje-zam__cena { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.2; color: var(--sliwka-900); white-space: nowrap; font-variant-numeric: lining-nums; }
.pozycje-zam__razem { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; font-size: var(--fs-15); font-weight: 600; color: var(--tekst-600); }
.pozycje-zam__razem strong { font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-weight: 600; color: var(--sliwka-900); font-variant-numeric: lining-nums; }

/* ---------- 8. Ekran 08: Od 1895 ---------- */
.od-hero { padding-block: 24px 40px; }
.od-hero__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .od-hero { padding-block: 48px 64px; }
  .od-hero__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: center; }
}
@media (min-width: 1024px) {
  .od-hero { padding-block: 56px 72px; }
  .od-hero__siatka { gap: 56px; }
  .od-hero .hero__tekst { max-width: 900px; }
}
.od-hero__foto .foto { border-radius: var(--promien-duzy); }

.od-trzy__siatka { display: grid; grid-template-columns: minmax(0, 1fr); }
.od-trzy__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.od-karta { padding: 22px 22px 26px; background: var(--biel); border: 1px solid var(--krem-200); border-top: 1px solid var(--zloto-700); border-radius: var(--promien); box-shadow: var(--cien-maly); }
.od-karta .krok__numer { margin-bottom: 10px; }
.od-karta h3 { font-size: var(--fs-28); }
.od-karta p { margin-top: 10px; color: var(--tekst-600); }
@media (min-width: 768px) and (max-width: 1023px) {
  .od-trzy__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); row-gap: 24px; }
  .od-trzy__lista { display: contents; }
  .od-trzy .sekcja__naglowek { align-self: center; max-width: none; margin-bottom: 0; }
}
@media (min-width: 1024px) { .od-trzy__lista { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* oś czasu: telefon i połówka pionowo, desktop poziomo */
.od-os__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.od-os .sekcja__naglowek { margin-bottom: 0; }
.os-czasu { position: relative; display: grid; gap: 30px; padding-left: 34px; }
.os-czasu::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--zloto-700); }
.os-czasu__punkt { position: relative; }
.os-czasu__kropka { position: absolute; left: -34px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--zloto-500); box-shadow: 0 0 0 4px var(--krem-50), 0 0 0 5px var(--zloto-700); }
.os-czasu__rok { font-family: var(--czcionka-naglowki); font-size: 44px; font-weight: 600; line-height: 1; color: var(--zloto-duzy); font-variant-numeric: lining-nums; }
.os-czasu__opis { margin-top: 6px; font-size: var(--fs-18); font-weight: 500; line-height: 1.4; }
.os-czasu__animacja { margin: 0; }
@media (min-width: 768px) and (max-width: 1023px) {
  .od-os__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); grid-template-rows: auto 1fr; grid-template-areas: "glowa os" "chip os"; align-items: start; }
  .od-os .sekcja__naglowek { grid-area: glowa; max-width: none; }
  .os-czasu { grid-area: os; }
  .os-czasu__animacja { grid-area: chip; }
}
@media (min-width: 1024px) {
  .od-os__siatka { gap: 40px; }
  .os-czasu { grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 40px 0 0; text-align: center; }
  .os-czasu::before { left: 16.666%; right: 16.666%; top: 7px; bottom: auto; width: auto; height: 1px; }
  .os-czasu__kropka { left: 50%; top: -40px; transform: translateX(-50%); }
  .os-czasu__animacja { text-align: center; }
}

/* A6 (24.10): bez mapy i adresu, jedna kolumna na szerokość kontenera; przy 768-1023 tekst w lewej połówce (pas zgięcia Duo x 421-469 wolny) */
.od-gdzie__zdanie + p { margin-top: 12px; }
@media (min-width: 768px) and (max-width: 1023px) { .od-gdzie__tekst { max-width: var(--polowka); } }
.od-gdzie__zdanie { font-family: var(--czcionka-naglowki); font-size: var(--fs-32); font-weight: 600; line-height: 1.15; color: var(--sliwka-900); text-wrap: balance; }
@media (min-width: 1024px) { .od-gdzie__zdanie { font-size: var(--fs-40); } }

/* ---------- 9. Ekran 10: tryb edycji treści (wzorzec wealthbuilder.pl: przycisk "Popraw teksty", obrysy, Enter zapisuje) ---------- */
/* po włączeniu każdy tekst dłuższy niż 25 znaków dostaje cienki przerywany obrys, bez etykiet */
.edytowalny { outline: 1.5px dashed var(--sliwka-500); outline-offset: 4px; border-radius: 6px; }
.rodzina .edytowalny { outline-color: var(--obrys-na-pasie); }
.rodzina .zablokowany { outline-color: var(--obrys-zablokowany-na-pasie); }
/* stany tekstu: przerywany = nietknięty; ciągły fioletowy = w edycji (z chipami "niezapisane" i podpowiedzią);
   ciągły zielony = właśnie zapisany (na 2 s, razem z toastem "Zapisano"); ciągły szary z kłódką = zablokowany */
.edytowalny--aktywny { outline: 2px solid var(--sliwka-500); outline-offset: 4px; background: color-mix(in srgb, var(--sliwka-500) 5%, transparent); }
.edytowalny--zapisany { outline: 2px solid var(--ok); outline-offset: 4px; }
.edytowalny__okno { margin-top: 22px; }
.edytowalny__okno > .edytowalny { margin-top: 0; }
.edytowalny__podpowiedzi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.edytowalny__stan { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: var(--promien-pelny); background: var(--uwaga-tlo); box-shadow: inset 0 0 0 1px var(--uwaga); font-size: var(--fs-13); font-weight: 700; line-height: 1; color: var(--uwaga-tekst); white-space: nowrap; }
.edytowalny__stan i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--uwaga); }
.edytowalny__podpowiedz { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: var(--promien-pelny); background: var(--sliwka-900); color: var(--na-przycisku); font-size: var(--fs-13); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.zablokowany { position: relative; outline: 1.5px solid var(--obrys); outline-offset: 4px; border-radius: 6px; }
.zablokowany__klodka { position: absolute; left: 10px; top: -22px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px; border-radius: var(--promien-pelny); background: var(--panel-tlo); box-shadow: inset 0 0 0 1px var(--obrys); font-size: var(--fs-13); font-weight: 600; line-height: 1; color: var(--tekst-600); white-space: nowrap; }
.zablokowany__klodka .ikona { width: 14px; height: 14px; }
.hero__zaufanie.zablokowany { margin-top: 34px; }
.tryb-edycji .stopka__dol { row-gap: 30px; }
.edycja-zmiana { padding: 0; border-radius: 3px; background: color-mix(in srgb, var(--zloto-500) 34%, transparent); text-decoration: none; }
.edycja-kursor { display: inline-block; width: 2px; height: 1.1em; margin: 0 1px; vertical-align: text-bottom; background: var(--sliwka-900); }
/* obrysy sąsiednich tekstów nie mogą się zlewać: małe odstępy dla nakładających się par */
.edytowalny + .edytowalny, .krok h3.edytowalny { margin-bottom: 6px; }
.krok .edytowalny { margin-top: 10px; }
.krok h3.edytowalny + .edytowalny { margin-top: 14px; }

.kafel .edytowalny { margin-top: 12px; }
.kafel__info .edytowalny { margin-top: 0; }
@media (max-width: 767px) { .tryb-edycji .hero { padding-top: 60px; } }
/* pływający przycisk nie zasłania ostatnich linii stopki i fokusu */
.tryb-edycji .stopka { padding-bottom: 88px; }
html:has(.edytor-pigula) { scroll-padding-bottom: 88px; }

/* Duo rozłożone (768-1023 px): obrys przerywany wystaje 5,5 px poza tekst, więc rynna rośnie z 48 do 60 px,
   a połówki kurczą się o 6 px po każdej stronie; obrysy zostają poza pasem zgięcia x 421-469 */
@media (min-width: 768px) and (max-width: 1023px) { .tryb-edycji { --rynna: 60px; --polowka: calc((100% - var(--rynna)) / 2); } }

/* pływający przycisk: w prawym dolnym rogu okna, tylko dla zalogowanego admina; tu stan włączony */
.edytor-pigula {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px 0 16px; border: 0; border-radius: var(--promien-pelny);
  background: var(--sliwka-900); color: var(--na-przycisku); box-shadow: var(--cien);
  font-size: var(--fs-16); font-weight: 600; line-height: 1.2;
}
.edytor-pigula:hover { background: var(--sliwka-700); }
.edytor-pigula :focus-visible, .edytor-pigula:focus-visible { outline-color: var(--focus-na-przycisku); }
@media (min-width: 1024px) { .edytor-pigula { right: 24px; bottom: 24px; } }

/* szary pasek informacyjny nad stopką */
.edycja-info { padding-block: 18px; background: var(--panel-tlo); border-top: 1px solid var(--panel-ramka); border-bottom: 1px solid var(--panel-ramka); }
.edycja-info__wnetrze { display: flex; align-items: flex-start; gap: 12px; }
.edycja-info .ikona { margin-top: 2px; color: var(--tekst-600); }
.edycja-info__tresc { display: grid; gap: 6px; min-width: 0; }
.edycja-info p { font-size: var(--fs-15); line-height: 1.55; color: var(--tekst-900); }
.edycja-info strong { font-weight: 700; color: var(--sliwka-900); }
@media (min-width: 768px) and (max-width: 1023px) { .edycja-info__tresc { max-width: calc(var(--polowka) - 32px); } }

/* =============================================================================
   B (sklep): dodatki wykonawcy strony publicznej, 08.10.2026. Tylko tokeny z styl.css (zero kolorów szesnastkowych poza stałymi marki),
   tryb nocny działa przez role. Układ 768-1023 px = dwie połówki z rynną --rynna: nic ważnego nie leży w pasie zgięcia (x 421-469 przy 890 px).
   ============================================================================= */

/* ---------- Atrybut hidden zawsze wygrywa (przyciski odkrywane przez app.js, znaczniki „zawiera”) ---------- */
[hidden] { display: none !important; }

/* ---------- Nagłówek: pigułka „Zamów” od 466 px (iPhone Duo złożony), telefon zwija się do ikony ---------- */
@media (min-width: 466px) and (max-width: 767px) {
  .pasek-gorny__cta { display: inline-flex; min-height: 48px; padding: 0 20px; }
  .pasek-gorny--noc .tel-skrot { width: 48px; padding: 0; justify-content: center; }
  .pasek-gorny--noc .tel-skrot span { display: none; }
}

/* ---------- Formularze: pole-pułapka, błędy, stany pól ---------- */
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pole__blad { margin-top: 6px; font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--blad-tekst); }
.wejscie[aria-invalid="true"] { border-color: var(--blad); }
.bledy { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--blad); border-left-width: 4px; border-radius: var(--promien); background: var(--blad-tlo); font-size: var(--fs-15); line-height: 1.5; }
.bledy .ikona { margin-top: 2px; color: var(--blad-tekst); }
.bledy__lista { margin-top: 4px; }
.bledy__lista a { display: inline-flex; align-items: center; min-height: var(--cel); color: var(--tekst-900); text-underline-offset: 3px; }
.podsumowanie__blad { margin-bottom: 20px; }
.podsumowanie__blad .brak-miejsc__tresc p { font-size: var(--fs-15); }
.antybot-miejsce { margin-top: 16px; }

/* ---------- Strony z nagłówkiem H1 w sekcji (kategorie, dziękujemy, regulamin) ---------- */
.sekcja__naglowek h1 { font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
@media (min-width: 768px) { .sekcja__naglowek h1 { font-size: var(--fs-44); } }
@media (min-width: 1024px) { .sekcja__naglowek h1 { font-size: var(--fs-48); } }
.kategoria-strona { padding-block: 8px 64px; }
.kategoria-strona__wstep { margin-top: 12px; max-width: 34em; color: var(--tekst-600); }
.kategoria-strona__okazja { margin-bottom: 28px; max-width: 44em; }
.kategoria-strona__okazja a, .kategoria-strona__stopka a, .kontakt-home a:not(.przycisk):not(.kontakt-home__telefon) { color: var(--sliwka-700); font-weight: 600; text-underline-offset: 3px; }
.kategoria-strona__stopka { margin-top: 36px; max-width: 34em; color: var(--tekst-600); }
@media (min-width: 768px) and (max-width: 1023px) { .kategoria-strona .sekcja__naglowek, .kategoria-strona__okazja, .kategoria-strona__stopka { max-width: var(--polowka); } }
.kategoria-strona .kafel__opis h3 { margin-top: 14px; }

/* ---------- Strona główna: „Na jaką okazję?” ---------- */
.okazje__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.okazja { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 96px; padding: 16px; border: 1px solid var(--krem-200); border-radius: var(--promien); background: var(--biel); text-decoration: none; }
.okazja:hover { border-color: var(--sliwka-900); }
.okazja__nazwa { font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.15; color: var(--sliwka-900); }
.okazja__opis { font-size: var(--fs-15); line-height: 1.4; color: var(--tekst-600); }
@media (min-width: 768px) { .okazje__lista { column-gap: var(--rynna); row-gap: 16px; } }
@media (min-width: 1024px) { .okazje__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }

.jak__dalej { margin-top: 28px; max-width: 40em; color: var(--tekst-600); }
@media (min-width: 768px) and (max-width: 1023px) { .jak__dalej { grid-column: 1 / -1; max-width: var(--polowka); } }

/* ---------- Strona główna: FAQ (natywne details, odpowiedzi w HTML dla robotów) ---------- */
/* A7 (24.10): lista na pełną szerokość kontenera (wiersz pytania i linie podziału), odpowiedź do ~70 znaków w wierszu */
.faq__lista { max-width: none; }
.faq__pozycja { border-top: 1px solid var(--krem-200); }
.faq__pozycja:last-child { border-bottom: 1px solid var(--krem-200); }
.faq__pytanie { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 0; font-size: var(--fs-18); font-weight: 600; line-height: 1.35; color: var(--tekst-900); list-style: none; cursor: pointer; }
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border: solid var(--sliwka-700); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.faq__pozycja[open] > .faq__pytanie::after { transform: rotate(-135deg); }
.faq__odpowiedz { padding: 0 0 18px; max-width: 70ch; color: var(--tekst-600); }
/* 768-1023 (Duo rozłożony): dwie kolumny-połówki na całą szerokość kontenera, żeby wiersze pytań nie leżały w pasie zgięcia x 421-469 */
@media (min-width: 768px) and (max-width: 1023px) {
  .faq__lista { max-width: none; columns: 2; column-gap: var(--rynna); }
  .faq__pozycja { break-inside: avoid; border-bottom: 1px solid var(--krem-200); }
  .faq__pozycja:last-child { border-bottom: 1px solid var(--krem-200); }
}

/* ---------- Strona główna: dojazd, godziny, płatność ---------- */
.dojazd-sekcja__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.dojazd-sekcja__siatka .sekcja__naglowek { margin-bottom: 0; }
.dojazd-sekcja__adres { margin: 4px 0 14px; font-size: var(--fs-18); font-weight: 600; line-height: 1.45; }
.dojazd-sekcja__godziny li { font-size: var(--fs-18); font-weight: 600; line-height: 1.6; }
.dojazd-sekcja__teraz { margin-top: 6px; font-size: var(--fs-15); font-weight: 600; color: var(--ok-tekst); }
.dojazd-sekcja__platnosc-tytul { margin-top: 20px; }
@media (min-width: 768px) { .dojazd-sekcja__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); row-gap: 20px; } .dojazd-sekcja__siatka .sekcja__naglowek { grid-column: 1 / -1; max-width: none; } }
@media (min-width: 1024px) { .dojazd-sekcja__siatka { column-gap: 64px; } }

/* ---------- Strona główna: kontakt ---------- */

/* ---------- Aktualności (komunikaty w miejscu „kafel”) ---------- */
.aktualnosci__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.aktualnosc { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border: 1px solid var(--krem-200); border-top: 2px solid var(--zloto-700); border-radius: var(--promien); background: var(--biel); }
.aktualnosc__tytul { font-size: var(--fs-24); }
@media (min-width: 768px) { .aktualnosci__lista { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }
@media (min-width: 1024px) { .aktualnosci__lista { grid-template-columns: repeat(3, 1fr); column-gap: 24px; } }

/* ---------- „Od 1895”: archiwum ---------- */
.od-archiwum__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.od-archiwum__pozycja { margin: 0; }
.od-archiwum__pozycja figcaption { margin-top: 10px; font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600); }
@media (min-width: 768px) { .od-archiwum__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }
@media (min-width: 1024px) { .od-archiwum__siatka { column-gap: 48px; } }

/* ---------- Teksty prawne ---------- */
.prawne { padding-block: 8px 72px; }
.prawne__tresc { max-width: 46em; }
.prawne__tresc h1 { font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
.prawne__tresc h2 { margin-top: 32px; font-size: var(--fs-24); }
.prawne__tresc p, .prawne__tresc li { margin-top: 10px; color: var(--tekst-900); }
.prawne__tresc ul { margin-top: 6px; padding-left: 1.2em; list-style: disc; }
.prawne__tresc a { color: var(--sliwka-700); font-weight: 600; text-underline-offset: 3px; }
.prawne__baner { margin-block: 20px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .prawne__tresc { max-width: none; }
  .prawne__kolumny { columns: 2; column-gap: var(--rynna); }
  .prawne__kolumny h2 { break-after: avoid; }
}

/* ---------- Karta produktu: dodatki ---------- */
.produkt__skocz { margin-top: 16px; }
@media (min-width: 768px) { .produkt__skocz { display: none; } }
.opis__porcje li { margin-top: 4px; color: var(--tekst-600); }
.opis__porcje strong { color: var(--tekst-900); }
.opis__wariant { margin-top: 8px; }
/* podgląd napisu na zdjęciu tortu: tekst nad placeholderem, kroj nagłówków */
.foto__napis { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16% 12%; text-align: center; font-family: var(--czcionka-naglowki); font-style: italic; font-weight: 600; font-size: clamp(18px, 7cqw, 38px); line-height: 1.12; color: var(--sliwka-900); text-wrap: balance; overflow-wrap: anywhere; pointer-events: none; }
.kal-miesiac + .kal-miesiac { margin-top: 22px; }
.kal-miesiac[hidden] { display: none; }
.kal__strzalka[hidden] { display: none; }

/* stan „brak miejsc” (makieta 02b, KONCEPCJA §14.7) */
.kal__dzien--wybrany input:disabled + span { outline: 2px dashed var(--obrys); outline-offset: -2px; }
.kal__wybrano-brak { font-weight: 700; color: var(--uwaga-tekst); white-space: nowrap; }
.brak-miejsc { margin-top: 16px; }
.brak-miejsc__tresc { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.brak-miejsc__tresc p { margin: 0; }
.zamow .przycisk:disabled, .zamow .przycisk:disabled:hover { border-color: var(--obrys); }
.zamow__podpowiedz-przycisk { margin: 12px 0 0; text-align: center; font-size: var(--fs-15); font-weight: 600; line-height: 1.4; color: var(--tekst-900); }
@media (max-width: 359px) {
  .zamow .kal, .zamow .kal__naglowek { width: calc(100% + 58px); margin-left: -29px; }
  .zamow .kal__naglowek { padding-inline: 8px; }
}

/* ---------- Podsumowanie: skład w kartach dosprzedaży, dojazd ---------- */
.upsell__sklad { font-size: var(--fs-13); line-height: 1.4; color: var(--tekst-600); }
.dojazd-blok:empty { display: none; }
.dojazd-blok { margin-top: 12px; }
.dojazd-blok__zdanie { font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-900); }
.dojazd-blok__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.dojazd-blok__linki .przycisk-tekst { margin-left: -10px; }

/* ---------- Status zamówienia: zdjęcie z R2, ostrzeżenie, termin ---------- */
.status__zdjecie-ramka { padding: 0; }
.status__zdjecie-obraz { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.status__ostrzezenie { margin-top: 16px; }
.status__termin { margin-top: -8px; }
.status .os-statusu__krok--czeka .os-statusu__meta { max-width: 36em; }

/* ---------- Kontakt: dodatki ---------- */
.kontakt__teraz { margin-top: 4px; font-size: var(--fs-15); font-weight: 600; color: var(--ok-tekst); }
.kontakt__godziny { margin-top: 4px; }

/* ---------- Wejście sekcji przy przewijaniu: rozmycie -> ostrość, expo-out, kaskada 80 ms; tylko gdy JS i ruch dozwolony.
   Bez JS (media scripting) i przy prefers-reduced-motion wszystko jest widoczne od razu; po 2,5 s zawsze (zabezpieczenie, gdy skrypt się nie uruchomi). ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .anim { opacity: 0; filter: blur(6px); transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); animation: anim-awaryjnie 0.01s 2.5s forwards; }
  .anim--tak { opacity: 1; filter: none; transform: none; }
  .anim:nth-child(2) { transition-delay: 80ms; }
  .anim:nth-child(3) { transition-delay: 160ms; }
  .anim:nth-child(4) { transition-delay: 240ms; }
  .anim:nth-child(5) { transition-delay: 320ms; }
  .anim:nth-child(6) { transition-delay: 400ms; }
}
@keyframes anim-awaryjnie { to { opacity: 1; filter: none; transform: none; } }

/* zakres godzin (np. 12:00-14:00) nie łamie się po myślniku */
.nie-lam { white-space: nowrap; }

/* ---------- Zdjęcia z R2 w miejscu placeholderów (produkty): kontener trzyma proporcje, zdjęcie go wypełnia ---------- */
.foto--zdjecie { background: var(--krem-100); }
.foto__obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto--zdjecie .foto__napis { background: color-mix(in srgb, var(--krem-50) 74%, transparent); }
.galeria__mini { display: block; border-radius: var(--promien-m); }
.galeria__miniatury .galeria__mini:not(.galeria__mini--aktywna) .foto:first-child { outline: none; }
.galeria__miniatury .galeria__mini--aktywna .foto { outline: 2px solid var(--sliwka-900); outline-offset: 2px; }

/* ---------- /produkty: filtry kategorii i okazji, znaczniki okazji na kaflach, polecane na stronie głównej ---------- */
.filtry { display: grid; gap: 16px; margin-top: 8px; }
.filtry__grupa { display: grid; gap: 8px; }
.filtry__etykieta { font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-600); }
.filtry__lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.filtr { display: inline-flex; align-items: center; min-height: var(--cel); padding: 0 16px; border-radius: var(--promien-pelny); background: var(--biel); box-shadow: inset 0 0 0 1px var(--krem-200); font-size: var(--fs-15); font-weight: 600; color: var(--sliwka-900); text-decoration: none; }
.filtr:hover { box-shadow: inset 0 0 0 2px var(--sliwka-500); }
.filtr--aktywny { background: var(--sliwka-900); color: var(--krem-50); box-shadow: none; }
.filtry__wynik { margin: 20px 0 12px; font-size: var(--fs-15); color: var(--tekst-600); }
.znaczniki-okazji { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.znaczniki-okazji .znacznik { font-size: var(--fs-13); }
.kafel__czas--brak { color: var(--uwaga-tekst); font-weight: 700; }
.polecamy .sekcja__naglowek p { margin-top: 4px; }
@media (min-width: 768px) {
  .filtry { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rynna); }
}

/* ---------- Udostępnianie, przypomnienie o okazji, okazja na statusie, ikonka etapu „gotowe” ---------- */
.udostepnij { margin-top: 28px; }
.udostepnij__lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.udostepnij__adres { margin-top: 12px; }
.udostepnij__pole { width: 100%; font-size: var(--fs-14); color: var(--tekst-600); }
.znaczniki-okazji--karta { padding: 0; margin-top: 12px; }
.przypomnienie { margin-top: 24px; padding: 16px; border-radius: var(--promien-l); background: var(--biel); box-shadow: inset 0 0 0 1px var(--krem-200); }
.przypomnienie__formularz { display: grid; gap: 14px; margin-top: 12px; }
.przypomnienie__wybor { border: 0; margin: 0; padding: 0; }
.przypomnienie__wybor .wybory { margin-top: 8px; }
.przypomnienie__stan { margin: 12px 0; font-weight: 600; color: var(--sliwka-900); }
.status__okazja { margin-top: 12px; font-size: var(--fs-15); color: var(--tekst-600); }
.os-statusu__krok--czeka .os-statusu__znak .ikona { color: var(--tekst-600); }
.filtry__wynik a { display: inline-flex; align-items: center; min-height: var(--cel); }

/* ---------- 10. Ekran 22: Twoje zamówienia (konto klientki, logowanie linkiem z e-maila, bez hasła) ---------- */
/* wiersz sesji pod głównym rzędem nagłówka: chip „Zalogowana: … · Wyloguj”; na telefonie z lewej, od 768 px z prawej (z dala od zgięcia Duo) */
.konto-sesja { background: var(--sliwka-50); border-top: 1px solid var(--krem-200); }
.konto-sesja__wnetrze { display: flex; justify-content: flex-start; padding-block: 2px; }
.konto-sesja__chip {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: var(--cel); margin: 0; padding: 0 4px 0 14px;
  border-radius: 22px; background: var(--sliwka-100);
  font-size: var(--fs-14); font-weight: 500; line-height: 1.35; color: var(--sliwka-900);
}
.konto-sesja__chip strong { font-weight: 700; overflow-wrap: anywhere; }
.konto-sesja__kropka { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.konto-sesja__sep { color: var(--tekst-600); }
.konto-sesja__wyloguj {
  display: inline-flex; align-items: center; min-height: var(--cel); padding: 0 12px 0 4px;
  font-weight: 700; color: var(--sliwka-700); text-underline-offset: 3px;
}
.konto-sesja__wyloguj:hover { color: var(--sliwka-900); }
@media (min-width: 768px) { .konto-sesja__wnetrze { justify-content: flex-end; } }

.konto { padding-block: 24px 64px; }
.konto__uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.konto__kolumna { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; min-width: 0; }
@media (min-width: 768px) {
  .konto { padding-block: 40px 80px; }
  .konto__uklad { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: start; }
}
@media (min-width: 1024px) {
  .konto { padding-block: 48px 96px; }
  .konto__uklad { grid-template-columns: 7fr 5fr; column-gap: 64px; }
}
.konto__glowa h1 { font-size: var(--fs-40); line-height: 1.08; text-wrap: balance; }
@media (min-width: 768px) { .konto__glowa h1 { font-size: var(--fs-44); } }
@media (min-width: 1024px) { .konto__glowa h1 { font-size: var(--fs-48); } }
.konto__lead { margin-top: 12px; max-width: 34em; color: var(--tekst-600); }
.konto__sklep { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.konto__drobne { margin: 0; font-size: var(--fs-15); line-height: 1.45; color: var(--tekst-600); }

.konto-karta { padding: 20px 16px 8px; border-radius: var(--promien-l); }
@media (min-width: 768px) { .konto-karta { padding: 28px 28px 12px; } }
.konto-karta__gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.konto__h2 { font-size: var(--fs-28); line-height: 1.1; }
.konto__h2::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 12px; background: var(--zloto-700); }
.konto-karta__zmien { margin-right: -10px; }

.konto-biezace__wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 18px; }
.konto-biezace__numer { margin: 0; }
.konto-biezace__produkty { margin-top: 4px; font-size: var(--fs-17); font-weight: 600; line-height: 1.45; color: var(--tekst-900); }
.konto-biezace__status { margin: 6px 0 8px -10px; }
.konto-lista { display: grid; gap: 14px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--krem-200); }
.konto-lista dt { font-size: var(--fs-13); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--tekst-600); }
.konto-lista dd { margin: 4px 0 0; font-size: var(--fs-17); line-height: 1.5; }
.konto-lista strong { font-weight: 700; color: var(--sliwka-900); }
.konto-lista__email { display: block; overflow-wrap: anywhere; }
.konto-lista__potwierdzony { margin-top: 6px; }
.konto-lista--dane { margin-bottom: 4px; }

.poprzednie { margin-top: 14px; }
.poprzednie__wiersz {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "opis cena" "przycisk przycisk";
  align-items: start; gap: 6px 16px; padding: 16px 0; border-top: 1px solid var(--krem-200);
}
.poprzednie__opis { grid-area: opis; min-width: 0; }
.poprzednie__data { margin: 0; font-size: var(--fs-14); line-height: 1.4; color: var(--tekst-600); font-variant-numeric: tabular-nums; }
.poprzednie__nazwa { margin: 2px 0 0; font-size: var(--fs-17); font-weight: 700; line-height: 1.35; color: var(--tekst-900); }
.poprzednie__cena { grid-area: cena; margin: 0; font-family: var(--czcionka-naglowki); font-size: var(--fs-24); font-weight: 600; line-height: 1.2; color: var(--sliwka-900); white-space: nowrap; font-variant-numeric: lining-nums; }
.poprzednie__przycisk { grid-area: przycisk; justify-self: start; margin-top: 6px; }
.poprzednie__starsze { margin: 0 0 8px -10px; border-top: 0; }
@media (min-width: 1024px) {
  .poprzednie__wiersz { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "opis cena przycisk"; align-items: center; column-gap: 20px; }
  .poprzednie__przycisk { margin-top: 0; }
}

.konto-zgody { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--krem-200); }
.konto-zgody__stala { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--promien-m); background: var(--sliwka-50); font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-900); }
.konto-zgody__stala .ikona { margin-top: 2px; color: var(--ok-tekst); }
.konto-zgody__opcja { align-items: flex-start; margin-top: 10px; padding-block: 8px; }
.konto-zgody__opcja input { margin-top: 2px; }
.konto-zgody__pod { margin: 0 0 12px 36px; }

/* wiadomości od cukierni w koncie (KONCEPCJA §19) */
.wiadomosci-lista { list-style: none; margin: 14px 0 0; padding: 0; }
.wiadomosci-lista__wiersz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--krem-200); }
.wiadomosci-lista__temat { margin: 0; font-size: var(--fs-17); font-weight: 700; line-height: 1.35; color: var(--tekst-900); }
.wiadomosci-lista__data { margin: 2px 0 0; font-size: var(--fs-14); color: var(--tekst-600); }
.rozmowa { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.rozmowa__wpis { padding: 14px 16px; border-radius: var(--promien-m); background: var(--sliwka-50); }
.rozmowa__wpis--klient { background: var(--krem-100); }
.rozmowa__kto { margin: 0; font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-600); }
.rozmowa__tresc { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-17); line-height: 1.5; }
.rozmowa__audio { display: block; width: 100%; margin-top: 10px; min-height: var(--cel); }
.rozmowa__transkrypcja { margin: 8px 0 0; font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600); }
.rozmowa__transkrypcja strong { color: var(--tekst-900); }
/* zdjęcia z wiadomości (np. inspiracja z formularza kontaktu, 18.10): miniatury prowadzą do pełnego zdjęcia przez trasę z prawem do wątku */
.rozmowa__zdjecia { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.rozmowa__zdjecie { display: block; border-radius: var(--promien); overflow: hidden; border: 1px solid var(--krem-200); }
.rozmowa__zdjecie img { display: block; width: 160px; height: 120px; object-fit: cover; }
.odpowiedz { display: grid; gap: 10px; margin-top: 18px; }
.konto-logowanie { max-width: 34rem; }
.konto-logowanie__dev { margin-top: 16px; word-break: break-all; }


/* ---------- Ramka admina na karcie produktu (tylko dla zalogowanego pracownika) ---------- */
.ramka-admina { display: grid; gap: 12px; margin: 32px 0 0; padding: 16px; border: 2px dashed var(--sliwka-700); border-radius: var(--promien-m); background: var(--sliwka-50); }
.ramka-admina h2 { margin: 0; font-size: var(--fs-20, 1.25rem); color: var(--sliwka-900); }
.ramka-admina__opis { margin: 0; font-size: var(--fs-14); color: var(--tekst-600); }
.ramka-admina__lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ramka-admina__poz { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: var(--fs-16); }
.ramka-admina__poz--ok .ikona { color: var(--ok-tekst); }
.ramka-admina__poz--brak { font-weight: 700; }
.ramka-admina__poz--brak .ikona { color: var(--blad); }
.ramka-admina .przycisk { justify-self: start; }
/* Duo rozłożone: ramka w lewej połówce, nic na zgięciu (x 421-469 przy 890 px). */
@media (min-width: 768px) and (max-width: 1023px) { .ramka-admina { width: calc((100% - var(--rynna)) / 2); } }

/* ---------- Jedno okno informacyjne (natywny <dialog>, otwierany przez app.js) ---------- */
/* Bez JavaScriptu element ma display: none z arkusza przeglądarki, więc nic się nie pokazuje. */
.okno-info { box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); max-width: 28rem; max-height: calc(100dvh - 2 * var(--gutter)); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: var(--promien-l); background: var(--biel); color: var(--tekst-900); box-shadow: 0 20px 60px color-mix(in srgb, var(--tusz) 35%, transparent); }
.okno-info::backdrop { background: color-mix(in srgb, var(--tusz) 55%, transparent); }
.okno-info__wnetrze { display: grid; gap: 12px; margin: 0; padding: 20px; }
.okno-info__grafika { display: block; width: 100%; height: auto; border-radius: var(--promien-m); }
.okno-info__tytul { margin: 0; font-size: var(--fs-28); line-height: 1.15; color: var(--sliwka-900); }
.okno-info__tresc { margin: 0; font-size: var(--fs-16); line-height: 1.5; color: var(--tekst-900); }
.okno-info__akcje { display: grid; gap: 8px; margin-top: 4px; }
.okno-info__akcje .przycisk { width: 100%; justify-content: center; }
/* Duo rozłożone: okno w lewej połówce, żeby przyciski i tytuł nie leżały na zgięciu (x 421-469 przy 890 px). */
@media (min-width: 768px) and (max-width: 1023px) {
  .okno-info { width: calc((100vw - var(--rynna)) / 2 - var(--gutter)); max-width: none; margin: auto auto auto var(--gutter); }
}
/* Wejście okna tylko dla osób, które nie wyłączyły ruchu w systemie. */
@media (prefers-reduced-motion: no-preference) {
  .okno-info[open] { animation: okno-info-wejscie 280ms cubic-bezier(0.16, 1, 0.3, 1); }
  .okno-info[open]::backdrop { animation: okno-info-tlo 280ms ease-out; }
}
@keyframes okno-info-wejscie { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes okno-info-tlo { from { opacity: 0; } to { opacity: 1; } }

/* =============================================================================
   STYL C „ZŁOTA NIĆ” (decyzja Przemka 15.10.2026; źródło: makiety/v4-premium/C-zlota-nic.html, KIERUNKI.md sekcja C)
   Cała strona publiczna to nocna śliwkowa scena z ledwie widocznym grawerunkiem owali; złoto to linie, punkty i tekst WYŁĄCZNIE
   na śliwce. Zdjęcia produktów, formularze, podsumowanie, status i teksty prawne leżą na KREMOWYCH kartach i arkuszach osadzonych
   w scenie (ciemna jest scena, nie wnętrze karty).
   Mechanika: role kolorów (tokeny ze styl.css) przemapowane w dwóch zakresach:
     - SCENA: body.klient (domyślnie, także bez JS i przy systemowym trybie jasnym) oraz hero w jasnym wariancie,
     - KREM: karty produktów, arkusze stron z formularzem i dokumentem, karty kontaktu, mapa, okno informacyjne.
   Pochodne tokenów (color-mix) liczą się tam, gdzie są zadeklarowane, więc każdy zakres deklaruje je ponownie.
   Jasny wariant (ręczny wybór przełącznikiem, html[data-scena="jasna"]): dotychczasowy krem, śliwkowa scena tylko w hero.
   Ruch: public/scena.js (słowa z mgły, obręcze; bez światła za kursorem od 15.10) i .anim (app.js); prefers-reduced-motion = zero ruchu, nic ukrytego.
   ============================================================================= */

/* ---------- Zakres SCENA: role kolorów na śliwce ---------- */
:root:not([data-scena="jasna"]) body.klient,
:root[data-scena="jasna"] body.klient .hero {
  color-scheme: dark;
  --krem-50: var(--scena-tlo);
  --krem-100: #1b0640;
  --krem-200: #3e2272;
  --biel: #230a4f;
  --tekst-900: var(--krem-karty);
  --tekst-600: #cdc2e2;
  --sliwka-900: var(--krem-karty);
  --sliwka-700: #dccbff;
  --sliwka-500: #c9b3ff;
  --sliwka-100: #2e1060;
  --sliwka-50: #210948;
  --zloto-500: var(--zloto-na-sliwce);
  --zloto-700: color-mix(in srgb, var(--zloto-na-sliwce) 78%, var(--scena-tlo));
  --ok: #5fbf88;
  --ok-tlo: #143a2b;
  --uwaga: #e0a13a;
  --uwaga-tlo: #3a2610;
  --blad: #f08a8a;
  --blad-tlo: #3d1a24;
  --panel-tlo: #1d0f38;
  --panel-ramka: #3a2a5c;
  --na-przycisku: var(--sliwka-atrament);
  --focus-na-przycisku: var(--zloto-na-sliwce);
  --logo-filtr: none;
  --komunikat-tlo: var(--sliwka-atrament);
  /* pochodne: złoto jako tekst wolno tu wprost (na śliwce 11:1) */
  --zloto-tekst: var(--zloto-na-sliwce);
  --zloto-duzy: var(--zloto-na-sliwce);
  --zloto-linia: var(--zloto-linia-sceny);
  --ok-tekst: color-mix(in srgb, var(--ok) 80%, var(--tekst-900));
  --uwaga-tekst: color-mix(in srgb, var(--uwaga) 66%, var(--tekst-900));
  --blad-tekst: var(--blad);
  --obrys: color-mix(in srgb, var(--tekst-600) 72%, var(--biel));
  --wyszarzone: color-mix(in srgb, var(--tekst-600) 64%, var(--biel));
  --podpis-foto: color-mix(in srgb, var(--sliwka-700) 80%, var(--krem-100));
  --wybrane: var(--sliwka-900);
  --cien: 0 24px 40px -24px rgb(0 0 0 / 0.8);
  --cien-maly: 0 8px 18px -10px rgb(0 0 0 / 0.7);
  /* przyciski: kremowa wypukła perła w podwójnej złotej obręczy (jak napis w logo) */
  --przycisk-tlo: radial-gradient(120% 140% at 30% 0%, #ffffff 0%, var(--krem-karty) 45%, #e9dfca 100%);
  --przycisk-tlo-hover: radial-gradient(120% 140% at 30% 0%, #ffffff 0%, #fffaf0 55%, #efe6d3 100%);
  --przycisk-cien: inset 0 2px 0 #ffffff, inset 0 -5px 10px rgb(48 0 112 / 0.18), 0 0 0 1px var(--zloto-na-sliwce), 0 0 0 5px var(--scena-tlo), 0 0 0 6px var(--zloto-linia-sceny), 0 18px 34px -10px rgb(0 0 0 / 0.7);
  --przycisk-drugi-ramka: var(--zloto-linia-sceny);
  --focus-przycisku: var(--zloto-na-sliwce); /* na scenie złoto 11:1; na kremie śliwka (złoto na kremie 1,6:1 to za mało dla fokusu) */
}

/* ---------- Zakres KREM: karty i arkusze osadzone w scenie (ten sam zestaw co jasny motyw w styl.css) ---------- */
body.klient :is(.produkt, .podsumowanie, .status, .prawne, .konto) > .kontener,
body.klient :is(.kafel > a, .kafel__karta, .kafel__info, .kontakt__formularz, .kontakt__karta, .mapa, .okno-info) {
  color-scheme: light;
  --krem-50: #fbf8f2;
  --krem-100: #f3ede2;
  --krem-200: #e7dfd0;
  --biel: #ffffff;
  --tekst-900: #1d1530;
  --tekst-600: #5c5470;
  --sliwka-900: #2a0a52;
  --sliwka-700: #3f1283;
  --sliwka-500: #5a1fb8;
  --sliwka-100: #ece4f7;
  --sliwka-50: #f6f2fb;
  --zloto-500: #e3b422;
  --zloto-700: #b8901a;
  --ok: #2f7d4f;
  --ok-tlo: #e6f3ea;
  --uwaga: #b9771d;
  --uwaga-tlo: #fbf0df;
  --blad: #a83a3a;
  --blad-tlo: #f9e5e5;
  --panel-tlo: #f6f5f9;
  --panel-ramka: #e6e2ee;
  --na-przycisku: #ffffff;
  --focus-na-przycisku: #e3b422;
  --logo-filtr: none;
  --zloto-tekst: color-mix(in srgb, var(--zloto-700) 64%, var(--tekst-900));
  --zloto-duzy: color-mix(in srgb, var(--zloto-700) 85%, var(--tekst-900));
  --zloto-linia: color-mix(in srgb, var(--zloto-700) 75%, transparent);
  --ok-tekst: color-mix(in srgb, var(--ok) 80%, var(--tekst-900));
  --uwaga-tekst: color-mix(in srgb, var(--uwaga) 66%, var(--tekst-900));
  --blad-tekst: var(--blad);
  --obrys: color-mix(in srgb, var(--tekst-600) 72%, var(--biel));
  --wyszarzone: color-mix(in srgb, var(--tekst-600) 64%, var(--biel));
  --podpis-foto: color-mix(in srgb, var(--sliwka-700) 80%, var(--krem-100));
  --wybrane: var(--sliwka-900);
  --cien: 0 10px 30px color-mix(in srgb, var(--sliwka-900) 8%, transparent);
  --cien-maly: 0 2px 10px color-mix(in srgb, var(--sliwka-900) 6%, transparent);
  --przycisk-tlo: var(--sliwka-900);
  --przycisk-tlo-hover: var(--sliwka-700);
  --przycisk-cien: none;
  --przycisk-drugi-ramka: var(--sliwka-900);
  --focus-przycisku: var(--sliwka-500);
  color: var(--tekst-900);
}

/* ---------- Scena: tło, grawerunek, poblask (mikroruch: poblask „oddycha”, warstwa kompozytora) ---------- */
:root:not([data-scena="jasna"]) body.klient {
  background-color: var(--scena-tlo);
  background-image: var(--wzor-owale-tlo);
  background-size: 240px 150px;
}
/* poblask sceny: stała warstwa w oknie przeglądarki (nie przewija się z treścią), tylko przezroczystość się zmienia */
:root:not([data-scena="jasna"]) body.klient::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 70% 12%, rgb(58 10 134 / 0.85) 0%, transparent 62%),
    radial-gradient(70% 50% at 8% 75%, rgb(38 6 94 / 0.7) 0%, transparent 66%);
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-scena="jasna"]) body.klient::after { animation: poblask 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
}
@keyframes poblask { from { opacity: 0.78; } to { opacity: 1; } }

:root:not([data-scena="jasna"]) body.klient :is(.hero, .sekcja--krem, .wyroznienia, .rodzina) { background: transparent; }
:root:not([data-scena="jasna"]) body.klient .stopka { background: transparent; border-top-color: var(--zloto-linia-sceny); }
:root:not([data-scena="jasna"]) body.klient .stopka__dol { border-top-color: color-mix(in srgb, var(--krem-karty) 14%, transparent); }

/* ---------- Nagłówek na scenie: przezroczysty, menu wersalikami, „Zamów” jako mała perła ---------- */
:root:not([data-scena="jasna"]) body.klient .pasek-gorny { background: transparent; border-bottom-color: color-mix(in srgb, var(--zloto-na-sliwce) 18%, transparent); }
body.klient .nawigacja a { font-size: var(--fs-14); letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.4s var(--krzywa-c), border-color 0.4s var(--krzywa-c); }
:root:not([data-scena="jasna"]) body.klient .nawigacja a { color: color-mix(in srgb, var(--krem-karty) 86%, transparent); }
:root:not([data-scena="jasna"]) body.klient .nawigacja a:hover,
:root:not([data-scena="jasna"]) body.klient .nawigacja a[aria-current] { color: var(--zloto-na-sliwce); border-color: var(--zloto-na-sliwce); font-weight: 700; }
:root:not([data-scena="jasna"]) body.klient :is(.tel-skrot, .szukaj-skrot, .przelacznik-motywu, .menu-przycisk) { background: transparent; border-color: var(--zloto-linia-sceny); color: var(--krem-karty); }
:root:not([data-scena="jasna"]) body.klient .menu-mobilne__lista { background: var(--scena-tlo-jasniejsze); border-bottom-color: var(--zloto-linia-sceny); }
/* ikona przełącznika pokazuje CEL: na scenie słońce (przejdź na jasny wariant), w jasnym wariancie księżyc */
:root:not([data-scena="jasna"]) body.klient .przelacznik-motywu .ikona--ksiezyc { display: none; }
:root:not([data-scena="jasna"]) body.klient .przelacznik-motywu .ikona--slonce { display: block; }
:root[data-scena="jasna"] body.klient .przelacznik-motywu .ikona--ksiezyc { display: block; }
:root[data-scena="jasna"] body.klient .przelacznik-motywu .ikona--slonce { display: none; }
body.klient .pasek-gorny__cta { min-height: 44px; }

/* ---------- Przyciski: perła na scenie, śliwka na kremie (role --przycisk-*) ---------- */
/* K-1 (recenzja UI 18.10): jasny wariant poza hero i kremowymi kartami nie miał ról przycisku, więc przycisk był przezroczysty z białym
   napisem na kremie („Zamów online” w nagłówku i pasku dolnym, „Zobacz tort”, „Zamów na odbiór”). Tu role dla całej strony w jasnym
   wariancie; hero i karty deklarują własne (dziedziczenie przegrywa z deklaracją), a reguła niżej ma wartość zapasową. */
:root[data-scena="jasna"] body.klient {
  --przycisk-tlo: var(--sliwka-900);
  --przycisk-tlo-hover: var(--sliwka-700);
  --przycisk-cien: none;
  --przycisk-drugi-ramka: var(--sliwka-900);
  --focus-przycisku: var(--sliwka-500);
  --na-przycisku: #ffffff;
}
body.klient .przycisk:not(.przycisk--drugi):not(.przycisk--ok):not(:disabled) {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--przycisk-tlo, var(--sliwka-900)); border-color: transparent; color: var(--na-przycisku); box-shadow: var(--przycisk-cien);
  font-weight: 700; letter-spacing: 0.02em;
  transition: transform 0.5s var(--krzywa-c), box-shadow 0.5s var(--krzywa-c);
}
body.klient .przycisk:not(.przycisk--drugi):not(.przycisk--ok):not(:disabled):hover { background: var(--przycisk-tlo-hover, var(--sliwka-700)); transform: translateY(-2px); }
/* połysk przebiega po najechaniu (i raz po wejściu w hero) */
body.klient .przycisk:not(.przycisk--drugi):not(.przycisk--ok):not(:disabled)::after {
  content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(240 192 16 / 0.4), transparent); transform: translateX(-180%) skewX(-18deg);
}
body.klient .przycisk:not(.przycisk--drugi):not(.przycisk--ok):not(:disabled):is(:hover, :focus-visible)::after { transform: translateX(330%) skewX(-18deg); transition: transform 1s var(--krzywa-c); }
body.klient .przycisk:focus-visible { outline: 3px solid var(--focus-przycisku, var(--sliwka-500)); outline-offset: 6px; }
body.klient .przycisk--drugi { border-color: var(--przycisk-drugi-ramka); }
body.klient .przycisk--drugi:hover { border-color: var(--zloto-500); }

/* ---------- Hero: tekst po lewej, medalion z logo po prawej (telefon: medalion pod tekstem) ---------- */
body.klient .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 14px 56px; }
:root[data-scena="jasna"] body.klient .hero {
  background: radial-gradient(90% 60% at 70% 18%, #3a0a86 0%, transparent 60%), radial-gradient(70% 50% at 10% 70%, #26065e 0%, transparent 65%), linear-gradient(180deg, var(--scena-tlo-jasniejsze) 0%, var(--scena-tlo) 70%);
  color: var(--tekst-900);
}
body.klient .hero__siatka { gap: 44px; align-items: center; }
body.klient .hero .nadtytul--z-linia { gap: 14px; letter-spacing: 0.22em; font-weight: 700; }
body.klient .hero .nadtytul--z-linia::before { width: 40px; background: currentColor; }
body.klient .hero :is(h1, .hero__duch) { margin-top: 12px; font-size: clamp(36px, 9vw, 46px); line-height: 1.04; letter-spacing: -0.01em; }
body.klient .hero :is(h1, .hero__duch) > span { display: block; }
body.klient .hero :is(h1, .hero__duch) em { color: var(--tekst-900); font-style: italic; font-weight: 500; }
/* złoty rok: gradient jak wypukły napis w logo; kolor tekstu zostaje złoty (czytniki, kontrast liczony z koloru) */
body.klient .hero h1 em.hero__rok {
  color: var(--zloto-na-sliwce);
  background: linear-gradient(180deg, #fff2b0 0%, #f6d040 38%, #e6b214 66%, #c3910c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-right: 0.04em;
}
body.klient .hero h1 .hero__dopisek { margin-top: 8px; font-size: 0.54em; line-height: 1.2; font-style: italic; font-weight: 500; color: color-mix(in srgb, var(--krem-karty) 84%, transparent); }
body.klient .hero__akapit { margin-top: 14px; font-size: var(--fs-16); line-height: 1.55; color: color-mix(in srgb, var(--tekst-900) 86%, transparent); }
/* podtytuł hero (TEKSTY-v2 §4 wariant B): rok i oferta; akapit pod nim ciaśniej, żeby przycisk główny został w 70% wysokości 678 px */
body.klient .hero__podtytul { margin-top: 12px; max-width: 34em; font-size: var(--fs-17); font-weight: 600; line-height: 1.35; color: var(--tekst-900); }
body.klient .hero__podtytul + .hero__akapit { margin-top: 8px; }
/* telefon (i Duo złożony 466x678): przycisk główny ma zostać w 70% wysokości 678 px mimo podtytułu i dłuższego akapitu, więc tekst pod tytułem jest ciaśniejszy */
@media (max-width: 767px) {
  body.klient .hero { padding-block-start: 8px; }
  body.klient .hero :is(h1, .hero__duch) { margin-top: 8px; }
  body.klient .hero__podtytul { margin-top: 8px; font-size: var(--fs-16); line-height: 1.3; }
  body.klient .hero__podtytul + .hero__akapit { margin-top: 6px; font-size: var(--fs-15); line-height: 1.45; }
  body.klient .hero .hero__przyciski { margin-top: 14px; }
}
body.klient .hero .hero__przyciski { align-items: center; gap: 14px 26px; margin-top: 20px; }
body.klient .hero .hero__przyciski .przycisk:not(.przycisk--drugi) { min-height: 56px; padding: 0 54px 0 30px; }
body.klient .hero .hero__przyciski .przycisk:not(.przycisk--drugi)::before {
  content: ""; position: absolute; right: 24px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23300070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.5s var(--krzywa-c);
}
body.klient .hero .hero__przyciski .przycisk:not(.przycisk--drugi):hover::before { transform: translateX(3px); }
/* telefon w hero: link z włoskową złotą linią (jak „albo zadzwoń” w makiecie), cel dotykowy 48 px */
body.klient .hero .hero__przyciski .przycisk--drugi {
  min-height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--zloto-linia-sceny); border-radius: 0;
  background: none; color: var(--tekst-900); font-weight: 700;
}
body.klient .hero .hero__przyciski .przycisk--drugi:hover { background: none; border-bottom-color: var(--zloto-na-sliwce); }
body.klient .hero__zaufanie { margin-top: 22px; font-size: var(--fs-15); color: color-mix(in srgb, var(--tekst-900) 80%, transparent); }
body.klient .hero__zaufanie strong { color: var(--zloto-na-sliwce); }
@media (max-width: 359px) { body.klient .hero :is(h1, .hero__duch) { font-size: 34px; } body.klient .hero .hero__przyciski .przycisk:not(.przycisk--drugi) { padding: 0 46px 0 22px; } }
@media (min-width: 768px) {
  body.klient .hero { padding-block: 28px 72px; }
  body.klient .hero :is(h1, .hero__duch) { margin-top: 16px; }
  body.klient .hero__akapit { margin-top: 18px; }
  body.klient .hero .hero__przyciski { margin-top: 26px; }
  body.klient .hero__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); }
  body.klient .hero :is(h1, .hero__duch) { font-size: clamp(40px, 5.2vw, 52px); }
}
@media (min-width: 1024px) {
  body.klient .hero { padding-block: 40px 100px; }
  body.klient .hero__siatka { grid-template-columns: 1.05fr 0.95fr; column-gap: 64px; }
  body.klient .hero :is(h1, .hero__duch) { font-size: clamp(56px, 5.6vw, 80px); line-height: 1.02; }
  body.klient .hero__akapit { font-size: var(--fs-17); }
}

/* ---------- Medalion: logo z pliku w złotych obręczach, punkty, pieczęć ---------- */
.medalion { position: relative; width: min(100%, 360px); margin-inline: auto; aspect-ratio: 1.15; display: grid; place-items: center; }
.obrecze { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.obrecze ellipse { fill: none; stroke: var(--zloto-na-sliwce); stroke-dasharray: 1; stroke-dashoffset: 0; }
.obrecze__r1 { stroke-width: 1.3; }
.obrecze__r2 { stroke-width: 0.8; opacity: 0.55; }
.obrecze__r3 { stroke-width: 0.6; opacity: 0.3; }
.obrecze circle { fill: var(--zloto-na-sliwce); opacity: 0.9; }
.medalion__logo { position: relative; width: 76%; height: auto; filter: drop-shadow(0 26px 34px rgb(0 0 0 / 0.6)); }
.pieczec svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pieczec__tlo { fill: var(--scena-tlo-jasniejsze); stroke: var(--zloto-na-sliwce); stroke-width: 1.2; }
.pieczec__wewn { fill: none; stroke: var(--zloto-na-sliwce); stroke-width: 0.8; opacity: 0.7; }
.pieczec text { fill: var(--zloto-na-sliwce); font-family: var(--czcionka-ui); font-weight: 700; }
.pieczec__obwod { font-size: 8.6px; letter-spacing: 1.55px; }
.pieczec__od { font-size: 8px; letter-spacing: 2px; }
.pieczec__rok { font-family: var(--czcionka-naglowki); font-size: 22px; font-weight: 600; font-variant-numeric: lining-nums; }
.pieczec--medalion { position: absolute; left: -2%; bottom: -6%; width: 30%; aspect-ratio: 1; }
@media (min-width: 768px) {
  .medalion { width: min(100%, calc((100svh - 170px) * 1.15), 520px); }
}
/* Duo rozłożony (768-1023): pieczęć po prawej stronie medalionu, z dala od zgięcia x 421-469 */
@media (min-width: 768px) and (max-width: 1023px) { .pieczec--medalion { left: auto; right: -2%; } }

@media (prefers-reduced-motion: no-preference) {
  .js .medalion:not(.widoczne) .obrecze ellipse { stroke-dashoffset: 1; }
  .js .medalion:not(.widoczne) .obrecze circle { opacity: 0; }
  .js .medalion:not(.widoczne) .pieczec--medalion { opacity: 0; transform: rotate(-50deg) scale(0.8); filter: blur(6px); }
  .medalion.widoczne .obrecze ellipse { transition: stroke-dashoffset 2.6s var(--krzywa-c); }
  .medalion.widoczne .obrecze__r1 { transition-delay: 0.3s; }
  .medalion.widoczne .obrecze__r2 { transition-delay: 0.5s; }
  .medalion.widoczne .obrecze__r3 { transition-delay: 0.7s; }
  .medalion.widoczne .obrecze circle { transition: opacity 1s var(--krzywa-c) 1.8s; }
  .medalion.widoczne .pieczec--medalion { transition: opacity 1s var(--krzywa-c) 1.2s, transform 1.8s var(--krzywa-c) 1.2s, filter 1s var(--krzywa-c) 1.2s; }
  /* logo „oddycha” (7 s, kilka px): mikroruch sceny, tylko transformacja */
  .medalion__logo { animation: oddech 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
  /* gdy public/scena.js się nie uruchomi, obręcze i pieczęć pokazują się same po 3 s */
  .js:not(.scena-js) .medalion :is(ellipse, circle, .pieczec--medalion) { animation: medalion-awaryjnie 0.01s 3s forwards; }

  /* tytuł: słowa z mgły (kaskada 70 ms); do podziału na słowa cały tytuł czeka w tym samym stanie co pierwsze słowo */
  .js [data-slowa]:not(.slowa-gotowe) { opacity: 0.2; filter: blur(8px); }
  .js:not(.scena-js) [data-slowa] { animation: anim-awaryjnie 0.01s 2.5s forwards; }
  .slowo { display: inline-block; animation: z-mgly 1.1s var(--krzywa-c) backwards; animation-delay: calc(120ms + var(--s, 0) * 70ms); }
  /* perła w hero: połysk przebiega raz po wejściu */
  body.klient .hero .hero__przyciski .przycisk:not(.przycisk--drugi)::after { animation: polysk 1.4s var(--krzywa-c) 1.4s 1 both; }
}
@keyframes oddech { from { transform: translateY(-3px) scale(1); } to { transform: translateY(4px) scale(1.012); } }
@keyframes z-mgly { from { opacity: 0.2; filter: blur(10px); transform: translateY(0.18em); } } /* bez stanu końcowego: po animacji słowo nie trzyma filtra */
@keyframes polysk { from { transform: translateX(-180%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@keyframes medalion-awaryjnie { to { stroke-dashoffset: 0; opacity: 1; transform: none; filter: none; } }

/* ---------- Sekcje na scenie: złota nić między sekcjami, nagłówki z kursywą w złocie ---------- */
:root:not([data-scena="jasna"]) body.klient main > .sekcja + .sekcja,
:root:not([data-scena="jasna"]) body.klient main > .hero + .sekcja { position: relative; }
:root:not([data-scena="jasna"]) body.klient main > :is(.sekcja, .hero) + .sekcja::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); max-width: 1200px; margin-inline: auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--zloto-linia-sceny), transparent);
}
:root:not([data-scena="jasna"]) body.klient .sekcja h2 em { color: var(--zloto-na-sliwce); }
body.klient .sekcja__naglowek .nadtytul--z-linia { margin-bottom: 12px; letter-spacing: 0.22em; font-weight: 700; }
body.klient .okazje__lead { margin-top: 10px; max-width: 34em; color: var(--tekst-600); }

/* ---------- Karty okazji: szkło na scenie, stała złota krawędź jaśniejsza u góry (bez podążania za kursorem, decyzja Przemka 15.10) ---------- */
:root:not([data-scena="jasna"]) body.klient :is(.okazja, .od-karta, .aktualnosc) {
  position: relative; isolation: isolate; border: 0; border-radius: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.015)), var(--scena-tlo);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 40px -24px rgb(0 0 0 / 0.8);
  transition: transform 0.6s var(--krzywa-c);
}
:root:not([data-scena="jasna"]) body.klient :is(.okazja, .od-karta, .aktualnosc)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--zloto-na-sliwce) 70%, transparent), color-mix(in srgb, var(--zloto-na-sliwce) 18%, transparent) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:root:not([data-scena="jasna"]) body.klient .okazja:hover { transform: translateY(-4px); border-color: transparent; }
body.klient .okazja { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: start; padding: 20px 18px; }
body.klient .okazja__nr { grid-row: span 3; font-family: var(--czcionka-naglowki); font-size: var(--fs-28); font-style: italic; font-weight: 600; line-height: 1; color: var(--zloto-tekst); font-variant-numeric: lining-nums; min-width: 1.3em; }
body.klient .okazja__nazwa { font-size: var(--fs-28); }
body.klient .okazja__dalej { margin-top: 10px; font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; color: var(--zloto-tekst); }
@media (max-width: 519px) {
  body.klient .okazje__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) { body.klient .okazja { padding: 24px 24px 22px; column-gap: 18px; } }

/* ---------- Kafle produktów: kremowe karty (zdjęcia nie tracą na ciemnym tle) ---------- */
body.klient :is(.kafel > a, .kafel__karta, .kafel__info) {
  padding: 8px 8px 16px; border-radius: 18px; background: var(--krem-karty);
  box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 22px 40px -26px rgb(0 0 0 / 0.75);
  transition: transform 0.6s var(--krzywa-c), box-shadow 0.6s var(--krzywa-c);
}
body.klient .kafel > a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--zloto-na-sliwce), 0 30px 46px -26px rgb(0 0 0 / 0.8); }
body.klient .kafel .foto { border-radius: 12px; }
body.klient .kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.klient .kafel .znacznik { white-space: normal; }
@media (min-width: 1024px) { body.klient .kategorie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.klient :is(.kafel__opis, .kafel__czas, .kafel .znaczniki-okazji) { padding-inline: 8px; }
body.klient .kafel__info { justify-content: center; padding: 20px; border: 0; }
@media (min-width: 768px) { body.klient .kafel h3 { font-size: var(--fs-24); } }

/* ---------- Arkusze: strony z formularzem i dokumentem na kremie w scenie ---------- */
body.klient :is(.produkt, .podsumowanie, .status, .prawne, .konto) > .kontener {
  background: var(--krem-karty); border-radius: 24px; padding-block: 8px 32px;
  box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 40px 80px -40px rgb(0 0 0 / 0.8);
}
:root[data-scena="jasna"] body.klient :is(.produkt, .podsumowanie, .status, .prawne, .konto) > .kontener { box-shadow: 0 0 0 1px var(--krem-200), var(--cien); }
body.klient :is(.status, .konto) > .kontener { padding-block: 28px 36px; }
@media (min-width: 768px) {
  body.klient :is(.produkt, .podsumowanie, .status, .prawne, .konto) > .kontener { width: calc(100% - 2 * var(--gutter)); border-radius: 28px; padding-block: 16px 48px; }
  body.klient :is(.status, .konto) > .kontener { padding-block: 40px 56px; }
}
body.klient .prawne { padding-top: 16px; }
/* Duo rozłożony: tytuł dokumentu w lewej połówce arkusza (nic na zgięciu x 421-469) */
@media (min-width: 768px) and (max-width: 1023px) { body.klient .prawne__tresc h1 { max-width: calc((100% - var(--rynna)) / 2); } }

/* ---------- Karty kontaktu, mapa i okno informacyjne: krem ---------- */
body.klient :is(.kontakt__formularz, .kontakt__karta) { background: var(--krem-karty); border-color: transparent; box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 30px 60px -32px rgb(0 0 0 / 0.8); }
body.klient .okno-info { background: var(--krem-karty); box-shadow: 0 0 0 1px var(--zloto-na-sliwce), 0 30px 80px rgb(0 0 0 / 0.6); }
body.klient .okno-info::backdrop { background: rgb(19 2 44 / 0.72); }

/* ---------- Hasło z kącikiem cukierni (zdjęcie przeniesione z hero) ---------- */
body.klient .rodzina__siatka { display: grid; gap: 32px; align-items: center; }
body.klient .rodzina__foto .foto { border-radius: 22px; box-shadow: 0 0 0 1px var(--zloto-na-sliwce), 0 0 0 6px var(--scena-tlo), 0 0 0 7px var(--zloto-linia-sceny), 0 30px 60px -30px rgb(0 0 0 / 0.8); }
:root[data-scena="jasna"] body.klient .rodzina__foto .foto { box-shadow: 0 0 0 1px var(--zloto-500); }
@media (min-width: 768px) {
  body.klient .rodzina__siatka { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); text-align: left; }
  body.klient .rodzina__siatka > * { max-width: none; }
  body.klient .rodzina__tekst .rodzina__linia { margin-inline: 0; }
  body.klient .rodzina__tekst p { margin-inline: 0; }
}
@media (min-width: 1024px) { body.klient .rodzina__siatka { column-gap: 64px; } }

/* ---------- Drobne na scenie: wyróżnienia złotem pogrubionym, komunikat, stopka z pieczęcią ---------- */
:root:not([data-scena="jasna"]) body.klient .wyroznienia p { font-weight: 700; }
:root:not([data-scena="jasna"]) body.klient .komunikat { border-bottom-color: var(--zloto-linia-sceny); }

/* ---------- Wejście sekcji (.anim, public/app.js) w tempie stylu C: mgła 10 px, kaskada 70 ms ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  body.klient .anim { filter: blur(10px); transform: translateY(16px); transition: opacity 0.9s var(--krzywa-c), filter 1s var(--krzywa-c), transform 1.1s var(--krzywa-c); }
  body.klient .anim--tak { filter: none; transform: none; }
  body.klient .anim:nth-child(2) { transition-delay: 70ms; }
  body.klient .anim:nth-child(3) { transition-delay: 140ms; }
  body.klient .anim:nth-child(4) { transition-delay: 210ms; }
  body.klient .anim:nth-child(5) { transition-delay: 280ms; }
  body.klient .anim:nth-child(6) { transition-delay: 350ms; }
}

/* =============================================================================
   RUNDA 2 (polecenia Przemka 15.10.2026, POSTEP-strona-2.md): stopka z mapką, blok „Dla gastronomii” na /pieczywo, podpis zdjęcia poglądowego
   ============================================================================= */
.od-hero__foto { margin: 0; }
.od-hero__podpis { margin-top: 8px; font-size: var(--fs-13); line-height: 1.4; color: var(--tekst-600); }

/* ---------- /pieczywo: „Dla gastronomii” (szkło na scenie jak karty okazji, krem w jasnym wariancie) ---------- */
body.klient .gastronomia {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; padding: 28px 20px; border-radius: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.055), rgb(255 255 255 / 0.015)), var(--scena-tlo);
  box-shadow: 0 0 0 1px var(--zloto-linia-sceny), 0 24px 40px -24px rgb(0 0 0 / 0.8);
}
:root[data-scena="jasna"] body.klient .gastronomia { background: var(--biel); box-shadow: 0 0 0 1px var(--krem-200), var(--cien-maly); }
.gastronomia h2 { margin-top: 10px; }
.gastronomia__tekst p { margin-top: 12px; max-width: 36em; color: var(--tekst-600); }
.gastronomia__lista { display: grid; gap: 6px; margin-top: 14px; padding-left: 1.2em; list-style: disc; }
.gastronomia__lista li::marker { color: var(--zloto-500); }
.gastronomia__akcje { display: flex; flex-direction: column; gap: 12px; }
.gastronomia__akcje .przycisk { white-space: normal; text-align: center; }
@media (min-width: 768px) {
  body.klient .gastronomia { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: center; padding: 36px 32px; }
}

/* =============================================================================
   KODY I DOSPRZEDAŻ (POSTEP-kody.md): pole „Mam kod rabatowy”, wiersz rabatu, zgoda na oferty, rabat na stronie statusu,
   propozycje pieczywo <-> słodkie na karcie produktu. Tylko tokeny (tryb nocny = tokeny), bez kolorów na sztywno.
   ============================================================================= */
.razem__lista li.razem__rabat span:last-child { color: var(--ok-tekst); }
.kod-rabatowy { margin-top: 14px; }
.kod-rabatowy__link { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: var(--fs-15); font-weight: 600; color: var(--sliwka-700); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.kod-rabatowy__link::-webkit-details-marker { display: none; }
.kod-rabatowy__link:focus-visible { outline: 3px solid var(--sliwka-500); outline-offset: 2px; border-radius: var(--promien-xs); }
.kod-rabatowy[open] .kod-rabatowy__link { text-decoration: none; }
.kod-rabatowy__tresc { display: grid; gap: 8px; padding-top: 4px; }
.kod-rabatowy__rzad { display: flex; flex-wrap: wrap; gap: 8px; }
.kod-rabatowy__wejscie { flex: 1 1 140px; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.kod-rabatowy__ok { margin: 0; font-size: var(--fs-15); line-height: 1.45; color: var(--ok-tekst); }
.zgoda-oferty { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: var(--fs-15); line-height: 1.45; cursor: pointer; }
.zgoda-oferty input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sliwka-700); }
.zgoda-regulamin { margin-top: 14px; }
.zgoda-regulamin a { text-decoration: underline; text-underline-offset: 2px; }
.pozycje-zam__rabat .pozycje-zam__nazwa, .pozycje-zam__rabat .pozycje-zam__cena { color: var(--ok-tekst); }

.propozycje-karty { padding-bottom: 22px; border-bottom: 1px solid var(--zloto-linia); }
.produkt__opis .propozycje-karty h2 { font-size: var(--fs-24); }
.propozycje-karty__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.propozycja {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "foto opis" "foto przycisk"; gap: 8px 12px; align-items: start;
  padding: 12px; border: 1px solid var(--krem-200); border-radius: var(--promien-l); background: var(--biel);
}
.propozycja--dodana { border-color: var(--sliwka-900); background: var(--sliwka-50); }
.propozycja__foto { grid-area: foto; width: 64px; aspect-ratio: 1 / 1; }
.propozycja__opis { grid-area: opis; display: grid; gap: 2px; min-width: 0; }
.propozycja__nazwa { font-size: var(--fs-18); line-height: 1.25; }
.propozycja__nazwa a { color: inherit; text-decoration: none; }
.propozycja__nazwa a:hover, .propozycja__nazwa a:focus-visible { text-decoration: underline; }
.produkt__opis .propozycja__meta { font-size: var(--fs-15); line-height: 1.4; color: var(--tekst-600); }
.propozycja__przycisk { grid-area: przycisk; justify-self: start; white-space: nowrap; }
@media (min-width: 768px) {
  /* Duo rozłożony i szerzej: trzy kafle obok siebie (rynna między połówkami jak w reszcie strony) */
  .propozycje-karty__lista { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ---------- Nagłówek z 6 pozycjami menu (od dodania Pieczywa): bez łamania etykiet, telefon jako ikona do 1279 px ---------- */
body.klient .nawigacja a { white-space: nowrap; padding: 0 9px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  body.klient .tel-skrot { width: 48px; padding: 0; justify-content: center; }
  body.klient .tel-skrot span { display: none; }
}
@media (min-width: 1140px) and (max-width: 1279px) { body.klient .cta__dopisek { display: none; } }
.zgody-oferty { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }

.razem__kod { font-size: var(--fs-14); color: var(--tekst-600); }

/* =============================================================================
   GODZINY OTWARCIA (1-U2, src/strony/godziny_widok.tsx): tabela 7 dni na Kontakcie (karta kremowa), dziś wyróżnione śliwką
   i złotą linią po lewej (złoto na kremie tylko jako linia); bez wpisanych godzin „zadzwoń” z numerem jako celem 44 px.
   ============================================================================= */
.godziny-tabela { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: var(--fs-15); line-height: 1.35; }
.godziny-tabela th, .godziny-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--krem-200); text-align: left; vertical-align: baseline; }
.godziny-tabela th { font-weight: 500; color: var(--tekst-900); }
.godziny-tabela td { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--tekst-900); }
.godziny-tabela__data { color: var(--tekst-600); font-variant-numeric: lining-nums; }
.godziny-tabela__zamkniete td { font-weight: 500; color: var(--tekst-600); }
.godziny-tabela__dzis th, .godziny-tabela__dzis td { background: var(--sliwka-50); font-weight: 700; color: var(--sliwka-900); }
.godziny-tabela__dzis th { box-shadow: inset 3px 0 0 var(--zloto-500); }
.godziny-tabela__znacznik {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: var(--promien-pelny);
  background: var(--sliwka-900); color: var(--biel); font-size: var(--fs-13); font-weight: 700; line-height: 1.5; vertical-align: 1px;
}
.kontakt__godziny .kontakt__teraz { margin-top: 6px; }
.godziny-kontakt__zadzwon, .dojazd-sekcja__godziny--zadzwon { font-size: var(--fs-17); font-weight: 600; line-height: 1.45; }
:is(.stopka__godziny, .godziny-kontakt__zadzwon, .dojazd-sekcja__godziny--zadzwon) a { display: inline-flex; align-items: center; min-height: var(--cel); }

/* =============================================================================
   STILLE v5 (uwagi Przemka 17.10.2026, makiety/v5-poprawki/): pieczęć wyjustowana, mniej „1895”, krój paska komunikatu,
   nagłówek bez nachodzenia ikon na menu, formularz kontaktowy w stopce, miejsce na znak Orły Cukiernictwa.
   Decyzje Przemka 17.10: pieczęć wariant B, krój paska wariant A (przegrane warianty usunięte).
   ============================================================================= */

/* ---------- Nagłówek (pkt 4): przy 1280-1920 kontener ma zawsze 1104 px treści, a menu (8 pozycji, wersaliki 0,12em) miało 704 px,
   więc „Kontakt” wchodził pod lupę. Teraz: rozstrzelenie 0,06em i 7 px odstępu (menu ok. 610 px), telefon jako ikona od 768 px
   (numer jest w aria-label, w hero i w stopce), „Zamów” bez dopisku przy pełnym menu. Zapas ok. 50 px także przy pogrubionej aktywnej pozycji. ---------- */
@media (min-width: 1280px) {
  body.klient .nawigacja ul { gap: 0; }
  /* Iwona (18.10): wersaliki szersze niż w poprzednim kroju (H 0,79 em wobec 0,66 em), więc 13 px i 0,04em: wysokość wersalików jak dotąd (ok. 10 px) */
  body.klient .nawigacja a { padding: 0 6px; font-size: var(--fs-13); letter-spacing: 0.04em; }
  body.klient .pasek-gorny__prawa { gap: 8px; }
  body.klient .pasek-gorny__lewa { gap: 36px; }
  body.klient .cta__dopisek { display: none; }
  body.klient .pasek-gorny__cta { padding: 0 26px; }
}
@media (min-width: 768px) {
  body.klient .tel-skrot { width: 48px; padding: 0; justify-content: center; }
  body.klient .tel-skrot span { display: none; }
}

/* ---------- Pasek komunikatu: krój bezszeryfowy, prosto (uwaga Przemka 18.10: kursywa Cormorant z wariantu A jest nieczytelna, odrzucona).
   Krój z --czcionka-ui (Iwona, 18.10): tekst Medium 500, odnośnik Bold tej samej wielkości, bez wersalików (wersaliki 13 px łamały pasek). ---------- */
body.klient .komunikat__tekst {
  font-family: var(--czcionka-ui); font-style: normal; font-weight: 500; font-size: 15px; line-height: 1.35; letter-spacing: 0; padding-block: 6px;
}
body.klient .komunikat__link { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration-color: var(--zloto-500); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 768px) { body.klient :is(.komunikat__tekst, .komunikat__link) { font-size: 16px; } }
@media (min-width: 1024px) { body.klient .komunikat__tekst::after { color: var(--zloto-500); } }


/* ---------- Pieczęć (pkt 1): napisy na łukach z textLength (równe odstępy), oba czytane prosto; rok tylko w środku ---------- */
.pieczec__obwodka { fill: none; stroke: var(--zloto-na-sliwce); stroke-width: 0.5; opacity: 0.55; }
.pieczec__wewn { stroke-width: 0.7; opacity: 0.75; }
.pieczec .pieczec__obwod { font-size: 8.4px; font-weight: 700; letter-spacing: 0; }
.pieczec__punkt { fill: var(--zloto-na-sliwce); }
.pieczec .pieczec__od { font-size: 6.4px; letter-spacing: 2.4px; }
/* rok szeryfem z logo (wcześniej reguła `.pieczec text` przebijała krój i rok wychodził bezszeryfowy) */
.pieczec .pieczec__rok { font-family: var(--czcionka-naglowki); font-size: 24px; font-weight: 600; letter-spacing: 0.01em; }

/* ---------- Logo Orły Cukiernictwa (decyzja Przemka 18.10): ambientowo w pasie wyróżnień po opiniach, jeden odnośnik razem ze zdaniem.
   Ok. 110 px, bez ramek i cieni, krycie 0,8 (pełne przy najechaniu i fokusie). Nocna scena: jednobarwnie w kolorze kremu (filter), jasna: oryginał. ---------- */
.znak-orlow { display: block; width: 110px; height: auto; margin: 0 auto 14px; opacity: 0.8; transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1); }
:root:not([data-scena="jasna"]) .znak-orlow { filter: brightness(0) invert(1) sepia(0.18) brightness(0.96); }
body.klient .wyroznienia__link:is(:hover, :focus-visible) .znak-orlow { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .znak-orlow { transition: none; } }
@media (min-width: 768px) and (max-width: 1023px) { .znak-orlow { margin-left: 0; } }
body.klient .hero__zaufanie .hero__orly-tekst { white-space: normal; }

/* ---------- Rotowany tytuł hero (decyzja Przemka 17.10): niewidoczne kopie 5 wariantów w tej samej komórce siatki co <h1>,
   więc miejsce ma wysokość najdłuższego wariantu w każdym kadrze (zero przeskoku układu, CLS 0). Kopie są poza drzewem dostępności. ---------- */
.hero__tytul-miejsce { display: grid; }
.hero__tytul-miejsce > h1, .hero__duchy { grid-area: 1 / 1; }
.hero__duchy { display: grid; visibility: hidden; pointer-events: none; user-select: none; }
.hero__duch { grid-area: 1 / 1; display: block; font-family: var(--czcionka-naglowki); font-weight: 600; font-variant-numeric: lining-nums; text-wrap: balance; }
/* odnośniki do profilu w Orłach (stille v5): wyglądają jak dotychczasowy tekst, podkreślenie złotą linią dopiero po najechaniu */
body.klient .hero__orly { color: inherit; text-decoration: none; }
body.klient .hero__orly:hover .hero__orly-tekst span { text-decoration: underline; text-decoration-color: var(--zloto-500); text-underline-offset: 4px; }
body.klient .wyroznienia__link { display: block; color: inherit; text-decoration: none; }
body.klient .wyroznienia__link:hover p { text-decoration: underline; text-decoration-color: var(--zloto-500); text-underline-offset: 5px; }
/* pasek komunikatu na telefonie (stille v5): tekst i odnośnik płyną jednym akapitem, zamknięcie po prawej, więc całość mieści się w 2 liniach przy 390 px */
@media (max-width: 767px) {
  body.klient .komunikat__wnetrze { display: block; position: relative; min-height: 44px; padding-block: 8px; padding-right: calc(var(--gutter) + 36px); font-size: 15px; line-height: 1.35; }
  body.klient .komunikat__ikona { display: none; }
  body.klient .komunikat__tekst { display: inline; padding: 0; font-size: 15px; }
  body.klient .komunikat__link { display: inline; min-height: 0; padding: 0 0 0 4px; font-size: inherit; letter-spacing: 0; white-space: nowrap; }
  body.klient .komunikat__zamknij { position: absolute; top: 50%; right: calc(var(--gutter) - 12px); margin: -22px 0 0; }
}
/* Duo rozłożony i tablet (768-1023): odnośnik do Orłów leży w lewej połówce, nic na zgięciu */
@media (min-width: 768px) and (max-width: 1023px) {
  body.klient .wyroznienia__link { max-width: var(--polowka); }
  body.klient .wyroznienia__link p { max-width: none; }
}

/* =============================================================================
   PASEK Z ROTACJĄ (decyzje Przemka 17.10.2026): komunikaty z panelu i wpisy o zamówieniach w jednym pasku (src/strony/komunikat.tsx, public/pasek.js).
   Wszystkie wpisy w jednej komórce siatki: wysokość paska = najdłuższy wpis od pierwszej klatki, zmiana wpisu nie przesuwa układu (CLS 0).
   Niewidoczne wpisy: visibility hidden (poza drzewem dostępności i poza Tab). Wejście z mgły (rozmycie do ostrości, cubic-bezier(0.16, 1, 0.3, 1)),
   wyjście szybsze; prefers-reduced-motion: bez animacji. Sterowanie (wstecz, pauza, dalej) tylko z JS; na telefonie sama pauza i przesunięcie palcem.
   ============================================================================= */
.komunikat__stos { display: grid; flex: 1 1 auto; min-width: 0; }
.komunikat__wpis { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; min-width: 0; visibility: hidden; }
/* ikona megafonu w każdym wpisie (18.10): stoi tuż przy tekście (8 px odstępu z gap), nie kurczy się przy wielokropku */
.komunikat__wpis > .komunikat__ikona { flex: none; }
.komunikat [data-ikona-wpisu] { display: none; }
.komunikat__wpis--aktywny, .komunikat__wpis--wychodzi { visibility: visible; }
.komunikat__wpis--wychodzi { animation: kom-wyjscie 260ms cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; }
.komunikat__wpis--wchodzi { animation: kom-wejscie 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
@keyframes kom-wejscie { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes kom-wyjscie { from { opacity: 1; filter: blur(0); transform: none; } to { opacity: 0; filter: blur(4px); transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .komunikat__wpis--wychodzi, .komunikat__wpis--wchodzi { animation: none; } .komunikat__wpis--wychodzi { visibility: hidden; } }
.komunikat__sterowanie { flex: none; display: flex; align-items: center; }
.komunikat__sterowanie[hidden] { display: none; }
.komunikat__przycisk {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0;
  border-radius: var(--promien-pelny); background: none; color: var(--komunikat-tekst); cursor: pointer;
}
.komunikat__przycisk:hover { background: color-mix(in srgb, var(--komunikat-tekst) 14%, transparent); }
.komunikat__przycisk .ikona { width: 18px; height: 18px; }
.komunikat__przycisk[aria-pressed="true"] .komunikat__ikona-pauza, .komunikat__przycisk[aria-pressed="false"] .komunikat__ikona-graj { display: none; }
/* separator „·” tylko gdy wpis ma odnośnik */
.komunikat__wpis:not(:has(.komunikat__link)) .komunikat__tekst::after { content: none; }
@media (min-width: 1024px) {
  .komunikat__stos { flex: 0 1 auto; }
  .komunikat__wpis { justify-content: center; }
  .komunikat--wiele .komunikat__wnetrze { padding-inline: 176px; }
  .komunikat__sterowanie { position: absolute; right: calc(var(--gutter) + 34px); top: 1px; }
}
@media (max-width: 767px) {
  body.klient .komunikat__wpis { display: block; }
  body.klient .komunikat--wiele .komunikat__wnetrze { padding-right: calc(var(--gutter) + 80px); }
  body.klient .komunikat__sterowanie { position: absolute; top: 50%; right: calc(var(--gutter) + 32px); margin-top: -22px; }
  body.klient .komunikat__wstecz, body.klient .komunikat__dalej { display: none; }
}
/* Blok „Pokazuj status tego zamówienia w pasku” na stronie Dziękujemy i statusu */
.pasek-klienta { margin-top: 14px; }
.pasek-klienta[hidden] { display: none; }
.pasek-klienta__opis { margin-top: 6px; }
body.klient .pasek-klienta__przycisk { max-width: 100%; height: auto; min-height: var(--cel); white-space: normal; text-align: left; overflow-wrap: anywhere; }
/* Duo rozłożony i tablet: blok w lewej połówce, nic na zgięciu */
@media (min-width: 768px) and (max-width: 1023px) { .pasek-klienta { max-width: calc(var(--polowka) - 16px); } }

/* ---------- Pasek w jednej linii na komputerze (uwagi Przemka 18.10, przy 900-1920 px) ----------
   Od 900 px tekst i odnośnik stoją w jednym wierszu; zbyt długi tekst kończy wielokropek (odnośnik zawsze widoczny, pełny tekst zostaje
   w dokumencie dla czytników ekranu). 900-1199: wyrównanie do lewej (więcej miejsca), od 1200 wyśrodkowany z symetrycznym marginesem na sterowanie.
   Na telefonie cel to najwyżej 2 linie: pilnuje go licznik w formularzu panelu (do 80 znaków razem z odnośnikiem). */
@media (min-width: 900px) {
  body.klient .komunikat__wpis { flex-wrap: nowrap; }
  body.klient .komunikat__tekst { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
  body.klient .komunikat__link { flex: none; white-space: nowrap; margin-left: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  body.klient .komunikat__wnetrze { justify-content: flex-start; padding-inline: 0 56px; }
  body.klient .komunikat--wiele .komunikat__wnetrze { padding-right: 190px; }
  /* 18.10: ikona + tekst + odnośnik wyśrodkowane razem w wolnym miejscu przed sterowaniem */
  body.klient .komunikat__wpis { justify-content: center; }
  body.klient .komunikat__stos { flex: 1 1 auto; }
  body.klient .komunikat__sterowanie { position: absolute; right: calc(var(--gutter) + 34px); top: 1px; }
  body.klient .komunikat__zamknij { position: absolute; right: calc(var(--gutter) - 12px); top: 1px; margin-right: 0; }
  body.klient .komunikat { position: relative; }
  body.klient .komunikat__wnetrze { position: relative; }
}
@media (min-width: 1200px) {
  body.klient .komunikat--wiele .komunikat__wnetrze { padding-inline: 176px; }
}

/* =============================================================================
   STOPKA B (decyzja Przemka 18.10.2026, stille makiety/v5-stopka-kroje/png/01-stopka-B-*): jedyny układ stopki (src/strony/uklad.tsx).
   Wyśrodkowana: logo w złotym owalu, zdanie (szerszy blok, 52ch, żeby nie łamało się w 3 krótkie linie), menu w dwóch liniach (Zamówienia,
   Informacje), adres, telefon, godziny na teraz z odnośnikiem „Wszystkie godziny”, Facebook, złota linia, © z dokumentami, kredyt.
   Linki bez podkreślenia (złota linia przy najechaniu i fokusie). Duo rozłożony i tablet (768-1023): dwie połówki z rynną, każda wyśrodkowana
   w sobie (lewa: logo, zdanie, dane piekarni; prawa: menu), więc nic nie leży w pasie zgięcia x 421-469.
   ============================================================================= */
body.klient .stopka { padding-block: 72px 28px; background: var(--krem-100); border-top: 1px solid var(--zloto-700); font-size: var(--fs-15); line-height: 1.6; text-align: center; }
body.klient .stopka a { display: inline-flex; align-items: center; min-height: var(--cel); color: var(--sliwka-900); text-decoration: none; }
body.klient .stopka a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-color: var(--zloto-500); text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.klient .stopka__gora { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 28px; }
body.klient .stopka__logo-link { padding: 14px 26px; border: 1px solid var(--zloto-700); border-radius: 50%; }
body.klient .stopka .logo { height: 60px; width: auto; }
body.klient .stopka__zdanie { max-width: 52ch; margin: 0 auto; color: var(--tekst-600); text-wrap: balance; }
body.klient .stopka__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
/* krótkie pozycje („Torty”) też mają cel dotykowy 44 px szerokości */
body.klient .stopka__lista a { min-width: var(--cel); justify-content: center; }
/* druga linia menu (Informacje) blisko pierwszej: razem jedno menu w dwóch liniach */
body.klient .stopka__menu + .stopka__menu { margin-top: -20px; }
body.klient .stopka__piekarnia { display: grid; justify-items: center; }
body.klient .stopka__adres { margin: 0; font-style: normal; }
body.klient .stopka__adres span { display: block; }
body.klient .stopka__tel { margin: 2px 0 0; }
body.klient .stopka__godziny-blok { margin-top: 12px; }
body.klient .stopka__godziny-teraz { display: grid; justify-items: center; }
body.klient .stopka__teraz { margin: 0; }
body.klient .stopka__kropka { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 1.5px solid var(--zloto-700); border-radius: 50%; vertical-align: 1px; }
body.klient .stopka__teraz--otwarte .stopka__kropka { border-color: var(--zloto-500); background: var(--zloto-500); }
body.klient .stopka__teraz-glowny { font-weight: 600; color: var(--tekst-900); }
body.klient .stopka__teraz-dalej { display: block; }
body.klient .stopka__teraz-dalej[hidden] { display: none; }
body.klient .stopka a.stopka__wszystkie { font-size: var(--fs-14); color: var(--tekst-600); text-decoration: underline; text-decoration-color: var(--zloto-700); text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.klient .stopka__urlop { margin: 0; font-weight: 600; }
body.klient .stopka__spolecznosc { margin: 6px 0 0; }
body.klient .stopka a.stopka__ikona-link { width: var(--cel); height: var(--cel); justify-content: center; border-radius: var(--promien-pelny); }
body.klient .stopka__fb { width: 20px; height: 20px; }
body.klient .stopka__dol { display: grid; justify-items: center; gap: 6px; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--zloto-700); font-size: var(--fs-14); line-height: 1.5; color: var(--tekst-600); }
body.klient .stopka__prawne { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 18px; }
body.klient .stopka__prawne p { margin: 0; }
body.klient .stopka__linki { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
body.klient .stopka .stopka__linki a { font-size: var(--fs-14); color: var(--tekst-600); }
body.klient .stopka__kredyt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; margin: 0; }
body.klient .stopka .stopka__kredyt a { color: inherit; }
body.klient .stopka__kredyt strong { font-weight: 700; color: var(--sliwka-900); }
body.klient .stopka__serce { width: 13px; height: 13px; fill: var(--sliwka-700); stroke: none; }
:root:not([data-scena="jasna"]) body.klient .stopka__dol { border-top-color: var(--zloto-linia-sceny); }
:root:not([data-scena="jasna"]) body.klient .stopka__logo-link { border-color: var(--zloto-500); }
:root:not([data-scena="jasna"]) body.klient .stopka__kredyt strong { color: var(--krem-karty); }
:root:not([data-scena="jasna"]) body.klient .stopka__serce { fill: var(--zloto-500); }
@media (min-width: 768px) {
  body.klient .stopka__teraz-dalej { display: inline; }
  body.klient .stopka__teraz-dalej::before { content: "·"; margin: 0 10px 0 6px; color: var(--zloto-500); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Duo rozłożony i tablet: połówki z rynną; lewa: marka i dane piekarni, prawa: menu; dolny pasek też w połówkach */
  body.klient .stopka__gora { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rynna); row-gap: 24px; align-items: start; }
  body.klient .stopka__logo-link, body.klient .stopka__zdanie, body.klient .stopka__piekarnia { grid-column: 1; }
  body.klient .stopka__menu { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  body.klient .stopka__menu + .stopka__menu { grid-row: 3 / span 2; margin-top: 0; align-self: start; }
  body.klient .stopka__logo-link { grid-row: 1; } body.klient .stopka__zdanie { grid-row: 2; } body.klient .stopka__piekarnia { grid-row: 3 / span 2; }
  body.klient .stopka__teraz-dalej { display: block; }
  body.klient .stopka__teraz-dalej::before { content: none; }
  body.klient .stopka__dol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rynna); align-items: center; }
}
@media (min-width: 1024px) {
  body.klient .stopka { padding-block: 96px 32px; }
  body.klient .stopka__adres span { display: inline; }
  body.klient .stopka__adres span + span::before { content: "·"; margin-inline: 10px; color: var(--zloto-500); }
  body.klient .stopka__dol { margin-top: 72px; }
  /* komputer (mysz): menu zwarte, cel nadal >= 24 px (WCAG 2.5.8); dotykowe kadry do 1023 px mają 44 px */
  body.klient .stopka__lista a, body.klient .stopka__tel a, body.klient .stopka a.stopka__wszystkie { min-height: 0; padding-block: 5px; }
}
/* nazwy ciasteczek w polityce cookies krojem treści (bez trzeciego kroju systemowego Menlo; bramka: najwyżej dwa kroje) */
body.klient .prawne code { font-family: var(--czcionka-ui); font-size: 0.95em; font-weight: 600; }

/* =============================================================================
   SPEC-NOWE-2026-10-18 (stille makiety/v8-nowe): D okno urlopu po „Zadzwoń”, E strona po wysłaniu formularza, link z e-maila i rozmowa
   przy zamówieniu w koncie, F archiwum i „Zamów ponownie”. Tylko tokeny z public/styl.css (dzień i noc liczą się same).
   ============================================================================= */
/* D · okno urlopu (strony/okno_urlopu.tsx; otwiera je public/app.js dopiero po kliknięciu „Zadzwoń”) */
.okno-info--urlop .okno-info__wnetrze { text-align: left; }
.urlop-okno__nad { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-13); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zloto-tekst); }
.urlop-okno__nad::before { content: ""; width: 24px; height: 1px; background: var(--zloto-700); }
.urlop-okno__daty { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 4px 0 2px; padding: 14px 16px; border-radius: var(--promien); background: var(--sliwka-50); border: 1px solid var(--sliwka-100); }
.urlop-okno__daty b { display: block; font-family: var(--czcionka-naglowki, 'Cormorant Garamond', serif); font-size: var(--fs-24); line-height: 1.1; color: var(--sliwka-900); }
.urlop-okno__daty small { font-size: var(--fs-13); color: var(--tekst-600); }
.urlop-okno__strzalka { display: inline-flex; color: var(--zloto-700); }
.urlop-okno__bez-tel { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-600); }
.urlop-okno__bez-tel .ikona { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.urlop-okno__bez-tel .przycisk-tekst { display: inline-flex; min-height: 44px; align-items: center; }

/* E2 · strona „Wiadomość przyjęta”, poprawka adresu i strona linku z e-maila (strony/kontakt_link.tsx) */
.po-wyslaniu { max-width: 640px; margin: 0 auto; padding: 32px 0 56px; }
.po-wyslaniu__ikona { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--sliwka-50); border: 1px solid var(--zloto-linia); color: var(--sliwka-700); }
.po-wyslaniu__ikona .ikona { width: 28px; height: 28px; }
.po-wyslaniu h1 { font-size: var(--fs-44); line-height: 1.05; }
.po-wyslaniu__lead { margin-top: 12px; font-size: var(--fs-18); color: var(--tekst-900); }
.po-wyslaniu__adres { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: var(--promien-xs); background: var(--krem-100); font-weight: 700; overflow-wrap: anywhere; }
.po-wyslaniu__poprawiono { margin-top: 16px; }
.po-wyslaniu__formularz { display: grid; gap: 16px; margin-top: 20px; }
.kroki-linku { display: grid; margin: 24px 0; padding: 0; list-style: none; counter-reset: krok; }
.kroki-linku li { position: relative; padding: 0 0 18px 48px; counter-increment: krok; }
.kroki-linku li::before { content: counter(krok); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--zloto-700); font-weight: 700; color: var(--sliwka-900); background: var(--biel); }
.kroki-linku li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 32px; bottom: 2px; width: 1px; background: var(--krem-200); }
.kroki-linku b { display: block; color: var(--sliwka-900); }
.kroki-linku span { color: var(--tekst-600); font-size: var(--fs-15); }
.po-wyslaniu__akcje { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 8px; }
.po-wyslaniu__akcje .przycisk-tekst { display: inline-flex; min-height: 44px; align-items: center; }
.po-wyslaniu__drobne { margin-top: 20px; font-size: var(--fs-14); color: var(--tekst-600); }

/* E1, E1b i E4 · ramka konta, wybór zamówienia, karta zamówienia przy rozmowie (strony/kontakt_konto.tsx) */
.kform-konto { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--promien); background: var(--sliwka-50); border: 1px solid var(--sliwka-100); font-size: var(--fs-15); color: var(--tekst-900); }
.kform-konto .ikona { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--sliwka-700); }
.kform-konto a { font-weight: 700; color: var(--sliwka-900); }
.kform-zamowienia { display: grid; gap: 10px; }
.kform-zamowienie { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--obrys); border-radius: var(--promien); background: var(--biel); cursor: pointer; }
.kform-zamowienie:has(input:checked) { border-color: var(--sliwka-700); box-shadow: 0 0 0 2px var(--sliwka-100); }
.kform-zamowienie input { grid-row: span 2; margin-top: 4px; accent-color: var(--sliwka-700); width: 18px; height: 18px; }
.kform-zamowienie b { font-weight: 700; color: var(--sliwka-900); }
.kform-zamowienie small { font-size: var(--fs-14); color: var(--tekst-600); }
.baner-ok { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 16px; border-radius: var(--promien); background: var(--ok-tlo); color: var(--tekst-900); font-size: var(--fs-15); }
.baner-ok .ikona { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok-tekst); }
.baner-ok strong { color: var(--ok-tekst); }
.watek-zamowienie { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin: 20px 0 8px; padding: 16px; border-radius: var(--promien-l); background: var(--biel); border: 1px solid var(--zloto-linia); box-shadow: var(--cien-maly); }
.watek-zamowienie__foto { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--sliwka-100), var(--krem-100)); color: var(--sliwka-700); }
.watek-zamowienie__gora { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.watek-zamowienie__nr { margin: 0; font-size: var(--fs-13); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-600); }
.watek-zamowienie__co { margin-top: 4px; font-weight: 700; color: var(--sliwka-900); }
.watek-zamowienie__kiedy { margin-top: 2px; font-size: var(--fs-15); color: var(--tekst-600); }
.watek-zamowienie__linki { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.watek-zamowienie__linki .przycisk-tekst, .watek-przypnij .przycisk-tekst { display: inline-flex; min-height: 44px; align-items: center; }
.watek-pytanie { margin: 20px 0 8px; padding: 16px; border-radius: var(--promien-l); background: var(--sliwka-50); border: 1px solid var(--sliwka-100); }
.watek-pytanie__tytul { margin: 0; font-weight: 700; color: var(--sliwka-900); }
.watek-pytanie__opis { margin-top: 4px; font-size: var(--fs-15); color: var(--tekst-600); }
.watek-pytanie__akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.watek-wybor { display: grid; gap: 14px; margin: 20px 0 8px; }
.watek-przypnij { margin: 12px 0 0; }
.konto-napisz { margin-top: 12px; }

/* F1 · archiwum w koncie i „Zamawiasz najczęściej” (strony/konto.tsx) */
.ponow-polecane { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 20px; padding: 16px; border-radius: var(--promien-l); background: linear-gradient(135deg, var(--sliwka-50), var(--krem-50)); border: 1px solid var(--zloto-linia); }
.ponow-polecane__foto { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--sliwka-100), var(--krem-200)); color: var(--sliwka-700); }
.ponow-polecane__nad { margin: 0; font-size: var(--fs-13); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zloto-tekst); }
.ponow-polecane__co { margin-top: 2px; font-weight: 700; color: var(--sliwka-900); }
.ponow-polecane__cena { margin-top: 2px; font-size: var(--fs-15); color: var(--tekst-600); }
.ponow-polecane .przycisk { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 560px) { .ponow-polecane { grid-template-columns: auto 1fr auto; } .ponow-polecane .przycisk { grid-column: auto; } }
.archiwum__rok { margin: 18px 0 4px; font-size: var(--fs-13); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-600); }
.archiwum__wiersz { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--krem-200); }
.archiwum__data { margin: 0; font-size: var(--fs-14); color: var(--tekst-600); }
.archiwum__nazwa { margin-top: 2px; font-weight: 700; color: var(--tekst-900); }
.archiwum__cena { margin: 0; text-align: right; font-weight: 700; color: var(--sliwka-900); white-space: nowrap; }
.archiwum__cena small { display: block; font-weight: 400; font-size: var(--fs-13); color: var(--tekst-600); }
.archiwum__akcje { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.archiwum__brak { font-size: var(--fs-14); color: var(--tekst-600); }
.archiwum__retencja { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: var(--promien); background: var(--krem-100); font-size: var(--fs-14); color: var(--tekst-600); line-height: 1.5; }
.archiwum__retencja .ikona { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* F2 · baner „Ustawiliśmy jak w twoim zamówieniu” na karcie produktu (strony/produkt.tsx) */
.ponow-baner { display: grid; gap: 6px; margin-bottom: 18px; padding: 14px 16px; border-radius: var(--promien); background: var(--sliwka-50); border: 1px solid var(--sliwka-100); font-size: var(--fs-15); color: var(--tekst-900); }
.ponow-baner b { color: var(--sliwka-900); }
.ponow-baner__zmiana { color: var(--uwaga-tekst); font-weight: 700; }

/* =============================================================================
   Sekcja „Zamów i odbierz w Łanach” nad stopką strony głównej (decyzja Przemka 18.10.2026: wariant B, makiety/v9-cta/b-przekroj.html, reguły
   przeniesione z makiety cta.css). Zdjęcie tymczasowe (mozaika/04, malowidło ze ściany): od 768 px powiększone od lewej, żeby jasna kolumna
   ściany po prawej nie wchodziła w kadr. Kolory z tokenów: --krem-karty, --zloto-na-sliwce, --zloto-linia-sceny, śliwka #300070.
   ============================================================================= */
body.klient .cta-lany { padding-block: 8px 56px; }
.cta-lany__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end; min-height: 540px;
  border: 1px solid var(--zloto-linia-sceny); border-radius: var(--promien-duzy);
  background: #300070; /* zanim wczyta się zdjęcie: sama śliwka, tekst czytelny od pierwszej klatki */
}
.cta-lany__foto {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
  filter: saturate(0.85) contrast(1.04);
}
/* śliwkowa warstwa: telefon = mocniej na dole (tam stoi tekst), zdjęcie oddycha u góry */
.cta-lany__warstwa {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(48 0 112 / 0.38) 0%, rgb(48 0 112 / 0.74) 34%, rgb(40 0 96 / 0.88) 62%, rgb(26 2 62 / 0.94) 100%);
}
.cta-lany__tresc { padding: 36px 22px 26px; max-width: 36rem; }
.cta-lany__linia { display: block; width: 44px; height: 1px; margin-bottom: 18px; background: var(--zloto-na-sliwce); }
.cta-lany h2 {
  font-family: var(--czcionka-naglowki); font-weight: 600; font-size: clamp(38px, 10.4vw, 64px);
  line-height: 1.02; letter-spacing: -0.01em; color: var(--krem-karty); text-wrap: balance;
}
.cta-lany h2 em { font-style: italic; font-weight: 500; }
.cta-lany__zdanie { margin-top: 14px; max-width: 30em; font-size: var(--fs-17); line-height: 1.5; color: var(--krem-karty); }
.cta-lany__przyciski { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
/* przycisk główny: ta sama perła co w hero (role --przycisk-* sceny), większy: 60 px, 18 px, strzałka */
body.klient .cta-lany .cta-lany__glowny { min-height: 60px; width: 100%; padding: 0 56px 0 30px; font-size: var(--fs-18); }
body.klient .cta-lany .cta-lany__glowny::before {
  content: ""; position: absolute; right: 26px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23300070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.5s var(--krzywa-c);
}
body.klient .cta-lany .cta-lany__glowny:hover::before { transform: translateX(3px); }
/* przycisk drugi: obrysowany, kremowy napis na zdjęciu pod warstwą; obwódka ≥ 3:1 do tła (pomiar w pomiary.json) */
body.klient .cta-lany .cta-lany__drugi {
  min-height: 56px; width: 100%; padding: 0 28px;
  border: 1.5px solid color-mix(in srgb, var(--krem-karty) 78%, transparent);
  background: rgb(19 2 44 / 0.28); color: var(--krem-karty); font-weight: 700; font-size: var(--fs-17);
  transition: border-color 0.4s var(--krzywa-c), background-color 0.4s var(--krzywa-c);
}
body.klient .cta-lany .cta-lany__drugi:hover { border-color: var(--zloto-na-sliwce); background: rgb(19 2 44 / 0.5); color: var(--krem-karty); }
body.klient .cta-lany .cta-lany__drugi .ikona { width: 18px; height: 18px; }

@media (min-width: 520px) {
  .cta-lany__przyciski { flex-direction: row; flex-wrap: wrap; align-items: center; }
  body.klient .cta-lany :is(.cta-lany__glowny, .cta-lany__drugi) { width: auto; }
}
@media (min-width: 768px) {
  .cta-lany__panel { align-items: center; min-height: 500px; }
  /* tablet i Duo rozłożony (890): całość w lewej połówce, nic w pasie zgięcia 421-469 */
  .cta-lany__warstwa { background: linear-gradient(90deg, rgb(34 0 82 / 0.92) 0%, rgb(48 0 112 / 0.84) 42%, rgb(48 0 112 / 0.5) 72%, rgb(48 0 112 / 0.3) 100%); }
  .cta-lany__tresc { max-width: 50%; padding: 48px 32px 48px 40px; }
  .cta-lany__przyciski { flex-direction: column; align-items: stretch; }
  body.klient .cta-lany :is(.cta-lany__glowny, .cta-lany__drugi) { width: 100%; }
}
@media (min-width: 1024px) {
  .cta-lany__panel { min-height: 540px; }
  .cta-lany__tresc { max-width: 640px; padding: 64px 56px; }
  .cta-lany__przyciski { flex-direction: row; align-items: center; gap: 18px; }
  body.klient .cta-lany :is(.cta-lany__glowny, .cta-lany__drugi) { width: auto; }
  body.klient .cta-lany .cta-lany__glowny { min-height: 64px; padding: 0 60px 0 34px; }
}
/* od 768 px kadr tylko na malowidło (lewe ~58% zdjęcia): skala od lewej krawędzi, bez jasnej kolumny ściany i lady po prawej */
@media (min-width: 768px) { .cta-lany__foto { transform: scale(1.75); transform-origin: 0% 50%; } }
/* SPEC-ZDJECIA: własne zdjęcie z panelu bez powiększenia (skala 1,75 była dobrana pod malowidło); kadr z punktu ostrości (.ostrosc--*, styl.css) */
@media (min-width: 768px) { .cta-lany__foto--wlasne { transform: none; } }
.cta-lany__male { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 14px; font-size: var(--fs-15); }
.cta-lany__male a, .cta-lany__udostepnij { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--krem-karty); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--zloto-na-sliwce); }
.cta-lany__udostepnij { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.cta-lany__udostepnij[hidden] { display: none; }
.cta-lany__udostepnij .ikona { width: 16px; height: 16px; }
/* E2 na telefonie: bez ikony koperty (dekoracja), żeby przycisk „Wróć na stronę główną” był w pierwszym ekranie 466x678;
   tablet i Duo rozłożony (768-1023): treść w lewej połówce, nic w pasie zgięcia 421-469 */
@media (max-width: 767px) { .po-wyslaniu { padding-top: 20px; } .po-wyslaniu__ikona { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) { .po-wyslaniu { margin: 0; max-width: calc(50vw - 24px - var(--gutter)); } }

/* ETAP 1 (24.10.2026): plakietka trybu testowego sklepu nad nagłówkiem. Widzi ją wyłącznie zalogowany pracownik przy wyłączonym sklepie
   (strony/uklad.tsx); klient nie dostaje jej w HTML. Stałe kolory (złote tło, śliwkowy tekst, kontrast ok. 9:1) w obu motywach. */
.plakietka-testowa { position: relative; z-index: 23; background: #e3b422; color: #2a0a52; border-bottom: 1px solid #b8901a; }
.plakietka-testowa__wnetrze { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; min-height: 40px; padding-block: 4px; font-size: var(--fs-14, 0.875rem); line-height: 1.35; }
.plakietka-testowa strong { font-weight: 700; }
.plakietka-testowa a { color: #2a0a52; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; min-height: 32px; display: inline-flex; align-items: center; }
/* ETAP 1: karta produktu bez sklepu (sekcja „Zamów telefonicznie”, strony/produkt.tsx) */
.zamow--telefon .zamow__telefon { margin: 0 0 10px; line-height: 1.55; }
.zamow--telefon .zamow__telefon a { font-weight: 700; }