/* ─────────────────────────────────────────────────────────────
   Zaremba Academy Online — arkusz glowny
   ───────────────────────────────────────────────────────────── */

/* Paleta: wino #672336, biel i czern. Nazwy tokenow zostaly stare
   (navy/gold), zeby nie przepisywac 600 regul — znacza teraz:
   navy = czern, gold = wino.

   Promocje maja wlasny kolor (`--accent`): bursztyn. Nie konkuruje z winem,
   bo lezy po cieplej stronie, a na bieli widac go z drugiego konca pokoju —
   po to, zeby rabat albo pasek z ogloszeniem przyciagal wzrok, nie bedac
   kolejnym elementem w kolorze marki. */
:root {
  /* Czern — tekst, ciemne sekcje, stopka */
  --navy-900: #121212;
  --navy-800: #121212;
  --navy-700: #2e2e2e;
  --navy-600: #565656;

  /* Wino — kolor marki */
  --gold-500: #672336;
  --gold-600: #4e1a28;
  /* Rozjasnione wino na ciemne tla, gdzie #672336 zlewa sie z czernia */
  --gold-400: #e0b3c0;

  --text: #121212;
  --text-muted: #5f5f63;
  --text-invert: #ffffff;

  /* Promocje, rabaty, ogloszenia */
  --accent: #e0a42b;
  --accent-strong: #c8891f;
  --accent-ink: #1a1208;
  --accent-soft: #fdf3dd;

  --surface: #ffffff;
  --surface-alt: #faf8f5;
  --surface-sunken: #eae5dd;
  --border: #e5dfd6;
  --border-warm: #d9d1c5;

  /* Tlo strony to bardzo jasna szarosc, nie czysta biel. Przy bieli na bieli
     karty i jasne sekcje przestawaly sie od siebie odcinac i caly uklad
     wisial na samych ramkach. Roznica jest na tyle mala, ze strona dalej
     czyta sie jako biala. */
  /* Cieply krem z projektu sekcji powitalnej. Chlodna szarosc strony
     wygladala przy zdjeciu jak brak koloru, a nie jak decyzja. */
  --krem: #f3efe9;

  --page: #f3efe9;
  --page-admin: #f4f4f5;

  --success: #2f6b45;
  --success-bg: #e7f2ea;
  --danger: #a12a2a;
  --warning: #8a5e0c;
  --info: #2e6fd8;

  /* Zaokraglenia sa ledwie zaznaczone — maja zdejmowac ostrosc ciecia,
     a nie byc widocznym elementem stylu. Przy 8-12 px wszystko robilo sie
     miekkie i podobne do siebie; przy 2-4 px uklad trzymaja linie i kolor,
     a ksztalt przestaje zwracac na siebie uwage.

     `--radius-full` zostaje dla rzeczy z natury okraglych (awatary, ikony
     w kolku, liczniki). Plakietki i przelaczniki, ktore byly tabletkami
     tylko dla ozdoby, dostaja --radius-sm. */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(18, 18, 18, 0.08);
  --shadow: 0 4px 16px rgba(18, 18, 18, 0.08);
  --shadow-lg: 0 18px 48px rgba(18, 18, 18, 0.14);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --container: 1280px;
  --header-h: 72px;
}

/* ── Reset ───────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* Atrybut `hidden` znaczy „nie pokazuj” i musi wygrywac z kazda regula
   `display` komponentu. Domyslna regula przegladarki ma te sama wage co
   zwykly selektor klasy, wiec `.cos { display: grid }` ja przebijalo —
   element z `hidden` zostawal na ekranie. Przez to zakladki konta
   wyswietlaly sie wszystkie naraz, jedna pod druga. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  /* Kremowe tlo z projektu — biale zostaje tlem kart, nie strony. */
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Cormorant Garamond ma bardzo niska wysokosc x — 39 jednostek na 100 px
   wielkosci, przy 48 Georgii i 55 Intera. Przy tych samych rozmiarach co
   poprzedni krój naglowki czytaja sie o okolo jedna piata mniejsze, niz
   powinny, a przy tym sa wyraznie wezsze. Stad rozmiary podniesione o ~15%
   i nieco ciasniejsza interlinia, ktora temu krojowi sluzy. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  line-height: 1.15;
  font-weight: 700;
  color: var(--navy-900);
}

h1 { font-size: clamp(2.3rem, 5.7vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.72rem); }

/* Element docelowy linkow kotwicznych nie moze chowac sie pod sticky headerem. */
:target {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Widoczny focus dla nawigacji klawiatura */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Uklad ───────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Weższa kolumna dla stron zakupu. Musi byc klasa, a nie styl wpisany
   w jednym miejscu — inaczej stopka rozjezdza sie z trescia nad nia. */
.container--waski { max-width: 1040px; }

/* Odstep miedzy sekcjami. Przy 96 px gornej granicy strona glowna
   ciagnela sie w nieskonczonosc: przy osmiu sekcjach to blisko 1600 px
   samego powietrza. 64 px wystarcza, zeby bloki sie rozdzielaly. */
.section {
  padding-block: clamp(34px, 4vw, 56px);
}

/* Pasek bez wlasnej tresci — same kafelki kategorii pod hero. Pelna wysokosc
   sekcji robilaby z niego osobny rozdzial, a to tylko drogowskaz. */
.section--tight { padding-block: clamp(22px, 2.6vw, 34px); }

/* Biel na tle strony. Sama zmiana koloru wystarcza za granice sekcji —
   linia dochodzi dopiero tam, gdzie tlo sie nie zmienia (nizej). */
.section--alt {
  background: var(--surface);
}

/* Tam, gdzie tlo sie nie zmienia, granice sekcji wyznacza linia. Bez niej
   kolejne bloki na tym samym tle zlewaly sie w jedna plachte. */
.hero + .section:not(.section--alt),
.section:not(.section--alt) + .section:not(.section--alt),
.section--alt + .section--alt {
  border-top: 1px solid var(--border-warm);
}

/* Strona z naprzemiennymi pasami (patrz `pasuj()` w pages/home.js) rozdziela
   sekcje samym kolorem, wiec linie sa tam zbedne. Reguly sasiedztwa wyzej i
   tak nie policzylyby ich dobrze, bo `+` widzi takze sekcje ukryte. */
[data-pasy] .section { border-top: 0; }

.section__head {
  max-width: 680px;
  margin-bottom: 30px;
}

.section__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 12px;
}

.section__lead {
  font-size: 1.08rem;
  color: var(--text-muted);
  margin-top: 14px;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.stack > * + * { margin-top: 16px; }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pole pomocnicze formularzy — zdjete z widoku, ale nadal obecne w drzewie.
   NIE upraszczac do `display: none` ani `visibility: hidden`: oba zmieniaja
   sposob, w jaki jest wypelniane, i psuja obsluge formularza po stronie
   serwera. Jedyna dopuszczalna zmiana to przesuniecie poza ekran. */
.form-aux {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Przyciski ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  text-align: center;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }

.btn:disabled,
.btn[aria-busy='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--gold-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { background: var(--gold-600); box-shadow: var(--shadow); }

.btn--dark {
  background: var(--navy-800);
  color: var(--text-invert);
}
.btn--dark:hover:not(:disabled) { background: var(--navy-700); }

/* Obrys musi odcinac sie od kremowego tla strony. `--border` (#e5dfd6) na
   `--page` (#f3efe9) daje kontrast ok. 1,1:1 — przycisk praktycznie znikal
   obok wypelnionego sasiada. Obrys z atramentu daje ok. 3:1, czyli minimum
   WCAG dla elementow sterowania, a biale wypelnienie dodatkowo wycina ksztalt
   z kremu, wiec przycisk widac nawet zanim sie przeczyta napis. */
.btn--ghost {
  background: var(--surface);
  border-color: rgba(18, 18, 18, 0.45);
  color: var(--navy-800);
}
.btn--ghost:hover:not(:disabled) { border-color: var(--navy-800); background: var(--surface-alt); }

/* Przycisk glowny na ciemnej karcie — wypelniony biela, bo to jest akurat
   ten przycisk, w ktory ma sie klikac najczesciej. */
.btn--invert {
  background: var(--text-invert);
  color: var(--navy-900);
  border-color: var(--text-invert);
}

.btn--invert:hover:not(:disabled) { background: #fff; border-color: #fff; }

.btn--danger { background: var(--danger); color: #fff; }
.btn--sm { padding: 9px 16px; font-size: 0.86rem; }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ── Nagłowek ────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  /* Krem zamiast bieli: nad sekcja powitalna bialy pasek odcinal sie
     od tla widoczna krecha przez cala szerokosc ekranu. */
  background: rgba(243, 239, 233, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Pasek idzie przez cala szerokosc okna, nie przez kontener tresci.
   Na szerokim ekranie logo i menu siedzialy w srodkowych 1280 px, a po bokach
   zostawaly puste pasy. Odstep od krawedzi rosnie z ekranem, zeby tresc nie
   kleila sie do brzegu monitora. */
.header .container {
  max-width: none;
  padding-inline: clamp(20px, 2.6vw, 56px);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy-900);
  flex-shrink: 0;
}

/* Plik logo mial 32% wysokosci pustego marginesu, wiec przy `height: 40px`
   sam znak zajmowal 27 px i gubil sie w pasku. Po przycieciu pliku do samej
   tresci te same wartosci to juz caly znak — logo uroslo o polowe, a pasek
   naglowka zostal taki, jaki byl. Wysokosci na waskich ekranach sa dobrane
   tak, zeby SZEROKOSC logo nie przekroczyla tej sprzed zmiany: pasek na
   375 px miescil sie na stycznie i kazdy dodatkowy piksel wypchnalby
   strone w bok. */
.logo img { height: 42px; width: auto; }

/* W stopce logo nie konkuruje z menu, wiec moze byc wyrazniejsze. */
.footer .logo img { height: 54px; }

/* Pasek ogloszen nad menu — wlaczany z panelu. Zawsze niesie promocje albo
   premiere, wiec dostaje kolor akcentu: w winie bylby kolejnym elementem
   firmowym i wtapial sie w naglowek. */
.announce {
  display: block;
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
  padding: 9px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

a.announce:hover { background: var(--accent-strong); color: var(--accent-ink); }

/* Na ciemnym tle idzie osobny plik `logo-light.png`, a nie odwrocenie barw.
   `invert(1)` rozjasnialo napis, ale przy okazji przekrecalo burgundowa fale
   i slowo ONLINE w zielen — logo w stopce mialo inne kolory niz w naglowku.
   W jasnej wersji grafit jest zamieniony na biel, a barwne elementy zostaly
   dokladnie takie, jak w oryginale. */

.nav { display: flex; align-items: center; gap: 28px; }

/* Link do logowania doklejany do menu tylko na waskim ekranie — na desktopie
   stoi w pasku i powtarzanie go w nawigacji bylo by zbedne. */
.nav__auth { display: none; }

/* ── Rozwijane „Oferta" ──────────────────────────────────────
   Pozycja menu to link do calego katalogu plus osobny przycisk rozwijajacy
   rodzaje. Rozdzielone celowo: klikniecie w nazwe ma prowadzic do oferty,
   a nie tylko otwierac liste — takze z klawiatury. */

.nav__item { position: relative; display: flex; align-items: center; gap: 2px; }

.nav__toggle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
}

.nav__toggle svg { width: 14px; height: 14px; }
.nav__toggle:hover { color: var(--text); background: var(--surface-alt); }
.nav__toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 210px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 40;
}

.nav__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
}

.nav__menu a:hover { background: var(--surface-alt); }
.nav__menu a::after { display: none; }

/* Pierwsza pozycja to cala oferta — oddzielona od rodzajow. */
.nav__menu a:first-child {
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 4px;
  padding-bottom: 11px;
}

.nav__count {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--navy-700);
  position: relative;
  padding-block: 4px;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold-500);
  transition: width 0.2s ease;
}

.nav a:hover::after,
.nav a[aria-current='page']::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: 12px; }

.lang-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.lang-switch a {
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.lang-switch a[aria-current='true'] { background: var(--navy-800); color: #fff; }

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy-800);
  position: relative;
  transition: background 0.2s;
}

.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--navy-800);
  transition: transform 0.2s;
}

.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ── Menu uzytkownika ────────────────────────────────────── */

.user-menu { position: relative; }

.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
}

.user-menu__trigger:hover { background: var(--surface-alt); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Saldo w naglowku ─────────────────────────────────────────
   Plakietka pojawia sie tylko przy niezerowym saldzie. Pokazywanie „0 zł”
   kazdemu bylo by szumem, a ten, kto ma srodki, ma je widziec bez wchodzenia
   w konto — zwlaszcza w chwili, gdy cos kupuje. */

.user-menu__balance {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border-warm);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.user-menu__balance-row {
  display: flex !important;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.user-menu__balance-row strong {
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
}

.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
}

.user-menu__panel[data-open='true'] { display: block; }

.user-menu__panel a,
.user-menu__panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--navy-700);
}

.user-menu__panel a:hover,
.user-menu__panel button:hover { background: var(--surface-alt); }

.user-menu__divider { height: 1px; background: var(--border); margin: 6px 0; }

/* ── Hero ────────────────────────────────────────────────── */

/* Projekt nie ma ciemnego hero — cala strona stoi na kremowym tle,
   a kontrast buduje typografia, nie plama koloru. */
/* ── Sekcja powitalna ─────────────────────────────────────
   Kremowy panel z tekstem wchodzi skosem w zdjecie. Skos nalezy do tla,
   nie do obrazka: zdjecie podmienia sie w panelu administracyjnym i nie
   moze wymagac przyciecia pod konkretny ksztalt. */

.hero {
  position: relative;
  background: var(--krem);
  color: var(--text);
  overflow: hidden;
  min-height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 7vw, 88px);
}

/* Zdjecie zajmuje prawa czesc kadru i siega krawedzi ekranu. */
.hero__tlo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  z-index: 0;
}

.hero__media {
  display: block;
  width: 100%;
  height: 100%;
  --slot-height: 100%;
  /* Zdjecie jest pionowe, a kadr hero szerszy — `cover` przycina gore i dol.
     Przy srodku (50%) scinalo czubek glowy; 18% zostawia twarz w calosci
     i zabiera zamiast tego dolny skrawek, ktory i tak zaslania naroznik. */
  --slot-pos: 50% 18%;
}

.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Skos: kremowa plachta nasuwa sie na zdjecie. Rysujemy ja osobna warstwa,
   zeby `clip-path` nie przycinal tresci razem z tlem. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--krem);
  clip-path: polygon(0 0, 48% 0, 40% 100%, 0 100%);
  pointer-events: none;
}

/* Jedna kolumna: tekst po lewej, zdjecie jest tlem. Druga kolumna byla
   pod karte z opinia, ktora zaslaniala zbyt duzo zdjecia. */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.hero__tresc { max-width: 34rem; }

/* Wywodzik z kreska po prawej, jak w projekcie. */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__eyebrow::after {
  content: '';
  width: 64px;
  height: 1px;
  background: var(--navy-600);
  opacity: 0.45;
}

.hero h1 {
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 18px;
}

/* Druga linijka naglowka kursywa, w osobnym wierszu — to ona niesie obietnice. */
.hero h1 em {
  display: block;
  font-style: italic;
  color: var(--text);
}

.hero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: var(--navy-600);
  margin-top: 22px;
  max-width: 30ch;
}

.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Liczby rozdzielone cienka kreska, jak w projekcie. */
.hero__stats {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 38px);
}

.hero__stat + .hero__stat { border-left: 1px solid var(--border-warm); padding-left: clamp(20px, 3vw, 38px); }

.hero__stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}

.hero__stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Napisy przy krawedziach ──────────────────────────────── */

/* Pionowe motto przy prawej krawedzi. Czysta ozdoba, wiec `aria-hidden`
   w HTML-u — czytnik ekranu nie ma po co czytac go literami w pionie. */
.hero__motto {
  position: absolute;
  right: 18px;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  writing-mode: vertical-rl;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  /* Ten sam klopot co przy „Przewiń w dół”: napis lezy na zdjeciu, ktore da
     sie podmienic. Pigulka przy pionowym tekscie przy krawedzi wygladalaby
     jak pasek, wiec zostaje cien — napis jest dekoracyjny (`aria-hidden`),
     wiec wystarczy, zeby odcinal sie od jasnego tla. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.hero__stopka {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  padding-inline: 20px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero__haslo {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__haslo::before { content: ''; width: 2px; height: 22px; background: var(--gold-500); }
.hero__haslo::after { content: ''; width: clamp(60px, 12vw, 150px); height: 1px; background: var(--border-warm); }

/* Hero bez zdjecia: znika skos i wszystko, co na zdjeciu stalo. Tekst
   dostaje wtedy cala szerokosc, zamiast sasiadowac z pusta plama. */
.hero--solo::before { display: none; }
.hero--solo .hero__tlo { display: none; }
.hero--solo .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--solo .hero__tresc { max-width: 44rem; }
.hero--solo .hero__lead { max-width: 52ch; }
.hero--solo .hero__motto { display: none; }

/* Na tablecie skos robi sie zbyt stromy, a zdjecie zbyt waskie — zostaje
   podzial pionowy, bez ukosu. */
@media (max-width: 1100px) {
  .hero::before { clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%); }
  .hero__tlo { width: 54%; }
}

/* Na telefonie zdjecie idzie nad tekst jako pasmo, a opinia pod przyciski.
   Skos i pionowe napisy znikaja: przy tej szerokosci sa nieczytelne. */
@media (max-width: 860px) {
  .hero {
    min-height: 0;
    padding-block: 0 clamp(36px, 8vw, 56px);
  }

  .hero::before { display: none; }

  .hero__tlo {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(260px, 52vw, 380px);
    margin-bottom: clamp(28px, 6vw, 40px);
  }

  .hero__media { --_ratio: 4 / 3 !important; height: 100%; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__tresc { max-width: none; }
  .hero__lead { max-width: 46ch; }
  .hero__motto { display: none; }

  .hero__stopka { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__haslo::after { display: none; }
}

@media (max-width: 520px) {
  .hero__stats { gap: 16px; }
  .hero__stat + .hero__stat { padding-left: 16px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── Karty kursow ────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-sunken);
  overflow: hidden;
}

.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Rodzaj produktu na kafelku — po przeciwnej stronie niz „Polecany”,
   zeby obie plakietki mogly byc widoczne naraz. */
.card__type {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(18, 18, 18, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

.card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--gold-500);
  color: #fff;
}

.card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.card__title { font-size: 1.32rem; }

.card__summary {
  font-size: 0.92rem;
  color: var(--text-muted);
  /* Rowna wysokosc kafelkow niezaleznie od dlugosci opisu. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-top: 4px;
}

.card__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Stopka kafelka w katalogu: cena nad przyciskami.
   Przy ~290 px kolumny cena z przekresleniem i rabatem plus dwa przyciski
   nie mieszcza sie w jednym rzedzie. Zawijaly sie wtedy kazdy po swojemu —
   raz przyciski jeden pod drugim, raz rabat pod cena — i sasiadujace kafelki
   konczyly sie na roznych wysokosciach. Dwa rzedy wygladaja tak samo
   niezaleznie od tego, czy produkt ma rabat i jak dlugie sa etykiety. */
.card__foot--buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.card__actions {
  display: grid;
  /* Rowne polowki: „Do koszyka” i „Zobacz” maja wygladac jak para. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}

.card__actions .btn {
  width: 100%;
  white-space: nowrap;
}

.price { font-family: var(--font-serif); font-size: 1.61rem; font-weight: 700; color: var(--navy-900); }
.price__compare { font-size: 0.9rem; color: var(--text-muted); text-decoration: line-through; margin-left: 8px; font-family: var(--font-sans); font-weight: 400; }
.price--free { color: var(--success); }

/* Wysokosc rabatu liczbowo. Przekreslona cena mowi „bylo taniej”, ale dopiero
   „−25%” mowi ile — i to jest ta informacja, dla ktorej warto uzyc koloru
   akcentu. Jeden taki znak na kafelku, nie trzy. */
.price__off {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* ── Pasek postepu ───────────────────────────────────────── */

.progress {
  height: 6px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  border-radius: inherit;
  transition: width 0.4s ease;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ── Formularze ──────────────────────────────────────────── */

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: 6px;
}

.field .req { color: var(--danger); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  /* Kolor tekstu jawnie, a nie z dziedziczenia. Pole ma wlasne biale tlo,
     wiec w ciemnej sekcji dziedziczony bialy napis znikal — wpisany adres
     e-mail w newsletterze byl niewidoczny. */
  color: var(--text);
  font-size: 0.96rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); opacity: 1; }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(103, 35, 54, 0.16);
}

.input[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: var(--danger); }

.textarea { resize: vertical; min-height: 130px; }

/* Pusty komunikat nie zajmuje miejsca.
   Wczesniej `min-height: 1em` rezerwowalo wiersz pod KAZDYM polem, zeby
   formularz nie podskakiwal przy pojawieniu sie bledu. Cena byla za wysoka:
   kazde pole niosło pusty wiersz, przez co formularz wygladal, jakby miedzy
   polami wstawiono dodatkowe entery. Skok przy bledzie zdarza sie rzadko
   i dotyczy jednego pola — pusta przestrzen byla na kazdym ekranie. */
.field__error {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--danger);
  margin-top: 5px;
}

.field__error:empty { display: none; }

.field__hint { font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); margin-top: 5px; }

.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold-500); flex-shrink: 0; }

/* `display: flex` z reguly wyzej bije domyslne `display: none` atrybutu
   `hidden`. Bez tego „Zapamiętaj te dane” zostawalo widoczne mimo ukrycia
   i robilo pusty pasek pod polem wyboru faktury. */
.checkbox[hidden] { display: none; }

/* ── Zapis do newslettera ────────────────────────────────── */

/* Tlo newslettera ustala paskowanie sekcji, nie ta klasa — wlasne tlo
   wygrywalo z `.section--alt` i wybijalo dziure w naprzemiennym rytmie. */

.nl-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}

.nl-cover { margin: 0; }

.nl-cover img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: block;
}

.nl-text h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 3vw, 2.76rem);
  line-height: 1.12;
  margin-top: 10px;
}

.nl-text .section__lead { margin-top: 14px; text-align: left; }

.nl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-row .input { flex: 1 1 220px; }

.nl-consent { margin-top: 14px; font-size: 0.86rem; line-height: 1.5; color: var(--text-muted); }

.nl-msg { margin-top: 12px; font-size: 0.9rem; min-height: 1.2em; }
.nl-msg--ok { color: var(--success); }
.nl-msg--err { color: var(--danger); }

@media (max-width: 980px) {
  .nl-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; }
  .nl-form { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .nl-grid { grid-template-columns: 1fr; }
  .nl-cover { max-width: 180px; }
}

/* ── Cennik: pojedynczy produkt albo Pass ────────────────── */

.pass-toggle { display: flex; justify-content: center; margin-bottom: 36px; }

/* ── Strona Zaremba Pass ─────────────────────────────────────
   Uklad z inspiracji, ale w barwach serwisu: kremowe pasma na przemian
   z bialymi, jedno ciemne tam, gdzie pada argument o pieniadzach, i burgund
   na akcentach. Jednolita bez zalozona inspiracja czytalaby sie tu obco. */

.korzysci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 3vw, 40px);
}

.korzysc h3 { font-size: 1.12rem; margin: 0 0 8px; }

.korzysc p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-muted);
}

.korzysc__ikona {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--krem);
  color: var(--gold-500);
}

.korzysc__ikona svg { width: 24px; height: 24px; fill: currentColor; }

/* Czego Pass nie obejmuje — karty z ikona obok tekstu. Ograniczenie
   szerokosci jest po to, zeby pojedyncza karta nie rozciagala sie na cale
   pasmo; przy dwoch nadal mieszcza sie obok siebie. */
.wyjatki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 760px;
}

.wyjatek {
  display: flex;
  gap: 18px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.wyjatek h3 { font-size: 1.08rem; margin: 0 0 6px; }

.wyjatek p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.wyjatek__ikona {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--krem);
  color: var(--text-muted);
}

.wyjatek__ikona svg { width: 20px; height: 20px; fill: currentColor; }

/* Rachunek: kilka szkolen kontra abonament. */
.rachunek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  max-width: 940px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rachunek[hidden] { display: none; }

.rachunek__strona { padding: clamp(26px, 3vw, 38px); }

/* Strona z Passem wyrozniona burgundem — to ta, ktora polecamy. */
.rachunek__strona--pass {
  position: relative;
  background: var(--gold-500);
}

.rachunek__tytul {
  font-size: 1.24rem;
  font-weight: 500;
  margin: 0 0 18px;
  color: #fff;
}

.rachunek__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
}

.rachunek__lista li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  color: rgba(255, 255, 255, 0.76);
}

.rachunek__cena { white-space: nowrap; }

.rachunek__razem {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1rem;
}

.rachunek__razem strong { font-size: 1.16rem; }

/* Kolko „vs” na styku obu kolumn. */
.rachunek__kontra {
  align-self: center;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-inline: -26px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 1;
}

.rachunek__znacznik {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rachunek__plan { margin: -12px 0 14px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.66); }

.rachunek__przekreslone {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
}

.rachunek__kwota { margin: 4px 0 0; color: #fff; }
.rachunek__kwota strong { font-family: var(--font-serif); font-size: clamp(2.1rem, 4vw, 2.7rem); font-weight: 500; }
.rachunek__kwota span { font-size: 1rem; color: rgba(255, 255, 255, 0.72); }

.rachunek__zysk { margin: 12px 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.86); }

.rachunek__akcja { display: flex; justify-content: center; margin-top: 32px; }

/* Pytania na stronie Passa — ten sam komponent, tylko wezszy. */
.faq-pass { max-width: 820px; }

@media (max-width: 760px) {
  /* Dwie kolumny obok siebie schodza ponizej 300 px na strone — rachunek
     idzie wtedy w pion, a kolko „vs” laduje miedzy nimi. */
  .rachunek { grid-template-columns: minmax(0, 1fr); }

  .rachunek__kontra {
    justify-self: center;
    margin: -26px 0;
  }
}

/* ── Przelacznik segmentowy ──────────────────────────────────
   Wybor okresu rozliczeniowego byl wczesniej dwoma przyciskami w klasie,
   ktora istnieje tylko w arkuszu panelu — na stronie publicznej zostawal
   goly tekst. Tutaj jest wlasny komponent, widoczny jako przelacznik. */

.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
}

.seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.seg__btn:hover { color: var(--text); }

.seg__btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* Korzysc przy opcji rocznej — informacja, nie ozdoba, wiec zostaje
   czytelna takze wtedy, gdy segment nie jest wybrany. Kolor akcentu, bo to
   oszczednosc, a nie element nawigacji. */
.seg__tag {
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  max-width: 940px;
  margin: 0 auto;
}

.plan {
  position: relative;
  padding: 34px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.plan--dark {
  background: var(--navy-900);
  color: var(--text-invert);
  border-color: var(--navy-900);
}

/* „Najlepsza wartość” na ciemnej karcie — wino na czerni jest prawie
   niewidoczne, a to ma byc pierwsza rzecz, ktora widac w cenniku. */
.plan__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}

.plan--dark .plan__eyebrow { color: var(--gold-400); }

.plan__price { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; }

.plan__price strong {
  font-family: var(--font-serif);
  font-size: 3.33rem;
  font-weight: 400;
  line-height: 1;
}

.plan__price span { font-size: 0.9rem; color: var(--text-muted); }
.plan--dark .plan__price span { color: var(--gold-400); }

.plan__note { margin-top: 10px; font-size: 0.88rem; color: var(--text-muted); }
.plan--dark .plan__note { color: rgba(255, 255, 255, 0.66); }

.plan__list {
  list-style: none;
  padding: 24px 0 0;
  margin: 24px 0 28px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
  font-size: 0.94rem;
  /* Lista rosnie, przycisk zostaje przy dolnej krawedzi karty. */
  flex: 1;
}

.plan--dark .plan__list { border-top-color: rgba(255, 255, 255, 0.18); }
.plan__list li::before { content: '— '; color: var(--text-muted); }
.plan--dark .plan__list li::before { color: var(--gold-400); }

/* ── Strona produktu: ciemna belka i panel zakupu ────────────
   Tytul i fakty na czerni, panel zakupu wchodzi na belke z prawej i zostaje
   przyklejony przy przewijaniu. Czern robi tu robote, ktora na bialym tle
   musialaby robic ramka — oddziela oferte od reszty strony. */

.ph {
  background: var(--navy-900);
  color: #fff;
  padding-block: clamp(40px, 6vw, 64px);
}

.ph__inner { position: relative; }

/* Miejsce po prawej zostaje puste celowo — wchodzi w nie panel zakupu,
   ktory w kodzie stoi nizej, zeby na telefonie byl pod trescia. */
.ph__main { max-width: 640px; }

.ph__eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 14px;
}

.ph__title {
  font-family: var(--font-serif);
  font-size: clamp(2.18rem, 4vw, 3.33rem);
  line-height: 1.15;
  color: #fff;
}

.ph__lead {
  margin-top: 16px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
}

.ph__meta {
  margin-top: 14px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
}

.ph__facts {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
}

.ph__facts strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.95rem;
  color: var(--gold-400);
}

.ph__facts span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); }

/* Tresc pod belka. Ujemny margines wciaga panel zakupu na czern. */
.ph-body { padding-top: 0; }

.ph-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: 56px;
  align-items: start;
}

.ph-cols__main { padding-top: clamp(40px, 5vw, 64px); }

.buybox {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  margin-top: clamp(-240px, -18vw, -150px);
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.buybox__media { margin-bottom: 18px; }
.buybox__media:empty { display: none; }
.buybox__media image-slot,
.buybox__media .player-frame { border-radius: var(--radius); overflow: hidden; }

.buybox__price { margin-bottom: 16px; }
.buybox__price .price { font-size: 1.9rem; }

.buybox__perks {
  list-style: none;
  padding: 18px 0 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--navy-700);
}

@media (max-width: 1040px) {
  .ph-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ph-cols__main { padding-top: 0; order: 2; }

  /* Bez dwoch kolumn panel nie ma na co wchodzic — wraca pod belke
     jako zwykla karta nad trescia. */
  .buybox {
    position: static;
    margin: -40px 0 36px;
    order: 1;
  }
}

/* ── Produkty uzyte na nagraniu ──────────────────────────────
   Nie sprzedajemy ich u siebie: kazda pozycja prowadzi do sklepu, a licznik
   przejsc siedzi po stronie serwera. */

.used { margin: 52px 0 0; }
.used[hidden] { display: none; }

.used__title { font-family: var(--font-serif); font-size: 1.95rem; }
.used__lead { margin-top: 6px; color: var(--text-muted); font-size: 0.95rem; }

.used__grid { display: grid; gap: 12px; margin-top: 22px; }

.used__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.14s, box-shadow 0.14s;
}

.used__item:hover { border-color: var(--border-warm); box-shadow: var(--shadow-sm); }

.used__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}

.used__thumb img { width: 100%; height: 100%; object-fit: contain; }

.used__body { display: grid; gap: 2px; }

.used__brand {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.used__name { font-size: 1rem; }
.used__note { font-size: 0.87rem; color: var(--text-muted); line-height: 1.45; }

.used__buy { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.used__price { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .used__item { grid-template-columns: 52px minmax(0, 1fr); }
  .used__thumb { width: 52px; height: 52px; }
  .used__buy { grid-column: 1 / -1; justify-content: space-between; }
}

/* ── Strona produktu ─────────────────────────────────────────
   Fakty w jednej linii pod zajawka, program w skrocie i opis zlozony jak
   tekst do czytania, a nie jak notka techniczna. */

.prod-meta {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.learn {
  padding: 26px 28px;
  margin-bottom: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius);
}

.learn[hidden] { display: none; }

.learn__title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  margin-bottom: 18px;
}

.learn__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 28px;
}

.learn__list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--navy-700);
}

.learn__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--gold-500);
  border-bottom: 2px solid var(--gold-500);
  transform: rotate(-45deg);
}

/* Opis produktu to tekst do czytania. Szary na bieli i ciasny interlinia
   robily z niego notke ze specyfikacji. */
.prose {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--navy-700);
  max-width: 68ch;
}

.prose p + p { margin-top: 16px; }

@media (max-width: 680px) {
  .learn { padding: 20px 18px; }
}

/* ── Katalog: panel filtrow obok listy ───────────────────────
   Filtry stoja z boku i sa widoczne caly czas — razem z liczba wynikow przy
   kazdej opcji. Dzieki temu wiadomo, co ma sens, zanim sie kliknie. */

.catalog {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.catalog__side { position: sticky; top: calc(var(--header-h) + 18px); }

.filters__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.filters__title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.filters__clear {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fgroup { border-bottom: 1px solid var(--border); }

.fgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
}

.fgroup__head::-webkit-details-marker { display: none; }

/* Strzalka rysowana z ramki — bez dokladania pliku z ikona. */
.fgroup__head::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}

.fgroup[open] .fgroup__head::after { transform: rotate(-135deg) translate(-2px, -2px); }

.fgroup__body { padding-bottom: 14px; display: grid; gap: 2px; }

.fopt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 0;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
}

.fopt:hover { background: var(--surface-alt); }
.fopt input { width: 16px; height: 16px; accent-color: var(--gold-500); }
.fopt.is-active .fopt__label { font-weight: 600; }
.fopt__count { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.catalog__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.catalog__bar .input { max-width: 340px; }
.catalog__count { font-size: 0.9rem; color: var(--text-muted); }

/* Na waskim ekranie panel nie ma gdzie stanac z boku — idzie nad liste
   i zwija sie do jednej linii. */
@media (max-width: 900px) {
  .catalog { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .catalog__side {
    position: static;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 16px 10px;
    background: var(--surface);
  }

  .filters__head { padding-top: 12px; }
  .fgroup:last-child { border-bottom: none; }
}

/* ── Podglad produktu po najechaniu ──────────────────────────
   Panel obok kafelka z tym, czego na kafelku nie ma. Tylko dla myszy —
   wstawia go i pozycjonuje `card-preview.js`. */

.card-preview {
  position: fixed;
  z-index: 90;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: pv-in 0.13s ease-out;
}

.card-preview[hidden] { display: none; }

@keyframes pv-in {
  from { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .card-preview { animation: none; }
}

.pv__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--navy-900);
}

.pv__meta {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pv__summary {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--navy-700);
}

.pv__legend {
  margin-top: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.pv__list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 7px;
}

.pv__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--navy-700);
}

/* Ptaszek rysowany tlem, zeby nie wstawiac ikony przy kazdej pozycji. */
.pv__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--gold-500);
  border-bottom: 2px solid var(--gold-500);
  transform: rotate(-45deg);
}

.pv__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pv__foot .price { font-size: 1.18rem; }

/* ── Kafelki kategorii ───────────────────────────────────────
   Podzial oferty widoczny od razu, zamiast chowany w rozwijanym polu.
   Kafelek jest celem na tyle duzym, zeby trafic w niego kciukiem. */

/* Pasek na cala szerokosc kontenera. Waskie kafelki stloczone przy lewej
   krawedzi zostawialy pol sekcji puste i wygladaly jak niedokonczony element;
   rzad rownych pol czyta sie jak pasek nawigacji, ktorym jest. */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

/* Kafelki ze zdjeciem potrzebuja wiecej miejsca — przy 196 px kadr robil sie
   paskiem, na ktorym nic nie widac. */
.cat-tiles:has(.cat-tile--foto) {
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 16px;
}

/* Na duzym ekranie stala liczba kolumn zamiast `auto-fit`.
   Przy szesciu kafelkach automat upychal piec w rzedzie i zostawial szosty
   sam pod spodem — wygladalo to na pomylke, a nie na uklad. Trzy kolumny
   dziela szesc na dwa rowne rzedy i daja kadrom wiecej wysokosci. */
@media (min-width: 860px) {
  .cat-tiles:has(.cat-tile--foto) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Dokladnie cztery kafelki to jedyny przypadek, w ktorym trzy kolumny znowu
     zostawiaja sierote (3 + 1). Dwie kolumny dziela je rowno. */
  .cat-tiles:has(.cat-tile--foto):has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Znak po lewej, nazwa i licznik po prawej — uklad poziomy znosi duza
   szerokosc, bo tresc idzie wzdluz kafelka, a nie kuli sie w jego rogu. */
.cat-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding: 15px 18px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

.cat-tile:hover {
  border-color: var(--border-warm);
  box-shadow: var(--shadow-sm);
}

.cat-tile__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cat-tile__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--navy-700);
  transition: color 0.14s, background 0.14s;
}

.cat-tile__mark svg { width: 21px; height: 21px; }

/* ── Kafelek ze zdjeciem ─────────────────────────────────────
   Wariant ze strony glownej. Tam kafelki sa zapowiedzia dzialu, a nie
   przelacznikiem filtru, wiec zdjecie niesie wiecej niz ikona: od razu widac,
   czy za „Dokumenty” kryja sie papiery, czy nagrania. Na katalogu te same
   kafelki zostaja w wersji z ikona — patrz `category-tiles.js`. */

.cat-tile--foto {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.cat-tile__media {
  display: block;
  border-bottom: 1px solid var(--border);
}

.cat-tile__media image-slot { display: block; }

.cat-tile--foto .cat-tile__text { padding: 13px 16px 15px; }

/* Delikatne przyblizenie zdjecia — kafelek ma reagowac na kursor tak samo
   jak kafelek produktu, inaczej czyta sie jak martwy obrazek. */
.cat-tile__media image-slot { transition: transform 0.35s ease; }
.cat-tile--foto:hover .cat-tile__media image-slot { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .cat-tile__media image-slot,
  .cat-tile--foto:hover .cat-tile__media image-slot { transition: none; transform: none; }
}

/* Na telefonie poziomy uklad bylby za ciasny — wracamy do znaku nad tekstem
   i dwoch kolumn, zeby piec kategorii nie zrobilo z tego dlugiej listy. */
@media (max-width: 480px) {
  /* Dwie kolumny takze dla wariantu ze zdjeciem. Bez tego `auto-fit` z progiem
     228 px schodzi na telefonie do jednej kolumny i cztery kafelki po 257 px
     robia z paska nawigacyjnego ekran do przewijania. Selektor musi powtorzyc
     `:has`, bo inaczej przegrywa z nim na specyficznosci. */
  .cat-tiles,
  .cat-tiles:has(.cat-tile--foto) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cat-tile {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 14px 13px;
  }

  .cat-tile--foto { padding: 0; }

  .cat-tile__mark {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
  }

  .cat-tile--foto .cat-tile__text { padding: 11px 13px 13px; }
  .cat-tile--foto .cat-tile__name { font-size: 1rem; }
}

.cat-tile__name {
  font-family: var(--font-serif);
  font-size: 1.29rem;
  line-height: 1.2;
  color: var(--navy-900);
}

.cat-tile__count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Wybrana kategoria: burgundowa ramka i znak. Samo tlo nie wystarcza —
   roznica miedzy bielą a kremem jest za mala, zeby ja zauwazyc. */
.cat-tile.is-active {
  border-color: var(--gold-500);
  box-shadow: inset 0 0 0 1px var(--gold-500);
}

.cat-tile.is-active .cat-tile__mark {
  background: var(--gold-500);
  color: #fff;
}

/* ── Lista zalet ─────────────────────────────────────────────
   Cztery akapity bez zadnego oparcia wygladaly jak notatka. Linia nad kazda
   pozycja daje im rytm — ten sam zabieg co w sekcji z opiniami. */

/* ── Zamkniecie strony ───────────────────────────────────────
   Ostatnia zachęta byla kolejnym kremowym blokiem w rzedzie osmiu i ginela
   tuz nad stopka. Jako wydzielony panel konczy strone zamiast ja urywac. */

/* ── Opinie ──────────────────────────────────────────────── */

/* ── Opinie ──────────────────────────────────────────────────
   Jedna opinia naraz, na szeroko: zdjecie kursu obok cytatu. Siatka trzech
   krotkich cytatow obok siebie czytala sie jak lista sloganow — tutaj kazda
   opinia ma miejsce na konkret, a karuzela zostawia decyzje czytelnikowi,
   ile ich przeczyta. */

.rev-intro {
  max-width: 62ch;
  margin: 0 auto 38px;
  text-align: center;
}

.rev-intro h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin-top: 8px;
}

.rev-intro .section__lead { margin-inline: auto; }

/* Ocena zbiorcza: gwiazdki, srednia, kreska, liczba opinii. */
.rev-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.rev-score[hidden] { display: none; }

.rev-score__stars {
  color: var(--gold-500);
  letter-spacing: 4px;
  font-size: 1.15rem;
}

.rev-score strong {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 400;
  color: var(--navy-900);
}

.rev-score__sep {
  width: 1px;
  align-self: stretch;
  background: var(--border-warm);
}

.rev-score__count {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-muted);
  text-align: left;
}

.rev-score__count strong { font-family: var(--font-sans); font-size: 0.86rem; font-weight: 700; }

/* ── Karuzela ─────────────────────────────────────────────── */

.rev-carousel { position: relative; }

/* Przewijanie nalezy do CSS — bez skryptu sekcja dalej dziala jako pasek,
   ktory da sie przesunac palcem albo gladzikiem. */
/* Jedna opinia na raz, na calej szerokosci toru.
   `1fr` liczylo sie od szerokosci toru, wiec grid upychal wszystkie karty
   obok siebie: przy trzech opiniach kolumna tekstu miala 160 px i cytat
   lamal sie po dwa slowa. Karuzela ma przewijac, a nie sciskac. */
.rev-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Miejsce na cien kart, zeby nie byl przyciety przy przewijaniu. */
  padding: 6px 2px 10px;
}

.rev-track::-webkit-scrollbar { display: none; }

.rev {
  scroll-snap-align: start;
  display: grid;
  /* Zdjecie zajmuje niecala jedna trzecia — reszta idzie na tekst, bo to
     on jest tu tresca. Dolna granica wysokosci pilnuje, zeby krotka opinia
     nie zrobila ze zdjecia paska. */
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  min-height: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Zdjecie wypelnia kolumne na cala wysokosc karty, ktora wyznacza tekst obok.
   Samo `--slot-height: 100%` nie wystarcza: wysokosc procentowa liczona od
   rodzica o wysokosci `auto` jest nierozstrzygalna, wiec przegladarka wracala
   do proporcji 3:4 i to zdjecie narzucalo wysokosc karty — 365 px szerokosci
   dawalo 487 px wysokosci, a tekst musial sie do tego dociagnac. Wyjecie slotu
   z ukladu (`absolute`) odbiera mu wplyw na wysokosc rzedu. */
.rev__media { position: relative; }

.rev__media image-slot {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  --slot-height: 100%;
}

.rev__body { padding: 40px 46px; display: flex; flex-direction: column; }

.rev__stars { color: var(--gold-500); letter-spacing: 3px; font-size: 0.9rem; }

/* Dlugosc wiersza, nie szerokosc kolumny, decyduje o tym, czy tekst da sie
   czytac. Na pelnej szerokosci karty wiersz mialby ponad 90 znakow. */
.rev__quote {
  margin: 16px 0 0;
  max-width: 46ch;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.9vw, 1.95rem);
  font-weight: 400;
  line-height: 1.34;
  color: var(--navy-900);
}

/* Karty stoja w jednym rzedzie siatki, wiec wszystkie rosna do najwyzszej.
   Bez ograniczenia jedna rozwlekla opinia rozciagala pozostale i zostawiala
   w nich pustke miedzy cytatem a podpisem. Cztery wiersze wyrownuja karty,
   a kto chce calosc, wchodzi na strone kursu. */
.rev__more {
  margin: 16px 0 0;
  max-width: 58ch;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rev__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

.rev__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-800);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.rev__avatar img { width: 100%; height: 100%; object-fit: cover; }

.rev__who { display: grid; gap: 2px; min-width: 0; }
.rev__who strong { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; }
.rev__who span { font-size: 0.8rem; color: var(--text-muted); }

/* Plakietka z nazwa kursu — zarazem odnosnik do niego. */
.rev__tag {
  margin-left: auto;
  flex: none;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: var(--gold-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: background 0.14s;
}

.rev__tag:hover { background: var(--gold-600); color: #fff; }

/* ── Strzalki i kropki ────────────────────────────────────── */

.rev-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy-900);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.14s, color 0.14s, opacity 0.14s;
}

.rev-nav:hover:not(:disabled) { background: var(--navy-900); color: #fff; }
.rev-nav:disabled { opacity: 0.35; cursor: default; }
.rev-nav[hidden] { display: none; }

/* Strzalka siedzi dokladnie na krawedzi karuzeli. Przy -23 px wychodzila
   3 px poza kontener, ktory ma 20 px marginesu — i cala strona dawala sie
   przewinac w bok o te trzy piksele. */
.rev-nav--prev { left: -20px; }
.rev-nav--next { right: -20px; }

.rev-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
}

.rev-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-warm);
  cursor: pointer;
  transition: background 0.14s, transform 0.14s;
}

.rev-dot:hover { background: var(--navy-600); }
.rev-dot.is-active { background: var(--gold-500); transform: scale(1.25); }

/* Na waskim ekranie zdjecie idzie nad tekst, a strzalki pod karuzele —
   przy krawedziach ekranu nie bylo by dla nich miejsca. */
@media (max-width: 860px) {
  .rev { grid-template-columns: minmax(0, 1fr); }
  /* Zdjecie nad tekstem wraca do ukladu i do plaskich proporcji — pionowy
     kadr 3:4 mial na telefonie 439 px i spychal cytat pod krawedz ekranu.
     `!important` jest tu konieczne: proporcje ustawia sam komponent stylem
     liniowym (`image-slot.js`), a tego z arkusza inaczej sie nie przebije. */
  .rev__media image-slot {
    position: static;
    height: auto;
    --slot-height: auto;
    --_ratio: 16 / 9 !important;
  }
  .rev__body { padding: 26px 24px; }
  .rev-nav { display: none; }
}

@media (max-width: 560px) {
  .rev__foot { flex-wrap: wrap; }
  .rev__tag { margin-left: 56px; }
}

/* ── Koszyk ──────────────────────────────────────────────── */

.cart-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s;
}

.cart-link:hover { border-color: var(--navy-600); }
.cart-link--full { border-color: var(--gold-500); }

/* Rysowana ikona zamiast emoji — emoji ma wlasny, kolorowy styl systemowy,
   ktory nie ma nic wspolnego z reszta serwisu. */
.cart-link__icon { width: 19px; height: 19px; color: var(--navy-800); }
.cart-link:hover .cart-link__icon { color: var(--gold-600); }
.cart-link--full .cart-link__icon { color: var(--gold-600); }

/* Licznik wychodzi poza obrys przycisku — ma byc widoczny kątem oka. */
.cart-link__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--gold-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

.cart-cross {
  grid-column: 1 / -1;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--border-warm);
}

.cart-cross h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.73rem;
  margin-bottom: 22px;
}

.cart-list { display: grid; gap: 12px; }

.cart-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.cart-row__thumb {
  width: 84px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}

.cart-row__thumb img,
.cart-row__thumb image-slot { width: 100%; height: 100%; object-fit: cover; }

.cart-row__title { font-weight: 600; display: block; }
.cart-row__meta { font-size: 0.84rem; color: var(--text-muted); margin-top: 3px; }
.cart-row__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.cart-summary {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 16px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 600;
}

.cart-total strong { font-family: var(--font-serif); font-size: 1.84rem; font-weight: 400; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}

@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .cart-row__thumb { width: 64px; }
}

/* ── Dane do faktury ─────────────────────────────────────── */

.bl-legend {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: 8px;
}

.bl-choice { display: flex; gap: 20px; flex-wrap: wrap; }
.bl-choice .checkbox { font-size: 0.92rem; }

/* Wydzielone pudelko w kolumnie zakupu — widac, ze to osobna decyzja. */
.bl-box {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.bl-toggle { font-size: 0.9rem; line-height: 1.45; }

.bl-fields { margin-top: 14px; }
.bl-fields .field { margin-bottom: 14px; }
.bl-fields .input { font-size: 0.92rem; }

/* Kolumna zakupu ma ok. 220 px, a `.grid--2` trzyma w sobie slupki po 300 px
   i wychodzilaby poza jej obrys. W tym miejscu pola ida jedno pod drugim. */
.bl-fields .grid--2 { grid-template-columns: 1fr; }

.bl-remember {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* ── Komunikaty ──────────────────────────────────────────── */

.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  border-left: 4px solid;
  margin-bottom: 20px;
}

.alert--error   { background: #fef2f2; border-color: var(--danger);  color: #991b1b; }
.alert--success { background: #f0fdf4; border-color: var(--success); color: #166534; }
.alert--info    { background: #eff6ff; border-color: var(--info);    color: #1e40af; }
.alert--warning { background: #fffbeb; border-color: var(--warning); color: #92400e; }
.alert[hidden]  { display: none; }

.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 48px));
}

.toast {
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--navy-800);
  color: #fff;
  font-size: 0.92rem;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.25s ease;
  border-left: 4px solid var(--gold-500);
}

.toast--error   { border-left-color: var(--danger); }
.toast--success { border-left-color: var(--success); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Stany pustе i ladowanie ─────────────────────────────── */

.empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}

.empty h3 { color: var(--navy-800); margin-bottom: 10px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, #f8fafc 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton-card { height: 340px; border-radius: var(--radius); }

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Stopka ──────────────────────────────────────────────── */

.footer {
  background: var(--navy-900);
  color: rgba(248, 250, 252, 0.72);
  padding-block: 56px 28px;
  font-size: 0.9rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.footer h4 {
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.footer ul { list-style: none; padding: 0; }
.footer li + li { margin-top: 10px; }
.footer a:hover { color: var(--gold-400); }

/* Dane firmy pod logo — z Ustawien → Firma. Kazda pozycja w osobnym
   wierszu, bo to adres, a nie zdanie; `address` kursywi tekst domyslnie,
   wiec to zdejmujemy. */
.firma {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.6);
}

.firma span:first-child { color: rgba(248, 250, 252, 0.82); }
.firma__kontakt { margin-top: 6px; }
.firma a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.firma a:hover { color: #fff; }

/* Profile w serwisach spolecznosciowych. Blok jest ukryty, dopoki w panelu
   nie ma zadnego adresu — pusty rzad kwadratow wygladalby jak bledy. */
.social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.social__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.8);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.social__link svg { width: 18px; height: 18px; fill: currentColor; }

.social__link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
}

/* ── Odtwarzacz lekcji ───────────────────────────────────── */

.player-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: calc(100vh - var(--header-h));
}

.player-main { background: #000; display: flex; flex-direction: column; }

.player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

/**
 * Kadr w odtwarzaczu ma sie MIESCIC na ekranie razem ze sterowaniem.
 *
 * Sam `aspect-ratio` na kolumnie `1fr` dawal przy szerokim oknie film
 * wysoki na ~870 px: „Poprzednia / Oznacz jako ukonczona / Nastepna”
 * ladowalo pod krawedzia ekranu i trzeba bylo przewijac, zeby przejsc
 * do kolejnej lekcji.
 *
 * `min()` bierze to, co najmniejsze z trzech: szerokosci kolumny, rozsadnego
 * maksimum i szerokosci wynikajacej z WOLNEJ WYSOKOSCI przy proporcji 16:9.
 * Odjete 190 px to pasek nawigacji lekcji plus zapas na skraj panelu z opisem,
 * zeby bylo widac, ze pod spodem cos jeszcze jest.
 *
 * Pelny ekran dziala jak dzial — iframe ma `allowfullscreen`, a w nim wlasny
 * przycisk odtwarzacza.
 */
.player-main .player-frame {
  width: min(100%, 1100px, calc((100vh - var(--header-h) - 190px) * 16 / 9));
  margin-inline: auto;
}

.player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player-info { padding: 28px 32px; background: var(--surface); flex: 1; }

.player-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 32px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.curriculum {
  background: var(--surface-alt);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  max-height: calc(100vh - var(--header-h));
}

.curriculum__head {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}

.curriculum__module { border-bottom: 1px solid var(--border); }

.curriculum__module-title {
  padding: 14px 20px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--surface-sunken);
}

.lesson-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 13px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(226, 229, 234, 0.6);
  transition: background 0.15s;
}

.lesson-item:hover { background: #fff; }
.lesson-item[aria-current='true'] { background: #fff; border-left: 3px solid var(--gold-500); padding-left: 17px; }
.lesson-item[data-locked='true'] { opacity: 0.55; cursor: not-allowed; }

.lesson-item__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}

.lesson-item[data-completed='true'] .lesson-item__icon {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.lesson-item__title { font-size: 0.9rem; font-weight: 500; line-height: 1.4; }
.lesson-item__meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }

/* ── Program kursu (strona sprzedazowa) ──────────────────── */

.accordion__item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }

.accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  text-align: left;
  font-weight: 600;
  background: var(--surface);
}

.accordion__trigger:hover { background: var(--surface-alt); }
.accordion__trigger::after { content: '+'; font-size: 1.3rem; color: var(--gold-500); flex-shrink: 0; }
.accordion__trigger[aria-expanded='true']::after { content: '−'; }

.accordion__panel { padding: 0 22px 18px; border-top: 1px solid var(--border); }
.accordion__panel[hidden] { display: none; }

/* ── Tabela ──────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.table th {
  text-align: left;
  padding: 13px 16px;
  background: var(--surface-alt);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

/* Wyrownanie kolumny musi zlapac takze naglowek. `.table th` ma dwa czlony
   (0,1,1), wiec samo `.right` (0,1,0) przegrywalo i naglowek zostawal przy
   lewej, podczas gdy liczby pod nim szly w prawo. */
.table th.right,
.table td.right { text-align: right; }

/* Zdanie pod planami: ile kosztowalaby ta sama oferta kupiona po kolei.
   To jedyny twardy argument w tej sekcji, wiec stoi osobno i wysrodkowane. */
.plans__worth {
  max-width: 62ch;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.96rem;
  color: var(--text-muted);
}

.plans__worth[hidden] { display: none; }

/* ── Kroki zakupu ────────────────────────────────────────────
   Koszyk → dane → platnosc. Pokazuje, ile jeszcze zostalo, zeby przejscie
   do kasy nie wygladalo jak skok w nieznane. */

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--text-muted);
  counter-reset: krok;
}

.steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  counter-increment: krok;
}

.steps__item::before {
  content: counter(krok);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 700;
}

.steps__item a { color: inherit; }
.steps__item a:hover { color: var(--gold-600); }

.steps__item.is-done::before {
  content: '✓';
  background: var(--surface-sunken);
  color: var(--navy-700);
}

.steps__item.is-current {
  color: var(--navy-900);
  font-weight: 600;
}

.steps__item.is-current::before {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #fff;
}

/* ── Karty na stronie kasy ────────────────────────────────── */

.co-card {
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.co-card[hidden] { display: none; }

.co-card__title {
  margin: 0 0 4px;
  font-size: 1.27rem;
}

.co-card__hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* Odstep dopiero przed trescia, zeby sam podtytul nie odsuwal sie od tytulu. */
.co-card__hint + * { margin-top: 18px; }

/* W karcie kasy ramka faktury jest ostatnia — jej wlasny dolny margines
   zostawialby pod nia pusty pasek. */
.co-card .bl-box { margin-bottom: 0; }

.co-who {
  margin: 14px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
}

@media (max-width: 560px) {
  .co-card { padding: 20px 18px; }
}

/* ── Podsumowanie zamowienia na stronie kasy ─────────────── */

.sum-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border);
}

.sum-row:last-child { border-bottom: 0; }
.sum-row[hidden] { display: none; }
.sum-row > span { color: var(--text-muted); }

/* Pasek nad katalogiem zawezonym do zawartosci abonamentu. */
.catalog__pass {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Rozbicie kwoty na netto i VAT pod suma. Drobne, bo to informacja
   dla kupujacego na firme — nie ma konkurowac z kwota do zaplaty. */
.vat-split {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.vat-split[hidden] { display: none; }

.vat-split > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.vat-split > div[hidden] { display: none; }
.vat-split dt { margin: 0; }
.vat-split dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Przelacznik salda w podsumowaniu koszyka. */
.cart-balance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 13px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
}

.cart-balance[hidden] { display: none; }
.cart-balance input { margin-top: 2px; flex: none; }

.table th.center,
.table td.center { text-align: center; }

.table td { padding: 13px 16px; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-alt); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge--success { background: #dcfce7; color: #166534; }
.badge--danger  { background: #fee2e2; color: #991b1b; }
.badge--warning { background: #fef3c7; color: #92400e; }
.badge--info    { background: #dbeafe; color: #1e40af; }
.badge--muted   { background: var(--surface-sunken); color: var(--text-muted); }

/* ── Strony autoryzacji ──────────────────────────────────── */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-aside {
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  color: var(--text-invert);
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Logo u gory, tresc w pionie na srodku, stopka na dole — panel wypelnia
   swoja polowe ekranu zamiast zbierac sie w jednym pasie. */
.auth-aside__logo { flex: none; }
/* Tresc srodkuje sie w tym, co zostaje miedzy logo a stopka. */
.auth-aside__body { margin: auto 0; padding: 40px 0; }

.auth-aside__eyebrow {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 12px;
}

.auth-aside h2 { color: #fff; max-width: 16ch; }
.auth-aside p { color: rgba(248, 250, 252, 0.78); margin-top: 18px; max-width: 42ch; }

.auth-perks {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  gap: 11px;
  max-width: 40ch;
}

.auth-perks li {
  position: relative;
  padding-left: 28px;
  color: rgba(248, 250, 252, 0.86);
  font-size: 0.93rem;
}

/* Znacznik rysowany w CSS, nie znakiem w tresci — lista czytana na glos
   nie ma wymawiac „ptaszek” przy kazdej pozycji. */
.auth-perks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gold-500);
  border-bottom: 2px solid var(--gold-500);
  rotate: -45deg;
}

.auth-aside__foot {
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(248, 250, 252, 0.16);
  font-size: 0.86rem;
  color: rgba(248, 250, 252, 0.6);
}

.auth-aside__foot a { color: rgba(248, 250, 252, 0.9); text-decoration: underline; }

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--surface-alt);
}

/* Formularz stal wczesniej wprost na tle strony i wygladal jak szkic.
   Biala plyta oddziela go od tla i daje mu srodek ciezkosci. */
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 40px 38px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.auth-card h1 { font-size: 1.9rem; margin-bottom: 8px; }
.auth-card__sub { color: var(--text-muted); margin-bottom: 28px; }

.auth-card__back {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.auth-card__back:hover { color: var(--navy-900); }

.auth-card__foot {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-muted);
}

.auth-card__foot a { color: var(--gold-600); font-weight: 600; }

/* Etykieta i „nie pamiętam hasła” w jednym rzedzie nad polem. */
.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field__head label { margin-bottom: 7px; }

.field__link {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gold-600);
  white-space: nowrap;
}

.field__ok {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--success);
}

.field__ok[hidden] { display: none; }

/* ── Pole hasła: podgląd, Caps Lock, siła ──────────────────── */

.pwd { position: relative; display: block; }

/* Miejsce na przycisk — bez tego dlugie haslo wchodzi pod ikonę. */
.pwd .input { padding-right: 46px; }

.pwd__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.pwd__toggle:hover { color: var(--navy-900); background: var(--surface-sunken); }
.pwd__toggle svg { width: 19px; height: 19px; }

.pwd-caps {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--warning);
}

.pwd-caps[hidden] { display: none; }

.pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.pwd-strength[hidden] { display: none; }

.pwd-meter {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  overflow: hidden;
}

.pwd-meter i {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--danger);
  transition: width 0.2s ease, background 0.2s ease;
}

.pwd-meter__bar--1 { background: #d97706; }
.pwd-meter__bar--2 { background: #ca8a04; }
.pwd-meter__bar--3 { background: var(--success); }

.pwd-meter__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 8ch;
  text-align: right;
}

.input--invalid { border-color: var(--danger); }

/* ── Responsywnosc ───────────────────────────────────────── */

@media (max-width: 1100px) {
  .player-layout { grid-template-columns: 1fr; }
  .curriculum { border-left: none; border-top: 1px solid var(--border); max-height: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

/* Tablet: pasek jest jeszcze w wersji „desktop" (bez hamburgera), ale miejsca
   ma juz niewiele. Angielskie etykiety sa dluzsze od polskich i przy 768 px
   naglowek wychodzil poza ekran — cala strona dawala sie przewijac w bok.
   Zamiast zwijac nawigacje wczesniej, odbieramy kilka pikseli odstepom. */
@media (min-width: 761px) and (max-width: 940px) {
  .nav { gap: 16px; }
  .header__actions { gap: 8px; }
  .logo img { height: 30px; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }

  .burger { display: flex; }

  /* Menu wysuwa sie spod naglowka. Kotwiczymy je do naglowka (`top: 100%`),
     a nie do okna: nad naglowkiem bywa pasek ogloszeniowy i przy mocowaniu
     do okna zamkniete menu zaslanialo go swoim dolnym skrajem. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;

    /* `visibility` gwarantuje, ze zamknietego menu nie da sie zobaczyc ani
       zlapac kursorem, niezaleznie od jego wysokosci. Zmienia sie dopiero
       po animacji, wiec zamykanie nadal jest plynne. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .nav[data-open='true'] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }

  .nav a { padding: 14px 12px; border-radius: var(--radius-sm); }
  .nav a:hover { background: var(--surface-alt); }
  .nav a::after { display: none; }

  .header__actions .btn--ghost { display: none; }

  /* Wejscie do konta, ktorego w pasku juz nie ma. */
  .nav__auth {
    display: block;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 16px;
    font-weight: 600;
  }

  /* Imie przy awatarze rozpychalo naglowek poza szerokosc ekranu i cala
     strona dawala sie przewijac w bok. Zostaje sam awatar — nazwisko
     i tak jest w menu po jego kliknieciu. */
  .user-menu__name { display: none; }
  .user-menu__trigger { padding: 4px; }

  .hero__stats { gap: 28px; }
  .hero__stat strong { font-size: 1.6rem; }

  /* Odnosniki w stopce mialy 19 px wysokosci i lezaly blisko siebie —
     na telefonie trafienie w konkretny bylo kwestia szczescia. */
  .footer li + li { margin-top: 2px; }
  .footer li a { display: inline-block; padding-block: 10px; }

  /* „Oferta" w menu mobilnym: link na calej szerokosci, przycisk rozwijania
     po prawej, a rodzaje wysuwaja sie pod spodem zamiast nad trescia. */
  .nav__item { flex-wrap: wrap; justify-content: space-between; }
  .nav__item > a { flex: 1; }

  .nav__toggle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .nav__menu {
    position: static;
    width: 100%;
    order: 3;
    margin: 2px 0 6px 12px;
    padding: 4px;
    box-shadow: none;
    background: var(--surface-alt);
  }

  .nav__menu a { padding: 11px 12px; }

  /* Przelacznik jezyka trafia do menu (przenosi go initHeader), wiec dostaje
     wlasne miejsce pod linkami i wiekszy obszar dotkniecia. */
  .nav .lang-switch {
    align-self: flex-start;
    margin: 10px 12px 4px;
  }

  .lang-switch a { padding: 9px 16px; }

  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .player-info,
  .player-nav { padding-inline: 20px; }

  .toast-stack { left: 16px; right: 16px; bottom: 16px; max-width: none; }

  .section { padding-block: 48px; }
}

@media (max-width: 420px) {
  .btn { width: 100%; }
  .btn--sm { width: auto; }
  .hero__actions { flex-direction: column; }

  /* Wariant `--buy` jest siatka i ma juz wlasny uklad dwoch rzedow —
     `align-items: stretch` rozciagnelo by w nim cene na cala wysokosc. */
  .card__foot:not(.card__foot--buy) { flex-direction: column; align-items: stretch; }

  /* Naglowek dla niezalogowanego goscia nie miescil sie na 375 px: logo 126 px,
     koszyk, „Zalóż konto" i hamburger dawaly 384 px, wiec cala strona dawala
     sie przewijac w bok. Mniejsze logo i ciasniejsze odstepy mieszcza komplet. */
  .logo img { height: 26px; }
  .header__actions { gap: 8px; }
}

/* Najwezsze telefony (320 px). Pasek musi sie zmiescic bez przewijania
   w bok, a jedyne, co mozna tu jeszcze oddac, to rozmiar. */
@media (max-width: 360px) {
  .logo img { height: 22px; }
  .header__actions { gap: 6px; }
  .header__actions .btn--sm { padding: 7px 11px; font-size: 0.8rem; }
  .container { padding-inline: 16px; }
}

/* Uzytkownicy z ustawieniem "ogranicz ruch" nie powinni dostawac animacji. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .header, .footer, .btn, .nav { display: none !important; }
  body { background: #fff; }
}

/* ── Biblioteka: grupy pozycji ─────────────────────────────── */

/* Kursy i pliki stoja w osobnych grupach, bo rzadzi nimi co innego:
   kurs ma postep, plik ma liczbe stron. W jednej siatce e-book wygladal
   jak kurs, ktorego nikt nie zaczal. */
/* ── Moja biblioteka ──────────────────────────────────────── */

/* Naglowek i pasek wznowienia stoja razem, wiec sekcja nie moze dokladac
   swojego dolnego odstepu — inaczej miedzy paskiem a lista robi sie dziura. */
.lib-naglowek { padding-bottom: 0; }

.lib-naglowek__rzad {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.lib-naglowek h1 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin: 0; }

/* Liczby zamiast czterech kafelkow ze statystykami. */
.lib-meta {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.lib-meta:empty { display: none; }

/* Pasek wznowienia — najwazniejszy element tej strony, wiec jako jedyny
   dostaje ciemne tlo i pelna szerokosc. */
.wznow {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 28px;
  padding: 14px 20px 14px 14px;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wznow:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.wznow[hidden] { display: none; }

.wznow__okladka {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.wznow__okladka img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wznow__zastepcza {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-serif);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

.wznow__tresc { display: block; min-width: 0; }

.wznow__etykieta {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.wznow__lekcja {
  display: block;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
}

.wznow__kurs {
  display: block;
  margin-top: 4px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.62);
}

.wznow__pasek {
  display: block;
  margin-top: 12px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.wznow__pasek > span {
  display: block;
  height: 100%;
  background: var(--gold-400);
  border-radius: inherit;
}

/* To nie jest przycisk, tylko fragment odnosnika — caly pasek jest klikalny,
   wiec zagniezdzony `button` bylby bledem w znaczniku. */
.wznow__akcja { white-space: nowrap; pointer-events: none; }

.lib-filtry { margin-bottom: 24px; }

.lib-pusto {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Karta kursu w bibliotece. */
.lib-karta__fakty,
.lib-karta__uwaga {
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.lib-karta__uwaga--alarm { color: var(--danger); }
.lib-karta__postep { margin-top: 10px; }
.lib-karta__stopka { justify-content: flex-end; }

/* Ukonczony kurs schodzi na drugi plan — zrobil swoje. */
.lib-karta[data-stan='ukonczony'] .card__media { opacity: 0.72; }
.lib-karta[data-stan='ukonczony']:hover .card__media { opacity: 1; }

.lib-znacznik {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.72);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Certyfikat jako karta, a nie wiersz tabeli. */
.cert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cert__znak {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--krem);
  color: var(--gold-500);
  font-size: 0.9rem;
}

.cert__tytul { font-size: 1.1rem; margin: 6px 0 0; }
.cert__data { margin: 0; font-size: 0.84rem; color: var(--text-muted); }
.cert__kod { margin: 2px 0 10px; }
.cert__kod code { font-size: 0.86rem; letter-spacing: 0.04em; }

@media (max-width: 760px) {
  /* Okladka obok tekstu zostawia na tresc niecale 150 px — na telefonie
     pasek idzie w pion, a zdjecie na pelna szerokosc. */
  .wznow {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .wznow__akcja { width: 100%; justify-content: center; }
}

.lib-group + .lib-group { margin-top: 48px; }

.lib-group__title {
  font-size: 1.44rem;
  margin-bottom: 6px;
}

.lib-group__lead {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 0 20px;
}

.lib-group__title + .grid { margin-top: 18px; }

/* Podpis pod kafelkiem pliku, ktorego nie da sie otworzyc na stronie. */
.card__hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 10px 0 0;
}

/* ── Czytnik e-booka i dokumentu ───────────────────────────── */

.reader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  min-height: calc(100vh - var(--header-h));
  /* Bez rozciagania panel konczyl sie na wysokosci swojej tresci i pod nim
     zostawal szary pas az do dolu ramki. */
  align-items: stretch;
}

.reader__main {
  display: flex;
  flex-direction: column;
  /* Bez tego ramka rosnie z trescia i pasek narzedzi ucieka w gore. */
  height: calc(100vh - var(--header-h));
}

.reader__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.reader__file {
  font-size: 0.86rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader__tools { display: flex; gap: 8px; flex-shrink: 0; }

/* Tlo celowo ciemniejsze od strony: kartka dokumentu ma byc jasnym
   prostokatem w ramce, a nie zlewac sie z interfejsem. */
.reader__stage {
  position: relative;
  flex: 1;
  min-height: 420px;
  background: var(--navy-900);
}

.reader__stage--msg {
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
}

.reader__stage--full { background: #15161b; }

.reader__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.reader__aside {
  background: var(--surface-alt);
  border-left: 1px solid var(--border);
  padding: 26px 24px;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.reader__title { font-size: 1.61rem; margin: 0 0 8px; }

.reader__summary {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
}

.reader__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.reader__facts dt { color: var(--text-muted); }
.reader__facts dd { margin: 0; font-weight: 600; text-align: right; }

.reader__note {
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Na waskim ekranie panel schodzi pod dokument, a ramka dostaje stala
   wysokosc — `100vh` minus pasek zostawialby na tresc kilka linijek. */
@media (max-width: 1024px) {
  .reader { grid-template-columns: 1fr; }
  .reader__main { height: auto; }
  /* `flex: 1` liczy rozmiar od bazy 0 i wygrywa z `height`, wiec ramka
     zatrzymywala sie na `min-height`. Tu wysokosc ma byc z `vh`. */
  .reader__stage { flex: none; height: 72vh; }
  .reader__aside {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: none;
  }
}

@media (max-width: 560px) {
  .reader__bar { flex-wrap: wrap; }
  .reader__file { flex-basis: 100%; }
  .reader__stage { flex: none; height: 64vh; }
}

/* Na telefonie panel boczny i tak znika, wiec karta jest cala strona —
   38 px marginesu wewnetrznego zabieraloby jej jedna czwarta szerokosci. */
@media (max-width: 560px) {
  .auth-main { padding: 22px 14px; }
  .auth-card { padding: 28px 22px; }
  .field__head { flex-wrap: wrap; gap: 2px; }
}

/* ── Dokumenty: regulamin, polityka prywatności ────────────── */

/* Dlugi tekst prawny czyta sie inaczej niz strone sprzedazowa: liczy sie
   dlugosc wiersza i wyrazne stopnie naglowkow, a nie efekt. */
.doc { max-width: 68ch; }

.doc h2 {
  font-size: 1.22rem;
  margin: 42px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.doc p { margin: 0 0 14px; line-height: 1.75; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; line-height: 1.7; }

/* Kotwice ze spisu tresci nie moga chowac naglowka pod paskiem u gory. */
.doc h2[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

.doc-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 6px 0 26px;
}

.doc-spis {
  margin: 0 0 36px;
  padding: 22px 26px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.doc-spis h2 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.doc-spis ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.doc-spis li { margin-bottom: 7px; break-inside: avoid; }
.doc-spis a { font-size: 0.92rem; }

/* Fragment, ktorego nie wolno przeoczyc — prawo odstapienia, utrata zgody. */
.doc-wyroz {
  margin: 20px 0;
  padding: 18px 22px;
  background: var(--surface-alt);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.doc-wyroz p:last-child { margin-bottom: 0; }

.doc-def { margin: 0 0 16px; }
.doc-def dt { font-weight: 700; margin-top: 12px; }
.doc-def dd { margin: 3px 0 0; color: var(--text-muted); line-height: 1.6; }

.doc-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 0.93rem;
}

.doc-tabela th,
.doc-tabela td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}

.doc-tabela th { background: var(--surface-alt); font-size: 0.82rem; }

.doc-uwaga { margin-bottom: 28px; }

/* Pole do uzupelnienia danymi firmy. Zolte tlo jest celowo krzykliwe —
   ma byc widac z daleka, ze dokument nie jest jeszcze gotowy. */
.doc-luka {
  background: #fde68a;
  color: #713f12;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

@media (max-width: 640px) {
  .doc-spis ol { columns: 1; }
  .doc-spis { padding: 18px 20px; }
  .doc-tabela { font-size: 0.88rem; }
  .doc-tabela th, .doc-tabela td { padding: 9px 10px; }
}

/* ── Zgody przy zakupie ────────────────────────────────────── */

.zgody {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.zgody .checkbox { font-size: 0.86rem; line-height: 1.5; }
.zgody a { color: var(--gold-600); font-weight: 600; }

/* Nieodhaczona zgoda musi rzucac sie w oczy — przycisk zaplaty stoi tuz
   pod nia i bez tego wyglada, jakby po prostu nie dzialal. */
.checkbox--blad span { color: var(--danger); }
.checkbox--blad input { outline: 2px solid var(--danger); outline-offset: 2px; }

.zgody__blad {
  margin: 0;
  font-size: 0.82rem;
  color: var(--danger);
}

.zgody__blad:empty { display: none; }

/* ── Pasma sekcji i naglowki w stylu projektu ──────────────── */

/* Naglowek sekcji z odnosnikiem po prawej: tytul i „zobacz wszystkie”
   w jednym rzedzie. Odnosnik pod siatka powtarzal to samo o ekran nizej
   i wydluzal strone bez powodu. */
.section__head--rzad {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.section__head--rzad > div { max-width: 46ch; }

.section__wiecej {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-warm);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy-900);
  white-space: nowrap;
}

.section__wiecej:hover { border-bottom-color: var(--gold-500); color: var(--gold-500); }

/* Ciemne pasmo. W projekcie rozdziela jasne sekcje i niesie te tresci,
   ktore maja zatrzymac wzrok: zapis na newsletter i ostatnie wezwanie. */
.section--ciemna {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.82);
}

.section--ciemna h1,
.section--ciemna h2,
.section--ciemna h3,
.section--ciemna h4 { color: #fff; }

.section--ciemna .section__eyebrow { color: var(--gold-400); }
.section--ciemna .section__lead,
.section--ciemna .muted { color: rgba(255, 255, 255, 0.68); }

/* Granica miedzy sekcjami rysuje sie linia tylko tam, gdzie tlo sie nie
   zmienia. Przy ciemnym pasmie linia bylaby widoczna rysa. */
.section--ciemna + .section,
.section + .section--ciemna { border-top: 0 !important; }

/* Przycisk z samym obrysem na ciemnym tle — `btn--ghost` ma jasne tlo
   i na czerni znikal. */
.btn--obrys {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn--obrys:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ── Zamkniecie strony: wezwanie wpuszczone w stopke ────────── */

/* Pasek w kolorze strony u gory stopki. Panel z wezwaniem wchodzi w niego
   gora, wiec przejscie z tresci do stopki ma widoczna krawedz — wczesniej
   czarne pasmo CTA i czarna stopka zlewaly sie w jeden blok. */
.footer--dom {
  --pasek: 104px;
  padding-block: 0 28px;
  background: linear-gradient(var(--krem) 0 var(--pasek), var(--navy-900) var(--pasek));
}

.stopka-dom {
  display: grid;
  /* Panel jest prawie tak szeroki jak kolumna z odnosnikami. Przy wezszym
     wygladal jak kawalek tresci, ktory sie nie zmiescil — przy tej proporcji
     widac, ze to dwa rownorzedne bloki, czyli uklad zamierzony. */
  grid-template-columns: minmax(0, 1fr) min(660px, 52%);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  /* Lewa kolumna trzyma sie siatki strony, prawa dobija do krawedzi okna.
     Liczone od `100%`, czyli szerokosci stopki — `100vw` obejmuje pasek
     przewijania i wypychaloby strone kilkanascie pikseli w bok. */
  padding-left: max(20px, calc((100% - var(--container)) / 2 + 20px));
}

.stopka-dom__lewa {
  grid-column: 1;
  grid-row: 1;
  padding-top: calc(var(--pasek) + 40px);
  padding-right: 20px;
}

/* W wezszej kolumnie cztery slupki obok siebie mialyby po 150 px —
   naglowki lamalyby sie na dwie linie. Dwa na dwa mieszcza sie swobodnie. */
.stopka-dom__lewa .footer__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 40px;
}

.stopka-cta {
  grid-column: 2;
  grid-row: 1;
  margin-top: 30px;
  margin-bottom: 44px;
  background: var(--gold-500);
  color: #fff;
  padding: clamp(30px, 3vw, 46px) clamp(24px, 2.6vw, 44px);
}

.stopka-cta h2 {
  margin-top: 14px;
  font-weight: 400;
  line-height: 1.18;
  color: #fff;
}

.stopka-cta h2 em { font-style: italic; }
.stopka-cta .section__eyebrow { color: rgba(255, 255, 255, 0.62); }

.stopka-cta > p {
  margin-top: 16px;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.78);
}

.stopka-cta__akcje { margin-top: 28px; }

.stopka-cta__nota {
  margin-top: 18px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Na burgundzie obrys z `--border` gasnie tak samo, jak na kremie. */
.stopka-cta .btn--obrys { border-color: rgba(255, 255, 255, 0.5); }
.stopka-cta .btn--obrys:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Ponizej tej szerokosci panel obok odnosnikow robi sie waski jak kolumna
   gazety — idzie na pelna szerokosc, nad stopke, czyli tam, gdzie stal. */
@media (max-width: 900px) {
  .footer--dom { --pasek: 0px; }

  .stopka-dom {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 20px;
    padding-right: 20px;
  }

  .stopka-cta { grid-column: 1; grid-row: 1; margin: 0 -20px 36px; }
  .stopka-dom__lewa { grid-column: 1; grid-row: 2; padding-top: 0; padding-right: 0; }
}

@media (max-width: 720px) {
  .section__head--rzad { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stopka-cta__akcje .btn { width: 100%; justify-content: center; }
}

/* ── Kafelek z tytulem na zdjeciu ─────────────────────────── */

/* Wariant z projektu: zdjecie niesie kafelek, a tytul lezy na nim pod
   gradientem. Zwykly `.card__media` zostaje dla kafelkow bez tytulu
   (biblioteka, podglad w panelu). */
.card__media--tytul { aspect-ratio: 4 / 3; display: block; }

.card__media--tytul::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Gradient tylko u dolu: gora zdjecia ma zostac czysta. */
  background: linear-gradient(to top, rgba(12, 12, 12, 0.88) 0%, rgba(12, 12, 12, 0.5) 32%, rgba(12, 12, 12, 0) 62%);
  pointer-events: none;
}

.card__nakladka {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 18px 20px;
}

/* Rodzaj produktu wraca z rogu na doł, nad tytul — jak plakietka w projekcie. */
.card__media--tytul .card__type {
  position: static;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
}

.card__media--tytul .card__title {
  margin: 0;
  color: #fff;
  font-size: 1.28rem;
  line-height: 1.22;
  text-wrap: balance;
}

/* Na ciemnym zdjeciu zlota plakietka „Polecany" gubi sie w gradiencie —
   zostaje u gory, gdzie gradient jeszcze nie siega. */
.card__media--tytul .card__badge { z-index: 1; }

/* Streszczenie pod zdjeciem jest teraz jedynym tekstem akapitowym
   w kafelku, wiec moze byc odrobine wieksze. */
.card__media--tytul + .card__body .card__summary { font-size: 0.94rem; }

@media (max-width: 520px) {
  .card__nakladka { padding: 14px 16px; }
  .card__media--tytul .card__title { font-size: 1.18rem; }
}

/* ── Pasmo „nie uczymy teorii dla teorii" ─────────────────── */

/* Zdjecie dochodzi do lewej krawedzi ekranu, tekst zostaje w kolumnie
   kontenera. Dlatego sekcja jest pozycjonowana, a zdjecie wyjete z ukladu —
   siatka kontenera nie siega poza swoja szerokosc. */
.obietnice {
  position: relative;
  overflow: hidden;
  padding-block: 0;
}

.obietnice__zdjecie {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: var(--surface-sunken);
}

.obietnice__zdjecie image-slot {
  display: block;
  width: 100%;
  height: 100%;
  --slot-height: 100%;
  /* Zdjecie ma wspierac tekst, nie konkurowac z nim — stad przytlumienie,
     tak jak w projekcie. */
  filter: grayscale(0.35) contrast(0.95);
}

.obietnice__zdjecie img { width: 100%; height: 100%; object-fit: cover; }

.obietnice__siatka {
  position: relative;
  padding-block: clamp(32px, 3.6vw, 52px);
}

/* Tekst musi zaczynac sie ZA zdjeciem. Zdjecie ma 38% szerokosci okna,
   a kontener tresci jest wysrodkowany i ma wlasny margines — stad
   wyliczenie zamiast zgadywanej wartosci. Przy 32vw tekst wchodzil
   piec pikseli na zdjecie. */
.obietnice__tresc {
  margin-left: calc(38vw + 48px - max(0px, (100vw - var(--container)) / 2) - 20px);
  max-width: 46rem;
}

.obietnice h2 { font-weight: 400; margin-top: 10px; }
.obietnice h2 em { font-style: italic; color: var(--gold-500); }

/* Dwie kolumny zamiast jednej: te same cztery punkty zajmuja o polowe
   mniej wysokosci, a sekcja przestaje zabierac caly ekran. */
.obietnice__lista {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 34px;
  counter-reset: obietnica;
}

/* Kreska nad pozycja zamiast myslnika przed nia. Myslnik ciagnal uklad
   w strone listy wypunktowanej; cienka linia dzieli tak samo, a wpisuje
   sie w reszte strony, ktora rozdziela tresc wlasnie liniami. */
.obietnice__lista li {
  counter-increment: obietnica;
  padding-top: 14px;
  border-top: 1px solid var(--border-warm);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Numer w kroju szeryfowym — ten sam, co naglowki. */
.obietnice__lista li::before {
  content: counter(obietnica, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--gold-500);
}

.obietnice__lista strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.98rem;
  color: var(--navy-900);
}

@media (max-width: 1100px) {
  .obietnice__zdjecie { width: 32%; }
  .obietnice__tresc { margin-left: calc(32vw + 40px - 20px); }
}

/* Na telefonie zdjecie wraca do ukladu jako pasmo nad tekstem. */
@media (max-width: 860px) {
  .obietnice__zdjecie {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(220px, 44vw, 320px);
  }

  .obietnice__zdjecie image-slot { --_ratio: 16 / 9 !important; }
  .obietnice__lista { grid-template-columns: minmax(0, 1fr); }
  .obietnice__tresc { margin-left: 0; }
}

/* ── Zaremba Pass: obietnica obok cennikow ────────────────── */

.pass-blok__siatka {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.pass-blok h2 { font-weight: 400; margin-top: 12px; }
.pass-blok h2 em { font-style: italic; color: var(--gold-500); }

/* Przelacznik okresu nalezy teraz do kolumny z tekstem, wiec nie srodkuje
   sie juz przez cala szerokosc sekcji. */
.pass-blok .pass-toggle { justify-content: flex-start; margin: 26px 0 0; }

.pass-blok__cta { margin-top: 26px; }

/* Dwie karty obok siebie w prawej kolumnie. `auto-fit` z minimum 290 px
   rozbijalby je tutaj na dwa wiersze. */
.pass-blok .plans {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  margin: 0;
  gap: 16px;
}

/* Lista korzysci z ptaszkami, jak w projekcie. Znak rysuje CSS, zeby
   czytnik ekranu nie wymawial go przy kazdej pozycji. */
.pass-blok .plan__list li {
  position: relative;
  padding-left: 24px;
  list-style: none;
}

.pass-blok .plan__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--gold-500);
  border-bottom: 1.5px solid var(--gold-500);
  rotate: -45deg;
}

.pass-blok .plan--dark .plan__list li::before { border-color: var(--gold-400); }
.pass-blok .plans__worth { text-align: left; margin-inline: 0; }

@media (max-width: 1000px) {
  .pass-blok__siatka { grid-template-columns: minmax(0, 1fr); }
  .pass-blok .plans { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
}

@media (max-width: 560px) {
  .pass-blok .plans { grid-template-columns: minmax(0, 1fr); }
}

/* ── Opinie: duza obok zwiezlych ──────────────────────────── */

.rev-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 34px);
  align-items: start;
}

/* Naglowek sekcji opinii korzysta z ukladu „tytul + element po prawej",
   wiec ocena zbiorcza przestaje byc srodkowana. */
.rev-intro { text-align: left; max-width: none; margin-bottom: 30px; }
.rev-intro .section__lead { margin-inline: 0; }
.rev-intro .rev-score { margin-top: 0; }

/* Pasek sterowania pod duza opinia: licznik, strzalki, kropki. */
.rev-ster {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.rev-licznik {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.rev-ster__przyciski { display: flex; gap: 8px; }

/* Strzalki wracaja do zwyklego ukladu — nie wisza juz po bokach karuzeli,
   wiec nie potrzebuja pozycjonowania ani cienia. */
.rev-ster .rev-nav {
  position: static;
  translate: none;
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
  box-shadow: none;
}

.rev-ster .rev-dots { margin: 0 0 0 auto; }

.rev-boczne { display: grid; gap: 12px; }

.rev-mini {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.rev-mini:hover { border-color: var(--gold-500); transform: translateY(-2px); }

.rev-mini__znak {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  line-height: 0.4;
  color: var(--border-warm);
}

.rev-mini__tresc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rev-mini__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rev-mini__gwiazdki { color: var(--accent); letter-spacing: 1px; text-transform: none; }

/* Na waskim ekranie boczne opinie schodza pod duza. */
@media (max-width: 1000px) {
  .rev-uklad { grid-template-columns: minmax(0, 1fr); }
  .rev-boczne { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 560px) {
  .rev-ster { flex-wrap: wrap; }
  .rev-ster .rev-dots { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* ── Elementy stojace na ciemnym pasmie ───────────────────── */

/* `btn--dark` to niemal czern — na ciemnym pasmie zostawal z niego sam
   napis, bez widocznego przycisku. Na takim tle rola „przycisku
   glownego" przechodzi na odwrocenie kolorow. */
.section--ciemna .btn--dark {
  background: #fff;
  border-color: #fff;
  color: var(--navy-900);
}

.section--ciemna .btn--dark:hover:not(:disabled) { background: rgba(255, 255, 255, 0.88); }

/* `btn--ghost` ma obrys w kolorze jasnej ramki i tekst w czerni —
   jedno i drugie ginie na ciemnym tle. */
.section--ciemna .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.section--ciemna .btn--ghost:hover:not(:disabled) {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Zwykle odnosniki w tresci pasma. */
.section--ciemna a:not(.btn) { color: var(--gold-400); }

/* Pole formularza zostaje biale, ale jego obrys musi byc widoczny takze
   po otrzymaniu skupienia — domyslna poswiata jest w kolorze wina
   i na czerni jej nie widac. */
.section--ciemna .input:focus,
.section--ciemna .textarea:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.26);
}