/* Podstrony T2/T5/T6, styl własny poza homem. Kamila Radzioch. */

.podstrona-hero { padding-top: calc(var(--space-9) + 80px); padding-bottom: var(--space-8); }
.podstrona-hero__lead { max-width: 56ch; margin-top: var(--space-5); color: var(--text-on-dark-muted); font-size: 17px; }

.lista-galek { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.lista-galek li { padding-left: var(--space-6); position: relative; font-size: 15px; }
.lista-galek li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; background: var(--accent); }

.moduly-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 700px) { .moduly-grid { grid-template-columns: 1fr; } }
.modul-item { display: flex; align-items: center; gap: var(--space-4); background: var(--surface-white); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); }
.modul-item em { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); }
.modul-item span { font-size: 14px; }

/* --- Kontakt, S2 split dwie karty [PRZEBUDOWA v1->v2, 16.09.2026, decyzje.md D6x] --
   .kontakt-info/.kontakt-form to tresc WEWNATRZ kazdej karty (lista danych /
   sam formularz), .kontakt-karta to chrom karty (padding, tlo z kontekstu
   .on-wine/.on-light, cien). Sekcja-matka nadpisuje tlo na --surface-paper
   (pomiar wektorowy kanon 1440 z radzioch_kontakt.pdf: rgb(234,227,218) =
   --surface-paper DOKLADNIE, nie domyslny --surface-cream z .on-light) - ten
   sam wzorzec co .hero--on-light na /szkolenia-stacjonarne/ (base.css ~1612).
   Karta bordo = .on-wine bez zadnego nadpisania (tlo zmierzone rgb(73,25,35)
   = --accent-deep DOKLADNIE). Karta formularza = .on-light bez nadpisania
   (tlo zmierzone rgb(244,240,233) = --surface-cream DOKLADNIE, jasniejsza
   niz sekcja-matka - ten sam "karta jasniejsza od tla sekcji" ukladu warstw
   co gdzie indziej w projekcie). Szerokosci kart zmierzone wektorowo: bordo
   452px, form 802px na kontenerze 1304px (proporcja ~36:64, fr ponizej to
   te same wartosci podzielone przez 2 dla czytelnosci). */
.kontakt-split { display: grid; grid-template-columns: 226fr 401fr; gap: var(--space-8); align-items: stretch; }
@media (max-width: 900px) { .kontakt-split { grid-template-columns: 1fr; gap: var(--space-6); } }

.kontakt-karta { padding: var(--card-pad); box-shadow: var(--shadow-karta); }
@media (max-width: 480px) { .kontakt-karta { padding: var(--card-pad-featured-mobile); } }

.kontakt-karta__label { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-ctx); margin: 0 0 var(--space-6); }
.kontakt-karta__heading { font-family: var(--font-display); font-size: var(--fs-display-3); line-height: var(--lh-display); color: var(--fg); margin: 0 0 var(--space-7); }
.kontakt-karta__heading em { font-style: italic; color: var(--accent-ctx); }
/* Pomiar wektorowy kursywy karty bordo: rgb(223,190,177) = --blush, NIE
   --accent-ctx (zloto) jak domyslnie na .on-wine - ten sam wzorzec co
   "kursywa S3 --blush nie zloto" na /szkolenia-stacjonarne/ (decyzje.md D58).
   Kursywa H1 hero (na .on-light, sekcja wyzej) zostaje na domyslnym
   --accent-ctx (wino), tam pomiar sie zgadzal, nadpisanie ponizej dotyczy
   TYLKO karty bordo. */
.kontakt-karta--bordo .kontakt-karta__heading em { color: var(--blush); }

.kontakt-karta__social { display: flex; gap: var(--space-5); margin-top: var(--space-7); }
.kontakt-karta__social a { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ctx); transition: color var(--dur) var(--ease); }
.kontakt-karta__social a:hover { color: var(--fg); }
.kontakt-karta__social a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.kontakt-info { display: flex; flex-direction: column; gap: var(--space-7); }
.kontakt-info__item strong { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ctx); margin-bottom: var(--space-2); }
.kontakt-info__item a, .kontakt-info__item span { font-family: var(--font-display); font-size: 22px; color: var(--fg); }
.kontakt-info__item a { transition: color var(--dur) var(--ease); }
.kontakt-info__item a:hover { color: var(--blush); }
.kontakt-info__item a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.kontakt-form form { display: flex; flex-direction: column; gap: var(--space-5); }
.kontakt-form label { display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-light-muted); }
.kontakt-form__rzad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 600px) { .kontakt-form__rzad { grid-template-columns: 1fr; } }
.kontakt-form input, .kontakt-form select, .kontakt-form textarea {
  font-family: var(--font-text);
  font-size: 15px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-on-light);
  background: var(--surface-white);
  color: var(--text-on-light);
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
  box-sizing: border-box;
}
.kontakt-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-on-light-muted) 50%),
    linear-gradient(135deg, var(--text-on-light-muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}
.kontakt-form select:required:invalid { color: var(--text-on-light-muted); }
.kontakt-form input:focus, .kontakt-form select:focus, .kontakt-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.kontakt-form label.checkbox { flex-direction: row; align-items: center; gap: var(--space-3); text-transform: none; letter-spacing: 0; font-size: 13px; }
.kontakt-form label.checkbox input { width: auto; }
.kontakt-form label.checkbox a { text-decoration: underline; color: var(--accent); }
.kontakt-form button[type="submit"] { align-self: flex-end; }
@media (max-width: 600px) { .kontakt-form button[type="submit"] { align-self: stretch; } }
.form-info { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); font-size: 13px; background: var(--surface-paper); border-left: 3px solid var(--accent); }
.form-info--blad { border-left-color: var(--accent-deep); }
.kontakt-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tekst-prawny { max-width: 72ch; }
.tekst-prawny h2 { font-size: var(--fs-display-3); margin: var(--space-7) 0 var(--space-4); }
.tekst-prawny h3 { font-size: 20px; margin: var(--space-6) 0 var(--space-3); }
.tekst-prawny ul, .tekst-prawny ol { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.tekst-prawny li { margin-bottom: var(--space-2); }
.moduly-lista { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-6); }
.moduly-lista li { font-size: 14px; padding-left: var(--space-5); position: relative; }
.moduly-lista li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--accent); }
@media (max-width: 700px) { .moduly-lista { grid-template-columns: 1fr; } }

/* --- Siatka produktów (ebooki, szkolenia online) ------------------------- */
.produkty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-8); }
@media (max-width: 900px) { .produkty-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .produkty-grid { grid-template-columns: 1fr; } }
.produkt-karta { background: var(--surface-white); border: 1px solid var(--line-on-light); display: flex; flex-direction: column; }
.produkt-karta__badge { position: relative; }
.produkt-karta__badge span { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--surface-dark); color: var(--surface-white); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; }
.produkt-karta img { aspect-ratio: 1/1; object-fit: cover; }
.produkt-karta__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.produkt-karta__kat { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); }
.produkt-karta__title { font-family: var(--font-display); font-size: 19px; }
.produkt-karta__price { margin-top: auto; display: flex; align-items: baseline; gap: var(--space-2); }
.produkt-karta__price del { font-size: 13px; color: var(--text-on-light-muted); }
.produkt-karta__price strong { font-size: 20px; }
.produkt-karta .btn { width: 100%; margin-top: var(--space-2); }

/* --- Oferta stacjonarna, bloki szkoleń ------------------------------------ */
.szkolenie-blok { padding-block: var(--space-8); border-bottom: 1px solid var(--line-on-light); }
.szkolenie-blok:last-child { border-bottom: 0; }
.szkolenie-blok h2 { text-align: center; }
.szkolenie-blok__intro { max-width: 62ch; margin: var(--space-5) auto 0; text-align: center; color: var(--text-on-light-muted); }
.szkolenie-blok__zakres { max-width: 900px; margin: var(--space-7) auto 0; }
.szkolenie-blok__zakres h3 { text-align: center; margin-bottom: var(--space-5); }
.zakres-dwie-kolumny { columns: 2; column-gap: var(--space-8); list-style: none; padding: 0; margin: 0; }
.zakres-dwie-kolumny li { font-size: 14px; padding: 6px 0; break-inside: avoid; }
@media (max-width: 700px) { .zakres-dwie-kolumny { columns: 1; } }
.szkolenie-blok__meta { text-align: center; margin-top: var(--space-6); font-size: 13px; color: var(--text-on-light-muted); }
.szkolenie-blok__ceny { display: flex; justify-content: center; gap: var(--space-5); margin-top: var(--space-7); flex-wrap: wrap; }
.cena-karta { background: var(--surface-dark); color: var(--text-on-dark); padding: var(--space-6) var(--space-7); min-width: 220px; text-align: center; }
.cena-karta strong { display: block; font-family: var(--font-display); font-size: 32px; color: var(--gold); }
.cena-karta span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-on-dark-muted); margin-top: var(--space-2); }
.cena-karta .btn { margin-top: var(--space-5); width: 100%; }
.cena-karta small { display: block; margin-top: var(--space-3); font-size: 11px; color: var(--text-on-dark-muted); }

/* --- Formularz newsletter (warsztaty) -------------------------------------- */
.newsletter-box { max-width: 480px; margin: var(--space-8) auto 0; background: var(--surface-dark); color: var(--text-on-dark); padding: var(--space-7); }
.newsletter-box form { display: flex; flex-direction: column; gap: var(--space-4); }
.newsletter-box label { display: flex; flex-direction: column; gap: var(--space-2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.newsletter-box input {
  font-family: var(--font-text); font-size: 14px; padding: var(--space-3) var(--space-4);
  background: var(--surface-white); border: 1px solid var(--line-on-dark); color: var(--text-on-light);
}

/* --- Platforma, typ ukladu "kurs" (P3 sesja 1, single-sfwd-courses.php) ----
   Sekcje H-LD/breadcrumb/hero+postep/telegram/akordeon zyja we WSPOLNYM
   .container (decyzja globalna #6), markup wlasny bo natywny infobar LD nie
   ma dwukolumnowego ukladu z makiety (patrz komentarz w learndash.css). Kolej
   nosc sekcji na 390 inna niz 1440 (telegram po akordeonie, nie przed nim,
   wg makiety 01-lista-mobile.png), stad wrapper .kurs-flow z order per
   breakpoint zamiast dwoch kopii paska. */
.kurs-flow { display: flex; flex-direction: column; }
.kurs-flow > .kurs-intro { order: 1; }
.kurs-flow > .kurs-telegram { order: 2; }
.kurs-flow > .kurs-akordeon { order: 3; }
@media (max-width: 768px) {
  .kurs-flow > .kurs-telegram { order: 3; }
  .kurs-flow > .kurs-akordeon { order: 2; }
}

.kurs-intro { padding-top: calc(var(--space-9) + 80px); padding-bottom: var(--space-7); }
.kurs-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-6); color: var(--text-on-light-muted); }
.kurs-breadcrumb a { color: var(--accent); }
.kurs-breadcrumb a:hover { text-decoration: underline; }
.kurs-breadcrumb span[aria-hidden] { opacity: .5; }
.kurs-breadcrumb span:last-child { color: var(--text-on-light-muted); }

.kurs-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.kurs-hero__tekst { flex: 1 1 420px; }
.kurs-hero__lead { margin-top: var(--space-4); color: var(--text-on-light-muted); font-size: 16px; }
.kurs-hero__karta {
  background: var(--surface-cream);
  border: 1px solid var(--line-on-light);
  box-shadow: var(--shadow-karta);
  flex: 0 1 380px;
  padding: var(--space-6) var(--space-7);
}
.kurs-hero__karta-etykieta { display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-on-light-muted); margin-bottom: var(--space-3); }
.kurs-hero__procent { display: block; font-family: var(--font-display); font-style: italic; font-size: clamp(38px, 4vw, 56px); color: var(--accent); line-height: 1; }
.kurs-hero__pasek { margin-top: var(--space-4); height: 6px; background: var(--line-on-light-strong); overflow: hidden; }
.kurs-hero__pasek-wypelnienie { height: 6px; background: var(--accent); }
.kurs-hero__kroki { display: block; margin-top: var(--space-3); font-size: 13px; color: var(--text-on-light); }
.kurs-hero__ostatnia { display: block; margin-top: var(--space-2); font-size: 12px; color: var(--text-on-light-muted); }
@media (max-width: 768px) {
  .kurs-hero { flex-direction: column; }
  .kurs-hero__karta { flex-basis: auto; width: 100%; }
}

.kurs-telegram { padding-block: var(--space-6); }
.kurs-telegram__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.kurs-telegram__tekst p { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 20px; }
.kurs-telegram__cta { flex: none; }
@media (max-width: 768px) {
  .kurs-telegram__inner { flex-direction: column; align-items: stretch; text-align: left; }
  .kurs-telegram__cta { width: 100%; }
}

.kurs-akordeon { padding-top: var(--space-7); }

/* --- Platforma, typ ukladu "lista-kursow" (P3 sesja 3, template-moje-szkolenia.php) --
   H1+lead prosty, bez karty postepu (to nie strona jednego kursu, page-briefs/
   moje-szkolenia.md S2). Grid kart .karta-kurs-moje: jezyk wizualny wiki/komponenty/
   karta-kurs-flagowy.md (karta ciemna na jasnej sekcji) ale kompaktowa, pasek postepu
   zamiast ceny/CTA-kup (brak wlasnej makiety Karola dla tej strony, decyzje.md P3.1).
   Karta uzywa klasy .on-dark wprost (nie hardkoduje tlo/kolor jak karta-kurs-flagowy,
   ktora ma wyjatek udokumentowany we wlasnym pliku dla gradientu) - .btn--solid w
   srodku dostaje wtedy poprawny zloty kontekst automatycznie (budowa-strony.md
   decyzja globalna #2, "obejmuje KAZDY element poza sekcjami"). */
.moje-szkolenia-hero { padding-top: calc(var(--space-9) + 80px); padding-bottom: var(--space-8); }
.moje-szkolenia-hero__lead { margin-top: var(--space-4); max-width: 56ch; color: var(--text-on-light-muted); font-size: 16px; }

/* auto-fit zamiast modyfikatora policzonego w PHP: przy 1 kursie jedyna karta
   rozciaga sie na cala szerokosc (,,karta szeroka" z page-briefu), przy 2 kursach
   oba tracki >=420px mieszcza sie obok siebie. Kontener ma max 2 kursy dzis
   (sitemap.md), auto-fit zostaje poprawne tez gdyby doszedl trzeci.
   Media query pod 768px WYMAGANA mimo auto-fit: minmax(420px, 1fr) ma twardy
   floor 420px per tor, a kontener na 390 to 351px (90%) - grid wymuszalby
   420px i realnie obcinal karte o ~70px (zlapane pomiarem scrollWidth karty
   420 vs container 351, dom.py/Playwright, mierzone na zywo, nie "wyglada ok"). */
.moje-szkolenia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-6); }
@media (max-width: 768px) {
  .moje-szkolenia-grid { grid-template-columns: 1fr; }
}

.karta-kurs-moje { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-7); }
.karta-kurs-moje__status { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.karta-kurs-moje__status--ukonczony { color: var(--gold); }
.karta-kurs-moje__status--w-trakcie { color: var(--gold-light); }
.karta-kurs-moje__title { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.karta-kurs-moje__pasek { height: 6px; background: var(--line-on-dark-strong); overflow: hidden; }
.karta-kurs-moje__pasek-wypelnienie { height: 6px; background: var(--gold); }
.karta-kurs-moje__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.karta-kurs-moje__kroki { font-size: 13px; color: var(--text-on-dark-muted); }
.karta-kurs-moje__procent { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold); }
.karta-kurs-moje__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.karta-kurs-moje__cert { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur) var(--ease); }
.karta-kurs-moje__cert:hover { color: var(--text-on-dark); }

.moje-szkolenia-empty { max-width: 480px; margin: 0 auto; text-align: center; }
.moje-szkolenia-empty p { margin: 0 0 var(--space-5); color: var(--text-on-light-muted); font-size: 16px; }

/* --- Platforma, typ ukladu "logowanie" (P3 sesja B5b, template-logowanie.php) --
   Brak makiety Karola (page-briefs/logowanie.md: "Layout minimalny, budowany
   z tokenow wspolnych z reszta platformy"). Karta uzywa .on-light wprost
   (decyzja globalna #2, budowa-strony.md), tlo strony .on-dark pelnoekranowe
   (brief S2: "reszte ekranu wypelnia tlo marki, zero zdjecia stockowego").
   Formularz wzorowany na .kontakt-form (podstrony.css), wlasna klasa bo karta
   jest wysrodkowana i wezsza (~460px), nie dwukolumnowy split jak kontakt. */
.logowanie-scena { min-height: 70vh; display: flex; align-items: center; padding-block: var(--space-9); }
.logowanie-scena__inner { display: flex; justify-content: center; }
.karta-logowania { width: 100%; max-width: 460px; padding: var(--space-8) var(--space-7); box-shadow: var(--shadow-karta); }
.karta-logowania h1 { font-size: var(--fs-display-3); margin: 0 0 var(--space-5); }
.karta-logowania__lead { margin: 0 0 var(--space-6); color: var(--text-on-light-muted); font-size: 15px; }
.karta-logowania__info { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); font-size: 13px; background: var(--surface-paper); border-left: 3px solid var(--accent); }
.karta-logowania__info--blad { border-left-color: var(--accent-deep); }
.karta-logowania__powrot { display: inline-block; margin-top: var(--space-5); font-size: 13px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .karta-logowania { padding: var(--space-7) var(--space-5); } }

.formularz-logowania { display: flex; flex-direction: column; gap: var(--space-5); }
.formularz-logowania label { display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-light-muted); }
.formularz-logowania input[type="email"],
.formularz-logowania input[type="text"],
.formularz-logowania input[type="password"] {
  font-family: var(--font-text);
  font-size: 15px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-on-light);
  background: var(--surface-white);
  color: var(--text-on-light);
  width: 100%;
  box-sizing: border-box;
}
.formularz-logowania input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.formularz-logowania .checkbox { flex-direction: row; align-items: center; gap: var(--space-3); text-transform: none; letter-spacing: 0; font-size: 13px; }
.formularz-logowania .checkbox input { width: auto; }
.formularz-logowania__haslo-pole { position: relative; display: flex; }
.formularz-logowania__haslo-pole input { padding-right: 72px; }
.formularz-logowania__toggle-haslo {
  position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--accent); font-size: 12px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  padding: var(--space-2) var(--space-3);
}
.formularz-logowania__toggle-haslo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Header/stopka platformy, wariant minimalny (logowanie/reset-hasla) --- */
.site-header--minimalny .site-header__inner { justify-content: flex-start; }
.site-footer__top--minimalny { grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 767px) { .site-footer__top--minimalny { grid-template-columns: 1fr; } }

/* --- Platforma, typ ukladu "strona-tekstowa" (P3 sesja B5b, template-pomoc.php) --
   Reuzywa .tekst-prawny (regulamin/polityka) dla H2/paragrafy, sekcja hero
   wlasna bo istniejacy .podstrona-hero__lead hardkoduje kolor on-dark. */
.pomoc-hero__lead { margin-top: var(--space-4); max-width: 56ch; color: var(--text-on-light-muted); font-size: 16px; }

/* --- O nas, S2 karty-duetu-portret [NOWY, 16.09.2026, decyzje.md D6x] ------
   Build od zera (template-o-nas.php nie istnial, D62). Zdjecie pelnej
   szerokosci karty u gory (bez paddingu, bez ramki), pasmo dolne z tekstem.
   Rozni sie od .osoba (Zespol, home): tam portret OBOK tekstu w jednym
   rzedzie na ciemnym tle, bez pasma koloru. Tu zdjecie NAD tekstem, pasmo ma
   wlasny kontekst tla (jasny dla Kamili, .on-wine dla Kingi).

   Pomiar wektorowy kanon 1440 (radzioch_o_nas.pdf, PyMuPDF, mediabox 720x860pt,
   natywny raster 2880x3440 = kanon 1440 dokladny 2x-downsample):
   - Kontener kart: x 68-1373 (=.container, brak nowej szerokosci)
   - Obie karty: 601px/602px szerokosc, gap miedzy nimi 102px -> var(--space-11)
     (96px) najblizszy token, ~6% odchylenia, w tolerancji juz stosowanej w
     projekcie (D58: "~4.6%", D55: "zakres wspolczynnika ~3.4%")
   - Zdjecie: bbox ~601x599px na OBU kartach w tej makiecie (niemal 1:1) ->
     aspect-ratio 1/1. Zrodlowe pliki (IMG_9135.JPG, kinga.jpg) sa oba 2:3,
     kadrowanie 1:1 to swiadomy wybor CSS (object-fit:cover), nie wlasciwosc
     samych plikow
   - Pasmo dolne: bg Kamila = rgb(255,253,248) = --surface-white DOKLADNIE,
     bg Kinga = rgb(73,25,35) = --accent-deep DOKLADNIE (= .on-wine domyslne
     --bg, zero nadpisania potrzebne)

   ROZJAZD zglaszany, nie rozstrzygniety samodzielnie: page-brief opisuje
   "karty NIE rownej wysokosci, swiadoma asymetria z makiety (portret Kingi
   proporcjonalnie wyzszy)". Pomiar tej KONKRETNEJ makiety pokazuje odwrotnie:
   oba zdjecia maja niemal identyczny bbox (601x599 vs 602x600), pasmo obu
   kart zaczyna sie w tym samym wierszu (~y1100) i obie karty maja identyczna
   calkowita wysokosc na statycznym PNG. Asymetria mimo to WYSTAPI w
   zbudowanej wersji z innego, realnego powodu: bio Kingi (D62, pelny tekst
   klientki) ma wiecej znakow niz bio Kamili, wiec przy tej samej szerokosci
   kolumny jej pasmo bedzie faktycznie wyzsze. align-items:start (nie
   stretch) na gridzie, zeby ta naturalna roznica mogla wystapic - kierunek
   zgodny z page-briefem (nie wymuszac equal-height), tylko PRZYCZYNA inna
   niz zalozona (dlugosc tekstu, nie proporcja zdjecia). Zgloszone tu, nie
   ukryte. */
/* korekta 16.09.2026: Jakub zywym okiem "zdjecia i caly box przeogromny" (zdjecie 600x600
   na kontenerze 1296px). max-width zweza caly duet, aspect-ratio 1/1 -> 5/4 skraca zdjecie
   (nie tylko zweza) - razem ok. 25% mniej szerokosci, ok. 40% mniej wysokosci zdjecia. */
.karty-duetu { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-11); align-items: start; max-width: 1040px; margin-inline: auto; }
@media (max-width: 900px) { .karty-duetu { grid-template-columns: 1fr; gap: var(--space-7); max-width: 560px; } }

.karty-duetu__karta { display: flex; flex-direction: column; }
.karty-duetu__foto { aspect-ratio: 5 / 4; overflow: hidden; }
.karty-duetu__foto img { width: 100%; height: 100%; object-fit: cover; margin: 0; display: block; }

/* Bug realny zlapany pomiarem getComputedStyle po pierwszym buildzie: tlo
   ponizej mialo goly selektor klasy ".karty-duetu__panel" (specyficznosc
   0,1,0) - identyczna specyficznosc jak ".on-wine" (tez 0,1,0) w base.css.
   Poniewaz podstrony.css laduje sie PO base.css, ten selektor wygrywal w
   kaskadzie i nadpisywal tlo bordo na biale na OBU kartach. Naprawione
   zawezeniem do ":not(.on-wine)", karta Kingi dziedziczy tlo z .on-wine
   (--accent-deep) bez przeszkod. */
.karty-duetu__panel:not(.on-wine) { background: var(--surface-white); }
.karty-duetu__panel { padding: var(--card-pad); }
@media (max-width: 480px) { .karty-duetu__panel { padding: var(--card-pad-featured-mobile); } }

.karty-duetu__kicker { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-ctx); margin: 0 0 var(--space-3); }
.karty-duetu__heading { font-family: var(--font-display); font-size: var(--fs-display-3); line-height: var(--lh-display); margin: 0 0 var(--space-4); }
/* Pomiar wektorowy: H3 karty jasnej (Kamila) = rgb(12,9,11) DOKLADNIE
   --surface-dark, NIE --text-on-light (dziedziczone z sekcji .on-light,
   #332B2B) - odstepstwo swiadome, zweryfikowane 15 probek najciemniejszego
   piksela w rdzeniu litery "M", zero szumu antyaliasingu. Karta bordo (Kinga,
   .on-wine) nie potrzebuje nadpisania: dziedziczony --fg=--text-on-dark
   (#FFFDF8) trafia dokladnie w pomiar. */
.karty-duetu__panel:not(.on-wine) .karty-duetu__heading { color: var(--surface-dark); }

.karty-duetu__bio { font-size: 15px; color: var(--fg-muted); margin: 0 0 var(--space-6); max-width: 46ch; }

.karty-duetu__social { display: flex; gap: var(--space-5); }
.karty-duetu__social a { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ctx); transition: color var(--dur) var(--ease); }
.karty-duetu__social a:hover { color: var(--fg); }
.karty-duetu__social a:hover .link-arrow { transform: translateX(4px); }
.karty-duetu__social a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* Kicker + linki na pasmie bordo: pomiar wektorowy (15 probek, piksel
   najjasniejszy) = rgb(223,196,156) DOKLADNIE --gold-light, NIE domyslne
   --accent-ctx (--gold, on-wine) - ten sam wzorzec "kursywa/etykieta na wine
   bierze gold-light nie gold" co D58 (pas-cta--list h2 em) i D64 (kontakt
   karta bordo, heading em). Trzeci projekt/wariant z rzedu z tym samym
   rozjazdem, sprawdz pomiarem przy KAZDYM nowym elemencie na .on-wine, nie
   zakladaj automatycznie ktoregos z dwoch zlotych tonow. */
.karty-duetu__panel--bordo .karty-duetu__kicker,
.karty-duetu__panel--bordo .karty-duetu__social a { color: var(--gold-light); }
.karty-duetu__panel--bordo .karty-duetu__social a:hover { color: var(--fg); }

/* --- O nas, S3 pas-cta--misja [wariant NOWY istniejacego pas-cta, D6x] -----
   Sprawdzone przed napisaniem od zera: struktura identyczna z
   .pas-cta--proste (eyebrow+note po lewej, CTA po prawej, flex
   space-between, kolaps do kolumny <900px) - wariant reuzywa TA sama klase
   .pas-cta--proste w markupie, .pas-cta--misja dokleja tylko tlo/ramke.

   Pomiar wektorowy: pasmo = rgb(244,240,233) DOKLADNIE --surface-cream, NIE
   --surface-paper ktore daje istniejacy selektor ".pas-cta.on-light"
   (base.css, D58 dla /szkolenia-stacjonarne/ S4) - tam ten sam wzorzec
   celowo odwrocony (S4 ciezsze od S2). Tu ODWROTNIE: sekcja-matka S1+S2
   tej podstrony jest --surface-paper (nadpisanie inline na sekcji, jak
   /kontakt/ D64), a to pasmo ma byc JASNIEJSZE od otoczenia - ten sam uklad
   warstw "karta jasniejsza od tla sekcji" co .kontakt-karta--form (D64).
   Selektor 3-klasowy (.pas-cta.on-light.pas-cta--misja) ma wyzsza
   specyficznosc niz ".pas-cta.on-light" bazowe, wygrywa niezaleznie od
   kolejnosci w pliku. Ramka 1px jak .pas-cta__panel (page-brief: "ramowany"),
   potwierdzona pikselowo jako delikatna linia na krawedzi pasma. */
.pas-cta.on-light.pas-cta--misja { background: var(--surface-cream); border: 1px solid var(--line-on-light); }

/* ==========================================================================
   WARSZTATY: hero-formularz-powiadom [NOWY komponent page-specific, D6x]
   Jedna sekcja pelnoekranowa (page-brief: "nie stos sekcji"), brak vector
   PDF dla tej podstrony (radzioch_warsztaty.pdf/2.pdf/mobile sa raster
   flattened, zero warstwy tekstu - pierwszy taki przypadek w projekcie,
   wszystkie poprzednie pomiary H1 mialy zrodlo wektorowe PyMuPDF). Geometria
   i H1 zmierzone piksowo bezposrednio na PNG makiety (00-full-desktop.png,
   natywny 2880x2640 = kanon 1440 dokladny 2x-downsample, ta sama relacja
   co pliki wektorowe innych podstron, tu tylko brak warstwy tekstu do
   ekstrakcji rawdict).

   Split lewo/prawo zmierzony: granica kolumn przy natywnym x=1360 (kanon
   680, 47.2% z 1440) - zdjecie full-bleed do x=0 (bez gutter), panel prawy
   trzyma marginesy jak .container standardowy (~5vw, zmierzone 68px przy
   1440 vs container 72px, w tolerancji <4px). Karta NIE dotyka gornej/dolnej
   krawedzi sekcji (mierzone wciecie ~89px gora / ~132px dol przy 1440 -
   niesymetryczne w makiecie, zaokraglone do symetrycznego flex
   align-items:center + padding-block var(--space-11), swiadome przyblizenie
   ~4% ponizej progu tolerancji projektu, uzasadnione explicit "nie
   inwestowac" z page-briefu dla tej tymczasowej podstrony).

   KOREKTA 16.09.2026 (D75): pierwotny pomiar tego bloku twierdzil "lewa
   krawedz karty = granica kolumn, bez wlasnego gutter" - bledne, nigdy
   niezweryfikowane niezaleznie od prawego marginesu. Ponowny pomiar
   scanline'em (Python/PIL, wykrywanie zmiany koloru piksel-po-pikselu wzdluz
   poziomej linii w obszarze karty) na 00-full-desktop.png: granica kolumn
   (koniec zdjecia) x=1360 natywnie, ale KARTA (zmiana tla z --surface-paper
   234,227,218 na --surface-cream 244,240,233) zaczyna sie dopiero x=1472 -
   64px kanon (56px natywnie/2) przerwy z widocznym tlem panelu MIEDZY
   zdjeciem a karta, nie flush. Jakub zywym okiem: "u nas formularz przylega
   do zdjecia" - potwierdzone pomiarem, nie tylko wrazeniem. Naprawione
   `padding-left` na panelu (patrz regula ponizej), `hero-warsztaty__karta
   {width:100%}` zostaje bez zmian (100% NOWEJ, wezszej po padding-left
   szerokosci zawartosci panelu). */
.hero-warsztaty {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  min-height: calc(100svh - 96px); /* RADZIOCH_DESIGN_SYSTEM.md sekcja 13, wysokosc hero desktop */
  background: var(--surface-paper);
}
.hero-warsztaty__foto {
  position: relative;
  overflow: hidden;
}
/* korekta 16.09.2026 (D73): img bez position:absolute plynal normalnie w dokumencie
   (position:static, height:100% = 975px), wypychajac .hero-warsztaty__tekst (sibling,
   position:relative, nie absolute) o cala ta wysokosc w dol - caly hero-tekst (eyebrow
   "01 WARSZTATY"/H1 "Spotkajmy sie na zywo"/lead) renderowal sie ~1200px pod fold,
   niewidoczny mimo opacity:1. Jakub zglosil "wcale nie przypomina makiety", brief
   (page-briefs/warsztaty.md linia 40) mial ten tekst opisany poprawnie od poczatku -
   bug w CSS, nie w tresci/planie. Img teraz absolute+inset:0, .hero-warsztaty__tekst
   staje sie jedyna trescia w normalnym flow i nakłada się na obraz jak zamierzone. */
.hero-warsztaty__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-warsztaty__foto::before {
  /* Overlay jednolity zamiast gradientu wlasnego - "nie inwestowac" w
     dekoracje na tej tymczasowej podstronie, token istniejacy wystarcza do
     czytelnosci bialego tekstu na zdjeciu. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--overlay-soft);
}
.hero-warsztaty__tekst {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  /* korekta 16.09.2026 (D73): --gutter (68px, token dla .hero__stat/kontenera pelnej
     szerokosci) na obu bokach tej waskiej 47%-kolumny zostawial 341px na tresc, "Spotkajmy
     się" przy --fs-h1-hero-landing (54px @1440) mierzy 342.7px canvas.measureText -
     zawijalo sie w polowie zamierzonego pierwszego wiersza (bylo "Spotkajmy"/"się"/"na
     żywo." zamiast "Spotkajmy się"/"na żywo." z makiety). --space-7 (40px) daje 397px,
     zapas nad zmierzona szerokoscia tekstu. */
  padding-inline: var(--space-7);
  max-width: 46ch;
}
.hero-warsztaty__tekst h1 {
  /* Pomiar pikselowy (nie wektorowy, patrz komentarz nagrywka): litera "S"
     w "Spotkajmy" (jedyna wielka litera H1, reszta minuskula - brak litery
     plaskiej u gory do pomiaru bez narazenia na overshoot okraglej formy)
     cap-height = 74px natywnie / 2 = 37px kanon 1440 (skan jasnych pikseli,
     x-okno 100-190 zeby nie zlapac sasiedniej "p", potwierdzone stabilne
     przy poszerzaniu okna do 190). Wspolczynnik cap-height/font-size Bodoni
     Moda 0.745-0.77 (zakres D52) -> font-size ~48-50px, POMIEDZY istniejacymi
     tokenami --fs-h1-podstrona (43.2px @1440) i --fs-h1-hero-landing (54px
     @1440), ~11% od obu - poza zwyklym progiem tolerancji projektu (~5%).
     Nie utworzono trzeciego tokenu: komponent to page-brief nazwal wprost
     "najblizszy krewny hero-glowny wariant landing" (ta sama rodzina co
     /szkolenie-instruktorskie/), strona jest z zalozenia tymczasowa/coming-
     soon (D63, "nie inwestowac"), a litera-zrodlo pomiaru (S, w pelni
     okragla u gory i dolu) ma najwiekszy overshoot ze wszystkich liter
     uzywanych dotad do tej metody (P/D/Z maja przynajmniej jedna plaska
     krawedz) - realny target przez to prawdopodobnie blizszy gornej granicy
     przedzialu (~54px) niz srodkowi. --fs-h1-hero-landing REUZYTY bez zmian,
     rozjazd zgloszony jawnie tutaj i w decyzje.md, nie ukryty. */
  font-size: var(--fs-h1-hero-landing);
  color: var(--text-on-dark);
}
.hero-warsztaty__panel {
  display: flex;
  align-items: center;
  padding-block: var(--space-11);
  padding-right: 5vw;
  padding-left: 4vw; /* D75: karta nie jest flush ze zdjeciem w makiecie, pomiar 56px kanon @1440 - patrz komentarz nad .hero-warsztaty */
}
.hero-warsztaty__karta { width: 100%; }
.hero-warsztaty__panel-lead { margin: 0 0 var(--space-6); max-width: 42ch; color: var(--fg-muted); font-size: 16px; }
.hero-warsztaty__form .checkbox--rodo { align-items: flex-start; }
.hero-warsztaty__form .checkbox--rodo input { margin-top: 3px; }
.hero-warsztaty__cta {
  /* CTA bordo pelne (page-brief: "CTA pełne bordo"), zmierzone piksel
     rgb(73,25,35) = dokladnie --accent-deep - ten sam wzorzec nadpisania
     co .karta-produktu__cta/.hero-stacjonarne__cta (D58/D60): domyslny
     .btn--solid on-light dawalby --surface-dark (prawie czarny), a
     --accent-hover on-light == --accent-deep, wiec hover bez wlasnego
     nadpisania bylby niewidoczny (regula "Kontrast na hover"). Pelna
     szerokosc + tekst-lewo/strzalka-prawo zgodnie z makieta. */
  --btn-solid-bg: var(--accent-deep);
  --btn-solid-fg: var(--text-on-dark);
  --accent-ctx-hover: var(--accent-deep-hover);
  width: 100%;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .hero-warsztaty { grid-template-columns: 1fr; min-height: auto; }
  .hero-warsztaty__foto {
    /* Pomiar pikselowy mobile (00-full-mobile.png, natywny 1080 szer.):
       zdjecie widoczne (przyciete, nie pelna wysokosc ekranu, page-brief)
       wysokosc ~923px natywnie na szerokosc 1080 -> aspect-ratio ~7/6. */
    aspect-ratio: 7 / 6;
  }
  .hero-warsztaty__tekst { padding-inline: var(--gutter); padding-block: var(--space-8); }
  .hero-warsztaty__panel {
    padding: 0 var(--gutter);
    /* Karta nachodzi na dolny róg zdjęcia (page-brief + mockup mobile):
       pomiar natywny overlap ~128px / (1080/390 kanon-ratio ~2.77) = ~46px
       kanon 390. Checkbox(y) WLACZONE mimo braku w eksporcie mobilnym
       makiety (page-brief: "ten sam rodzaj luki w eksporcie mobile co
       /szkolenia-stacjonarne/ D58", brief wygrywa nad niepelnym mockupem). */
    margin-top: -46px;
    position: relative; z-index: 2;
  }
  .hero-warsztaty__karta { padding: var(--card-pad-featured-mobile); }
}

/* ==========================================================================
   WOOCOMMERCE: koszyk + zamówienie w brandingu (wdroz-e8.1, 16.09.2026)
   Strony /koszyk/ i /zamowienie/ przelaczone z domyslnych blokow Woo (React,
   nieprzetlumaczone stringi, zero kontroli nad wygladem) na klasyczne
   shortcody [woocommerce_cart]/[woocommerce_checkout] - jedyny tor spojny z
   reszta motywu (zero bloku Gutenberga nigdzie indziej w projekcie).
   Wrapper .woo-strona (functions.php, jdb_woo_naglowek_otworz/zamknij hooki
   na woocommerce_before_cart/after_cart i before_checkout_form/
   after_checkout_form) daje kontekst .on-light (tokeny --btn-solid-*
   dzialaja bez zmian) + naglowek H1. Struktura formularzy/platnosci
   zostaje DOMYSLNA (D16pkt16: "domyslne szablony Woo w tokenach, bez custom
   override", ten sam wzorzec co /moje-konto/), tylko skin CSS - przepisanie
   logiki checkoutu (pola, bramki platnosci) jest poza zakresem i ryzykiem
   ktorego nie warto brac dla stron bez wlasnej makiety.
   ========================================================================== */
.woo-strona { padding-top: calc(var(--space-9) + 40px); padding-bottom: var(--space-8); }
.woo-strona__title { font-size: var(--fs-h1-podstrona); margin: 0 0 var(--space-6); }
.woo-koszyk-pusty { padding: var(--space-7) var(--space-6); background: var(--surface-paper); text-align: center; }
.woo-koszyk-pusty__tekst { margin: 0 0 var(--space-5); color: var(--text-on-light-muted); font-size: var(--fs-body); }
.woo-koszyk-pusty .button { display: inline-flex; }

/* Powiadomienia Woo (blad/sukces/info) - karta z akcentem po lewej zamiast domyslnej listy. */
.woo-strona ul.woocommerce-error,
.woo-strona ul.woocommerce-message,
.woo-strona ul.woocommerce-info,
.woo-strona .woocommerce-notices-wrapper .woocommerce-message,
.woo-strona .woocommerce-notices-wrapper .woocommerce-error,
.woo-strona .woocommerce-notices-wrapper .woocommerce-info {
  list-style: none; margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--surface-paper); border-left: 3px solid var(--accent-deep);
  font-size: var(--fs-small); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.woo-strona ul.woocommerce-error { border-left-color: #A33; }
.woo-strona .woocommerce-error a.button, .woo-strona .woocommerce-message a.button { margin: 0; }

/* Tabela koszyka i podglądu zamówienia (checkout #order_review), ten sam skin. */
.woo-strona table.shop_table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6);
}
.woo-strona table.shop_table th {
  text-align: left; font-family: var(--font-text); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-on-light-muted); border-bottom: 1px solid var(--line-on-light); padding: var(--space-3) var(--space-3);
}
.woo-strona table.shop_table td {
  padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--line-on-light); vertical-align: middle;
}
.woo-strona table.shop_table td.product-thumbnail img {
  width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line-on-light);
}
.woo-strona table.shop_table td.product-name a { color: var(--text-on-light); font-family: var(--font-display); font-size: 17px; text-decoration: none; }
.woo-strona table.shop_table td.product-name a:hover { color: var(--accent-deep); }
.woo-strona table.shop_table td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  color: var(--text-on-light-muted); text-decoration: none; font-size: 20px; line-height: 1; border: 1px solid var(--line-on-light);
}
.woo-strona table.shop_table td.product-remove a.remove:hover { color: #A33; border-color: #A33; }
.woo-strona table.shop_table tr.order-total th,
.woo-strona table.shop_table tr.order-total td { border-bottom: 0; padding-top: var(--space-5); font-family: var(--font-display); font-size: 20px; color: var(--accent-deep); }
.woo-strona .quantity input.qty {
  width: 56px; height: 40px; text-align: center; border: 1px solid var(--line-on-light); background: var(--surface-white);
  font-family: var(--font-text); font-size: var(--fs-body);
}

/* Kupon + "Aktualizuj koszyk", ten sam rzad co przycisk finalny. */
.woo-strona .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding-top: var(--space-4) !important; border-bottom: 0 !important; }
.woo-strona .coupon { display: flex; gap: var(--space-3); flex: 1 1 260px; }
.woo-strona .coupon input#coupon_code {
  flex: 1; height: var(--control-h-desktop); padding-inline: var(--space-4); border: 1px solid var(--line-on-light); background: var(--surface-white);
  font-family: var(--font-text); font-size: var(--fs-small);
}

/* Przyciski Woo (kupon/aktualizuj/przejdz do kasy/zloz zamowienie), wizualnie = .btn.btn--solid.
   Kontekst .on-light na .woo-strona rozwiazuje --btn-solid-bg/-fg bez zmian. */
.woo-strona .button,
.woo-strona #place_order,
.woo-strona input.button,
.woo-strona button.button,
.woo-strona a.button.alt,
.woo-strona button.button.alt,
.woo-strona input.button.alt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h-desktop); padding-inline: var(--space-6);
  font-family: var(--font-text); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-pill); border: 1px solid var(--btn-solid-bg); cursor: pointer;
  background: var(--btn-solid-bg); color: var(--btn-solid-fg); text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.woo-strona .button:hover, .woo-strona #place_order:hover,
.woo-strona a.button.alt:hover, .woo-strona button.button.alt:hover, .woo-strona input.button.alt:hover { background: var(--accent-ctx-hover, var(--gold-hover)); border-color: var(--accent-ctx-hover, var(--gold-hover)); transform: translateY(-2px); box-shadow: var(--shadow-karta); }
.woo-strona .button:disabled { opacity: .5; cursor: not-allowed; }

/* Cart totals (koszyk, box po prawej) i Order review payment (checkout). */
.woo-strona .cart-collaterals { display: flex; justify-content: flex-end; }
.woo-strona .cart_totals { width: min(420px, 100%); background: var(--surface-paper); padding: var(--space-6); }
.woo-strona .cart_totals h2 { font-size: 20px; margin: 0 0 var(--space-4); }
.woo-strona .cart_totals table.shop_table td, .woo-strona .cart_totals table.shop_table th { padding-inline: 0; }
.woo-strona .wc-proceed-to-checkout { margin-top: var(--space-5); }
.woo-strona .wc-proceed-to-checkout .checkout-button { width: 100%; }

/* Checkout: dane klienta (col2-set) + pola formularza, wg markupu domyslnego form-checkout.php. */
.woo-strona .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); margin-bottom: var(--space-7); }
@media (max-width: 900px) { .woo-strona .col2-set { grid-template-columns: 1fr; gap: var(--space-5); } }
.woo-strona .woocommerce-billing-fields h3,
.woo-strona .woocommerce-shipping-fields h3,
.woo-strona .woocommerce-additional-fields h3 { font-size: 18px; margin: 0 0 var(--space-4); }
.woo-strona .form-row { margin: 0 0 var(--space-4); }
.woo-strona .form-row label { display: block; font-size: 13px; color: var(--text-on-light-muted); margin-bottom: 6px; }
.woo-strona .form-row .required { color: var(--accent-deep); text-decoration: none; }
.woo-strona .form-row input.input-text,
.woo-strona .form-row select,
.woo-strona .form-row textarea {
  width: 100%; height: var(--control-h-desktop); padding-inline: var(--space-4);
  border: 1px solid var(--line-on-light); background: var(--surface-white);
  font-family: var(--font-text); font-size: var(--fs-body); color: var(--text-on-light);
}
.woo-strona .form-row textarea { height: auto; padding-block: var(--space-3); min-height: 100px; }
.woo-strona .form-row input.input-text:focus, .woo-strona .form-row select:focus, .woo-strona .form-row textarea:focus { outline: 2px solid var(--focus-on-light, var(--gold)); outline-offset: 2px; }
#order_review_heading { font-size: 20px; margin: 0 0 var(--space-4); }

/* Metody platnosci (BACS na razie jedyna, P24). */
.woo-strona ul.wc_payment_methods { list-style: none; margin: 0 0 var(--space-5); padding: 0; border: 1px solid var(--line-on-light); }
.woo-strona ul.wc_payment_methods li.wc_payment_method { padding: var(--space-4); border-bottom: 1px solid var(--line-on-light); }
.woo-strona ul.wc_payment_methods li.wc_payment_method:last-child { border-bottom: 0; }
.woo-strona ul.wc_payment_methods label { font-family: var(--font-text); font-weight: 600; }
.woo-strona .payment_box { margin-top: var(--space-3); padding: var(--space-4); background: var(--surface-paper); font-size: var(--fs-small); }
.woo-strona .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--space-5); font-size: var(--fs-small); }
.woo-strona .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; }
.woo-strona .place-order { padding-top: var(--space-4); border-top: 1px solid var(--line-on-light); }
.woo-strona #place_order { width: 100%; margin-top: var(--space-4); }

/* Podziekowanie po zamowieniu (wdroz-e8.2, 16.09.2026), pelny custom override. */
.woo-dziekujemy__inner { max-width: 640px; }
.woo-dziekujemy__lead { margin: var(--space-4) 0 var(--space-6); color: var(--text-on-light-muted); font-size: 17px; max-width: 52ch; }
.woo-dziekujemy__szczegoly {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  background: var(--surface-paper);
}
.woo-dziekujemy__szczegoly li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line-on-light);
  font-size: var(--fs-small);
}
.woo-dziekujemy__szczegoly li:last-child { border-bottom: 0; }
.woo-dziekujemy__szczegoly li span { color: var(--text-on-light-muted); }
.woo-dziekujemy__szczegoly li strong { font-family: var(--font-display); font-size: 17px; font-weight: 500; }
/* Instrukcje bramki platnosci (BACS: dane do przelewu, jedyna aktywna, P24) - markup rdzenia Woo, skin generyczny. */
.woo-dziekujemy h2 { font-size: 18px; margin: var(--space-6) 0 var(--space-4); }
.woo-dziekujemy table.order_details,
.woo-dziekujemy table.woocommerce-table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6); font-size: var(--fs-small);
}
.woo-dziekujemy table.order_details th, .woo-dziekujemy table.order_details td,
.woo-dziekujemy table.woocommerce-table th, .woo-dziekujemy table.woocommerce-table td {
  text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-on-light);
}
.woo-dziekujemy__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }