/* ==========================================================================
   Cztery alternatywne nagłówki i strony główne: /wersja1/ … /wersja4/.
   Ten arkusz to część wspólna (szuflada mobilna, ikony narzędzi); każda
   wersja ma własny wersje-N.css ładowany po nim. Oba wyłącznie na tych
   stronach (page-wersja.php). Paleta, kroje i odstępy z tokenów motywu.
   ========================================================================== */

.ntb-wersja .ntb-main { width: 100%; }
.ntb-wersja-body .ntb-rail { display: none; }

/* --- wspólne: szuflada mobilna (#wersja-menu, :target) -------------------- */
.ntb-wm { position: fixed; inset: 0 auto 0 0; z-index: var(--z-panel); width: min(360px, 88vw); overflow-y: auto; padding: var(--s-4) var(--s-5) var(--s-8); background: var(--c-bg); border-right: var(--bw-hair) solid var(--c-line); transform: translateX(-104%); transition: transform var(--dur) var(--ease); }
/* Otwarcie: kotwica #wersja-menu, ale takze #wersja-szukaj z paska mobilnego
   (pole w srodku szuflady dostaje :target i fokus) - :has() dla nowych
   przegladarek, :focus-within jako zapas. */
.ntb-wm:target, .ntb-wm:has(:target), .ntb-wm:focus-within { transform: none; box-shadow: 24px 0 48px rgba(10, 10, 10, .12); }
.ntb-wm__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--touch); }
.ntb-wm__close { display: grid; place-items: center; width: var(--touch); height: var(--touch); margin-right: -10px; }
.ntb-wm__search { display: flex; height: 48px; margin-top: var(--s-3); border: var(--bw-hair) solid var(--c-ink); }
.ntb-wm__search__icon { width: 44px; display: grid; place-items: center; color: var(--c-ink-3); }
/* 16 px, nie `inherit`: iOS przybliża stronę po dotknięciu pola mniejszego
   niż 16 px, a viewport celowo nie blokuje powiększania (audyt mobile 23.09).
   Ten sam próg trzyma .ntb-search input w style.css. */
.ntb-wm__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-500); }
.ntb-wm__search button { width: 84px; border: 0; background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-200); letter-spacing: .1em; text-transform: uppercase; }
.ntb-wm__dept { border-bottom: var(--bw-hair) solid var(--c-line); }
.ntb-wm__dept summary { display: flex; align-items: center; gap: 12px; min-height: 52px; list-style: none; cursor: pointer; font-size: var(--fs-500); font-weight: var(--fw-medium); }
.ntb-wm__dept summary::-webkit-details-marker { display: none; }
.ntb-wm__dept summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: var(--bw-hair) solid var(--c-ink-3); border-bottom: var(--bw-hair) solid var(--c-ink-3); transform: rotate(45deg); }
.ntb-wm__dept[open] summary::after { transform: rotate(-135deg); }
.ntb-wm__dept ul { padding: 0 0 var(--s-3) 34px; }
.ntb-wm__dept li a { display: block; min-height: var(--touch); padding-block: 11px; font-size: var(--fs-400); color: var(--c-ink-2); }
.ntb-wm__links { margin-top: var(--s-5); }
.ntb-wm__links a { display: block; min-height: var(--touch); padding-block: 11px; font-size: var(--fs-400); }
.ntb-wm__contact { margin-top: var(--s-5); font-size: var(--fs-300); color: var(--c-ink-3); }
.ntb-wm__contact a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--c-ink); font-weight: var(--fw-medium); }
.ntb-wm__search:focus-within { outline: var(--bw-heavy) solid var(--c-ink); outline-offset: 2px; }
.ntb-wm__search input:focus { outline: none; }
/* Tło za otwartą szufladą: przyciemnia stronę i zamyka menu dotknięciem obok. */
.ntb-wm__backdrop { display: none; }
.ntb-wm:target + .ntb-wm__backdrop, .ntb-wm:has(:target) + .ntb-wm__backdrop, .ntb-wm:focus-within + .ntb-wm__backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-panel) - 1); background: var(--c-ink); opacity: .4; }
@media (min-width: 1024px) { .ntb-wm, .ntb-wm__backdrop { display: none !important; } }

/* Wspólne: ikony narzędzi. Selektor atrybutowy MUSI być zawężony do nagłówka:
   od 1.10.2026 ten arkusz jedzie na każdą stronę sklepu (wersja 6 jest
   nagłówkiem docelowym), a `[class*="__tools"]` łapało też pasek narzędzi
   listy `.ntb-toolbar__tools` (template-parts/toolbar.php) - czyli sortowanie
   na każdej kategorii, w /sklep/ i w wynikach wyszukiwania. Oba selektory mają
   tę samą wagę, a ten arkusz ładuje się po style.css, więc wygrywał i rozkładał
   pasek sortowania na flexa z odstępem 8 px. Nagłówki wersji noszą
   `data-ntb-header`, pasek listy nie - i to wystarcza za granicę. */
[data-ntb-header] [class*="__tools"] { display: flex; align-items: center; gap: 8px; }
[data-ntb-header] [class*="__tools__item"] { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--touch); min-height: var(--touch); }
[data-ntb-header] [class*="__tools__sum"] { font-size: var(--fs-400); font-weight: var(--fw-medium); white-space: nowrap; }
[data-ntb-header] [class*="__tools"] .ntb-count { position: absolute; top: 6px; right: 4px; }
[data-ntb-header] [class*="__tools__cart"] { padding-inline: 4px 10px; }