/* Baza nowej odsłony JNR — złożona z makiety projekt/strona-glowna-v1.html (zatwierdzonej przez właściciela).
   Kolejność: tokeny i reguły ogólne, przyciski, pasek, nagłówek, menu na telefonie, sekcje, karty, stopka, komputer, łamanie wierszy, dodatki.
   Nazwy klas jak w makietach — plany 02–05 dokładają moduły na uchwycie jnr-baza. */

:root {
  --brand: #3e68b2; --brand-dk: #2f5394; --brand-soft: #e8eef9;
  --navy: #14213d; --navy-rgb: 20, 33, 61; /* te same kanały co --navy: półprzezroczyste granaty bez color-mix (Safari 15.4) */ --ink: #18212e; --muted: #5b6677; --line: #e3e7ee; --bg: #f5f7fa;
  --ok: #18794e; --ok-soft: #e4f4ea;
  --r: 12px; --gut: 16px; --maxw: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.6 "Open Sans", system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
/* Blocksy robi z body kontener flex (np. na stronie wyników wyszukiwania); bez tego #main-container rośnie do szerokości paska .quick i cała strona przewija się w poziomie. */
#main-container { min-width: 0; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.h, h1, h2, h3 { font-family: Barlow, "Open Sans", sans-serif; letter-spacing: -.005em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.only-d { display: none !important; }
/* przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 14px 20px; font: 700 16px/1 Barlow, sans-serif; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dk); }
.btn-ghost { border-color: rgba(255,255,255,.8); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-line { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--brand); color: var(--brand); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 22px; font-size: 18px; }
/* pasek informacyjny */
.topbar { background: var(--navy); color: #dfe7f3; font-size: 12px; text-align: center; padding: 7px 10px; }
.topbar b { color: #fff; }
/* nagłówek */
/* Kotwice (#tab-reviews, #reviews, #comment-N, #respond, #tab-*) nie chowają się pod przyklejonym nagłówkiem. Celowo scroll-margin na tych
   elementach, nie scroll-padding na html: padding zmieniałby położenie przewijania każdego zrzutu elementu (testy pikselowe). */
[id^="tab-"], [id^="comment-"], #reviews, #respond { scroll-margin-top: calc(var(--hh, 126px) + 8px); }
.header { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
/* Pasek admina WP jest przyklejony (32 px, na ≤782 px 46 px, na ≤600 px przewija się z stroną) — nagłówek przykleja się pod nim. */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header { top: 0; } }
.hrow { display: grid; grid-template-columns: 44px 1fr 88px; align-items: center; gap: 8px; padding: 10px var(--gut); max-width: var(--maxw); margin: 0 auto; }
.logo { display: flex; justify-content: center; }
.logo img { height: 34px; width: auto; display: block; }
.icons { display: flex; justify-content: flex-end; gap: 16px; }
.ibtn { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); background: none; border: 0; padding: 4px; cursor: pointer; font: 600 13px/1 "Open Sans", sans-serif; }
.badge { position: absolute; top: -4px; right: -6px; background: var(--brand); color: #fff; font: 700 10px/16px Barlow, sans-serif; min-width: 16px; height: 16px; border-radius: 8px; text-align: center; padding: 0 4px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; color: var(--muted); }
.search input { border: 0; background: transparent; font: 14.5px/1 "Open Sans", sans-serif; padding: 11px 0; width: 100%; color: var(--ink); outline: none; }
.searchrow { padding: 0 var(--gut) 12px; max-width: var(--maxw); margin: 0 auto; }
.nav { display: none; }
/* menu mobilne */
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer.open { display: block; }
.drawer-bg { position: absolute; inset: 0; background: rgba(15,25,45,.5); }
.drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); background: #fff; display: flex; flex-direction: column; overflow-y: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-head img { height: 30px; }
.drawer nav a { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); font: 700 17px/1.2 Barlow, sans-serif; }
.drawer nav a small { font: 600 12.5px/1 "Open Sans", sans-serif; color: var(--muted); }
.drawer .sub a { font: 600 15px/1.2 "Open Sans", sans-serif; padding: 12px 18px; }
.drawer-foot { margin-top: auto; padding: 18px; background: var(--bg); display: grid; gap: 6px; font-size: 14px; }
.drawer-foot b { font: 700 16px/1 Barlow, sans-serif; }
/* sekcje */
.sec { padding: 30px 0 6px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.h2 { font: 800 24px/1.1 Barlow, sans-serif; margin: 0; }
.more { font: 700 14.5px/1 Barlow, sans-serif; color: var(--brand); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.more svg { width: 16px; height: 16px; }
/* karty produktów */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: #c9d4e6; box-shadow: 0 10px 24px -18px rgba(20,33,61,.45); }
.card-img { position: relative; background: var(--bg); }
.card-img img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; mix-blend-mode: multiply; }
.pill { position: absolute; left: 8px; top: 8px; font: 700 11px/1 Barlow, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); }
.pill.tag { left: auto; right: 8px; background: var(--brand-soft); color: var(--brand-dk); }
.card-b { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.bname { font: 700 11px/1 Barlow, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.name { font: 700 15px/1.2 Barlow, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.specs { font-size: 12px; color: var(--muted); line-height: 1.35; }
.buyrow { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.price { font: 800 20px/1 Barlow, sans-serif; white-space: nowrap; }
.add { width: 40px; height: 40px; border-radius: 10px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.add:hover { background: var(--brand-dk); }
/* stopka */
.footer { margin-top: 40px; background: var(--navy); color: #c7d2e3; font-size: 14px; }
.footer .wrap { padding-top: 30px; padding-bottom: 22px; display: grid; gap: 22px; }
.footer b { color: #fff; font: 700 16px/1.2 Barlow, sans-serif; display: block; margin-bottom: 8px; }
.fcols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fcols div { display: grid; gap: 6px; align-content: start; }
/* Plan 06 (a11y): podpis kolumny i nazwy firmy jako <p class="fhead"> w <nav> — wygląd 1:1 jak dawne <b>. */
.footer .fhead { color: #fff; font: 700 16px/1.2 Barlow, sans-serif; display: block; margin: 0 0 8px; }
.fcols .fcol { display: grid; gap: 6px; align-content: start; }
.fcols a:hover, .fcontact a:hover { color: #fff; }
.fcontact { display: grid; gap: 6px; }
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.pay span { background: rgba(255,255,255,.1); border-radius: 6px; padding: 5px 9px; font: 700 12.5px/1.2 Barlow, sans-serif; color: #fff; }
.legal { border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; font-size: 12.5px; color: #93a3bb; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ============ komputer ============ */
@media (min-width: 900px) {
  :root { --gut: 32px; }
  .only-m { display: none !important; }
  .only-d { display: initial !important; }
  .topbar { font-size: 13px; }
  .hrow { grid-template-columns: 230px 1fr 230px; gap: 30px; padding-top: 14px; padding-bottom: 14px; }
  .logo { justify-content: flex-start; }
  .logo img { height: 46px; }
  .hrow .search.only-d { display: flex !important; }
  .icons { gap: 22px; }
  .nav { display: flex; gap: 4px; max-width: var(--maxw); margin: 0 auto; padding: 0 calc(var(--gut) - 12px) 10px; }
  .nav a { font: 700 16px/1 Barlow, sans-serif; padding: 10px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; }
  .nav a:hover { background: var(--bg); }
  .nav a.cur { background: var(--brand-soft); color: var(--brand-dk); }
  .nav svg { width: 15px; height: 15px; }
  .nav .sp { margin-left: auto; }
  .sec { padding-top: 54px; }
  .h2 { font-size: 34px; }
  .grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .name { font-size: 17px; min-height: 41px; }
  .specs { font-size: 13px; }
  .price { font-size: 23px; }
  .footer .wrap { grid-template-columns: 1.2fr 2.6fr; padding-top: 46px; }
  .fcols { grid-template-columns: repeat(3, 1fr); }
  .footer .legal, .footer .pay { grid-column: 1 / -1; }
}

/* łamanie wierszy po polsku: krótkie teksty dzielone równo, akapity bez pojedynczego słowa w ostatniej linii */
h1, h2, h3, h4, summary, small, .lead, .hint, .d, .specs, .name, .nm, .fact span, .eyebrow, .tile span { text-wrap: balance; }
p, li, dd, td { text-wrap: pretty; }

/* --- dodatki wdrożeniowe (spec §5) --- */
:root {
  --text-2: #3a4553; --ctl: #cfd7e3; --field: #b9c3d1; --chk: #a9b4c4;
  --err: #c42b2b; --err-soft: #fdeeee;
  --warn: #7a4f00; --warn-soft: #fff1d6; --foot-1: #c7d2e3; --foot-2: #93a3bb;
}
body { font-family: "Open Sans", system-ui, sans-serif; background: #fff; }
.nw { white-space: nowrap; }
.fline { display: flex; gap: 8px; align-items: center; }
.fline .i { width: 17px; height: 17px; }
.fcontact .fline:first-of-type { margin-top: 6px; }
.badge[hidden] { display: none !important; }
[hidden] { display: none !important; }
.search { margin: 0; }
.search:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.footer .jnr-footer-seo-blurb, .footer .jnr-model-index { grid-column: 1 / -1; }
.stock.ostatnie-sztuki { color: var(--err); font-weight: 600; }
.stock.ograniczona-dostepnosc, .stock.dostepny, .stock.dostepny-od-reki { color: var(--ok); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }

/* --- zgodność z Blocksy ---
   main.min.css Blocksy ładuje się przed nami (zależność ct-main-styles), ale jego CSS z ustawień
   (<style id="ct-main-styles-inline-css">) wypisuje się w <head> PO nas — zmienne nadpisujemy więc przez html:root. */
html:root {
  --theme-normal-container-max-width: var(--maxw); /* kontener Blocksy = nasz */
  --theme-palette-color-1: #3e68b2; /* kolor akcji Blocksy/WooCommerce = --brand */
  --theme-palette-color-2: #2f5394; /* hover = --brand-dk */
}
html body { background: #fff; }
/* Blocksy: a:hover { color: var(--theme-link-hover-color) }. Makieta nie zmienia koloru linków po najechaniu —
   kolorowe linki (przyciski, „więcej”) mają własny :hover poniżej i w modułach stron. */
a:hover { color: inherit; }
/* Linki w treści (WCAG 1.4.1): reset z makiety zdejmuje kolor i podkreślenie ze wszystkich <a>, więc w treści stron,
   opisach produktów, zakładkach, opisach kategorii i komunikatach WooCommerce przywracamy je — kolor marki + podkreślenie.
   Tylko linki bez klasy: przyciski (.btn, .button), karty i inne komponenty mają klasy i zachowują wygląd z makiety;
   nagłówek, szuflada i stopka stoją poza tymi kontenerami. Wybrałem regułę „dla treści” zamiast zawężania resetu do
   elementów strony, bo reset trzyma zatwierdzony wygląd nagłówka/stopki 1:1 i nie ryzykuje wycieku stylów Blocksy do nich.
   Specyficzność (0,0,1) jak reset `a` (wygrywa kolejnością w pliku), a :hover (0,1,1) jak `a:hover` wyżej — więc moduły
   planów 02–05 nadpisują to zwykłą klasą, bez wyścigu specyficzności. */
:where(.entry-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .term-description, .woocommerce-info, .woocommerce-message, .woocommerce-error) a:where(:not([class])) {
  color: var(--brand); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px;
}
:where(.entry-content, .woocommerce-product-details__short-description, .woocommerce-Tabs-panel, .term-description, .woocommerce-info, .woocommerce-message, .woocommerce-error) a:where(:not([class])):hover {
  color: var(--brand-dk); text-decoration-thickness: 2px;
}
.btn-primary:hover, .btn-ghost:hover { color: #fff; }
.more:hover { color: var(--brand); }
/* Blocksy: a:focus, button:focus { outline: none } i 2-pikselowy obrys — przegrywa z tym tylko wyższa specyficzność. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; } /* <main id="main" tabindex="-1"> po „Przejdź do treści” */
/* Pole wyszukiwania: Blocksy nadaje polom wysokość 40 px, ramkę, tło, zaokrąglenie i appearance: none. */
.search input[type="search"] { appearance: auto; height: auto; width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: none;
  padding: 11px 0; font: 14.5px/1 "Open Sans", sans-serif; letter-spacing: normal; text-transform: none; color: var(--ink); outline: none; }
.search input[type="search"]::placeholder { color: #757575; opacity: 1; }
/* Link „Przejdź do treści” (wypisuje go Blocksy jako .skip-link.screen-reader-text). */
.skip-link.screen-reader-text:focus { top: 8px; left: 8px; z-index: 100; background: #fff; color: var(--ink); font: 700 15px/1.2 "Open Sans", sans-serif;
  padding: 10px 14px; border-radius: 10px; box-shadow: 0 10px 24px -18px rgba(20,33,61,.45); outline: 3px solid var(--brand); outline-offset: 2px; }

/* --- plan 02: kafle i karty na listach, wspólne sekcje strony głównej i listy, komunikat --- */
/* Reset linków z makiety jest globalny (początek pliku) — kontenery .j-dom / .j-lista go nie powtarzają. */
ul.grid { list-style: none; margin: 0; padding: 0; }
.grid > li { display: flex; min-width: 0; margin: 0; }
.grid > li > .card { flex: 1; min-width: 0; }
.card-img img { height: auto; }
.card .name { margin: 0; color: var(--ink); } /* <h2>/<h3> z nazwą — bez marginesów i koloru nagłówków Blocksy */
.card .name a:hover { color: var(--brand-dk); }
.pill.out { background: #eceff3; color: var(--muted); }
.card.oos .card-img img { opacity: .5; }
.card.oos .price { color: var(--muted); }
.add { flex: none; }
.add:hover { color: #fff; }
.add.see { background: #fff; color: var(--brand); border: 1px solid var(--line); }
.add.see:hover { border-color: var(--brand); background: #fff; color: var(--brand); }
.add.loading { opacity: .6; pointer-events: none; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* poradnik — granatowy blok (strona główna i lista) */
.guide { margin-top: 30px; border-radius: 18px; background: var(--navy); color: #fff; padding: 24px 18px; display: grid; gap: 16px; }
.guide .h2 { color: #fff; }
.guide p { margin: 0; color: #c9d5e8; font-size: 14.5px; }
.guide-txt { display: grid; gap: 10px; }
.guide-act { display: grid; gap: 14px; }
.guide-act > .btn { justify-self: start; }
.guide .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 9px 13px; font: 700 14px/1 Barlow, sans-serif; }
.chip:hover { background: rgba(255,255,255,.12); color: #fff; }
/* tekst SEO strony głównej i opis kategorii */
.about { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 26px; }
.about-in { max-width: 860px; }
.about h2 { font: 800 21px/1.2 Barlow, sans-serif; margin: 22px 0 8px; color: var(--ink); }
.about h2:first-of-type { margin-top: 0; }
.about h3 { font: 800 18px/1.25 Barlow, sans-serif; margin: 18px 0 6px; break-after: avoid; color: var(--ink); }
.about p { margin: 0 0 10px; color: var(--text-2); font-size: 14.5px; }
/* Linki w tekście odróżnione nie tylko kolorem (WCAG 1.4.1) — odstępstwo od makiety, gdzie wyglądały jak tekst. */
.about p a, .about li a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.about details summary { list-style: none; cursor: pointer; font: 700 15px/1 Barlow, sans-serif; color: var(--brand); display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; }
.about details summary::-webkit-details-marker { display: none; }
.about details[open] summary { display: none; }
.about .links { display: flex; gap: 14px; margin-top: 8px; font: 700 15px/1 Barlow, sans-serif; color: var(--brand); }
/* komunikat po dodaniu do koszyka */
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--navy); color: #fff; border-radius: 12px; padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); transition: opacity .2s, transform .2s; width: max-content; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast svg { color: #8fd3ad; }
.toast a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* TEL-4: ikona z lewej, obok blok .tresc (tekst + dwa linki); linki idą obok tekstu albo, gdy brak miejsca (telefon), pod nim; link zawija się cały;
   „Przejdź do koszyka” główne, „Kontynuuj zakupy” zwykłą wagą; obszar dotyku ≥ 24 px (tu 32) */
.toast { align-items: flex-start; }
.toast > svg { margin-top: 2px; flex: none; }
.toast .tresc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; min-width: 0; }
.toast .tresc > span:first-child { min-width: 0; overflow-wrap: anywhere; padding: 4px 0; }
.toast .akcje { display: flex; flex-wrap: wrap; gap: 0 16px; }
.toast .akcje a { display: inline-flex; align-items: center; min-height: 32px; }
.toast .akcje a.wtorny { font-weight: 400; color: rgba(255,255,255,.88); }
.toast a:focus-visible { outline-color: #fff; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media (min-width: 900px) {
  .guide { margin-top: 54px; padding: 40px 46px; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 30px; }
  .guide .h2 { font-size: 36px; }
  .about { margin-top: 60px; padding-top: 40px; }
  .about h2 { font-size: 24px; }
  .about details > .rest { columns: 2; column-gap: 40px; }
  .about details > .rest > h2:first-child, .about details > .rest > p:first-child { margin-top: 0; }
}

/* --- zgodność z Blocksy (wspólna dla strony głównej i list) --- */
/* Blocksy kolorem palety nadpisuje ceny kart, nagłówki sekcji i FAQ oraz dodaje dolny margines każdemu <label> (m.in. przełącznikowi). */
.card:not(.oos) .price { color: var(--ink); }
.j-dom .feature h2, .j-dom .panel h2, .j-dom .sec h2, .j-faq .h2 { color: var(--ink); }
label.switch { margin-top: 0; margin-bottom: 0; }

/* --- plan 05: linki WooCommerce z klasami (WCAG 1.4.1). Reguła treści z :where(…) a:where(:not([class])) łapie tylko linki bez klasy,
   a te stoją w tekście: zgoda z polityką prywatności przy rejestracji, regulamin w zamówieniu, „Kliknij, aby się zalogować” itd. --- */
a.woocommerce-privacy-policy-link, a.woocommerce-terms-and-conditions-link, .woocommerce-info a.showlogin, .woocommerce-info a.showcoupon {
  color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px;
}
a.woocommerce-privacy-policy-link:hover, a.woocommerce-terms-and-conditions-link:hover, .woocommerce-info a.showlogin:hover, .woocommerce-info a.showcoupon:hover {
  color: var(--brand-dk); text-decoration-thickness: 2px;
}

/* --- plan 05: baner cookies Complianz w kolorach i fontach marki (spec §6.9). Zmienne Complianz stoją na :root
   (wp-content/uploads/complianz/css/banner-*.css), więc html:root wygrywa bez !important. Ustawień Complianz w bazie nie zmieniamy —
   powrót na Salienta przywraca dzisiejszy wygląd sam. --- */
html:root {
  --cmplz_button_accept_background_color: var(--brand); --cmplz_button_accept_border_color: var(--brand); --cmplz_button_accept_text_color: #fff;
  --cmplz_button_deny_background_color: #fff; --cmplz_button_deny_border_color: var(--ctl); --cmplz_button_deny_text_color: var(--ink);
  --cmplz_button_settings_background_color: #fff; --cmplz_button_settings_border_color: var(--ctl); --cmplz_button_settings_text_color: var(--ink);
  --cmplz_hyperlink_color: var(--brand); --cmplz_text_color: var(--ink); --cmplz_banner_border_radius: 16px; --cmplz_button_border_radius: 10px;
  --cmplz_slider_active_color: var(--brand); --cmplz_slider_inactive_color: var(--muted); --cmplz_category_header_always_active_color: var(--brand-dk);
}
.cmplz-cookiebanner { font-family: "Open Sans", system-ui, sans-serif; box-shadow: 0 16px 40px -20px rgba(20,33,61,.45); }
.cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner .cmplz-btn { font-family: Barlow, "Open Sans", sans-serif; font-weight: 700; }
.cmplz-cookiebanner .cmplz-link { text-decoration: underline; text-underline-offset: 2px; }

/* Telefon (do 600 px; decyzja właściciela, P06-NOC-DROBNE p. 7): baner zgody mały i przypięty do dołu, żeby nie zasłaniał przycisków formularzy.
   Komputer bez zmian (okno na środku). Tylko CSS motywu, ustawień Complianz w bazie nie zmieniamy (pod Salientem nic się nie zmienia).
   Wysokość ≤ 40% ekranu: treść i kategorie przewijają się w .cmplz-body, a wiersz przycisków jest przyklejony na dole banera.
   Złożoność selektorów (html body …) przebija CSS Complianz bez !important; wyjątek: pointer-events — Complianz blokuje całą stronę !important,
   a tu baner nie jest oknem modalnym (strona musi dać się przewijać i klikać ponad nim). Odstęp pod treścią: --j-baner z js/odstep-banera.js. */
@media (max-width: 600px) {
  html body .cmplz-cookiebanner { position: fixed; top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none; margin: 0;
    max-height: 40vh; max-height: 40dvh; box-sizing: border-box; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; gap: 0;
    box-shadow: 0 -10px 30px -12px rgba(20,33,61,.5); }
  html body .cmplz-cookiebanner .cmplz-divider { display: none; }
  html body .cmplz-cookiebanner .cmplz-header { position: absolute; top: 0; right: 0; display: block; width: auto; z-index: 2; }
  html body .cmplz-cookiebanner .cmplz-header .cmplz-logo, html body .cmplz-cookiebanner .cmplz-header .cmplz-title { display: none; }
  html body .cmplz-cookiebanner .cmplz-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  html body .cmplz-cookiebanner .cmplz-body { min-width: 0; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 0; }
  html body .cmplz-cookiebanner .cmplz-message { font-size: 14px; line-height: 1.4; margin: 0 38px 8px 0; }
  html body .cmplz-cookiebanner .cmplz-categories .cmplz-category-title, html body .cmplz-cookiebanner .cmplz-categories .cmplz-description { font-size: 14px; }
  html body .cmplz-cookiebanner .cmplz-buttons { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 4px 0 0; background: var(--cmplz_banner_background_color, #fff); }
  html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: auto; min-height: 44px; padding: 8px 10px; font-size: 15px; flex: 1 1 calc(50% - 4px); width: auto; }
  html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences, html body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { flex-basis: 100%; }
  html body .cmplz-cookiebanner .cmplz-links { font-size: 14px; }
  html body .cmplz-cookiebanner .cmplz-links ul { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 6px 0 0; padding: 0; list-style: none; }
  html body .cmplz-cookiebanner .cmplz-links a { display: inline-block; padding: 8px 0; font-size: 14px; }
  html body #cmplz-cookiebanner-container.cmplz-soft-cookiewall { position: static; width: auto; height: auto; background: none; backdrop-filter: none; } /* „miękka ściana” Complianz (pojemnik na cały ekran: przyciemnienie i blokada kliknięć) — tu baner nie jest oknem modalnym */
  html body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) { pointer-events: auto !important; user-select: auto !important; }
  /* stany przejściowe motywu z pointer-events: none (blokada podwójnego stuknięcia, ukryty komunikat) zostają — specyficzność wyższa niż reguła wyżej */
  html body.cmplz-banner-active :is(.btn.loading, .add.loading, .j-dodaj.loading, .cform.processing, .toast:not(.on), .cats-wrap.dragging .cat) { pointer-events: none !important; }
  /* tylko gdy baner jest widoczny (klasa z odstep-banera.js): bez niej zrzuty i przewijanie elementów (testy pikselowe) zostają jak były */
  html.j-baner-on body:not(.j-strona-sklepu) { padding-bottom: var(--j-baner, 0px); }
  html.j-baner-on { scroll-padding-bottom: calc(var(--j-baner, 0px) + 16px); }
  /* warstwy przyklejone do dołu ekranu nad banerem (specyficzność wyższa niż produkt.css/lista.css, które ładują się później) */
  html.j-baner-on .toast { bottom: calc(20px + var(--j-baner, 0px)); }
  html.j-baner-on body.jnr-pasek-on .toast { bottom: calc(96px + env(safe-area-inset-bottom) + var(--j-baner, 0px)); }
  html.j-baner-on .filters { bottom: var(--j-baner, 0px); max-height: calc(88vh - var(--j-baner, 0px)); }
  html.j-baner-on .drawer-panel { bottom: var(--j-baner, 0px); }
}

/* Complianz: pole zgody leży poza <summary> (nadpisany szablon complianz-gdpr/templates/cookiebanner.php; axe nested-interactive).
   Wiersz kategorii to div.cmplz-category.jnr-cmplz-kat, pole stoi przed <details> (kolejność Tab: pole, potem nagłówek), a układ robi CSS:
   pole nałożone na prawą część nagłówka (środek wysokości 35-pikselowego nagłówka, kolumna przed ikoną rozwinięcia). */
body .cmplz-categories .cmplz-category.jnr-cmplz-kat { position: relative; }
body .cmplz-categories .cmplz-category.jnr-cmplz-kat > .cmplz-banner-checkbox { position: absolute; top: 17.5px; right: 45px; transform: translateY(-50%); display: flex; align-items: center; margin: 0; z-index: 2; }
body .cmplz-categories .cmplz-category .jnr-cmplz-szczegoly[open] .cmplz-category-header .cmplz-icon.cmplz-open { transform: rotate(180deg); } /* oryginał: .cmplz-category[open] — nasz <details> nie ma już tej klasy */
.jnr-cmplz-szczegoly > summary { list-style: none; }