/* =====================================================================
   Mega Header BP — arkusz nagłówka

   ***  TEN PLIK JEST W `rem` (wydanie 041).  ***

   Stała tu wcześniej odwrotna instrukcja, wielkimi literami: „NIE MA `rem`
   I MA NIE BYĆ". Obserwacja była trafna (Kadence daje 1rem = 10px zamiast
   16px), ale wniosek odwrotny — należało DZIELIĆ wartości przez 10, a nie
   rezygnować z `rem`.

   Skutek: szerokość nagłówka szła z motywu i rosła, ale jego wysokość,
   typografia i odstępy stały w miejscu. Na monitorze 2400 px pasek był
   szeroki, a wszystko w środku małe — nagłówek nie skalował się
   razem z resztą strony.

   Przelicznik: geometria mierzona przy oknie 1536 px, gdzie 1rem = 10px.
   Zatem px / 10 = rem. Kreski cieńsze niż 2px zostają w `px`.
   Progi w `@media` zostają w `px` — to warunki, nie wymiary.

   Geometria zmierzona w przeglądarce na danwood.pl (2026-08-01, 1536 px):
   pigułka 81 px wysokości / promień 24 / wyściółka 12, pozycja menu
   wyściółka 16 i promień 12, przycisk 16/24 i promień 12, panel 12 px
   pod pigułką, kolumna linków 19 px / 500 z interlinią 24, kafel
   327 x 432 px z promieniem 12 i wyściółką 24.

   Kolory są sluxerowe — odwzorowujemy układ i zachowanie, nie cudzą markę.
   ===================================================================== */

.bpmh {
	--bpmh-tlo: #ffffff;
	--bpmh-tekst: #1e293b;
	--bpmh-tekst-poboczny: #475569;
	--bpmh-tekst-slaby: #94a3b8;
	--bpmh-obwodka: #cbd5e1;
	--bpmh-hover: #f1f5f9;
	--bpmh-akcent: #2cb8b4;
	--bpmh-akcent-jasny: #4fdbd4;
	--bpmh-ciemny: #080c16;
	/* Cień pod pigułką skrócony 2026-08-19: rozmycie 3 rem sięgało
	   sporo niżej niż sam nagłówek i wyglądało jak szara poświata
	   na pół ekranu. Zostaje ten sam charakter, tylko dolna krawędź
	   kończy się wcześniej. */
	--bpmh-cien: 0 0.5rem 1.4rem rgba(8, 12, 22, 0.10);
	--bpmh-cien-panel: 0 2.4rem 6rem rgba(8, 12, 22, 0.16);
	--bpmh-krzywa: cubic-bezier(0.2, 0.8, 0.2, 1);

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990;
	padding: 1.2rem 1.2rem 0;
	/* Wrapper przepuszcza kliknięcia — inaczej niewidzialny pas nad treścią
	   blokowałby przyciski w sekcji hero leżącej pod nagłówkiem. */
	pointer-events: none;
	box-sizing: border-box;
}

.bpmh *,
.bpmh *::before,
.bpmh *::after {
	box-sizing: border-box;
}

/* Pasek administratora WordPressa jest `position: fixed` i leży NAD
   nagłówkiem. Bez tego przesunięcia zalogowany widzi obcięte
   górne rogi pigułki, a odwiedzający — poprawny nagłówek. Klasyczny
   błąd, którego nie widać, dopóki nie otworzy się strony w trybie
   incognito. */
body.admin-bar .bpmh {
	top: 3.2rem;
}

@media screen and (max-width: 782px) {
	body.admin-bar .bpmh {
		top: 4.6rem;
	}
}

.bpmh__kontener {
	position: relative;
	/* Wyściółka 12 px po bokach — dzięki niej pigułka ma 1332 px przy
	   szerokości 1356, dokładnie jak we wzorcu. Bez niej wychodzi 1356. */
	max-width: var(--bpmh-szerokosc, 135.6rem);
	margin: 0 auto;
	padding: 0 1.2rem;
}

/* Odstęp rezerwowany pod nagłówek, gdy NIE ma nakładki. */
.bpmh__odstep {
	height: var(--bpmh-wysokosc, 10.5rem);
}

/* =====================================================================
   ODDECH PIERWSZEJ SEKCJI PRZY NAKŁADCE

   Problem: przy nakładce nagłówek leży NA treści, więc napisy pierwszej
   sekcji kleją się do pigułki. Kuszące jest ustawienie wyściółki w samej
   sekcji — i to jest błąd. Trzeba by wtedy pamiętać o tym przy każdej
   nowej stronie, każdej nowej sekcji startowej i każdym nowym kliencie,
   a wartość rozjeżdżałaby się z wysokością nagłówka przy pierwszej
   zmianie logo.

   Dlatego robi to wtyczka: wie, ile miejsca zajmuje, więc sama je oddaje.
   Każda kolejna strona dostaje oddech za darmo, niezależnie od tego,
   jakie zdjęcie trafi w tło.

   *** PUŁAPKA, W KTÓRĄ JUŻ WDEPNĄŁEM — NIE DOPISUJ TU DRUGIEGO SELEKTORA. ***

   Pierwsza wersja miała cztery selektory „na wszelki wypadek":
   `.entry-content`, `.entry-content-wrap`, `.content-container`
   i `.site-main`. Założenie było takie, że zadziała dokładnie jeden,
   bo Kadence opakowuje treść inaczej zależnie od układu strony.

   Nieprawda. Te pojemniki są ZAGNIEŻDŻONE JEDEN W DRUGIM, więc trafiły
   wszystkie cztery i wyściółka się zsumowała: 4 x 145 = 580 px białej
   dziury nad sekcją startową (zmierzone na żywo, wydanie 020).

   Właściwy cel to `.entry-content > *:first-child`, czyli pierwszy rząd
   Kadence. Wyściółka jest wtedy WEWNĄTRZ jego tła, więc zdjęcie zostaje
   pełnowymiarowe, a zjeżdża sama treść. Dokładnie o to chodzi.

   `!important` jest konieczne: Kadence generuje wyściółkę rzędu w regule
   o tej samej wadze co nasza (`.kb-row-layout-idXXX`), a jego arkusz
   bywa wczytany później.
   ===================================================================== */

body.bpmh-nakladka .entry-content > *:first-child {
	padding-top: var(--bpmh-oddech, 14.5rem) !important;
}

@media (max-width: 600px) {
	body.bpmh-nakladka .entry-content > *:first-child {
		padding-top: var(--bpmh-oddech-maly, 12.8rem) !important;
	}
}

/* =====================================================================
   STRONY BEZ NAKŁADKI — dwa błędy naraz

   Objaw: nagłówek działa poprawnie tylko na stronie głównej,
   a na podstronach jest widoczny dopiero po przewinięciu.

   Przyczyna nie była jedna, tylko dwie — i dopiero razem dawały ten efekt:

   1. BRAK ODSTĘPU. `.bpmh` jest `position: fixed` ZAWSZE, także bez nakładki.
      Odstęp dla treści dokładała wyłącznie reguła `body.bpmh-nakladka`,
      więc na podstronach treść startowała spod paska i chowała się pod nim.

   2. BIAŁE NA BIAŁYM. Pigułka ma białe tło, a cień dostawała dopiero
      w stanie `.bpmh--przewiniety`. Na białym tle podstrony była
      niewidoczna do pierwszego przewinięcia. To ten sam błąd, który
      objawiał się wcześniej jako „nagłówek biały przez całą szerokość" —
      wtedy załatany nakładką, ale tylko tam, gdzie nakładka działa.

   Odstęp kładziemy na `body`, a nie na pierwszy rząd Kadence. Rząd był
   właściwym celem PRZY NAKŁADCE, bo wyściółka miała wejść do wnętrza tła
   zdjęcia. Tutaj tła nie ma i chodzi o zwykłe zejście niżej — a `body`
   omija pułapkę z wydania 020, gdzie zagnieżdżone pojemniki zsumowały
   wyściółkę cztery razy.
   ===================================================================== */

body:not(.bpmh-nakladka) {
	padding-top: var(--bpmh-oddech, 14.5rem);
}

@media (max-width: 600px) {
	body:not(.bpmh-nakladka) {
		padding-top: var(--bpmh-oddech-maly, 12.8rem);
	}
}

body:not(.bpmh-nakladka) .bpmh__pigulka {
	box-shadow: var(--bpmh-cien);
}

/* Przyciemnienie samej góry strony.

   Biała pigułka na jasnym zdjęciu potrafi zniknąć. Nie wiemy, jakie
   zdjęcia trafią na przyszłe strony, więc zamiast poprawiać każde z nich
   w grafice, kładziemy delikatny gradient pod nagłówkiem. Jest `fixed`,
   więc zostaje przy przewijaniu — razem z nagłówkiem.

   `pointer-events: none`, bo inaczej zjadałby kliknięcia w treść pod sobą. */
body.bpmh-przyciemnienie::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 22rem;
	z-index: 9989;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(8, 12, 22, 0.45) 0%, rgba(8, 12, 22, 0) 100%);
}

/* ---------------------------------------------------------------------
   Pigułka
   --------------------------------------------------------------------- */

.bpmh__pigulka {
	pointer-events: auto;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
	padding: 1.2rem;
	background: var(--bpmh-tlo);
	border-radius: 2.4rem;
	transition: box-shadow 0.3s var(--bpmh-krzywa);
}

.bpmh--przewiniety .bpmh__pigulka,
.bpmh--otwarty .bpmh__pigulka {
	box-shadow: var(--bpmh-cien);
}

/* Logo -------------------------------------------------------------- */

.bpmh__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 1.2rem;
	text-decoration: none;
	line-height: 0;
}

.bpmh__logo-obraz {
	display: block;
	width: auto;
	height: auto;
	max-height: 4rem;
	max-width: 20rem;
	object-fit: contain;
}

.bpmh__logo-tekst {
	font-size: 2rem;
	font-weight: 600;
	line-height: 2.4rem;
	color: var(--bpmh-tekst);
}

/* Zakładki ----------------------------------------------------------- */

.bpmh__zakladki {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpmh__zakladka {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpmh__link {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0;
	padding: 1.6rem;
	border: 0;
	border-radius: 1.2rem;
	background: transparent;
	color: var(--bpmh-tekst);
	font-family: inherit;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 2.4rem;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s var(--bpmh-krzywa), color 0.2s var(--bpmh-krzywa);
}

.bpmh__link:hover,
.bpmh__link:focus-visible {
	background: var(--bpmh-hover);
	color: var(--bpmh-tekst);
}

.bpmh__zakladka--otwarta > .bpmh__link {
	background: var(--bpmh-hover);
}

.bpmh__zakladka--aktywna > .bpmh__link {
	font-weight: 500;
}

.bpmh__ikona--dol {
	flex: 0 0 auto;
	color: var(--bpmh-tekst-slaby);
	transition: transform 0.25s var(--bpmh-krzywa);
}

.bpmh__zakladka--otwarta .bpmh__ikona--dol {
	transform: rotate(180deg);
}

/* Przyciski ---------------------------------------------------------- */

.bpmh__cta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex: 0 0 auto;
}

/*
 * `user-select: none` NA PRZYCISKACH — poprawka 2026-08-19.
 *
 * Kliknięcie w przycisk, zwłaszcza szybkie albo z minimalnym
 * przeciągnięciem, zaznacza jego napis. Zaznaczenie zostaje po
 * zamknięciu okna i przeglądarka rysuje pod tekstem NIEBIESKIE TŁO.
 * Zgłoszone jako „gdy zamykam, to tekst robi się niebieski” —
 * i wyglądało dokładnie tak, jakby przycisk zmienił kolor.
 *
 * To ta sama rodzina co ikony-ligatury w standardzie nagłówka
 * mobilnego: element, który wygląda na przycisk, nie powinien
 * zachowywać się jak akapit.
 */
.bpmh__przycisk,
.bpmh-modal__wyslij,
.bpmh-modal__zamknij {
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/*
 * WYMIARY WSPÓLNE DLA WSZYSTKICH PRZYCISKÓW NA STRONIE (2026-08-20).
 *
 * Wzorcem jest przycisk sekcji i slidera: wyściółka 1,7 / 3,2 rem,
 * pismo 1,7 rem o grubości 600, promień 1 rem, brak widocznej obwódki.
 * Przycisk w nagłówku miał 1,6 / 2,4 rem, pismo 1,8 rem o grubości 500
 * i promień 1,2 rem — i przez to wizualnie odstawał od reszty.
 *
 * Wyściółka jest tu o 1 px MNIEJSZA (1,6 / 3,1 rem), bo ten przycisk
 * niesie obwódkę 1 px potrzebną wariantowi pobocznemu. 16 + 24 + 16 + 2
 * daje dokładnie te same 58 px wysokości i te same 32 px odstępu
 * po bokach co przyciski bez obwódki. Zmieniając jedno, popraw drugie.
 */
.bpmh__przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.6rem 3.1rem;
	border-radius: 1rem;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 2.4rem;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s var(--bpmh-krzywa), box-shadow 0.2s var(--bpmh-krzywa),
		background-color 0.2s var(--bpmh-krzywa), border-color 0.2s var(--bpmh-krzywa);
}

.bpmh__przycisk--glowny {
	background: linear-gradient(135deg, var(--bpmh-akcent-jasny) 0%, var(--bpmh-akcent) 100%);
	color: #ffffff;
}

.bpmh__przycisk--glowny:hover,
.bpmh__przycisk--glowny:focus-visible {
	color: #ffffff;
	box-shadow: 0 0.8rem 2rem rgba(44, 184, 180, 0.35);
	transform: translateY(-1px);
}

.bpmh__przycisk--poboczny {
	background: transparent;
	border-color: var(--bpmh-obwodka);
	color: var(--bpmh-tekst);
}

.bpmh__przycisk--poboczny:hover,
.bpmh__przycisk--poboczny:focus-visible {
	border-color: var(--bpmh-tekst-slaby);
	background: #f8fafc;
	color: var(--bpmh-tekst);
}

/* Hamburger ---------------------------------------------------------- */

.bpmh__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 5.6rem;
	height: 5.6rem;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 1.2rem;
	background: var(--bpmh-hover);
	color: var(--bpmh-tekst);
	cursor: pointer;
}

.bpmh__hamburger-kreski {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: 2.2rem;
}

.bpmh__hamburger-kreski span {
	display: block;
	height: 0.2rem;
	width: 100%;
	background: currentColor;
	border-radius: 0.2rem;
	transition: transform 0.25s var(--bpmh-krzywa), opacity 0.25s var(--bpmh-krzywa);
}

.bpmh__hamburger[aria-expanded="true"] .bpmh__hamburger-kreski span:first-child {
	transform: translateY(0.4rem) rotate(45deg);
}

.bpmh__hamburger[aria-expanded="true"] .bpmh__hamburger-kreski span:last-child {
	transform: translateY(-0.4rem) rotate(-45deg);
}

/* ---------------------------------------------------------------------
   Panel mega menu
   --------------------------------------------------------------------- */

/* PUŁAPKA: element pozycjonowany bezwzględnie odnosi się do pudełka
   WYŚCIÓŁKI rodzica, a nie do jego treści. `left: 0` przy kontenerze
   z wyściółką 12 px dałby panel o 24 px szerszy od pigułki. Stąd 12 px
   z obu stron — panel ma być dokładnie tej samej szerokości. */
.bpmh__scena {
	position: absolute;
	top: calc(100% + 1.2rem);
	left: 1.2rem;
	right: 1.2rem;
	z-index: 1;
}

.bpmh__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 1.2rem;
	background: var(--bpmh-tlo);
	border-radius: 2.4rem;
	box-shadow: var(--bpmh-cien-panel);
	opacity: 0;
	transform: translateY(-1.2rem);
	pointer-events: none;
	transition: opacity 0.26s var(--bpmh-krzywa), transform 0.26s var(--bpmh-krzywa);
}

/* `hidden` na elemencie z `display:flex` niżej nie zadziała bez tego. */
.bpmh__panel[hidden] {
	display: none;
}

.bpmh__panel--otwarty {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.bpmh__panel-wnetrze {
	display: flex;
	align-items: stretch;
}

/* Kolumny linków ----------------------------------------------------- */

.bpmh__kolumny {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 5.6rem;
	flex: 1 1 auto;
	padding: 2.4rem;
	min-width: 0;
}

.bpmh__kolumna {
	min-width: 18rem;
}

.bpmh__kolumna-naglowek {
	margin: 0 0 0.8rem;
	padding: 0;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.8rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--bpmh-tekst-slaby);
}

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

.bpmh__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpmh__lista li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpmh__pozycja {
	display: block;
	padding: 1.2rem 0;
	border-radius: 0.6rem;
	color: var(--bpmh-tekst-poboczny);
	text-decoration: none;
	transition: color 0.2s var(--bpmh-krzywa), transform 0.2s var(--bpmh-krzywa);
}

.bpmh__pozycja:hover,
.bpmh__pozycja:focus-visible {
	color: var(--bpmh-akcent);
	transform: translateX(0.3rem);
}

.bpmh__pozycja-tytul {
	display: block;
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 2.4rem;
}

.bpmh__pozycja-opis {
	display: block;
	margin-top: 0.2rem;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 2rem;
	color: var(--bpmh-tekst-slaby);
}

.bpmh__wszystko {
	flex: 1 0 100%;
	margin: 0.8rem 0 0;
	padding: 0;
}

.bpmh__wszystko a {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 2rem;
	color: var(--bpmh-akcent);
	text-decoration: none;
}

.bpmh__wszystko a:hover .bpmh__ikona--prawo {
	transform: translateX(0.4rem);
}

.bpmh__wszystko .bpmh__ikona--prawo {
	transition: transform 0.2s var(--bpmh-krzywa);
}

/* Kafle promocyjne --------------------------------------------------- */

.bpmh__kafle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
	flex: 0 0 calc(50% + 3.6rem);
	padding: 1.2rem;
}

.bpmh__panel--kafli-1 .bpmh__kafle {
	grid-template-columns: 1fr;
	flex-basis: 35.1rem;
}

.bpmh__panel--kafli-0 .bpmh__kolumny {
	padding-bottom: 3.2rem;
}

.bpmh__kafel {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 43.2rem;
	padding: 2.4rem;
	overflow: hidden;
	border-radius: 1.2rem;
	background: var(--bpmh-ciemny);
	color: #ffffff;
	text-decoration: none;
}

.bpmh__kafel-obraz {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--bpmh-krzywa);
}

.bpmh__kafel:hover .bpmh__kafel-obraz {
	transform: scale(1.05);
}

/* Nakładka jest osobnym elementem, bo jedno tło nie umie mieć zdjęcia
   i gradientu naraz — ta sama pułapka co w blokach Kadence (wydanie 013). */
.bpmh__kafel-nakladka {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 22, 0) 30%, rgba(8, 12, 22, 0.88) 100%);
}

.bpmh__kafel-tresc {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.6rem;
	width: 100%;
}

.bpmh__kafel-tekst {
	display: block;
	min-width: 0;
}

.bpmh__kafel-tytul {
	display: block;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 2.8rem;
	color: #ffffff;
}

.bpmh__kafel-opis {
	display: block;
	margin-top: 0.6rem;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 2rem;
	color: rgba(255, 255, 255, 0.8);
}

.bpmh__kafel-strzalka {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	background: #ffffff;
	color: var(--bpmh-ciemny);
	transition: transform 0.25s var(--bpmh-krzywa);
}

.bpmh__kafel:hover .bpmh__kafel-strzalka {
	transform: translateX(0.4rem);
}

/* ---------------------------------------------------------------------
   Szuflada (telefon)
   --------------------------------------------------------------------- */

.bpmh__szuflada {
	pointer-events: auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	overflow-y: auto;
	background: var(--bpmh-tlo);
	opacity: 0;
	transition: opacity 0.25s var(--bpmh-krzywa);
}

.bpmh__szuflada[hidden] {
	display: none;
}

.bpmh__szuflada--otwarta {
	opacity: 1;
}

.bpmh__szuflada-wnetrze {
	padding: 10rem 2.4rem 4.8rem;
}

.bpmh__szuflada-lista,
.bpmh__szuflada-podlista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpmh__szuflada-pozycja {
	border-bottom: 1px solid var(--bpmh-hover);
}

.bpmh__szuflada-przelacznik,
.bpmh__szuflada-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.8rem 0;
	border: 0;
	background: transparent;
	color: var(--bpmh-tekst);
	font-family: inherit;
	font-size: 2rem;
	font-weight: 500;
	line-height: 2.6rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.bpmh__szuflada-podlista[hidden] {
	display: none;
}

.bpmh__szuflada-podlista {
	padding: 0 0 1.2rem 1.2rem;
}

.bpmh__szuflada-podlista a {
	display: block;
	padding: 1.2rem 0;
	font-size: 1.7rem;
	line-height: 2.2rem;
	color: var(--bpmh-tekst-poboczny);
	text-decoration: none;
}

.bpmh__szuflada-wnuk a {
	padding-left: 1.6rem;
	font-size: 1.6rem;
	color: var(--bpmh-tekst-slaby);
}

.bpmh__szuflada-cta {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin-top: 3.2rem;
}

.bpmh__szuflada-telefon {
	margin: 2.4rem 0 0;
	font-size: 2rem;
	font-weight: 600;
}

.bpmh__szuflada-telefon a {
	color: var(--bpmh-akcent);
	text-decoration: none;
}

body.bpmh-szuflada-otwarta {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Progi
   --------------------------------------------------------------------- */

/* Ciasno — panel przestaje mieścić dwa kafle obok kolumn. */
@media (max-width: 1280px) {
	.bpmh__kafle {
		flex-basis: 44%;
	}

	.bpmh__kolumny {
		gap: 3.2rem;
	}
}

/* Poniżej tego progu pigułka nie mieści zakładek — wchodzi szuflada. */
@media (max-width: 1100px) {
	.bpmh__zakladki,
	.bpmh__cta,
	.bpmh__scena {
		display: none;
	}

	.bpmh__hamburger {
		display: flex;
	}

	.bpmh__pigulka {
		border-radius: 2rem;
	}
}

@media (max-width: 600px) {
	.bpmh {
		padding: 0.8rem 0.8rem 0;
	}

	.bpmh__odstep {
		height: 8.8rem;
	}

	.bpmh__logo-obraz {
		max-height: 3.2rem;
		max-width: 15rem;
	}

	.bpmh__hamburger {
		width: 4.8rem;
		height: 4.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpmh *,
	.bpmh *::before,
	.bpmh *::after {
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   DUŻE EKRANY — dodatkowy krok dla pozycji menu

   System progów z motywu potomnego skaluje nagłówek sam: przy 150em
   baza `rem` idzie na 14px, przy 180em na 16px. Na dużych monitorach
   etykiety w nagłówku są jednak nadal za drobne
   względem reszty — sam mnożnik bazy tu nie wystarcza, bo pasek jest
   wąskim elementem na bardzo szerokim ekranie i optycznie ginie.

   Dlatego dokładamy jeden krok ponad to, co daje baza. Wartości
   wynikowe:  1440–2400 → 18px,  2400–2880 → 27,3px,  powyżej → 33,6px.

   Progi celowo te same co w motywie potomnym — nie wprowadzamy
   własnych, żeby nie było dwóch systemów obok siebie.
   ========================================================= */

@media screen and (min-width: 150em) {
	.bpmh__link,
	.bpmh__przycisk {
		font-size: 1.95rem;
	}
}

@media screen and (min-width: 180em) {
	.bpmh__link,
	.bpmh__przycisk {
		font-size: 2.1rem;
	}
}

/* =========================================================
   WERSJA 2.0.0 — menu na środku, panel katalogu, wąskie
   okienko przy zakładce, okno „Zapytaj o ofertę”

   Paleta:
     turkus       #3ac2be      turkus hover  #2aa8a4
     prawie czerń #06090f      tekst 2 rzędu #475569
     ramka        #cbd5e1      tło jasne     #f1f5f9

   Reguły dopisane NA KOŃCU arkusza — sprawdzone, że nie cofają
   niczego wyżej. Kolidujące miejsca są wymienione przy regułach.
   ========================================================= */

/* --- Zakładki na środku pigułki ------------------------------------- */

/* Wyżej `.bpmh__zakladki` ma `flex: 1 1 auto` — czyli zajmuje całą
   wolną przestrzeń i zaczyna się tuż za logo. Żeby zakładki stały
   na PRAWDZIWYM środku pigułki, przestrzeń muszą zabierać elementy
   po bokach, a nie one same. Logo i przyciski dostają więc równy
   udział (`flex: 1 1 0`), a zakładki tylko tyle, ile potrzebują. */

.bpmh__logo {
	flex: 1 1 0;
	justify-content: flex-start;
	min-width: 0;
}

.bpmh__zakladki {
	flex: 0 1 auto;
	justify-content: center;
}

.bpmh__cta {
	flex: 1 1 0;
	justify-content: flex-end;
}

/* --- Wąskie okienko przy zakładce („Instalator”, „Serwis”) ---------- */

/* `--bpmh-x` ustawia skrypt przy każdym otwarciu — to odległość lewej
   krawędzi zakładki od lewej krawędzi sceny. Wartość zapasowa 0 jest
   na wypadek wyłączonego JavaScriptu: okienko stanie po lewej,
   zamiast wylądować na środku bez powodu. */
.bpmh__panel--maly {
	left: var(--bpmh-x, 0);
	right: auto;
	width: max-content;
	min-width: 24rem;
	max-width: 36rem;
	padding: 0.8rem;
	border-radius: 1.6rem;
}

.bpmh__panel--maly .bpmh__panel-wnetrze {
	display: block;
}

.bpmh__panel--maly .bpmh__kolumny {
	display: block;
	gap: 0;
}

.bpmh__panel--maly .bpmh__kolumna {
	width: 100%;
}

.bpmh__panel--maly .bpmh__lista li {
	margin: 0;
}

.bpmh__panel--maly .bpmh__pozycja {
	display: block;
	padding: 1.2rem 1.6rem;
	border-radius: 1rem;
	white-space: nowrap;
}

.bpmh__panel--maly .bpmh__pozycja-tytul {
	font-size: 1.7rem;
	font-weight: 400;
}

/* Przy dwóch linkach „Zobacz wszystko” jest szumem — panel ma być
   subtelny, taki jak na projekcie. */
.bpmh__panel--maly .bpmh__wszystko {
	display: none;
}

/* --- Panel katalogu produktów --------------------------------------- */

.bpmh__panel--katalog .bpmh__panel-wnetrze {
	display: flex;
	align-items: stretch;
	gap: 2.4rem;
}

/* SZEROKOŚĆ PODNIESIONA 28 → 32 rem.
   „Magazyny komercyjne" łamały się na dwie linijki, a „Magazyny domowe"
   nie. Zmierzone: na tekst zostawało 199 px, a ten napis potrzebuje
   202 px — brakowało TRZECH pikseli.
   Teraz zostaje 244 px, czyli 42 px zapasu. Zapas jest celowo duży:
   nazwa kategorii bywa dłuższa od dzisiejszej, a złamany wiersz
   w pionowej liście widać od razu. */
.bpmh__grupy {
	flex: 0 0 32rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-right: 2.4rem;
	border-right: 1px solid #e2e8f0;
}

/* Prawa wyściółka 4 → 3,6 rem. Trzyma strzałkę (24 px + 16 px odstępu)
   i oddaje 4 px tekstowi. */
.bpmh__grupa {
	position: relative;
	display: block;
	padding: 1.6rem 3.6rem 1.6rem 1.6rem;
	border-radius: 1.2rem;
	color: var(--bpmh-tekst, #06090f);
	text-decoration: none;
	transition: background-color 0.18s var(--bpmh-krzywa), color 0.18s var(--bpmh-krzywa);
}

.bpmh__grupa:hover,
.bpmh__grupa:focus-visible,
.bpmh__grupa.jest-aktywna {
	background: #f1f5f9;
	color: var(--bpmh-tekst, #06090f);
}

.bpmh__grupa-tytul {
	display: block;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2.4rem;
}

.bpmh__grupa-opis {
	display: block;
	margin-top: 0.4rem;
	font-size: 1.5rem;
	line-height: 2.1rem;
	color: #475569;
}

/* Strzałka pojawia się dopiero na aktywnej kategorii — na wszystkich
   naraz robiłaby z listy tablicę znaków drogowych. */
.bpmh__grupa-strzalka {
	position: absolute;
	top: 50%;
	right: 1.6rem;
	transform: translateY(-50%);
	display: flex;
	opacity: 0;
	color: #3ac2be;
	transition: opacity 0.18s var(--bpmh-krzywa);
}

.bpmh__grupa.jest-aktywna .bpmh__grupa-strzalka,
.bpmh__grupa:hover .bpmh__grupa-strzalka {
	opacity: 1;
}

.bpmh__produkty {
	flex: 1 1 auto;
	min-width: 0;
}

.bpmh__zestaw {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.6rem;
}

/* `hidden` na elemencie z `display: grid` nie zadziała bez tego —
   ta sama pułapka co przy panelu wyżej. */
.bpmh__zestaw[hidden] {
	display: none;
}

/* Trzy produkty i mniej: kafle zostają przy swojej szerokości,
   zamiast rozciągać się na pół panelu. */
.bpmh__zestaw-pusty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 3.2rem 0;
	color: #475569;
	font-size: 1.7rem;
}

.bpmh__produkt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	padding: 1.6rem 1.2rem 2rem;
	border: 1px solid #cbd5e1;
	border-radius: 1rem;
	background: #fff;
	color: var(--bpmh-tekst, #06090f);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.18s var(--bpmh-krzywa), box-shadow 0.18s var(--bpmh-krzywa);
}

.bpmh__produkt:hover,
.bpmh__produkt:focus-visible {
	border-color: #3ac2be;
	box-shadow: 0 0.8rem 2.4rem rgba(2, 6, 23, 0.08);
	color: var(--bpmh-tekst, #06090f);
}

.bpmh__produkt-zdjecie {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 14rem;
	/* Wyściółka daje zdjęciu oddech od górnej krawędzi kafla
	   i od nazwy produktu pod nim. Bez niej wysokie szafy
	   Commercial dotykały obu krawędzi. */
	padding: 1.2rem 0.8rem 1.6rem;
}

/* `contain`, nie `cover`: to studyjne zdjęcia wysokich brył na
   przezroczystym tle. Wpuszczone w kadr z `cover` tracą podstawę
   i wyglądają na rozciągnięte (ustalenie z wydania 029). */
.bpmh__produkt-obraz {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bpmh__produkt-tytul {
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 2.2rem;
}

.bpmh__produkt-moc {
	font-size: 1.5rem;
	line-height: 2rem;
	color: #475569;
}

@media (max-width: 1280px) {

	/* Na węższym ekranie kolumna też musi zmieścić „Magazyny komercyjne"
	   w jednej linii — 24 rem dawało na tekst 164 px przy potrzebnych 202. */
	.bpmh__grupy {
		flex-basis: 29rem;
	}

	.bpmh__zestaw {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Okno „Zapytaj o ofertę” ---------------------------------------- */

/* Okno leży POZA `.bpmh`, więc nie dziedziczy jego `pointer-events: none`
   ani warstwy. Warstwa wyżej niż nagłówek (999) — okno ma przykryć
   wszystko, łącznie z pigułką. */
/* Okno zaczyna się POD nagłówkiem, nie pod górną krawędzią ekranu.

   Pigułka jest `position: fixed` i leży wyżej w warstwach, więc przy
   wyśrodkowaniu w pionie góra okna chowała się pod nią i wyglądała
   na uciętą.

   `align-items: flex-start` plus górna wyściółka równa wysokości
   nagłówka — liczbę bierzemy ze zmiennej, którą i tak wystawia PHP,
   więc nie ma drugiej wartości do pilnowania. */
.bpmh-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: calc(var(--bpmh-wysokosc, 10.5rem) + 2.4rem) 2.4rem 2.4rem;
	opacity: 0;
	transition: opacity 0.26s var(--bpmh-krzywa, ease);
}

.bpmh-modal[hidden] {
	display: none;
}

.bpmh-modal--otwarty {
	opacity: 1;
}

.bpmh-modal *,
.bpmh-modal *::before,
.bpmh-modal *::after {
	box-sizing: border-box;
}

.bpmh-modal__tlo {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 23, 0.6);
}

.bpmh-modal__okno {
	position: relative;
	width: 100%;
	max-width: 56rem;
	max-height: calc(100vh - var(--bpmh-wysokosc, 10.5rem) - 6rem);
	overflow-y: auto;
	padding: 4rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 3.2rem 8rem rgba(2, 6, 23, 0.35);
	transform: translateY(1.2rem);
	transition: transform 0.26s var(--bpmh-krzywa, ease);
}

.bpmh-modal--otwarty .bpmh-modal__okno {
	transform: translateY(0);
}

.bpmh-modal__zamknij {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #475569;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.18s var(--bpmh-krzywa, ease);
}

.bpmh-modal__zamknij:hover,
.bpmh-modal__zamknij:focus-visible {
	background: #f1f5f9;
}

.bpmh-modal__tytul {
	margin: 0 0 0.8rem;
	font-size: 2.8rem;
	line-height: 3.4rem;
	font-weight: 600;
	color: #06090f;
}

.bpmh-modal__opis {
	margin: 0 0 2.4rem;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: #475569;
}

.bpmh-pole {
	margin: 0 0 1.6rem;
}

.bpmh-pole label {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 1.5rem;
	line-height: 2.1rem;
	font-weight: 500;
	color: #06090f;
}

.bpmh-pole__dodatek {
	font-weight: 400;
	color: #475569;
}

.bpmh-pole input[type="text"],
.bpmh-pole input[type="email"],
.bpmh-pole input[type="tel"],
.bpmh-pole textarea {
	display: block;
	width: 100%;
	padding: 1.4rem 1.6rem;
	border: 1px solid #cbd5e1;
	border-radius: 1rem;
	background: #fff;
	color: #1e293b;
	font-family: inherit;
	font-size: 1.7rem;
	line-height: 2.4rem;
	transition: border-color 0.18s var(--bpmh-krzywa, ease);
}

.bpmh-pole input:focus,
.bpmh-pole textarea:focus {
	border-color: #3ac2be;
	outline: none;
}

.bpmh-pole textarea {
	resize: vertical;
	min-height: 10rem;
}

.bpmh-pole-para {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6rem;
}

.bpmh-pole--zgoda label {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 2rem;
	color: #475569;
}

.bpmh-pole--zgoda input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

/* Pułapka na roboty. `display: none` bywa przez nie rozpoznawane —
   stąd wyprowadzenie poza ekran zamiast ukrycia. */
.bpmh-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bpmh-modal__stopka {
	margin: 2.4rem 0 0;
}

.bpmh-modal__wyslij {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1.7rem 3.2rem;
	border: 0;
	border-radius: 1rem;
	/* Ten sam gradient i ten sam biały napis co przycisk główny
	   w nagłówku. Wcześniej było płaskie tło i ciemny napis, przez co
	   dwa najważniejsze przyciski na stronie wyglądały jak z dwóch
	   różnych projektów. */
	background: linear-gradient(135deg, var(--bpmh-akcent-jasny, #4fdbd4) 0%, var(--bpmh-akcent, #2cb8b4) 100%);
	color: #ffffff;
	font-family: inherit;
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 600;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.18s var(--bpmh-krzywa, ease);
}

.bpmh-modal__wyslij:hover:not(:disabled),
.bpmh-modal__wyslij:focus-visible:not(:disabled) {
	background: linear-gradient(135deg, #5eeae4 0%, #33c9c4 100%);
	color: #ffffff;
	box-shadow: 0 0.8rem 2rem rgba(44, 184, 180, 0.35);
}

.bpmh-modal__wyslij:disabled {
	opacity: 0.6;
	cursor: default;
}

.bpmh-modal__komunikat {
	margin: 1.2rem 0 0;
	font-size: 1.5rem;
	line-height: 2.1rem;
	color: #475569;
}

.bpmh-modal__komunikat.jest-bledem {
	color: #b32d2e;
}

.bpmh-modal__dziekujemy {
	text-align: center;
	padding: 2.4rem 0;
	color: #1e293b;
	font-size: 1.7rem;
	line-height: 2.55rem;
}

.bpmh-modal__ptaszek {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 6.4rem;
	height: 6.4rem;
	margin-bottom: 1.6rem;
	border-radius: 50%;
	background: rgba(58, 194, 190, 0.12);
	color: #3ac2be;
}

/* Strona pod otwartym oknem nie przewija się — inaczej użytkownik
   gubi okno, przewijając tło kółkiem myszy. */
body.bpmh-modal-otwarty {
	overflow: hidden;
}

@media (max-width: 600px) {

	.bpmh-modal {
		padding: 0;
		align-items: flex-end;
	}

	.bpmh-modal__okno {
		max-width: none;
		max-height: 92vh;
		padding: 3.2rem 2rem 2.4rem;
		border-radius: 1.6rem 1.6rem 0 0;
	}

	.bpmh-modal__tytul {
		font-size: 2.2rem;
		line-height: 2.8rem;
	}

	.bpmh-pole-para {
		grid-template-columns: 1fr;
	}
}

/* Slider pod pigułką (2.0.1) -----------------------------------------

   Przy włączonej nakładce arkusz dokłada górną wyściółkę PIERWSZEJ
   sekcji, żeby jej nagłówek nie chował się pod pigułką. Slider tej
   wyściółki nie chce: pigułka ma leżeć NA zdjęciu, a nie nad białym
   pasem.

   Wyściółka wewnątrz slidera zrobiłaby dokładnie ten srebrny pas,
   tylko w środku sekcji. Zerujemy ją tylko dla slidera; pozostałe
   sekcje zachowują swój oddech. */

body.bpmh-nakladka .entry-content > .wp-block-bp-slider,
body.bpmh-nakladka .entry-content > .wp-block-bp-slider:first-child {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* WAGA SELEKTORA — trzecia najczęstsza przyczyna „reguła jest,
   a efektu nie ma". Reguła oddechu wyżej ma `!important` i tę samą
   wagę (0,3,1) co ta. Bez `!important` po tej stronie przegrywa
   i srebrny pas zostaje. Sprawdzone na żywo 2026-08-04. */

/* Plansza EMS w panelu katalogu (2.1.0) ------------------------------

   Kategoria bez produktów — dziś tylko „EMS". Zamiast pustego miejsca
   po prawej stronie panelu idzie krótka plansza z tym, co system robi.
   Rysowana od zera, nie skopiowana z sekcji na stronie głównej:
   ta sama treść, inny format i inny czas czytania. */

/* Cała plansza jest klikalna — stąd `text-decoration` i `color`
   ustawione wprost: bez nich dziedziczyłaby wygląd linku z motywu. */
.bpmh__plansza {
	grid-column: 1 / -1;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s var(--bpmh-krzywa), box-shadow 0.18s var(--bpmh-krzywa);
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	padding: 3.2rem;
	border: 1px solid #cbd5e1;
	border-radius: 1.2rem;
	background: linear-gradient(135deg, #f1f5f9 0%, #fff 60%);
}

a.bpmh__plansza:hover,
a.bpmh__plansza:focus-visible {
	border-color: #3ac2be;
	box-shadow: 0 0.8rem 2.4rem rgba(2, 6, 23, 0.08);
	color: inherit;
}

.bpmh__plansza-tytul {
	margin: 0;
	font-size: 2.2rem;
	line-height: 2.8rem;
	font-weight: 600;
	color: var(--bpmh-tekst, #06090f);
}

.bpmh__plansza-opis {
	margin: 0;
	max-width: 52ch;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: #475569;
}

.bpmh__plansza-lista {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
}

/* Tekst wyśrodkowany w PIONIE względem ikony. Przy `flex-start`
   jednowierszowy napis siedział przy górnej krawędzi kwadratu
   i wyglądał na podniesiony. */
.bpmh__plansza-lista li {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	font-size: 1.6rem;
	line-height: 2.4rem;
	color: var(--bpmh-tekst, #06090f);
	list-style: none;
}

.bpmh__plansza-ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	flex: 0 0 3.6rem;
	border-radius: 0.8rem;
	background: rgba(58, 194, 190, 0.12);
	color: #3ac2be;
}

/* =====================================================================
   Poprawki 2026-08-04 (runda 7)
   ===================================================================== */

/* --- małe panele: „Instalator" i „Serwis" ---------------------------

   Kafle miały za dużo białego tła i nie były wyrównane do lewej.

   Dwie rzeczy naraz: panel był szerszy, niż potrzebuje (min. 24 rem przy
   dwóch krótkich linkach), a tekst w środku odsunięty od jego krawędzi
   o 2,4 rem (0,8 obudowy + 1,6 pozycji). Przez to napisy nie stały
   w jednej linii z zakładką nad nimi.

   Panel zwężony do zawartości, wyściółka mniejsza, a całość przesunięta
   w lewo dokładnie o tę wewnętrzną wyściółkę — wtedy pierwsza litera
   linku ląduje pod pierwszą literą zakładki. */
.bpmh__panel--maly {
	min-width: 0;
	max-width: 32rem;
	padding: 0.6rem;
	margin-left: -1.8rem;
}

.bpmh__panel--maly .bpmh__pozycja {
	padding: 1rem 1.2rem;
}

/* --- okno formularza ------------------------------------------------- */

/* Mocniejsze przyciemnienie i minimalne rozmycie strony pod oknem
   strony pod spodem. Rozmycie 3 px — na tyle, żeby oko odpuściło tło,
   a nie na tyle, żeby zrobić z tego efekt.

   `backdrop-filter` z przedrostkiem dla Safari. Gdy przeglądarka go nie
   zna, zostaje samo przyciemnienie i okno nadal jest czytelne. */
.bpmh-modal__tlo {
	background: rgba(2, 6, 23, 0.78);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* --- pola formularza: etykieta wjeżdżająca w ramkę --------------------

   Założenie: nazwa pola jest domyślnie w środku,
   a po rozpoczęciu pisania przesuwa się do góry i siada w konturze pola.

   Zrobione CZYSTYM CSS-em, bez JavaScriptu:
     - pole ma `placeholder=" "` (spacja), więc `:placeholder-shown`
       mówi „użytkownik jeszcze nic nie wpisał",
     - w kodzie pole stoi PRZED etykietą, dzięki czemu działa selektor
       sąsiada `+`; to pewniejsze niż `:has()`,
     - `for`/`id` zostają, więc kliknięcie w etykietę nadal ustawia
       kursor w polu, a czytnik ekranu czyta ją normalnie.

   Etykieta ma białe tło i wyściółkę po bokach — to ono „przecina"
   kontur pola, gdy etykieta na nim siada. */
.bpmh-pole {
	position: relative;
}

.bpmh-pole label {
	position: absolute;
	left: 1rem;
	top: 1.4rem;
	margin: 0;
	padding: 0 0.6rem;
	background: #fff;
	color: #475569;
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 400;
	pointer-events: none;
	transform-origin: left center;
	transition: transform 0.16s var(--bpmh-krzywa, ease), color 0.16s var(--bpmh-krzywa, ease);
}

.bpmh-pole.jest-wypelnione label,
.bpmh-pole input:focus + label,
.bpmh-pole textarea:focus + label,
.bpmh-pole input:not(:placeholder-shown) + label,
.bpmh-pole textarea:not(:placeholder-shown) + label {
	transform: translateY(-2.3rem) scale(0.8) !important;
	color: #06090f;
}

.bpmh-pole input:focus + label,
.bpmh-pole textarea:focus + label {
	color: #2aa8a4;
}

/* Pole z etykietą w środku nie może mieć własnej etykiety nad sobą —
   wyściółkę zostawiamy taką, jaka była, żeby wysokość pól się nie zmieniła. */
.bpmh-pole textarea + label {
	top: 1.4rem;
}

/* Zgoda to pole wyboru — tam etykieta zostaje zwykłym tekstem obok
   kwadracika, bez pływania. */
.bpmh-pole--zgoda {
	position: static;
}

.bpmh-pole--zgoda label {
	position: static;
	padding: 0;
	background: none;
	transform: none;
	pointer-events: auto;
	font-size: 1.5rem;
	line-height: 2.1rem;
}

/* Dopisek „(nieobowiązkowe)" znika, gdy użytkownik zacznie pisać
   Etykieta wjeżdża wtedy w kontur pola
   i jest tam miejsce tylko na samą nazwę — dopisek by ją rozpychał
   i wychodził poza ramkę. */
.bpmh-pole.jest-wypelnione .bpmh-pole__dodatek,
.bpmh-pole input:focus ~ label .bpmh-pole__dodatek,
.bpmh-pole textarea:focus ~ label .bpmh-pole__dodatek {
	display: none;
}

/* --- małe panele menu, podejście trzecie (2026-08-05) ----------------

   Za dużo białego tła, szczególnie na dole i na górze.
   Poprzednie dwie próby zmniejszały
   panel, ale nie tam, gdzie trzeba — biel brała się z WYŚCIÓŁKI PIONOWEJ
   pozycji menu (1 rem góra i dół przy dwóch pozycjach to 4 rem pustki
   w panelu wysokim na 12).

   Teraz: wyściółka panelu 4 px, pozycja 8/12 px, odstęp między
   pozycjami zerowy. Panel schodzi do wysokości samych linków.

   Piksele, nie `rem` — w tym arkuszu `rem` nie ma i ma nie być
   (zasada z nagłówka pliku). */
.bpmh__panel--maly {
	padding: 4px;
}

.bpmh__panel--maly .bpmh__panel-wnetrze {
	padding: 0;
}

.bpmh__panel--maly .bpmh__kolumna {
	padding: 0;
}

.bpmh__panel--maly .bpmh__lista {
	margin: 0;
	padding: 0;
}

.bpmh__panel--maly .bpmh__lista li {
	margin: 0;
	padding: 0;
}

.bpmh__panel--maly .bpmh__pozycja {
	padding: 8px 12px;
}

/* „Zobacz wszystko" w małym panelu tylko dokłada wysokości —
   te dwa linki i tak są całą zawartością zakładki. */
.bpmh__panel--maly .bpmh__wszystko {
	display: none;
}

/* PODEJŚCIE CZWARTE — z wagą i pomiarem (2026-08-05).

   Po trzeciej próbie zmierzyłem panel na żywo: wysokość 134 px przy
   dwóch pozycjach, 26 px bieli nad pierwszą i 33 px pod ostatnią.
   Czyli poprzednie reguły NIE WYGRAŁY — panel ma własną wyściółkę
   z reguły bazowej `.bpmh__panel`, o tej samej wadze co
   `.bpmh__panel--maly`, wypisanej WYŻEJ w pliku... ale nadpisywanej
   przez coś jeszcze.

   Dokładamy `.bpmh` z przodu (waga 0,2,0 → 0,3,0) i `!important`.
   Docelowo: 4 px wyściółki panelu, pozycja 8/12, zero marginesów
   na liście. Przy dwóch pozycjach panel ma mieć ~82 px, nie 134. */
.bpmh .bpmh__panel--maly {
	padding: 4px !important;
}

.bpmh .bpmh__panel--maly .bpmh__panel-wnetrze,
.bpmh .bpmh__panel--maly .bpmh__kolumny,
.bpmh .bpmh__panel--maly .bpmh__kolumna,
.bpmh .bpmh__panel--maly .bpmh__lista {
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}

.bpmh .bpmh__panel--maly .bpmh__lista li {
	margin: 0 !important;
	padding: 0 !important;
}

.bpmh .bpmh__panel--maly .bpmh__pozycja {
	padding: 8px 12px !important;
}

/* --- SZARE TŁO POD NAGŁÓWKIEM NA PODSTRONACH (2026-08-05) ------------

   Objaw: pod nagłówkiem widać szare tło, choć nagłówek ma być
   przezroczysty.

   Nagłówek JEST przezroczysty — to nie on. Zmierzone na podstronie
   produktu: `.bpmh` i `.bpmh__kontener` mają `background: transparent`,
   a pigułka jest biała. Szary pas bierze się z **tła BODY**, które
   Kadence trzyma w jasnej szarości i które widać w pasie nad
   `.site` — tam, gdzie leży przezroczysty odstęp rezerwowany
   pod nagłówek `position: fixed`.

   Na stronie głównej tego nie widać, bo nagłówek leży na zdjęciu hero
   (tryb nakładki). Na podstronach nakładki nie ma i spod nagłówka
   wychodzi tło motywu.

   Dlatego: przy WŁĄCZONYM naszym nagłówku i BEZ nakładki tło strony
   jest białe. Warunek `:not(.bpmh-nakladka)` jest ważny — na stronie
   głównej nic nie ruszamy. */
body.bpmh-aktywny:not(.bpmh-nakladka),
body.bpmh-aktywny:not(.bpmh-nakladka) .site,
body.bpmh-aktywny:not(.bpmh-nakladka) .content-area,
body.bpmh-aktywny:not(.bpmh-nakladka) .content-container {
	background-color: #fff;
}

/* --- małe panele: wyrównanie do zakładki nad nimi --------------------

   Poprzednia wersja przesuwała panel o −1,8 rem i tekst linku wychodził
   NA LEWO od tekstu zakładki. Zakładka ma 16 px wyściółki, a w panelu
   jest 4 px obudowy + 12 px pozycji = też 16 px. Przy zerowym
   przesunięciu litery stają dokładnie jedna pod drugą. */
.bpmh .bpmh__panel--maly {
	margin-left: 0;
}

/* =====================================================================
   RUNDA 9 (2026-08-05) — logo, podwójny odstęp, wspólny hover
   ===================================================================== */

/* --- logo odrobinę większe ------------------------------------------

   4 rem → 4,6 rem. Pigułka ma 82 px wysokości, więc 46 px logo mieści
   się bez zmiany jej geometrii. `max-width` rośnie proporcjonalnie,
   żeby szeroki znak firmowy nie został przycięty w pionie. */
.bpmh__logo-obraz {
	max-height: 4.6rem;
	max-width: 23rem;
}

/* --- podstrony: BYŁY DWA ODSTĘPY NARAZ ------------------------------

   Odstęp między kafelkami a górnym menu był za duży. Zmierzone: od dolnej krawędzi
   pigułki (126 px) do treści (282 px) — **156 px pustki**.

   Przyczyna: na stronach bez nakładki miejsce pod nagłówek rezerwują
   DWA niezależne mechanizmy, dołożone w różnych wydaniach i nigdy
   nie zestawione ze sobą:

     145 px  `body:not(.bpmh-nakladka) { padding-top }`  (wydanie 043)
     105 px  pusty `<div class="bpmh__odstep">` w markupie nagłówka

   Przy nakładce `.bpmh__odstep` ma sens — treść wjeżdża pod nagłówek
   i to on trzyma wysokość. Bez nakładki jest czystym powieleniem.
   Zdejmujemy więc jego wysokość, a nie wyściółkę `body` — wyściółka
   jest liczona ze zmiennej i skaluje się razem z nagłówkiem.

   Po zmianie zostaje 51 px oddechu od pigułki: tyle, żeby treść
   się nie kleiła, i nic ponad to. */
body:not(.bpmh-nakladka) .bpmh__odstep {
	height: 0;
}

/* --- jeden hover na całej stronie -----------------------------------

   Wszystkie przyciski na stronie — także te w sliderze i w mega menu —
   mają tę samą reakcję na najechanie.

   Wzorcem jest przycisk z nagłówka, bo to najbardziej widoczny przycisk
   na stronie: **uniesienie o 1 px i turkusowa poświata**. Tło zostaje
   bez zmian, więc stan spoczynkowy niczego nie traci.

   Wariant konturowy dokłada do tego delikatne wypełnienie — inaczej
   przy przezroczystym tle uniesienie samo w sobie jest ledwo widoczne. */
.bpmh__przycisk--glowny:hover,
.bpmh__przycisk--glowny:focus-visible,
.bpmh__przycisk--poboczny:hover,
.bpmh__przycisk--poboczny:focus-visible {
	box-shadow: 0 0.8rem 2rem rgba(44, 184, 180, 0.35);
	transform: translateY(-1px);
}

.bpmh__przycisk--poboczny:hover,
.bpmh__przycisk--poboczny:focus-visible {
	border-color: var(--bpmh-akcent);
	background: rgba(58, 194, 190, 0.08);
	color: var(--bpmh-tekst);
}