/* Rama strony Feuer.pl — header, okruszki, link wstecz (task01.09);
   rozwinięcia menu dokłada task01.16, stopkę task01.21.
   Wg FeuerDS: Header 7:8841 (jasny) / Header Black 7:24241 (ciemny), wariant Default;
   Header mobile 104:567 / 104:598; okruszki 2:3542 (Strona produktowa Desktop 2:3069)
   z listami 2:4048 / 2:4547; link wstecz 2:2646 (Strona produktowa Mobile 2:2253).
   Bez wyszukiwarki i koszyka (docs/typy-stron.md), bez sticky (decyzja 2026-09-12).
   Wariant ciemny = klasa tła .tlo-ciemne na <header> (tokeny.css), bez modyfikatorów
   per element. Układ desktop/mobile przełącza container query po szerokości
   komponentu, nie okna: na stronie przeglądowej belka mobile mieści się w wąskim
   pudełku, na realnym ekranie kontener = okno. Tabletu DS nie projektuje — poniżej
   1024 px belka mobile (jak sekcje otwierające). Hover linków headera, pozycji menu
   i podpozycji panelu niezaprojektowany — tekst czerwony na obu tłach (decyzja użytkownika
   2026-09-12, rejestr; sekcja „Menu główne — rozwinięcie"). */

/* ---- Header (K7) ---- */

.naglowek {
  container-type: inline-size;
  max-width: 90rem;                /* stop skali z task01.06 — jak sekcje (siatka.css); powyżej 1920 px header stoi wycentrowany, nie na całe okno (uwaga użytkownika 2026-09-17) */
  margin-inline: auto;
  background: var(--kolor-tla);
  color: var(--kolor-tekstu);
  font-family: var(--font-podstawowy);
}

.naglowek.tlo-ciemne { background: var(--kolor-ciemny); }

.naglowek .kontener { padding-block: var(--odstep-3); }   /* 24 — DS padding 24/118, wysokość 156 */

/* Wiersz górny 36: logo | linki pomocnicze | akcje — równe odstępy (DS: SPACE_BETWEEN,
   146 przy wyszukiwarce); bez wyszukiwarki blok akcji jest węższy, linki wędrują z nim.
   Linia rozdzielająca 24 pod wierszem: w DS jasnym #ededed → kanon linii
   (decyzja 2026-09-12, rejestr spojnosc-designu.md); na ciemnym #ffffff 20%. */
.naglowek-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  padding-bottom: calc(var(--odstep-3) - 1px);   /* linia mieści się w 156 px (w Figmie linia bez wysokości) */
  border-bottom: 1px solid var(--kolor-linii);
}

.tlo-ciemne .naglowek-gora { border-bottom-color: rgba(255, 255, 255, 0.2); }

.naglowek-linki {
  display: flex;
  gap: var(--odstep-3);          /* 24 */
  font-size: var(--tekst-14);
  line-height: 1.375rem;         /* 14/22 */
}

.naglowek-linki a { color: inherit; text-decoration: none; }

.naglowek-akcje {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);          /* 16 */
}

/* Wiersz menu głównego, stan zwinięty: 5 pozycji Bold 16/24, odstęp 24, caret 20
   (ikony/caret-dol.svg) z odstępem 4 przy pozycjach z rozwinięciem. Pozycja z caretem
   = przycisk (rozwinięcie na klik, task01.16), bez caretu = link. Koszyk z DS nie wchodzi. */
.menu-glowne {
  position: relative;            /* panel rozwinięcia na szerokość treści 1204 */
  margin-top: var(--odstep-3);
}

.menu-glowne > ul {
  display: flex;
  gap: var(--odstep-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-glowne > ul > li > a,
.menu-glowne > ul > li > button {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-05);         /* 4 */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--tekst-16);
  line-height: 1.5rem;           /* 16/24 */
  font-weight: var(--waga-gruba);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Belka mobile 56 (Header mobile 104:567 / 104:598): padding 16, logo 131×22, hamburger 24.
   Lupa i koszyk z DS nie wchodzą. Wariant z X (menu otwarte) — task01.16. */
.naglowek-mobile { display: none; }

.naglowek-hamburger {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

@container (max-width: 1023px) {
  .naglowek .kontener { padding: 0 var(--odstep-2); }
  .naglowek-gora,
  .menu-glowne { display: none; }
  .naglowek-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
  }
}

/* Realny tablet (640–1023 px okna): marginesy boczne 32 wg docs/siatka-layout.md. */
@media (min-width: 640px) and (max-width: 1023px) {
  .naglowek .kontener { padding-inline: var(--odstep-4); }
}

/* ---- Menu główne — rozwinięcie (K10 w menu.html, task01.16) ----
   Klik, nie hover: przycisk pozycji przełącza aria-expanded (js/rozwijane.js), jedna
   pozycja naraz; .stan-aktywny = próbka wymuszona. Panele i poziom 2 mobile z mapy strony
   (poziom 2 arkusza = tytuł, poziom 3 = podpozycje); kategoria bez poziomu 3 = link. */

/* Pozycja rozwinięta = Variant2 (7:8842 / 7:24242): tekst czerwony na jasnym, biały na
   ciemnym (wg DS), caret w górę, pasek 4 px marki szerokości pozycji przy dolnej krawędzi
   headera (24 pod wierszem menu). Podkreślenie tekstu z DS pominięte (decyzja 2026-09-12, rejestr). */
.menu-glowne > ul > li > button { position: relative; }

.menu-glowne > ul > li > button:is([aria-expanded="true"], .stan-aktywny) { color: var(--kolor-marki); }

.tlo-ciemne .menu-glowne > ul > li > button:is([aria-expanded="true"], .stan-aktywny) { color: var(--kolor-tekstu); }

.menu-glowne > ul > li > button:is([aria-expanded="true"], .stan-aktywny) .ikona { transform: scaleY(-1); }

.menu-glowne > ul > li > button:is([aria-expanded="true"], .stan-aktywny)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--odstep-3) - 0.25rem);
  height: 0.25rem;
  background: var(--kolor-marki);
}

/* Panel 7:24667 (jasny) / 7:24666 (ciemny): pod headerem, szerokość treści, padding 32
   (prawy 31 — kolumny 361), bez cienia. Tytuł ExtraBold 20/28, 24 do podpozycji.
   Podpozycje: kolumny po 361, każda osobną listą o niezależnej wysokości (jak stosy w DS —
   długa pozycja nie rozsuwa sąsiednich), z góry na dół. Pozycja 16/24 + strzałka 24 (czerwona
   na jasnym, biała na ciemnym wg DS), linia pod każdą 16 niżej (DS #ededed → kanon), odstęp 16.
   Panel bez bloku Branże (układ z 2026-09-12, zostaje na wypadek wyłączenia bloku — docelowo opcja
   komponentu): 3 kolumny, odstęp 29, ceil(n/3) na kolumnę, link akcji A43 32 niżej.
   Panel otwarty = siatka (jedna kolumna; z blokiem Branże dwie — niżej). */
.menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--odstep-3));
  left: 0;
  right: 0;
  z-index: 10;
  padding: var(--odstep-4) calc(var(--odstep-4) - 1px) var(--odstep-4) var(--odstep-4);
  background: var(--kolor-tla);
  color: var(--kolor-tekstu);
}

.tlo-ciemne .menu-panel { background: var(--kolor-ciemny); }

.menu-glowne > ul > li:has(> button:is([aria-expanded="true"], .stan-aktywny)) > .menu-panel { display: grid; }

.menu-panel-tytul {
  margin: 0 0 var(--odstep-3);
  font-size: var(--tekst-20);
  line-height: 1.75rem;
  font-weight: var(--waga-najgrubsza);
}

.menu-panel-kolumny {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  column-gap: 1.8125rem;
}

.menu-panel ul {
  display: flex;
  flex-direction: column;
  gap: var(--odstep-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-panel li {
  padding-bottom: calc(var(--odstep-2) - 1px);
  border-bottom: 1px solid var(--kolor-linii);
}

.menu-panel li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-05);
  color: inherit;
  font-size: var(--tekst-16);
  line-height: 1.5rem;
  text-decoration: none;
}

.menu-panel li .ikona { color: var(--kolor-marki); }
.tlo-ciemne .menu-panel li .ikona { color: inherit; }

.menu-panel .link-akcji {
  margin-top: var(--odstep-4);
  justify-self: start; /* panel jest siatką — link zachowuje własną szerokość */
}

/* Blok „Branże" (decyzja klienta 2026-09-17, task01.16; widok O firmie 7:23740, panel 5471:9622):
   w każdym panelu po prawej stały blok — nagłówek jak tytuł kategorii, 6 pozycji wys. 40 w odstępie 16
   (zdjęcie okrągłe 40 + 16 + nazwa 16/24, link do strony branży, bez strzałki), hover jak podpozycje.
   Panel z blokiem: siatka 762 | 40 | 339 (proporcje treści 1141), podpozycje w 2 kolumnach po 361
   (odstęp 40), ceil(n/2) na kolumnę (7 → 4/3, 4 → 2/2), link akcji 40 pod ostatnią linią.
   Na ciemnym tak samo, kolory z tokenów tła (zaprojektowany tylko jasny — decyzja użytkownika 2026-09-17).
   Blok jest opcją: bez .menu-branze panel wraca do układu 3-kolumnowego. */
.menu-panel:has(.menu-branze) {
  grid-template-columns: 762fr 339fr;
  grid-template-rows: auto auto 1fr; /* blok Branże wyższy od lewej kolumny — nadmiar w ostatnim wierszu, nie między tytułem a listami */
  column-gap: var(--odstep-5);
}

.menu-panel:has(.menu-branze) > :not(.menu-branze) {
  grid-column: 1;
  align-self: start;
}

.menu-branze {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.menu-panel:has(.menu-branze) .menu-panel-kolumny {
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--odstep-5);
}

.menu-panel:has(.menu-branze) .link-akcji { margin-top: var(--odstep-5); }

.menu-branze li {
  padding-bottom: 0;
  border-bottom: 0;
}

.menu-branze li > a {
  justify-content: flex-start;
  gap: var(--odstep-2);
}

.menu-branze img,
.menu-branze .zdjecie-zastepcze {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Hover (bez projektu w DS — decyzja użytkownika 2026-09-12, rejestr): tekst czerwony na obu
   tłach — pozycje wiersza menu (caret za tekstem), podpozycje panelu (strzałka też), linki
   pomocnicze headera i menu mobile. Pozycja rozwinięta na ciemnym zostaje biała (Variant2).
   Ramka fokusu tylko przy klawiaturze — po kliknięciu myszą bez obrysu (decyzja 2026-09-12). */
.menu-glowne > ul > li > :is(a, button):hover,
.menu-panel li > a:hover,
.naglowek-linki a:hover,
.menu-mobile-linki a:hover { color: var(--kolor-marki); }

.menu-panel li > a:hover .ikona { color: inherit; }

.naglowek :is(.menu-glowne, .naglowek-linki) :is(a, button):focus:not(:focus-visible) { outline: none; }

/* Menu mobile: hamburger ↔ X w belce (104:568 / 104:599), warstwa pełnoekranowa w tle
   headera — na ciemnym cała ciemna (decyzja 2026-09-12; menu ciemne niezaprojektowane:
   strzałki czerwone jak na jasnym, linie kanonu — rejestr). Warstwa na całe okno. */
/* Ikona menu z trzech kresek (geometria ikony hamburger 24: kreski 16 + zaokrąglenia 1.5, co 6);
   w stanie otwartym górna i dolna tworzą X ikony zamknij (ramiona 13.5×13.5), środkowa znika.
   Ruch przemiany — warianty animacji na menu.html; przy zamykaniu powrót od razu z .menu-zamyka. */
/* Kreski przyciągnięte do całych pikseli ekranu (uwaga użytkownika z przeglądu task01.44): przy zoomie
   siatki ułamkowe 1.5 px i ułamkowe pozycje rasteryzowały się jako kreski różnej grubości. Grubość,
   pozycja pierwszej kreski i krok są zaokrągane raz, pozostałe pozycje to wielokrotności kroku —
   trzy kreski zawsze tej samej grubości i w równych odstępach. */
.ikona-menu {
  position: relative;
  --piksel: 1px;                                           /* piksel fizyczny ekranu w px CSS */
  --kreska: round(up, 0.09375rem, var(--piksel));          /* 1.5 — w górę: na ekranie 1× 2 px, nie 1 */
  --kreska-gora: round(0.328125rem, var(--piksel));        /* oś 6 */
  --kreska-krok: round(0.375rem, var(--piksel));           /* co 6 */
}
/* Ekrany o większej gęstości (telefony, retina): zaokrąglenie do piksela fizycznego — 1.5 px z projektu
   to tam dokładnie 3 piksele i zostaje bez zmiany. */
@media (min-resolution: 2dppx) { .ikona-menu { --piksel: 0.5px; } }
@media (min-resolution: 3dppx) { .ikona-menu { --piksel: calc(1px / 3); } }

.ikona-menu > span {
  position: absolute;
  left: 0.203125rem;             /* 3.25 */
  width: 1.09375rem;             /* 17.5 */
  height: var(--kreska);
  border-radius: var(--kreska);
  background: currentColor;
}

.ikona-menu > span:nth-child(1) { top: var(--kreska-gora); }
.ikona-menu > span:nth-child(2) { top: calc(var(--kreska-gora) + var(--kreska-krok)); }
.ikona-menu > span:nth-child(3) { top: calc(var(--kreska-gora) + 2 * var(--kreska-krok)); }

.naglowek:not(.menu-zamyka) .naglowek-hamburger[aria-expanded="true"] .ikona-menu > span {
  top: calc(var(--kreska-gora) + var(--kreska-krok));
  left: 0.1066rem;               /* ramię X 13.5·√2 + zaokrąglenia = 20.59 */
  width: 1.2869rem;
}

.naglowek:not(.menu-zamyka) .naglowek-hamburger[aria-expanded="true"] .ikona-menu > span:nth-child(1) { transform: rotate(45deg); }
.naglowek:not(.menu-zamyka) .naglowek-hamburger[aria-expanded="true"] .ikona-menu > span:nth-child(2) { opacity: 0; }
.naglowek:not(.menu-zamyka) .naglowek-hamburger[aria-expanded="true"] .ikona-menu > span:nth-child(3) { transform: rotate(-45deg); }

.naglowek:has(.naglowek-hamburger[aria-expanded="true"]) {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.menu-mobile { display: none; }

@container (max-width: 1023px) {
  .naglowek .kontener:has(.naglowek-hamburger[aria-expanded="true"]) {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
  }
  .naglowek-mobile:has(.naglowek-hamburger[aria-expanded="true"]) + .menu-mobile {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}

.menu-mobile-poziom:not([hidden]) {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Poziom 1 (2:1095): lista 22 pod belką; poziom 2 (2:1154): nagłówek 8 pod belką, lista
   32 niżej. Pozycje 16/24 (poziom 1 Bold, poziom 2 Regular) + czerwona strzałka 24,
   linia między pozycjami (DS #e2e7ef → kanon, decyzja 2026-09-12), odstęp 24. */
.menu-mobile-lista {
  margin: 1.375rem 0 0;
  padding: 0;
  list-style: none;
}

.menu-mobile-lista li + li {
  margin-top: var(--odstep-3);
  padding-top: calc(var(--odstep-3) - 1px);
  border-top: 1px solid var(--kolor-linii);
}

.menu-mobile-lista :is(a, button),
.menu-mobile-wstecz {
  display: flex;
  align-items: center;
  gap: var(--odstep-05);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--tekst-16);
  line-height: 1.5rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-mobile-lista :is(a, button) {
  justify-content: space-between;
  width: 100%;
  font-weight: var(--waga-gruba);
}

.menu-mobile-lista .ikona { color: var(--kolor-marki); }

.menu-mobile-wstecz {
  align-self: flex-start;
  margin-top: var(--odstep-1);
  font-weight: var(--waga-najgrubsza);
}

.menu-mobile-wstecz + .menu-mobile-lista { margin-top: var(--odstep-4); }
.menu-mobile-wstecz + .menu-mobile-lista :is(a, button) { font-weight: var(--waga-zwykla); }

/* Dół poziomu 1: linki pomocnicze 14/22 co 24 i język (flaga + PL, bez listy —
   niezaprojektowana), 32 nad przyciskiem E-learning na całą szerokość, 24 od dołu. */
.menu-mobile-dol {
  display: flex;
  flex-direction: column;
  gap: var(--odstep-4);
  margin-top: auto;
  padding-block: var(--odstep-4) var(--odstep-3);
}

.menu-mobile-linki {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--odstep-3);
  font-size: var(--tekst-14);
  line-height: 1.375rem;
}

.menu-mobile-linki a { color: inherit; text-decoration: none; }

.menu-mobile-jezyk {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-05);
}

.menu-mobile-dol .przycisk { width: 100%; }

/* ---- Ścieżka: okruszki (K8, desktop) / link wstecz (K9, mobile) ----
   Wrapper .sciezka przełącza container query: od 1024 px okruszki, poniżej link wstecz
   (inwentarz: breadcrumbs → link wstecz). Poza wrapperem oba elementy widoczne zawsze. */
.sciezka { container-type: inline-size; }
.sciezka .link-wstecz { display: none; }

@container (max-width: 1023px) {
  .sciezka .okruszki { display: none; }
  .sciezka .link-wstecz {
    display: inline-flex;
    vertical-align: top;           /* na linii bazowej wiersz dokładał ~5 px pod linkiem */
  }
}

/* Ścieżka nad etykietą kategorii (A47) na sekcji otwierającej — wspólne dla wszystkich
   sekcji otwierających: okruszki tekstem 16 od góry sekcji (12 + padding 4 listy),
   etykieta 28 niżej (tekst 70 od góry); link wstecz 24 od góry, etykieta 24 niżej. */
.sciezka:has(+ .etykieta-kategorii) { padding-top: 0.75rem; }
.sciezka + .etykieta-kategorii { margin-top: 1.75rem; }

@media (max-width: 1023px) {
  .sciezka:has(+ .etykieta-kategorii) { padding-top: var(--odstep-3); }
  .sciezka + .etykieta-kategorii { margin-top: var(--odstep-3); }
}

/* Okruszki jako osobny rząd ramy między headerem a top visualem produktowym (widok 2:3069:
   17 pod headerem, 16 nad komponentem — tu 16 / 16; task01.25). Poniżej 1024 rząd znika —
   link wstecz żyje wtedy wewnątrz komponentu, na zdjęciu. */
.pas-okruszki { padding-block: var(--odstep-2); }

@media (max-width: 1023px) {
  .pas-okruszki { display: none; }
}

/* Okruszki wg 2:3542: padding 4, odstęp 8 między wszystkimi elementami, dom 16,
   chevrony w prawo 16 #b1b9cd (kolor poza paletą DS — wg ticketu), pozycje 14/22,
   ostatnia SemiBold 600. W widoku: 16 px pod headerem, 16 nad top visualem. */
.okruszki {
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-14);
  line-height: 1.375rem;
  color: var(--kolor-tekstu);
}

.okruszki > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odstep-1);
  margin: 0;
  padding: var(--odstep-05);
  list-style: none;
}

.okruszki > ol > li {
  display: flex;
  align-items: center;
  gap: var(--odstep-1);
}

/* chevron między pozycjami — ikony/chevron-prawo.svg jako tło (kolor stały, nie przebarwia się) */
.okruszki > ol > li + li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3L11 8L6 13' stroke='%23B1B9CD' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

.okruszki-dom { display: inline-flex; }

.okruszki > ol > li[aria-current="page"] > a,
.okruszki > ol > li[aria-current="page"] > button { font-weight: var(--waga-polgruba); }

/* Pozycja z listą rozwijaną: tekst + caret w kółku 16 (odstęp 2), ostatnia czerwony.
   Desktop z myszką (uwaga klienta po przeglądzie 2026-09-17, task01.09): lista otwiera się
   z najazdu na pozycję i znika po zjechaniu z niej (lista nachodzi na pozycję, więc :hover
   obejmuje obie). Klik / Enter przełącza aria-expanded (js/rozwijane.js — ten sam wzorzec
   co lista selecta A53) dla klawiatury i ekranów dotykowych; zjechanie myszką zeruje
   też stan po kliku, żeby lista nie została przypięta. */
.okruszek { position: relative; }

.okruszek > button {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.okruszki > ol > li[aria-current="page"] > button .ikona { color: var(--kolor-marki); }

/* Lista pod pozycją (2:4048, 2:4547): treść = rodzeństwo pozycji z nią samą wyróżnioną
   (decyzja 2026-09-12): czerwona w liście kategorii, SemiBold dla bieżącej strony — rozjazd
   w rejestrze. Geometria wg projektu: 390 szeroka, padding 12, odstęp 8, r 6, obrys linii
   (DS #ededed → kanon), cień 0 4 10 / 15%, pozycje 14/22; pierwsza pozycja z caretem
   w górę (zamyka). Lista zawsze jasna → tekst na stałe ciemny (jak A53). Otwarta nakłada
   się na wiersz okruszków: pierwsza pozycja w linii tekstu pozycji, teksty wyrównane
   (w DS listy leżą luźno — wyrównanie to decyzja z task01.09). Hover pozycji jak w liście selecta
   A53 (decyzja 2026-09-12, rejestr): tło pola nieaktywnego sięga połowy odstępu 8 — pozycja
   padding 4/12, lista bez odstępu, padding pionowy 8; wysokość listy jak w DS. */
.okruszki-lista {
  display: none;
  position: absolute;
  top: -0.75rem;                 /* pierwsza pozycja listy w linii tekstu pozycji (padding 12 - obrys 1) */
  left: calc(0.75rem - 1px);     /* tekst listy pod tekstem pozycji: chevron 16 + odstęp 8 − padding 12 − obrys */
  z-index: 2;
  box-sizing: border-box;
  width: 24.375rem;
  margin: 0;
  padding: calc(0.5rem - 1px) 0; /* 8 + 4 paddingu pozycji = 12 z DS, liczone z obrysem: wysokość listy jak w projekcie */
  list-style: none;
  background: var(--kolor-tla);
  color: var(--kolor-ciemny);
  border: 1px solid var(--kolor-linii);
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.15);
}

.okruszek:has(> button[aria-expanded="true"], > button.stan-aktywny) > .okruszki-lista { display: grid; }

@media (hover: hover) {
  .okruszek:hover > .okruszki-lista { display: grid; }
}

.okruszki-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-3);
  padding: var(--odstep-05) 0.75rem;   /* 4 = połowa odstępu 8 z DS: podświetlenia sąsiednich pozycji stykają się */
}

.okruszki-lista li > a { flex: 1; }   /* link na całą szerokość wiersza — klik w podświetlenie działa */

.okruszki-lista li:hover,
.okruszki-lista li.stan-hover { background: var(--kolor-tla-nieaktywnego); }

.okruszki-lista a[aria-current="true"] { color: var(--kolor-marki); }
.okruszki-lista a[aria-current="page"] { font-weight: var(--waga-polgruba); }

.okruszki-zamknij {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.okruszki-zamknij .ikona { transform: scaleY(-1); }   /* caret w górę */

/* Link wstecz (K9, 2:2646): strzałka w lewo 24 (ikony/strzalka-lewo.svg) + „Wstecz" 16/24,
   odstęp 4; kolor tekstu (biały na ciemnym przez token). W widoku mobile 24 px od góry
   top visuala i 24 nad etykietą kategorii (A47), która zostaje osobnym atomem pod linkiem
   (decyzja projektantki 2026-09-12). Hover niezaprojektowany. */
.link-wstecz {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-05);
  color: var(--kolor-tekstu);
  font-family: var(--font-podstawowy);
  font-size: var(--tekst-16);
  line-height: 1.5rem;
  text-decoration: none;
}

/* ---- Header i menu przy przewijaniu (task01.44; stany przełącza js/naglowek-przewijanie.js) ----
   Pozostałe strony (data-przewijanie="stala"): jasny header zawsze przyklejony.
   Strona główna (data-przewijanie="glowna"): na samej górze ciemny, w toku strony (odjeżdża
   z treścią); dalej przyklejony — schowany nad krawędzią okna albo wysunięty, jasny.
   Przykleja się cały header; miejsce w toku strony zostaje — treść nie skacze przy zmianie stanu.
   Otwarte menu mobile i tak przejmuje cały ekran (position: fixed wyżej). */
.naglowek[data-przewijanie="stala"],
.naglowek-przyklejony {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Jedna reguła na oba przejścia: osobna reguła dla .naglowek-przyklejony przegrywała specyficznością
   z selektorem atrybutu i wysuwanie nie było animowane. Header wyjeżdża z góry i chowa się do góry. */
/* Tło nie jest animowane przejściem — w strefie górnej steruje nim przewijanie (niżej). */
.naglowek[data-przewijanie="glowna"] { transition: transform 400ms ease-out, --kolor-tekstu 400ms ease; }

/* Zmiana wariantu jasny ↔ ciemny jako płynne przenikanie całego headera, nie tylko tła:
   token --kolor-tekstu zarejestrowany jako kolor daje się animować, więc logo, linki, pozycje menu,
   ikony i przycisk (wszystko, co czyta token) ciemnieją razem z tłem; obrysy spoza tokenu osobno. */
@property --kolor-tekstu {
  syntax: '<color>';
  inherits: true;
  initial-value: #2b303a;
}
.naglowek[data-przewijanie="glowna"] :is(.naglowek-gora, .jezyk-przycisk) { transition: border-color 400ms ease; }
/* Linia pod jasnym przyklejonym headerem (decyzja użytkownika z przeglądu — bez projektu w DS):
   oddziela header od jasnej treści pod nim. Cień 1 px zamiast obramowania — nie zmienia wysokości.
   Schowany header linii nie ma (wystawałaby spod górnej krawędzi okna). */
.naglowek[data-przewijanie="stala"],
.naglowek-przyklejony:not(.naglowek-schowany) { box-shadow: 0 1px 0 var(--kolor-linii); }

/* ---- Strona główna: header nad zdjęciem hero (przegląd 2026-09-22) ----
   Na samej górze header leży na ciemnym zdjęciu hero jako półprzezroczysta maska (nie lity granat);
   hero podjeżdża pod miejsce headera, a jego nagłówek schodzi o wysokość headera. Jasny przyklejony
   header wracający do góry rozjaśnia się stopniowo: --postep (0 = dolna krawędź miejsca headera,
   1 = sama góra) ustawia js/naglowek-przewijanie.js; tło = mieszanka bieli i maski, linia pod
   headerem gaśnie razem z bielą; tekst przełącza się na odwrócony w połowie drogi (przenikanie tokenu). */
.naglowek[data-przewijanie="glowna"] { --maska-hero: rgba(43, 48, 58, 0.55); }
.naglowek[data-przewijanie="glowna"]:not(.naglowek-przyklejony) { position: relative; z-index: 20; }   /* nad hero także w toku strony */
/* Hero = pierwszy blok treści strony głównej (header w template part poza <main>): pas rośnie o wysokość
   headera (padding sceny; medium i woal wypełniają także padding), więc pod headerem zostaje pas
   o projektowej wysokości — nagłówek i lead nie zjeżdżają pod karty. */
.wp-block-template-part:has(> .naglowek[data-przewijanie="glowna"]) + main > .karty-informacyjne-hero:first-child { margin-top: -9.75rem; }
.wp-block-template-part:has(> .naglowek[data-przewijanie="glowna"]) + main > .karty-informacyjne-hero:first-child .karty-informacyjne-scena { padding-top: 9.75rem; }
.wp-block-template-part:has(> .naglowek[data-przewijanie="glowna"]) + main > .karty-informacyjne-hero:first-child .karty-informacyjne-naglowek { top: calc(9.75rem + var(--odstep-8)); }
@media (max-width: 1023px) {
  .wp-block-template-part:has(> .naglowek[data-przewijanie="glowna"]) + main > .karty-informacyjne-hero:first-child { margin-top: -3.5rem; }
  .wp-block-template-part:has(> .naglowek[data-przewijanie="glowna"]) + main > .karty-informacyjne-hero:first-child .karty-informacyjne-scena { padding-top: 3.5rem; }
  .wp-block-template-part:has(> .naglowek[data-przewijanie="glowna"]) + main > .karty-informacyjne-hero:first-child .karty-informacyjne-naglowek { top: calc(3.5rem + var(--odstep-2)); }
}
.naglowek[data-przewijanie="glowna"].tlo-ciemne { background: var(--maska-hero); }
.naglowek[data-przewijanie="glowna"].naglowek-przyklejony:not(.naglowek-schowany) {
  background-color: color-mix(in srgb, var(--maska-hero) calc(var(--postep, 0) * 100%), var(--kolor-tla));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--kolor-linii) calc((1 - var(--postep, 0)) * 100%), transparent);
}

.naglowek-schowany:not(:has(.naglowek-hamburger[aria-expanded="true"])) { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .naglowek[data-przewijanie] { transition: none; }
}

/* Kotwice (spis treści, „do góry") zatrzymują się pod przyklejonym headerem: 156 desktop, 56 belka mobile. */
html:has(.naglowek[data-przewijanie]) { scroll-padding-top: 9.75rem; }
@media (max-width: 1023px) {
  html:has(.naglowek[data-przewijanie]) { scroll-padding-top: 3.5rem; }
}