/* ============================================================
   ADRIO — komponenty i baza.
   Źródło: design system Adrio → css/adrio.css (v2.0). Czysty CSS, zero zależności.
   Wymaga tokens.css (zmienne) i fonts.css (@font-face).

   ⚠ 05.08.2026 system DORÓWNAŁ motywowi — od tej pory oba pliki mają ten sam zestaw
   reguł i nie ma tu już „dodatków motywu". Dokładając cokolwiek, dokładaj to W SYSTEMIE
   i kopiuj w dół, a nie odwrotnie. Jedyna trwała różnica: system nie ma @font-face
   (jest w tokens/fonts.css), bo tam fonty leżą pod innymi ścieżkami.
   ============================================================ */

/* ---------- reset i baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
  background: var(--color-bg);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: var(--leading-tight); margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-4); }
a  { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }

/* fokus — globalny, widoczny, nie usuwać */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ============================================================
   PRZYCISKI — stany: hover / active / focus / disabled / loading
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--text-base);
  padding: 0.75rem 1.625rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .05s;
  position: relative;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-brand); color: var(--color-on-brand); }
.btn--primary:hover { background: var(--color-brand-hover); color: var(--color-on-brand); }
.btn--primary:active { background: var(--color-brand-active); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn--secondary { background: transparent; color: var(--color-brand); border-color: var(--color-brand); }
.btn--secondary:hover { background: var(--color-surface-alt); color: var(--color-brand); }
.btn--ghost { background: transparent; color: var(--color-brand); }
.btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-brand); }
.btn--sm { font-size: var(--text-sm); padding: 0.5rem 1.125rem; }
.btn--lg { font-size: var(--text-md); padding: 0.875rem 2rem; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-disabled-bg); color: var(--color-disabled-text);
  border-color: transparent; cursor: not-allowed; transform: none;
}
/* loading: <button class="btn btn--primary is-loading" aria-busy="true"> */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 1.125em; height: 1.125em;
  border: 2px solid var(--color-on-brand); border-right-color: transparent;
  border-radius: 50%; animation: adrio-spin .7s linear infinite;
}
.btn--accent.is-loading::after, .btn--secondary.is-loading::after { border-color: var(--color-brand); border-right-color: transparent; }
@keyframes adrio-spin { to { transform: rotate(360deg); } }

/* ============================================================
   FORMULARZE — stany: focus / error / disabled
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field > label { font-weight: 700; font-size: var(--text-sm); }
.input, .select, .textarea {
  font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 0.6875rem 1rem; width: 100%;
  transition: border-color .15s;
}
/* Lista rozwijana. Strzałkę rysujemy SAMI dwoma gradientami — tak samo jak „ptaszek”
   w polu filtra (.facet__box) — zamiast ściągać ikonę z zewnątrz. `appearance: none`
   zdejmuje wygląd systemowy: bez tego pole ma szare tło i kanciaste rogi Windowsa,
   które nie mają nic wspólnego z resztą sklepu.
   Prawy margines wewnętrzny musi być większy — inaczej długa nazwa opcji wchodzi
   pod strzałkę. */
.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: right 1.375rem center, right 1rem center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.select::-ms-expand { display: none; }

.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-subtle); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--color-brand); outline-offset: 0; }
.input:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; }
.field--error .input { border-color: var(--color-danger); }
.field__error { color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; }
.field__hint { color: var(--color-text-muted); font-size: var(--text-sm); }
.checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.checkbox input { width: 1.125rem; height: 1.125rem; margin: 2px 0 0; accent-color: var(--color-brand); flex: none; }

/* wyszukiwarka

   UWAGA — NIE nazywaj tej klasy `.search`. Tak było i to psuło KAŻDĄ stronę wyników
   wyszukiwania: WordPress dokleja do `<body>` klasę `search`, więc reguły pudełka
   wyszukiwarki trafiały w całą stronę. Body robiło się `display:flex` (pasek górny,
   nagłówek i treść lądowały OBOK SIEBIE, treść przy prawej krawędzi) i dostawało
   `border-radius` pigułki — stąd „wielki łuk” przez pół ekranu.

   To ta sama pułapka co `.product` opisana w layout.css: klasy WordPressa
   i WooCommerce (`search`, `archive`, `home`, `paged`, `single`, `page`, `product`…)
   są ICH. Własne komponenty nazywamy tak, żeby nie mogły się z nimi spotkać. */
.searchbar {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill); padding: 0.6875rem 1.25rem; width: 100%;
}
.searchbar:focus-within { border-color: var(--color-brand); }
.searchbar input { border: 0; outline: 0; font: inherit; flex: 1; background: transparent; color: var(--color-text); min-width: 0; }
.searchbar input::placeholder { color: var(--color-text-subtle); }

/* ---------- podpowiedzi wyszukiwarki (lista pod paskiem) ----------
   Lista wisi NAD stroną (`position: absolute`), więc pasek musi być jej układem
   odniesienia — stąd `position: relative` na formularzu. Szerokość bierze z paska,
   nie z treści: lista węższa albo szersza od pola wygląda jak element cudzej strony. */
.searchbar { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 0.375rem); left: 0; right: 0; z-index: 30;
  margin: 0; padding: var(--space-1); list-style: none;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  max-height: 70vh; overflow-y: auto;
}
.search-suggest__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
}
/* Podświetlenie działa tak samo dla myszy i dla strzałek na klawiaturze — inaczej
   nawigacja z klawiatury nie wiadomo, gdzie jest. */
.search-suggest__item:hover,
.search-suggest__item--active { background: var(--color-surface-alt); }
.search-suggest__cover { width: 34px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.search-suggest__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.search-suggest__title { font-weight: 700; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest__meta { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest__price { font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.search-suggest__item--all { justify-content: center; font-weight: 700; font-size: var(--text-sm); color: var(--color-brand); }

/* ============================================================
   PLAKIETKI
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  padding: 0.125rem 0.5625rem; border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge--ebook   { background: var(--color-surface-invert); color: var(--color-text-invert); }
.badge--audio   { background: var(--color-accent); color: var(--color-on-accent); }
.badge--format  { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border-strong); font-family: ui-monospace, monospace; font-weight: 500; }
.badge--new     { background: var(--color-new-bg); color: var(--color-new); }
.badge--promo   { background: var(--color-promo-bg); color: var(--color-promo); }
.badge--drm     { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
/* „Masz to" — tytuł, który klient ma już na półce. Zieleń stanu dokonanego, ta sama co
   w `.alert--success` i w zrobionym kroku checkoutu: to nie oferta ani zachęta, tylko
   fakt. Bursztyn (promo) i granat (marka) są zarezerwowane dla rzeczy do KLIKNIĘCIA,
   a tej plakietki kliknąć się nie da i nie ma po co. */
.badge--owned   { background: var(--color-success-bg); color: var(--color-success); }

/* ============================================================
   BLOK CENY — z miejscem na Omnibus (na stałe w layoucie)
   ============================================================ */
.price { display: flex; flex-direction: column; gap: 2px; }
.price__row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.price__current { color: var(--color-price); font-weight: 800; font-size: var(--text-lg); }
.price__current--lg { font-size: var(--text-2xl); }
.price__old { color: var(--color-price-old); text-decoration: line-through; font-size: var(--text-sm); }
.price__discount { color: var(--color-promo); background: var(--color-promo-bg); font-size: var(--text-xs); font-weight: 700; padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm); }
/* Omnibus: obowiązkowa linia przy każdej przecenie */
.price__omnibus { color: var(--color-omnibus); font-size: var(--text-xs); }
/* podpis pod przekreśloną ceną — wymóg prawny, nie ozdobnik (patrz adrio_price_html) */
.price__note { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 2px; }

/* ============================================================
   OKŁADKI I KARTY PRODUKTU
   ============================================================ */
.cover {
  border-radius: var(--radius-sm); overflow: hidden; position: relative;
  background: repeating-linear-gradient(45deg, var(--raw-grey-200), var(--raw-grey-200) 5px, var(--raw-grey-300) 5px, var(--raw-grey-300) 10px);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-subtle); font-family: ui-monospace, monospace; font-size: 0.6875rem;
  box-shadow: var(--shadow-sm);
}
.cover--ebook { aspect-ratio: var(--cover-ratio-ebook); }
.cover--audio { aspect-ratio: var(--cover-ratio-audio); border-radius: var(--radius-md); }

/* Kadr w siatce katalogu — JEDEN dla e-booków i audiobooków.
   Wcześniej audiobook dostawał kadr 1:1, a e-book 2:3. W jednej siatce dawało to
   kafelki różnej wysokości: rzędy się rozjeżdżały, a przy `object-fit: cover`
   kwadratowy kadr obcinał okładce górę i dół razem z tytułem. */
.cover--tile { aspect-ratio: var(--cover-ratio-tile); }

/* POZA SIATKĄ cała okładka ma być widoczna. `cover` (przycinanie do kadru) wygląda dobrze
   na zdjęciach, ale okładka książki NIESIE TEKST — obcięty tytuł czyni ją nieczytelną.
   Tutaj kadr i tak odpowiada formie wydania (2:3 e-book, 1:1 audiobook), więc `contain`
   niczego nie przycina; puste marginesy przykrywa jednolite tło (.cover--filled). */
.cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

/* W SIATCE KATALOGU jest odwrotnie: okładka WYPEŁNIA kadr i dotyka ramki ze wszystkich
   stron (decyzja właściciela 20.08.2026). Powód jest w danych: okładki przychodzą od
   dostawcy w RÓŻNYCH proporcjach — 500×705, ale i 500×500, i 500×483 — więc przy
   `contain` każdy kafelek miał inne marginesy i rząd wyglądał jak lista o nierównych
   obrazkach. Koszt jest znany i przyjęty: kwadratowej okładce kadr 2:3 obcina po ok. 1/6
   góry i dołu. Karta tytułu pokazuje ją dalej W CAŁOŚCI (reguła wyżej), więc nic nie ginie
   bezpowrotnie — przycięcie żyje wyłącznie na liście. */
.cover--tile img { object-fit: cover; }
.cover--filled { background: var(--color-surface-alt); }
.cover__placeholder { padding: var(--space-2); text-align: center; }
.cover .badge { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; }

.product-card { display: flex; flex-direction: column; gap: var(--space-2); position: relative; min-width: 0; }
.product-card a.product-card__cover-link { display: block; }
.product-card a.product-card__link { color: inherit; text-decoration: none; }
.product-card a.product-card__link:hover { color: var(--color-brand); }
.product-card:hover .cover { box-shadow: var(--shadow-md); }
/* Tytuł i autor o stopień mniejsze niż wcześniej (base/sm). Kafelek w siatce ma dziś ok. 132px szerokości — 16px serifem
   mieszczą się w linii dwa słowa i trzy dozwolone linie urywają większość tytułów. */
.product-card__title { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-snug); margin: 0; }
.product-card__author { color: var(--color-text-muted); font-size: var(--text-xs); }
.product-card__author a { color: inherit; text-decoration: none; }
.product-card__author a:hover { color: var(--color-brand); text-decoration: underline; }
.product-card__meta { display: flex; gap: var(--space-1); flex-wrap: wrap; }

/* Tytuły z katalogu bywają skrajnie długie („140 praktycznych wskazówek i sposobów…”).
   Bez łamania długie słowo wychodzi poza kafelek i nachodzi na sąsiedni; bez ograniczenia
   liczby linii kafelki w rzędzie mają różną wysokość. Trzy linie na tytuł, dwie na autora. */
.product-card__title, .product-card__author, .product-card__meta { overflow-wrap: anywhere; }
.product-card__title a { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__author { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- serduszko „ulubione” ----------

   Markup daje wtyczka `ksiegarnia-ulubione`, wygląd jest tutaj.

   O stanie decyduje `aria-pressed`, a nie osobna klasa: przycisk JEST przełącznikiem
   i tak właśnie opisuje go HTML, więc czytnik ekranu i CSS czytają to samo, a skrypt
   ma jedną rzecz do przestawienia zamiast dwóch, które mogą się rozjechać.

   Puste serce ma `fill: none` — na okładce (często ciemnej, często z tekstem) biały
   krążek pod spodem trzyma je czytelne bez przyciemniania samej okładki. */
.fav-btn {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-surface); color: var(--color-text-subtle);
  box-shadow: var(--shadow-sm);
  transition: color .15s, background-color .15s, transform .05s;
}
.fav-btn__icon { fill: none; }
.fav-btn:hover { color: var(--color-promo); }
.fav-btn:active { transform: scale(0.92); }
.fav-btn[aria-pressed="true"] { color: var(--color-promo); }
.fav-btn[aria-pressed="true"] .fav-btn__icon { fill: currentColor; }
.fav-btn:disabled { cursor: progress; opacity: .6; }

/* Wariant z podpisem — w kolumnie zakupu na stronie tytułu, obok „Dodaj do koszyka”.
   Tam przycisk nie leży na okładce, więc wraca do zwykłego przepływu strony. */
.fav-btn--labelled {
  position: static; width: 100%; height: auto;
  padding: 0.5rem 1.125rem;
  border: 1.5px solid var(--color-border-strong);
  background: transparent; color: var(--color-text);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm);
  box-shadow: none;
}
.fav-btn--labelled:hover { border-color: var(--color-promo); color: var(--color-promo); }
.fav-btn--labelled[aria-pressed="true"] { border-color: var(--color-promo); color: var(--color-promo); }

/* Odnośnik „Ulubione” w nagłówku — licznik jak przy koszyku, ale spokojniejszy:
   ulubione to nie jest działanie do dokończenia, więc nie krzyczy bursztynem. */
.fav-link { display: inline-flex; align-items: center; gap: var(--space-1); }
.fav-link__count {
  background: var(--color-surface-invert); color: var(--color-text-invert);
  border-radius: var(--radius-pill); font-size: var(--text-xs); padding: 0 0.4375rem;
}
.fav-link__count[hidden] { display: none; }

/* kafelek audio (poziomy) */
.audio-card {
  display: flex; gap: var(--space-4); align-items: center;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.audio-card .cover--audio { width: 84px; flex: none; }
.audio-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

/* siatki produktów

   Liczba kolumn jest WPISANA, a nie liczona z `auto-fill minmax(...)`.
   Właściciel chce sześciu okładek w rzędzie; przy `auto-fill` wychodziły cztery, bo
   na tytuły zostaje 872px (1200px kontenera − 48px marginesów − 240px kolumny filtrów
   − 40px odstępu), a to mieści tylko cztery kafelki po 190px. Sztywne sześć kolumn
   daje kafelek ok. 132px i jest przewidywalne: przy `minmax()` jeden piksel różnicy
   w szerokości ekranu potrafi zabrać całą kolumnę.

   Odstęp zszedł z 24px na 16px — przy węższych kafelkach szeroka przerwa zjadałaby
   właśnie tę szerokość, której brakuje okładce. */
.grid-products { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }

@media (max-width: 1200px) { .grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-audio { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* ============================================================
   NAGŁÓWEK / STOPKA SERWISU
   ============================================================ */
.topbar { background: var(--color-surface-invert); color: var(--color-text-invert); font-size: var(--text-xs); }
.topbar__inner { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-1); }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--color-accent); }

.site-header { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); }

/* Nagłówek jest SIATKĄ, nie jednym rzędem.
   Kolumna 1 to logo, kolumna 2 ma dwa piętra: wyszukiwarka z akcjami, a pod nią działy
   sklepu. Logo rozpina się na oba piętra, więc mieści się dwa razy wyższe (84px zamiast
   42px) bez zabierania miejsca reszcie — pasek działów przeniósł się z osobnego rzędu
   pod nagłówkiem w prawo, pod wyszukiwarkę (patrz header.php). */
.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  padding-block: var(--space-4) var(--space-3);
}
.site-header__bar { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.site-header__nav { min-width: 0; }
.site-header .searchbar { max-width: 480px; flex: 1; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; font-weight: 700; font-size: var(--text-sm); }
.site-header__actions a { color: var(--color-text); text-decoration: none; }
.site-header__actions a:hover { color: var(--color-brand); }
.cart-btn { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-brand); color: var(--color-on-brand) !important; border-radius: var(--radius-pill); padding: 0.5rem 1.125rem; }
.cart-btn:hover { background: var(--color-brand-hover); }
.cart-btn__count { background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-pill); font-size: var(--text-xs); padding: 0 0.4375rem; }

.logo-lockup { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none !important; }
/* 84px — dwa razy tyle co wcześniej (42px), decyzja właściciela z 05.08.2026.
   Logo stoi w kolumnie rozpiętej na oba piętra nagłówka (patrz .site-header__inner),
   więc ten wzrost NIE zabiera miejsca wyszukiwarce ani działom sklepu. */
.logo-lockup { grid-row: 1 / span 2; }
.logo-lockup img { height: 84px; width: auto; }

.site-nav { display: flex; gap: var(--space-5); font-weight: 700; font-size: var(--text-sm); overflow-x: auto; }
.site-nav a { color: var(--color-text); text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--color-brand); }
.site-nav a[aria-current="page"] { color: var(--color-brand); border-bottom-color: var(--color-accent); }
.site-nav a.is-promo { color: var(--color-accent-text); }

.site-footer { background: var(--color-surface-invert); color: #C3CAD8; margin-top: var(--space-9); }
/* Znak w stopce: własny, WYŚRODKOWANY pas nad kolumnami linków (decyzja właściciela
   20.08.2026). Wcześniej logo było pierwszą komórką siatki, miało 44 px i przy pustych
   kolumnach widgetów wyglądało jak drobiazg zgubiony w lewym rogu. 84 px to ta sama
   wysokość co w nagłówku — stopka domyka stronę tym samym znakiem, którym ją otwiera. */
.site-footer__brand { text-align: center; padding-block: var(--space-7) 0; }
.site-footer__logo { height: 84px; width: auto; margin: 0 auto var(--space-3); }
.site-footer__tagline { max-width: 46ch; margin-inline: auto; }

/* Kolumny linków. Znak wyszedł z siatki, więc kolumny są równe — i rysują się tylko
   wtedy, gdy redakcja wpięła w nie widgety (patrz footer.php). */
.site-footer__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-6) var(--space-7); font-size: var(--text-sm); }
.site-footer h4 { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-invert); margin-bottom: var(--space-2); }
.site-footer a { color: inherit; text-decoration: none; display: block; padding-block: 3px; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.15); padding-block: var(--space-4); font-size: var(--text-xs); color: rgba(229,229,229,.7); }

/* Pasek płatności — WŁASNY JASNY PAS NAD STOPKĄ, na kolorze z naszej palety.
   Do 20.08.2026 było to białe pudełko wrzucone w granatową stopkę i wyglądało jak łata.
   ⚠ Jasne tło nie jest wyborem estetycznym: baner ING to zestaw CUDZYCH znaków (BLIK,
   Visa, Pekao, BNP Paribas) w wariancie przezroczystym, z ciemnymi napisami — na granacie
   połowa z nich znika, a przemalowywać ich nie wolno (assets/platnosci/ZRODLO.md).
   Stopka jest dzięki temu jednolicie granatowa, a pasek wygląda na część strony. */
.psp-band { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); padding-block: var(--space-5); text-align: center; }
.psp-band__logo { width: 110px; height: auto; display: block; margin: 0 auto var(--space-2); }
.psp-band__metody { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; }
.psp-band__podpis { margin: var(--space-3) auto 0; max-width: 70ch; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }

/* ============================================================
   OKRUSZKI / PAGINACJA / FILTRY
   ============================================================ */
.breadcrumbs { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-subtle); padding-block: var(--space-4); flex-wrap: wrap; }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-brand); }

/* ⚠ MARKUP PAGINACJI KATALOGU RYSUJE WooCommerce, a nie motyw: `woocommerce_pagination()`
   daje `nav.woocommerce-pagination > ul.page-numbers > li > a`. Arkusz WooCommerce mamy
   wyłączony (patrz inc/woocommerce.php), więc bez poniższych reguł numery stron lecą
   JEDNA POD DRUGĄ jako punktowana lista — dokładnie to zgłosił właściciel 20.08.2026.
   Stylujemy obie postacie naraz: `.pagination` (nasze listy) i listę WooCommerce. */
.pagination,
.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.pagination { padding-block: var(--space-6); }
.woocommerce-pagination { padding-block: var(--space-6); }
.woocommerce-pagination ul.page-numbers li { display: flex; margin: 0; }

.pagination a, .pagination span,
.woocommerce-pagination .page-numbers {
  min-width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-1); padding-inline: var(--space-2);
  border-radius: var(--radius-md); text-decoration: none; font-weight: 700; font-size: var(--text-sm);
  color: var(--color-text); border: 1px solid transparent;
}
.pagination a:hover,
.woocommerce-pagination a.page-numbers:hover { background: var(--color-surface-alt); color: var(--color-brand); }
.pagination [aria-current="page"],
.woocommerce-pagination .page-numbers.current { background: var(--color-brand); color: var(--color-on-brand); }

/* Wielokropek to nie przycisk — nie udaje go ramką ani kursorem. */
.pagination .dots,
.woocommerce-pagination .page-numbers.dots { color: var(--color-text-subtle); font-weight: 500; }

/* Strzałki „poprzednia / następna” niosą podpis, więc są szersze od numeru i obramowane:
   to one, a nie numery stron, są drogą przez wyniki wyszukiwania. Reguły celują w OBIE
   postacie paginacji (naszą i tę z WooCommerce) — jeden wygląd, dwa markupy. */
.pagination a.prev, .pagination a.next,
.woocommerce-pagination a.prev,
.woocommerce-pagination a.next { border-color: var(--color-border); padding-inline: var(--space-3); }
.pagination a.prev:hover, .pagination a.next:hover,
.woocommerce-pagination a.prev:hover,
.woocommerce-pagination a.next:hover { border-color: var(--color-brand); }

@media (max-width: 480px) {
  /* Na telefonie podpisy strzałek chowamy — zostają same groty, żeby cały pasek
     mieścił się w jednym rzędzie. */
  .page-numbers__label { display: none; }
}

.facet { border-top: 1px solid var(--color-border); padding-block: var(--space-4); }
.facet summary { font-weight: 700; font-size: var(--text-sm); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.facet summary::after { content: "▾"; color: var(--color-text-subtle); }
.facet[open] summary::after { content: "▴"; }
.facet__list { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); }
.facet__count { color: var(--color-text-subtle); }
.facet h4 { font-size: var(--text-sm); margin: 0; }

/* Pozycja filtra. To LINK, nie <input> — filtrowanie działa bez JavaScriptu (patrz
   inc/facets.php) — ale ma czytać się jak pole wyboru, bo takie niesie znaczenie:
   „mogę zaznaczyć kilka”. Kwadracik rysujemy sami; prawdziwy checkbox w linku byłby
   kłamstwem dla czytnika ekranu (nie da się go zaznaczyć klawiszem spacji). */
.facet__opt {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text); text-decoration: none; line-height: var(--leading-snug);
}
.facet__opt:hover { color: var(--color-brand); }
.facet__box {
  flex: none; width: 1rem; height: 1rem; margin-top: 0.125rem;
  border: 1.5px solid var(--color-border-strong); border-radius: 3px; background: var(--color-surface);
}
.facet__opt:hover .facet__box { border-color: var(--color-brand); }
.facet__opt.is-selected { font-weight: 700; color: var(--color-brand); }
.facet__opt.is-selected .facet__box {
  background: var(--color-brand); border-color: var(--color-brand);
  /* „ptaszek” bez obrazka i bez ikonografii z zewnątrz */
  background-image: linear-gradient(45deg, transparent 45%, var(--color-on-brand) 45%, var(--color-on-brand) 55%, transparent 55%),
                    linear-gradient(-45deg, transparent 45%, var(--color-on-brand) 45%, var(--color-on-brand) 55%, transparent 55%);
}
.facet__name { flex: 1; overflow-wrap: anywhere; }
.facet__more { padding-top: var(--space-2); }
.facet__more summary {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-brand);
  cursor: pointer; list-style: none; display: inline-block;
}
.facet__more summary::-webkit-details-marker { display: none; }
.facet__more summary::after { content: " ▾"; }
.facet__more[open] summary::after { content: " ▴"; }

/* Napis w przycisku przełącza się RAZEM ze strzałką. Oba napisy są w kodzie strony
   (inc/facets.php), tutaj chowamy ten nieaktualny — bez JavaScriptu, tak jak reszta
   facetu. `display: none` (a nie przezroczystość) jest tu ważne: czytnik ekranu ma
   przeczytać jeden napis, ten prawdziwy, a nie oba pod rząd. */
.facet__more summary .facet__more-hide { display: none; }
.facet__more[open] summary .facet__more-show { display: none; }
.facet__more[open] summary .facet__more-hide { display: inline; }

.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-surface-alt); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text); text-decoration: none;
}
a.chip:hover { border-color: var(--color-brand); color: var(--color-brand); }
.chip__x { color: var(--color-text-subtle); }
a.chip:hover .chip__x { color: var(--color-danger); }
.chip--clear { background: none; border-style: dashed; font-weight: 400; }
.chip button { border: 0; background: none; cursor: pointer; color: var(--color-text-subtle); font-size: 1em; padding: 0; line-height: 1; }
.chip button:hover { color: var(--color-danger); }

/* ============================================================
   ALERTY / STANY PUSTE / SKELETON
   ============================================================ */
.alert { border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-sm); display: flex; gap: var(--space-3); align-items: flex-start; }
.alert--error { background: var(--color-danger-bg); color: var(--color-danger); }
.alert--success { background: var(--color-success-bg); color: var(--raw-green-700); }
.alert--info { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.alert strong { display: block; }

.empty-state { text-align: center; padding: var(--space-9) var(--space-5); max-width: 420px; margin-inline: auto; }
.empty-state__mark { width: 56px; height: 56px; margin: 0 auto var(--space-4); opacity: .5; }
.empty-state h2 { margin-bottom: var(--space-2); }
.empty-state p { color: var(--color-text-muted); }

/* Strona 404 (404.php). Rozdroże, nie komunikat błędu: wyszukiwarka, kategorie, katalog.
   Szerzej niż `.empty-state`, bo mieści rząd kategorii, a nie samo zdanie. */
.notfound { text-align: center; max-width: 46rem; margin-inline: auto; padding-block: var(--space-9); }
.notfound__mark { width: 56px; margin: 0 auto var(--space-5); opacity: .45; }
.notfound__mark img { display: block; width: 100%; height: auto; }
.notfound__code {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: var(--space-2);
}
.notfound__title { margin-bottom: var(--space-3); }
.notfound__lead { color: var(--color-text-muted); max-width: 34rem; margin-inline: auto; }

/* Wyszukiwarka jest tu GŁÓWNYM wyjściem, więc dostaje najwięcej powietrza wokół siebie.
   `.searchbar` z nagłówka niesie własne tło i ramkę — tutaj tylko ją ograniczamy. */
.notfound__search { max-width: 32rem; margin: var(--space-6) auto var(--space-8); }

.notfound__subtitle { font-size: var(--text-md); margin-bottom: var(--space-4); }
.notfound__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.notfound__chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.4375rem 0.875rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  font-size: var(--text-sm); color: var(--color-text); text-decoration: none;
}
.notfound__chip:hover { border-color: var(--color-brand); color: var(--color-brand); }
.notfound__chip--strong { font-weight: 700; border-color: var(--color-brand); color: var(--color-brand); }
.notfound__chip-count { color: var(--color-text-subtle); font-size: var(--text-xs); }

.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }

.skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--raw-grey-200) 25%, var(--raw-grey-100) 45%, var(--raw-grey-200) 65%); background-size: 200% 100%; animation: adrio-shimmer 1.4s infinite; color: transparent !important; }
@keyframes adrio-shimmer { to { background-position: -200% 0; } }

/* ============================================================
   KOSZYK / CHECKOUT / BIBLIOTEKA
   ============================================================ */
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); align-items: center; }
.cart-line .cover { width: 72px; }
.cart-line__remove { background: none; border: 0; color: var(--color-text-subtle); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; padding: 0; }
.cart-line__remove:hover { color: var(--color-danger); }

.summary-box { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.summary-box__row { display: flex; justify-content: space-between; font-size: var(--text-sm); padding-block: var(--space-1); }
.summary-box__total { display: flex; justify-content: space-between; font-weight: 800; font-size: var(--text-md); border-top: 1px solid var(--color-border-strong); margin-top: var(--space-3); padding-top: var(--space-3); }

.steps { display: flex; gap: var(--space-4); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-subtle); margin-bottom: var(--space-6); }
.steps__item { display: flex; align-items: center; gap: var(--space-2); }
.steps__num { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-disabled-bg); font-size: var(--text-xs); }
.steps__item.is-active { color: var(--color-brand); }
.steps__item.is-active .steps__num { background: var(--color-brand); color: var(--color-on-brand); }
.steps__item.is-done { color: var(--color-success); }
.steps__item.is-done .steps__num { background: var(--color-success-bg); color: var(--color-success); }

.library-item { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--space-5); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); align-items: center; }
.library-item .cover { width: 88px; }
.library-item__downloads { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.download-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1.5px solid var(--color-brand); color: var(--color-brand);
  border-radius: var(--radius-md); padding: 0.375rem 0.875rem;
  font-family: ui-monospace, monospace; font-size: var(--text-xs); font-weight: 600;
  text-decoration: none; background: transparent; cursor: pointer;
  transition: background-color .15s;
}
.download-btn:hover { background: var(--color-surface-alt); color: var(--color-brand); }
.download-btn:disabled { border-color: var(--color-border-strong); color: var(--color-disabled-text); cursor: not-allowed; }
/* zaproszenie do ustawień czytnika — obok pobrań, ale wyraźnie mniej ważne */
.download-btn--ghost { border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text-muted); }
.download-btn--ghost:hover { color: var(--color-brand); border-color: var(--color-brand); }
.library-item__limits { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-1); }

/* ---------- Moje konto → Wysyłka na czytnik ---------- */
.reader-form { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; margin-top: var(--space-5); }
.reader-card {
  width: 100%; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.reader-card h2 { font-size: var(--text-md); margin: 0 0 2px; }
.reader-card__meta { font-size: var(--text-xs); color: var(--color-text-subtle); margin: 0 0 var(--space-3); font-family: ui-monospace, monospace; }
.reader-card__address { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); }
.reader-card__address > label { font-weight: 700; font-size: var(--text-sm); }
.reader-card__input { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.reader-card__input input[type="text"] {
  font: inherit; color: var(--color-text); background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: 0.6875rem 1rem; flex: 1 1 12rem; min-width: 0;
}
.reader-card__input select {
  font: inherit; color: var(--color-text); background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: 0.6875rem 1rem; max-width: 100%;
}
.reader-card__input input[type="text"]:focus, .reader-card__input select:focus { border-color: var(--color-brand); outline: none; }
.reader-card__domain { font-family: ui-monospace, monospace; color: var(--color-text-muted); }
.reader-card__hint { font-size: var(--text-xs); color: var(--color-text-subtle); }
.reader-card__auto { margin: 0 0 var(--space-3); }
.reader-card__auto label { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
/* klauzula prawna: ma być czytelna, nie ukryta — drobny druk, ale nie szary szum */
.reader-card__clause { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }
/* „Ważne informacje”: widoczne od razu, bez rozwijania — bez nich wysyłka potrafi
   po cichu nie dojść (Amazon odrzuca nadawcę spoza listy klienta). Wydzielone tłem,
   żeby dało się je przeczytać, a nie tylko obejrzeć. */
.reader-card__notes {
  font-size: var(--text-sm); background: var(--color-surface-alt);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-top: var(--space-3);
}
.reader-card__notes h3 { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.reader-card__notes ul { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-muted); line-height: 1.55; }

/* odtwarzacz fragmentu */
.sample-player { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); }
.sample-player__play { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--color-brand); color: var(--color-on-brand); cursor: pointer; font-size: 0.75rem; flex: none; }
.sample-player__play:hover { background: var(--color-brand-hover); }
.sample-player__track { flex: 1; height: 4px; border-radius: 2px; background: var(--color-border-strong); position: relative; }
.sample-player__progress { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--color-accent); border-radius: 2px; }
.sample-player__time { font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---------- sekcje ---------- */
.section { padding-block: var(--space-7); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-5); gap: var(--space-4); }
.section__head h2 { margin: 0; }
.section__more { font-weight: 700; font-size: var(--text-sm); color: var(--color-accent-text); text-decoration: none; white-space: nowrap; }
.section__more:hover { color: var(--color-brand); }

/* ---------- responsywność ---------- */
@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .site-footer__logo { height: 64px; }
}
@media (max-width: 768px) {
  /* Na telefonie siatka nagłówka spłaszcza się do jednej kolumny: logo, potem akcje,
     potem wyszukiwarka na pełną szerokość, a na końcu działy sklepu. */
  .site-header__inner { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .logo-lockup { grid-row: auto; }
  .logo-lockup img { height: 56px; }
  .site-header__bar { flex-wrap: wrap; }
  .site-header__actions { order: 1; margin-left: 0; }
  .site-header .searchbar { order: 2; max-width: none; flex-basis: 100%; }
  .cart-line { grid-template-columns: 56px 1fr; }
  .cart-line .cover { width: 56px; }
  .library-item { grid-template-columns: 64px 1fr; }
  .library-item .cover { width: 64px; }
}

/* ---------- wybór formatu na stronie tytułu (e-book ↔ audiobook) ----------
   Katalog pokazuje dzieło jako jedną pozycję, więc to tutaj klient wybiera formę.
   Pozycja bieżąca jest ZAZNACZONA, a nie ukryta — ma być widać, na co się patrzy
   i ile kosztuje druga forma. */
.format-switch { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.format-switch__label { font-size: var(--text-sm); font-weight: 700; }
.format-switch__options { display: flex; flex-direction: column; gap: var(--space-2); }
.format-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); text-decoration: none; color: var(--color-text);
  transition: border-color .15s, background-color .15s;
}
a.format-option:hover { border-color: var(--color-brand); background: var(--color-surface-alt); }
.format-option--current { border-color: var(--color-brand); background: var(--color-surface-alt); }
.format-option__name { font-weight: 700; font-size: var(--text-sm); }
.format-option__price { font-weight: 700; font-size: var(--text-sm); }

/* linki do dokumentów prawnych w stopce — obowiązek informacyjny, nie ozdoba */
.site-footer__legal-links { margin-bottom: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.site-footer__legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }