/* =========================================================
   BP Sluxer — arkusz sekcji strony głównej

   Wartości pochodzą z projektu graficznego, w PIKSELACH, i są ostateczne —
   tutaj są podzielone przez 10, bo Kadence trzyma
   `html { font-size: 62.5% }`, czyli 1rem = 10px.

   Dlaczego `rem`, a nie piksele: strony Brand Perspective skalują się
   zmieniając bazę `rem` na sześciu progach (system z motywu potomnego).
   Arkusz w pikselach stałby w miejscu, gdy reszta strony rośnie.

   Kreski cieńsze niż 2 px zostają w `px` — skalowanie je rozmywa.
   Rozmiary grafik rastrowych (smugi w sekcji EMS) też zostają w px:
   projekt wyraźnie zabrania skalowania ich w górę.

   Paleta:
     turkus            #3ac2be     turkus hover     #2aa8a4
     prawie czerń      #06090f     najciemniejsze   #020617
     tekst akapitowy   #1e293b     tekst 2 rzędu    #475569
     tekst na ciemnym  #ffffff     ramki            #cbd5e1
     ramka delikatna   #e2e8f0     tło jasne        #f1f5f9
     słupki nieaktywne #334155
   ========================================================= */

.bpsx {
	--bpsx-akcent: #3ac2be;
	--bpsx-akcent-hover: #2aa8a4;
	--bpsx-czern: #06090f;
	--bpsx-ciemne: #020617;
	--bpsx-tekst: #1e293b;
	--bpsx-tekst-2: #475569;
	--bpsx-tekst-ciemne: #ffffff;
	--bpsx-ramka: #cbd5e1;
	--bpsx-ramka-2: #e2e8f0;
	--bpsx-jasne: #f1f5f9;

	--bpsx-promien: 1rem;

	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-tekst);
}

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

/* Kontener bierze szerokość z MOTYWU, nie z liczby na sztywno —
   ta sama zasada co przy pigułce nagłówka (wydanie 021). Zmiana
   szerokości treści w Customizerze przestawia sekcje razem z resztą. */
/* Oddech od krawędzi też bierzemy z motywu — tą samą zmienną, z której
   korzystają rzędy Kadence. Wpisane tu na sztywno 2 rem było wartością
   dla telefonu i nie rosło razem z ekranem: na 1920 px nagłówek sekcji
   kontaktowej zaczynał się 20 px od krawędzi, a nagłówki sekcji
   składanych rzędami — 120 px. Dwa różne początki tekstu na jednej
   stronie. Zmienna trzyma je razem na każdym progu i na każdej podstronie. */
.bpsx-kontener {
	max-width: var(--global-content-width, 168rem);
	margin: 0 auto;
	padding-left: var(--global-content-edge-padding, 2rem);
	padding-right: var(--global-content-edge-padding, 2rem);
	width: 100%;
}

/* --- wspólne elementy ----------------------------------------------- */

.bpsx-naglowek {
	margin: 0 0 1.2rem;
	line-height: 5.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.bpsx-naglowek--ciemny {
	color: var(--bpsx-czern);
}

.bpsx-naglowek--jasny {
	color: var(--bpsx-k-ffffff);
}

.bpsx-kropka {
	color: var(--bpsx-akcent);
}

.bpsx-lead {
	max-width: 72rem;
	margin: 0 0 5.6rem;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-tekst-2);
}

/* Przyciski sekcji maja klase motywu `.bp-btn` - wyglad z „Wygladu
   przyciskow" w „Dostosuj" (spec. 2, M4). `.bpsx-btn` zostaje wylacznie
   jako zaczep ukladu (szerokosc na telefonie, odstep nad przyciskiem). */

.bpsx-ikona {
	display: block;
}

/* --- 02: Nasze produkty --------------------------------------------- */

/* Sekcja jest PEŁNEJ SZEROKOŚCI i celowo bez marginesu bocznego —
   karuzela ma dotykać krawędzi okna, a sąsiednie kafle wystawać poza nie. */
/* WYMIARY ZMIERZONE NA WZORCU `sigenergy.com/pl`, okno 1536 px:

     sekcja            tło BIAŁE, nie jasnoszare
     nagłówek          40 / 44 px, grubość 700, kolor #222
     odstęp pod nim    50 px do górnej krawędzi kafli
     kafel             550 × 461 px, promień 6 px
     odstęp kafli      25 px
     nazwa na kaflu    28 / 28 px, grubość 700, biała
     przycisk          16 / 16 px grubość 300, wyściółka 10 / 35,
                       promień 25 px, ramka 0,8 px biała, odstęp 25 px
     tekst od dołu     35 px
     strzałki          50 × 50 px, KWADRAT, rgba(0,0,0,0.7),
                       108 px od krawędzi okna, wyśrodkowane w pionie
     kropki            BRAK — wzorzec ich nie ma

   Kafel jest stały, nie procentowy: wzorzec też ma stałe 550 px
   i przy szerszym oknie po prostu widać więcej kafli. Procent
   z poprzedniej wersji dawał przy 1440 px kafel 504 px i wszystko
   niżej rozjeżdżało się o te kilkadziesiąt pikseli. */
.bpsx-produkty {
	padding: 10rem 0 11rem;
	background: var(--bpsx-k-ffffff);
	overflow: hidden;
}

/* UJEDNOLICONE Z RESZTĄ SEKCJI.

   Było 4 rem / 700 — wprost ze wzorca `sigenergy.com/pl`. Ustalono
   o jeden rozmiar nagłówka we wszystkich sekcjach i wybrał ten większy,
   więc ta sekcja **świadomie odchodzi od wzorca w tym jednym wymiarze**:
   „Nasze produkty" ma teraz tyle samo co „Dlaczego Sluxer",
   „Inteligentne zarządzanie energią" i „Wsparcie i serwis".
   Reszta geometrii kafli zostaje 1:1. */
.bpsx-produkty__naglowek {
	margin: 0 0 5rem;
	line-height: 5.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--bpsx-czern);
	text-align: center;
}

.bpsx-produkty__okno {
	position: relative;
}

.bpsx-produkty__tor {
	display: flex;
	gap: 2.5rem;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.bpsx-kafel {
	position: relative;
	/* Kafel 550 × 461 px — wprost ze wzorca, wartość stała.
	   Wzorzec też nie skaluje kafla z szerokością okna: przy szerszym
	   ekranie po prostu widać więcej kafli. Poprzednie
	   `clamp(46rem, 35vw, 68rem)` dawało przy oknie 1440 px kafel 504 px
	   zamiast 550 i cała sekcja różniła się od wzorca. */
	flex: 0 0 55rem;
	height: 46.1rem;
	border-radius: 0.6rem;
	overflow: hidden;
	/* U WZORCA TEJ SZAROŚCI NIE MA W CSS — jest wtopiona w zdjęcie
	   produktu (gotowe kadry 1000 × 838 px z gradientem w tle).
	   Nasze zdjęcia są na białym, więc gradient robimy regułą.
	   Odwzorowujemy efekt regułą, nie ruszamy plików graficznych.

	   Zjazd do #a3a3a3 przy dolnej krawędzi, nie do #cfcfcf jak wcześniej:
	   na wzorcu dolna trzecia część kafla jest wyraźnie szara, i to ona
	   daje kontrast pod białą nazwą produktu. */
	background:
		radial-gradient(75% 60% at 50% 38%, color-mix(in srgb, var(--bpsx-k-ffffff) 90%, transparent) 0%, color-mix(in srgb, var(--bpsx-k-ffffff) 0%, transparent) 74%),
		linear-gradient(180deg, var(--bpsx-k-f7f7f7) 0%, var(--bpsx-k-f1f1f1) 38%, var(--bpsx-k-e3e3e3) 62%, var(--bpsx-k-c6c6c6) 82%, var(--bpsx-k-a3a3a3) 100%);
}

/* `contain`, NIGDY `cover` — to studyjne bryły, które muszą być
   widoczne w całości. `cover` obcina im podstawę i wyglądają
   na rozciągnięte (ustalenie z wydania 029). */
.bpsx-kafel__obraz {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	/* Wyściółka przeliczona na niższy kafel (461 px zamiast 545 px).
	   Dolne 10 rem to pas, w którym leży nazwa i przycisk — zdjęcie
	   nie ma pod nie wchodzić. */
	padding: 3.5rem 3.5rem 10rem;
}

.bpsx-kafel__gradient {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 22rem;
	/* Czerń NEUTRALNA, nie granatowa (#0f172a). U wzorca przyciemnienie
	   pochodzi z samego zdjęcia i jest czysto szare — granat dawał
	   niebieskawy odcień, którego u nich nie ma. */
	background: linear-gradient(180deg, color-mix(in srgb, var(--bpsx-k-000000) 0%, transparent) 0%, color-mix(in srgb, var(--bpsx-k-000000) 18%, transparent) 52%, color-mix(in srgb, var(--bpsx-k-000000) 42%, transparent) 100%);
	pointer-events: none;
}

.bpsx-kafel__tresc {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	text-align: center;
}

/* Bez cieni pod literami — wyraźny wymóg z projektu. Czytelność
   robi gradient wyżej, nie `text-shadow`. */
.bpsx-kafel__nazwa {
	margin: 0;
	line-height: 2.8rem;
	font-weight: 700;
	color: var(--bpsx-k-ffffff);
}

.bpsx-pill {
	display: inline-flex;
	align-items: center;
	/* Wprost ze wzorca: wyściółka 10 / 35 px, ramka 0,8 px pełnej bieli,
	   promień 25 px (nie 999 — przy wysokości 38 px różnicy nie widać,
	   ale trzymamy liczbę wzorca), pismo 16 px o grubości 300.
	   Ramka w `px`, bo kreski cieńsze niż 2 px skalowanie rozmywa. */
	padding: 1rem 3.5rem;
	border: 0.8px solid var(--bpsx-k-ffffff);
	border-radius: 2.5rem;
	color: var(--bpsx-k-ffffff);
	font-size: 1.6rem;
	line-height: 1.6rem;
	font-weight: 300;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.bpsx-pill:hover,
.bpsx-pill:focus-visible {
	background: var(--bpsx-k-ffffff);
	color: var(--bpsx-czern);
}

/* Strzałki jak na wzorcu: ciemne KWADRATY, nie koła, przy wewnętrznych
   krawędziach kafli bocznych. Bez rozmycia tła — u nich są płaskie. */
.bpsx-strzalka {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: color-mix(in srgb, var(--bpsx-k-000000) 70%, transparent);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.18s ease;
	z-index: 2;
}

.bpsx-strzalka:hover,
.bpsx-strzalka:focus-visible {
	background: color-mix(in srgb, var(--bpsx-k-000000) 88%, transparent);
}

/* 108 px od krawędzi okna — zmierzone na wzorcu przy oknie 1536 px
   (strzałki na x = 108 i x = 1378, czyli symetrycznie). Strzałka leży
   NA kaflu, a nie obok niego. */
.bpsx-strzalka--lewo {
	left: 10.8rem;
}

.bpsx-strzalka--prawo {
	right: 10.8rem;
}

/* Sam grot: kwadrat 12 × 12 z dwoma krawędziami, obrócony o 45°.
   Prostsze i ostrzejsze niż SVG w tym rozmiarze. */
.bpsx-grot {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	border-top: 1.8px solid var(--bpsx-k-ffffff);
	border-right: 1.8px solid var(--bpsx-k-ffffff);
	transform: rotate(45deg);
	margin-left: -0.4rem;
}

.bpsx-strzalka--lewo .bpsx-grot {
	transform: rotate(225deg);
	margin-left: 0.4rem;
}

/* KROPEK NIE MA NA WZORCU (2026-08-04). Sekcja „Our Products"
   na `sigenergy.com/pl` ma pod karuzelą pustkę — nawigacja to wyłącznie
   dwie strzałki na kaflach. Odwzorowanie 1:1 znaczy też: nie dokładać
   elementów, których wzorzec nie ma.

   Znacznik zostaje w kodzie strony i nadal działa dla czytników ekranu
   (`aria-label` z nazwą produktu), tylko go nie widać. Gdyby kropki
   miały wrócić, wystarczy skasować tę jedną regułę. */
.bpsx-produkty__kropki {
	display: none;
}

.bpsx-produkty__kropki--widoczne {
	display: flex;
	justify-content: center;
	gap: 1.2rem;
	margin-top: 3.6rem;
}

.bpsx-kropka {
	width: 1.2rem;
	height: 1.2rem;
	padding: 0;
	/* Ramka, nie tekst - token tekstu jest teraz bialy. */
	border: 1px solid var(--bpsx-ramka);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.18s ease;
}

.bpsx-kropka.jest-aktywna {
	background: var(--bpsx-akcent);
	border-color: var(--bpsx-akcent);
}

/* --- siatka produktów na podstronach zbiorczych ---------------------- */

.bpsx-siatka-produktow {
	padding: 8rem 0 10rem;
	background: var(--bpsx-jasne);
}

.bpsx-siatka-produktow__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.4rem;
	align-items: stretch;
}

.bpsx-produkt-karta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	padding: 3.2rem 2.4rem 4rem;
	border: 1px solid var(--bpsx-ramka);
	border-radius: var(--bpsx-promien);
	background: var(--bpsx-k-ffffff);
	color: var(--bpsx-czern);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bpsx-produkt-karta:hover,
.bpsx-produkt-karta:focus-visible {
	border-color: var(--bpsx-akcent);
	box-shadow: 0 1.2rem 3.2rem color-mix(in srgb, var(--bpsx-k-020617) 8%, transparent);
	color: var(--bpsx-czern);
}

.bpsx-produkt-karta__zdjecie {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 24rem;
}

.bpsx-produkt-karta__obraz {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bpsx-produkt-karta__nazwa {
	font-size: 2rem;
	line-height: 2.3rem;
	font-weight: 600;
}

.bpsx-produkt-karta__moc {
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-tekst-2);
}

/* --- 04: Dlaczego Sluxer --------------------------------------------- */

/* Jednolita biel. Były tu skośne kreski co 82 px pod kątem 115°
   — zdjęte 2026-08-19, bo robiły widoczną granicę między tą sekcją
   a następną. Przejście ma być płynne. */
.bpsx-dlaczego {
	padding: 10rem 0 12rem;
	background: var(--bpsx-k-ffffff);
}

.bpsx-karty {
	display: grid;
	gap: 2.4rem;
	align-items: stretch;
}

.bpsx-karty--4 {
	grid-template-columns: repeat(4, 1fr);
}

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

.bpsx-karta {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	padding: 3.2rem;
	border: 1px solid var(--bpsx-ramka);
	border-radius: var(--bpsx-promien);
	background: var(--bpsx-k-ffffff);
}

.bpsx-karta--duza {
	padding: 3.6rem;
}

.bpsx-karta__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	flex: 0 0 auto;
	border-radius: var(--bpsx-promien);
	background: var(--bpsx-jasne);
	color: var(--bpsx-akcent);
}

.bpsx-karta__tytul {
	margin: 0;
	line-height: 2.3rem;
	font-weight: 600;
	color: var(--bpsx-czern);
}

.bpsx-karta__opis {
	margin: 0;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-tekst-2);
}

/* --- 05: EMS --------------------------------------------------------- */

/* SMUGI I SIATKA ZDJĘTE — tło całej sekcji miało zniknąć.
   Granatowy kolor ZOSTAJE — to świadoma decyzja,
   bo grafika domu jest ciemnym renderem i na białym tle zostałaby
   ciemną plamą.

   Zdjęte trzy warstwy:
     1. grafika `smugi-ems.png` w prawym dolnym rogu,
     2. `.bpsx-ems__przyciemnienie` — gradient, który istniał wyłącznie
        po to, żeby tekst był czytelny NA smugach,
     3. `.bpsx-ems__siatka` — turkusowe pionowe kreski co 96 px.

   Oba znaczniki zniknęły też z `BPSX_Sekcje::html_ems()`, żeby nie
   zostawiać w kodzie strony pustych elementów. Reguły zostają jako
   nieaktywne, gdyby efekt miał wrócić — wtedy wracają i znaczniki. */
.bpsx-ems {
	position: relative;
	/* Mniej czerni nad i pod treścią .
	   Było 11/12 rem. Sekcja jest ciemna, więc ta sama wyściółka co
	   w sekcjach jasnych czyta się jako dużo więcej pustego miejsca. */
	padding: 7rem 0 8rem;
	background: var(--bpsx-ciemne);
	overflow: hidden;
}

/* DWIE KOLUMNY: grafika po lewej, treść po prawej.

   PRAWDZIWA PRZYCZYNA, dla której sekcja wyglądała „rozjechaną"
   (2026-08-04, druga runda uwag). Nie chodziło o ikonki ani o przycisk —
   sekcja **składała się do jednej kolumny** na jego ekranie.

   Winna była pierwsza kolumna wpisana na sztywno: `76rem`. Przy bazie
   `rem` równej 9 px to 684 px, plus 8 rem odstępu — i próg
   `@media (max-width: 1400px)` zrzucał wszystko pod siebie.
   Zmierzone na żywo: okno 1382 px, czyli PONIŻEJ progu, mimo że
   miejsca na dwie kolumny było aż nadto (684 + 72 + 626).
   Typowy laptop 1440 px z powiększeniem Windows ląduje dokładnie tutaj.

   Teraz kolumny są ułamkowe z gwarantowanym minimum dla tekstu,
   więc układ trzyma się sam, bez progu dobranego na oko. Próg
   składania zszedł na 1100 px (dołączony do istniejącego bloku niżej),
   gdzie dwie kolumny naprawdę przestają się mieścić. */
.bpsx-ems__uklad {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(34rem, 1fr);
	gap: 8rem;
	align-items: center;
}

/* Grafika poglądowa instalacji (od 2026-08-04, w miejsce wykresu doby).
   Bez ramki i bez tła — rysunek ma własne ciemne tło, które zlewa się
   z tłem sekcji. Ramka zrobiłaby z niego naklejkę. */
.bpsx-ems__grafika {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Grafika ma własne ciemne tło, minimalnie inne niż tło sekcji
   (#000515 kontra #020617). Różnica jest mała, ale prostokąt było
   widać — obraz wyglądał jak naklejka.

   Zamiast wycinać tło w pliku (przy gradiencie i poświatach to zawsze
   zostawia obwódkę) wygaszamy KRAWĘDZIE maską. Obraz wtapia się w tło
   niezależnie od tego, jak dokładnie kolory się różnią.

   `-webkit-mask-image` obok `mask-image` — Safari nadal wymaga
   przedrostka dla masek na obrazach. */
.bpsx-ems__obraz {
	display: block;
	width: 100%;
	max-width: 76rem;
	height: auto;
	-webkit-mask-image: radial-gradient(120% 110% at 50% 50%, var(--bpsx-k-000000) 55%, color-mix(in srgb, var(--bpsx-k-000000) 55%, transparent) 78%, transparent 100%);
	mask-image: radial-gradient(120% 110% at 50% 50%, var(--bpsx-k-000000) 55%, color-mix(in srgb, var(--bpsx-k-000000) 55%, transparent) 78%, transparent 100%);
}

/* Karta wykresu ---------------------------------------------------- */

.bpsx-wykres {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 54rem;
	padding: 3.6rem;
	border: 1px solid color-mix(in srgb, var(--bpsx-k-cbd5e1) 16%, transparent);
	border-radius: var(--bpsx-promien);
	background: color-mix(in srgb, var(--bpsx-k-06090f) 72%, transparent);
}

.bpsx-wykres__gora {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.6rem;
}

.bpsx-wykres__tytul {
	margin: 0;
	font-size: 2rem;
	line-height: 2.3rem;
	font-weight: 600;
	color: var(--bpsx-k-ffffff);
}

.bpsx-wykres__podpis {
	font-size: 1.7rem;
	color: var(--bpsx-tekst-ciemne);
}

.bpsx-wykres__slupki {
	display: flex;
	align-items: flex-end;
	gap: 0.6rem;
	height: 17.6rem;
}

/* Wysokość podstawia PHP w `--bpsx-h` — patrz komentarz przy renderze:
   mnożenie w `calc()` bywa psute przez minifikator, a na stronie
   działa Autoptimize. */
.bpsx-slupek {
	flex: 1 1 0;
	height: var(--bpsx-h, 5rem);
	border-radius: 0.3rem;
	background: var(--bpsx-k-334155);
}

.bpsx-slupek--ladowanie {
	background: var(--bpsx-akcent);
}

.bpsx-wykres__os {
	display: flex;
	justify-content: space-between;
	margin-top: 1.2rem;
	font-size: 1.7rem;
	color: var(--bpsx-tekst-2);
}

.bpsx-wykres__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 2.4rem;
	margin-top: 2rem;
}

.bpsx-legenda {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.7rem;
	color: var(--bpsx-tekst-ciemne);
}

.bpsx-legenda__kolor {
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 0.3rem;
}

.bpsx-legenda__kolor--akcent {
	background: var(--bpsx-akcent);
}

.bpsx-legenda__kolor--szary {
	background: var(--bpsx-k-334155);
}

.bpsx-wykres__wskazniki {
	display: flex;
	gap: 1.6rem;
	margin-top: 2.8rem;
	padding-top: 2.8rem;
	border-top: 1px solid color-mix(in srgb, var(--bpsx-k-cbd5e1) 14%, transparent);
}

.bpsx-wskaznik {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1 1 0;
	padding: 1.6rem;
	border: 1px solid color-mix(in srgb, var(--bpsx-k-cbd5e1) 16%, transparent);
	border-radius: var(--bpsx-promien);
	background: color-mix(in srgb, var(--bpsx-k-ffffff) 3%, transparent);
}

.bpsx-wskaznik__etykieta {
	font-size: 1.7rem;
	color: var(--bpsx-tekst-ciemne);
}

.bpsx-wskaznik__wartosc {
	font-size: 2rem;
	line-height: 2.3rem;
	font-weight: 600;
}

.bpsx-wskaznik__wartosc--akcent {
	color: var(--bpsx-akcent);
}

.bpsx-wskaznik__wartosc--biel {
	color: var(--bpsx-k-ffffff);
}

/* Prawa kolumna ---------------------------------------------------- */

.bpsx-ems__tresc .bpsx-naglowek {
	margin-bottom: 3.2rem;
}

/* Punkty równane do LEWEJ, dokładnie pod nagłówkiem sekcji —
   ikona, tekst i nagłówek startują z tej samej pionowej linii
   . */
/* PUŁAPKA WAGI SELEKTORA .

   Reguła niżej ma `padding: 0` od początku — i mimo to przeglądarka
   liczyła 30,6 px wyściółki z lewej. Powód: Kadence ma własną regułę
   na `.entry-content ul` o wadze (0,1,1), a `.bpsx-punkty` to (0,1,0).
   Nasza reguła przegrywała i nikt tego nie zauważył, bo lista i tak
   wyglądała sensownie — tylko o 31 px za daleko od nagłówka.

   Stąd `.bpsx-ems .bpsx-punkty`: waga (0,2,0), czyli wyżej niż motyw.
   To trzecia sytuacja w tym projekcie typu „reguła jest, a efektu nie ma"
   — za każdym razem odpowiedzią była waga selektora. */
.bpsx-ems .bpsx-punkty,
.bpsx-punkty {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* Tekst punktu WYŚRODKOWANY względem ikony .
   Przy `flex-start` jednowierszowy tekst siadał przy górnej krawędzi
   ikony 44 px i wyglądał na podwieszony. */
.bpsx-punkt {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding-bottom: 2.4rem;
	border-bottom: 1px solid color-mix(in srgb, var(--bpsx-k-cbd5e1) 14%, transparent);
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-ramka);
}

.bpsx-punkt:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bpsx-punkt__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	flex: 0 0 4.4rem;
	border-radius: var(--bpsx-promien);
	background: color-mix(in srgb, var(--bpsx-k-3ac2be) 12%, transparent);
	color: var(--bpsx-akcent);
}

/* --- 06: Wsparcie i serwis ------------------------------------------ */

.bpsx-wsparcie {
	padding: 10rem 0 12rem;
	background: var(--bpsx-jasne);
}

.bpsx-wsparcie .bpsx-karty {
	margin-bottom: 4.8rem;
}

/* --- stopka ---------------------------------------------------------- */

.bpsx-stopka {
	padding: 9rem 0 4rem;
	background:
		repeating-linear-gradient(115deg, color-mix(in srgb, var(--bpsx-k-3ac2be) 10%, transparent) 0 1px, transparent 1px 82px),
		var(--bpsx-ciemne);
	color: var(--bpsx-ramka);
}

.bpsx-stopka__gora {
	display: flex;
	gap: 8rem;
	padding-bottom: 12rem;
}

.bpsx-stopka__marka {
	flex: 0 0 52rem;
	max-width: 52rem;
}

/* `display: block` i `margin-left: 0` celowo: obrazek w kolumnie
   potrafi odziedziczyć wyśrodkowanie z motywu i odjechać od krawędzi. */
.bpsx-stopka__logo {
	display: block;
	width: 19rem;
	height: auto;
	margin-left: 0;
}

.bpsx-stopka__logo-tekst {
	display: block;
	font-size: 2.4rem;
	font-weight: 600;
	color: var(--bpsx-k-ffffff);
}

.bpsx-stopka__opis {
	margin: 2.4rem 0 0;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-k-ffffff);
}

.bpsx-stopka__kolumny {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4rem;
}

.bpsx-stopka__naglowek {
	margin: 0 0 2rem;
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 600;
	color: var(--bpsx-k-ffffff);
}

.bpsx-stopka__lista {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpsx-stopka__lista li {
	margin: 0;
	list-style: none;
}

.bpsx-stopka__lista a {
	font-size: 1.7rem;
	line-height: 2.4rem;
	color: var(--bpsx-tekst-ciemne);
	text-decoration: none;
	transition: color 0.18s ease;
}

.bpsx-stopka__lista a:hover,
.bpsx-stopka__lista a:focus-visible {
	color: var(--bpsx-akcent);
}

.bpsx-stopka__dol {
	display: flex;
	justify-content: space-between;
	gap: 2.4rem;
	margin-top: 2rem;
	padding-top: 2.8rem;
	border-top: 1px solid color-mix(in srgb, var(--bpsx-k-cbd5e1) 14%, transparent);
	font-size: 1.7rem;
	line-height: 2.4rem;
	color: var(--bpsx-tekst-ciemne);
}

/* =========================================================
   WĘŻSZE EKRANY

   Projekt podaje dwa widoki: 1920 i 390 px. Progi pośrednie
   są dołożone tak, żeby nic się nie łamało po drodze —
   sekcje mają w nich układ przejściowy, nie mobilny.
   ========================================================= */

@media (max-width: 1400px) {

	/* Sekcja EMS NIE składa się już na tym progu — patrz komentarz przy
	   `.bpsx-ems__uklad`. Składanie przeniesione do bloku 1100 px. */

	.bpsx-wykres {
		min-height: 0;
	}

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

@media (max-width: 1100px) {

	/* Tu dwie kolumny sekcji EMS naprawdę przestają się mieścić:
	   przy minimum 34 rem na tekst i odstępie 8 rem zostaje mniej niż
	   pół ekranu na grafikę. Przeniesione z progu 1400 px, gdzie
	   składało się przedwcześnie. */
	.bpsx-ems__uklad {
		grid-template-columns: 1fr;
		gap: 4.8rem;
	}

	/* Odsunięcie strzałek 108 px jest przeliczone na okno wzorca
	   (1536 px). Na tablecie kafel zajmuje prawie całą szerokość
	   i strzałki wjechałyby na zdjęcie produktu — schodzą więc
	   do 2 rem od krawędzi. Poniżej 768 px lądują pod karuzelą,
	   patrz blok niżej. */
	.bpsx-strzalka--lewo {
		left: 2rem;
	}

	.bpsx-strzalka--prawo {
		right: 2rem;
	}

	.bpsx-karty--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.bpsx-karty--3 {
		grid-template-columns: 1fr;
	}

	.bpsx-stopka__gora {
		flex-direction: column;
		gap: 4.8rem;
		padding-bottom: 6.4rem;
	}

	.bpsx-stopka__marka {
		flex-basis: auto;
		max-width: none;
	}
}

@media (max-width: 767px) {

	.bpsx-naglowek,
	.bpsx-produkty__naglowek {
		line-height: 3.45rem;
	}

	.bpsx-lead {
		margin-bottom: 3.2rem;
		font-size: 1.6rem;
		line-height: 2.4rem;
	}

	.bpsx-produkty,
	.bpsx-dlaczego,
	.bpsx-wsparcie,
	.bpsx-ems {
		padding: 4.8rem 0;
	}

	/* Kafel karuzeli: 320 × 380 z odstępem 12 i lewym marginesem toru 20,
	   żeby było widać skrawek następnego kafla. */
	.bpsx-produkty__tor {
		gap: 1.2rem;
		padding-left: 2rem;
	}

	.bpsx-kafel {
		flex-basis: 32rem;
		height: 38rem;
	}

	.bpsx-kafel__obraz {
		padding: 2.4rem 2.4rem 8rem;
	}

	.bpsx-kafel__gradient {
		height: 22.5rem;
	}

	.bpsx-kafel__nazwa {
		line-height: 2.7rem;
	}

	.bpsx-kafel__tresc {
		bottom: 2.4rem;
		gap: 1.2rem;
	}

	/* Strzałki schodzą POD karuzelę — na wąskim ekranie zasłaniałyby
	   zdjęcie produktu, a to ono jest tu treścią. */
	.bpsx-produkty__okno {
		display: flex;
		flex-direction: column;
	}

	.bpsx-strzalka {
		position: static;
		transform: none;
		width: 4.4rem;
		height: 4.4rem;
	}

	.bpsx-strzalka--lewo,
	.bpsx-strzalka--prawo {
		left: auto;
		right: auto;
	}

	.bpsx-produkty__okno .bpsx-strzalka--lewo {
		order: 2;
		margin: 2.4rem 0.6rem 0 auto;
	}

	.bpsx-produkty__okno .bpsx-strzalka--prawo {
		order: 3;
		margin: 2.4rem auto 0 0.6rem;
	}

	.bpsx-produkty__okno .bpsx-produkty__tor {
		order: 1;
	}

	.bpsx-karty--4,
	.bpsx-siatka-produktow__lista {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.bpsx-karta {
		padding: 2.4rem;
	}

	.bpsx-stopka {
		background-size: auto, auto;
	}

	/* Sekcja „Dlaczego" na telefonie też bez kresek — jednolita biel. */
	.bpsx-dlaczego {
		background: var(--bpsx-k-ffffff);
	}

	.bpsx-stopka {
		background:
			repeating-linear-gradient(115deg, color-mix(in srgb, var(--bpsx-k-3ac2be) 10%, transparent) 0 1px, transparent 1px 54px),
			var(--bpsx-ciemne);
		padding-bottom: 10rem;
	}

	/* Smugi zdjęte także na telefonie (2026-08-04). Ta reguła stała
	   700 linii NIŻEJ niż reguła podstawowa i po cichu przywracała
	   grafikę, którą wyżej zdjęliśmy — dokładnie ta pułapka, o której
	   zasada brzmi: dopisując regułę na końcu arkusza sprawdź,
	   czy nie cofasz czegoś wyżej". Złapane sprawdzeniem kodem,
	   nie okiem. */
	.bpsx-ems {
		background: var(--bpsx-ciemne);
	}

	.bpsx-wykres {
		min-height: 24rem;
		padding: 2.4rem;
	}

	.bpsx-wykres__slupki {
		gap: 0.3rem;
		height: 12rem;
	}

	.bpsx-slupek {
		height: var(--bpsx-h-mob, 4rem);
	}

	.bpsx-wykres__os {
		font-size: 1.4rem;
	}

	/* Trzy podpisy zamiast pięciu — pięć nie mieści się bez zlepiania. */
	.bpsx-wykres__os span:nth-child(2),
	.bpsx-wykres__os span:nth-child(4) {
		display: none;
	}

	.bpsx-wykres__wskazniki {
		flex-direction: column;
	}

	.bpsx-stopka__kolumny {
		grid-template-columns: 1fr;
		gap: 2.4rem;
	}

	.bpsx-stopka__dol {
		flex-direction: column;
		gap: 0.8rem;
		margin-top: 3.2rem;
		font-size: 1.5rem;
		line-height: 2.2rem;
	}

	.bpsx-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.bpsx-produkty__tor {
		transition-duration: 0.01ms;
	}
}


/* =========================================================
   WARIANT KADENCE (1.1.0)

   Sekcje „Dlaczego Sluxer” i „Wsparcie i serwis” to zwykłe rzędy
   Kadence — teksty edytuje się w nich tak jak wszędzie indziej.
   Arkusz dokłada im tylko to, czego Kadence nie ma: ramkę kafla,
   ikonę i tło sekcji.

   Struktura rzędu Kadence w wersji `kbVersion: 2` (sprawdzone
   w `build_html` w `class-kadence-blocks-row-layout-block.php`):

     div.wp-block-kadence-rowlayout … .<klasa rzędu>
       └ div.kt-row-column-wrap
           └ div.wp-block-kadence-column … .<klasa kolumny>
               └ div.kt-inside-inner-col      ← TU jest treść

   Dlatego wyściółkę i ramkę kafla dostaje `.kt-inside-inner-col`,
   a nie sama kolumna. Klasa rzędu ląduje na elemencie ZEWNĘTRZNYM.
   ========================================================= */

/* Tło i odstępy sekcji — na rzędzie. Rząd Kadence jest renderowany
   po stronie serwera, więc klasa na nim jest bezpieczna (blok
   z zapisanym markupem zgłosiłby „nieoczekiwaną treść”). */
/* Jednolita biel — kreski zdjęte 2026-08-19, tak samo jak w wersji
   tej sekcji budowanej skrótem. Robiły widoczną granicę z sekcją niżej. */
.bpsx-k-dlaczego {
	padding-top: 10rem;
	padding-bottom: 12rem;
	background: var(--bpsx-k-ffffff);
}

.bpsx-k-wsparcie {
	padding-top: 10rem;
	padding-bottom: 12rem;
	background: var(--bpsx-k-f1f5f9);
}

/* Kafel */
.bpsx-k-karta > .kt-inside-inner-col {
	height: 100%;
	padding: 3.2rem;
	border: 1px solid var(--bpsx-k-cbd5e1);
	border-radius: 1rem;
	background: var(--bpsx-k-ffffff);
}

/* Kolumna Kadence rozciąga się w rzędzie, ale jej wnętrze samo z siebie
   nie — bez tego kafle z krótszym opisem robią schodki. */
.bpsx-k-karta,
.bpsx-k-karta > .kt-inside-inner-col {
	height: 100%;
}

.bpsx-k-karta h3 {
	margin: 0 0 0.8rem;
	font-size: var(--bp-h3);
	line-height: 2.3rem;
	font-weight: 600;
	color: var(--bpsx-k-06090f);
}

.bpsx-k-karta p {
	margin: 0;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-k-475569);
}

/* Ikona nad nagłówkiem. Kwadrat 48 × 48 z jasnym tłem, w środku
   kreskówka 24 px. Rysunek jest tłem elementu `::before`, więc
   nie zajmuje miejsca w treści i nie trafia do czytnika ekranu. */
.bpsx-k-karta > .kt-inside-inner-col::before {
	content: "";
	display: block;
	width: 4.8rem;
	height: 4.8rem;
	margin-bottom: 1.6rem;
	border-radius: 1rem;
	background-color: var(--bpsx-k-f1f5f9);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.4rem 2.4rem;
}

/* Klucz nastawny. PRZERYSOWANY 2026-08-05 — poprzedni rysunek przy 24 px
   wyglądał jak przypadkowy zawijas. Ta sama ścieżka siedzi w
   `class-bpsx-ikony.php` pod kluczem `serwis`. ZMIENIASZ TU — ZMIEŃ TAM. */
.bpsx-k-ikona-serwis > .kt-inside-inner-col::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ac2be' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z'/%3E%3C/svg%3E");
}

.bpsx-k-ikona-tarcza > .kt-inside-inner-col::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ac2be' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5.5c0 4.2 2.9 7.6 7 8.5 4.1-.9 7-4.3 7-8.5V6l-7-3Z'/%3E%3Cpath d='m9.2 11.8 2 2 3.6-3.6'/%3E%3C/svg%3E");
}

.bpsx-k-ikona-blyskawica > .kt-inside-inner-col::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ac2be' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5.5 13H11l-1 8 7.5-10H12l1-8Z'/%3E%3C/svg%3E");
}

.bpsx-k-ikona-siec > .kt-inside-inner-col::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ac2be' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='5' cy='18' r='2'/%3E%3Ccircle cx='19' cy='18' r='2'/%3E%3Cpath d='M10.6 6.7 6.4 16.2M13.4 6.7l4.2 9.5M7 18h10'/%3E%3C/svg%3E");
}

.bpsx-k-ikona-dokument > .kt-inside-inner-col::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ac2be' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h6.5L18 7.5V21H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M13.5 3v4.5H18M9 12h6M9 16h4'/%3E%3C/svg%3E");
}

.bpsx-k-ikona-klucz > .kt-inside-inner-col::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ac2be' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3.5a5 5 0 0 0-4.6 6.9L3.8 17.5a1.8 1.8 0 0 0 2.6 2.6l7.1-7.1a5 5 0 0 0 6.1-6.7l-2.7 2.7-2.5-.6-.6-2.5 2.7-2.7a5 5 0 0 0-1.1-.2Z'/%3E%3C/svg%3E");
}

.bpsx-k-ikona-pobierz > .kt-inside-inner-col::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ac2be' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10M8 10.5l4 4 4-4M5 19h14'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {

	.bpsx-k-dlaczego,
	.bpsx-k-wsparcie {
		padding-top: 4.8rem;
		padding-bottom: 4.8rem;
	}

	.bpsx-k-karta > .kt-inside-inner-col {
		padding: 2.4rem;
	}
}

/* Nagłówek, lead i przycisk w sekcjach zbudowanych na Kadence.
   To zwykłe bloki podstawowe (Nagłówek, Akapit, Przyciski) z klasą —
   nie Advanced Heading, który zapisuje własny markup i przy najmniejszej
   niezgodności zgłasza „blok zawiera nieoczekiwaną treść”. */

.bpsx-k-dlaczego .bpsx-k-h2,
.bpsx-k-wsparcie .bpsx-k-h2 {
	margin: 0 0 1.2rem;
	line-height: 5.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--bpsx-k-06090f);
}

.bpsx-k-dlaczego .bpsx-k-lead,
.bpsx-k-wsparcie .bpsx-k-lead {
	max-width: 72rem;
	margin: 0 0 5.6rem;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-k-475569);
}

/* Odstęp między kaflami. Rząd Kadence sam z siebie ma własny system
   przerw; tu wystarczy dołożyć dolny margines na wąskich ekranach,
   gdzie kolumny układają się jedna pod drugą. */
.bpsx-k-kafle > .kt-row-column-wrap {
	align-items: stretch;
}

.bpsx-k-wsparcie .bpsx-k-btn {
	margin-top: 4.8rem;
}

.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link {
	padding: 1.7rem 3.2rem;
	border-radius: 1rem;
	background: var(--bpsx-k-3ac2be);
	color: var(--bpsx-k-06090f);
	font-size: 1.7rem;
	line-height: 2.4rem;
	font-weight: 600;
}

.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link:hover,
.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link:focus-visible {
	background: var(--bpsx-k-2aa8a4);
	color: var(--bpsx-k-06090f);
}

@media (max-width: 767px) {

	.bpsx-k-dlaczego .bpsx-k-h2,
	.bpsx-k-wsparcie .bpsx-k-h2 {
		line-height: 3.45rem;
	}

	.bpsx-k-dlaczego .bpsx-k-lead,
	.bpsx-k-wsparcie .bpsx-k-lead {
		margin-bottom: 3.2rem;
		font-size: 1.6rem;
		line-height: 2.4rem;
	}

	.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Stopka — poprawki z 2026-08-04 -------------------------------------

   Logo równo z tekstem pod nim. Wcześniej `wp_get_attachment_image`
   dziedziczyło wyśrodkowanie z motywu i logo odjeżdżało od krawędzi
   kolumny — widać to było gołym okiem przy zestawieniu z akapitem. */

.bpsx-stopka__marka {
	text-align: left;
}

/* PRAWDZIWA PRZYCZYNA, dla której logo wyglądało na wsunięte (2026-08-04).

   Poprzednia próba ustawiała `margin-left: 0` i `text-align: left` —
   i była trafiona, tylko nie w to. Pomiar na żywo: lewa krawędź obrazka
   stała dokładnie tam, co akapit pod nim (61 px). Problem jest W PLIKU:
   `logo-sluxer-white.png` ma 296 × 118 px, a sam znak zajmuje w nim
   prostokąt (24, 16)–(272, 102). Po **24 px przezroczystego marginesu
   z każdej strony**, czyli 8,11 % szerokości.

   Obrazek był więc wyrównany idealnie, a logo w nim — nie. Cofamy
   o tyle, ile wynosi ten pusty margines przy zadanej szerokości.
   Liczba 0,0811 to 24/296 z pliku; zmienia się tylko wtedy, gdy zmieni
   się sam plik logo. */
.bpsx-stopka__logo {
	--bpsx-logo-szer: 19rem;

	width: var(--bpsx-logo-szer);
	margin-left: calc(var(--bpsx-logo-szer) * -0.0811);
	margin-right: auto;
}

/* Dane spółki NAD cienką linią, jako osobny wiersz. */
.bpsx-stopka__dane {
	margin: 0;
	font-size: 1.7rem;
	line-height: 2.4rem;
	color: var(--bpsx-tekst-ciemne);
}

.bpsx-stopka__autor a {
	color: var(--bpsx-tekst-ciemne);
	text-decoration: none;
	transition: color 0.18s ease;
}

.bpsx-stopka__autor a:hover,
.bpsx-stopka__autor a:focus-visible {
	color: var(--bpsx-akcent);
}

/* =====================================================================
   Sekcja „Współpracujemy z instalatorami w całej Polsce"
   — poprawki 2026-08-04 (runda 7)

   To jest rząd Kadence z treścią z edytora, nie nasz blok. Stylujemy go
   po klasie rzędu `bp-sekcja-instalatorzy`, którą ma w atrybutach.

   PUŁAPKA: treść kolumny Kadence siedzi DWA
   POZIOMY GŁĘBIEJ, w `.kt-inside-inner-col` — odstępy ustawia się tam,
   nie na kolumnie i nie na rzędzie.
   ===================================================================== */

/* Więcej oddechu nad i pod sekcją . Rząd miał wyściółkę 0. */
.bp-sekcja-instalatorzy > .kt-row-column-wrap {
	/* Rząd MIAŁ już 79 px góra/dół, więc 9 rem dołożyło tylko 2 px
	   i różnicy nie było widać. 12 rem to +39 px z każdej
	   strony — widoczne, a nadal nie rozpycha sekcji ponad resztę strony. */
	padding-top: 12rem !important;
	padding-bottom: 12rem !important;
}

/* --- przyciski --------------------------------------------------------

   Miały własny rozmiar z projektu: wyściółka 1,6/5 rem, pismo 1,6 rem,
   wysokość 45 px. Reszta przycisków na stronie (`.bps__btn` w sliderze,
   `.bpsx-btn` w sekcjach, przycisk w nagłówku) ma wyściółkę 1,7/3,2 rem,
   pismo 1,7 rem i wysokość 52–56 px. Ujednolicone do tej drugiej miary.

   `!important` jest tu konieczny, nie wygodny: globalny styl przycisku
   Kadence (`.kb-button.kb-btn-global-fill`) sam jest `!important`
   i ma wagę (0,2,0) — dokładnie tyle co nasz selektor bez niego.
   To ta sama pułapka co przy wariantach
   przycisków. */
/* WAGA SELEKTORA, RUNDA DRUGA (2026-08-04).

   Pierwsza wersja miała `.bp-sekcja-instalatorzy .kb-button` — waga (0,2,0)
   i `!important`. Nie zadziałała, bo Kadence generuje dla każdego bloku
   własną regułę `.kb-button.kb-btn7_c31d84-46`, TEŻ o wadze (0,2,0)
   i też z `!important`, wypisywaną w `<style>` w nagłówku, czyli PO naszym
   arkuszu. Przy równej wadze wygrywa ta późniejsza.

   Dokładając `.kt-inside-inner-col` (pojemnik kolumny Kadence, w którym
   przycisk i tak siedzi) schodzimy na wagę (0,3,0) i wygrywamy niezależnie
   od kolejności. Zmierzone przed poprawką: wyściółka 14,4/45 px zamiast
   zamierzonych 15,3/28,8. */
.bp-sekcja-instalatorzy .kt-inside-inner-col .kb-button {
	min-height: 5.6rem !important;
	padding: 1.7rem 3.2rem !important;
	border-radius: 1rem !important;
	font-size: 1.7rem !important;
	line-height: 2.4rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
}

/* „Znajdź instalatora" zostaje przyciskiem konturowym — zmieniamy
   mu wyłącznie rozmiar i pismo, nie charakter.
   Kreska pełny piksel zamiast 0,73 px: cieńsza rozmywa się przy
   skalowaniu i wygląda na przypadkową. */
.bp-sekcja-instalatorzy .kt-inside-inner-col .kb-button[href*="lista-instalatorow"] {
	border-width: 1px !important;
}

@media (max-width: 767px) {

	.bp-sekcja-instalatorzy > .kt-row-column-wrap {
		padding-top: 6.4rem !important;
		padding-bottom: 6.4rem !important;
	}
}

/* =====================================================================
   PRZYCISK GLOBALNY — jeden wygląd na całej stronie (2026-08-05)

   Objaw: „w slajderze i w mega headerze jest biały napis w środku
   i taki gradient, uspójnij pozostałe przyciski".

   Wzorzec to `.bps__btn` ze slidera i `.bpmh__przycisk` z nagłówka:
   turkusowy gradient 135°, biały napis, promień 1 rem, wyściółka
   1,7/3,2 rem, pismo 1,7 rem o grubości 600, minimalna wysokość 5,6 rem.

   Zmienne `--bpmh-*` podstawia nagłówek. Gdy wtyczka nagłówka jest
   wyłączona, wartości zapasowe dają ten sam kolor — sekcje nie mogą
   zależeć od tego, czy nagłówek jest włączony.
   ===================================================================== */


/* To samo dla przycisków Kadence w sekcji instalatorów — poza wariantem
   konturowym „Znajdź instalatora", który ma zostać przezroczysty. */
.bp-sekcja-instalatorzy .kt-inside-inner-col .kb-button:not([href*="lista-instalatorow"]) {
	background: linear-gradient(135deg, var(--bpmh-akcent-jasny, #4fdbd4) 0%, var(--bpmh-akcent, #2cb8b4) 100%) !important;
	color: var(--bpsx-k-ffffff) !important;
}

/* --- sekcja EMS: oddech nad przyciskiem ------------------------------ */

/* Przycisk „Poznaj nasz EMS" stał tuż pod ostatnim punktem i zlewał się
   z listą. 4 rem odstępu . */
.bpsx-ems__tresc .bpsx-btn {
	margin-top: 4rem;
}

/* =====================================================================
   KARTA PRODUKTU — podstrony Home 16 / Home 30 (2026-08-05)

   Układ z wytycznych: galeria po lewej, tytuł i opis po prawej,
   pod spodem duża tabela ze specyfikacją.
   ===================================================================== */

/* Treść blisko nagłówka .
   Było 7 rem górnej wyściółki PLUS 95 px odstępu rezerwowanego pod
   nagłówek — razem prawie 160 px pustki. Zostaje 2 rem. */
.bpsx-produkt {
	padding: 2rem 0 9rem;
	background: var(--bpsx-k-ffffff);
}

.bpsx-produkt__gora {
	display: grid;
	/* Ta sama zasada co przy sekcji EMS: kolumny ułamkowe z minimum
	   dla tekstu, zamiast progu `@media` dobranego na oko. */
	grid-template-columns: minmax(0, 1fr) minmax(38rem, 1fr);
	gap: 6rem;
	align-items: start;
}

.bpsx-produkt__duze {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 3rem;
	border: 1px solid var(--bpsx-ramka-2);
	border-radius: var(--bpsx-promien);
	background: linear-gradient(180deg, var(--bpsx-k-fbfbfb) 0%, var(--bpsx-k-f2f2f2) 100%);
}

/* `contain`, NIGDY `cover` — to studyjne bryły na przezroczystym tle.
   Ta sama zasada co przy kaflach karuzeli (ustalenie z wydania 029). */
.bpsx-produkt__obraz {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bpsx-produkt__miniatury {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 1.2rem;
}

/* `box-sizing`, `flex` i `overflow` dodane 2026-08-05: bez nich wyściółka
   0,6 rem dokładała się DO zadanej wysokości, a zdjęcie o proporcji innej
   niż kwadrat wychodziło poza zaokrągloną ramkę. Objaw był widoczny na zrzucie —
   miniatury wystawały dołem poza obrys. */
.bpsx-produkt__miniatura {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 9.6rem;
	height: 9.6rem;
	padding: 0.6rem;
	border: 1px solid var(--bpsx-ramka-2);
	border-radius: 0.8rem;
	background: var(--bpsx-k-ffffff);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.18s ease;
}

.bpsx-produkt__miniatura img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bpsx-produkt__miniatura.jest-aktywna,
.bpsx-produkt__miniatura:hover {
	border-color: var(--bpsx-akcent);
}

.bpsx-produkt__tytul {
	margin: 0 0 2rem;
	line-height: 5.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--bpsx-czern);
}

.bpsx-produkt__opis p {
	margin: 0 0 1.6rem;
	font-size: 1.8rem;
	line-height: 2.8rem;
	color: var(--bpsx-tekst-2);
}

.bpsx-produkt__cta {
	margin-top: 1.2rem;
}

.bpsx-produkt__spec {
	margin-top: 8rem;
}

.bpsx-produkt__spec-naglowek {
	margin-bottom: 3.2rem;
}

/* Tabela: parametr po lewej w stałej kolumnie, wartość po prawej.
   `table-layout: fixed` — bez tego długa wartość („Temperatura robocza…")
   rozpycha kolumnę parametrów i wiersze przestają być w jednej linii. */
.bpsx-tabela {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 1.7rem;
	line-height: 2.55rem;
}

.bpsx-tabela th,
.bpsx-tabela td {
	padding: 1.8rem 2rem;
	border-bottom: 1px solid var(--bpsx-ramka-2);
	text-align: left;
	vertical-align: top;
}

.bpsx-tabela th {
	width: 38%;
	font-weight: 600;
	color: var(--bpsx-czern);
}

.bpsx-tabela td {
	color: var(--bpsx-tekst-2);
}

.bpsx-tabela tr:nth-child(odd) th,
.bpsx-tabela tr:nth-child(odd) td {
	background: var(--bpsx-k-fafafa);
}

@media (max-width: 1100px) {

	.bpsx-produkt__gora {
		grid-template-columns: 1fr;
		gap: 4rem;
	}
}

@media (max-width: 767px) {

	.bpsx-produkt {
		padding: 4.8rem 0 5.6rem;
	}

	.bpsx-produkt__tytul {
		line-height: 3.45rem;
	}

	.bpsx-produkt__spec {
		margin-top: 4.8rem;
	}

	/* Na wąskim ekranie tabela dwukolumnowa robi się nieczytelna —
	   parametr ląduje NAD wartością, jeden pod drugim. */
	.bpsx-tabela,
	.bpsx-tabela tbody,
	.bpsx-tabela tr,
	.bpsx-tabela th,
	.bpsx-tabela td {
		display: block;
		width: auto;
	}

	.bpsx-tabela tr {
		padding: 1.2rem 0;
		border-bottom: 1px solid var(--bpsx-ramka-2);
	}

	.bpsx-tabela th,
	.bpsx-tabela td {
		padding: 0.4rem 0;
		border: 0;
		background: none !important;
	}
}

/* Treść jeszcze bliżej nagłówka (2026-08-05, druga próba).

   Zmierzone po pierwszej: od dolnej krawędzi pigułki do sekcji było
   144 px. Składały się na to trzy rzeczy, nie jedna:
     95 px  odstęp rezerwowany pod nagłówek `position: fixed`
            (`.bpmh__odstep` — tego ruszać nie można, treść wjechałaby
             pod nagłówek),
     31 px  wyściółka pojemnika treści Kadence,
     18 px  nasza wyściółka sekcji.

   Zerujemy dwie ostatnie. Zostaje sam odstęp pod nagłówek, czyli
   minimum, przy którym nic się nie chowa. */
.bpsx-produkt {
	padding-top: 0;
}

.entry-content-wrap:has( > .entry-content > .bpsx-produkt ),
.entry-content:has( > .bpsx-produkt ) {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* =====================================================================
   RUNDA 9 (2026-08-05)

   Założenie: jeden hover na całej stronie, dwa przyciski na karcie
   produktu, mniejszy nagłówek specyfikacji, karuzela bliżej nagłówka.

   Blok stoi na KOŃCU arkusza, więc wygrywa kolejnością z regułami wyżej.
   Sprawdzone, że nie cofa niczego z wcześniejszych rund: dotyka wyłącznie
   stanu `:hover`, nowego wariantu `--kontur`, nowego pojemnika `__akcje`
   i wyściółki sekcji, gdy jest ona PIERWSZA w treści.
   ===================================================================== */

/* --- jeden hover ----------------------------------------------------

   Było na stronie pięć różnych reakcji: cień z uniesieniem (nagłówek),
   spłaszczenie gradientu (slider i `.bpsx-btn`), wypełnienie bielą
   (pigułka na kaflu), ściemnienie tła (przycisk Kadence w sekcji
   wsparcia) i domyślny hover Kadence. Zostaje jedna, wzięta z nagłówka:
   uniesienie o 1 px i turkusowa poświata. Tło bez zmian — stan
   spoczynkowy ma wyglądać dokładnie tak, jak wygląda dziś. */
.bpsx-pill,
.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link,
.bp-sekcja-instalatorzy .kt-inside-inner-col .kb-button {
	transition: background 0.18s ease, color 0.18s ease,
		transform 0.2s ease, box-shadow 0.2s ease;
}

.bpsx-pill:hover,
.bpsx-pill:focus-visible,
.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link:hover,
.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link:focus-visible,
.bp-sekcja-instalatorzy .kt-inside-inner-col .kb-button:hover,
.bp-sekcja-instalatorzy .kt-inside-inner-col .kb-button:focus-visible {
	box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--bpsx-k-2cb8b4) 35%, transparent);
	transform: translateY(-1px);
}

/* Tło pełnego przycisku zostaje takie samo jak w spoczynku — wcześniej
   gradient spłaszczał się do jednego koloru i wyglądało to jak zgaszenie
   przycisku, a nie jak reakcja na kursor. */

.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link:hover,
.bpsx-k-wsparcie .bpsx-k-btn .wp-block-button__link:focus-visible {
	background: var(--bpsx-k-3ac2be);
	color: var(--bpsx-k-06090f);
}

/* Pigułka na kaflu karuzeli leży na zdjęciu, więc zamiast poświaty
   (niewidocznej na ciemnym tle) dostaje białe wypełnienie — ale ruch
   ku górze ma taki sam, żeby reakcja była rozpoznawalna jako ta sama. */
.bpsx-pill:hover,
.bpsx-pill:focus-visible {
	background: var(--bpsx-k-ffffff);
	color: var(--bpsx-czern);
	box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--bpsx-k-000000) 25%, transparent);
}

/* --- przycisk konturowy ---------------------------------------------

   Wariant pod „Zobacz specyfikację”. Kontur ma być „taki sam,
   jak przy »Znajdź instalatora« na stronie głównej”: przezroczyste tło,
   turkusowa obwódka, turkusowy napis. Gradientu z `.bpsx-btn` nie da się
   „odjąć”, więc tło zerujemy wprost. */
.bpsx-btn--kontur {
	background: transparent;
	border: 1px solid var(--bpmh-akcent, #2cb8b4);
	color: var(--bpmh-akcent, #2cb8b4);
}

.bpsx-btn--kontur:hover,
.bpsx-btn--kontur:focus-visible {
	background: color-mix(in srgb, var(--bpsx-k-3ac2be) 8%, transparent);
	color: var(--bpmh-akcent, #2cb8b4);
}

/* --- karta produktu: dwa przyciski ----------------------------------

   4,8 rem odstępu od opisu — Ustalono, że trzeba przycisk „oddalić od
   tekstu”. `flex-wrap` na wypadek wąskiej kolumny: dwa przyciski obok
   siebie potrzebują ok. 38 rem, a kolumna tekstu ma dokładnie tyle
   w minimum siatki. */
.bpsx-produkt__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-top: 4.8rem;
}

/* Odstęp jest teraz na pojemniku — zerujemy stary, żeby się nie sumowały. */
.bpsx-produkt__cta {
	margin-top: 0;
}

/* --- kotwica do specyfikacji ----------------------------------------

   Nagłówek jest `position: fixed`, więc bez tego skok kotwicą schowałby
   tytuł tabeli pod pigułką. 16 rem = wysokość nagłówka z zapasem. */
.bpsx-produkt__spec {
	scroll-margin-top: 16rem;
}

/* --- nagłówek specyfikacji mniejszy ---------------------------------

   Zostaje H2 (to nadal główna sekcja podstrony), ale 5 rem obok tytułu
   produktu o tym samym rozmiarze robiło dwa konkurujące ze sobą napisy.
   3,6 rem czyta się jak podtytuł sekcji, którym jest. */
.bpsx-produkt__spec-naglowek {
	font-size: 3.6rem;
	line-height: 4.2rem;
}

/* --- karuzela jako PIERWSZA sekcja podstrony ------------------------

   Na `magazyny-domowe` i `magazyny-komercyjne` sekcja zaczyna stronę,
   więc jej górna wyściółka 10 rem dokładała się do odstępu pod nagłówek.
   Na stronie głównej sekcja ma sąsiadów i 10 rem zostaje bez zmian —
   stąd `:first-child`, a nie zmiana samej `.bpsx-produkty`. */
.entry-content > .bpsx-produkty:first-child {
	padding-top: 4rem;
}

@media (max-width: 767px) {

	.bpsx-produkt__spec-naglowek {
		font-size: 2.8rem;
		line-height: 3.4rem;
	}

	.bpsx-produkt__akcje {
		margin-top: 3.2rem;
	}

	.entry-content > .bpsx-produkty:first-child {
		padding-top: 2.4rem;
	}
}

/* =====================================================================
   RUNDA 11 (2026-08-05)

   UWAGA przy dopisywaniu dalej: te reguły stoją na KOŃCU arkusza,
   więc przy równej wadze wygrywają z wszystkim wyżej. Każda z nich
   dotyczy klasy, która wcześniej w pliku nie występuje — poza
   `.bpsx-produkt__duze`, gdzie to zamierzone (element zmienił się
   z `div` na `button` i potrzebuje resetu).
   ===================================================================== */

/* --- G2: duże zdjęcie jest teraz PRZYCISKIEM -------------------------

   Reset wyglądu przycisku. Geometria (proporcja 4:3, wyściółka, ramka,
   tło) zostaje z reguły wyżej — tu tylko zdejmujemy to, co przeglądarka
   dokłada przyciskom z siebie. */
.bpsx-produkt__duze {
	position: relative;
	width: 100%;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

/* Obwódka skupienia w kolorze marki, nie domyślna niebieska.
   Nie kasujemy jej — bez niej osoba na klawiaturze nie wie, gdzie jest
   (standard nagłówka mobilnego). */
.bpsx-produkt__duze:focus-visible {
	outline: 2px solid var(--bpmh-akcent, #2cb8b4);
	outline-offset: 2px;
}

/* Znak, że w zdjęcie da się kliknąć. Bez niego powiększanie jest
   funkcją, o której nikt się nie dowie. Lupa jest rysunkiem tła
   elementu `::before`, więc nie trafia do czytnika ekranu — przycisk
   ma własną nazwę w `aria-label`. */
.bpsx-produkt__lupa {
	position: absolute;
	right: 1.6rem;
	bottom: 1.6rem;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--bpsx-k-06090f) 55%, transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.2rem 2.2rem;
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.bpsx-produkt__duze:hover .bpsx-produkt__lupa,
.bpsx-produkt__duze:focus-visible .bpsx-produkt__lupa {
	opacity: 1;
}

/* Na dotyku nie ma najechania kursorem, więc lupa musi być widoczna
   od razu — inaczej na telefonie nikt nie odkryje powiększania. */
@media (hover: none) {

	.bpsx-produkt__lupa {
		opacity: 1;
	}
}

/* --- G2: podgląd na przyciemnionym i rozmytym tle -------------------- */

.bpsx-podglad {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 4rem;
	background: color-mix(in srgb, var(--bpsx-k-06090f) 82%, transparent);
	/* Rozmycie tła — wprost z projektu („przyciemnionym
	   i rozmytym tle"). Przeglądarka bez `backdrop-filter` pokaże
	   samo przyciemnienie, co jest w porządku. */
	-webkit-backdrop-filter: blur(1.2rem);
	backdrop-filter: blur(1.2rem);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bpsx-podglad--otwarty {
	opacity: 1;
}

/* Strona pod spodem nie ma się przewijać, gdy podgląd jest otwarty. */
body.bpsx-podglad-otwarty {
	overflow: hidden;
}

.bpsx-podglad__ramka {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.bpsx-podglad__obraz {
	display: block;
	max-width: 100%;
	/* `vh`, nie procent: rodzic ma wysokość z rozciągnięcia przez flex,
	   a wysokość procentowa względem takiego rodzica nie działa
	   (znana pułapka). */
	max-height: 85vh;
	width: auto;
	height: auto;
	border-radius: var(--bpsx-promien);
	box-shadow: 0 2rem 6rem color-mix(in srgb, var(--bpsx-k-000000) 50%, transparent);
}

.bpsx-podglad__zamknij,
.bpsx-podglad__strzalka {
	flex: 0 0 auto;
	width: 5.6rem;
	height: 5.6rem;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--bpsx-k-ffffff) 35%, transparent);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.4rem 2.4rem;
	cursor: pointer;
	transition: background-color 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bpsx-podglad__zamknij:hover,
.bpsx-podglad__strzalka:hover {
	background-color: color-mix(in srgb, var(--bpsx-k-ffffff) 24%, transparent);
}

.bpsx-podglad__zamknij:focus-visible,
.bpsx-podglad__strzalka:focus-visible {
	outline: 2px solid var(--bpmh-akcent, #2cb8b4);
	outline-offset: 2px;
}

/* Ikony w `data:` URI — APOSTROFY w środku, nie cudzysłowy: cudzysłów
   kończyłby `url("…")` w połowie rysunku i przeglądarka po cichu
   wyrzuciłaby całą regułę (pułapka z wydania 029). */
.bpsx-podglad__zamknij {
	position: absolute;
	top: 2.4rem;
	right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.bpsx-podglad__strzalka--lewo {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}

.bpsx-podglad__strzalka--prawo {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

.bpsx-podglad__licznik {
	position: absolute;
	bottom: 2.4rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-size: 1.5rem;
	color: color-mix(in srgb, var(--bpsx-k-ffffff) 75%, transparent);
}

@media (max-width: 767px) {

	.bpsx-podglad {
		gap: 0.8rem;
		padding: 1.6rem;
	}

	.bpsx-podglad__zamknij,
	.bpsx-podglad__strzalka {
		width: 4.4rem;
		height: 4.4rem;
		background-size: 2rem 2rem;
	}

	.bpsx-podglad__zamknij {
		top: 1.2rem;
		right: 1.2rem;
	}
}

/* --- C2: kafle „Wsparcie i serwis" klikalne w całości ----------------

   Link siedzi w nagłówku kafla (zwykły link w bloku, więc zmienia się
   adres normalną edycją), a `::after` rozciąga jego pole kliknięcia
   na cały kafel. Alternatywą było owinięcie kafla linkiem w migracji —
   ale wtedy adres wyszedłby poza zasięg edytora, a zagnieżdżony blok
   Kadence w linku zgłasza „blok zawiera nieoczekiwaną treść".

   Kafel musi mieć `position: relative`, inaczej `inset: 0` odniosłoby
   się do pierwszego pozycjonowanego przodka, czyli do całej sekcji. */
.bpsx-k-wsparcie .bpsx-k-karta > .kt-inside-inner-col {
	position: relative;
}

.bpsx-k-wsparcie .bpsx-k-karta h3 a {
	color: inherit;
	text-decoration: none;
}

.bpsx-k-wsparcie .bpsx-k-karta h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 1rem;
}

/* Cały kafel reaguje na kursor — bez tego klikalna jest cała
   powierzchnia, ale nic tego nie zapowiada. */
.bpsx-k-wsparcie .bpsx-k-karta > .kt-inside-inner-col:hover {
	border-color: var(--bpmh-akcent, #2cb8b4);
	box-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--bpsx-k-2cb8b4) 18%, transparent);
}

.bpsx-k-wsparcie .bpsx-k-karta > .kt-inside-inner-col {
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.bpsx-k-wsparcie .bpsx-k-karta h3 a:focus-visible::after {
	outline: 2px solid var(--bpmh-akcent, #2cb8b4);
	outline-offset: 2px;
}

/* --- E1: karuzela jako pierwsza sekcja podstrony ---------------------

   Wartość zmniejszona z 4 rem na 1,6 rem . Osobna sprawa: do tej rundy ta reguła NIE TRAFIAŁA W NIC,
   bo `wpautop` wstawiał `<br>` przed sekcją i to on był pierwszym
   dzieckiem. Poprawka w `BPSX_Szablony::tresc()` sprawia, że selektor
   `:first-child` w ogóle zaczyna działać. */
.entry-content > .bpsx-produkty:first-child {
	padding-top: 1.6rem;
}

@media (max-width: 767px) {

	.entry-content > .bpsx-produkty:first-child {
		padding-top: 0.8rem;
	}
}

/* =====================================================================
   SEKCJA KONTAKTOWA (2026-08-05)

   Odwzorowanie sekcji zbudowanej ręcznie w edytorze.
   Wyściółka 10 rem góra i dół — wprost z jego wersji.

   Formularz w karcie po prawej to TEN SAM formularz co w oknie
   „Zapytaj o ofertę". Jego wygląd (pola, etykiety wjeżdżające w ramkę,
   przycisk) daje arkusz nagłówka na klasach `.bpmh-pole`
   i `.bpmh-modal__wyslij` — te nie są zagnieżdżone pod `.bpmh-modal`,
   więc działają też tutaj. NIE POWTARZAMY ich tu: dwa opisy tego samego
   pola rozjechałyby się przy pierwszej poprawce w oknie.
   ===================================================================== */

.bpsx-kontakt {
	padding: 10rem 0;
	background-color: var(--bpsx-k-ffffff);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bpsx-kontakt__uklad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6.4rem;
	align-items: center;
}

.bpsx-kontakt__tresc .bpsx-naglowek {
	margin-bottom: 2.4rem;
}

.bpsx-kontakt__tresc .bpsx-lead {
	max-width: 52rem;
	margin: 0 0 4rem;
}

/* --- dane kontaktowe ------------------------------------------------ */

.bpsx-kontakt__dane {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpsx-kontakt__dane li {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}

.bpsx-kontakt__dane a {
	font-size: 2rem;
	line-height: 2.6rem;
	font-weight: 600;
	color: var(--bpsx-czern);
	text-decoration: none;
	transition: color 0.18s ease;
}

.bpsx-kontakt__dane a:hover,
.bpsx-kontakt__dane a:focus-visible {
	color: var(--bpmh-akcent, #2cb8b4);
}

/* Ikona w turkusowym kółku — ten sam język co kafle w „Dlaczego Sluxer".
   Kółko ma stały rozmiar, więc `flex: 0 0 auto`: bez tego dłuższy numer
   ściskałby je w owal. */
.bpsx-kontakt__ikona {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bpsx-k-2cb8b4) 12%, transparent);
	color: var(--bpmh-akcent, #2cb8b4);
}

/* --- karta z formularzem -------------------------------------------- */

/* Biała karta na tle grafiki. Bez niej pola formularza zlewałyby się
   z jasnym tłem — a to tło jest jasne z założenia (Widać to na
   biało-turkusową grafikę, nie ciemny render jak poprzednio). */
.bpsx-kontakt__karta {
	padding: 4rem;
	border: 1px solid var(--bpsx-ramka-2, #e2e8f0);
	border-radius: 2rem;
	background: var(--bpsx-k-ffffff);
	box-shadow: 0 2.4rem 6rem color-mix(in srgb, var(--bpsx-k-06090f) 8%, transparent);
}

.bpsx-kontakt__karta-tytul {
	margin: 0 0 0.8rem;
	line-height: 3.4rem;
	font-weight: 600;
	color: var(--bpsx-czern);
}

.bpsx-kontakt__karta-podpis {
	margin: 0 0 3.2rem;
	font-size: 1.7rem;
	line-height: 2.55rem;
	color: var(--bpsx-tekst-2, #475569);
}

/* Przycisk wysyłki dziedziczy wygląd z arkusza nagłówka, ale tam stoi
   w oknie o stałej szerokości. W karcie ma się rozciągnąć na całą. */
.bpsx-kontakt__karta .bpmh-modal__wyslij {
	width: 100%;
}

@media (max-width: 1024px) {

	.bpsx-kontakt__uklad {
		grid-template-columns: 1fr;
		gap: 4.8rem;
	}

	.bpsx-kontakt__tresc .bpsx-lead {
		max-width: none;
	}
}

@media (max-width: 767px) {

	.bpsx-kontakt {
		padding: 6.4rem 0;
	}

	.bpsx-kontakt__karta {
		padding: 2.4rem;
	}

	.bpsx-kontakt__karta-tytul {
		line-height: 3rem;
	}

	.bpsx-kontakt__dane a {
		font-size: 1.8rem;
	}

	.bpsx-kontakt__ikona {
		width: 4rem;
		height: 4rem;
	}
}

/* --- sekcja kontaktowa: poprawki -------- */

/* 1. LEWA KOLUMNA RÓWNO Z GÓRNĄ KRAWĘDZIĄ KARTY.

   Było `align-items: center`, więc krótsza kolumna tekstu wisiała
   na środku wysokości karty. Zmierzone: karta zaczynała się na 3626,
   a nagłówek na 3764 — 138 px niżej. `start` zrównuje obie kolumny
   u góry. */
.bpsx-kontakt__uklad {
	align-items: start;
}

/* 2. IKONY RÓWNO Z LEWĄ KRAWĘDZIĄ TEKSTU.

   Lista miała `padding-left: 34px` z motywu — nasze `padding: 0`
   w regule `.bpsx-kontakt__dane` (waga 0,1,0) przegrywało z regułą
   motywu na `ul` w treści wpisu, która ma wagę wyższą.

   Stąd selektor z dwiema klasami (0,2,0) zamiast `!important`:
   wygrywa wagą, a nie siłą, więc dalej da się go nadpisać czymś
   bardziej szczegółowym.

   Zmierzone przed: nagłówek i akapit na 20 px, ikona na 54 px. */
.bpsx-kontakt .bpsx-kontakt__dane {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

.bpsx-kontakt .bpsx-kontakt__dane li {
	padding-left: 0;
}

/* 3. BIAŁA NAKŁADKA 70% NA TŁO.

   Tło ma być wyraźnie jaśniejsze. Nakładka jako `::before`,
   a NIE jako drugi gradient w `background-image` — adres tła wchodzi
   stylem elementu (inline), a lazyload podmienia tam wartość w locie
   i zjadłby dołożony gradient.

   Treść dostaje `position: relative`, inaczej schowałaby się pod
   nakładką: oba elementy leżą w tym samym kontekście nakładania,
   a przy równym `z-index` wygrywa ten późniejszy w kodzie. */
.bpsx-kontakt {
	position: relative;
	isolation: isolate;
}

.bpsx-kontakt::before {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--bpsx-k-ffffff) 70%, transparent);
	pointer-events: none;
}

.bpsx-kontakt > .bpsx-kontener {
	position: relative;
}

/* =====================================================================
   RUNDA 12 (2026-08-06)

   Te reguły stoją na SAMYM KOŃCU arkusza — przy równej wadze wygrywają
   z wszystkim wyżej. Dopisując dalej, dopisuj pod spodem.
   ===================================================================== */

/* --- duże zdjęcie produktu: po najechaniu ma się nie dziać nic -------

   Objaw: „to dziwne, kolorowe tło ani ikonka
   lupki". Turkusowe tło NIE BYŁO nasze — `.bpsx-produkt__duze` jest
   `<button>`, a motyw maluje każdy przycisk kolorem akcentu na `:hover`.
   Reguła geometrii wyżej ustawia `background` tylko w stanie spoczynku,
   więc na najechaniu wygrywał motyw.

   `!important` jest tu potrzebne: reguła motywu celuje w `button:hover`
   z wyższą wagą niż nasza pojedyncza klasa.

   Zostaje jedno: kontur w kolorze globalnym — dokładnie tyle, ile
   dopuścił („ewentualnie kontur może się delikatnie podświetlać").
   Obwódka skupienia dla klawiatury (`:focus-visible`) zostaje bez zmian
   — to inna właściwość (`outline`) i inny odbiorca. */
.bpsx-produkt__duze {
	transition: border-color 0.18s ease;
}

.bpsx-produkt__duze:hover,
.bpsx-produkt__duze:focus,
.bpsx-produkt__duze:active {
	background: linear-gradient(180deg, var(--bpsx-k-fbfbfb) 0%, var(--bpsx-k-f2f2f2) 100%) !important;
	color: inherit !important;
	box-shadow: none !important;
	transform: none !important;
}

.bpsx-produkt__duze:hover {
	border-color: var(--bpsx-akcent, #3ac2be) !important;
}

/* Lupa zdjęta z markupu w tym samym wydaniu. Reguła zostaje na wypadek
   strony podanej ze starego cache HTML — inaczej przez kilka minut
   po wydaniu widać by ją było na stałe. */
.bpsx-produkt__lupa {
	display: none !important;
}

/* --- karuzela w trybie statycznym ------------------------------------

   Włącza ją skrypt klasą `jest-statyczna`, gdy wszystkie kafle mieszczą
   się w sekcji (albo gdy kafel jest tylko jeden).

   Objaw bez tego trybu: podstrona z dwoma produktami pokazywała trzy
   kafle — trzeci to był KLON
   dorabiany na potrzeby zapętlenia.

   Klonów nie kasujemy z DOM, tylko chowamy: gdy okno się zwęzi
   i kafle przestaną się mieścić, karuzela wraca bez przebudowy strony. */
.bpsx-produkty.jest-statyczna .bpsx-produkty__tor {
	transform: none !important;
	justify-content: center;
}

.bpsx-produkty.jest-statyczna .bpsx-kafel[aria-hidden="true"] {
	display: none;
}

/* Strzałki i kropki nie mają czego przewijać — zostawione byłyby
   przyciskiem, który nic nie robi. */
.bpsx-produkty.jest-statyczna .bpsx-strzalka,
.bpsx-produkty.jest-statyczna .bpsx-produkty__kropki {
	display: none;
}

/* =====================================================================
   RUNDA 13 (2026-08-07) — GALERIA PRODUKTU: KURSOR I NAJECHANIE

   Te reguły stoją na SAMYM KOŃCU arkusza — przy równej wadze wygrywają
   z wszystkim wyżej. Dopisując dalej, dopisuj pod spodem.

   Trzy rzeczy:

   1. Nad zdjęciem pokazywał się kursor-lupka z plusem. To był
      `cursor: zoom-in` z rundy 11 (linia ~1874). Sama lupa-ikonka
      zeszła w rundzie 12, ale KURSOR został — a to on rzucał się
      w oczy najbardziej. Ma być `pointer`, czyli ta sama łapka
      co na przyciskach i zakładkach. Nic więcej.
   2. Kontur dużego zdjęcia podświetlał się na turkusowo. Runda 12
      zostawiła to świadomie („ewentualnie kontur może się delikatnie
      podświetlać"). To zostaje odwołane — kontur ma zostać szary.
   3. Miniatury miały turkusową ramkę (aktywna i na najechaniu) oraz
      zmieniające się tło. Ramka ma być szara jak przy dużym zdjęciu,
      tło stałe. Aktywną miniaturę oznacza CIEMNIEJSZY SZARY
      (`--bpsx-ramka` #cbd5e1 zamiast `--bpsx-ramka-2` #e2e8f0) —
      bez tego nie widać, które zdjęcie jest
      na górze.

   `!important` jest potrzebne wszędzie tam, gdzie po drugiej stronie
   stoi motyw: oba elementy galerii to `<button>`, a Kadence maluje
   każdy przycisk kolorem akcentu na `:hover`, z wagą wyższą niż nasza
   pojedyncza klasa. To ta sama pułapka co w rundzie 12.

   Obwódka skupienia (`:focus-visible`) ZOSTAJE turkusowa i zostaje
   w kolorze akcentu. To inna właściwość (`outline`, nie `border`)
   i inny odbiorca — pokazuje się wyłącznie przy chodzeniu po stronie
   klawiaturą, nigdy po kliknięciu myszą. Standard z sekcji 8i
   klawiaturą; najechanie kursorem jej nie dotyczy.
   ===================================================================== */

/* --- 1 + 2: duże zdjęcie --------------------------------------------- */

.bpsx-produkt__duze {
	/* Łapka, nie lupa. Dokładnie jak na przyciskach i zakładkach. */
	cursor: pointer;
}

/* Po najechaniu nie zmienia się NIC: ani tło, ani kontur, ani cień.
   `border-color` dopisany do listy z rundy 12 — wcześniej był tu
   celowo pominięty, żeby kontur mógł się podświetlać. */
.bpsx-produkt__duze:hover,
.bpsx-produkt__duze:focus,
.bpsx-produkt__duze:active {
	border-color: var(--bpsx-ramka-2) !important;
	background: linear-gradient(180deg, var(--bpsx-k-fbfbfb) 0%, var(--bpsx-k-f2f2f2) 100%) !important;
	color: inherit !important;
	box-shadow: none !important;
	transform: none !important;
}

/* --- 3: miniatury ---------------------------------------------------- */

.bpsx-produkt__miniatura {
	cursor: pointer;
}

/* Stan spoczynku i najechanie wyglądają tak samo. Tło białe jak było —
   wpisane z `!important`, bo inaczej motyw zamaluje je akcentem. */
.bpsx-produkt__miniatura,
.bpsx-produkt__miniatura:hover,
.bpsx-produkt__miniatura:focus,
.bpsx-produkt__miniatura:active {
	border-color: var(--bpsx-ramka-2) !important;
	background: var(--bpsx-k-ffffff) !important;
	color: inherit !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Jedyne odstępstwo: miniatura, której zdjęcie jest teraz na górze.
   Ciemniejszy szary, ten sam odcień co ramki w reszcie strony.
   Reguła stoi PO regule najechania, więc aktywna miniatura zostaje
   ciemniejsza także wtedy, gdy kursor po niej przejeżdża. */
.bpsx-produkt__miniatura.jest-aktywna,
.bpsx-produkt__miniatura.jest-aktywna:hover,
.bpsx-produkt__miniatura.jest-aktywna:focus {
	border-color: var(--bpsx-ramka) !important;
}

/* =====================================================================
   RUNDA 14 (2026-08-07) — PODGLĄD ZDJĘCIA I BIAŁE TŁO WYCIĘTYCH ZDJĘĆ

   Te reguły stoją na SAMYM KOŃCU arkusza — przy równej wadze wygrywają
   z wszystkim wyżej. Dopisując dalej, dopisuj pod spodem.

   Trzy poprawki.
   ===================================================================== */

/* --- 1: kontur, który zostawał po zamknięciu podglądu ----------------

   Po zamknięciu podglądu skrypt oddaje ognisko na zdjęcie, z którego
   podgląd wyszedł. Przeglądarka traktuje `focus()` wywołany ze skryptu
   jak przejście klawiaturą i zapala `:focus-visible` — nawet gdy ktoś
   klikał myszą. Stąd „minimalny kontur", który pojawiał się po zamknięciu.

   Klasę `bpsx-bez-obwodki` nadaje skrypt WYŁĄCZNIE wtedy, gdy ostatnią
   obsługą była mysz, i zdejmuje ją, gdy element traci ognisko.
   Przy chodzeniu Tabem obwódka działa jak dotąd — bez niej osoba
   bez myszy nie wie, gdzie jest. */
.bpsx-produkt__duze.bpsx-bez-obwodki:focus,
.bpsx-produkt__duze.bpsx-bez-obwodki:focus-visible {
	outline: none !important;
}

/* --- 2: ikony w podglądzie znikały ------------------------------------

   Objaw: „w prawym górnym rogu ikonka zamknięcia to jakaś
   kropka". W jego przeglądarce był tam pełny turkusowy krążek bez krzyżyka.

   Przyczyna to DOKŁADNIE ta sama pułapka co przy zdjęciu produktu
   , tylko groźniejsza w skutkach. Motyw ma regułę
   `button:hover, button:focus, button:active { background: <akcent> }`.
   `background` to SKRÓT — ustawia wszystkie własności tła naraz, więc
   kasuje też `background-image`, czyli nasz rysunek krzyżyka i strzałek.

   Krążek zamknięcia dostaje ognisko od razu po otwarciu podglądu
   (tak ma być: czytnik ekranu i klawiatura muszą wiedzieć, gdzie są),
   więc `:focus` łapał go ZAWSZE — a strzałki dopiero po najechaniu.

   Dlatego tło wpisujemy tym samym SKRÓTEM, z `!important`, w komplecie
   dla wszystkich stanów. Sam `background-image: … !important` nie
   wystarczy — skrót motywu wyzerowałby jeszcze położenie, powtarzanie
   i rozmiar, i krzyżyk wyszedłby rozdmuchany w lewym górnym rogu.

   Rysunki w `data:` URI mają APOSTROFY w środku, nie cudzysłowy —
   cudzysłów kończyłby `url("…")` w połowie ikony (pułapka z wydania 029). */
.bpsx-podglad__zamknij,
.bpsx-podglad__zamknij:hover,
.bpsx-podglad__zamknij:focus,
.bpsx-podglad__zamknij:focus-visible,
.bpsx-podglad__zamknij:active {
	background: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / 2.4rem 2.4rem !important;
}

.bpsx-podglad__strzalka--lewo,
.bpsx-podglad__strzalka--lewo:hover,
.bpsx-podglad__strzalka--lewo:focus,
.bpsx-podglad__strzalka--lewo:focus-visible,
.bpsx-podglad__strzalka--lewo:active {
	background: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") no-repeat center / 2.4rem 2.4rem !important;
}

.bpsx-podglad__strzalka--prawo,
.bpsx-podglad__strzalka--prawo:hover,
.bpsx-podglad__strzalka--prawo:focus,
.bpsx-podglad__strzalka--prawo:focus-visible,
.bpsx-podglad__strzalka--prawo:active {
	background: color-mix(in srgb, var(--bpsx-k-ffffff) 10%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / 2.4rem 2.4rem !important;
}

/* Delikatne rozjaśnienie po najechaniu — samo tło, ikona nietknięta.
   Stoi PO skrótach wyżej, więc wygrywa dla tej jednej własności. */
.bpsx-podglad__zamknij:hover,
.bpsx-podglad__strzalka:hover {
	background-color: color-mix(in srgb, var(--bpsx-k-ffffff) 24%, transparent) !important;
}

/* Ramka też jest w zasięgu reguły motywu na `button:hover`. */
.bpsx-podglad__zamknij:hover,
.bpsx-podglad__zamknij:focus,
.bpsx-podglad__zamknij:active,
.bpsx-podglad__strzalka:hover,
.bpsx-podglad__strzalka:focus,
.bpsx-podglad__strzalka:active {
	border-color: color-mix(in srgb, var(--bpsx-k-ffffff) 35%, transparent) !important;
	box-shadow: none !important;
	transform: none !important;
}

/* --- 3: białe tło pod wyciętymi zdjęciami ----------------------------

   Zasada obowiązuje TYLKO wewnątrz podstron
   produktowych: „jeżeli zdjęcie ma tło, to leci w oryginale, a jak jest
   wycięte, dodajemy mu sztuczne białe tło w miejsce wyciętego".

   Nie ma tu żadnego wykrywania przezroczystości i nie jest potrzebne:
   białe tło pod zdjęciem NIEPRZEZROCZYSTYM jest niewidoczne, bo zasłania
   je samo zdjęcie. Reguła realizuje więc obie gałęzie naraz,
   a nie wymaga listy „które zdjęcie jest wycięte" — takiej listy nikt
   by nie utrzymał przy podmianie zdjęcia przez klienta.

   Zdjęcia produktów w bibliotece SĄ wycięte — sprawdzone kanałem alfa
   2026-08-07 na `Sluxer_Home_16_kWh_2.png` (19% pikseli całkiem
   przezroczystych) i `_3.png` (58%). Na przyciemnionym tle podglądu
   przezroczystość pokazywała ciemne tło zamiast produktu.

   ZAKRES: karta produktu i podgląd z niej otwierany. Karuzela „Nasza
   oferta", kafle mega menu i wszystkie inne miejsca, gdzie te same
   wycięte zdjęcia leżą na kolorowym tle, zostają NIETKNIĘTE — żadna
   z reguł niżej ich nie dotyczy. */

/* Ramka dużego zdjęcia: jednolita biel zamiast delikatnego gradientu.
   Biel siedzi na RAMCE, nie na obrazku: przy `object-fit: contain`
   obrazek nie wypełnia ramki, więc tło na nim samym dałoby biały
   prostokąt wewnątrz szarej ramki — czyli widoczny szew.
   Ta reguła zastępuje gradient z rundy 13. */
.bpsx-produkt__duze,
.bpsx-produkt__duze:hover,
.bpsx-produkt__duze:focus,
.bpsx-produkt__duze:active {
	background: var(--bpsx-k-ffffff) !important;
}

/* Zdjęcie w podglądzie. Tu obrazek wypełnia swoje pudełko co do piksela
   (`width: auto` przy ograniczeniu wysokości), więc biel widać wyłącznie
   tam, gdzie zdjęcie jest wycięte. */
.bpsx-podglad__obraz {
	background: var(--bpsx-k-ffffff);
}

@media (max-width: 767px) {

	/* Mniejsze krążki na telefonie miały mniejszą ikonę. Skróty wyżej
	   są `!important`, więc rozmiar trzeba powtórzyć tak samo. */
	.bpsx-podglad__zamknij,
	.bpsx-podglad__zamknij:hover,
	.bpsx-podglad__zamknij:focus,
	.bpsx-podglad__zamknij:active,
	.bpsx-podglad__strzalka,
	.bpsx-podglad__strzalka:hover,
	.bpsx-podglad__strzalka:focus,
	.bpsx-podglad__strzalka:active {
		background-size: 2rem 2rem !important;
	}
}

/* =====================================================================
   2026-08-19 — WSPÓLNY POCZĄTEK TEKSTU WE WSZYSTKICH SEKCJACH

   Rzędy Kadence w treści strony są wyciągane 3,75 px poza obszar
   treści (`margin: 0 -0.375rem` na pełnej szerokości). Nadmiar i tak
   jest obcinany krawędzią okna — nie widać go nigdzie poza jednym
   miejscem: nagłówki sekcji składanych rzędami zaczynały się 3,75 px
   bardziej z lewej niż nagłówki sekcji pisanych naszym markupem.

   Zerujemy to wyciągnięcie. Zmierzone przed i po: szerokość dokumentu
   bez zmian (brak poziomego paska przewijania), tła pełnej szerokości
   dalej dochodzą do krawędzi okna.

   Ta reguła stoi na końcu arkusza celowo — dotyczy układu, więc ma
   wygrywać z regułami geometrii wyżej.
   ===================================================================== */
.entry-content > .kb-row-layout-wrap {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* =====================================================================
   CECHY PRODUKTU — sekcja pod kartą (2026-08-19)

   Kafle są te same co w sekcji „Dlaczego Sluxer" (`.bpsx-karta`), więc
   tutaj tylko oprawa sekcji. Jasne tło oddziela ją od białej karty
   produktu bez rysowania kreski.
   ===================================================================== */
.bpsx-cechy {
	padding: 9rem 0 10rem;
	background: var(--bpsx-jasne, #f1f5f9);
}

/* Tabela parametrów stojąca jako osobna sekcja POD cechami (EMS).
   Odstęp robi wyściółka sekcji, więc marginesu z wariantu wewnątrz
   karty tu nie chcemy — inaczej dokłada się do wyściółki i robi dziurę. */
.bpsx-produkt--sama-spec {
	padding: 9rem 0 10rem;
}

.bpsx-produkt--sama-spec .bpsx-produkt__spec {
	margin-top: 0;
}

/* Nagłówek sekcji jest o stopień mniejszy niż nazwa produktu nad nim
   — kolejność ważności musi być widoczna bez czytania. */
.bpsx-cechy .bpsx-naglowek {
	line-height: 4.8rem;
}

.bpsx-cechy .bpsx-lead {
	margin-bottom: 4.8rem;
}

/*
 * Oddech nad kaflami. Odstęp kładziemy na SIATCE, nie na nagłówku —
 * dzięki temu jest taki sam niezależnie od tego, czy sekcja ma zdanie
 * wprowadzające, czy nie. Sąsiadujące marginesy się zlewają, więc
 * z lead-em wychodzi ta sama wartość, a nie suma dwóch.
 *
 * Sam nagłówek ma margines 1,2 rem i przy sekcji bez lead-u kafle
 * stały praktycznie pod napisem.
 */
.bpsx-cechy .bpsx-karty {
	margin-top: 6rem;
}

@media (max-width: 767px) {
	.bpsx-cechy .bpsx-karty {
		margin-top: 3.6rem;
	}
}

@media (max-width: 767px) {
	.bpsx-cechy {
		padding: 5.6rem 0 6.4rem;
	}

	.bpsx-cechy .bpsx-naglowek {
		line-height: 3.6rem;
	}
}