/* ============================================================
   ADRIO — layouty konkretnych stron
   Wymaga tokens.css i adrio.css.

   W pakiecie identyfikacji te reguły siedziały w blokach <style> poszczególnych
   stron (home.html, kategoria.html, produkt.html, koszyk.html, checkout.html,
   konto-biblioteka.html). Przeniesione tu 1:1 — motyw nie ma własnego wyglądu,
   tylko odtwarza pakiet. Nowych reguł tu NIE dopisujemy „bo tak wygodniej”:
   jeśli czegoś brakuje, brakuje tego w design systemie i tam trzeba to dodać.

   Wyjątek, opisany niżej: sekcja WOOCOMMERCE. WooCommerce narzuca własne klasy
   (.woocommerce-*) tam, gdzie nie da się ich wyłączyć — sprowadzamy je do wyglądu
   komponentów Adrio, zamiast dopisywać nowy język wizualny.
   ============================================================ */

/* ---------- pasek górny ---------- */
/* W pakiecie linki paska górnego miały inline `display:flex;gap:1.25rem`. W motywie
   generuje je wp_nav_menu(), któremu nie da się wstrzyknąć stylu inline — stąd klasa. */
.topbar__links { display: flex; gap: 1.25rem; }

/* ---------- strona główna ---------- */

/* Baner: karuzelę rysuje MetaSlider (patrz inc/banner.php), my dajemy jej tylko miejsce.
   Wtyczka wypisuje własną szerokość w atrybucie `style` kontenera — stąd `!important`,
   bez tego baner nie zwęziłby się na wąskim ekranie. To jedyne miejsce, gdzie motyw
   nadpisuje wtyczkę siłowo, i jedyne, gdzie inaczej się nie da. */
.banner { padding-top: var(--space-5); }
.banner .metaslider { max-width: 100% !important; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; }
.banner .metaslider img { border-radius: 0; }

/* Układ strony głównej: kategorie po lewej, tytuły po prawej. */
.home-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-7); align-items: start; padding-block: var(--space-6); }
.home-main { min-width: 0; }
.home-main .section:first-child { padding-top: 0; }

.home-cats { position: sticky; top: var(--space-4); }
.home-cats__title { font-size: var(--text-md); margin-bottom: var(--space-3); }
.home-cats__list { display: flex; flex-direction: column; }
.home-cats__link {
  display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline;
  padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text); text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.home-cats__link:hover { color: var(--color-brand); }
.home-cats__link--strong { font-weight: 700; }
.home-cats__count { color: var(--color-text-subtle); font-size: var(--text-xs); }
.home-cats__all { display: inline-block; margin-top: var(--space-4); font-size: var(--text-sm); font-weight: 700; color: var(--color-brand); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
.cat-tile { background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); font-weight: 700; font-size: var(--text-sm); color: var(--color-brand); text-decoration: none; }
.cat-tile:hover { border-color: var(--color-brand); color: var(--color-brand); }

.promo-band { background: var(--color-accent); }
.promo-band__inner { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-6); }
.promo-band__kicker { font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--raw-amber-700); margin-bottom: var(--space-1); }

.usp { background: var(--color-surface-alt); border-block: 1px solid var(--color-border); padding-block: var(--space-6); }
.usp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.usp__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.usp__item img { width: 34px; flex: none; }
.usp__item p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

@media (max-width: 900px) {
  .home-layout { grid-template-columns: 1fr; }
  /* Na telefonie kategorie nie mają być ścianą tekstu przed pierwszą książką. */
  .home-cats { position: static; }
  .home-cats__list { flex-flow: row wrap; gap: var(--space-2); }
  .home-cats__link { border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; }
  .home-cats__count { display: none; }
}

/* ---------- listing: kategoria, widoki i wyniki wyszukiwania ---------- */
.listing { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-7); align-items: start; }
/* Gdy żaden filtr nie ma czego pokazać, kolumna filtrów w ogóle się nie renderuje
   (patrz woocommerce/archive-product.php) — siatka musi wtedy być jednokolumnowa,
   inaczej lista zaczynałaby się od pustych 240px. */
.listing--wide { grid-template-columns: 1fr; }
.listing__filters { min-width: 0; }
.listing__filters .facet:first-child { border-top: 0; padding-top: 0; }
.listing__toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.listing__count { color: var(--color-text-muted); font-size: var(--text-sm); }
mark { background: var(--color-promo-bg); color: inherit; border-radius: 2px; padding-inline: 1px; }

@media (max-width: 900px) {
  .listing { grid-template-columns: 1fr; }
}

/* ---------- strona produktu ----------

   UWAGA — NIE nazywaj tej klasy `.product`. Tak było i to był błąd, który psuł
   CAŁY katalog: `wc_product_class()` dokleja klasę `product` do KAŻDEJ karty
   w siatce, więc trzykolumnowy układ strony tytułu trafiał w kafelki. Okładka
   dostawała wtedy sztywne 300px (albo 240px poniżej 1024px) w komórce szerokiej
   na 190px i wychodziła na sąsiednią kartę, a tytuł, autor i cena rozłaziły się
   po osobnych kolumnach siatki. Stąd „okładki się nakładają i są nieczytelne”.

   Zasada na przyszłość: klasy, które generuje WooCommerce (`product`, `sale`,
   `instock`, `first`, `last`, `downloadable`, `virtual`…) są JEGO. Własne układy
   nazywamy tak, żeby nie mogły się z nimi spotkać. */
.product-page { display: grid; grid-template-columns: 300px 1fr 320px; gap: var(--space-7); align-items: start; padding-block: var(--space-4) var(--space-7); }
.buy-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.meta-table { font-size: var(--text-sm); border-collapse: collapse; width: 100%; }
.meta-table th { text-align: left; color: var(--color-text-muted); font-weight: 400; padding: 0.375rem 1rem 0.375rem 0; white-space: nowrap; vertical-align: top; }
.meta-table td { padding: 0.375rem 0; }
.desc { max-width: 60ch; }
.desc p { text-wrap: pretty; }

/* Strona treściowa (regulamin, polityka, deklaracja dostępności) — PEŁNA szerokość
   kontenera, a nie kolumna 60 znaków (decyzja właściciela 20.08.2026: „prawa połowa
   ekranu jest pusta”). Dokumentu prawnego nie czyta się ciągiem, tylko szuka się w nim
   akapitu, więc szeroki wiersz kosztuje tu mniej niż pół pustego ekranu.
   Odstępy przed nagłówkami muszą wtedy urosnąć — bez nich sekcje zlewają się w ścianę. */
.page-doc { max-width: none; }
.page-doc h2 { margin-top: var(--space-7); }
.page-doc h3 { margin-top: var(--space-5); }
.page-doc p, .page-doc li { text-wrap: pretty; }
.page-doc ul, .page-doc ol { padding-left: 1.25rem; }
.page-doc li { margin-bottom: var(--space-2); }

@media (max-width: 1024px) {
  .product-page { grid-template-columns: 240px 1fr; }
  .buy-box { grid-column: 1 / -1; position: static; }
}
@media (max-width: 640px) {
  .product-page { grid-template-columns: 1fr; }
}

/* ---------- koszyk ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-7); align-items: start; padding-block: var(--space-4) var(--space-8); }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
}

/* ---------- checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-7); align-items: start; padding-block: var(--space-5) var(--space-8); max-width: 1000px; margin-inline: auto; }
.pay-option { display: flex; align-items: center; gap: var(--space-3); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; font-weight: 700; font-size: var(--text-sm); }
.pay-option:hover { border-color: var(--color-brand); }
.pay-option input { accent-color: var(--color-brand); width: 1.125rem; height: 1.125rem; }
.pay-option.is-selected { border-color: var(--color-brand); background: var(--color-surface-alt); }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
}

/* ---------- strony sklepu składane z bloków (Koszyk, Zamówienie, Moje konto) ----------

   DODATEK MOTYWU — nie ma tego w systemie projektowym, bo w pakiecie koszyk i checkout
   są własnymi makietami (.cart-layout, .checkout-layout), a na produkcji rysuje je
   WooCommerce blokami. Bloki mają własny układ „treść + podsumowanie z boku" i same
   przełączają się na jedną kolumnę poniżej 700px SZEROKOŚCI WŁASNEGO KONTENERA
   (`container-type: inline-size` na .wp-block-woocommerce-cart / -checkout).

   Nam zostaje jedno: dać im tę szerokość i wyśrodkować. 1000px to tyle, co makieta
   checkoutu z pakietu (.checkout-layout) — bloki zmieszczą w niej formularz i kolumnę
   podsumowania, a całość stoi na środku strony, a nie przy krawędzi. */
.shop-page { max-width: 1000px; margin-inline: auto; }
.shop-page .wp-block-woocommerce-cart,
.shop-page .wp-block-woocommerce-checkout { margin-inline: auto; }

/* ---------- konto / Moja półka ---------- */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-7); align-items: start; padding-block: var(--space-5) var(--space-8); }
.account-nav { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); font-weight: 600; }
.account-nav a { color: var(--color-text); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.account-nav a:hover { background: var(--color-surface-alt); color: var(--color-brand); }
.account-nav a[aria-current="page"] { background: var(--color-brand); color: var(--color-on-brand); }
.library-list { display: flex; flex-direction: column; gap: var(--space-3); }
.library-toolbar { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; }
.library-toolbar .searchbar { max-width: 320px; }

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   WOOCOMMERCE — sprowadzenie narzuconych klas do języka Adrio

   Własne style WooCommerce są wyłączone (patrz inc/woocommerce.php), ale część
   markupu generuje sam WooCommerce i nie da się jej przepisać szablonem: komunikaty,
   pola formularza checkoutu, tabela pobrań. Zamiast pisać dla nich nowy wygląd,
   podpinamy je pod istniejące komponenty.
   ============================================================ */

/* Komunikaty Woo → komponent .alert */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  list-style: none;
}
.woocommerce-message { background: var(--color-success-bg); color: var(--raw-green-700); }
.woocommerce-error { background: var(--color-danger-bg); color: var(--color-danger); }
.woocommerce-info { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.woocommerce-message a, .woocommerce-error a, .woocommerce-info a { font-weight: 700; }

/* Pola generowane przez Woo (checkout, logowanie) → komponent .field / .input */
.woocommerce form .form-row { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.woocommerce form .form-row label { font-weight: 700; font-size: var(--text-sm); }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row select,
.woocommerce form .form-row 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%;
}
.woocommerce form .form-row .input-text:focus-visible,
.woocommerce form .form-row select:focus-visible { border-color: var(--color-brand); outline-offset: 0; }

/* „Pokaż hasło” na logowaniu, rejestracji i w ustawieniach konta.

   Ten przełącznik dokłada JavaScript WooCommerce: opakowuje pole w `.password-input`
   i wstawia za nim PUSTY `<span class="show-password-input">`. Cała jego treść to
   ikona z arkusza WooCommerce, a ten mamy wyłączony (patrz inc/woocommerce.php) —
   więc na naszym sklepie zostawał niewidoczny kwadracik, w który trzeba było trafić
   na wyczucie.

   Zamiast odtwarzać ich ikonę oka dajemy SŁOWO. „Pokaż” i „Ukryj” czyta się bez
   domyślania się, działa w każdej przeglądarce i nie wymaga ani obrazka, ani fontu
   z ikonami. Klasę `display-password` przestawia WooCommerce, więc podpis zmienia się
   sam — bez naszego JavaScriptu.

   ⚠ To jest `<span>` wstawiony przez WooCommerce, więc nie da się go dosięgnąć
   klawiszem Tab. Nie naprawiamy tego tutaj (wymagałoby to podmiany ich skryptu),
   ale pole hasła działa bez niego — przełącznik jest ułatwieniem, nie warunkiem. */
.woocommerce .password-input,
.woocommerce-page .password-input { display: block; position: relative; width: 100%; }

.woocommerce .password-input .input-text,
.woocommerce-page .password-input .input-text { padding-right: 5rem; }

.woocommerce .show-password-input,
.woocommerce-page .show-password-input {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 700; line-height: 1;
  color: var(--color-brand); cursor: pointer; user-select: none;
  background: none;
}
.woocommerce .show-password-input::after,
.woocommerce-page .show-password-input::after { content: "Pokaż"; }
.woocommerce .show-password-input.display-password::after,
.woocommerce-page .show-password-input.display-password::after { content: "Ukryj"; }
.woocommerce .show-password-input:hover,
.woocommerce-page .show-password-input:hover { background: var(--color-surface-alt); color: var(--color-brand-hover); }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--color-danger); }
.woocommerce .required { color: var(--color-danger); text-decoration: none; }

/* Sortowanie katalogu („Domyślne sortowanie”, „Sortuj wg ceny…”) → komponent .select

   Ten <select> rysuje `woocommerce_catalog_ordering()` i nie da się go zastąpić szablonem
   bez przepisania listy opcji, którą WooCommerce składa z ustawień sklepu i wtyczek.
   Podpinamy go więc pod komponent listy rozwijanej z systemu projektowego: te same
   obramowanie, promień, wysokość i ta sama rysowana strzałka (patrz .select w adrio.css).
   Różnica jest jedna: w pasku nad listą pole ma być wąskie i dopasowane do treści,
   a nie na całą szerokość jak w formularzu. */
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select,
.woocommerce-ordering select.orderby {
  appearance: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-surface);
  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.125rem center, right 0.75rem center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 0.5rem 2.25rem 0.5rem 1.125rem;
  width: auto;
  max-width: 100%;
  cursor: pointer;
  transition: border-color .15s;
}
.woocommerce-ordering select:hover { border-color: var(--color-text-subtle); }
.woocommerce-ordering select:focus-visible { border-color: var(--color-brand); outline-offset: 0; }
.woocommerce-ordering select::-ms-expand { display: none; }

/* Przyciski WooCommerce → komponent .btn

   WooCommerce wypisuje „Zapłać" i „Anuluj" w podsumowaniu zamówienia jako gołe `<a>`
   BEZ ŻADNEGO ODSTĘPU między nimi — bez własnych stylów Woo wychodziło z tego jedno
   słowo „ZapłaćAnuluj". Ubieramy je w przyciski i rozdzielamy odstępem. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.woocommerce-button,
.woocommerce button.woocommerce-button {
  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-sm);
  padding: 0.5rem 1.125rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--color-brand); color: var(--color-on-brand);
  transition: background-color .15s, color .15s, border-color .15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.woocommerce-button:hover,
.woocommerce button.woocommerce-button:hover { background: var(--color-brand-hover); color: var(--color-on-brand); }

/* „Anuluj" kasuje zamówienie — nie może wyglądać jak główne działanie na stronie. */
.woocommerce a.button.cancel {
  background: transparent; color: var(--color-brand); border-color: var(--color-brand);
}
.woocommerce a.button.cancel:hover { background: var(--color-surface-alt); color: var(--color-brand); }

/* Komórka z działaniami i blok „nieudana płatność" — przyciski obok siebie, z odstępem. */
.woocommerce .order-actions--heading + td,
.woocommerce .woocommerce-thankyou-order-failed-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
}

/* Tabela podsumowania zamówienia → wygląd .meta-table */
.woocommerce-table--order-details { font-size: var(--text-sm); border-collapse: collapse; width: 100%; }
.woocommerce-table--order-details th,
.woocommerce-table--order-details td { text-align: left; padding: var(--space-2) 1rem var(--space-2) 0; vertical-align: top; }
.woocommerce-table--order-details thead th { border-bottom: 1px solid var(--color-border-strong); }
.woocommerce-table--order-details tfoot th { color: var(--color-text-muted); font-weight: 400; white-space: nowrap; }
.woocommerce-table--order-details tfoot tr:first-child th,
.woocommerce-table--order-details tfoot tr:first-child td { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

/* Kafelek ze statusem zamówienia (patrz inc/woocommerce.php) */
.order-status__meta { color: inherit; margin: var(--space-1) 0 0; }
.order-status__meta:last-child { margin-bottom: 0; }

/* Metody płatności na checkoucie → komponent .pay-option */
.wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wc_payment_method label { display: flex; align-items: center; gap: var(--space-3); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; font-weight: 700; font-size: var(--text-sm); }
.wc_payment_method label:hover { border-color: var(--color-brand); }
.wc_payment_method input { accent-color: var(--color-brand); width: 1.125rem; height: 1.125rem; }
.wc_payment_method .payment_box { font-size: var(--text-sm); color: var(--color-text-muted); padding: var(--space-2) var(--space-4) 0; }
.wc_payment_method .payment_box p:last-child { margin-bottom: 0; }