/*
 * MEGA MENU I NAGŁÓWEK SKLEPU
 *
 * Układ według makiety zatwierdzonej przez Dawida 13.09: pozycja w rozwijanym
 * menu to karta z ikoną, nazwą, podtytułem i strzałką; po prawej panel
 * promocyjny; pod spodem pasek atutów.
 *
 * ⚠️ PLIK PISANY OD ZERA, nie dopisywany. Poprzednia wersja miała trzy warstwy
 * poprawek dokładanych na końcu, przez co reguły z początku walczyły z tymi
 * z końca — a przy równej specyficzności wygrywa późniejsza, więc kolejność
 * w pliku zaczynała znaczyć więcej niż intencja.
 */

/* ============================================================
   CZCIONKA NAWIGACJI I NAGŁÓWKÓW
   ============================================================

   ⚠️ POWÓD ISTNIENIA TEGO BLOKU — zmierzone 14.09, po czterech turach
   poprawiania nie tej własności, co trzeba.

   W Personalizuj → Dodatkowy CSS siedzi deklaracja:

       @font-face { font-family:'Poppins';
                    src:url('/wp-content/uploads/fonts/Poppins.woff2');
                    font-weight: 400 700; }

   Ten plik to **statyczny Poppins Regular o jednej wadze 400** (odczytane
   z pliku: brak osi `fvar`, `usWeightClass` = 400). Deklaracja twierdzi, że
   pokrywa zakres 400–700 i nie ma `unicode-range`, więc przykrywa prawdziwe
   kroje SemiBold dostarczone przez motyw. Przy `font-weight: 600` przeglądarka
   bierze ten plik i **syntetyzuje pogrubienie** — rozciąga kontury Regular
   zamiast użyć prawdziwego SemiBold.

   Zmierzone: napis przy wadze 600 miał dokładnie tę samą szerokość co przy
   wadze 400 (505,97 px), a prawdziwy SemiBold — 524,33 px. Kroje SemiBold
   motywu miały w `document.fonts` stan `unloaded`, czyli nie zostały nawet
   pobrane. Sztuczne pogrubienie ma inne proporcje i grubszą kreskę, więc
   czyta się jak zupełnie inny krój — i tym właśnie było „menu inną czcionką".

   ⚠️ REGUŁA: deklaracja `@font-face` musi mówić o pliku PRAWDĘ. Zakres wag
   szerszy niż faktyczna zawartość pliku nie daje dodatkowych wag — daje
   sztuczne pogrubienie i cicho wyłącza prawdziwe kroje o tej samej nazwie.

   Pliki niżej to scalone subsety latin + latin-ext (349 znaków, komplet
   polskich), po jednym na wagę, ~11 kB każdy. Waga jest zapisana W PLIKU
   (`usWeightClass`), nie tylko w CSS. Szerokość litery „N": 703 / 735 / 752 —
   to realna progresja wagi, nie synteza. */

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.st-mm {
	--mm-granat: #344a90;
	--mm-granat-hover: #2b3d78;
	--mm-granat-gleboki: #1f2c58;
	--mm-grafit: #181b22;
	--mm-szary: #606775;
	--mm-obwodka: #dce1ea;
	--mm-tlo: #f6f8fc;
	--mm-blekit: #e8ecf8;
	--mm-promien: 10px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.1rem, 1.8vw, 1.8rem);
	padding: clamp(1.3rem, 1.9vw, 1.9rem);
	font-size: 14px;
	line-height: 1.45;
	color: var(--mm-grafit);
	text-align: left;
}

.st-mm--z-atutami .st-mm-atuty {
	grid-column: 1 / -1;
}

/* ============================================================
   BANERY POD KOLUMNAMI
   ============================================================

   ⚠️ UKŁAD ZMIENIONY 13.09 — PIONOWY PANEL PO PRAWEJ ZNIKA.
   Dawid: „na górze będą te kategorie, rozciągniesz je, żeby były w jednej
   linijce, a niżej będą banery — dwa, takie podłużne, płaskie”.

   To nie jest zmiana gustu, tylko odzyskanie 330 px: panel zabierał je
   kolumnom kategorii, przez co przy czterech kolumnach nazwa dostawała
   ~196 px i łamała się na trzy wiersze. Stąd „za wysokie i ociężałe menu”.
   ============================================================ */

.st-mm-banery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.7rem, 1.1vw, 1rem);
	grid-column: 1 / -1;
}

/* Jeden baner rozciąga się na całą szerokość — pół pustego rzędu czyta się
   jak błąd składu, a nie jak zamiar. */
.st-mm-banery > .st-mm-baner:only-child { grid-column: 1 / -1; }

.st-mm-baner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 0;
	padding: .85rem 1.1rem;
	border-radius: var(--mm-promien);
	overflow: hidden;
	background: linear-gradient(100deg, #3a5199 0%, var(--mm-granat-gleboki) 100%);
	color: #fff;
}

/* ⚠️ Drugi baner jasny — dwa jednakowe granatowe prostokąty obok siebie
   czytają się jak jeden przecięty na pół. */
.st-mm-baner--jasny {
	background: var(--mm-blekit);
	color: var(--mm-grafit);
	border: 1px solid var(--mm-obwodka);
}

.st-mm-baner--blok {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
}

.st-mm-baner-obraz { position: absolute; inset: 0; z-index: 0; }

.st-mm-baner-obraz img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .3;
}

.st-mm-baner-tresc {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
	flex: 1 1 auto;
}

.st-mm .st-mm-baner-tytul {
	font-family: 'Poppins', 'Inter', sans-serif !important;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	color: inherit;
}

.st-mm-baner-tekst {
	font-size: 12px;
	line-height: 1.4;
	opacity: .9;
}

.st-mm .st-mm-baner-btn.st-mm-baner-btn {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	border: 0;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	background: #fff;
	color: var(--mm-granat);
	min-height: 0;
}

.st-mm .st-mm-baner--jasny .st-mm-baner-btn.st-mm-baner-btn {
	background: var(--mm-granat);
	color: #fff;
}

.st-mm .st-mm-baner-btn.st-mm-baner-btn:hover {
	background: var(--mm-blekit);
	color: var(--mm-granat-hover);
	text-decoration: none;
}

.st-mm .st-mm-baner--jasny .st-mm-baner-btn.st-mm-baner-btn:hover {
	background: var(--mm-granat-hover);
	color: #fff;
}

.st-mm-kolumny {
	display: grid;
	/* ⚠️ minmax(0,1fr), nigdy samo 1fr — „Naklejki na ścianę do sypialni" ma
	   min-content szersze niż kolumna i rozpycha siatkę (mina z 11.09). */
	grid-template-columns: repeat(var(--st-mm-kol, 3), minmax(0, 1fr));
	gap: clamp(.8rem, 1.4vw, 1.6rem);
	min-width: 0;
}

.st-mm-kolumna { min-width: 0; }

/* ------------------------------------------------- nagłówek kolumny */

.st-mm .st-mm-tytul {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 .75rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--mm-obwodka);
	text-decoration: none;
	color: var(--mm-grafit);
}

/* ⚠️ !important na font-family jest konieczne: CSS Tempo ma
   `body,p,li,span,div{font-family:'Inter'!important}` — bez tego każdy
   własny krój przegrywa (mina z 10.09, kafelki czcionek konfiguratora). */
.st-mm .st-mm-tytul .st-mm-tytul-tekst {
	font-family: 'Poppins', 'Inter', sans-serif !important;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	min-width: 0;
}

.st-mm a.st-mm-tytul:hover { color: var(--mm-granat); }
.st-mm a.st-mm-tytul:hover .st-mm-tytul-tekst { color: var(--mm-granat); }

.st-mm-ikona {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	color: var(--mm-granat);
}

/* --------------------------------------- pozycja jako karta z makiety */

.st-mm-lista { margin: 0; padding: 0; list-style: none; }
.st-mm-lista li { margin: 0; padding: 0; list-style: none; }

/*
 * ⚠️ Podwojona klasa `.st-mm-lista.st-mm-lista`: Flatsome stylizuje odnośniki
 * w rozwijanym menu regułą o tej samej wadze, a przy remisie wygrywa
 * późniejsza — czyli motywu. Liczymy specyficzność, nie dokładamy !important.
 */
.st-mm .st-mm-lista.st-mm-lista li a.st-mm-poz {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 1px 0;
	padding: 7px 8px;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	background: none;
	color: var(--mm-grafit);
	transition: background-color .12s ease, color .12s ease;
}

.st-mm .st-mm-lista.st-mm-lista li a.st-mm-poz:hover {
	background-color: var(--mm-tlo);
	color: var(--mm-granat);
	text-decoration: none;
}

/* Kafelek ikony — jak w makiecie: jasne tło, granatowa kreska. */
.st-mm-poz-ikona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: var(--mm-blekit);
}

.st-mm-ikona-poz {
	width: 17px;
	height: 17px;
	color: var(--mm-granat);
}

.st-mm-poz-tresc {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.st-mm-poz-nazwa {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.st-mm-poz-opis {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--mm-szary);
}

/* Strzałka pojawia się przy najechaniu — w spoczynku, powtórzona
   trzydzieści pięć razy, byłaby szumem. */
.st-mm-poz-strzalka {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: var(--mm-granat);
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity .12s ease, transform .12s ease;
}

.st-mm .st-mm-lista.st-mm-lista li a.st-mm-poz:hover .st-mm-poz-strzalka {
	opacity: 1;
	transform: translateX(0);
}

/* =================================================== PODKATEGORIE ===== */

/*
 * ⚠️ PODLISTA JEST W HTML ZAWSZE — CHOWA JĄ WYŁĄCZNIE CSS.
 * Gdyby dokładał ją skrypt, wyszukiwarka nie zobaczyłaby ani jednego linku
 * do marki auta, a przy zablokowanym JavaScripcie trzynaście kategorii
 * przestałoby istnieć w nawigacji.
 *
 * ⚠️ `focus-within`, nie sam `hover` — bez tego lista jest nieosiągalna
 * z klawiatury, a fokus wędruje po linkach, których nie widać.
 */
.st-mm-lista li.st-mm-ma-pod { position: relative; }

.st-mm-ma-pod > .st-mm-poz .st-mm-poz-strzalka {
	opacity: .45;
	transform: none;
}

.st-mm .st-mm-pod {
	position: absolute;
	left: calc(100% - 6px);
	top: -6px;
	z-index: 30;
	display: none;
	margin: 0;
	padding: 6px;
	min-width: 186px;
	list-style: none;
	border: 1px solid var(--mm-obwodka);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(24, 27, 34, .13);
}

.st-mm-ma-pod:hover > .st-mm-pod,
.st-mm-ma-pod:focus-within > .st-mm-pod { display: block; }

.st-mm .st-mm-pod li { margin: 0; padding: 0; list-style: none; }

.st-mm .st-mm-pod li a {
	display: block;
	padding: 5px 9px;
	border: 0;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	background: none;
	color: var(--mm-grafit);
}

.st-mm .st-mm-pod li a:hover {
	background: var(--mm-tlo);
	color: var(--mm-granat);
	text-decoration: none;
}

/*
 * ⚠️ W OSTATNIEJ KOLUMNIE PODLISTA OTWIERA SIĘ W LEWO.
 * Przy czterech kolumnach prawa krawędź ostatniej dotyka krawędzi rozwijanego
 * menu — lista wysunięta w prawo wyszłaby poza ekran i byłaby nieklikalna.
 */
.st-mm-kolumna:last-child .st-mm-pod,
.st-mm-kolumna:nth-last-child(1) .st-mm-pod {
	left: auto;
	right: calc(100% - 6px);
}

/* ----------------------------------------------------------- plakietki */

.st-mm-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	vertical-align: middle;
	background: var(--mm-blekit);
	color: var(--mm-granat);
}

.st-mm-badge--bestseller { background: var(--mm-granat); color: #fff; }

/* ⚠️ #1E8E5A na bieli daje 4,14 — poniżej AA dla drobnego tekstu,
   a plakietka ma 9,5 px. Stąd ciemniejszy wariant. */
.st-mm-badge--nowosc { background: #17784b; color: #fff; }
.st-mm-badge--promocja { background: #c0392b; color: #fff; }

/* --------------------------------------------------------- pasek atutów */

.st-mm-atuty {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin-top: .2rem;
	padding-top: .9rem;
	border-top: 1px solid var(--mm-obwodka);
}

.st-mm-atut {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mm-szary);
}

.st-mm-atut-ikona {
	width: 17px;
	height: 17px;
	color: var(--mm-granat);
}

/* ============================================================
   OPRAWA ROZWIJANEGO MENU
   ============================================================ */

.nav-dropdown:has(.st-mm) {
	padding: 0;
	border-radius: 12px;
	box-shadow: 0 20px 48px rgba(24, 27, 34, .14);
}

.nav-dropdown .st-mm { margin: 0; }

/*
 * ⚠️ FLATSOME NADAJE KLASĘ `menu-item-design-container-width`, ALE NIE MA
 * DO NIEJ REGUŁY — wariant jest w panelu, a szerokość nigdzie nie ustawiana.
 * Do tego `li` ma `position: relative`, więc rozwijane menu pozycjonowało się
 * względem samej pozycji (72 px przy „Naklejkach"). `position: static`
 * sprawia, że odniesieniem staje się pasek `ul.nav`.
 */
.header-bottom .nav > li.menu-item-has-block,
.header-main .nav > li.menu-item-has-block { position: static; }

/*
 * ⚠️ ODNIESIENIEM MUSI BYĆ NAGŁÓWEK, NIE PASEK NAWIGACJI.
 * Zmierzone 13.09: `ul.nav-left` ma `position: relative` i **974 px**, więc
 * rozwijane menu dziedziczyło tę szerokość — cztery kolumny ściskały się
 * do ~200 px i nazwy łamały się na cztery wiersze. Zdjęcie `relative`
 * z paska przenosi odniesienie na `.header-bottom` (1585 px), a stąd menu
 * może wyrównać się do szerokości kontenera treści.
 */
.header-bottom ul.nav-left,
.header-main ul.nav-left { position: static; }

.header-bottom .nav > li.menu-item-design-container-width > .nav-dropdown,
.header-main .nav > li.menu-item-design-container-width > .nav-dropdown {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: min(1270px, calc(100vw - 32px));
	max-width: none;
}

/*
 * ⚠️ PRZYCISKI SIEDZĄ W OSOBNYM PASKU O SZEROKOŚCI 266 px, a potrzebują ~330.
 * To dlatego zawijały się do drugiego wiersza — nie przez długość menu,
 * tylko przez wąski kontener po prawej. `nowrap` plus zakaz kurczenia
 * trzyma je w jednej linii.
 */
.header-bottom .flex-col.flex-right,
.header-main .flex-col.flex-right {
	flex: 0 0 auto;
	white-space: nowrap;
}

.header-bottom ul.nav-right,
.header-main ul.nav-right {
	flex-wrap: nowrap;
}

/*
 * ⚠️ LOGO NA TELEFONIE NIE BYŁO NA ŚRODKU EKRANU — zmierzone 14.09.
 *
 * Flatsome nadaje paskowi klasę `medium-logo-center`, czyli DEKLARUJE
 * wyśrodkowanie, ale robi je przez `justify-content: space-between` na trzech
 * kolumnach. Lewa (hamburger) ma `flex: 1 1 0%` i rośnie, prawa (koszyk) nie —
 * więc logo ląduje w środku MIĘDZY KOLUMNAMI, a nie w środku ekranu.
 *
 * Zmierzone przy oknie 375 px: lewa 116 px, prawa 34 px, logo odchylone
 * o **+41 px w prawo**. Po zrównaniu wzrostu obu kolumn: po 75 px, odchylenie **0**.
 *
 * ⚠️ SPRAWDZONE, ŻE TO NIE NASZA REGUŁA `flex: 0 0 auto` WYŻEJ — po jej zdjęciu
 * odchylenie było identyczne (41 px). To zachowanie motywu, nie nasz regres.
 *
 * Zakres wyłącznie poniżej progu „medium" Flatsome, gdzie pasek ma układ
 * mobilny; na desktopie kolumna prawa musi zostać przy `0 0 auto`, bo tam
 * trzyma szerokość wyszukiwarki i koszyka.
 */
@media (max-width: 849px) {
	.header-main .header-inner > .flex-col.flex-right {
		flex: 1 1 0%;
	}
}

.header-bottom ul.nav-right > li,
.header-main ul.nav-right > li {
	flex: 0 0 auto;
}

.header-bottom .nav > li.menu-item-design-custom-size,
.header-main .nav > li.menu-item-design-custom-size { position: relative; }

.header-bottom .nav,
.header-bottom .flex-col { overflow: visible; }

/* ============================================================
   PASEK NAWIGACJI
   ============================================================ */

/*
 * ⚠️ CZCIONKA MENU MIAŁA 10 px. Zmierzone 13.09 — Dawid zgłosił to dwa razy
 * („nadal są malutkie literki"), a moja pierwsza poprawka ruszyła wyłącznie
 * nagłówki WEWNĄTRZ rozwijanego menu, nie samo menu. To dwa różne elementy;
 * trzeba było zmierzyć, który jest za mały, zamiast poprawiać ten, o którym
 * akurat myślałem.
 */
/*
 * ⚠️ TO NIE BYŁA „INNA CZCIONKA”, TYLKO ROZSTRZELENIE NA 2 px.
 *
 * Dawid zgłaszał trzeci raz, że pozycje menu są napisane innym krojem niż
 * reszta strony. Zmierzone 13.09 na żywej stronie: krój jest poprawny
 * (Poppins 600), ale `letter-spacing` wynosi **2 px** przy piśmie 12,5 px.
 * Przy takim stosunku ten sam krój czyta się jak zupełnie inny — i to była
 * prawdziwa treść uwagi.
 *
 * Winna reguła motywu: `.header-bottom-nav.nav > li > a { letter-spacing: 2px;
 * font-size: 63% }`. Ma specyficzność **(0,2,2)** — dokładnie tyle samo co moja
 * `.header-bottom .nav > li > a`, a **przy remisie wygrywa późniejsza**, czyli
 * motywu. Moja reguła była w arkuszu i nie działała ani przez chwilę.
 *
 * Stąd `!important` na obu własnościach: przy równej wadze to jedyne
 * rozstrzygnięcie, które nie zależy od kolejności wczytywania arkuszy.
 */
/*
 * ⚠️ `:not(.st-cta)` DOPISANE 21.09 — I TO JEST NAPRAWA MOJEJ WŁASNEJ MINY.
 *
 * Ta reguła ma `!important` na `font-size` i `letter-spacing`, więc przykrywała
 * przycisk „Własny projekt naklejki”, mimo że jego selektor ma wyższą
 * specyficzność: przy starciu `!important` z brakiem `!important` waga nie ma
 * żadnego znaczenia. Zmierzone: przycisk dostawał 14 px i odstęp 0,07 px
 * z TEJ reguły, a nie ze swojej.
 *
 * Naprawa przez ZAWĘŻENIE, nie przez dołożenie `!important` po drugiej stronie
 * — eskalacja zostawiłaby tę samą pułapkę na następną zmianę. Dokładnie ta sama
 * lekcja, którą zapisałem tu 13.09 przy przyciskach górnego paska.
 */
.header-bottom .nav > li > a:not(.st-cta),
.header-bottom-nav.nav > li > a:not(.st-cta),
.header-main .nav > li > a:not(.st-cta) {
	font-family: 'Poppins', 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600;
	letter-spacing: .005em !important;
	text-transform: none !important;
	padding-left: 8px;
	padding-right: 8px;
}

/*
 * ⚠️ NAGŁÓWEK ZOSTAJE W KONTENERZE (1270 px) — COFNIĘTA WŁASNA DECYZJA.
 *
 * Próbowałem zmieścić menu, przestawiając motyw na `header_width: full-width`.
 * Efekt u Dawida: *„rozjechane… wchodzę w Imprezy, pierwsza kolumna jest
 * ucięta”* — rozwijane menu wyrównywało się do szerszego nagłówka i wychodziło
 * poza ekran. **Poszerzanie pojemnika, żeby zmieścić treść, to przenoszenie
 * problemu, nie rozwiązanie** — zwłaszcza gdy pojemnik wyznacza też pozycję
 * wszystkiego, co z niego wyrasta.
 *
 * Budżet policzony na kontenerze 1270 px:
 *   „Kategorie” 120 + sześć działów ~700 + przyciski ~250 = **1070 px**,
 *   czyli 200 px zapasu na dłuższą nazwę działu w przyszłości.
 */

/*
 * ⚠️ MARGINESY POZYCJI TO GŁÓWNY POŻERACZ MIEJSCA, NIE SAME NAPISY.
 * Zmierzone przy oknie 1280: każda pozycja ma **po 11 px marginesu z obu
 * stron** (reguła Flatsome `.nav > li`), co przy siedmiu pozycjach daje
 * **133 px** — więcej niż cały przycisk „Kategorie”. Suma z marginesami
 * wychodziła **1011 px** przy pasku **933**, stąd łamanie.
 * Trzy tury poprawiałem `padding` odnośnika, czyli nie ten wymiar.
 */
.header-bottom ul.nav-left > li,
.header-main ul.nav-left > li {
	margin-left: 4px;
	margin-right: 4px;
}

/*
 * IKONY DZIAŁÓW W GÓRNYM PASKU (16.09) — ta sama ikona, którą działy mają
 * już od dawna w menu mobilnym (`ikona_w_menu_mobilnym()`), tu dokładana
 * przez `ikona_w_pasku_gornym()` na tej samej desce co Poppins z linii 590.
 * ⚠️ Kolor ikony to `stroke="currentColor"` — nie ustawiamy go tu wcale,
 * żeby hover (granat) łapał ikonę razem z tekstem bez osobnej reguły.
 * Zmierzone 16.09 na 1280 px PRZED zmianą: ostatnia pozycja („Realizacje")
 * kończyła się na x=887, przy pasku 1270 px — ~380 px zapasu, więc 16 px
 * ikony + 5 px odstępu na siedmiu pozycjach (~147 px) mieści się z marginesem.
 */
.header-bottom .nav > li > a .st-mm-dzial-ikona,
.header-main .nav > li > a .st-mm-dzial-ikona {
	display: inline-flex;
	align-items: center;
	margin-right: 5px;
	vertical-align: -3px;
}

.header-bottom .nav > li > a .st-mm-dzial-ikona-svg,
.header-main .nav > li > a .st-mm-dzial-ikona-svg {
	width: 16px;
	height: 16px;
	flex: none;
}

@media (max-width: 1060px) {
	.header-bottom .nav > li > a .st-mm-dzial-ikona-svg,
	.header-main .nav > li > a .st-mm-dzial-ikona-svg {
		width: 14px;
		height: 14px;
	}
}

/*
 * ⚠️ PRZYCISK „KATEGORIE” MA KLASĘ `.header-vertical-menu`, nie `__opener`.
 * Poprzednie reguły celowały w `__opener` i `__title` — nie trafiały w nic,
 * dlatego przycisk trzymał 170 px i 16 px pisma mimo trzech „poprawek”.
 * Sprawdzone odczytem `className` z żywej strony.
 */
/*
 * ⚠️ PRZYCISK „KATEGORIE” MIAŁ INTER, A MENU OBOK POPPINS.
 * Zmierzone 13.09: `.header-vertical-menu__title` renderował się krojem Inter,
 * czyli dwa sąsiadujące elementy tej samej nawigacji były złożone dwoma
 * różnymi krojami. To druga połowa uwagi „inna czcionka w menu”.
 */
.header-vertical-menu.header-vertical-menu {
	font-family: 'Poppins', 'Inter', sans-serif !important;
	font-size: 13px;
	letter-spacing: 0;
}

/*
 * ⚠️ PADDING BYŁ NAŁOŻONY DWA RAZY. Zmierzone: `__opener` ma 13 px z każdej
 * strony i `__title` w środku **drugie 13 px** — razem 52 px odstępu na napis
 * długości dziewięciu liter. Stąd 170 px szerokości przy 12 px pisma.
 * Wewnętrzny padding wyzerowany, zewnętrzny ścięty do 11 px.
 */
.header-vertical-menu .header-vertical-menu__opener,
.header-vertical-menu > a {
	padding-left: 13px;
	padding-right: 13px;
	font-size: 13px;
	letter-spacing: 0;
}

.header-vertical-menu .header-vertical-menu__title {
	font-family: 'Poppins', 'Inter', sans-serif !important;
	padding-left: 0;
	padding-right: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

/*
 * ⚠️ BEZ `nowrap` NA PASKU LEWYM.
 * Poprzednia wersja miała `flex-wrap: nowrap` — przez to menu nie zawijało się,
 * tylko **nachodziło na przyciski**. Zawijanie jest brzydkie, ale nachodzenie
 * jest błędem: dwa elementy w tym samym miejscu to jeden nieklikalny.
 * Skoro treść ma się zmieścić, ma się zmieścić naprawdę.
 */
.header-bottom ul.nav-left { flex-wrap: wrap; }

/* -------------------------------------------------- przycisk „Kategorie" */

.header-vertical-menu__opener.header-vertical-menu__opener,
.header-vertical-menu__title.header-vertical-menu__title {
	border-radius: 6px;
	background-color: #344a90;
}

/* ------------------------------------------------ przyciski po prawej */

/*
 * ⚠️ PRZYCISKI ŁAMAŁY SIĘ DO DRUGIEGO WIERSZA. Zmierzone: „Własny projekt
 * naklejki" ma 236 px, „Kontakt" 91 px, a pasek nawigacji tylko 926 px —
 * razem z sześcioma działami i przyciskiem „Kategorie" to za dużo.
 * Stąd ciaśniejszy padding i mniejszy stopień pisma na samych przyciskach,
 * bez ruszania menu.
 */
.header .header-button .button.button,
.header-bottom .header-button .button.button {
	border-radius: 10px !important;
	white-space: nowrap;
	font-size: 10.5px;
	letter-spacing: .01em;
	padding-left: .8em;
	padding-right: .8em;
	margin-bottom: 0;
	min-height: 0;
	line-height: 2.3;
}

.header .header-button .button.is-outline.button {
	position: relative;
	padding-left: 2.3em;
	border-width: 2px;
	font-weight: 700;
}

/* Ikona ołówka rysowana w data-uri: zero żądań, ostra na każdym ekranie.
   ⚠️ Kolor wpisany na sztywno — `currentColor` nie działa w data-uri. */
.header .header-button .button.is-outline.button::before {
	content: '';
	position: absolute;
	left: .85em;
	top: 50%;
	width: 1.05em;
	height: 1.05em;
	transform: translateY(-50%);
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344a90' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='M14.5 5.5l4 4'/%3E%3C/svg%3E");
}

/* ===================================== TELEFON I TABLET ===================================== */

/*
 * ⚠️ PRÓG OBNIŻONY 1200 → 1060 px (zmierzone 14.09).
 * Pozycje menu zajmują przy 14 px razem 872 px, a pojemnik ma szerokość okna
 * minus ~170 px — czyli pismo trzeba zmniejszać dopiero poniżej ~1045 px.
 * Próg 1200 px łapał zwykłe laptopy i to TAM menu wyglądało inaczej niż
 * reszta strony. Mniejsze pismo w nawigacji to ostateczność, nie domyślne.
 */
@media (max-width: 1060px) {
	.header-bottom .nav > li > a:not(.st-cta),
	.header-main .nav > li > a:not(.st-cta) {
		font-size: 13px !important;
		padding-left: 7px;
		padding-right: 7px;
	}

	.header .header-button .button.button {
		font-size: 10.5px;
		padding-left: .7em;
		padding-right: .7em;
	}
}

@media (max-width: 1100px) {
	.st-mm-kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/*
	 * ⚠️ Podlista przestaje się wysuwać w bok — przy dwóch kolumnach nie ma
	 * na to miejsca, a wysunięta poza ekran jest nieklikalna. Wchodzi
	 * w przepływ pod pozycją, z wcięciem, żeby było widać zależność.
	 */
	.st-mm .st-mm-pod {
		position: static;
		display: block;
		min-width: 0;
		margin: 0 0 4px 39px;
		padding: 2px 0 2px 8px;
		border: 0;
		border-left: 2px solid var(--mm-obwodka);
		border-radius: 0;
		box-shadow: none;
	}
}

@media (max-width: 700px) {
	.st-mm { padding: 1rem .9rem; gap: 1rem; }
	.st-mm-kolumny { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.st-mm-banery { grid-template-columns: minmax(0, 1fr); }
	.st-mm-baner { flex-direction: column; align-items: flex-start; }

	/* ⚠️ Cel dotykowy: karta ma mieć co najmniej 44 px wysokości. */
	.st-mm .st-mm-lista.st-mm-lista li a.st-mm-poz { padding: 9px 8px; }
	.st-mm-poz-nazwa { font-size: 14px; }
	.st-mm-poz-strzalka { opacity: .4; transform: none; }
	.st-mm-atuty { gap: .8rem; }
}

/*
 * ⚠️ SZEROKOŚĆ PRZYCISKU „KATEGORIE” USTAWIONA JAWNIE.
 * Zmniejszenie pisma i paddingu nie zmieniło nic — element trzymał 170 px,
 * bo motyw wymusza mu szerokość niezależną od treści. Zamiast zgadywać,
 * która reguła to robi, podajemy wartość wprost i zdejmujemy `min-width`.
 * ⚠️ `max-width` zamiast `width`, żeby dłuższy napis w przyszłości
 * się zawążał, a nie wylewał.
 */
.header-vertical-menu.header-vertical-menu,
.header-vertical-menu .header-vertical-menu__opener {
	min-width: 0;
	max-width: 132px;
}

.header-vertical-menu .header-vertical-menu__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================
   GÓRNY PASEK
   ============================================================ */

/*
 * ⚠️ KOLOR I WYSOKOŚĆ IDZIE Z USTAWIEŃ MOTYWU, NIE Z `!important`.
 * Wcześniej nadpisywałem tło regułą z `!important`, przez co opcja
 * w Personalizuj przestawała cokolwiek znaczyć — Dawid zmieniłby kolor
 * i nic by się nie stało. Teraz: `topbar_bg` = #2B3D78, `topbar_height` = 34.
 * Tutaj zostaje wyłącznie układ treści.
 */
#top-bar .flex-row,
.header-top .flex-row {
	min-height: 44px;
}

#top-bar,
.header-top {
	font-size: 12px;
}

/*
 * ⚠️ „NA ŚRODKU” W KOLUMNIE `flex-center` FLATSOME NIE ZNACZY „NA ŚRODKU”.
 *
 * Wiersz paska to trzy kolumny `flex: 0 1 auto` rozłożone przez
 * `space-between` — środkowa ląduje więc w środku MIĘDZY kolumnami bocznymi,
 * a nie w środku kontenera. Zmierzone 21.09 na żywym pasku: przy pustej lewej
 * kolumnie i prawej o szerokości 127 px środek atutów wypadał na 649 px,
 * a środek kontenera na 713 px — **64 px w lewo**.
 *
 * To ta sama mina co z logo na telefonie (14.09 (2)): motyw deklaruje
 * wyśrodkowanie, a realizuje je rozkładem, który zależy od zawartości boków.
 *
 * Naprawa: obie kolumny boczne rosną RÓWNO (`flex: 1 1 0`), więc środkowa
 * siada dokładnie na osi kontenera niezależnie od tego, co stoi po prawej.
 * Świadomie NIE pozycjonuję środkowej absolutnie — element wyjęty z przepływu
 * potrafi nachodzić na sąsiada, a nachodzenie jest gorsze niż przesunięcie.
 */
#top-bar .flex-row > .flex-left,
#top-bar .flex-row > .flex-right,
.header-top .flex-row > .flex-left,
.header-top .flex-row > .flex-right {
	flex: 1 1 0;
	min-width: 0;
}

#top-bar .flex-row > .flex-right,
.header-top .flex-row > .flex-right {
	justify-content: flex-end;
}

.st-tb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* Dawid 21.09: „bardziej jakby większy rozstaw”. Odstęp niesie tu podział
	   na trzy osobne obietnice — przy 1,5 rem czytały się jak jedno zdanie. */
	gap: 2.6rem;
}

.st-tb-atut {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(255, 255, 255, .94);
	white-space: nowrap;
}

.st-tb-ikona {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: rgba(255, 255, 255, .78);
}

.st-tb-linki {
	display: inline-flex;
	align-items: center;
	gap: 1.15rem;
}

/*
 * ⚠️ `:not(.st-tb-btn)` JEST TU KLUCZOWE — I TO JEST NAPRAWA MOJEGO BŁĘDU.
 *
 * Poprzednia wersja tej reguły obejmowała WSZYSTKIE odnośniki paska i ustawiała
 * im `padding: 0`. Selektor z identyfikatorem ma wagę **(1,2,1)**, a reguła
 * przycisków `.st-tb-linki .st-tb-btn.st-tb-btn` tylko **(0,3,0)** — czyli
 * `padding: 4px 12px` przegrywał ze wszystkim.
 *
 * Zmierzone 13.09 na żywej stronie: „Kontakt” i „Własny projekt naklejki”
 * miały **14 px wysokości**, czyli tyle co sam tekst — wyglądały jak gołe
 * napisy doklejone do krawędzi ekranu, dokładnie tak, jak zgłosił Dawid.
 *
 * Naprawa przez ZAWĘŻENIE reguły, nie przez dokładanie `!important`: przyciski
 * po prostu przestają się na nią łapać. Eskalacja wagi zostawiłaby tę samą
 * minę zastawioną na następną zmianę.
 */
.st-tb-linki a:not(.st-tb-btn),
#top-bar .st-tb-linki a:not(.st-tb-btn),
.header-top .st-tb-linki a:not(.st-tb-btn) {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	border: 0;
	padding: 0;
}

.st-tb-linki a:not(.st-tb-btn):hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ⚠️ Akapit z poprzedniej treści paska dawał własne marginesy — pasek rósł
   o 32 px, choć tekst miał 12. */
#top-bar p,
.header-top p { margin: 0; }

@media (max-width: 849px) {
	/*
	 * G2 (27.09): na telefonie atuty ZMIENIAJĄ SIĘ co 4 s w tym samym miejscu,
	 * zamiast jednego „Własna produkcja w Polsce” na stałe. Trzy obok siebie
	 * nie mieszczą się w jednym wierszu, a zawinięte robią z paska blok.
	 *
	 * ⚠️ Wszystkie atuty w JEDNEJ komórce siatki (`grid-area: 1 / 1`), więc
	 * pasek ma stałą wysokość i szerokość najdłuższego napisu - zero
	 * przeskakiwania treści pod spodem. Czysty CSS, bez skryptu.
	 * ⚠️ Pierwszy atut ma bazowe `opacity: 1`: gdyby animacje się nie
	 * odtwarzały, pasek pokaże pierwszy atut, a nie pustkę (mina z 07.09).
	 */
	.st-tb {
		display: grid;
		justify-items: center;
		gap: 0;
	}

	.st-tb-atut {
		grid-area: 1 / 1;
		opacity: 0;
		animation: st-tb-rotacja 12s infinite;
	}

	.st-tb-atut:first-child { opacity: 1; }
	.st-tb-atut:nth-child(2) { animation-delay: 4s; }
	.st-tb-atut:nth-child(3) { animation-delay: 8s; }
	.st-tb-atut:nth-child(n+4) { display: none; }

	.st-tb-linki { display: none; }
}

@keyframes st-tb-rotacja {
	0%   { opacity: 0; transform: translateY(5px); }
	4%   { opacity: 1; transform: none; }
	30%  { opacity: 1; transform: none; }
	34%  { opacity: 0; transform: translateY(-5px); }
	100% { opacity: 0; transform: translateY(-5px); }
}

@media (max-width: 849px) and (prefers-reduced-motion: reduce) {
	.st-tb-atut { animation: none; }
	.st-tb-atut:nth-child(n+2) { display: none; }
}

/* ---------------------------------- przyciski w gornym pasku */

/*
 * ⚠️ Przyciski przeniesione z paska nawigacji na gore (Dawid 13.09).
 * W pasku nawigacji zajmowaly 385 px — tyle, co trzy dzialy sklepu.
 * Tutaj sa mniejsze, ale caly czas widoczne i wyroznione, a nawigacja
 * odzyskala miejsce na pozycje merytoryczne.
 */
.st-tb-linki .st-tb-btn.st-tb-btn,
#top-bar .st-tb-linki .st-tb-btn,
.header-top .st-tb-linki .st-tb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 8px;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
}

.st-tb-linki .st-tb-btn--obwodka.st-tb-btn--obwodka {
	border: 1.5px solid rgba(255, 255, 255, .55);
	color: #fff;
}

.st-tb-linki .st-tb-btn--obwodka:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
	text-decoration: none;
}

.st-tb-linki .st-tb-btn--pelny.st-tb-btn--pelny {
	background: #fff;
	color: #2b3d78;
}

.st-tb-linki .st-tb-btn--pelny:hover {
	background: #e8ecf8;
	color: #1f2c58;
	text-decoration: none;
}

/* ------------------------------------------------ Kontakt: wariant szklany */

/*
 * ⚠️ BIAŁY PRZYCISK ZDJĘTY NA PROŚBĘ DAWIDA (21.09): *„ten biały tak nie pasuje
 * za bardzo w tym”*. Biały prostokąt w 38-pikselowym granatowym pasku czyta się
 * jak wycięta w nim dziura, a nie jak przycisk.
 *
 * ⚠️ BŁĘKIT AKCENTOWY #6F83C7 ODRZUCONY, MIMO ŻE JEST W PALECIE — biel na nim
 * daje **3,65:1**, czyli poniżej progu AA dla tekstu 12,5 px. Brandbook mówi
 * wprost: ten błękit wolno stosować na ikony, duże napisy i badge, NIGDY
 * na drobny tekst. Przycisk paska to dokładnie drobny tekst.
 *
 * Zostaje wariant szklany: pasek prześwituje przez półprzezroczystą biel,
 * więc przycisk jest z tej samej rodziny co tło, a wyróżnia go obwódka
 * i poświata. Tekst zostaje biały, czyli kontrast liczy się wobec zmieszanej
 * barwy tła — zmierzony niżej w dzienniku.
 */
#top-bar .st-tb-linki .st-tb-btn--szklany,
.header-top .st-tb-linki .st-tb-btn--szklany {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .38);
	color: #fff;
	box-shadow: 0 1px 6px rgba(15, 23, 51, .28);
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#top-bar .st-tb-linki .st-tb-btn--szklany:hover,
#top-bar .st-tb-linki .st-tb-btn--szklany:focus-visible,
.header-top .st-tb-linki .st-tb-btn--szklany:hover,
.header-top .st-tb-linki .st-tb-btn--szklany:focus-visible {
	background: rgba(255, 255, 255, .26);
	border-color: rgba(255, 255, 255, .9);
	/* „Cienie niebieskie” z prośby Dawida — poświata w błękicie marki. */
	box-shadow: 0 3px 12px rgba(111, 131, 199, .55);
	transform: translateY(-1px);
	color: #fff;
}

.st-tb-btn-ikona { width: 13px; height: 13px; }

/* ⚠️ Pasek ma byc drobny. Zmierzone: 55 px przy wierszu 34 — reszta to
   padding kontenera. Dawid: „powinien byc taki drobniutki, przyjazny". */
#top-bar .flex-row,
.header-top .flex-row { min-height: 38px; }

#top-bar > .flex-row,
.header-top > .flex-row { padding-top: 0; padding-bottom: 0; }

/*
 * ⚠️ BIALY TEKST NA BIALYM TLE — regula z IDENTYFIKATOREM bije wszystko.
 * Zmierzone: przycisk „Kontakt" miał tło #fff i kolor rgba(255,255,255,.88),
 * czyli był nieczytelny. Winna moja własna reguła `#top-bar .st-tb-linki a`:
 * identyfikator daje jej wagę (1,1,1), a przycisk miał (0,3,0) — sto klas
 * nie przebije jednego `#id`. Dlatego reguły przyciskow te\u017c musz\u0105 zaczynac
 * si\u0119 od `#top-bar`.
 */
#top-bar .st-tb-linki .st-tb-btn--pelny,
.header-top .st-tb-linki .st-tb-btn--pelny {
	background: #fff;
	color: #2b3d78;
}

#top-bar .st-tb-linki .st-tb-btn--pelny:hover,
.header-top .st-tb-linki .st-tb-btn--pelny:hover {
	background: #e8ecf8;
	color: #1f2c58;
}

#top-bar .st-tb-linki .st-tb-btn--obwodka,
.header-top .st-tb-linki .st-tb-btn--obwodka {
	color: #fff;
}

/* Pasek ma byc drobny: wiersz ma 38 px, reszta to wysokosc kontenera. */
#top-bar,
.header-top { min-height: 0; }

#top-bar .flex-row,
.header-top .flex-row { min-height: 38px; }

/* ============================================================
   GŁÓWNE WEZWANIE W PASKU NAWIGACJI — „Własny projekt naklejki”
   ============================================================

   Dawid 21.09: *„własny projekt naklejki musi być duży przycisk, bo to będzie
   istotna sekcja”*. W górnym pasku (38 px) nie da się zrobić niczego dużego,
   więc przycisk schodzi piętro niżej, obok działów sklepu.

   ⚠️ SKĄD POTRÓJNA KLASA `.st-cta.st-cta.st-cta`.
   Przycisk siedzi w `ul.header-bottom-nav`, czyli łapie się na komplet reguł
   nawigacji z CSS Tempo — w tym `.header:not(.transparent) .header-bottom-nav.nav
   > li > a { color: #344a90 }` o wadze **(0,4,2)** i
   `.header-bottom-nav.nav > li > a { letter-spacing: 2px; font-size: 63% }`.
   Pojedyncza klasa daje (0,4,2), czyli REMIS — a przy remisie rozstrzyga
   kolejność arkuszy, co jest zbyt kruche. Potrojenie daje (0,5,2) i wygrywa
   niezależnie od kolejności ładowania. To ta sama lekcja co 13.09 (7): przy
   starciu z CSS Tempo liczymy specyficzność, nie dokładamy `!important`.
   ============================================================ */

.header-bottom-nav.nav > li > a.st-cta.st-cta.st-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 10px;
	background: #344a90;
	color: #fff;
	/* Ten sam stopień co pozycje menu — przycisk ma być duży wagą, kolorem
	   i wypełnieniem, a nie pismem większym niż reszta paska. */
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(52, 74, 144, .28);
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.header-bottom-nav.nav > li > a.st-cta.st-cta.st-cta:hover,
.header-bottom-nav.nav > li > a.st-cta.st-cta.st-cta:focus-visible {
	background: #2b3d78;
	color: #fff;
	box-shadow: 0 5px 16px rgba(52, 74, 144, .42);
	transform: translateY(-1px);
}

.header-bottom-nav.nav > li > a.st-cta.st-cta.st-cta:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(52, 74, 144, .34);
}

.st-cta-ikona {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* Krótka etykieta pokazuje się dopiero w wąskim oknie — patrz próg niżej. */
.st-cta-krotka { display: none; }

/* ⚠️ Pozycja z przyciskiem nie ma zachowywać się jak pozycja menu: bez
   podkreślenia, bez kreski Flatsome, bez marginesu, który dokładałby
   szerokości tam, gdzie jej brakuje. */
.header-bottom .header-bottom-nav.nav-right > li.html {
	margin: 0;
	padding: 0;
}

/* ============================================================
   MIEJSCE NA PRZYCISK — ODCHUDZENIE ODSTĘPÓW MENU
   ============================================================

   ⚠️ TO NIE JEST KOSMETYKA, TYLKO WARUNEK, ŻEBY PRZYCISK W OGÓLE SIĘ ZMIEŚCIŁ.

   Zmierzone 21.09 przy oknie 1440 px: pole robocze wiersza nawigacji ma
   **1240 px**, menu z przyciskiem „KATEGORIE” zajmowało **1019 px**, a przycisk
   potrzebuje **227 px**. Razem 1246 px — brakowało **6 px**, więc „Realizacje”
   spadały do drugiego wiersza (zmierzone: dwa różne środki pionowe pozycji).

   Odzyskane bez dotykania stopnia pisma menu, na który Dawid narzekał
   trzykrotnie: marginesy pozycji 4 → 2 px i wypełnienie odnośnika 8 → 6 px.
   Łącznie 8 pozycji × 2 strony × (2 + 2) px = **64 px**. Odstęp między
   napisami schodzi z 24 do 16 px i nadal je rozdziela.
   ============================================================ */

.header-bottom .header-bottom-nav.nav-left > li {
	margin-left: 2px;
	margin-right: 2px;
}

.header-bottom .header-bottom-nav.nav-left > li > a {
	padding-left: 6px;
	padding-right: 6px;
}

/* ============================================================
   PRÓG 1280 px — PRZYCISK ZMIENIA PASEK
   ============================================================

   ⚠️ TO NIE JEST OZDOBNIK, TYLKO WARUNEK, ŻEBY MENU NIE ŁAMAŁO SIĘ NA DWA
   WIERSZE. Zmierzone 21.09 przy oknie 1200 px: menu BEZ przycisku kończy się
   na 978 px i mieści w polu 1140 px, a Z przyciskiem (222 px) „Realizacje”
   spadają do drugiego wiersza. Przy 1280 px zapas wynosi jeszcze 50 px,
   więc próg wypada dokładnie tam.

   Poniżej progu przycisk jest w górnym pasku, powyżej — w pasku nawigacji.
   Widoczny jest zawsze dokładnie jeden; ukryty `display:none` nie istnieje
   też dla czytnika ekranu, więc nie ma dwóch takich samych odnośników.
   ============================================================ */

/* Domyślnie (szeroko) przycisk mieszka w pasku nawigacji. */
.st-tb-cta { display: none; }

@media (max-width: 1279px) {
	/* Wąsko: znika z nawigacji… */
	.header-bottom .header-bottom-nav.nav-right > li.html { display: none; }

	/*
	 * ⚠️ RÓWNY ROZROST KOLUMN WYŁĄCZONY PONIŻEJ PROGU — I TO NIE JEST
	 * WYCOFANIE SIĘ Z WYŚRODKOWANIA, TYLKO JEGO CENA.
	 *
	 * Przy `flex: 1 1 0` pusta kolumna lewa rezerwuje dokładnie tyle miejsca,
	 * ile zajmuje prawa. Gdy do prawej dochodzi przycisk, rezerwacja rośnie
	 * o tyle samo i na atuty zostaje za mało. Zmierzone przy 1100 px:
	 * pasek urósł z **38 px do 62 px**, czyli zawinął się na dwa wiersze.
	 *
	 * Poniżej progu atuty wracają więc do lewej krawędzi — wygląda to na
	 * decyzję, a nie na przesunięcie, i pasek zostaje drobny.
	 */
	#top-bar .flex-row > .flex-left,
	.header-top .flex-row > .flex-left { flex: 0 0 0; }

	#top-bar .flex-row > .flex-right,
	.header-top .flex-row > .flex-right { flex: 0 1 auto; }

	.st-tb { gap: 1.4rem; }

	/* …i pojawia się w górnym pasku, obok „Blog” i „Kontakt”. */
	.st-tb-cta {
		display: inline-flex;
		align-items: center;
		margin-right: 1.15rem;
	}

	/* W 38-pikselowym pasku przycisk musi zejść do skali paska —
	   ten sam język co „Kontakt”, tylko wypełniony kolorem marki. */
	#top-bar .st-tb-cta > a.st-cta,
	.header-top .st-tb-cta > a.st-cta {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 14px;
		border-radius: 8px;
		/* ⚠️ Nie biel — Dawid odrzucił ją w tym pasku wprost. Granat marki
		   z jasną obwódką: przycisk zostaje w kolorach marki, a od tła paska
		   (#2B3D78) odcina go obwódka, nie jasność. Biel na #344A90 = 8,31:1. */
		background: #344a90;
		border: 1px solid rgba(255, 255, 255, .55);
		color: #fff;
		font-family: 'Poppins', 'Inter', sans-serif;
		font-size: 12.5px;
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: .01em;
		text-decoration: none;
		white-space: nowrap;
		box-shadow: 0 1px 6px rgba(15, 23, 51, .28);
		transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
	}

	#top-bar .st-tb-cta > a.st-cta:hover,
	#top-bar .st-tb-cta > a.st-cta:focus-visible,
	.header-top .st-tb-cta > a.st-cta:hover,
	.header-top .st-tb-cta > a.st-cta:focus-visible {
		background: #3f56a8;
		border-color: #fff;
		color: #fff;
		box-shadow: 0 3px 12px rgba(111, 131, 199, .55);
		transform: translateY(-1px);
	}

	#top-bar .st-tb-cta .st-cta-ikona,
	.header-top .st-tb-cta .st-cta-ikona { width: 13px; height: 13px; }

	/* W pasku liczy się każdy piksel — pełna etykieta ustępuje krótszej. */
	#top-bar .st-tb-cta .st-cta-pelna,
	.header-top .st-tb-cta .st-cta-pelna { display: none; }

	#top-bar .st-tb-cta .st-cta-krotka,
	.header-top .st-tb-cta .st-cta-krotka { display: inline; }
}

/* ============================================================
   ZWARTOŚĆ ROZWIJANEGO MENU
   ============================================================

   ⚠️ Dawid 13.09: „za wysokie jest to menu. Ono powinno być zgrabne,
   a nie takie ociężałe”. Zmierzone po przebudowie układu: 803 px przy
   oknie 1000 px — czyli rozwinięty dział zajmował 80 % ekranu.

   Wysokość bierze się z JEDNEJ liczby pomnożonej przez jedenaście: karta
   pozycji miała 48 px (7+7 px wypełnienia, ikona 30 px, nazwa 13,5 px,
   podtytuł 11,5 px). Przy najdłuższej kolumnie to 528 px samych pozycji.
   Ścinamy każdy z tych wymiarów po trochu, zamiast wyrzucać kategorie —
   bo pełna kategoryzacja była wymaganiem, a nie wysokość.
   ============================================================ */

.st-mm {
	gap: clamp(.8rem, 1.2vw, 1.2rem);
	padding: clamp(1rem, 1.4vw, 1.4rem);
}

.st-mm .st-mm-lista.st-mm-lista li a.st-mm-poz {
	gap: 8px;
	margin: 0;
	padding: 4px 7px;
}

.st-mm-poz-ikona {
	width: 26px;
	height: 26px;
	border-radius: 6px;
}

.st-mm-ikona-poz { width: 15px; height: 15px; }
.st-mm-poz-nazwa { font-size: 13px; line-height: 1.25; }
.st-mm-poz-opis  { font-size: 11px; line-height: 1.25; }

.st-mm .st-mm-tytul {
	margin-bottom: .5rem;
	padding-bottom: .4rem;
}

.st-mm .st-mm-tytul .st-mm-tytul-tekst { font-size: 14.5px; }
.st-mm-ikona { width: 19px; height: 19px; }

/* Baner: jeden wiersz, nie blok. Tekst i przycisk obok siebie. */
.st-mm-baner { padding: .7rem .95rem; gap: .8rem; }
.st-mm .st-mm-baner-tytul { font-size: 14px; }
.st-mm-baner-tekst { font-size: 11.5px; }

.st-mm .st-mm-baner-btn.st-mm-baner-btn {
	padding: .42rem .9rem;
	font-size: 12px;
}

.st-mm-atuty {
	gap: 1.1rem;
	margin-top: 0;
	padding-top: .7rem;
}

.st-mm-atut { font-size: 11.5px; }
.st-mm-atut-ikona { width: 15px; height: 15px; }

/* ============================================================
   PIONOWY KATALOG „KATEGORIE" — TRZY POZIOMY
   ============================================================

   ⚠️ „MAŁY DRUCZEK" TO BYŁO MNOŻENIE, NIE JEDNO USTAWIENIE.
   Dawid zgłaszał to dwa razy. Zmierzone 13.09: pozycja katalogu renderowała
   się w **11,7 px** — bo motyw ma `.header-vertical-menu__fly-out
   .nav-top-link { font-size: 0.9em }`, a `0.9em` liczy się od podstawy 13 px
   odziedziczonej z przycisku. Podniesienie `dropdown_nav_size` w ustawieniach
   motywu z 88 na 100 nie ruszyło tego, bo mnożnik siedzi w innym miejscu.
   Stąd wartość podana wprost w pikselach — jedyna, której nic nie przemnoży.
   ============================================================ */

.header-vertical-menu__fly-out .nav-top-link,
.header-vertical-menu__fly-out li.menu-item > a,
.ux-nav-vertical-menu li.menu-item > a {
	font-family: 'Poppins', 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
	/* ⚠️ Cel dotykowy: trzy poziomy przewija się też palcem na tablecie. */
	padding-top: 8px;
	padding-bottom: 8px;
	color: #181b22;
}

/* Kategorie główne wyróżnione — przy 65 pozycjach płaska lista nie ma rytmu. */
.ux-nav-vertical-menu > li.menu-item > a {
	font-size: 14px !important;
	font-weight: 600;
}

.header-vertical-menu__fly-out li.menu-item > a:hover,
.ux-nav-vertical-menu li.menu-item > a:hover {
	color: #344a90;
	background-color: #f6f8fc;
}

/* Trzeci poziom siedzi wizualnie głębiej — inaczej nie widać zależności. */
.ux-nav-vertical-menu ul ul li.menu-item > a { font-size: 13px !important; }

/* ============================================================
   UKŁAD KASKADOWY — jeden poziom naraz
   ============================================================

   ⚠️ TO JEST POPRAWKA MOJEGO BŁĘDNEGO ZROZUMIENIA Z 13.09 (9).
   Zbudowałem cztery kolumny widoczne naraz, a Dawid prosił o coś innego:
   „najeżdżamy na Naklejki i wyświetlają się wszystkie kategorie główne,
   a dopiero w kolumnie po prawej otwierają się kolejne podkategorie”.

   Różnica nie jest kosmetyczna. Przy kolumnach cały asortyment jest na
   ekranie naraz, więc wysokość rośnie z liczbą kategorii i trzeci poziom
   (marki aut, pomieszczenia) nie ma się gdzie zmieścić. W kaskadzie widać
   jeden poziom, wysokość jest stała niezależnie od głębokości drzewa,
   a klient schodzi tak głęboko, jak chce.
   ============================================================ */

.st-mm--kaskada { gap: clamp(.7rem, 1vw, 1rem); }

.st-mm-kaskada-ramka {
	position: relative;
	/* Stała wysokość: bez niej menu skakałoby przy każdym najechaniu,
	   bo każda gałąź ma inną liczbę pozycji. */
	min-height: 320px;
}

.st-mm .st-mm-kas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-mm .st-mm-kas li {
	margin: 0;
	padding: 0;
	list-style: none;
	/* ⚠️ `static` JEST TU KONIECZNE. Gdyby `li` było `relative`, kolejny
	   poziom pozycjonowałby się względem POZYCJI, czyli zaczynał w połowie
	   listy — a ma zaczynać od góry kolumny. */
	position: static;
}

.st-mm .st-mm-kas--1 { width: 292px; }

/* Poziomy 2–4 wysuwają się obok, każdy względem swojego rodzica. */
.st-mm .st-mm-kas--2,
.st-mm .st-mm-kas--3,
.st-mm .st-mm-kas--4 {
	position: absolute;
	top: 0;
	left: 100%;
	width: 292px;
	min-height: 100%;
	display: none;
	padding-left: 14px;
	border-left: 1px solid var(--mm-obwodka);
}

.st-mm .st-mm-kas--1 > li > .st-mm-kas--2 { left: 292px; }

.st-mm-kas-ma:hover > .st-mm-kas,
.st-mm-kas-ma:focus-within > .st-mm-kas { display: block; }

/*
 * ⚠️ PIERWSZA GAŁĄŹ OTWARTA, DOPÓKI NIKT NIE NAJEDZIE NA INNĄ.
 * Bez tego po rozwinięciu działu widać wąską kolumnę i ~980 px pustki —
 * co czyta się jak niedokończony układ, a nie jak zaproszenie do najechania.
 */
.st-mm .st-mm-kas--1 > li:first-child > .st-mm-kas--2 { display: block; }
.st-mm .st-mm-kas--1:hover > li:first-child:not(:hover) > .st-mm-kas--2 { display: none; }

/* Karta pozycji w kaskadzie jest niższa — lista bywa długa. */
.st-mm .st-mm-kas li a.st-mm-poz {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 8px;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	background: none;
	color: var(--mm-grafit);
	transition: background-color .12s ease, color .12s ease;
}

.st-mm .st-mm-kas li a.st-mm-poz:hover,
.st-mm .st-mm-kas-ma:hover > a.st-mm-poz {
	background-color: var(--mm-tlo);
	color: var(--mm-granat);
	text-decoration: none;
}

/* Strzałka stoi zawsze tam, gdzie jest co rozwinąć — to ona mówi,
   że pozycja ma głębszy poziom. Pojawianie się jej dopiero przy najechaniu
   ukrywałoby informację, której klient szuka PRZED najechaniem. */
.st-mm .st-mm-kas .st-mm-poz-strzalka {
	margin-left: auto;
	opacity: .5;
	transform: none;
}

.st-mm .st-mm-kas-ma:hover > a.st-mm-poz .st-mm-poz-strzalka { opacity: 1; }

/* Wysokość banerów z panelu (0 = dobierz do treści). */
.st-mm-banery { --st-mm-baner-wys: auto; }
.st-mm-baner { min-height: var(--st-mm-baner-wys, auto); }

@media (max-width: 1100px) {
	/* Przy dwóch kolumnach kaskada nie ma się gdzie wysuwać — poziomy
	   wchodzą w przepływ, z wcięciem, żeby było widać zależność. */
	.st-mm .st-mm-kas--1 { width: 100%; }

	.st-mm .st-mm-kas--2,
	.st-mm .st-mm-kas--3,
	.st-mm .st-mm-kas--4 {
		position: static;
		display: block;
		width: auto;
		min-height: 0;
		margin-left: 30px;
	}

	.st-mm .st-mm-kas--1 > li:first-child > .st-mm-kas--2 { display: block; }
	.st-mm-kaskada-ramka { min-height: 0; }
}

/* ============================================================
   PIONOWY KATALOG „KATEGORIE" — KASKADA, NIE SIATKA KOLUMN
   ============================================================

   ⚠️ TO JEST JEDYNE MIEJSCE, KTÓRE MIAŁO DOSTAĆ KASKADĘ.
   Dawid 14.09: *„zmienić miałeś tylko pierwszą, tę niebieską kategorię —
   one miały się od lewej do prawej rozsuwać, a reszta miała zostać tak,
   jak była"*. Mega menu (Naklejki … Poradniki) zostaje w kolumnach.

   ⚠️ TRZY PRZYCZYNY, WSZYSTKIE ZMIERZONE NA ŻYWEJ STRONIE 14.09:

   1. `.nav-dropdown { display: table }`, a pozycjom motyw nadaje
      `display: table-cell` — każda podkategoria stawała się WŁASNĄ KOLUMNĄ.
      Panel miał **1691 px** przy oknie 1024 i połowa była poza ekranem.

   2. Trzeci poziom ma klasę **`nav-column`, nie `nav-dropdown`** — i przez to
      `position: static`. Motyw renderuje go jako kolumnę WEWNĄTRZ panelu,
      więc `left: 100%` nie robiło nic. Bez `position: absolute` panel trzeciego
      poziomu leżał na drugim (zmierzone: x=431 zamiast 715).

   3. `.header-vertical-menu .sub-menu { height: -webkit-fill-available }`
      plus panele trzeciego poziomu w przepływie dawały panelowi drugiego
      poziomu **1311 px wysokości**. Po wyjęciu ich z przepływu: **461 px**.
   ============================================================ */

.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu {
	display: block !important;
	width: 292px !important;
	min-width: 292px !important;
	height: auto !important;
	padding: 8px !important;
	border-radius: 0 10px 10px 0;
	background: #fff !important;
	box-shadow: 0 12px 30px rgba(24, 27, 34, .12);
}

/*
 * ⚠️ `table-cell` → `block` MUSI IŚĆ Z `!important`, razem ze stałą szerokością
 * i `white-space` — reguła motywu `.nav-dropdown > li.nav-dropdown-col` ustawia
 * wszystkie trzy naraz. Zdjęcie tylko jednej zostawiłoby układ poziomy.
 *
 * `position: static`, żeby kolejny poziom liczył pozycję od PANELU, nie od
 * najechanej pozycji — inaczej przy dolnych kategoriach wychodziłby poza dolną
 * krawędź ekranu.
 */
.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu > li {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	white-space: normal !important;
	text-align: left !important;
	/*
	 * ⚠️ `relative`, NIE `static` — COFAM WŁASNĄ DECYZJĘ Z TEJ SAMEJ TURY.
	 * Dałem `static`, żeby panel trzeciego poziomu otwierał się od GÓRY listy
	 * i nie wychodził poza dolną krawędź ekranu. W praktyce wyszło gorzej:
	 * Dawid najechał na „Naklejki na motocykle" w środku listy, a panel
	 * pojawił się na samej górze — *„znika, zanim tam kursorem dojadę"*,
	 * bo droga po skosie prowadzi przez inne pozycje i gubi najechanie.
	 *
	 * Panel ma się otwierać PRZY pozycji. Wyjście poza dół zabezpiecza
	 * `max-height` niżej, a nie przyklejanie wszystkiego do góry.
	 */
	position: relative !important;
}

/*
 * ⚠️ CHOWANIE TRZECIEGO POZIOMU TRZEBA DOŁOŻYĆ SAMEMU — NAPRAWA MOJEGO BŁĘDU.
 *
 * Panel trzeciego poziomu ma klasę `nav-column`, więc reguła motywu
 * `.nav-dropdown { left: -99999px; opacity: 0; visibility: hidden }`
 * GO NIE OBEJMUJE — jako komórka tabeli był widoczny zawsze i nie musiał być
 * chowany. W chwili, gdy nadałem mu `position: absolute; left: 100%`, wszystkie
 * panele trzeciego poziomu wylądowały w tym samym punkcie i pokazywały się
 * jednocześnie, nałożone na siebie. Zgłoszone przez Dawida 14.09:
 * *„one same się rozwijają, te kategorie trzeciego rzędu"*.
 *
 * ⚠️ `pointer-events: none` w stanie ukrytym jest konieczne — bez tego
 * niewidoczny panel leży na kolumnie obok i przechwytuje kliknięcia.
 */
.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu ul.sub-menu {
	position: absolute !important;
	/*
	 * ⚠️ `left: 100%` LICZY SIĘ OD POZYCJI, KTÓRA JEST WĘŻSZA NIŻ PANEL
	 * o jego 8 px wypełnienia — dzięki temu panel trzeciego poziomu NACHODZI
	 * na drugi o 1 px zamiast zostawiać szczelinę. Zmierzone: odstęp −1 px.
	 * Szczelina, choćby jednopikselowa, gubi najechanie w połowie drogi
	 * i panel znika, zanim kursor do niego dojedzie.
	 */
	left: 100% !important;
	/* −8 px kompensuje wypełnienie panelu: pierwsza pozycja listy wyrównuje
	   się wtedy dokładnie z pozycją, na którą najechano. */
	top: -8px !important;
	margin: 0 !important;
	/* Zabezpieczenie na niskie okna — panel przewinie się, zamiast wyjść
	   poza dolną krawędź ekranu. */
	max-height: calc(100vh - 180px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
}

.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu > li:hover > ul.sub-menu,
.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu > li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Strzałka mówi, że pozycja ma głębszy poziom — zanim się na nią najedzie. */
.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu > li.menu-item-has-children > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu > li.menu-item-has-children > a::after {
	content: '\203A';
	flex: 0 0 auto;
	font-size: 17px;
	line-height: 1;
	opacity: .45;
	color: #344a90;
}

.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu > li.menu-item-has-children:hover > a::after { opacity: 1; }

@media (max-width: 849px) {
	/* Na telefonie katalog idzie płaską listą w panelu bocznym. */
	.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu {
		width: auto !important;
		min-width: 0 !important;
		box-shadow: none;
	}

	.header-vertical-menu .ux-nav-vertical-menu ul.sub-menu ul.sub-menu {
		position: static !important;
		width: auto !important;
	}
}

/* ============================================================
   MENU MOBILNE — ikony przy pozycjach pierwszego poziomu
   ============================================================

   ⚠️ Panel boczny bierze menu z lokalizacji „Menu główne — mobilne".
   Gdy ta lokalizacja jest pusta, Flatsome podstawia menu desktopowe,
   w którym pozycje mega menu mają adres `#` — i na telefonie nic nie
   działa, bo tam nie ma najechania. To była usterka zgłoszona 14.09. */

.st-mob-ik {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-right: 11px;
	border-radius: 8px;
	background: #e8ecf8;
	color: #344a90;
	vertical-align: middle;
}

.st-mob-ik .st-mob-ikona {
	width: 17px;
	height: 17px;
	display: block;
}

/* Pozycja musi być wierszem, inaczej ikona i napis nie wyrównają się
   w pionie — motyw ustawia tu `display: block`. */
#main-menu .nav-sidebar-ul > li > a,
#main-menu ul[data-tab] > li > a {
	display: flex !important;
	align-items: center;
}

/* Strzałka rozwijania motywu zostaje po prawej. */
#main-menu ul[data-tab] > li > a > .st-mob-txt {
	flex: 1 1 auto;
	min-width: 0;
}

/* ============================================================
   BIEŻĄCA STRONA W PASKU NAWIGACJI — „tu jesteś"

   ⚠️ SAM CIEMNIEJSZY ODCIEŃ GRANATU TO ZA SŁABY SYGNAŁ.
   Kolor stanu aktywnego (#1F2C58) różni się od spoczynkowego (#344A90)
   na tyle subtelnie, że przy siedmiu pozycjach obok siebie nie widać,
   na której stronie się stoi. Kreska pod nazwą mówi to jednoznacznie.

   ⚠️ `::after` NA POZYCJI MENU JEST WOLNY — sprawdzone pomiarem na
   wszystkich siedmiu pozycjach: strzałka rozwijania to element <i>
   w środku odnośnika, nie pseudoelement, więc nie ma czego nadpisać.
   ============================================================ */
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-item > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-parent > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-ancestor > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current-product_cat-ancestor > a {
	position: relative;
}

.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-item > a::after,
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-parent > a::after,
.header:not(.transparent) .header-bottom-nav.nav > li.current-menu-ancestor > a::after,
.header:not(.transparent) .header-bottom-nav.nav > li.current-product_cat-ancestor > a::after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: .9;
	pointer-events: none;
}

/* ============================================================
   WŁASNA IKONA WGRANA Z PANELU

   ⚠️ Ikona wbudowana to SVG (skaluje się do pudełka), własna to obrazek
   z własnymi proporcjami — bez `object-fit` logo szersze niż wysokie
   zostałoby rozciągnięte do kwadratu.
   ============================================================ */
.st-mm img.st-ikona-wlasna,
.header-bottom-nav img.st-ikona-wlasna,
#main-menu img.st-ikona-wlasna {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.st-mm-dzial-ikona img.st-ikona-wlasna {
	width: 18px;
	height: 18px;
}

/* ============================================================
   MOSTEK POD PANELEM MEGA MENU - KONIEC MIGOTANIA

   🔴 USTERKA ZGLASZANA OD 18.09, PRZYCZYNA ZMIERZONA 22.09.
   Dawid: „jak mam kursor w tym miejscu miedzy tym a tym, to to
   przeskakuje, klatkuje. Szersze menu, waskie, szerokie, waskie".

   PRZYCZYNA: miedzy DOLNA krawedzia pozycji menu a GORNA krawedzia
   rozwinietego panelu jest 9 px pasa, w ktorym kursor nie znajduje sie
   nad ZADNYM elementem menu. Flatsome otwiera panel skryptem - nadaje
   klasie `li` znacznik `current-dropdown` na `mouseenter` i zdejmuje go
   na `mouseleave`. Przejscie kursora przez ten pas to wyjscie z pozycji,
   wiec panel gasnie; wejscie w panel odtwarza go z powrotem. Przy ruchu
   wzdluz tej granicy cykl powtarza sie kilka razy na sekunde - i to
   wlasnie widac jako „klatkowanie" i skakanie szerokosci.

   ⚠️ DLACZEGO MOSTEK, A NIE OPOZNIENIE ZAMYKANIA W JS.
   Opoznienie (`setTimeout` na mouseleave) to walka ze skryptem motywu:
   trzeba by przejac jego nasluchy, utrzymywac wlasny stan i pilnowac
   tego przy kazdej aktualizacji Flatsome. Mostek nie dotyka skryptu
   w ogole - powieksza obszar, ktory przegladarka uznaje za „wciaz nad
   pozycja menu", wiec `mouseleave` po prostu sie nie odpala.

   ⚠️ `::before`, NIE `padding-bottom` NA POZYCJI.
   Padding powiekszylby klikalny obszar odnosnika i przesunal podkreslenie
   stanu aktywnego (kreska „tu jestes" z 21.09). Pseudoelement jest
   niewidoczny, nie zajmuje miejsca w ukladzie i nie rusza niczego,
   co widac.

   ⚠️ `z-index` PONIZEJ PANELU - mostek ma przechwytywac kursor w pustce
   MIEDZY pozycja a panelem, a nie przykrywac tresci panelu. Bez tego
   zasloniłby pierwszy rzad odnosnikow.
   ============================================================ */
.header-bottom-nav > li.menu-item-has-block > a::before,
.header-bottom-nav > li.has-dropdown > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Pas siega od dolnej krawedzi pozycji w dol, z zapasem na
	   zaokraglenia przy roznych stopniach pisma i wysokosciach paska. */
	top: 100%;
	height: 16px;
	z-index: 1;
	pointer-events: auto;
}

/* Pozycja musi byc ukladem odniesienia dla mostka, inaczej `top: 100%`
   liczyloby sie wzgledem calego paska nawigacji. */
.header-bottom-nav > li.menu-item-has-block > a,
.header-bottom-nav > li.has-dropdown > a {
	position: relative;
}

/* Mostek jest potrzebny WYLACZNIE wtedy, gdy panel jest otwarty.
   W spoczynku niewidoczny pas pod pozycja przechwytywalby kursor
   jadacy do tresci strony i moglby otwierac menu przez przypadek. */
.header-bottom-nav > li:not(.current-dropdown) > a::before {
	display: none;
}