/**
 * Szuflada nawigacji - elementy lukuro-nav-drawer i lukuro-nav-section.
 * Zmienne cytuja warstwe semantyczna (--lukuro-color-*, definicje w lukuro-tokens.css).
 * Dark mode NIE jest jeszcze dowieziony: sloty go umozliwiaja, ale drugiego zestawu
 * wartosci ani przelacznika w tej wersji nie ma.
 *
 * Mapa z-index calego frameworka (kolejnosc warstw na stronie):
 *   kurtyna mega menu ...... 900
 *   sticky header Bricks ... 998
 *   nakladka szuflady ...... 999
 *   panel szuflady ........ 1000
 *   size-table offcanvas .. 9999 / 10000
 *   modal wyszukiwarki .... 99999
 */
:root {
	--lukuro-nav-text: var(--lukuro-color-text, #222);
	--lukuro-nav-text-muted: var(--lukuro-color-text-muted, #666);
	--lukuro-nav-surface: var(--lukuro-color-surface, #fff);
	--lukuro-nav-surface-subtle: var(--lukuro-color-surface-subtle, #f5f5f5);
	--lukuro-nav-hairline: var(--lukuro-color-hairline, #e0e0e0);
	/* Akcent szuflady jest uzywany WYLACZNIE jako `color:` (stany hover i focus
	   pozycji), wiec cytuje slot tekstowy. Slot `primary` jest dobrany pod tlo
	   i przy jasnym kolorze marki dawal tu 1.58:1 na bialym panelu. */
	--lukuro-nav-accent: var(--lukuro-color-primary-text, #111);

	/* Wartosci bazowe wyprowadzone z referencji (malypokoik.com.pl, motyw Impact).
	   Panel jest `min()`, a nie sztywna szerokoscia: na waskim telefonie ma zostawic
	   kawalek strony pod spodem, a na szerokim ekranie nie rosnac w nieskonczonosc. */
	--lukuro-nav-panel-w: min(92vw, 400px);
	--lukuro-nav-pad: 20px;
	/* Gorny i dolny padding widoku - osobna zmienna, bo opcja przyklejonego naglowka
	   (D1) musi znac dokladnie te wartosc, zeby zakryc ja soba po przyklejeniu. */
	--lukuro-nav-view-pad-block: 8px;
	/* Cel dotykowy paskow nawigacji - ten sam na kazdym poziomie stosu widokow. */
	--lukuro-nav-tap: 44px;

	/* Naglowek z logo (od 2.48.0): wysokosc znaku i oddech nad paskiem oraz pod powrotem.
	   Wariant bez logo ich nie czyta, wiec zmiana tych wartosci nie rusza wdrozen, ktore
	   logo nie ustawily. */
	--lukuro-nav-head-logo-h: 32px;
	--lukuro-nav-head-logo-pad: 8px;

	/* Stopka panelu (od 2.48.0). Kolory przycisku konta jada PARA ze slotow semantycznych:
	   `primary` jest slotem tla, `on-primary` trescia na tym tle, i tylko razem niosa
	   zmierzony kontrast (12.52:1 na palecie tego portfela). Rozdzielanie ich albo dobieranie
	   tla osobno psuje czytelnosc bez zadnego sygnalu - dlatego element nie ma na to kontrolki,
	   a wdrozenie, ktore chce innego koloru, nadpisuje obie zmienne naraz we wlasnym arkuszu.
	   Wariant bez wlaczonej stopki tych zmiennych nie czyta.

	   Rytm pionowy ma TRZY osobne zmienne, nie jedna: `gap` dzieli przycisk od ikon,
	   `pad-top` daje oddech nad przyciskiem, `pad-bottom` domyka region pod ikonami.
	   Wczesniej wszystkie trzy jechaly z samego `gap` (dol jako `gap * 1.5`), przez co
	   nie dalo sie ich ruszyc osobno - a odbior wizualny poprosil dokladnie o to:
	   wiecej nad przyciskiem, mniej pod ikonami. */
	--lukuro-nav-foot-gap: 12px;
	--lukuro-nav-foot-pad-top: 20px;
	--lukuro-nav-foot-pad-bottom: 12px;
	--lukuro-nav-foot-icon-size: 17px;
	--lukuro-nav-foot-btn-bg: var(--lukuro-color-primary, #111);
	--lukuro-nav-foot-btn-fg: var(--lukuro-color-on-primary, #fff);

	/* Rytm i typografia wiersza. Wartosci sa PIKSELOWE, choc referencja podaje je w `rem`
	   (1rem / 1.25rem odstepu, .75rem stopnia pisma) - to jest swiadome przeliczenie, nie
	   pomylka. Referencja stoi na domyslnym korzeniu 16 px, a kazda instancja tego portfela
	   chodzi z Advanced Themerem, ktory ustawia `html { font-size: 62.5% }`, czyli 10 px
	   (zmierzone na lulumi 2026-09-02). Ten sam zapis w `rem` dalby tam 62,5% zamierzonej
	   wielkosci: wiersz 7,5 px zamiast 12 px. Piksel jest tu jednostka STABILNA, a `em`
	   odpada z powodu, dla ktorego wypadl wczesniej - zalezal od kroju pisma wdrozenia.
	   Wdrozenie, ktore chce skalowac szuflade z korzeniem, nadpisuje same zmienne. */
	--lukuro-nav-row-pad: 16px;
	--lukuro-nav-row-size: 12px;
	--lukuro-nav-row-tracking: .18em;
	--lukuro-nav-row-lh: 1.7;
	--lukuro-nav-duration: .28s;
	--lukuro-nav-ease: cubic-bezier(.25, 0, .25, 1);
	--lukuro-nav-shadow: 0 0 40px -10px rgba(0, 0, 0, .35);

	--lukuro-nav-backdrop-bg: rgba(0, 0, 0, .45);
	--lukuro-nav-backdrop-blur: 0px;

	--lukuro-nav-z-backdrop: 999;
	--lukuro-nav-z-panel: 1000;

	/* Szerokosc paska przewijania zmierzona przez JS przy otwarciu. Bez kompensacji
	   blokada scrolla przesuwalaby cala strone o kilkanascie pikseli na desktopie. */
	--lukuro-nav-scrollbar: 0px;
}

/* Skok paddingu i rytmu na szerszym ekranie - referencja robi to od swojego `md`.
   Panel ma tam stala szerokosc, wiec chodzi o oddech tresci, nie o proporcje ekranu. */
@media (min-width: 768px) {
	:root {
		--lukuro-nav-pad: 32px;
		--lukuro-nav-row-pad: 20px;
	}
}

/* --- Hamburger --- */
.lukuro-nav-drawer {
	display: inline-flex;
	align-items: center;
}

.lukuro-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-width: 44px;
	min-height: 44px;
	padding: .5em;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-toggle:hover,
.lukuro-nav-toggle:focus-visible {
	color: var(--lukuro-nav-accent);
}

/* Trzy kreski rysowane w CSS - element dziala bez wybierania ikony w builderze. */
.lukuro-nav-bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 22px;
}

.lukuro-nav-bars > span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.lukuro-nav-toggle-label {
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .8em;
}

/* --- Nakladka --- */
.lukuro-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--lukuro-nav-z-backdrop);
	background: var(--lukuro-nav-backdrop-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--lukuro-nav-duration) ease, visibility 0s linear var(--lukuro-nav-duration);
}

.lukuro-nav-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--lukuro-nav-duration) ease;
}

/* Rozmycie tylko gdy autor je wlaczyl - zerowy blur i tak kosztowalby warstwe kompozytora. */
.lukuro-nav-backdrop[data-lukuro-nav-blur="1"] {
	backdrop-filter: blur(var(--lukuro-nav-backdrop-blur, 0px));
	-webkit-backdrop-filter: blur(var(--lukuro-nav-backdrop-blur, 0px));
}

/* --- Panel --- */
.lukuro-nav-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	/* 100dvh z fallbackiem: na iOS pasek adresu zmienia wysokosc viewportu, a Bricks
	   utrzymuje --bricks-vh dla przegladarek bez jednostek dynamicznych. */
	height: calc(var(--bricks-vh, 1vh) * 100);
	height: 100dvh;
	width: var(--lukuro-nav-panel-w);
	max-width: 100vw;
	z-index: var(--lukuro-nav-z-panel);
	display: flex;
	flex-direction: column;
	background: var(--lukuro-nav-surface);
	color: var(--lukuro-nav-text);
	box-shadow: var(--lukuro-nav-shadow);
	overscroll-behavior: contain;
	visibility: hidden;
	transition: transform var(--lukuro-nav-duration) var(--lukuro-nav-ease), visibility 0s linear var(--lukuro-nav-duration);
}

.lukuro-nav-panel[data-lukuro-nav-side="left"] {
	left: 0;
	transform: translateX(-100%);
}

.lukuro-nav-panel[data-lukuro-nav-side="right"] {
	right: 0;
	transform: translateX(100%);
}

.lukuro-nav-panel.is-open {
	transform: none;
	visibility: visible;
	transition: transform var(--lukuro-nav-duration) var(--lukuro-nav-ease);
}

.lukuro-nav-panel:focus {
	outline: none;
}

/* --- Naglowek panelu ---
   Trzyma stan stosu widokow: w korzeniu tytul menu, glebiej przycisk powrotu z nazwa
   biezacego poziomu. Oba wezly stoja w tym samym slocie i przelaczaja sie atrybutem
   `hidden` (JS), dlatego naglowek nie zmienia wysokosci przy wejsciu w glab.

   Stala wysokosc bierze sie wiec z samego UKLADU, ale wylacznie w wariancie BEZ logo.
   Od 2.48.0 naglowek z ustawionym logo (`.lukuro-nav-head--logo`) ma dwa rzedy: pasek
   z logo i krzyzykiem, a pod nim powrot - ktorego nie ma juz z czym zamieniac, bo tytul
   w tym wariancie nie renderuje sie wcale. Inwariant jest tam utrzymany INNA droga: rzad
   powrotu rezerwuje swoja wysokosc takze w korzeniu (`visibility: hidden` zamiast
   `display: none`), zeby wejscie w glab nie przesuwalo tresci w trakcie animacji slajdu.
   Regula stoi nizej, w sekcji "Naglowek z logo".

   Naglowek lezy POZA kontenerem przewijania (`.lukuro-nav-stack` ma `overflow: hidden`,
   przewija sie dopiero `.lukuro-nav-view`), wiec powrot jest przyklejony z konstrukcji
   i nie potrzebuje `position: sticky` ani kompensacji paddingu. */
.lukuro-nav-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* Pionowy padding zeruje sie po stronie powrotu i krzyzyka - oba niosa wlasny cel
	   dotykowy 44 px, wiec wysokosc paska bierze sie z nich, nie z paddingu. */
	padding: 0 var(--lukuro-nav-pad);
	min-height: var(--lukuro-nav-tap, 44px);
	border-bottom: 1px solid var(--lukuro-nav-hairline);
}

/* Powrot: grot i nazwa poziomu w JEDNYM celu klikalnym. Sam grot ma 10 px szerokosci,
   a powrot z paska nawigacji trafia sie kciukiem - napis jest tu polowa celu, nie ozdoba. */
.lukuro-nav-head-back {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	/* Ujemny margines wyrownuje grot do lewej krawedzi tresci panelu. Bez niego przycisk
	   zaczyna sie od wlasnego paddingu i pasek rozjezdza sie z kolumna wierszy nizej. */
	margin-left: -.5em;
	padding: 0 .5em;
	min-height: var(--lukuro-nav-tap, 44px);
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: var(--lukuro-nav-row-size, 12px);
	font-weight: 600;
	letter-spacing: var(--lukuro-nav-row-tracking, .18em);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-head-back:hover,
.lukuro-nav-head-back:focus-visible {
	color: var(--lukuro-nav-accent);
}

/**
 * Przycisk musi byc `display: none`, gdy niesie `hidden` - i regula musi stac TUTAJ,
 * bo `display: inline-flex` powyzej pochodzi z arkusza autora i bije `[hidden]{display:none}`
 * arkusza przegladarki niezaleznie od specyficznosci. Bez tej linijki JS zdejmuje wezel
 * z drzewa dostepnosci, ale zostawia go na ekranie: po powrocie do korzenia widac naraz
 * powrot i tytul menu. To ten sam mechanizm, ktory ma juz swoja regule przy `.lukuro-nav-view`.
 *
 * `.lukuro-nav-title` reguly nie potrzebuje - nie deklaruje `display`, wiec dziedziczy
 * zachowanie przegladarki.
 */
.lukuro-nav-head-back[hidden] {
	display: none;
}

/* Dluga nazwa poziomu ma sie skrocic, a nie zlamac paska na dwa wiersze. */
.lukuro-nav-head-back-label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.lukuro-nav-title {
	font-weight: 600;
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lukuro-nav-text-muted);
}

.lukuro-nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-right: -.5rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-close:hover,
.lukuro-nav-close:focus-visible {
	color: var(--lukuro-nav-accent);
}

/* Krzyzyk rysowany w CSS - bez zaleznosci od biblioteki ikon wdrozenia. */
.lukuro-nav-close-icon {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
}

.lukuro-nav-close-icon::before,
.lukuro-nav-close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.lukuro-nav-close-icon::before {
	transform: rotate(45deg);
}

.lukuro-nav-close-icon::after {
	transform: rotate(-45deg);
}

/* --- Naglowek z logo (uklad dwurzedowy) ---
   Wariant wlacza sam render, dokladajac klase do wrappera, gdy kontrolka logo jest
   wypelniona. Bez niej ani jedna regula z tej sekcji nie ma czego dotknac, wiec wdrozenia,
   ktore logo nie ustawia, dostaja naglowek co do piksela taki jak przed 2.48.0.

   Trzy rzeczy dzieja sie tu naraz i kazda z nich osobno psuje uklad, gdy jej zabraknie:
   kierunek osi glownej (kolumna), przeniesienie rozkladu `space-between` z wrappera na pasek
   oraz rezerwacja wysokosci rzedu powrotu. Linia pod naglowkiem nie wymaga niczego: siedzi
   na wrapperze, a panel nie ma paddingu poziomego, wiec idzie na pelna szerokosc tak samo
   w obu wariantach. */
.lukuro-nav-head--logo {
	/* `align-items` i `justify-content` z reguly bazowej MUSZA zniknac razem z kierunkiem:
	   `center` zwezilby oba rzedy do ich wlasnej szerokosci, a `space-between` rozepchnalby
	   je w PIONIE, bo po obrocie osi dziala na wysokosc, nie na szerokosc. */
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	/* Rytm pionowy wrappera: jednorzedowy naglowek bierze wysokosc wylacznie z celow
	   dotykowych, a dwa rzedy potrzebuja wlasnego oddechu nad logo i pod powrotem. */
	padding-block: var(--lukuro-nav-head-logo-pad, 8px);
}

.lukuro-nav-head-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--lukuro-nav-tap, 44px);
}

.lukuro-nav-head-logo {
	display: inline-flex;
	align-items: center;
	/* Znak nie ma wypchnac krzyzyka poza pasek przy szerokim logotypie. */
	max-width: calc(100% - var(--lukuro-nav-tap, 44px) - 1rem);
	color: inherit;
	text-decoration: none;
}

.lukuro-nav-head-logo-img {
	display: block;
	/* Wysokosc jest STERUJACA, szerokosc wynika z proporcji pliku. Odwrotnie byloby
	   zawodne: SVG bez zadeklarowanych wymiarow dostaje od WordPressa atrybuty 1x1,
	   wiec `height: auto` zostawiloby znak wielkosci jednego piksela. */
	height: var(--lukuro-nav-head-logo-h, 32px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Powrot WJEZDZA razem z widokiem, zamiast pojawiac sie skokiem. Kierunek, czas i krzywa
   sa te same co u warstwy stosu (`.lukuro-nav-view`: `translateX(100%)` -> `none`), a
   `syncHead()` leci z `syncViews()`, czyli w tej samej klatce co start slajdu - stad oba
   ruchy widac jako jeden. Dystans jest krotki celowo: rzad ma towarzyszyc wjazdowi widoku,
   a nie konkurowac z nim.

   `visibility` jest w liscie swiadomie. Przy przejsciu, w ktorym jedna z wartosci to
   `visible`, wezel pozostaje widoczny przez caly czas trwania - bez tego znikalby w pierwszej
   klatce chowania i `opacity` nie mialaby czego wygaszac.

   Blok `prefers-reduced-motion` na koncu arkusza wymienia `.lukuro-nav-head-back` w liscie
   `transition: none`, wiec przy wylaczonym ruchu ta animacja gasnie razem z reszta. */
.lukuro-nav-head--logo .lukuro-nav-head-back {
	transition:
		color var(--lukuro-nav-duration) ease,
		transform var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		opacity var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		visibility var(--lukuro-nav-duration) var(--lukuro-nav-ease);
}

/**
 * Rezerwacja wysokosci rzedu powrotu w korzeniu stosu.
 *
 * Tu trzeba PRZEBIC `display: none` z reguly `.lukuro-nav-head-back[hidden]` wyzej, a nie
 * ominac ja pozycja w pliku: tamta ma specyficznosc (0,2,0), ta (0,3,0), i tylko dlatego
 * wygrywa. Odwrotnie niz w wariancie bez logo, gdzie przegrana nowej reguly jest celem -
 * tam `hidden` ma dalej chowac przycisk calkowicie.
 *
 * `visibility: hidden` zamiast `display: none` zostawia rzad w ukladzie: jego wysokosc
 * jest zarezerwowana takze wtedy, gdy powrotu nie widac, wiec wejscie w glab nie przesuwa
 * tresci pod spodem w trakcie animacji slajdu. Wezel niewidoczny przez `visibility` nie
 * jest tez celem tabulacji ani nie trafia do drzewa dostepnosci, wiec atrybut `hidden`
 * nadal robi swoje dla czytnika ekranu.
 *
 * Stan spoczynkowy jest jednoczesnie stanem POCZATKOWYM wjazdu opisanego wyzej: rzad stoi
 * odsuniety w prawo i przezroczysty, a zdjecie `hidden` przez `syncHead()` uruchamia ruch
 * do zera rownolegle ze slajdem widoku.
 */
.lukuro-nav-head--logo .lukuro-nav-head-back[hidden] {
	display: inline-flex;
	visibility: hidden;
	opacity: 0;
	transform: translateX(var(--lukuro-nav-pad));
}

/* --- Stos widokow ---
   Kontener przycina slajd, a kazdy widok jest osobna warstwa na pelna wysokosc.
   Widok pod spodem zostaje w DOM (odsuniety w lewo), zeby powrot mial z czego wjechac. */
.lukuro-nav-stack {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.lukuro-nav-view {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--lukuro-nav-view-pad-block) var(--lukuro-nav-pad) 2rem;
	background: var(--lukuro-nav-surface);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform var(--lukuro-nav-duration) var(--lukuro-nav-ease);
}

/**
 * Widok poza sciezka musi byc display:none, a nie tylko odsuniety transformem. Dwa powody:
 * element schowany samym transformem bywa przez przegladarke uznany za widoczny i pobiera
 * swoje zdjecia, a do tego rozszerza obszar przewijania stosu - wystarczy wtedy, ze focus
 * trafi w wezel poza ekranem, a przegladarka przewinie stos w bok i cala szuflada odjezdza.
 * Reguly UA `[hidden] { display: none }` nie ma tu z czego dziedziczyc: `display: flex`
 * powyzej pochodzi z arkusza autora i bije arkusz przegladarki niezaleznie od specyficznosci.
 */
.lukuro-nav-view[hidden] {
	display: none;
}

.lukuro-nav-view.is-active {
	transform: none;
}

.lukuro-nav-view.is-behind {
	transform: translateX(-25%);
}

.lukuro-nav-view-empty {
	display: block;
	font-size: .75em;
	color: var(--lukuro-nav-text-muted);
	opacity: .7;
}

/* Naglowek widoku jest na froncie UKRYTY WIZUALNIE - powrot i nazwa poziomu stoja
   w naglowku panelu. Nazwa zostaje jednak w widoku, bo jest celem fokusu po wejsciu
   w glab (czytnik ekranu czyta, dokad uzytkownik wszedl) i zrodlem tekstu dla naglowka.

   Ukrycie idzie technika clip, a NIE `display: none`: element wyjety z drzewa ukladu
   przestaje byc fokusowalny, wiec `title.focus()` po wejsciu w glab nie mialby na czym
   zadzialac i nazwa poziomu nie zostalaby przeczytana. */
.lukuro-nav-view-head {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lukuro-nav-view-title {
	display: block;
	min-width: 0;
	font-size: var(--lukuro-nav-row-size, 12px);
	font-weight: 600;
	letter-spacing: var(--lukuro-nav-row-tracking, .18em);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-transform: uppercase;
	text-align: left;
	/* Dluga nazwa zakladki ma sie skrocic, a nie zlamac paska na dwa wiersze. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Focus na tytule jest PROGRAMOWY (po wejsciu w widok, zeby czytnik ekranu przeczytal
   nazwe poziomu), wiec obwodka tylko dla nawigacji z klawiatury. */
.lukuro-nav-view-title:focus:not(:focus-visible) {
	outline: none;
}

/* Grot powrotu rysowany w CSS - fallback, gdy autor nie wybral ikony w kontrolce.
   Zyje w naglowku panelu, wewnatrz `.lukuro-nav-head-back`. */
.lukuro-nav-back-arrow {
	flex: 0 0 auto;
	width: .55em;
	height: .55em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	/* Grot jest optycznie ciezszy po prawej - przesuniecie stawia go na srodku celu. */
	margin-left: .15em;
}

/* --- Grupa linkow bez wchodzenia w glab --- */
/* Naglowek nad linkami stojacymi od razu na liscie menu. Wizualnie rowny tytulowi panelu
   (`.lukuro-nav-title`), zeby oba czytaly sie jako ta sama warstwa informacji, a nie jako
   pozycja menu - stad brak celu dotykowego 44 px i brak obramowania wiersza. */
.lukuro-nav-group-title {
	display: block;
	margin: 1.25rem 0 .25rem;
	font-weight: 600;
	font-size: .8em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lukuro-nav-text-muted);
	text-decoration: none;
	transition: color var(--lukuro-nav-duration) ease;
}

/* Pierwsza grupa w widoku nie potrzebuje odstepu od gory - nad nia nie ma czego oddzielac. */
.lukuro-nav-section--flat:first-child .lukuro-nav-group-title {
	margin-top: .25rem;
}

.lukuro-nav-group-title--link:hover,
.lukuro-nav-group-title--link:focus-visible {
	color: var(--lukuro-nav-accent);
}

/* --- Wiersze --- */
.lukuro-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Separator „miedzy", nie „pod kazdym" - odpowiednik `.divide-y` referencji. Ostatni
   wiersz listy nie konczy sie juz linia wiszaca nad pustym miejscem.

   Linia siedzi na `<li>`, a nie na `<a>`, z dwoch powodow: w siatce kafelkow wiersz
   w ogole nie jest linkiem pelnej szerokosci, a w etapie akordeonu obok linku stanie
   przycisk rozwijania i `<a>` przestanie opisywac caly wiersz. */
.lukuro-nav-list:not(.lukuro-nav-list--tiles) > .lukuro-nav-item + .lukuro-nav-item {
	border-top: 1px solid var(--lukuro-nav-hairline);
}

/* Widok korzenia nie ma listy: sekcje sa tam rodzenstwem, a wiersz zakladki siedzi
   bezposrednio w sekcji. Linia miedzy sekcjami trzyma ten sam rytm co linia miedzy
   wierszami wewnatrz widoku. */
.lukuro-nav-view--root > .lukuro-nav-section + .lukuro-nav-section {
	border-top: 1px solid var(--lukuro-nav-hairline);
}

.lukuro-nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
	/* Cel dotykowy 44 px stoi osobno od paddingu: sam odstep wiersza (16 px + 16 px przy
	   12-pikselowym stopniu pisma) daje ok. 52 px, ale wdrozenie moze go zmniejszyc
	   zmienna, a prog dotykowy ma zostac. */
	min-height: 44px;
	padding: var(--lukuro-nav-row-pad, 16px) 0;
	background: none;
	border: 0;
	color: var(--lukuro-nav-text);
	font: inherit;
	font-size: var(--lukuro-nav-row-size, 12px);
	letter-spacing: var(--lukuro-nav-row-tracking, .18em);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--lukuro-nav-duration) ease;
}

/* Hover zmienia SAM kolor. Wczesniej dokladal `padding-left`, wiec kazde przesuniecie
   kursora po liscie przesuwalo wiersze w bok - referencja tego nie robi i slusznie:
   ruch tekstu pod kursorem czyta sie jak blad, a nie jak reakcja. */
.lukuro-nav-row:hover,
.lukuro-nav-row:focus-visible {
	color: var(--lukuro-nav-accent);
}

.lukuro-nav-row--see-all {
	color: var(--lukuro-nav-text-muted);
	font-size: .9em;
}

.lukuro-nav-row--empty {
	color: var(--lukuro-nav-text-muted);
	font-size: .75em;
	cursor: default;
}

.lukuro-nav-row-arrow {
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* --- Akordeon podkategorii (P4) ---
   Wiersz z podlista to `li > a + button + ul`: link zostaje linkiem do kategorii
   nadrzednej, a przelacznik jest osobnym celem obok niego. `<li>` staje sie flexem
   z zawijaniem, zeby podlista lamala sie na pelna szerokosc pod para link + przycisk.
   Linia miedzy wierszami siedzi juz na `<li>` (regula wyzej), wiec doklejenie przycisku
   jej nie rozjezdza.

   Wartosci podlisty sa PIKSELOWE z tego samego powodu, co rytm wierszy: referencja
   podaje 1.5rem / .5rem / .75rem przy korzeniu 16 px, a instancje tego portfela chodza
   z korzeniem 10 px (Advanced Themer, 62.5%). Przeliczone: 24 px, 8 px, 12 px. */
.lukuro-nav-item--subs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.lukuro-nav-item--subs > .lukuro-nav-row {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.lukuro-nav-subs-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Cel dotykowy 44 px stoi na przycisku, a nie na ikonie: sama ikona ma 10 px.
	   Ujemny margines wyciaga ten cel w padding widoku, zeby „+” siedzial optycznie
	   przy krawedzi listy, a nie 20 px przed nia. */
	min-width: var(--lukuro-nav-tap, 44px);
	min-height: var(--lukuro-nav-tap, 44px);
	margin-inline-end: calc(var(--lukuro-nav-pad, 20px) * -1);
	padding: 0;
	background: none;
	border: 0;
	color: var(--lukuro-nav-text);
	cursor: pointer;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-subs-toggle:hover,
.lukuro-nav-subs-toggle:focus-visible {
	color: var(--lukuro-nav-accent);
}

/* Ikona „+”: dwie kreski 1 px w kwadracie 10 px. Po rozwinieciu pozioma gasnie,
   a obie obracaja sie o cwierc obrotu - z „+” zostaje pionowa kreska w poziomie. */
.lukuro-nav-plus {
	position: relative;
	display: block;
	width: var(--lukuro-nav-plus-size, 10px);
	height: var(--lukuro-nav-plus-size, 10px);
}

.lukuro-nav-plus::before,
.lukuro-nav-plus::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition:
		transform var(--lukuro-nav-plus-duration, .25s) var(--lukuro-nav-ease),
		opacity var(--lukuro-nav-plus-duration, .25s) var(--lukuro-nav-ease);
}

.lukuro-nav-plus::before {
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	margin-block-start: -.5px;
}

.lukuro-nav-plus::after {
	inset-block-start: 0;
	inset-inline-start: 50%;
	width: 1px;
	height: 100%;
	margin-inline-start: -.5px;
}

/* Selektor jest zakotwiczony w klasie przycisku, a nie w samym `[aria-expanded="true"]`:
   goly atrybut niesie w tym module takze wiersz drill i hamburger, wiec regula bez kotwicy
   celowalaby w cudzy stan. Ryzyko jest dzis teoretyczne (`.lukuro-nav-plus` zyje wylacznie
   w tym przycisku), ale to dokladnie ta klasa luzu, ktora zamyka praca P5. */
.lukuro-nav-subs-toggle[aria-expanded="true"] > .lukuro-nav-plus::before {
	opacity: 0;
	transform: rotate(-90deg);
}

.lukuro-nav-subs-toggle[aria-expanded="true"] > .lukuro-nav-plus::after {
	transform: rotate(-90deg);
}

/* Podlista czyta sie jako ta sama lista o poziom nizej: linia pionowa po stronie
   poczatkowej, wciecie i wlasny odstep miedzy pozycjami zamiast paddingu wiersza.
   Nazwy podkategorii ida BEZ kapitalikow - kapitaliki z trackingiem niosa poziom
   nadrzedny, a przy nazwach w rodzaju „Kocyk do fotelika 3 punktowego” zjadlyby
   po dwie linie na kazdej pozycji. Referencja robi tak samo: klasa `.h6` z kapitalikami
   siedzi tam na przelaczniku, a nie na linkach zagniezdzonej listy. */
.lukuro-nav-sublist {
	flex: 0 0 100%;
	display: grid;
	row-gap: 12px;
	list-style: none;
	margin: 0;
	margin-inline-start: 8px;
	padding: 0;
	padding-inline-start: 24px;
	padding-block-end: var(--lukuro-nav-row-pad, 16px);
	border-inline-start: 1px solid var(--lukuro-nav-hairline);
}

/* Stan zwiniety trzyma atrybut `hidden`, wiec musi wygrac z `display: grid` wyzej. */
.lukuro-nav-sublist[hidden] {
	display: none;
}

.lukuro-nav-sublink {
	display: block;
	color: var(--lukuro-nav-text-muted);
	font-size: var(--lukuro-nav-row-size, 12px);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-decoration: none;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-sublink:hover,
.lukuro-nav-sublink:focus-visible {
	color: var(--lukuro-nav-accent);
}

/* Opcjonalne "Zobacz wszystko" na szczycie podlisty (pole `subcats_see_all`). Nie jest
   nazwa podkategorii, tylko wyjsciem do kategorii nadrzednej, wiec odroznia sie kursywa
   pisma - tak samo jak wiersz o tej samej roli na szczycie widoku sekcji odroznia sie
   przygaszonym kolorem. */
.lukuro-nav-sublink--see-all {
	font-style: italic;
}

/* --- Ikony z kontrolek ---
   Wrapper wyrownuje ikone z kontrolki (font albo SVG) do siatki wierszy i naglowkow.
   Ksztalty rysowane w CSS (fallback) zyja na osobnych klasach i nie dostaja tych regul. */
.lukuro-nav-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.lukuro-nav-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lukuro-nav-icon--close {
	font-size: 16px;
}

.lukuro-nav-icon--back {
	font-size: .9em;
}

.lukuro-nav-icon--drill {
	font-size: .75em;
}

/* --- Grupy podpietego mega menu ---
   Eyebrow kolumny: krotki opis nad naglowkiem grupy (odpowiednik .lukuro-mega-col-eyebrow paska).
   Ujemny margines dolny dosuwa go do naglowka grupy, ktory ma wlasny margines gorny. */
.lukuro-nav-group-eyebrow {
	display: block;
	margin: 1.25rem 0 -1.1rem;
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lukuro-nav-text-muted);
	opacity: .7;
}

/* --- Prezentacja ze zdjeciami: kafelki ---
   Wariant dla pozycji, ktorych nazwy nic nie mowia (kolekcje) - miniatura, pod nia nazwa.
   Liczbe kolumn niesie --lukuro-nav-tiles (kontrolka), proporcje kafelka sa zmienna,
   zeby wdrozenie moglo je nadpisac bez ruszania markup-u. */
.lukuro-nav-list--tiles {
	display: grid;
	grid-template-columns: repeat(var(--lukuro-nav-tiles, 2), minmax(0, 1fr));
	gap: 1rem .75rem;
	padding: .75rem 0 1rem;
}

/* Pozycja bez miniatury DEGRADUJE do zwyklego wiersza - w siatce zajmuje pelny rzad,
   zeby nie zostawiac dziury obok kafelka. */
.lukuro-nav-list--tiles .lukuro-nav-item--wide {
	grid-column: 1 / -1;
}

.lukuro-nav-tile {
	display: block;
	color: var(--lukuro-nav-text);
	text-decoration: none;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-tile:hover,
.lukuro-nav-tile:focus-visible {
	color: var(--lukuro-nav-accent);
}

.lukuro-nav-tile-img {
	width: 100%;
	aspect-ratio: var(--lukuro-nav-tile-ratio, 1 / 1);
	object-fit: cover;
	border-radius: var(--lukuro-nav-tile-radius, 0);
	/* Tlo pod lazy-load: kafelek trzyma wymiar zanim zdjecie dojedzie (zero CLS). */
	background: var(--lukuro-nav-surface-subtle);
}

.lukuro-nav-tile-label {
	display: block;
	padding-top: .45em;
	font-size: .9em;
	line-height: 1.3;
}

/* --- Prezentacja ze zdjeciami: wiersze z miniatura --- */
.lukuro-nav-row--media {
	justify-content: flex-start;
}

.lukuro-nav-row-thumb {
	flex: 0 0 auto;
	width: var(--lukuro-nav-row-thumb-size, 56px);
	height: var(--lukuro-nav-row-thumb-size, 56px);
	object-fit: cover;
	border-radius: var(--lukuro-nav-tile-radius, 0);
	background: var(--lukuro-nav-surface-subtle);
}

/* --- Zdjecie kategorii (feature) w widoku podpietego mega menu ---
   Renderuje sie tylko, gdy zadna grupa nie prezentuje sie ze zdjeciami. */
.lukuro-nav-feature {
	margin-top: 1.25rem;
}

.lukuro-nav-feature-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--lukuro-nav-tile-radius, 0);
	background: var(--lukuro-nav-surface-subtle);
}

/* --- Karty (P2) i wspolny renderer karty (P6) ---
   Kontener `.lukuro-nav-cards` stoi pod lista linkow sekcji oraz pod grupami widoku L2
   podpietego mega menu (tam trzyma karte promo). Progi zachowania to CZYSTY CSS, bez
   zliczania kart w PHP: jedna karta (`:only-child`) zajmuje pelna szerokosc, dwie i wiecej
   tworza pasek przewijany w bok - ten sam mechanizm ma referencja (`.scroll-area.bleed`,
   `> * { min-width } + > *:only-child { min-width: 100% }`).

   Slider jest natywny (`overflow-x: auto`), bez biblioteki. Od referencji odchodzimy w jednym
   punkcie, swiadomie na plus: `scroll-snap`, bo bez niego karta zatrzymuje sie w losowym
   miejscu. Pasek ma ujemne marginesy (odpowiednik `.bleed`: karty jada pod krawedz panelu,
   a zaczynaja w kolumnie tresci), wiec snap dostaje `scroll-padding-inline` rowny paddingowi
   widoku - inaczej celowalby w fizyczna krawedz panelu zamiast w jego wewnetrzny padding.

   Wartosci sa PIKSELOWE z tego samego powodu, co rytm wierszy: referencja podaje
   `12.5rem` szerokosci karty i `2rem 1.25rem` odstepu przy korzeniu 16 px, a instancje
   tego portfela chodza z korzeniem 10 px (Advanced Themer, 62.5%). Przeliczone: 200 px
   oraz 32 px 20 px. */
.lukuro-nav-cards {
	display: flex;
	gap: 32px 20px;
	margin-block-start: var(--lukuro-nav-row-pad, 16px);
	margin-inline: calc(var(--lukuro-nav-pad, 20px) * -1);
	padding-inline: var(--lukuro-nav-pad, 20px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--lukuro-nav-pad, 20px);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.lukuro-nav-cards::-webkit-scrollbar {
	display: none;
}

/* Karta w pasku ma stala szerokosc, a nie `flex: 1` - przy `width: auto` zdjecie
   `width: 100%` rozciagneloby ja do wlasnej szerokosci naturalnej. */
.lukuro-nav-cards > * {
	flex: 0 0 auto;
	width: var(--lukuro-nav-card-w, 200px);
	min-width: var(--lukuro-nav-card-w, 200px);
	scroll-snap-align: start;
}

/* Jedna karta = pelna szerokosc. Snap jest wtedy obojetny: nie ma czego przewijac. */
.lukuro-nav-cards > *:only-child {
	width: 100%;
	min-width: 100%;
}

/* Reguly karty sa zakotwiczone w `.lukuro-nav-panel`, a nie w samej klasie: te same
   klasy `lukuro-nav-card*` renderuje wspolny renderer takze w pasku mega menu, ktory ma
   dla nich wlasne style w mega-menu.css. Bez kotwicy wyglad promo w pasku zalezalby od
   tego, czy na stronie stoi tez szuflada (czy ten arkusz w ogole sie zaladowal). */
.lukuro-nav-panel .lukuro-nav-card {
	display: block;
	color: var(--lukuro-nav-text);
	text-decoration: none;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-panel .lukuro-nav-card:hover,
.lukuro-nav-panel .lukuro-nav-card:focus-visible {
	color: var(--lukuro-nav-accent);
}

/* Zdjecie z plakietka: przyciecie i zaokraglenie siedza na wrapperze, nie na korzeniu,
   zeby tekst pod zdjeciem nie byl przycinany razem z nim. */
.lukuro-nav-panel .lukuro-nav-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--lukuro-nav-tile-radius, 0);
	/* Tlo pod lazy-load: karta trzyma wymiar zanim zdjecie dojedzie (zero CLS). */
	background: var(--lukuro-nav-surface-subtle);
}

.lukuro-nav-panel .lukuro-nav-card-img {
	display: block;
	width: 100%;
	aspect-ratio: var(--lukuro-nav-card-ratio, 4 / 3);
	object-fit: cover;
}

.lukuro-nav-panel .lukuro-nav-card-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--lukuro-color-primary, #111);
	color: var(--lukuro-color-on-primary, #fff);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .3em .7em;
	border-radius: 2px;
}

.lukuro-nav-panel .lukuro-nav-card-body {
	display: block;
	padding-block-start: 8px;
}

/* Tytul karty czyta sie jak wiersz menu (`p.h6` referencji) - ten sam stopien, tracking
   i interlinia co `.lukuro-nav-row`. */
.lukuro-nav-panel .lukuro-nav-card-title {
	display: block;
	font-size: var(--lukuro-nav-row-size, 12px);
	font-weight: 600;
	letter-spacing: var(--lukuro-nav-row-tracking, .18em);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-transform: uppercase;
}

/* Podpis karty: wartosci docelowe z tabeli M4 planu (`.smallcaps.text-xs.text-subdued`
   referencji: `.625rem` = 10 px, tracking .18em, przygaszony kolor). Etap 1 przestawil je
   na ówczesnym `.lukuro-nav-promo-title`; ta regula jest tym samym stanem pod docelowa nazwa. */
.lukuro-nav-panel .lukuro-nav-card-caption {
	display: block;
	font-size: 10px;
	letter-spacing: var(--lukuro-nav-row-tracking, .18em);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-transform: uppercase;
	color: var(--lukuro-nav-text-muted);
}

/* --- Stopka panelu (od 2.48.0, zachowanie zmienione w 2.49.0) ---
   Trzeci region panelu i RODZENSTWO stosu widokow, nie jego dziecko: stos przewija sie
   i przesuwa w bok przy wejsciu w glab, a stopka ma stac w miejscu, nie jechac z widokiem.
   Ukladu nie trzeba do tego niczym wymuszac - `.lukuro-nav-panel` jest flex-kolumna,
   a `.lukuro-nav-stack` ma `flex: 1 1 auto`, wiec stos kurczy sie o wysokosc stopki sam.
   Ta sama wlasciwosc dziala w druga strone: gdy stopka zwinie sie do zera, stos odzyskuje
   jej wysokosc bez jednej dodatkowej reguly.

   Wariant bez wlaczonej stopki nie ma tu czego dotknac: render nie wypisuje wtedy ani
   jednego wezla, wiec wdrozenia sprzed 2.48.0 dostaja panel co do piksela taki jak dotad.

   Dlaczego siatka, a nie wysokosc: `height: auto` nie jest animowalne, a `visibility` albo
   samo `opacity` zostawiaja pudelko w ukladzie - czyli dokladnie to miejsce, ktore stos ma
   odzyskac. `grid-template-rows: 1fr -> 0fr` z `overflow: hidden` zwija wezel do zera BEZ
   znajomosci jego wysokosci, ale wymaga dokladnie jednego dziecka z `min-height: 0`; stad
   `.lukuro-nav-foot-inner` w renderze. Odstepy pionowe i linia musza jechac osobno, bo
   padding i obramowanie leza POZA sciezka siatki i same z siebie by zostaly. */
.lukuro-nav-foot {
	flex: 0 0 auto;
	display: grid;
	grid-template-rows: 1fr;
	padding-block: var(--lukuro-nav-foot-pad-top, 20px) var(--lukuro-nav-foot-pad-bottom, 12px);
	padding-inline: var(--lukuro-nav-pad);
	border-top: 1px solid var(--lukuro-nav-hairline);
	background: var(--lukuro-nav-surface);
	overflow: hidden;
	transition:
		grid-template-rows var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		padding-block-start var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		padding-block-end var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		border-top-width var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		opacity var(--lukuro-nav-duration) var(--lukuro-nav-ease);
}

.lukuro-nav-foot-inner {
	display: flex;
	flex-direction: column;
	gap: var(--lukuro-nav-foot-gap, 12px);
	min-height: 0;
}

/**
 * Ponizej widoku glownego stopka znika - domyslnie, bo lista na kolejnym poziomie bywa
 * dluga, a stopka nie niesie tam nic, czego nie bylo na wejsciu.
 *
 * Glebokosc nie ma w panelu wlasnej klasy i celowo jej nie dostaje: stan stosu opisuje juz
 * widok glowny, ktory traci `is-active`, gdy wejdziemy dalej. `:has()` czyta to wprost, wiec
 * JS nie musi utrzymywac drugiego zrodla tej samej prawdy. Przegladarka bez `:has()` dostaje
 * zachowanie sprzed 2.49.0 (stopka na kazdym poziomie) - stan poprawny przez cala poprzednia
 * wersje, a nie zepsuty uklad.
 *
 * `visibility: hidden` stoi tu obok zwijania, nie zamiast niego: samo nie oddaloby miejsca,
 * ale zabiera zwinietym linkom ogniskowanie, a bez tego Tab wchodzilby w pasek, ktorego nie
 * widac. Znika z opoznieniem dlugosci ruchu, zeby tresc nie gasla skokiem przed zwinieciem.
 * Wlasnej deklaracji `visibility: visible` w stanie rozwinietym NIE MA swiadomie - dziecko
 * z taka deklaracja pokazywaloby sie mimo `visibility: hidden` na zamknietym panelu.
 */
.lukuro-nav-panel:has( .lukuro-nav-view--root:not( .is-active ) ) .lukuro-nav-foot:not( .lukuro-nav-foot--deep ):not( .lukuro-nav-foot--flow ) {
	grid-template-rows: 0fr;
	padding-block: 0;
	border-top-width: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		padding-block-start var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		padding-block-end var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		border-top-width var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		opacity var(--lukuro-nav-duration) var(--lukuro-nav-ease),
		visibility 0s linear var(--lukuro-nav-duration);
}

/**
 * Tryb "w tresci listy" (od 2.50.0) - stopka jako ostatnie dziecko widoku glownego.
 *
 * Po co drugi tryb, skoro pas ponizej stosu wyglada tak samo przy krotkiej liscie: bo przy
 * DLUGIEJ nie wyglada. Pas stoi poza obszarem przewijania, wiec zabiera liscie swoja wysokosc
 * zawsze - takze wtedy, gdy lista i tak sie nie miesci i kazdy piksel jest liscie potrzebny.
 * Stopka w tresci dzieli z lista jedno przewijanie: przy krotkiej liscie dociska ja do dolu
 * `margin-top: auto`, przy dlugiej schodzi pod nia i nie zabiera niczego.
 *
 * Ujemny margines poziomy zdejmuje padding widoku, zeby linia nad stopka szla na pelna
 * szerokosc panelu - tak samo jak w trybie pasa. Wlasny `padding-inline` stopki ustawia przy
 * tym tresc rowno z lista.
 *
 * Zwijanie przy wejsciu w glab tej stopki NIE dotyczy (wykluczona z reguly wyzej) i nie ma
 * czego dotyczyc: stopka jedzie wtedy w bok razem z widokiem glownym, wiec znika bez jednej
 * dodatkowej reguly.
 */
.lukuro-nav-foot--flow {
	margin-top: auto;
	margin-inline: calc(var(--lukuro-nav-pad) * -1);
}

/* Dolny oddech widoku lezalby POD stopka jako martwy pas. Warunek na dziecku, a nie klasa
   z PHP, bo o tym rozstrzyga obecnosc wezla: stopka wylaczona albo pusta nie zmienia widoku. */
.lukuro-nav-view--root:has( > .lukuro-nav-foot--flow ) {
	padding-bottom: 0;
}

/* Przycisk konta: pelna szerokosc regionu i wlasne tlo (referencja). Wysokosc bierze sie
   z celu dotykowego, nie z samego paddingu - napis jest tu krotki i jednowierszowy. */
.lukuro-nav-foot-login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lukuro-nav-tap, 44px);
	padding: .5em 1em;
	background: var(--lukuro-nav-foot-btn-bg);
	color: var(--lukuro-nav-foot-btn-fg);
	border-radius: var(--at-radius--s, 8px);
	font-size: var(--lukuro-nav-row-size, 12px);
	font-weight: 600;
	letter-spacing: var(--lukuro-nav-row-tracking, .18em);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity var(--lukuro-nav-duration) ease;
}

/* Stan wskazania idzie przezroczystoscia, a nie druga para kolorow: tlo przycisku ustala
   wdrozenie, wiec kazdy dobrany tu odcien hoveru bylby zgadywaniem wobec nieznanej bazy.
   Kontrast pary tlo-tekst zostaje przy tym nietkniety, bo obie warstwy gasna razem. */
.lukuro-nav-foot-login:hover,
.lukuro-nav-foot-login:focus-visible {
	color: var(--lukuro-nav-foot-btn-fg);
	opacity: .85;
}

/* Ikony profili: wysrodkowane w rzedzie (referencja). */
.lukuro-nav-foot-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lukuro-nav-foot-gap, 12px);
}

.lukuro-nav-foot-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--lukuro-nav-tap, 44px);
	min-height: var(--lukuro-nav-tap, 44px);
	color: inherit;
	font-size: var(--lukuro-nav-foot-icon-size, 20px);
	line-height: 1;
	text-decoration: none;
	transition: color var(--lukuro-nav-duration) ease;
}

.lukuro-nav-foot-social-link:hover,
.lukuro-nav-foot-social-link:focus-visible {
	color: var(--lukuro-nav-accent);
}

/* Rozmiar znaku jest wspolny dla obu drog ikony: font slucha `font-size`, plik SVG - dwoch
   wymiarow ponizej. Dzieki temu wiersz z pickera i wiersz z klasy Font Awesome stoja
   w jednym rzedzie tej samej wielkosci. */
.lukuro-nav-foot-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lukuro-nav-foot-social-icon svg,
.lukuro-nav-foot-social-icon img {
	display: block;
	width: var(--lukuro-nav-foot-icon-size, 20px);
	height: var(--lukuro-nav-foot-icon-size, 20px);
}

/**
 * Ikona z globalnej opcji jako MASKA, nie jako <img>.
 *
 * Plik daje tu wylacznie ksztalt (kanal alfa), a kolor bierze sie z `currentColor`, wiec znak
 * uczestniczy w stanach hover i focus linku i pasuje do panelu, ktorego tlo ustala wdrozenie.
 * `<img>` tego nie potrafi, a inline SVG wymagalby sanityzacji, ktora w rdzeniu nie mieszka.
 * Cena jest nazwana: znak wielobarwny splaszcza sie do jednego koloru.
 *
 * Adres wjezdza zmienna `--lukuro-nav-foot-icon` ustawiana inline przy wezle - reguly Bricksa
 * per ID elementu po portalu panelu do <body> juz w niego nie trafiaja, wiec styl przy samym
 * wezle jest tu jedyna droga.
 */
.lukuro-nav-foot-social-icon--mask {
	width: var(--lukuro-nav-foot-icon-size, 20px);
	height: var(--lukuro-nav-foot-icon-size, 20px);
	background: currentColor;
	-webkit-mask-image: var(--lukuro-nav-foot-icon);
	mask-image: var(--lukuro-nav-foot-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Profil bez ikony: napis zamiast znaku. Wiersz bez ikony jest stanem poprawnym (nosnikiem
   wartosci jest adres), wiec link musi miec co pokazac, a nie kurczyc sie do zera. */
.lukuro-nav-foot-social-text {
	padding: 0 .5em;
	font-size: var(--lukuro-nav-row-size, 12px);
	font-weight: 600;
	letter-spacing: var(--lukuro-nav-row-tracking, .18em);
	line-height: var(--lukuro-nav-row-lh, 1.7);
	text-transform: uppercase;
}

/* --- Stan otwarcia na <body> --- */
body.lukuro-nav-open {
	overflow: hidden;
	/* Kompensacja paska przewijania: bez niej zdjecie scrollbara na desktopie
	   przesunelo by cala strone w prawo w momencie otwarcia szuflady. */
	padding-right: var(--lukuro-nav-scrollbar, 0px);
}

/**
 * Naglowek z opcja "slide up" chowa sie po przewinieciu, zabierajac ze soba hamburger.
 * Bricks rozwiazuje to dla wlasnego offcanvasu przez `:has(.brxe-offcanvas.brx-open)`,
 * ale nasz panel po portalu nie jest juz potomkiem naglowka, wiec celujemy w klase na <body>.
 */
body.lukuro-nav-open #brx-header.brx-sticky.slide-up {
	transform: none;
}

/* --- Builder ---
   Na kanwie panel zostaje w miejscu (bez portalu do <body>) i bez sterowania z JS.
   DOMYSLNIE jest jednak schowany tak samo jak na stronie - widac sam hamburger. Powod:
   rozwiniety panel ma pelna wysokosc i szerokosc kolumny, wiec zaslania reszte naglowka
   i autor nie moze pracowac na elementach obok. Podglad tresci wlacza sie swiadomie
   kontrolka "Rozwin menu podczas edycji" (`data-lukuro-nav-builder-expand`).

   Stan zwiniety nie potrzebuje zadnych regul - panel dostaje wtedy style bazowe
   (`position: fixed`, `visibility: hidden`, transform poza ekran), czyli dokladnie to,
   co na stronie przed otwarciem. */
.lukuro-nav-drawer[data-lukuro-nav-builder="1"] .lukuro-nav-backdrop {
	display: none;
}

.lukuro-nav-drawer[data-lukuro-nav-builder="1"][data-lukuro-nav-builder-expand="1"] {
	display: block;
}

.lukuro-nav-drawer[data-lukuro-nav-builder="1"][data-lukuro-nav-builder-expand="1"] .lukuro-nav-panel {
	position: static;
	width: 100%;
	max-width: var(--lukuro-nav-panel-w);
	height: auto;
	transform: none;
	visibility: visible;
	box-shadow: none;
	border: 1px dashed var(--lukuro-nav-hairline);
}

.lukuro-nav-drawer[data-lukuro-nav-builder="1"][data-lukuro-nav-builder-expand="1"] .lukuro-nav-stack {
	position: static;
	overflow: visible;
}

.lukuro-nav-drawer[data-lukuro-nav-builder="1"][data-lukuro-nav-builder-expand="1"] .lukuro-nav-view {
	position: static;
	transform: none;
	overflow: visible;
}

.lukuro-nav-drawer[data-lukuro-nav-builder="1"][data-lukuro-nav-builder-expand="1"] .lukuro-nav-view[hidden] {
	display: flex;
}

/* Na kanwie widoki stoja rozwiniete jeden pod drugim, a naglowek panelu (rysowany RAZ)
   nie ma jak nazwac ich wszystkich - sterowanie stanem jest tu wylaczone. Nazwa poziomu
   wraca wiec do widoku, zeby autor wiedzial, ktora lista jest ktora. Na stronie ten sam
   wezel zostaje ukryty wizualnie. */
.lukuro-nav-drawer[data-lukuro-nav-builder="1"][data-lukuro-nav-builder-expand="1"] .lukuro-nav-view-head {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 .25rem;
	overflow: visible;
	clip-path: none;
	border-bottom: 1px solid var(--lukuro-nav-hairline);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.lukuro-nav-panel,
	.lukuro-nav-backdrop,
	.lukuro-nav-view,
	.lukuro-nav-row,
	.lukuro-nav-tile,
	.lukuro-nav-card,
	.lukuro-nav-group-title,
	.lukuro-nav-head-back,
	.lukuro-nav-foot,
	.lukuro-nav-foot-login,
	.lukuro-nav-foot-social-link,
	.lukuro-nav-toggle,
	.lukuro-nav-close,
	.lukuro-nav-subs-toggle,
	.lukuro-nav-sublink,
	.lukuro-nav-plus::before,
	.lukuro-nav-plus::after {
		transition: none !important;
	}

	.lukuro-nav-view.is-behind {
		transform: none;
	}
}

@media print {
	.lukuro-nav-panel,
	.lukuro-nav-backdrop,
	.lukuro-nav-toggle {
		display: none;
	}
}