/* =============================================================
   CZARKO — warstwa aplikacji (konto / koszyk / rezerwacja)
   Uzupełnienie czarko.css: formularze, tabele, kafle — te same tokeny.
   ============================================================= */

/* Layout aplikacji: pasek NIE nachodzi na treść (brak hero) */
.czk-app .site-header { margin-bottom: 0; }
.czk-app-main { min-height: 60vh; padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Nawigacja konta w pasku */
.czk-app-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); flex-wrap: wrap; }
.czk-app-nav a { color: var(--c-cream); text-decoration: none; font-weight: 500; }
.czk-app-nav a:hover { color: var(--c-gold-light); }
.czk-badge {
	display: inline-grid; place-items: center;
	min-width: 1.35rem; height: 1.35rem; padding-inline: .3rem;
	background: var(--c-gold); color: var(--c-ink);
	border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.czk-inline-form { display: inline; }
.czk-inline-form + .czk-inline-form { margin-left: .75rem; }
/* Akcje w tabeli nie łamią się w pół słowa — wąską kolumnę przewija .czk-table-wrap */
.czk-table .czk-inline-form { white-space: nowrap; }
.czk-linklike {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--c-cream); font: inherit; font-weight: 500;
}
.czk-linklike:hover { color: var(--c-gold-light); }
/* Domyślny kremowy jest tokenem „jasny tekst na CIEMNYM tle" (pasek nagłówka).
   W treści na bieli — akcent tekstowy o kontraście ≈5,1:1, zgodnie z opisem tokenu. */
.czk-app-main .czk-linklike,
.czk-admin-content .czk-linklike { color: var(--c-gold-deep); text-decoration: underline; }
.czk-app-main .czk-linklike:hover,
.czk-admin-content .czk-linklike:hover { color: var(--c-ink); }

/* Materiały cyfrowe — odtwarzacze audio/wideo za uprawnieniem */
.czk-materials { display: grid; gap: 2rem; margin-top: 1.5rem; }
.czk-material { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.czk-material:last-child { border-bottom: 0; }
.czk-material .czk-section-sub { margin-top: 0; }
.czk-player { width: 100%; max-width: 44rem; display: block; }
video.czk-player { background: #000; border-radius: .35rem; aspect-ratio: 16 / 9; }

/* Link aktywacyjny zaproszenia — do skopiowania, gdy poczta nie doszła */
.czk-invite-link {
	width: 100%; max-width: 22rem; padding: .3rem .5rem;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: .78rem; color: inherit;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18); border-radius: .2rem;
}

/* Nagłówki stron aplikacji */
.czk-page-title {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 600; text-transform: uppercase; letter-spacing: .015em;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
/* Akapit wprowadzający pod tytułem strony (globalny reset zeruje marginesy p) */
.czk-lead { max-width: 62ch; margin-bottom: 1.5rem; }
.czk-section-sub {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 2.6vw, 1.5rem);
	font-weight: 600; text-transform: uppercase;
	margin: 2.25rem 0 1rem;
}

/* Komunikaty flash */
.czk-flash {
	padding: .8rem 1.1rem; margin-bottom: 1.5rem;
	border-radius: var(--radius); font-weight: 500;
	border: 1px solid transparent;
}
.czk-flash--success { background: #eef6ec; border-color: #b9d8b2; color: #23531c; }
.czk-flash--error   { background: #fbeeee; border-color: #e3b4b4; color: #7c1d1d; }
.czk-flash--info    { background: var(--c-gray); border-color: var(--c-line); color: var(--c-ink); }

/* Ramki informacyjne w treści strony (ostrzeżenie o usunięciu konta, wyjście
   do Biblioteki, podpowiedź przy rejestracji z ulotki). Paczka konta ma je
   od początku — w motywie WP ich nie było, więc te pudełka szły na ekran
   nagie. Wagi jak we flashach, ale bez pogrubienia: to nie jest komunikat
   po akcji, tylko stała część strony. */
.czk-alert {
	padding: .9rem 1.2rem; margin-bottom: 1.5rem;
	background: var(--c-gray);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-ink);
	border-radius: var(--radius);
	line-height: 1.6;
}
.czk-alert--warning { border-left-color: #a33; }
.czk-alert--info    { border-left-color: var(--c-gold-deep); }
.czk-alert p:last-child { margin-bottom: 0; }
.czk-alert .btn { margin-top: .6rem; }

/* Formularze */
.czk-form { max-width: 480px; display: grid; gap: 1rem; }
.czk-form--wide { max-width: 640px; }
.czk-field { display: grid; gap: .35rem; }
.czk-field label { font-weight: 600; font-size: .92rem; }
.czk-field input, .czk-field select, .czk-field textarea {
	padding: .65rem .8rem;
	border: 1.5px solid var(--c-line);
	border-radius: var(--radius);
	font: inherit; background: #fff; color: var(--c-ink);
}
.czk-field input:focus-visible, .czk-field select:focus-visible, .czk-field textarea:focus-visible {
	outline: none; border-color: var(--c-gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 22%, transparent);
}
.czk-form .btn { justify-self: start; }
.czk-form-aside { margin-top: 1rem; font-size: .95rem; }
.czk-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; }

/* Tabele (zamówienia, koszyk) */
.czk-table-wrap { overflow-x: auto; }
.czk-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.czk-table th {
	text-align: left; padding: .6rem .75rem;
	border-bottom: 2px solid var(--c-ink);
	font-family: var(--font-display); text-transform: uppercase;
	font-weight: 600; letter-spacing: .02em; font-size: .9rem;
}
.czk-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.czk-table .num { text-align: right; white-space: nowrap; }

/* Status zamówienia */
.czk-status {
	display: inline-block; padding: .15rem .55rem;
	border-radius: 999px; font-size: .8rem; font-weight: 600;
	background: var(--c-gray); color: var(--c-ink);
}
.czk-status--paid, .czk-status--completed { background: #dfeedb; color: #23531c; }
.czk-status--awaiting_payment { background: #fdf3d7; color: #6b4d09; }
.czk-status--paid_partial { background: #fdeacb; color: #7a4a08; }
.czk-status--cancelled, .czk-status--rejected { background: #f4dcdc; color: #7c1d1d; }

/* Kafle (materiały, vouchery, oferty sesji) */
.czk-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .czk-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .czk-cards { grid-template-columns: repeat(3, 1fr); } }
.czk-tile {
	border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: 1.1rem 1.25rem; background: #fff;
	display: grid; gap: .4rem; align-content: start;
}
.czk-tile h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.czk-tile .czk-muted { color: var(--c-muted); font-size: .9rem; }
.czk-code {
	font-family: ui-monospace, Consolas, monospace;
	background: var(--c-gray); padding: .2rem .5rem; border-radius: var(--radius);
	font-weight: 700; letter-spacing: .04em;
}

/* Sloty rezerwacji */
.czk-slots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.czk-slot {
	padding: .55rem .9rem; border: 1.5px solid var(--c-gold);
	background: #fff; color: var(--c-gold-deep);
	border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer;
}
.czk-slot:hover, .czk-slot[aria-pressed="true"] { background: var(--c-gold); color: var(--c-ink); }
.czk-slots-empty { color: var(--c-muted); font-style: italic; margin-top: 1rem; }

/* Podsumowanie płatności */
.czk-summary {
	max-width: 560px; border: 1px solid var(--c-line);
	border-radius: var(--radius); padding: 1.25rem 1.5rem; background: #fff;
}
.czk-summary .total { font-size: 1.3rem; font-weight: 800; }
.czk-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------- Rezerwacja: etykieta pola + kalendarz miesięczny ---------- */
.czk-field-label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: .35rem; }

.czk-cal { max-width: 400px; border: 1.5px solid var(--c-line); border-radius: var(--radius); padding: .9rem 1rem 1rem; background: #fff; }
.czk-cal__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.czk-cal__title { font-family: var(--font-display, inherit); font-size: 1.05rem; text-transform: capitalize; }
.czk-cal__nav {
	width: 2rem; height: 2rem; border: 1.5px solid var(--c-gold); background: #fff;
	color: var(--c-gold-deep); border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.czk-cal__nav:hover:not(:disabled) { background: var(--c-gold); color: var(--c-ink); }
.czk-cal__nav:disabled { opacity: .3; cursor: default; }

.czk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.czk-cal__dow { text-align: center; font-size: .72rem; font-weight: 600; color: var(--c-muted); text-transform: uppercase; padding-bottom: .2rem; }

.czk-cal__day {
	all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1; border-radius: var(--radius); font-size: .9rem; color: var(--c-ink);
	border: 1.5px solid transparent;
}
.czk-cal__day.is-past  { color: var(--c-line); }
.czk-cal__day.is-busy  { color: var(--c-muted); background: var(--c-gray); }
.czk-cal__day.is-free  { border-color: var(--c-gold); color: var(--c-gold-deep); font-weight: 700; cursor: pointer; }
.czk-cal__day.is-free:hover { background: var(--c-gold); color: var(--c-ink); }
.czk-cal__day.is-free:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 30%, transparent); }
.czk-cal__day.is-selected { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); font-weight: 700; }

.czk-cal__legend { display: flex; gap: 1rem; margin: .85rem 0 0; font-size: .8rem; color: var(--c-muted); }
.czk-cal__key { display: inline-flex; align-items: center; gap: .4rem; }
.czk-cal__key::before { content: ""; width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.czk-cal__key--free::before { border: 1.5px solid var(--c-gold); }
.czk-cal__key--busy::before { background: var(--c-gray); }

/* ---------- Rezerwacja: wybór konsultanta + kolorowe grupy slotów ---------- */
.czk-cal-legend2 { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: -.4rem 0 .4rem; }
.czk-cons-key { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--c-muted); }
.czk-cons-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.czk-slots-groups { display: grid; gap: 1rem; margin-top: 1rem; }
.czk-slot-group__head { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin-bottom: .5rem; }

/* Temat konsultacji — pole obowiązkowe z wyjaśnieniem, po co je wypełniać.
   Dopisek przy labelu celowo nie krzyczy „wymagane”: prosimy o wprowadzenie
   terapeuty w temat, a nie o wypełnienie rubryki. */
.czk-req { font-weight: 400; color: var(--c-muted); }
.czk-hint { font-size: .85rem; color: var(--c-muted); line-height: 1.45; }

/* ---------- Odtwarzacz materiałów (memoit/mediaplayer) ----------
   Pakiet przychodzi monochromatyczny; tu i tylko tu ubieramy go w barwy
   motywu. Zero nadpisywania klas pakietu — wyłącznie jego zmienne, więc
   aktualizacja mediaplayer.css niczego tu nie zepsuje.

   Uwaga na złoto: --c-gold jest opisane jako TŁO pod ciemny tekst, dlatego
   --mp-on-accent to atrament, a nie biel (na #d09350 biel ma ~2:1). */
.mp--czarko {
	--mp-accent:    var(--c-gold);
	--mp-on-accent: var(--c-ink);
	--mp-bg:        var(--c-gray);
	--mp-surface:   #fff;
	--mp-fg:        var(--c-ink);
	--mp-muted:     var(--c-muted);
	--mp-line:      rgba(28, 28, 28, .16);
	--mp-track:     rgba(28, 28, 28, .12);
	--mp-buffer:    rgba(28, 28, 28, .26);
	--mp-radius:    6px;
	--mp-font:      inherit;
	--mp-focus:     3px solid var(--c-ink);
}

/* Materiał = odtwarzacz plus ewentualny przycisk; odstęp taki jak między
   sekcjami konta, żeby półka nie zlewała się w jedną płachtę. */
.czk-materials { display: grid; gap: 1.5rem; }
.czk-material { margin: 0; }

/* ── Zasada konta w koszyku ────────────────────────────────────────────
   Pozycja, która wymaga konta, mówi o tym przy sobie, a nie dopiero przy
   kasie. Ton spokojny: to informacja o tym, gdzie treść wyląduje, a nie
   ostrzeżenie o błędzie — stąd szarość, nie czerwień. */
.czk-wymaga-konta {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(17, 17, 17, .58);
}
.czk-wymaga-konta::before {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: #b8341f;
	vertical-align: 1px;
}

/* ── Sklep (/sklep) ──────────────────────────────────────────────────
   Dodane 15.09.2026. Sklep korzysta z istniejących kafli (.czk-cards /
   .czk-tile) — tutaj są tylko rzeczy, których wcześniej nie było:
   nagłówki działów, cena jako element pierwszoplanowy i karta terminu
   warsztatu, która NIE jest kafelkiem, bo mieści kilka wariantów udziału
   dzielących jedną salę. */

/* ── Sklep: kafle kategorii (strona główna sklepu) ───────────────────
   Zastąpiły rządek guzików-kotwic. Kafel prowadzi na WŁASNY adres, więc da
   się go wysłać, zapisać w ulubionych i znaleźć w historii — kotwica tylko
   przewijała tę samą stronę. */
.czk-kategorie { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.6rem 0; }
@media (min-width: 680px)  { .czk-kategorie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .czk-kategorie { grid-template-columns: repeat(3, 1fr); } }
.czk-kategoria {
	display: flex; gap: 1rem; align-items: flex-start;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	background: #fff; padding: 1.2rem 1.3rem;
	text-decoration: none; color: inherit;
}
.czk-kategoria:hover, .czk-kategoria:focus-visible {
	border-color: var(--c-gold); background: var(--c-gray);
}
.czk-kategoria-znak {
	flex: none; width: 44px; height: 44px; border-radius: 12px;
	display: grid; place-items: center;
	background: var(--c-gray); color: var(--c-gold-deep);
	border: 1px solid var(--c-line);
}
.czk-kategoria-znak svg { width: 24px; height: 24px; }
.czk-kategoria-tresc { display: grid; gap: .25rem; }
.czk-kategoria-tytul { font-weight: 700; font-size: 1.05rem; }
.czk-kategoria-opis  { font-size: .9rem; color: var(--c-muted); line-height: 1.5; }
.czk-kategoria-ile   { font-size: .8rem; color: var(--c-gold-deep); }

/* ── Okruchy ─────────────────────────────────────────────────────────
   Każda podstrona sklepu je ma (Piotr, 15.09.2026). Koszyk i kasa nie miały
   żadnego wyjścia poza przyciskiem „wstecz" przeglądarki — a to nie jest
   nawigacja, tylko jej brak. */
.czk-okruchy { margin: 0 0 1.1rem; font-size: .88rem; }
.czk-okruchy ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.czk-okruchy li + li::before { content: '›'; margin-right: .4rem; color: var(--c-muted); }
.czk-okruchy a { color: var(--c-gold-deep); }
.czk-okruchy [aria-current] { color: var(--c-muted); }

.czk-sklep-dzial { margin: 0 0 2.8rem; scroll-margin-top: 1.5rem; }

.czk-sklep-tytul {
	font-size: 1.35rem;
	margin: 0 0 .25rem;
	padding-bottom: .45rem;
	border-bottom: 2px solid var(--c-gold);
	display: inline-block;
}

.czk-sklep-opis {
	max-width: 62ch;
	color: var(--c-muted);
	font-size: .95rem;
	margin: .5rem 0 1.1rem;
}

/* Produkt. Cena ma być czytelna z odległości ręki — to jedyna liczba,
   której się tu szuka. Przycisk dociskamy do dołu kafla, żeby w rzędzie
   o różnej długości nazw wszystkie stały w jednej linii. */
.czk-produkt { align-content: start; }
/* Zdjęcie produktu. Stałe proporcje 4:3 i `object-fit: contain` — okładki
   książek są pionowe, banery webinarów poziome, a lista nie może przez to
   skakać ani przycinać tytułu na okładce. */
.czk-produkt-foto { margin: -.35rem 0 .6rem; }
.czk-produkt-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--c-gray);
	border-radius: var(--radius);
}
.czk-produkt-opis {
	margin: .1rem 0 0;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--c-muted);
}
.czk-produkt-cena {
	font-size: 1.25rem;
	margin: .2rem 0 0;
	color: var(--c-ink);
}
.czk-produkt-cena s { font-size: .9rem; font-weight: 400; margin-right: .35rem; }
.czk-produkt-akcja { margin: .8rem 0 0; align-self: end; }
.czk-produkt-konto {
	font-size: .8rem;
	color: var(--c-gold-deep);
	margin: 0;
}

/* Termin warsztatu — szersza karta, bo niesie datę, miejsce, liczbę
   wolnych miejsc i listę wariantów udziału. */
.czk-termin {
	border: 1px solid var(--c-line);
	border-left: 4px solid var(--c-gold);
	border-radius: var(--radius);
	background: #fff;
	padding: 1.2rem 1.35rem;
	margin: 0 0 1rem;
}
.czk-termin-glowa h3 { margin: 0; font-size: 1.1rem; }
.czk-termin-kiedy {
	margin: .3rem 0 0;
	color: var(--c-gold-deep);
	font-weight: 600;
	font-size: .95rem;
}
.czk-termin-miejsca {
	margin: .35rem 0 0;
	font-size: .85rem;
	color: var(--c-muted);
}
.czk-termin-miejsca--brak { color: #b8341f; font-weight: 600; }

.czk-warianty {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	border-top: 1px solid var(--c-line);
}
.czk-warianty li {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	justify-content: space-between;
	align-items: baseline;
	padding: .65rem 0;
	border-bottom: 1px solid var(--c-line);
}
.czk-wariant-nazwa { flex: 1 1 16rem; }
.czk-wariant-akcja { margin: 0; flex: 0 0 auto; }
.czk-wariant-cena { white-space: nowrap; }
.czk-wariant-cena .czk-muted { font-size: .85rem; margin-left: .4rem; }

.czk-termin-zapis {
	margin: .9rem 0 0;
	font-size: .9rem;
	color: var(--c-muted);
}

/* ── Kasa: dane do wysyłki (15.09.2026) ──────────────────────────────── */
.czk-wysylka { margin: 1.4rem 0; }
.czk-wybor-dostawy { border: 0; padding: 0; margin: 0 0 1rem; }
.czk-wybor-dostawy legend {
	padding: 0; margin-bottom: .5rem;
	font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
	color: var(--c-muted);
}
/* Cały wiersz jest celem kliknięcia, nie sam kwadracik — na telefonie
   trafienie w input o boku 13 px to loteria. */
.czk-radio {
	display: flex; align-items: center; gap: .6rem;
	padding: .6rem .8rem; margin-bottom: .4rem;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	background: #fff; cursor: pointer;
}
.czk-radio:has(input:checked) { border-color: var(--c-gold); background: var(--c-gray); }
.czk-radio input { margin: 0; }
.czk-field-para { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .czk-field-para { grid-template-columns: 10rem 1fr; } }
.czk-faktura { margin: .4rem 0 1rem; }
.czk-faktura summary { cursor: pointer; color: var(--c-gold-deep); font-size: .92rem; }
.czk-hint { display: block; margin-top: .25rem; font-size: .82rem; color: var(--c-muted); }

/* ── Karta produktu (/sklep/{slug}) ──────────────────────────────────── */
.czk-powrot { margin: 0 0 1rem; font-size: .92rem; }
.czk-karta { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .czk-karta { grid-template-columns: 22rem 1fr; } }
.czk-karta-foto { margin: 0; }
.czk-karta-foto img {
	display: block; width: 100%;
	border-radius: var(--radius); background: var(--c-gray);
}
.czk-karta-naglowek > .czk-page-title { margin-top: 0; }
.czk-karta-cena { font-size: 1.6rem; margin: .4rem 0 .2rem; }
.czk-karta-cena s { font-size: 1rem; font-weight: 400; margin-right: .4rem; }
.czk-karta-wysylka { margin: .2rem 0 0; font-size: .9rem; color: var(--c-muted); }
.czk-karta-akcja { margin: 1.1rem 0 1.6rem; }
/* ── Szczegóły pod nagłówkiem: pełna szerokość ────────────────────────
   Opis szedł wcześniej w prawej kolumnie obok zdjęcia — tekst ciągnął się
   wąskim paskiem, a pod zdjęciem zostawała pusta połowa ekranu.
   `max-width` zostaje, bo wiersz przez cały monitor też się źle czyta:
   „pełna szerokość" znaczy tu „bez sztucznego paska z boku". */
.czk-karta-szczegoly { margin: 2rem 0 0; }
.czk-karta-zawartosc { margin: 0 0 1.4rem; }
.czk-karta-zawartosc h2,
.czk-karta-warianty h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.czk-karta-zawartosc ul { margin: 0; padding-left: 1.2rem; }
.czk-karta-zawartosc li { margin-bottom: .25rem; }
/* Opis przyszedł z WooCommerce — bywa pisany WERSALIKAMI i z twardymi
   odstępami. Nie przepisujemy go, tylko dajemy mu oddech interlinią.

   Stało tu `max-width: 68ch` — miara długości wiersza wygodnej do czytania.
   Zdjęte na prośbę Piotra (15.09.2026): sekcja opisu jest pełnej szerokości,
   więc wąska kolumna zostawiała pustą prawą połowę i karta wyglądała jak
   niedokończona. Jeśli kiedyś wiersz okaże się za długi, lepszym miejscem
   na ograniczenie jest cała sekcja `.czk-karta-szczegoly`, nie sam opis. */
.czk-karta-opis { line-height: 1.7; }
.czk-karta-opis img { max-width: 100%; height: auto; border-radius: var(--radius); }
.czk-karta-opis h1, .czk-karta-opis h2, .czk-karta-opis h3 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; }
.czk-karta-opis p { margin: 0 0 .9rem; }
.czk-karta-opis ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.czk-karta-opis li { margin-bottom: .35rem; }
/* Cytat Mirka — pionowa złota linia zamiast cudzysłowu w tekście. Cytat ma
   się odróżniać od opisu WZROKIEM, zanim ktoś przeczyta, kto mówi. */
.czk-karta-opis blockquote {
	margin: 1.4rem 0;
	padding: .2rem 0 .2rem 1.1rem;
	border-left: 3px solid var(--c-gold);
	font-size: 1.02rem;
	font-style: italic;
	color: var(--c-ink);
}
.czk-karta-opis blockquote p { margin: 0 0 .4rem; }
.czk-karta-opis .czk-podpis {
	margin: 0;
	font-style: normal;
	font-size: .88rem;
	color: var(--c-muted);
}
.czk-karta-warianty { margin-top: 1.8rem; }
.czk-produkt h3 a { color: inherit; text-decoration: none; }
.czk-produkt h3 a:hover, .czk-termin-glowa h3 a:hover { text-decoration: underline; }
.czk-termin-glowa h3 a { color: inherit; text-decoration: none; }
.czk-radio-nazwa { flex: 1; }
.czk-radio-cena { font-weight: 600; white-space: nowrap; color: var(--c-gold-deep); }

/* Zgody przy kasie — czytelne, bo od nich zależy skuteczność umowy. */
.czk-zgody { margin: 1.4rem 0; }
.czk-zgoda {
	display: flex; gap: .7rem; align-items: flex-start;
	padding: .7rem .8rem; margin-bottom: .5rem;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	background: #fff; cursor: pointer; font-size: .92rem; line-height: 1.5;
}
.czk-zgoda input { margin: .25rem 0 0; flex: none; }
.czk-zgoda:has(input:checked) { border-color: var(--c-gold); background: var(--c-gray); }

/* ── Dokumenty (odstąpienie od umowy) ────────────────────────────────── */
.czk-dokument { max-width: 70ch; line-height: 1.7; }
.czk-dokument h2 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; }
.czk-dokument ul { padding-left: 1.2rem; }
.czk-dokument hr { border: 0; border-top: 1px solid var(--c-line); margin: 2rem 0; }
/* Wzór ma się dać zaznaczyć i wkleić do wiadomości z zachowanymi wierszami. */
.czk-wzor {
	white-space: pre-wrap;
	font-family: ui-monospace, Consolas, monospace;
	font-size: .86rem; line-height: 1.6;
	background: var(--c-gray); border: 1px solid var(--c-line);
	border-radius: var(--radius); padding: 1.2rem 1.3rem;
	overflow-x: auto;
}

/* ── Kafel produktu: co jest odnośnikiem ─────────────────────────────
   Zdjęcie, tytuł i zajawka to JEDEN odnośnik do karty produktu; przycisk
   zostaje przyciskiem. Dzięki temu czytnik ekranu wymienia pozycję raz,
   a nie trzy razy, i nie trzeba jej przeskakiwać potrójnie klawiaturą. */
.czk-produkt-wejscie {
	display: grid; gap: .4rem;
	text-decoration: none; color: inherit;
	border-radius: var(--radius);
}
.czk-produkt-wejscie:hover h3,
.czk-produkt-wejscie:focus-visible h3 { text-decoration: underline; }
.czk-produkt-wejscie:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.czk-produkt-wejscie h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.czk-produkt-foto { display: block; margin: -.35rem 0 .35rem; }

/* ── Sklep w pasku: rozwijany spis kategorii ─────────────────────────
   `<details>` zamiast JavaScriptu — działa z klawiatury i przy wyłączonych
   skryptach. Klikalna jest CAŁA nazwa: osobna strzałka miała kilkanaście
   pikseli i trudno było w nią trafić, zwłaszcza palcem. */
.czk-nav-rozwin { position: relative; display: inline-block; }
.czk-nav-rozwin > summary {
	list-style: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: .3rem;
	/* Ten sam kształt, co sąsiednie odnośniki paska — inaczej „Sklep"
	   odstawałby od „Rezerwacja" i „Koszyk". */
	padding: .25rem 0;
	/* …i ten sam KRÓJ. `summary` nie jest odnośnikiem, więc reguła
	   `.czk-app-nav a` go nie obejmuje i kolor z krojem trzeba powtórzyć.
	   Bez tego „Sklep" dziedziczył domyślny kolor paska i odstawał. */
	color: var(--c-cream); font-weight: 500; text-decoration: none;
	transition: color .15s ease;
}
.czk-nav-rozwin > summary::-webkit-details-marker { display: none; }

/* ┌─ TAK SAMO JAK RESZTA PASKA (15.09.2026) ─────────────────────────────┐
   │ „Sklep" podkreślał się pod kursorem, a „Rezerwacja" i „Koszyk"        │
   │ rozjaśniały. Różnica nie była decyzją projektową, tylko skutkiem      │
   │ tego, że to `summary`, a nie `a` — więc `.czk-app-nav a:hover`        │
   │ go omijało i zostawało podkreślenie dopisane tu osobno.               │
   │                                                                        │
   │ Ujednolicone: wszystkie pozycje paska rozjaśniają się do złota.       │
   │ Stan „rozwinięte" zostaje widoczny — po kolorze i po strzałce,        │
   │ która obraca się o 180°, więc podkreślenie nie jest do niczego        │
   │ potrzebne.                                                             │
   └────────────────────────────────────────────────────────────────────────┘ */
.czk-nav-rozwin > summary:hover,
.czk-nav-rozwin[open] > summary { color: var(--c-gold-light); }

/* Klawiatura: `summary` po zdjęciu podkreślenia zostałby bez żadnego znaku,
   że jest zaznaczony. Obwódka jak przy kafelkach produktów. */
.czk-nav-rozwin > summary:focus-visible {
	outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 3px;
}
.czk-nav-strzalka { font-size: .7em; line-height: 1; transition: transform .15s ease; }
.czk-nav-rozwin[open] .czk-nav-strzalka { transform: rotate(180deg); }
.czk-nav-rozwin > ul {
	position: absolute; z-index: 40; top: 100%; left: 0; margin: .5rem 0 0; padding: .35rem;
	min-width: 15rem; list-style: none;
	background: #fff; color: var(--c-ink);
	border: 1px solid var(--c-line); border-radius: var(--radius);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.czk-nav-rozwin > ul a {
	display: block; padding: .5rem .7rem; border-radius: var(--radius);
	text-decoration: none; color: inherit; font-size: .95rem; white-space: nowrap;
}
.czk-nav-rozwin > ul a:hover,
.czk-nav-rozwin > ul a:focus-visible { background: var(--c-gray); }
/* Wejście na stronę główną sklepu — oddzielone kreską, bo to nie kategoria,
   tylko wyjście o poziom wyżej. */
.czk-nav-wszystko { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--c-line); }
.czk-nav-wszystko a { color: var(--c-gold-deep); }

/* ── Kasa: prośba o konto tuż przed płatnością ───────────────────────── */
.czk-brama-konta { margin: 0 0 1.6rem; border-color: var(--c-gold); }
.czk-brama-konta p { margin: 0 0 .8rem; }
.czk-brama-konta .czk-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.czk-uwaga-konto { margin-top: 1rem; }

/* ── „Zobacz także" — reszta kategorii pod kartą produktu ────────────── */
.czk-takze {
	margin: 2.6rem 0 0;
	padding-top: 1.8rem;
	border-top: 1px solid var(--c-line);
}
.czk-takze h2 { font-size: 1.25rem; margin: 0 0 .3rem; }
.czk-takze .czk-sklep-opis { margin: 0 0 1.2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   POPRAWKI KASY 19.09.2026 — z uwag Piotra, po makiecie
   design_handoff/podglad-kasa-2026-09-19.html
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Nagłówki sekcji ──────────────────────────────────────────────────
   `h2` szedł dotąd krojem tekstowym i nie odróżniał się od pogrubionego
   akapitu. Ten sam krój co `h1`, wersaliki, ale wyraźnie mniej: h1 ma do
   2.4 rem, więc 1.5 rem zostawia czytelną różnicę. */
.czk-card-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .015em;
	margin: 0 0 .6rem;
}

/* ── 2. Pola wymagane ────────────────────────────────────────────────────
   Gwiazdka jest OZDOBĄ dla oka — niesie ją `aria-hidden`, a znaczenie
   przenosi atrybut `required` na polu. Czytnik ekranu ma mówić „wymagane",
   nie „gwiazdka". */
.czk-gw { color: var(--c-gold-deep); font-weight: 700; margin-left: .15em; }
.czk-legenda-pol { margin: 0 0 1rem; font-size: .86rem; color: var(--c-muted); }

/* ── 3. Pole combo (kraj dostawy) ────────────────────────────────────────
   Lista zwinięta; otwiera ją kliknięcie, zawęża pisanie. Wisi NAD treścią,
   żeby nie rozpychała formularza przy każdym otwarciu. */
.czk-combo { position: relative; }
.czk-combo input { text-overflow: ellipsis; }
.czk-combo-strzalka {
	position: absolute; right: .6rem; top: 2.05rem;
	pointer-events: none; color: var(--c-muted);
}
.czk-combo-lista {
	position: absolute; left: 0; right: 0; top: calc(100% + .25rem); z-index: 20;
	margin: 0; padding: 0; list-style: none;
	max-height: 230px; overflow: auto;
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.czk-combo-lista[hidden] { display: none; }
.czk-combo-lista li { padding: .45rem .7rem; cursor: pointer; font-size: .95rem; }
.czk-combo-lista li + li { border-top: 1px solid #f0f0f0; }
.czk-combo-lista li:hover,
.czk-combo-lista li[aria-selected="true"] { background: var(--c-gray); }
.czk-combo-pusto { padding: .6rem .7rem; color: var(--c-muted); font-size: .9rem; cursor: default; }
.czk-combo-pusto:hover { background: none; }

/* ── 4. TA JEDNA LINIJKA, KTÓREJ BRAKOWAŁO ───────────────────────────────
   `.czk-radio` ma `display:flex`, więc klasa bije domyślne
   `[hidden] { display:none }` przeglądarki. Skrypt ustawiał `hidden`
   na opcjach spoza strefy i NIC się nie działo: przy Wielkiej Brytanii
   widać było „Przesyłkę kurierską" dwa razy (raz ze strefy `europa`,
   raz ze `swiat`), obie z ceną przeliczoną na 65 zł, a przy Polsce —
   kuriera, który po Polsce nie jeździ.

   Ta sama pułapka złapała nas 18.09 przy przełączniku dudnień
   w Bibliotece. Trzeci raz w tym tygodniu. */
.czk-radio[hidden],
.czk-dostawa-paczkomat[hidden],
.czk-dostawa-adres[hidden] { display: none; }

/* ── 5. Czytelniejszy wiersz dostawy ─────────────────────────────────────
   Nazwa, pod nią jedno zdanie wyjaśnienia, cena po prawej i większa.
   Przy jednej pozycji na ekranie różnica jest niewielka; przy trzech
   (Polska) to ona decyduje, czy da się wybrać bez czytania dwa razy. */
.czk-radio { align-items: flex-start; }
.czk-radio input { margin: .25rem 0 0; }
.czk-radio-tresc { flex: 1; min-width: 0; }
.czk-radio-nazwa { display: block; font-weight: 600; }
.czk-radio-opis { display: block; font-size: .82rem; color: var(--c-muted); margin-top: .08rem; }
.czk-radio-cena { font-size: 1.02rem; font-weight: 700; }

/* ── 6. Paczkomat: kod z ręki, mapa na żądanie ───────────────────────────
   Układ podpatrzony w Octopusie (wskazówka Piotra): pole tekstowe jest
   drogą główną, bo każdy paczkomat ma jednoznaczny kod. Mapa to pomoc
   dla tych, którzy kodu nie znają — i dlatego jej skrypt NIE ładuje się,
   dopóki nikt o nią nie poprosi. */
.czk-pm-para { display: flex; gap: .5rem; align-items: stretch; }
.czk-pm-para input {
	flex: 1; min-width: 0;
	text-transform: uppercase;
	font-family: var(--font-display);
	font-size: 1.05rem; letter-spacing: .04em;
}
.czk-pm-para input::placeholder {
	font-family: var(--font); font-size: .95rem;
	letter-spacing: normal; text-transform: none;
}
.czk-pm-mapa {
	white-space: nowrap; cursor: pointer;
	border: 1px solid var(--c-gold); background: var(--c-gold); color: var(--c-dark);
	font: 600 .92rem var(--font); padding: 0 1rem;
	border-radius: var(--radius);
	display: flex; align-items: center; gap: .4rem;
}
.czk-pm-mapa:hover { background: var(--c-gold-dark); border-color: var(--c-gold-dark); }
.czk-pm-stan { margin-top: .45rem; font-size: .88rem; display: flex; gap: .45rem; align-items: flex-start; }
.czk-pm-stan:empty { display: none; }
.czk-pm-stan.jest { color: #1d6b3a; }
.czk-pm-stan.brak { color: #a32b2b; }
.czk-pm-stan .znak { font-weight: 700; }

.czk-pm-lista {
	margin: .5rem 0 0; padding: 0; list-style: none;
	max-height: 260px; overflow: auto;
	border: 1px solid var(--c-line); border-radius: var(--radius);
}
.czk-pm-lista[hidden] { display: none; }
.czk-pm-lista li { padding: .55rem .75rem; cursor: pointer; display: flex; gap: .7rem; align-items: flex-start; }
.czk-pm-lista li + li { border-top: 1px solid #f2f2f2; }
.czk-pm-lista li:hover { background: var(--c-gray); }
.czk-pm-kod {
	font-weight: 700; font-family: var(--font-display); letter-spacing: .02em;
	font-size: 1rem; color: var(--c-gold-deep); min-width: 5.4rem;
}
.czk-pm-tresc { flex: 1; min-width: 0; }
.czk-pm-adres { display: block; font-weight: 500; }
.czk-pm-gdzie { display: block; font-size: .82rem; color: var(--c-muted); margin-top: .08rem; }

/* Okno z mapą. `iframe` ładowany dopiero przy otwarciu — patrz komentarz
   w widoku kasy. */
.czk-modal {
	position: fixed; inset: 0; z-index: 60; padding: 16px;
	background: rgba(36, 29, 23, .55);
	display: flex; align-items: center; justify-content: center;
}
.czk-modal[hidden] { display: none; }
/* ┌─ WYSOKOŚĆ OKNA: `height`, NIE SAM `max-height` ───────────────────────┐
   │ Pierwsza wersja dawała tu wyłącznie `max-height: 86vh`, a wysokość     │
   │ brała się z `min-height: 420px` na ramce. Efekt: okno miało 420 px na  │
   │ każdym ekranie, a widget InPostu — który pokazuje zdjęcie paczkomatu,  │
   │ opis i przyciski — po prostu się w nim nie mieścił. Na desktopie       │
   │ „Wybierz" wychodziło poza obrys, na telefonie żółty przycisk był       │
   │ przycięty w połowie (zrzuty Piotra 19.09.2026).                        │
   │                                                                        │
   │ `min()` zamiast samego `vh`: na dużym monitorze 92vh to byłoby okno    │
   │ na 1200 px wysokości, w którym mapa pływa w pustce.                    │
   │                                                                        │
   │ `dvh` przed `vh`: na telefonie pasek adresu chowa się przy przewijaniu │
   │ i `100vh` znaczy wtedy więcej niż widać — dolna krawędź okna wjeżdża   │
   │ pod pasek. `dvh` liczy to, co NAPRAWDĘ widać.                          │
   └────────────────────────────────────────────────────────────────────────┘ */
.czk-modal-tresc {
	background: #fff; border-radius: var(--radius);
	width: 100%; max-width: 820px;
	height: min(92vh, 900px);
	height: min(92dvh, 900px);
	max-height: 92vh;
	max-height: 92dvh;
	display: flex; flex-direction: column; overflow: hidden;
}
.czk-modal-gora {
	display: flex; align-items: center; gap: .8rem;
	padding: .8rem 1rem; border-bottom: 1px solid var(--c-line);
}
.czk-modal-gora h2 {
	font-family: var(--font-display); text-transform: uppercase;
	font-size: 1.2rem; font-weight: 600; margin: 0; flex: 1;
}
.czk-modal-zamknij {
	background: none; border: 0; font-size: 1.5rem; line-height: 1;
	cursor: pointer; color: var(--c-muted); padding: 0 .3rem;
}
/* `min-height: 0` jest tu konieczne: element w kolumnie flex domyślnie nie
   kurczy się poniżej swojej treści, więc bez tego ramka rozpychałaby okno
   zamiast wypełnić to, co zostało po nagłówku. */
.czk-modal-ramka { flex: 1 1 auto; min-height: 0; height: 100%; border: 0; width: 100%; display: block; }

/* Telefon: okno na cały ekran. Przy 420-pikselowej wysokości widget InPostu
   nie ma gdzie pokazać zdjęcia, opisu i przycisku naraz — a to trzy rzeczy,
   których Klient potrzebuje w jednym momencie. */
@media (max-width: 640px) {
	.czk-modal { padding: 0; }
	.czk-modal-tresc {
		height: 100vh; height: 100dvh;
		max-height: 100vh; max-height: 100dvh;
		max-width: none; border-radius: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREZENT — odbiór materiałów przez osobę, która dostała paczkę (19.09.2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wybór „dla kogo paczka" w kasie. Pola odbiorcy odsłania skrypt; bez niego
   widać je od razu i formularz nadal działa — serwer i tak sprawdza komplet. */
.czk-dla-kogo { margin-bottom: 1rem; }
.czk-dla-kogos[hidden] { display: none; }

/* Ekrany prezentu. Wąska kolumna: człowiek stoi z książką w jednej ręce
   i telefonem w drugiej, więc im mniej tu wodotrysków, tym lepiej.

   WŁASNE PUDEŁKO, nie `.czk-card`. Tamta klasa (czarko.css) to kafel wpisu
   i produktu w sklepie: ma obramowanie, ale ZERO wewnętrznego marginesu
   (padding siedzi na jej elementach środka) i podnosi się pod kursorem.
   Na ekranie prezentu dawało to tekst przyklejony do ramki i formularz,
   który skakał pod myszą. */
.czk-prezent {
	max-width: 34rem; margin: 0 auto;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1.7rem 1.9rem;
}
@media (max-width: 520px) { .czk-prezent { padding: 1.2rem 1.1rem; } }
/* Formularz wypełnia kartę — jego własne 480px zostawiałoby pas pustki. */
.czk-prezent .czk-form { max-width: none; }
.czk-prezent-akcja { margin: .3rem 0 0; text-align: center; }
.czk-prezent-akcja .btn { min-width: 12rem; }
.czk-prezent-wstep { font-size: 1rem; margin: 0 0 1.2rem; }
.czk-prezent-od {
	margin: 0 0 1rem; padding: .5rem .8rem;
	background: var(--c-gray); border-radius: var(--radius); font-size: .95rem;
}
.czk-prezent-stopka {
	margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--c-line);
	font-size: .86rem; color: var(--c-muted);
}

/* Kod przepisywany z papieru — duży, rozstrzelony, krojem nagłówkowym.
   Ma wyglądać jak identyfikator, a nie jak zwykły tekst. */
.czk-kod-pole {
	font-family: var(--font-display);
	font-size: 1.5rem; letter-spacing: .16em;
	text-transform: uppercase; text-align: center;
}

/* Trzy drogi tej samej wagi — także „nie chcę konta". Odmowa jest
   pełnoprawną odpowiedzią, nie wyjściem awaryjnym małym drukiem. */
.czk-prezent-drogi { display: flex; flex-direction: column; gap: .55rem; }
.czk-prezent-droga-form { margin: 0; }
.czk-prezent-droga {
	display: block; width: 100%; text-align: left;
	padding: .8rem 1rem; line-height: 1.35; cursor: pointer;
}
.czk-prezent-droga .nazwa { display: block; font-weight: 600; }
.czk-prezent-droga .opis {
	display: block; font-size: .84rem; font-weight: 400; opacity: .8; margin-top: .1rem;
}

/* Stan prezentu w panelu obsługi i w koncie kupującego. */
.czk-prezent-stan {
	display: inline-block; padding: .12rem .5rem; border-radius: 99px;
	font-size: .78rem; font-weight: 600; background: var(--c-gray); color: var(--c-gold-deep);
}
.czk-prezent-stan--accepted { background: #e6f2ea; color: #1d6b3a; }
.czk-prezent-stan--declined,
.czk-prezent-stan--expired { background: #f1f1f1; color: #777; }
.czk-prezent-kod {
	font-family: var(--font-display); letter-spacing: .06em; font-size: .95rem;
}

/* Kolumna „Dokąd" w historii zamówień. */
.czk-dokad { font-weight: 500; display: block; }
.czk-dokad small { display: block; color: var(--c-muted); font-weight: 400; font-size: .82rem; }
.czk-dokad.czk-muted { color: var(--c-muted); font-weight: 400; }
.czk-wysylka-szczegoly { margin: .35rem 0 0; }
.czk-wysylka-szczegoly summary { cursor: pointer; color: var(--c-gold-deep); font-size: .84rem; }
.czk-wysylka-tresc {
	margin: .45rem 0 0; padding: .55rem .7rem;
	background: var(--c-gray); border-radius: var(--radius);
	font-size: .86rem; line-height: 1.5;
}

/* Stan miejsc przy formie udziału w warsztacie. Każda forma ma własną pulę
   (Patrycja, 20.09.2026), więc „wyprzedane" dotyczy jednej pozycji, nie karty. */
.czk-wariant-stan {
	display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
	border-radius: 99px; font-size: .78rem; font-weight: 600;
	background: var(--c-gray); color: var(--c-muted);
}
.czk-wariant-stan--malo { background: #fdf0e3; color: #8a4b12; }
.czk-wariant--brak { opacity: .62; }
.czk-wariant--brak .czk-wariant-akcja { font-size: .88rem; font-style: italic; }

/* ── Karta warsztatu: decyzja na górze ──────────────────────────────────
   Opis warsztatu ma kilka tysięcy znaków. Przyciski stały POD nim, więc
   zapisanie się wymagało przewinięcia całego tekstu (Piotr, 20.09.2026).
   Zdjęcie i blok form udziału stoją teraz obok siebie w pierwszym ekranie,
   a opis zostaje niżej — dla tych, którzy chcą poczytać. */
@media (min-width: 900px) {
	.czk-karta--warsztat {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start;
	}
	.czk-karta--warsztat .czk-karta-foto { margin: 0; }
}
.czk-karta--warsztat .czk-karta-foto img { border-radius: var(--radius); }

.czk-formy {
	margin-top: 1.25rem;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	overflow: hidden; background: #fff;
}
.czk-formy-tytul {
	margin: 0; padding: .5rem .9rem;
	background: var(--c-gray);
	font-family: var(--font-display); text-transform: uppercase;
	font-size: .85rem; letter-spacing: .08em;
}
.czk-forma { padding: .85rem .9rem; border-top: 1px solid var(--c-line); }
.czk-forma:first-of-type { border-top: 0; }
.czk-forma--brak { background: #faf9f8; }
.czk-forma-glowa {
	display: flex; flex-wrap: wrap; gap: .5rem;
	align-items: baseline; justify-content: space-between;
}
.czk-forma-nazwa { font-weight: 600; }
.czk-forma-cena { font-weight: 700; white-space: nowrap; text-align: right; }
.czk-forma-zaliczka { display: block; font-weight: 400; font-size: .8rem; color: var(--c-muted); }
.czk-forma-opis { margin: .35rem 0 .6rem; font-size: .88rem; color: #444; }
.czk-forma-akcja {
	display: flex; flex-wrap: wrap; gap: .6rem;
	align-items: center; justify-content: space-between;
}
.czk-forma-akcja form { margin: 0; }
.czk-formy-stopka {
	margin: 0; padding: .6rem .9rem;
	border-top: 1px solid var(--c-line); background: var(--c-gray);
	font-size: .82rem; color: var(--c-muted);
}
/* Kotwica z bloku decyzji — nagłówek nie chowa się pod paskiem strony. */
.czk-forma-szerzej { scroll-margin-top: 5rem; }

/* ── Podstrona formy udziału ────────────────────────────────────────────
   Istnieje po to, żeby ktoś doczytał, co znaczy „bez ustawienia własnego",
   i od razu mógł się zapisać. Blok ceny z przyciskiem stoi nad tekstem
   i pod nim — po długim opisie przycisk z góry jest daleko nad głową. */
.czk-karta-forma { max-width: 46rem; }
.czk-forma-zapis {
	display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
	align-items: center; justify-content: space-between;
	margin: 1.25rem 0; padding: 1rem 1.25rem;
	background: var(--c-gray);
	border: 1px solid var(--c-line); border-radius: var(--radius);
}
.czk-forma-zapis-cena { margin: 0; font-size: 1.15rem; font-weight: 700; }
.czk-forma-zapis-cena .czk-muted { display: block; font-size: .82rem; font-weight: 400; }
.czk-forma-zapis-akcja { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.czk-forma-zapis-akcja .czk-muted { font-size: .85rem; }
.czk-karta-forma footer { margin-top: 2rem; }
.czk-forma-powrot { margin: .8rem 0 0; font-size: .92rem; }

/* ── Harmonogram warsztatu (20.09.2026, makieta Mirka) ────────────────
   Godziny w osobnej kolumnie i `tabular-nums`, żeby „10:00" i „ok. 18:00"
   stały w pionie jak w rozkładzie jazdy — czyta się je wzrokiem w dół,
   a nie zdanie po zdaniu. */
.czk-termin-ramy {
	margin: .35rem 0 0;
	font-size: .92rem;
	color: var(--c-muted);
}
.czk-karta-harmonogram { margin-top: 2rem; }
.czk-karta-harmonogram h2 { margin: 0 0 .8rem; }
.czk-harmonogram {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.czk-harmonogram-dzien {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: .9rem 1.1rem;
}
.czk-harmonogram-dzien h4 {
	margin: 0 0 .5rem;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-gold-deep);
}
.czk-harmonogram-dzien ul { margin: 0; padding: 0; list-style: none; }
.czk-harmonogram-dzien li {
	display: flex;
	gap: .6rem;
	align-items: baseline;
	padding: .2rem 0;
	font-size: .92rem;
}
.czk-harmonogram-godziny {
	flex: 0 0 auto;
	min-width: 7.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}