/*
 * Stalesia — arkusz motywu.
 * Kolory, promienie i cienie pochodzą z theme.json; tu tylko komponenty,
 * których nie da się złożyć z bloków rdzenia.
 */

:root {
	--st-radius: 10px;
	--st-radius-btn: 12px;
	--st-radius-pill: 999px;
	--st-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--st-shadow-md: 0 3px 6px rgba(0, 0, 0, .16);
	--st-shadow-lg: 0 10px 40px rgba(0, 0, 0, .15);
	/* Krój danych = krój nagłówków (DM Sans). Ma cyfry tabelaryczne i tę samą
	   szerokość znaków w każdej wadze, więc kolumny wymiarów trzymają pion. */
	--st-data: var(--wp--preset--font-family--heading);

	/* Odstępy komponentów. Cztery stopnie zamiast dwunastu wartości „na oko”. */
	--st-gap-xs: 0.5rem;
	--st-gap-sm: 0.75rem;
	--st-gap-md: 1.25rem;
	--st-gap-lg: 2rem;
	--st-gap-xl: 3rem;
}

/* Bez tego `height: 100%` razem z paddingiem rozpycha karty poza komórkę siatki
   i sąsiednie sekcje na siebie nachodzą. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Typografia i rytm
   Skala i kolory siedzą w theme.json; tu jest to, czego theme.json nie umie:
   miara wiersza, marginesy zależne od kontekstu i strojenie kroju danych.
   ========================================================================== */

/* Krój danych: cyfry tabelaryczne i lekko ściągnięty odstęp, żeby ciągi
   w rodzaju „114,3 × 3,05 mm” nie rozjeżdżały kolumn. */
.stalesia-list__cell--attr,
.stalesia-list__cell--price,
.stalesia-list__sku,
.stalesia-specs dd,
.stalesia-axis__value,
.stalesia-axis__price,
.stalesia-tile__grade,
.stalesia-tile__price,
.stalesia-chip,
.stalesia-count,
.stalesia-stat__value,
.stalesia-gradecard__name,
.stalesia-gradecard__count,
.stalesia-cat__count,
.stalesia-grade__count,
.stalesia-pagination__count,
.stalesia-pagination__links .page-numbers,
.stalesia-finder select,
.stalesia-filter__select,
.stalesia-mainnav__count {
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.005em;
}

/* Etykiety wersalikami — jedna wartość odstępu w całym motywie. */
.stalesia-eyebrow,
.stalesia-footer__label,
.stalesia-grades__title,
.stalesia-toc__title,
.stalesia-finder__label,
.stalesia-grade__eyebrow,
.stalesia-list__head .stalesia-list__cell {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* Nagłówki: pierwszy w kontenerze bez marginesu górnego, kolejne z odstępem
   proporcjonalnym do własnego stopnia. */
.stalesia-main :is(h1, h2, h3, h4) {
	text-wrap: balance;
}

.stalesia-main :is(h1, h2, h3, h4):first-child {
	margin-block-start: 0;
}

/* Treść czytana ciągiem — artykuł, strona, opis kategorii. */
.stalesia-prose,
.stalesia-lede,
.wp-block-term-description {
	max-width: 68ch;
}

/* W prozie rytm ustawiamy sami, ale wyłącznie górnym marginesem — dolny
   zostaje na zerze, inaczej sumuje się z blockGap kolejnego bloku. */
.stalesia-prose > * {
	max-width: 68ch;
	margin-block: 0;
}

.stalesia-prose > * + * {
	margin-block-start: 1.15em;
}

.stalesia-prose :is(p, ul, ol) {
	font-size: 1.0625rem;
	line-height: 1.72;
}

.stalesia-prose :is(ul, ol) {
	padding-inline-start: 1.35em;
}

.stalesia-prose li + li {
	margin-block-start: 0.45em;
}

.stalesia-prose > :is(h2, h3, h4) {
	margin-block-start: 2em;
}

.stalesia-prose > h2 {
	margin-block-start: 2.4em;
}

.stalesia-prose > :is(h2, h3, h4) + * {
	margin-block-start: 0.6em;
}

.stalesia-prose > :is(figure, .wp-block-image, .wp-block-table) {
	margin-block-start: 2em;
}

.stalesia-prose strong {
	font-weight: 600;
}

.stalesia-lede {
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* Odstępy między sekcjami strony — jedna reguła zamiast marginesów
   rozsypanych po komponentach. */
/* Rytm pionowy w przepływie bloków należy do blockGap z theme.json.
   Komponenty ustawiają wyłącznie margin-block-start — dolny margines rdzeń
   zeruje, a ustawianie go tutaj sumowałoby się z blockGap następnego bloku
   i dawało przypadkowe, podwojone odstępy. */
.stalesia-section-title {
	margin-block-start: var(--wp--preset--spacing--60);
}

.stalesia-section-title + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- układ ---------- */
.stalesia-main {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

.stalesia-eyebrow {
	color: var(--wp--preset--color--accent);
	margin-block-end: .5rem;
}

/* ---------- nagłówek i stopka ---------- */
.stalesia-utility {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: .625rem;
	line-height: 1.5;
}

.stalesia-utility p {
	margin: 0;
}

.stalesia-masthead {
	padding-block: 1.125rem;
}

.stalesia-brand {
	gap: .75rem;
	align-items: center;
}

.stalesia-nav {
	border-block: 1px solid var(--wp--preset--color--line);
	padding-block: .375rem;
}

.stalesia-nav .wp-block-navigation-item__content {
	padding: .5rem .875rem;
	border-radius: var(--st-radius-pill);
}

.stalesia-nav .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.stalesia-search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius-btn);
	padding: 4px;
}

.stalesia-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding-inline: .75rem;
}

.stalesia-search .wp-block-search__button {
	border-radius: 8px;
	border: 0;
}

/* Wyszukiwarka z podpowiedziami (FiboSearch) w nagłówku. Wtyczka wnosi własny
   styl „pirx"; sprowadzamy go do pola motywu — to samo tło, obramowanie i
   zaokrąglenie co przy bloku wyszukiwania, żeby nagłówek wyglądał tak jak dotąd.
   Szerokość: wtyczka wpisuje w <head> `max-width:600px`, a nagłówek ma własną. */
.stalesia-search--fibo .dgwt-wcas-search-wrapp {
	max-width: none;
	width: 100%;
}

.stalesia-search--fibo .dgwt-wcas-sf-wrapp {
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius-btn);
	padding: 4px;
}

.stalesia-search--fibo .dgwt-wcas-search-input {
	border: 0;
	background: transparent;
	padding-inline: .75rem;
	min-height: 40px;
	font-size: 16px; /* poniżej 16 px iOS powiększa stronę przy wejściu w pole */
}

.stalesia-search--fibo .dgwt-wcas-search-submit {
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 8px;
	min-width: 44px;
}

.stalesia-search--fibo .dgwt-wcas-search-submit:hover,
.stalesia-search--fibo .dgwt-wcas-search-submit:focus-visible {
	background: var(--wp--preset--color--accent-hover);
}

/* Wtyczka pozycjonuje przycisk z lupą sztywnym `top`, policzonym dla własnej
   wysokości pola — w naszym polu (wyższym o obramowanie i wyściółkę) ikona
   siadała przy dolnej krawędzi. Kotwiczymy ją do środka pola.
   Selektor musi być co najmniej tak szczegółowy jak `.dgwt-wcas-style-pirx
   .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit` ze stylu wtyczki. */
.stalesia-search--fibo .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.stalesia-search--fibo .dgwt-wcas-ico-magnifier path {
	fill: #fff;
}

/* Lupa po PRAWEJ stronie pola (decyzja właściciela 24.09.2026). Styl „pirx" trzyma
   ją po lewej, dopóki pole jest puste, a po wpisaniu przestawia na prawo (`right: 28px`)
   i dopiero wtedy przyjmuje klik. Ustawiamy ją na prawo na stałe, w tym samym miejscu
   co po wpisaniu — nic nie skacze przy pierwszym znaku. Klikalność zostaje jak we
   wtyczce: pusta lupa przepuszcza klik do pola (wtyczka i tak nie wysyła pustego
   zapytania), po wpisaniu klik wysyła wyszukiwanie.
   Wyściółka pola: z lewej jak po wpisaniu (24 px), z prawej miejsce na lupę; po wpisaniu
   dochodzi „×" (wtyczka stawia go tuż na lewo od lupy), więc tekst kończy się przed nim.
   Selektor o klasę mocniejszy od reguł „pirx" (`…search-filled …`), bo te stoją
   w arkuszu wtyczki z tą samą szczegółowością. */
.stalesia-search--fibo .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: auto;
	right: 28px;
}

.stalesia-search--fibo .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding-left: 24px;
	padding-right: 64px;
}

.stalesia-search--fibo .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding-right: 104px;
}

/* Lupa także w nakładce na telefonie (decyzja właściciela 25.09.2026). Nakładka to
   osobny formularz doklejany przez wtyczkę do <body>, poza `.stalesia-search--fibo`,
   a wtyczka chowa w niej przycisk (`.dgwt-wcas-om-bar … search-submit {display:none}`)
   i stawia „×" przy samej krawędzi (`has-submit-off … preloader {right:0 !important}`).
   Lupa po prawej, jak w polu w nagłówku; pusta przepuszcza dotknięcie do pola,
   po wpisaniu wysyła formularz — tak samo jak Enter na klawiaturze. */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	display: flex;
	left: auto;
	right: 6px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit path {
	fill: #111;
}

html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding-right: 46px;
}

html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding-right: 80px;
}

html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp.dgwt-wcas-has-submit-off .dgwt-wcas-preloader {
	right: 32px !important;
}

.stalesia-footer__label {
	color: var(--wp--preset--color--muted);
	margin-block: 1.5rem 0;
}

.stalesia-footer__label + * {
	margin-block-start: .625rem;
}

.stalesia-hours {
	color: var(--wp--preset--color--muted);
}

.stalesia-footer__nav .wp-block-navigation-item__content,
.stalesia-footer__pages a {
	padding-block: .25rem;
}

.stalesia-footer__cookies button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	cursor: pointer;
}

/* Wygląda jak sąsiednie odnośniki (theme.json → elements.link), choć to przycisk — otwiera okno, nie adres. */
.stalesia-footer__cookies button:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

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

/* ---------- okruszki ---------- */
.stalesia-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.stalesia-crumbs__sep {
	color: var(--wp--preset--color--line-strong);
}

/* ---------- przyciski ---------- */
.stalesia-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .5rem 1rem;
	border-radius: var(--st-radius-btn);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
}

.stalesia-btn--buy {
	background: var(--wp--preset--color--buy);
	color: var(--wp--preset--color--base);
}

.stalesia-btn--buy:hover {
	background: color-mix(in srgb, var(--wp--preset--color--buy) 88%, #000);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.stalesia-btn--ghost {
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.stalesia-btn--ghost:hover {
	background: var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* ---------- dostępność magazynowa ---------- */
.stalesia-stock {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	white-space: nowrap;
}

.stalesia-stock__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

.stalesia-stock.is-in {
	color: var(--wp--preset--color--buy);
}

.stalesia-stock.is-in .stalesia-stock__dot {
	background: var(--wp--preset--color--buy);
}

.stalesia-stock.is-back {
	color: var(--wp--preset--color--warn);
}

.stalesia-stock.is-back .stalesia-stock__dot {
	border: 2px solid var(--wp--preset--color--warn);
}

.stalesia-stock.is-out {
	color: var(--wp--preset--color--muted);
}

.stalesia-stock.is-out .stalesia-stock__dot {
	background: var(--wp--preset--color--line-strong);
}

/* ---------- przełącznik widoku ---------- */
.stalesia-catalog__bar {
	display: flex;
	justify-content: flex-end;
}

.stalesia-viewswitch {
	display: inline-flex;
	gap: 3px;
	padding: 3px;
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--st-radius);
}

.stalesia-viewswitch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 40px;
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
}

.stalesia-viewswitch__btn.is-active {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	box-shadow: var(--st-shadow-sm);
}

/* ---------- lista katalogu ---------- */
/* Każdy wiersz jest osobną siatką, więc żadna kolumna nie może zależeć od
   własnej treści — `minmax(110px, auto)` przy cenie dawało 96 px w wierszu bez
   ceny, 162 px przy jednej i 203 px przy widełkach, a wraz z nią przesuwały się
   wszystkie kolumny obok. Tabela nie trzymała pionu. Teraz szerokość zależy
   wyłącznie od liczby kolumn atrybutów, a widełki ceny łamią się na dwie linie.

   Szerokości siedzą w zmiennych, bo trzeba je znać w dwóch miejscach:
   w siatce wiersza i w minimalnej szerokości listy. Bez tej drugiej lista
   przy pięciu kolumnach atrybutów była po prostu **przycinana** — `overflow:
   hidden` ucinał kolumnę z przyciskiem i nikt nie widział, że coś zniknęło.
   Teraz nadmiar da się przewinąć w poziomie, a wartość minimalna trzyma
   nagłówek i wiersze w jednej linii kolumn na całej przewijanej szerokości. */
.stalesia-list {
	--st-col-name: 200px;
	--st-col-attr: 92px;
	--st-col-stock: 112px;
	--st-col-price: 128px;
	--st-col-action: 124px;
	--st-list-min: calc(
		var(--st-col-name)
		+ var(--st-attr-cols, 4) * var(--st-col-attr)
		+ var(--st-col-stock) + var(--st-col-price) + var(--st-col-action)
	);

	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
}

.stalesia-list__head,
.stalesia-list__row {
	display: grid;
	grid-template-columns:
		minmax(var(--st-col-name), 2.2fr)
		repeat(var(--st-attr-cols, 4), minmax(var(--st-col-attr), 1fr))
		var(--st-col-stock)
		var(--st-col-price)
		var(--st-col-action);
	min-width: var(--st-list-min);
	align-items: center;
	gap: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.stalesia-list__row:last-child {
	border-bottom: 0;
}

.stalesia-list__head {
	background: var(--wp--preset--color--surface-alt);
	border-bottom: 1px solid var(--wp--preset--color--line-strong);
}

.stalesia-list__cell {
	padding: .9rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

/* Kolumny wymiarowe są wąskie, więc oddają odstęp: przy 2 × 1 rem na treść
   zostawało 60 px i „114,3 mm" łamało się na dwie linie. */
.stalesia-list__cell--attr {
	padding-inline: .75rem;
}

.stalesia-list__head .stalesia-list__cell {
	padding-block: .8rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	/* Nazwy atrybutów bywają dłuższe niż kolumna („Powierzchnia" w 92 px);
	   dzielenie wyrazu jest czytelniejsze niż wejście na sąsiednią kolumnę. */
	hyphens: auto;
}

.stalesia-list__cell--price {
	text-align: right;
	font-weight: 700;
}

.stalesia-list__cell--action {
	padding-inline-end: 1rem;
}

.stalesia-list__cell--action .stalesia-btn {
	width: 100%;
}

.stalesia-list__link {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--sm);
	display: block;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-list__link:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.stalesia-list__sku {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
	line-height: 1.4;
	margin-block-start: .25rem;
}

.stalesia-list .price {
	font-family: var(--st-data);
}

/* ---------- kafelki ---------- */
.stalesia-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--st-gap-md);
}

.stalesia-tile {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Tło białe, nie szare: zdjęcia produktów mają różne proporcje i bywają węższe
   od kafelka. Na szarym tle było widać, że obrazek „nie dochodzi" do krawędzi;
   na białym wygląda jak część zdjęcia — sami producenci fotografują na białym. */
.stalesia-tile__media {
	display: block;
	background: var(--wp--preset--color--base);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.stalesia-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.stalesia-tile__body {
	padding: 1.125rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	flex-grow: 1;
}

.stalesia-tile__grade {
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
}

.stalesia-tile__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

.stalesia-tile__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-tile__title a:hover {
	color: var(--wp--preset--color--accent);
}

.stalesia-tile__price {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	margin-top: auto;
}

/* ---------- paginacja ---------- */
.stalesia-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: var(--st-gap-md);
}

.stalesia-pagination__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.stalesia-pagination__links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.stalesia-pagination__links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 40px;
	padding-inline: .75rem;
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--st-shadow-sm);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs);
}

.stalesia-pagination__links .page-numbers.current {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

/* ---------- specyfikacja produktu ---------- */
.stalesia-specs {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: .5rem 1.5rem 1rem;
	margin-block-start: var(--st-gap-md);
}

.stalesia-specs__grid {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	column-gap: 2.5rem;
}

.stalesia-specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: .7rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

.stalesia-specs__row dt {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.stalesia-specs__row dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

/* ---------- szybki podgląd parametrów (pod ceną) ---------- */
/* Stoi nad przyciskiem koszyka, więc liczy się każdy piksel wysokości:
   bez tła, bez ramki dookoła, tylko linie rozdzielające. */
.stalesia-quickspecs {
	margin: var(--st-gap-sm) 0 0;
	border-block: 1px solid var(--wp--preset--color--line);
	padding-block: .15rem;
}

.stalesia-quickspecs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .35rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
}

.stalesia-quickspecs__row + .stalesia-quickspecs__row {
	border-top: 1px solid var(--wp--preset--color--line);
}

.stalesia-quickspecs__row dt {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.stalesia-quickspecs__row dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	/* Gatunki bywają długie („1.4571 / 316Ti"), a kolumna wąska. */
	overflow-wrap: anywhere;
}

/* ---------- powiązane po osiach ---------- */
.stalesia-axes {
	display: grid;
	/* min(): na ekranie węższym niż 340 px + marginesy kolumna nie może być szersza od strony. */
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: var(--st-gap-md);
	margin-block-start: var(--wp--preset--spacing--50);
}

.stalesia-axis {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1.375rem 1.5rem;
	/* Układ wiersza zależy od szerokości karty, nie ekranu: dwie listy obok siebie
	   na tablecie są tak samo wąskie jak jedna na telefonie. */
	container-type: inline-size;
}

.stalesia-axis__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
}

.stalesia-axis__subtitle {
	margin: .25rem 0 .75rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

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

.stalesia-axis__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 1rem;
	align-items: center;
	padding-block: .65rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--xs);
}

.stalesia-axis__price {
	font-weight: 700;
	white-space: nowrap;
}

/* Wąska karta: wartość, dostępność i cena z netto w jednym rzędzie potrzebują
   do ~385 px, a karta na telefonie daje 295 px — cena wychodziła poza ekran.
   Wartość i dostępność idą pod sobą, cena po prawej, netto pod kwotą. */
@container (max-width: 25rem) {
	.stalesia-axis__item {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"wartosc cena"
			"stan cena";
		column-gap: .75rem;
		row-gap: .25rem;
	}

	.stalesia-axis__link {
		grid-area: wartosc;
	}

	.stalesia-axis__item > .stalesia-stock {
		grid-area: stan;
		justify-self: start;
	}

	.stalesia-axis__price {
		grid-area: cena;
		text-align: right;
	}

	.stalesia-axis__price .woocommerce-price-suffix {
		display: block;
		font-weight: 400;
	}
}

/* ---------- gatunki ---------- */
.stalesia-grades {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1.375rem 1.5rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

.stalesia-grades__title {
	margin: 0 0 .875rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.stalesia-grades__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.stalesia-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	padding: .45rem .875rem;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	text-decoration: none;
}

.stalesia-chip:hover {
	background: var(--wp--preset--color--tint);
	text-decoration: none;
}

.stalesia-chip__count {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/* Odsyłacz do zestawienia rodziny (/f/…) w sekcji gatunków kategorii. */
.stalesia-grades__flink {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* ---------- podstrony SEO /f/ (inc/podstrony.php) ---------- */
/* Sekcje z klas listy gatunków i kafelków; tu tylko rytm między nimi. */
.stalesia-fpage {
	display: flex;
	flex-direction: column;
	gap: var(--st-gap-md);
}

.stalesia-fpage__intro {
	max-width: 68ch;
	font-size: var(--wp--preset--font-size--md);
}

.stalesia-fpage__intro p {
	margin: 0;
}

.stalesia-fpage .stalesia-grades {
	margin-block-start: 0;
}

.stalesia-fpage__recommended {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1.375rem 1.5rem;
}

/* ---------- strona gatunku ---------- */
.stalesia-grade {
	background: var(--wp--preset--color--tint);
	border-radius: var(--st-radius);
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.stalesia-grade__eyebrow {
	margin: 0 0 .35rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.stalesia-grade__title {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--display);
}

.stalesia-grade__desc {
	max-width: 66ch;
}

.stalesia-grade__count {
	font-family: var(--st-data);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	margin-bottom: 0;
}

.stalesia-grade__cats {
	list-style: none;
	margin: var(--st-gap-lg) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--st-gap-sm);
}

.stalesia-grade__cat a {
	display: block;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	padding: 1rem 1.125rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.stalesia-grade__catname {
	display: block;
	font-weight: 600;
}

.stalesia-grade__catcount {
	display: block;
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-top: .2rem;
}

/* ---------- artykuł ---------- */
.stalesia-article__cols {
	gap: var(--st-gap-xl);
}

.stalesia-article__meta {
	gap: 1rem;
	align-items: center;
	padding-block: .875rem;
	border-block: 1px solid var(--wp--preset--color--line);
	margin-block: var(--st-gap-md) 0;
}

.stalesia-article__meta p {
	margin: 0;
}

/* Miara wiersza zostaje (ok. 68 znaków to próg czytelności długiego tekstu),
   ale treść przestaje się kleić do lewej krawędzi kolumny — środkujemy ją
   i sam blok, i jego dzieci. Rozciąganie artykułu na pełną szerokość byłoby
   gorsze do czytania, a nie lepsze. */
.stalesia-article .wp-block-post-content {
	max-width: 68ch;
	margin-inline: auto;
}

.stalesia-article .stalesia-prose > * {
	margin-inline: auto;
}

/* Podstrony kalkulatorów (wtyczki kalkulator-stali i kalkulator-dn): okruszki,
   tytuł, kalkulator i tekst w jednej wyśrodkowanej kolumnie. Szablon strony
   stawia treść przy lewej krawędzi, a kalkulator ma 700 px — obok zostawała
   pusta połowa ekranu. max-width z !important, bo reguła prozy
   (.stalesia-main > .wp-block-post-content.stalesia-prose) ma tę samą wagę i stoi niżej. */
.stalesia-main:has(.ks-calculator, .kdn-calculator) > :is(.stalesia-crumbs, .stalesia-pagetitle, .wp-block-post-content) {
	width: 100%;
	max-width: 760px !important;
	margin-inline: auto !important;
}

.stalesia-main:has(.ks-calculator, .kdn-calculator) .wp-block-post-content > * {
	max-width: 100%;
	margin-inline: 0 !important;
}

/* Sekcja „Gatunki stali" pod artykułem, na pełną szerokość — w wąskiej kolumnie
   obok tekstu lista nie mieściła się w widoku. */
.stalesia-article__grades {
	margin-block-start: var(--st-gap-xl);
	padding-block-start: var(--st-gap-lg);
	border-top: 1px solid var(--wp--preset--color--line);
}

.stalesia-article__grades .stalesia-grades__list {
	columns: 2;
	column-gap: var(--st-gap-lg);
}

@media (max-width: 640px) {
	.stalesia-article__grades .stalesia-grades__list {
		columns: 1;
	}
}

.stalesia-article__rail {
	position: sticky;
	top: 1.25rem;
	align-self: start;
}

.stalesia-toc {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1.125rem 1.25rem;
}

.stalesia-toc__title {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.stalesia-toc__list {
	margin: 0;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- karta produktu (szablon WooCommerce) ---------- */
.stalesia-product .product .summary .price {
	font-family: var(--st-data);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xxl);
}

.stalesia-product .product .entry-title,
.stalesia-product .product .product_title {
	font-size: var(--wp--preset--font-size--xxl);
}

.stalesia-product .single_add_to_cart_button {
	background: var(--wp--preset--color--buy) !important;
	border-radius: var(--st-radius-btn) !important;
	min-height: 48px;
	font-weight: 600;
}

/* ---------- karta produktu: sekcja zakupu (inc/product-page.php) ---------- */
/* Netto pod brutto, mniejszym stopniem — jak na starym sklepie. */
.stalesia-product .summary .price .woocommerce-price-suffix {
	display: block;
	margin-block-start: .15rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.stalesia-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 var(--st-gap-md);
	padding: 0;
	list-style: none;
}

.stalesia-facts__item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .8rem;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--surface-alt);
	font-size: var(--wp--preset--font-size--sm);
}

.stalesia-facts__item[hidden] {
	display: none;
}

.stalesia-facts__label {
	font-weight: 600;
}

.stalesia-facts .stalesia-stock {
	font-size: var(--wp--preset--font-size--sm);
}

/* Natywna lista wariantów zostaje w DOM dla formularza WooCommerce;
   klient korzysta z przycisków (grupa radiowa), więc listę tylko chowamy. */
.stalesia-lengths__native {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.stalesia-product table.variations,
.stalesia-product table.variations tbody,
.stalesia-product table.variations tr,
.stalesia-product table.variations th,
.stalesia-product table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
}

.stalesia-product table.variations th.label,
.stalesia-product .reset_variations,
.stalesia-product .woocommerce-variation-price,
.stalesia-product .woocommerce-variation-availability {
	display: none !important;
}

.stalesia-lengths__head {
	margin: 0 0 .6rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.stalesia-lengths__head strong {
	color: var(--wp--preset--color--contrast);
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--lg);
	margin-inline-start: .25rem;
}

.stalesia-lengths__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
	gap: .4rem;
	margin-block-end: var(--st-gap-md);
}

.stalesia-lengths__opt {
	min-height: 44px; /* cel dotykowy */
	padding: .4rem .25rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.stalesia-lengths__opt:hover {
	border-color: var(--wp--preset--color--contrast);
}

.stalesia-lengths__opt:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.stalesia-lengths__opt[aria-checked="true"] {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

/* Odcinek w dostawie — do wybrania (klient ma zobaczyć cenę i zapytać),
   ale wyraźnie odróżniony, jak w starym selektorze. */
.stalesia-lengths__opt.is-out {
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--line-strong);
}

.stalesia-lengths__opt.is-out[aria-checked="true"] {
	background: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
}

/* WooCommerce składał pod długościami cztery marginesy naraz (tabela, komórka,
   pusty opis wariantu) — 84 px pustego pola między wyborem a koszykiem.
   Odstęp daje wyłącznie margines siatki długości. */
.stalesia-product form.cart table.variations {
	margin: 0;
}

.stalesia-product form.cart table.variations td.value {
	padding: 0;
}

.stalesia-product .single_variation_wrap .woocommerce-variation {
	margin: 0;
}

/* Ilość + koszyk w jednym rzędzie; przycisk zajmuje resztę szerokości. */
.stalesia-product form.cart:not(.variations_form),
.stalesia-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .5rem;
}

.stalesia-product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	margin: 0;
}

.stalesia-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block: var(--st-gap-sm) var(--st-gap-md);
}

.stalesia-actions__btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 44px;
	padding: .5rem 1rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.stalesia-actions__btn:hover {
	border-color: var(--wp--preset--color--contrast);
}

.stalesia-actions__btn[aria-pressed="true"] {
	border-color: var(--wp--preset--color--danger);
	color: var(--wp--preset--color--danger);
}

.stalesia-actions__btn[aria-pressed="true"] svg {
	fill: currentColor;
}

.stalesia-actions__btn [hidden] {
	display: none;
}

/* Okno „Zapytaj o produkt" */
.stalesia-dialog {
	width: min(40rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	padding: 1.25rem 1.5rem 1.5rem;
	border: 0;
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-lg);
	overflow: auto;
}

.stalesia-dialog::backdrop {
	background: rgba(17, 17, 17, .45);
}

.stalesia-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.stalesia-dialog__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.stalesia-dialog__close {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

/* CF7 opakowuje ukryte pola w <fieldset> z domyślną ramką — pusty prostokąt nad formularzem. */
.stalesia-dialog .hidden-fields-container {
	margin: 0;
	padding: 0;
	border: 0;
}

.stalesia-dialog__product {
	margin: .5rem 0 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Przechowalnia — ikona w nagłówku */
.stalesia-wishlink {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--contrast);
}

.stalesia-wishlink__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--wp--preset--color--danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.stalesia-wishlink__count[hidden] {
	display: none;
}

/* Przechowalnia — strona */
.stalesia-wishlist__list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
}

.stalesia-wishlist__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem;
	padding: .875rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.stalesia-wishlist__item:last-child {
	border-bottom: 0;
}

.stalesia-wishlist__media img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
}

.stalesia-wishlist__body {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.stalesia-wishlist__name {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.stalesia-wishlist__price {
	font-family: var(--st-data);
	font-weight: 700;
	white-space: nowrap;
}

.stalesia-wishlist__actions {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.stalesia-wishlist__remove {
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	font-size: 1.3rem;
	cursor: pointer;
}

@media (max-width: 640px) {
	.stalesia-wishlist__item {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: .5rem .75rem;
	}

	.stalesia-wishlist__media img {
		width: 56px;
		height: 56px;
	}

	.stalesia-wishlist__price,
	.stalesia-wishlist__actions {
		grid-column: 2;
	}
}

.stalesia-empty {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	padding: 2rem;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* ---------- telefon ---------- */
@media (max-width: 860px) {
	.stalesia-list__head {
		display: none;
	}

	.stalesia-list__row {
		grid-template-columns: 1fr auto;
		/* Wiersz przestaje być tabelą, więc minimum tabeli nie obowiązuje —
		   bez tego zerowania rozpychało dokument na telefonie. */
		min-width: 0;
		gap: .25rem .875rem;
		padding: .875rem 1rem;
		align-items: start;
	}

	.stalesia-list__cell {
		padding: 0;
	}

	.stalesia-list__cell--name {
		grid-column: 1 / -1;
	}

	.stalesia-list__cell--attr {
		grid-column: 1;
		display: inline;
	}

	.stalesia-list__cell--attr::before {
		content: attr(data-label) ": ";
		color: var(--wp--preset--color--muted);
	}

	.stalesia-list__cell--stock {
		grid-column: 1;
		margin-top: .35rem;
	}

	.stalesia-list__cell--price {
		grid-column: 2;
		grid-row: 2;
		text-align: right;
	}

	.stalesia-list__cell--action {
		grid-column: 2;
		grid-row: 3 / span 2;
		padding: 0;
		align-self: end;
	}

	.stalesia-article__cols {
		gap: 2rem;
	}

	.stalesia-article__rail {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- menu katalogu ---------- */
.stalesia-mainnav__toggle {
	display: none;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .5rem 1rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-btn);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Pasek dzieli się na dwie listy: katalog po lewej, odsyłacze pomocnicze po
   prawej. Wcześniej te drugie trzymał `margin-inline-start: auto` wewnątrz
   jednej listy — po zawinięciu kategorii do drugiego rzędu margines odrywał je
   od prawej krawędzi i pasek się rozjeżdżał. Przy dziewięciu pozycjach rząd
   mieści się w 1320 px z zapasem rzędu kilkudziesięciu pikseli, więc zawinięcie
   jest brzegowe — i właśnie dlatego ma degradować się poprawnie. */
.stalesia-mainnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .15rem var(--st-gap-md);
}

.stalesia-mainnav__list,
.stalesia-mainnav__aside {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem;
}

.stalesia-mainnav {
	position: relative;
}

.stalesia-mainnav__item {
	position: static;
}

.stalesia-mainnav__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .55rem .875rem;
	border-radius: var(--st-radius-pill);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}

.stalesia-mainnav__item--aside .stalesia-mainnav__link {
	color: var(--wp--preset--color--accent);
}

/* Nazwa kategorii i strzałka to dwa osobne cele: odsyłacz prowadzi na listing,
   przycisk rozwija panel. Wcześniej strzałka była ikoną wewnątrz odsyłacza,
   więc stuknięcie w nią na telefonie otwierało kategorię. */
.stalesia-mainnav__item.has-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.stalesia-mainnav__item.has-panel > .stalesia-mainnav__link {
	padding-inline-end: .35rem;
}

.stalesia-mainnav__item.has-panel > .stalesia-mega {
	flex-basis: 100%;
}

.stalesia-mainnav__caretbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .55rem .6rem;
	margin: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	border-radius: var(--st-radius-pill);
	line-height: 0;
	cursor: pointer;
}

.stalesia-mainnav__caretbtn:hover,
.stalesia-mainnav__item[data-open] > .stalesia-mainnav__caretbtn {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent);
}

.stalesia-mainnav__caret {
	transition: transform .15s ease;
}

.stalesia-mainnav__link:hover,
.stalesia-mainnav__link.is-current {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* ---------- panel mega menu ---------- */
/* Panel rozpina się na szerokość kontenera nawigacji, a nie pozycji menu.
   Kotwiczenie do pozycji sprawiało, że przy skrajnych elementach panel
   wychodził poza obrys strony. */
.stalesia-mega {
	/* Panel jest ukryty przez `display`, nie przez `opacity`/`visibility`.
	   Poprzedni wariant zależał od trzech właściwości naraz, opóźnień przejścia
	   i od tego, żeby kursor nie zgubił najechania w szczelinie — za dużo miejsc,
	   w których mogło nie zadziałać, i nie do sprawdzenia bez podglądu renderu. */
	display: none;
	position: absolute;
	inset-inline: 0;
	top: calc(100% + .5rem);
	z-index: 200;
	grid-template-columns: 1.15fr .8fr 1.1fr .95fr;
	gap: var(--st-gap-lg);
	padding: 1.75rem 1.875rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-lg);
}

/* Niewidzialny mostek nad panelem — bez niego kursor traci najechanie
   w szczelinie między pozycją menu a panelem. */
.stalesia-mega::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	/* Tyle, ile dzieli panel od paska: pół rema szczeliny plus zapas na drugi
	   rząd pozycji, gdy pasek się zawinie. Reszta drogi kursora należy do
	   opóźnienia w skrypcie. */
	height: 1rem;
}

/* Otwarcie sterowane atrybutem — ustawia go skrypt (najechanie z opóźnieniem
   intencji, dotknięcie, klawiatura). Reguła `:hover` niżej jest zapasem na
   wypadek, gdyby skrypt nie wystartował. */
.stalesia-mainnav__item[data-open] > .stalesia-mega {
	display: grid;
}

/* Zapas na wypadek, gdyby skrypt nie wystartował. Gdy wystartuje, dokłada
   `is-enhanced` i reguła się wycofuje — inaczej panel otwierałby się natychmiast
   mimo opóźnienia intencji, a przy zawiniętym pasku znikał w drodze kursora. */
@media (hover: hover) {
	.stalesia-mainnav:not(.is-enhanced) .stalesia-mainnav__item:hover > .stalesia-mega,
	.stalesia-mainnav:not(.is-enhanced) .stalesia-mainnav__item:focus-within > .stalesia-mega {
		display: grid;
	}
}

.stalesia-mega__label {
	margin: 0 0 .875rem;
	padding-block-end: .625rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.stalesia-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.stalesia-mega__list a {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .45rem .625rem;
	margin-inline: -.625rem;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-mega__list a:hover {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.stalesia-mega__list--data a {
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
}

.stalesia-mega__count {
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

.stalesia-mega__pills {
	list-style: none;
	margin: 0 0 .875rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.stalesia-mega__pills a {
	display: inline-block;
	padding: .4rem .7rem;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--surface-alt);
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-mega__pills a:hover {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.stalesia-mega__all {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	white-space: nowrap;
}

.stalesia-mega__promo {
	background: var(--wp--preset--color--tint);
	border-radius: var(--st-radius);
	padding: 1.25rem;
	color: var(--wp--preset--color--accent);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-start;
}

.stalesia-mega__promotitle {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	line-height: 1.25;
}

.stalesia-mega__promotext {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
	color: #3d454c;
}

.stalesia-mainnav__count {
	font-family: var(--st-data);
	color: var(--wp--preset--color--muted);
}

/* ---------- listy odnośników ---------- */
.stalesia-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------- pasek filtrów ---------- */
.stalesia-count {
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.stalesia-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--st-gap-sm);
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1rem 1.125rem;
}

.stalesia-filters__spacer {
	flex-grow: 1;
}

.stalesia-filter {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 150px;
}

.stalesia-filter__label {
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
}

.stalesia-filter__select {
	min-height: 42px;
	padding: .4rem .65rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--xs);
}

.stalesia-filters__reset {
	align-self: center;
	font-size: var(--wp--preset--font-size--xs);
}

/* ---------- zastępka obrazu ---------- */
.stalesia-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--line-strong);
}

.stalesia-placeholder svg {
	width: 46%;
	height: auto;
}

/* ---------- nagłówek: układ ---------- */
.stalesia-masthead__inner {
	gap: 2rem;
	min-height: 82px;
}

.stalesia-brand {
	gap: .75rem;
	flex: none;
}

.stalesia-brand:has(.custom-logo) .stalesia-brand__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.stalesia-brand__title a {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
}

.stalesia-search {
	flex-grow: 1;
	max-width: 640px;
}

.stalesia-account {
	gap: 1.25rem;
	flex: none;
	align-items: center;
}

.stalesia-account p {
	margin: 0;
}

/* Pasek siedmiu kategorii z panelami potrzebuje ~1190 px. Poniżej zawijał się
   w trzy rzędy (na 1024 px nagłówek miał ~350 px), więc od 1279 px w dół
   katalog chowa się pod przyciskiem, a nagłówek przechodzi w układ zwarty. */
@media (max-width: 1279px) {
	.stalesia-mainnav__toggle {
		display: inline-flex;
	}

	.stalesia-mainnav__inner {
		display: none;
	}

	.stalesia-mainnav.is-open .stalesia-mainnav__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		padding-top: .75rem;
	}

	.stalesia-mainnav__list,
	.stalesia-mainnav__aside {
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
	}

	/* Na wąskim ekranie panele były rozwinięte wszystkie naraz — siedem paneli
	   po cztery kolumny dawało ścianę treści zamiast menu. Teraz rozwija się
	   ten, w który użytkownik stuknął. */
	.stalesia-mega {
		position: static;
		display: none;
		grid-template-columns: 1fr;
		gap: var(--st-gap-md);
		box-shadow: none;
		padding: .5rem 0 1rem 1rem;
	}

	.stalesia-mainnav__item[data-open] > .stalesia-mega {
		display: grid;
	}

	.stalesia-mainnav:not(.is-enhanced) .stalesia-mainnav__item:hover > .stalesia-mega,
	.stalesia-mainnav:not(.is-enhanced) .stalesia-mainnav__item:focus-within > .stalesia-mega {
		display: none;
	}

	.stalesia-mainnav__item[data-open] > .stalesia-mainnav__caretbtn .stalesia-mainnav__caret {
		transform: rotate(180deg);
	}

	/* W kolumnie menu nazwa bierze całą szerokość, a strzałka siada przy prawej
	   krawędzi — tam, gdzie sięga kciuk, i z pełnym celem dotykowym. */
	.stalesia-mainnav__item.has-panel > .stalesia-mainnav__link {
		flex: 1 1 auto;
	}

	.stalesia-mainnav__caretbtn {
		min-width: 44px;
		min-height: 44px;
	}

	.stalesia-mega__promo {
		display: none;
	}

	/* Nagłówek na telefonie: trzy rzędy zamiast siedmiu.
	   Wcześniej hasło, kontakt, logo, konto, wyszukiwarka i „Katalog" szły
	   jeden pod drugim — ~470 px, czyli cały pierwszy ekran bez grama treści.
	   Grupy bloków znikają z układu (`display: contents`), a ich dzieci
	   układa jedna siatka nagłówka:
	     kontakt  (jedna linia)
	     logo · konto · przechowalnia · koszyk
	     Katalog · wyszukiwarka
	     [rozwinięte menu] */
	.stalesia-header {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"util   util   util"
			"brand  brand  acct"
			"toggle search search"
			"menu   menu   menu";
		column-gap: .5rem;
		padding-inline: var(--wp--style--root--padding-left, 1rem);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.stalesia-header .stalesia-masthead,
	.stalesia-header .stalesia-masthead .stalesia-masthead__inner,
	.stalesia-header .stalesia-nav,
	.stalesia-header .stalesia-nav .stalesia-mainnav {
		display: contents;
	}

	.stalesia-header .stalesia-utility {
		grid-area: util;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem));
		padding-block: .3rem;
	}

	.stalesia-header .stalesia-brand {
		grid-area: brand;
		padding-block: .5rem;
	}

	.stalesia-header .stalesia-brand .custom-logo {
		width: 124px;
		height: auto;
	}

	.stalesia-header .stalesia-account {
		grid-area: acct;
		gap: .25rem;
	}

	.stalesia-header .stalesia-mainnav__toggle {
		grid-area: toggle;
		align-self: center;
		margin-block: 0 .6rem;
	}

	.stalesia-header .stalesia-search {
		grid-area: search;
		align-self: center;
		max-width: none;
		width: 100%;
		margin-block: 0 .6rem;
	}

	.stalesia-header .stalesia-search .wp-block-search__input {
		min-height: 40px;
		font-size: 16px; /* poniżej 16 px iOS powiększa stronę przy wejściu w pole */
	}

	.stalesia-header .stalesia-mainnav__inner {
		grid-area: menu;
	}

	.stalesia-header .stalesia-mainnav.is-open .stalesia-mainnav__inner {
		padding-block: 0 1rem;
	}
}

/* ---------- strona główna: hero ---------- */
.stalesia-hero {
	margin-block-start: 0;
}

.stalesia-hero__cols {
	gap: var(--st-gap-xl);
}

.stalesia-hero__title {
	margin-top: 0;
	text-wrap: balance;
}

.stalesia-hero__lede {
	color: #3d454c;
	max-width: 52ch;
}

.stalesia-stats {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
}

.stalesia-stat__value {
	display: block;
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	line-height: 1;
}

.stalesia-stat__label {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-top: .35rem;
}

/* ---------- dobór po wymiarze ---------- */
.stalesia-finder {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-md);
	padding: clamp(1.375rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: var(--st-gap-sm);
}

.stalesia-finder__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
}

.stalesia-finder__lede {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.stalesia-finder__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--st-gap-sm);
}

.stalesia-finder__field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.stalesia-finder__label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.stalesia-finder select {
	min-height: 46px;
	padding: .5rem .75rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--sm);
}

.stalesia-finder__submit {
	min-height: 50px;
	margin-top: .35rem;
	border: 0;
	border-radius: var(--st-radius-btn);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	cursor: pointer;
}

.stalesia-finder__submit:hover {
	background: var(--wp--preset--color--accent-hover);
}

.stalesia-finder__hint {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .5rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* ---------- kafelki kategorii ---------- */
.stalesia-section-title {
	margin-top: var(--wp--preset--spacing--60);
}

/* Rodziny stali na stronie „Gatunki stali" — te same kafelki co katalog. */
.stalesia-typecards {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.stalesia-typecards__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
}

.stalesia-typecards__intro {
	margin: .35rem 0 var(--st-gap-md);
	color: var(--wp--preset--color--muted);
}

/* Siedem rodzin w kolumnie treści (880 px): przy 250 px wchodziły dwie w rzędzie
   i lista ciągnęła się na cztery rzędy. Kafelek rodziny to nazwa, zdanie i liczby
   — 200 px wystarczy, a rząd mieści trzy. */
.stalesia-typecards .stalesia-cats {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Na pełnej szerokości (`/gatunki/`) siedem rodzin w sześciu kolumnach zostawiało
   sierotę w drugim rzędzie — cztery kolumny dzielą je na 4 + 3. */
@media (min-width: 1100px) {
	.stalesia-indeks .stalesia-typecards .stalesia-cats {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Na telefonie siedem kafelków z opisem to ~1400 px przed listą artykułów;
   nazwa i liczby wystarczą, opis jest na stronie rodziny. */
@media (max-width: 600px) {
	.stalesia-typecards .stalesia-cat__note {
		display: none;
	}

	.stalesia-typecards .stalesia-cat__link {
		padding: .9rem 1.1rem;
	}
}

.stalesia-btn--akcja {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding-inline: 1.4rem;
	font-size: var(--wp--preset--font-size--sm);
}

.stalesia-btn--akcja:hover,
.stalesia-btn--akcja:focus-visible {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* Rodzina stali: gatunki z magazynu i gatunki opisane, sprowadzane na zamówienie. */
.stalesia-rodzina__grupa + .stalesia-rodzina__grupa {
	margin-block-start: var(--st-gap-lg);
}

.stalesia-rodzina__title {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--lg);
}

/* Gatunek, którego nie trzymamy na stanie: zamiast pustego listingu panel
   zamówienia. Bez niego strona kończyła się komunikatem z języka filtrów. */
.stalesia-narequest {
	margin-block: var(--st-gap-md) var(--wp--preset--spacing--50);
	padding: var(--st-gap-lg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--surface-alt);
}

.stalesia-narequest__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.stalesia-narequest__lede {
	margin: .5rem 0 0;
	max-width: 68ch;
	color: #3d454c;
}

.stalesia-narequest__cta {
	margin: 1.1rem 0 0;
}

.stalesia-narequest__rodzina {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.stalesia-narequest__label {
	margin: 0 0 .6rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* Strona `/gatunki/` ma własny szablon (`page-gatunki.html`) bez wąskiej kolumny
   prozy: kafelki rodzin i gatunków dostają całą szerokość, a sam tekst zostaje
   w mierze czytelnej. */


.stalesia-indeks__tresc > .stalesia-section-title {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Pigułki gatunków pod kafelkami: równa siatka zamiast rzędu „co się zmieści”.
   Przy zawijaniu flexem ostatni rząd zostawał urwany, a pigułki o bardzo różnej
   długości („316” obok „1.4401 / 1.4404 / 316 / 316L i ekwiwalenty”) wyglądały
   przypadkowo. Każda ma teraz tę samą szerokość kolumny, nazwę po lewej
   i licznik pozycji po prawej. */
.stalesia-gradecards .stalesia-grades__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: .6rem;
	margin-block-start: var(--st-gap-md);
}

.stalesia-gradecards .stalesia-grades__list .stalesia-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	width: 100%;
	height: 100%;
	text-align: start;
	line-height: 1.35;
}

.stalesia-gradecards .stalesia-chip__name {
	overflow-wrap: anywhere;
}

.stalesia-gradecards .stalesia-chip__num {
	flex: none;
}

/* ---------- wyroby w treści wpisu ---------- */
/* Blok wchodzi po czwartym akapicie (inc/wpis-produkty.php). Ma wyglądać jak
   wtrącenie redakcyjne, nie jak reklama doklejona na końcu — stąd tło sekcji
   i ta sama siatka kafelków co w katalogu. */
.stalesia-wpolecane {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--st-gap-lg);
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--surface-alt);
}

.stalesia-wpolecane__title {
	margin: 0 0 var(--st-gap-md);
	font-size: var(--wp--preset--font-size--xl);
}

/* Blok wychodzi poza miarę tekstu na szerokość miniatury wpisu (840 px przy
   1440 px okna). Żeby dało się to zrobić bez sztywnych liczb, proza wpisu zajmuje
   całą kolumnę, a to jej dzieci mają miarę czytelną i środkują się same —
   wtedy „szeroki" blok to po prostu dziecko bez ograniczenia szerokości. */
.stalesia-article .stalesia-prose {
	max-width: none;
}

/* Miara wiersza zostaje ta, co była (42,5 rem) — bez tego zdjęcie ograniczenia
   z rodzica rozciągnęłoby akapity o kilkadziesiąt pikseli na wszystkich wpisach. */
.stalesia-article .stalesia-prose > * {
	max-width: 42.5rem;
	margin-inline: auto;
}

.stalesia-article .stalesia-wpolecane {
	max-width: none;
	width: 100%;
}

/* Blok jest wstrzykiwany w prozę, a ta ma własny rytm list: `li + li` z odstępem
   i wcięcie `ul`. Kafelki to elementy listy, więc łapały jedno i drugie —
   pierwszy kafelek stał wyżej od reszty o 0,45 em, a cała siatka miała wcięcie
   jak lista wypunktowana. Tu rytm ustawia siatka, nie proza. */
.stalesia-article .stalesia-wpolecane :is(ul, ol) {
	padding-inline-start: 0;
	margin: 0;
}

.stalesia-article .stalesia-wpolecane li + li {
	margin-block-start: 0;
}

/* Cztery wyroby obok siebie, każdy ze zdjęciem na górze — jak kafelek katalogu,
   tylko bez wariantu długości i koszyka. Poniżej 1200 px kolumna wpisu robi się
   węższa i cztery kafelki schodzą do ~100 px, więc wtedy trzy. */
.stalesia-wpolecane .stalesia-tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--st-gap-sm);
}

@media (min-width: 782px) and (max-width: 1199px) {
	.stalesia-wpolecane .stalesia-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Czwarty kafelek nie mieści się w rzędzie, a sam w drugim wygląda na pomyłkę. */
	.stalesia-wpolecane .stalesia-tile:nth-child(4) {
		display: none;
	}
}

.stalesia-wpolecane .stalesia-buy,
.stalesia-wpolecane .stalesia-buy__len,
.stalesia-wpolecane .stalesia-btn--buy {
	display: none;
}

.stalesia-wpolecane .stalesia-tile__media {
	aspect-ratio: 4 / 3;
}

.stalesia-wpolecane .stalesia-tile__title {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Przy czterech kafelkach w rzędzie cena ma ~150 px — pełna formuła
   „1 237,71 zł (1 006,27 zł netto)" łamała się na trzy wiersze. */
.stalesia-wpolecane .stalesia-tile__price {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.4;
}

.stalesia-wpolecane .stalesia-tile__price .woocommerce-price-suffix {
	display: block;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* Na telefonie kafelki nie mieszczą się w siatce, a ściśnięte do jednej kolumny
   robią z bloku ścianę. Przewijamy w bok: widać półtora kafelka, więc od razu
   wiadomo, że jest więcej. */
@media (max-width: 781px) {
	.stalesia-wpolecane__lista {
		margin-inline: calc(-1 * var(--st-gap-md));
		padding-inline: var(--st-gap-md);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--st-gap-md);
		overscroll-behavior-x: contain;
	}

	.stalesia-wpolecane .stalesia-tiles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 66%;
	}

	.stalesia-wpolecane .stalesia-tile {
		scroll-snap-align: start;
	}

	.stalesia-wpolecane .stalesia-tile__title {
		-webkit-line-clamp: 4;
	}
}

/* Od ~480 px zmieści się dwa i pół — ta sama podpowiedź, mniej przewijania. */
@media (min-width: 480px) and (max-width: 781px) {
	.stalesia-wpolecane .stalesia-tiles {
		grid-auto-columns: 42%;
	}
}



/* ---------- baza wiedzy: układ portalowy ---------- */
/* Nagłówek strony głównej bazy wiedzy — tytuł i wstęp w jednym bloku, więc
   wstęp trzyma się lewej krawędzi nagłówka niezależnie od reguł układu. */
.stalesia-bazahead {
	margin-block: var(--st-gap-md) var(--wp--preset--spacing--40);
}

.stalesia-bazahead__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.12;
}

.stalesia-bazahead__lede {
	margin: .75rem 0 0;
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #3d454c;
}

/* Kafel tekstu. Jeden komponent obsługuje polecane, sekcje działów i listy —
   różni je tylko wariant `--duzy` (obrazek wyżej, dłuższa zajawka). */
.stalesia-wpis {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-width: 0;
}

.stalesia-wpis__media {
	display: block;
	overflow: hidden;
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--surface-alt);
	aspect-ratio: 16 / 9;
}

.stalesia-wpis__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.stalesia-wpis:hover .stalesia-wpis__media img {
	transform: scale(1.03);
}

.stalesia-wpis__tresc {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.stalesia-wpis__dzial {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.stalesia-wpis__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
}

.stalesia-wpis__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-wpis__title a:hover {
	color: var(--wp--preset--color--accent);
}

.stalesia-wpis__lede {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.stalesia-wpis--duzy .stalesia-wpis__title {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.2;
}

.stalesia-wpis--duzy .stalesia-wpis__lede {
	font-size: 1.0625rem;
}

/* Otwarcie strony: jeden tekst duży, dwa obok. Redakcja wybiera je przyklejeniem
   wpisu; bez przyklejeń wchodzi przekrój działów. */
.stalesia-polecane {
	margin-block: var(--wp--preset--spacing--50);
}

.stalesia-polecane__title,
.stalesia-sekcja__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
}

.stalesia-polecane__title {
	margin-block-end: var(--st-gap-md);
}

.stalesia-polecane__siatka {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: var(--st-gap-lg);
	align-items: start;
}

.stalesia-polecane__obok {
	display: flex;
	flex-direction: column;
	gap: var(--st-gap-lg);
}

/* W kolumnie obok dużego tekstu obrazek jest mały i tylko rozbija czytanie. */
.stalesia-polecane__obok .stalesia-wpis {
	flex-direction: row;
	gap: 1rem;
}

.stalesia-polecane__obok .stalesia-wpis__media {
	flex: 0 0 116px;
	aspect-ratio: 4 / 3;
}

/* Dział i jego teksty — powtarzalny rytm całej strony. */
.stalesia-sekcja {
	margin-block: var(--wp--preset--spacing--60);
}

.stalesia-sekcja__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: .5rem var(--st-gap-md);
	margin-block-end: var(--st-gap-md);
	padding-block-end: .75rem;
	border-bottom: 2px solid var(--wp--preset--color--line);
}

.stalesia-sekcja__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-sekcja__title a:hover {
	color: var(--wp--preset--color--accent);
}

.stalesia-sekcja__lede {
	margin: .3rem 0 0;
	max-width: 70ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.stalesia-sekcja__wszystkie {
	flex: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
}

.stalesia-wpisy {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--st-gap-lg) var(--st-gap-md);
}

/* Sekcja działu pokazuje dokładnie cztery teksty — siatka „auto-fill" zrobiłaby
   z nich pięć kolumn i zostawiła dziurę z prawej. */
@media (min-width: 1100px) {
	.stalesia-sekcja .stalesia-wpisy {
		grid-template-columns: repeat(4, 1fr);
	}

}

/* „Może zainteresuje Cię” podsuwa osiem tekstów — dwa pełne rzędy po cztery.
   Przy trzech kolumnach osiem dałoby 3 + 3 + 2, więc dwa ostatnie chowamy. */
@media (min-width: 782px) and (max-width: 1099px) {
	.stalesia-sekcja--moze .stalesia-wpis:nth-child(n + 7) {
		display: none;
	}
}

/* W tym bloku obrazek jest tylko sygnałem, o czym jest tekst — zajawka zabrałaby
   miejsce, a tytuł ma zostać czytelny także w wąskiej kolumnie. */
.stalesia-sekcja--moze .stalesia-wpis__title {
	font-size: var(--wp--preset--font-size--md);
}

.stalesia-sekcja--moze .stalesia-wpis__lede {
	display: none;
}

/* Lista działu: pierwszy tekst zajmuje dwie kolumny i ma obrazek na całą szerokość.
   Siatka jest tu stała, nie „auto-fill": liczba tekstów na stronie (7) jest dobrana
   tak, by wypełnić dokładnie dwa rzędy — przy zmiennej liczbie kolumn ostatni rząd
   zostawałby z jednym kafelkiem. */
@media (min-width: 782px) {
	.stalesia-wpisy--zwyrozn .stalesia-wpis--duzy {
		grid-column: span 2;
	}
}

@media (min-width: 1100px) {
	.stalesia-bazawiedzy .stalesia-wpisy {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Dwie kolumny (tablet w pionie): siódmy tekst zostawałby sam w ostatnim rzędzie. */
@media (min-width: 560px) and (max-width: 781px) {
	.stalesia-bazawiedzy .stalesia-wpisy--zwyrozn .stalesia-wpis:nth-child(7) {
		display: none;
	}
}

/* Trzy kolumny mieszczą w dwóch rzędach sześć miejsc, czyli pięć tekstów
   (pierwszy zajmuje dwa) — szósty i siódmy chowamy, żeby nie robiły trzeciego rzędu. */
@media (min-width: 782px) and (max-width: 1099px) {
	.stalesia-bazawiedzy .stalesia-wpisy {
		grid-template-columns: repeat(3, 1fr);
	}

	.stalesia-bazawiedzy .stalesia-wpisy--zwyrozn .stalesia-wpis:nth-child(n + 6) {
		display: none;
	}
}

/* Nagłówek działu — zamiast „Kategoria: Poradniki”. */
.stalesia-dzial {
	margin-block: var(--st-gap-md) var(--wp--preset--spacing--50);
	padding: var(--st-gap-lg);
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--tint);
}

.stalesia-dzial__nad {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.stalesia-dzial__title {
	margin: .35rem 0 0;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.15;
}

.stalesia-dzial__lede {
	margin: .6rem 0 0;
	max-width: 70ch;
	font-size: 1.0625rem;
	color: #3d454c;
}

.stalesia-dzial__licznik {
	margin: .5rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.stalesia-dzial__inne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-top: 1px solid rgba(16, 24, 40, .1);
}

.stalesia-dzial__innelabel {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.stalesia-polecane__siatka {
		grid-template-columns: 1fr;
	}

	/* Na telefonie sekcja działu pokazuje dwa teksty zamiast czterech — cztery
	   działy po cztery kafelki to ponad 6 tys. pikseli samej nawigacji.
	   Pełna lista jest pod „Wszystkie (N)”. */
	.stalesia-sekcja .stalesia-wpis:nth-child(n + 3) {
		display: none;
	}

	/* „Może zainteresuje Cię” to ostatnia sekcja i jedyne wejście do tych tekstów,
	   więc dostaje cztery kafelki — równo przy jednej i przy dwóch kolumnach. */
	.stalesia-sekcja--moze .stalesia-wpis:nth-child(-n + 4) {
		display: flex;
	}

	.stalesia-sekcja--moze .stalesia-wpis:nth-child(n + 5) {
		display: none;
	}

	.stalesia-polecane__obok .stalesia-wpis {
		flex-direction: row;
	}

	.stalesia-dzial {
		padding: var(--st-gap-md);
	}
}

/* ---------- baza wiedzy: rozdroże treści ---------- */
/* Wstęp trzyma się lewej krawędzi, tak jak H1 — układ „constrained" sam
   z siebie wyśrodkowuje akapit w kolumnie treści. */
/* Wstęp pod nagłówkiem, nie na środku pustej szerokości. `!important` jest tu
   konieczne: układ „constrained" rdzenia ustawia `margin-inline: auto !important`
   każdemu blokowi węższemu od kontenera (ta sama pułapka co przy stronie kontaktu). */
.stalesia-bazawiedzy .stalesia-lede,
.stalesia-indeks__tresc > .stalesia-lede,
.stalesia-indeks__tresc > p {
	margin-inline: 0 !important;
	max-width: 68ch;
}

/* Most do warstwy materiałowej: baza wiedzy mówi o stali, `/gatunki/` mówi,
   co z niej mamy na stanie. Bez tego odsyłacza czytelnik kończy na artykule. */
.stalesia-most {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-gap-md);
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--st-gap-lg);
	border-radius: var(--st-radius);
	background: var(--wp--preset--color--tint);
}

.stalesia-most__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.stalesia-most__lede {
	margin: .35rem 0 0;
	max-width: 62ch;
	color: #3d454c;
}

.stalesia-most__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .65rem 1.4rem;
	border-radius: var(--st-radius-btn);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

.stalesia-most__btn:hover,
.stalesia-most__btn:focus-visible {
	background: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.stalesia-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--st-gap-md);
}

.stalesia-cat__link {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	height: 100%;
	padding: 1.375rem 1.5rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-cat__link:hover {
	box-shadow: var(--st-shadow-md);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-cat__icon {
	width: 34px;
	height: 34px;
	color: var(--wp--preset--color--muted);
}

.stalesia-cat__name {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.25;
}

.stalesia-cat__count {
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.stalesia-cat__note {
	font-size: var(--wp--preset--font-size--xs);
	color: #3d454c;
	line-height: 1.5;
}

.stalesia-cat--ask .stalesia-cat__link {
	background: var(--wp--preset--color--tint);
	box-shadow: none;
}

.stalesia-cat--ask .stalesia-cat__icon,
.stalesia-cat--ask .stalesia-cat__name {
	color: var(--wp--preset--color--accent);
}

/* ---------- kafelki gatunków ---------- */
.stalesia-gradecards {
	display: flex;
	flex-direction: column;
	gap: var(--st-gap-md);
}

.stalesia-gradecards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--st-gap-md);
}

.stalesia-gradecard a {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	height: 100%;
	padding: 1.375rem 1.5rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-gradecard a:hover {
	box-shadow: var(--st-shadow-md);
	text-decoration: none;
}

.stalesia-gradecard__name {
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
}

.stalesia-gradecard__desc {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

.stalesia-gradecard__count {
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--accent);
	margin-top: auto;
	font-weight: 500;
}

/* ---------- tekst opisowy i blok dla firm ---------- */
.stalesia-seotext {
	gap: var(--st-gap-xl);
	margin-block-start: var(--wp--preset--spacing--60);
}

.stalesia-b2b {
	box-shadow: var(--st-shadow-sm);
	position: sticky;
	top: 1.25rem;
}

.stalesia-checklist {
	list-style: none;
	margin: .75rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.stalesia-checklist li {
	display: flex;
	gap: .65rem;
}

.stalesia-checklist li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: .1rem;
	background: var(--wp--preset--color--buy);
	clip-path: polygon(20% 52%, 8% 64%, 40% 92%, 92% 26%, 79% 16%, 39% 68%);
}

.stalesia-b2b__cta .wp-block-button__link {
	width: 100%;
	text-align: center;
}

@media (max-width: 860px) {
	.stalesia-hero__cols,
	.stalesia-seotext {
		gap: 2rem;
	}

	.stalesia-stats {
		gap: 1.5rem;
	}

	.stalesia-b2b {
		position: static;
	}
}

/* ---------- stopka: rytm kolumn ---------- */
.stalesia-footer__cols {
	gap: var(--st-gap-lg);
}

.stalesia-footer__cols .wp-block-column > :first-child {
	margin-block-start: 0;
}

.stalesia-footer p {
	line-height: 1.6;
}

.stalesia-footer .wp-block-separator {
	margin-block: var(--st-gap-lg) 0;
	border-color: var(--wp--preset--color--line-strong);
}

/* ---------- rytm wewnątrz katalogu ---------- */
.stalesia-catalog {
	display: flex;
	flex-direction: column;
	gap: var(--st-gap-md);
}

.stalesia-catalog > * {
	margin-block: 0;
}

.stalesia-axes > * {
	margin-block: 0;
}

/* ---------- listing z kolumną boczną ---------- */
/* Opis kategorii (do 7,9 tys. znaków) stał nad listą i spychał towar poniżej
   ekranu. Rozbity jest na dwoje: streszczenie stoi obok listy, całość pod nią.
   Kolumna boczna zabiera 16 rem, więc pojawia się dopiero tam, gdzie po niej
   zostaje dość miejsca na komplet kolumn listy (1 024 px przy pięciu atrybutach).
   Poniżej tego progu spada pod listę — wcześniej próg stał na 1100 px i między
   1100 a 1440 px lista była ściskana poniżej własnego minimum. */
.stalesia-catalogwrap {
	display: flex;
	flex-direction: column;
	gap: var(--st-gap-md);
}

.stalesia-catalogmain {
	min-width: 0;
}

/* Bez `position: sticky`. Na archiwum gatunku kolumna ma 1 229 px — przy
   przyklejeniu do góry jej dolna część nigdy nie wjeżdżałaby w kadr, a wcześniej
   ratował to zagnieżdżony pasek przewijania, czyli druga oś przewijania na tej
   samej stronie. W zwykłym przepływie jest przewidywalna przy każdej długości. */
.stalesia-catalogaside {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* Kolumna niesie same streszczenia, ale gdyby trafił tu kiedyś pełny opis,
   nagłówki mają zostać w skali kolumny. Reguła musi mieć wyższą specyficzność
   niż `:root :where(h2)` z theme.json — wariant z `:where()` przegrywał
   i opis kategorii dostawał tu 48 px w kolumnie szerokiej na 256 px. */
.stalesia-catalogaside :is(h2, h3, h4, h5) {
	margin-block: .875rem .375rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.35;
	letter-spacing: 0;
}

.stalesia-catalogaside :is(h2, h3, h4, h5):first-child {
	margin-block-start: 0;
}

/* ---------- pełny opis kategorii pod listą ---------- */
.stalesia-catalogdesc {
	margin-block-start: var(--st-gap-xl);
	padding-block-start: var(--st-gap-lg);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* Opis stoi pod listą jako materiał uzupełniający, więc jego nagłówki nie mogą
   konkurować z H1 strony — bez tego H2 z opisu szło w stopniu tytułu strony.
   Specyficzność 0,1,1 jest tu konieczna: `:root :where(h2)` z theme.json ma
   0,1,0 i wygrywa kolejnością z każdą regułą o tej samej wadze. */
.stalesia-catalogdesc :is(h2, h3, h4, h5) {
	margin-block: 1.75em .5em;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.stalesia-catalogdesc h2 {
	font-size: var(--wp--preset--font-size--xl);
}

.stalesia-catalogdesc h3 {
	font-size: var(--wp--preset--font-size--lg);
}

.stalesia-catalogdesc :is(h4, h5) {
	font-size: var(--wp--preset--font-size--md);
}

.stalesia-catalogdesc :is(p, ul, ol, table) {
	margin-block: 0 1em;
}

.stalesia-catalogdesc :is(h2, h3, h4, h5):first-child {
	margin-block-start: 0;
}

.stalesia-aside__block {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1.125rem 1.25rem;
	margin-block-end: var(--st-gap-md);
}

.stalesia-aside__label {
	margin: 0 0 .5rem;
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.stalesia-aside__type {
	margin: 0 0 .375rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--accent);
}

.stalesia-aside__block :where(p, li) {
	line-height: 1.6;
}

.stalesia-aside__table {
	overflow-x: auto;
	margin-block: .75rem;
}

.stalesia-aside__table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
}

.stalesia-aside__table :where(th, td) {
	padding: .3rem .45rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	text-align: start;
}

.stalesia-aside__more {
	display: inline-block;
	margin-block-start: .5rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

@media (max-width: 1399px) {
	/* `minmax(0, …)`, nie `1fr` — ścieżka automatyczna bierze za minimum
	   min-content zawartości, więc minimalna szerokość listy rozpychała
	   siatkę, a razem z nią cały dokument. */
	.stalesia-catalogwrap {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- strony złożone z sekcji, nie z prozy ---------- */
/* `page.html` podaje treść przez `.stalesia-prose`, czyli z miarą 68 znaków —
   dobrą dla artykułu, za wąską dla strony kontaktowej (rząd „mapa + dwie karty"
   ściskał się do 544 px) i dla siatki wpisów. Te dwie strony deklarują to
   opakowaniem, więc reguła nie zależy od adresu ani od identyfikatora. */
/* Kolumna tekstu na stronie ma zaczynać się tam, gdzie tytuł i okruszki.
   `page.html` prosi o to przez `justifyContent: left`, ale rdzeń honoruje ten
   atrybut wyłącznie w układzie elastycznym — w `constrained` jest bezczynny
   i treść była centrowana: H1 zaczynał się 388 px na lewo od własnego tekstu.
   (Wpisy tego nie miały, bo tam treść stoi w kolumnie, a nie wprost w `main`.)

   Zamiast walczyć z centrowaniem, przenosimy miarę wiersza z samego bloku
   treści na jego dzieci: blok dostaje zwykłą szerokość treści i jest
   centrowany jak nagłówek, a akapity trzymają 68 znaków przy lewej krawędzi. */
.stalesia-main > .wp-block-post-content.stalesia-prose {
	max-width: var(--wp--style--global--content-size);
}

.stalesia-main > .wp-block-post-content.stalesia-prose > * {
	margin-inline: 0;
}

.stalesia-prose > :is(.stalesia-contact, .stalesia-landing) {
	max-width: 60rem;
}

/* Od 900 px kontakt idzie w dwie kolumny (patrz niżej), a 60 rem to na dwie
   kolumny za mało: mapka i telefony obok siebie nie mieściły się i telefony
   spadały pod mapkę. Produkcja daje tej stronie pełne 1320 px — robimy tak samo. */
@media (min-width: 900px) {
	.stalesia-prose > .stalesia-contact {
		max-width: none;
	}
}

/* ---------- strona kontaktowa ---------- */
/* Strona stała na siatce Greenshiftu: pięć poziomów kontenerów, każdy ze swoją
   regułą w `_gspb_post_css`. Po przepisaniu na bloki rdzenia został jeden
   wzorzec — rząd „mapa + dane handlowców" — i to on jest tu opisany. */
.stalesia-contact > .wp-block-group + .wp-block-group {
	margin-block-start: var(--st-gap-xl);
}

.stalesia-contact :is(h2, h3) {
	margin-block: 1.5em .5em;
}

.stalesia-contact :is(h2, h3):first-child {
	margin-block-start: 0;
}

/* Układ jak na produkcji: po lewej „Dział sprzedaży" (mapki i telefony), po
   prawej „Dane firmowe" — z jedną różnicą, o którą prosił właściciel:
   formularz idzie na GÓRĘ prawej kolumny, nad dane firmowe.

   Treści strony nie ruszamy. Sekcje wskazujemy przez `:has()`, nie przez numer
   dziecka, żeby zmiana kolejności bloków w edytorze tego nie rozsypała. */
@media (min-width: 900px) {
	/* Podział 60/40 na życzenie właściciela: mapki i telefony to główna treść
	   tej strony, więc dostają więcej miejsca; formularz i dane firmowe mieszczą
	   się spokojnie w 40%. Po równo karty regionów robiły się tak wąskie, że
	   adresy e-mail łamały się w środku słowa. */
	.stalesia-contact > div {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: var(--st-gap-xl);
		align-items: start;
	}

	/* Prawa kolumna trzyma dane firmowe i formularz — układamy je pionowo,
	   żeby dało się odwrócić kolejność samym `order`. */
	.stalesia-contact > div > div:has(.wp-block-contact-form-7-contact-form-selector) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	/* Grupa ma klasę `is-layout-constrained`, a ta daje dzieciom
	   `margin-inline: auto !important`. W zwykłym bloku to nic nie zmienia, ale
	   w układzie flex automatyczne marginesy CENTRUJĄ element i zwężają go do
	   treści — „Dane firmowe" wychodziło wyśrodkowane i wąskie na 204 px.
	   `!important` jest tu konieczne, bo taka jest reguła rdzenia. */
	.stalesia-contact > div > div:has(.wp-block-contact-form-7-contact-form-selector) > * {
		margin-inline: 0 !important;
	}

	.stalesia-contact > div > div:has(.wp-block-contact-form-7-contact-form-selector)
		> .wp-block-contact-form-7-contact-form-selector {
		order: -1;
	}

	/* W siatce nagłówki i akapity mają zajmować całą szerokość kolumny. */
	.stalesia-contact > div > div > :is(h2, h3, p) {
		max-width: none;
	}

	/* Mapka i dane regionów w jednym rzędzie, jak na produkcji — bez tego
	   „Wschód" spadał pod mapkę. Mapka trzyma szerokość, karty się dopasowują. */
	.stalesia-contact__team {
		flex-wrap: nowrap;
	}

	.stalesia-contact__team > figure {
		flex: 0 0 auto;
		max-width: 230px;
	}

	.stalesia-contact__team > .wp-block-group {
		flex: 1 1 0;
		min-width: 0;
	}

	/* W wąskiej karcie numery i adresy muszą się łamać, inaczej wychodzą poza
	   kartę i zostają ucięte (tak jak na produkcji — tam też łamią się na dwa
	   wiersze). `anywhere` jest potrzebne dla adresów e-mail bez spacji. */
	.stalesia-contact__team > .wp-block-group :is(p, a) {
		overflow-wrap: anywhere;
	}
}

.stalesia-contact__team {
	gap: var(--st-gap-lg);
	margin-block-start: var(--st-gap-md);
}

.stalesia-contact__team > figure {
	flex: 0 0 auto;
	margin: 0;
}

.stalesia-contact__team > figure img {
	height: 200px;
	width: auto;
}

/* Karta z danymi jednego opiekuna: rośnie do połowy rzędu, ale nie zwęża się
   poniżej szerokości numeru telefonu. */
.stalesia-contact__team > .wp-block-group {
	flex: 1 1 13rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1rem 1.125rem;
}

.stalesia-contact__team > .wp-block-group > p {
	margin-block: 0;
	line-height: 1.6;
}

.stalesia-contact__team > .wp-block-group > p:first-child {
	margin-block-end: .375rem;
}

/* ---------- strona docelowa złożona z bloków ---------- */
.stalesia-landing > * + * {
	margin-block-start: var(--st-gap-lg);
}

.stalesia-landing :is(h2, h3) {
	margin-block: 0;
}

/* ---------- charakterystyka gatunku pod listą wyrobów ---------- */
/* Treść przychodzi z artykułu bazy wiedzy (ok. 22 tys. znaków), więc rządzi
   tu miara wiersza i rytm nagłówków — nie ozdoby. */
.stalesia-gradehub {
	margin-block-start: var(--st-gap-xl);
	padding-block-start: var(--st-gap-lg);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.stalesia-gradehub__title {
	margin-block: 0 var(--st-gap-md);
}

.stalesia-gradehub__label {
	margin: 0 0 .5rem;
	font-family: var(--st-data);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.stalesia-gradehub__aliases {
	margin-block-end: var(--st-gap-lg);
}

.stalesia-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.stalesia-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .7rem;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--surface-alt);
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-chip--link:hover {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.stalesia-chip__count {
	color: var(--wp--preset--color--muted);
}

/* Licznik przy pigułce — ile pozycji albo tekstów kryje się pod odsyłaczem. */
.stalesia-chip__num {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
}

.stalesia-chip--link:hover .stalesia-chip__num {
	color: inherit;
}

.stalesia-gradehub__toc {
	margin-block-end: var(--st-gap-lg);
}

/* Sekcje artykułu są tu sekcjami strony, ale nie mogą konkurować z H1 —
   `:root :where(h2)` z theme.json ma 0,1,0, więc potrzeba 0,1,1. */
.stalesia-gradehub__body :is(h2, h3, h4) {
	margin-block: 1.75em .5em;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.stalesia-gradehub__body h2 {
	font-size: var(--wp--preset--font-size--xl);
}

.stalesia-gradehub__body h3 {
	font-size: var(--wp--preset--font-size--lg);
}

.stalesia-gradehub__body h4 {
	font-size: var(--wp--preset--font-size--md);
}

.stalesia-gradehub__body :is(p, ul, ol) {
	margin-block: 0 1em;
}

/* ---------- karta materiałowa gatunku ---------- */
.stalesia-specscard {
	margin-block-start: var(--st-gap-xl);
}

.stalesia-specscard__title {
	margin-block: 0 var(--st-gap-md);
}

.stalesia-specscard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--st-gap-md);
	align-items: start;
}

.stalesia-specscard__box {
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
	padding: 1.125rem 1.25rem;
}

.stalesia-specstable {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--st-data);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--sm);
}

.stalesia-specstable :is(th, td) {
	padding: .35rem 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	text-align: start;
}

.stalesia-specstable th {
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	width: 45%;
}

.stalesia-specstable tr:last-child :is(th, td) {
	border-block-end: 0;
}

/* ---------- odsyłacze do rodzin stali ---------- */
.stalesia-typelinks {
	margin-block-start: var(--st-gap-xl);
	padding-block-start: var(--st-gap-lg);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* ---------- odsyłacz z artykułu do wyrobów ---------- */
.stalesia-hubcta {
	margin-block-start: var(--st-gap-xl);
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--tint);
	border-radius: var(--st-radius);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-gap-md);
}

.stalesia-hubcta__lead {
	margin: 0;
	font-weight: 600;
	max-width: 40ch;
}

/* ---------- pasek produktów (pusty koszyk) ---------- */
.stalesia-strip .stalesia-tiles {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ---------- gatunki pogrupowane po typie ---------- */
.stalesia-grades__group + .stalesia-grades__group {
	margin-block-start: var(--st-gap-md);
	padding-block-start: var(--st-gap-md);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.stalesia-grades__grouptitle {
	margin: 0 0 .25rem;
	font-size: var(--wp--preset--font-size--md);
}

.stalesia-grades__lede {
	margin: 0 0 .625rem;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* ---------- filtry z wielokrotnym wyborem ---------- */
/* Rozwijana lista z checkboxami zamiast selecta: jedna oś to często kilka
   wartości naraz, a select tego nie unosi. Bez skryptu `details` i formularz
   działają same z siebie. */
.stalesia-filter {
	position: relative;
}

.stalesia-filter__summary {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .75rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.stalesia-filter__summary::-webkit-details-marker { display: none; }

.stalesia-filter__summary::after {
	content: "";
	width: .4rem;
	height: .4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.stalesia-filter[open] > .stalesia-filter__summary {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.stalesia-filter__badge:not(:empty) {
	min-width: 1.15rem;
	padding: 0 .3rem;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--st-data);
	font-size: .68rem;
	line-height: 1.15rem;
	text-align: center;
}

.stalesia-filter__panel {
	position: absolute;
	z-index: 30;
	inset-inline-start: 0;
	top: calc(100% + .35rem);
	min-width: 13rem;
	max-height: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: .5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-lg);
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.stalesia-filter__option {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .4rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--xs);
	cursor: pointer;
}

.stalesia-filter__option:hover {
	background: var(--wp--preset--color--surface-alt);
}

/* Przełącznik „Tylko dostępne" — ten sam kształt co pigułki osi filtrów,
   bo stoi z nimi w jednym rzędzie; wciśnięty dostaje obrys w kolorze zakupu. */
.stalesia-filters__avail {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .75rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	cursor: pointer;
	white-space: nowrap;
}

.stalesia-filters__avail input {
	margin: 0;
	accent-color: var(--wp--preset--color--buy);
}

.stalesia-filters__avail:has(input:checked) {
	border-color: var(--wp--preset--color--buy);
}

.stalesia-catalog[aria-busy="true"] {
	opacity: .55;
	transition: opacity .12s ease;
}

@media (max-width: 640px) {
	.stalesia-filter__panel {
		position: static;
		max-height: 12rem;
		box-shadow: none;
		margin-block-start: .35rem;
	}
}

/* ---------- pozycje niedostępne ---------- */
/* Odtworzenie tego, co na starym motywie robił snippet „Wyszarzenie
   niedostępnych produktów" — celował w siatkę Greenshiftu, której nowy katalog
   nie używa. Sam znacznik dostępności motyw pokazywał już wcześniej; brakowało
   wyciszenia całej pozycji, żeby dało się ją pominąć wzrokiem. */
.stalesia-list__row[data-stock="outofstock"],
.stalesia-tile[data-stock="outofstock"] {
	opacity: .62;
}

.stalesia-list__row[data-stock="outofstock"]:hover,
.stalesia-tile[data-stock="outofstock"]:hover {
	opacity: .85;
}

.stalesia-tile[data-stock="outofstock"] .stalesia-tile__media {
	filter: grayscale(100%);
}

.stalesia-list__row[data-stock="outofstock"] .stalesia-list__link {
	text-decoration-color: var(--wp--preset--color--muted);
}

@media (prefers-reduced-motion: no-preference) {
	.stalesia-list__row[data-stock],
	.stalesia-tile[data-stock] {
		transition: opacity .12s ease;
	}
}

/* ---------- karta produktu: tablet ---------- */
/* WooCommerce od 768 px w dół stawia zdjęcie nad zakupem na pełną szerokość —
   na tablecie pionowo zdjęcie 740 px spychało cenę i koszyk o ekran niżej.
   Do 600 px zostają obok siebie. */
@media (min-width: 600px) and (max-width: 768px) {
	body .stalesia-product div.product div.images {
		float: left;
		width: 42%;
	}

	body .stalesia-product div.product div.summary {
		float: right;
		width: 54%;
	}
}

/* Mniej powietrza nad okruszkami na wąskich ekranach. */
@media (max-width: 860px) {
	.stalesia-main {
		padding-block-start: var(--st-gap-sm);
	}
}

/* Od 1280 px: pasek kategorii w jednym rzędzie dzięki gęstszym
   odstępom i o stopień mniejszej czcionce (przy pełnych mieścił się dopiero
   od ~1440 px, niżej odsyłacze pomocnicze spadały do drugiego rzędu). */
@media (min-width: 1280px) {
	.stalesia-mainnav__link {
		padding-inline: .5rem;
		font-size: var(--wp--preset--font-size--sm);
	}

	.stalesia-mainnav__inner {
		column-gap: .5rem;
	}
}

/* ---------- strona główna: elementy przywrócone ze starej strony ---------- */
.stalesia-hero__cta {
	margin-block-start: 1.25rem;
}

.stalesia-hero__btn .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	border-radius: var(--st-radius-btn);
	padding: .8rem 1.5rem;
	font-weight: 600;
}

.stalesia-trusted {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-block-start: 1.75rem;
}

.stalesia-trusted__label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Logotypy zachodzą na siebie jak na stalesia.com — rząd zajmuje mniej miejsca,
   a każdy znak zostaje rozpoznawalny. Kolejność nakładania ustawia `z-index`
   nadany w PHP (pierwszy z lewej leży najwyżej). */
.stalesia-trusted__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stalesia-trusted__item {
	position: relative;
	display: block;
	line-height: 0;
	transition: transform .2s cubic-bezier(.35, .11, .22, 1.16);
}

.stalesia-trusted__item + .stalesia-trusted__item {
	margin-inline-start: -12px;
}

.stalesia-trusted__logos img {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	/* Biała obwódka oddziela nachodzące znaki, cienka linia ratuje logotypy,
	   które same są białe (Orlen) — bez niej gubią się na jasnym tle. */
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 3px var(--wp--preset--color--line);
	filter: grayscale(100%);
	opacity: .75;
	transition: filter .2s ease, opacity .2s ease;
}

/* Najechanie: pełny kolor i lekkie powiększenie; znak wychodzi wtedy na wierzch
   niezależnie od kolejności nakładania. */
.stalesia-trusted__item:hover,
.stalesia-trusted__item:focus-within {
	transform: scale(1.1);
	z-index: 20 !important;
}

.stalesia-trusted__item:hover img,
.stalesia-trusted__item:focus-within img {
	filter: none;
	opacity: 1;
}

/* Dymek z nazwą firmy — styl strony (ciemne tło, zaokrąglenie i cień jak
   w pozostałych nakładkach), nad logotypem, bez przechwytywania kursora. */
.stalesia-trusted__tip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	padding: .35rem .6rem;
	border-radius: var(--st-radius-btn);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: var(--st-shadow-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}

.stalesia-trusted__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-inline-start: -5px;
	border: 5px solid transparent;
	border-top-color: var(--wp--preset--color--contrast);
}

.stalesia-trusted__item:hover .stalesia-trusted__tip,
.stalesia-trusted__item:focus-within .stalesia-trusted__tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Nagłówek sekcji z odsyłaczem „Zobacz wszystkie…" po prawej. */
.stalesia-section-head {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: .25rem 1rem;
}

.stalesia-section-head .stalesia-section-title {
	margin-block-start: 0;
}

.stalesia-section-link {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.stalesia-cta {
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	text-align: center;
}

.stalesia-cta .wp-block-buttons {
	justify-content: center;
}

.stalesia-cta .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	border-radius: var(--st-radius-btn);
	font-weight: 600;
}

/* Tekst „Hurtownia stali nierdzewnej" — treść strony, czytana ciągiem. */
.stalesia-home .stalesia-seotext {
	margin-block-start: var(--wp--preset--spacing--70);
}

.stalesia-home .stalesia-seotext > h3 {
	margin-block-start: 2rem;
}

/* Sekcje tego tekstu są domyślnie zwinięte (inc/render-home.php): pełne 2,5
   tys. słów zostaje w źródle strony, ale nie zajmuje 14 000 px na telefonie.
   Nagłówek sekcji jest jednocześnie przełącznikiem — stąd `<summary>` z H3. */
.stalesia-zwijane {
	border-top: 1px solid var(--wp--preset--color--line);
}

.stalesia-zwijane:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.stalesia-zwijane__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .95rem;
	cursor: pointer;
	list-style: none;
}

.stalesia-zwijane__head::-webkit-details-marker {
	display: none;
}

.stalesia-zwijane__head:hover h3 {
	color: var(--wp--preset--color--accent);
}

.stalesia-home .stalesia-seotext .stalesia-zwijane__head h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
}

.stalesia-zwijane__head::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-inline-end: .35rem;
	border-right: 2px solid var(--wp--preset--color--muted);
	border-bottom: 2px solid var(--wp--preset--color--muted);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.stalesia-zwijane[open] .stalesia-zwijane__head::after {
	transform: rotate(-135deg);
}

.stalesia-zwijane__tresc > :first-child {
	margin-block-start: 0;
}

.stalesia-zwijane__tresc {
	padding-block-end: .75rem;
}

/* Hero na telefonie: blok ma wcięcia z atrybutów bloku (inline), które na
   390 px zostawiały nagłówkowi ~230 px — pięć linii tytułu. */
@media (max-width: 640px) {
	.stalesia-hero.has-background {
		padding: 1.5rem 1.25rem !important;
	}

	.stalesia-hero__title {
		font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
	}

	.stalesia-stats {
		gap: 1rem 1.75rem;
		margin-block-start: 1.5rem;
	}

	.stalesia-stat__value {
		font-size: var(--wp--preset--font-size--xl);
	}
}

/* ---------- pasek górny: jeden wiersz, wyrównany do prawej ---------- */
.stalesia-utility {
	padding-block: .25rem;
}

.stalesia-utility__side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .25rem 1rem;
	font-size: var(--wp--preset--font-size--xs);
}

.stalesia-utility__links {
	display: flex;
	align-items: center;
	gap: .9rem;
}

.stalesia-utility__links > a,
.stalesia-dropdown > summary {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	cursor: pointer;
}

.stalesia-utility__links > a:hover,
.stalesia-dropdown > summary:hover {
	text-decoration: underline;
}

/* „Kalkulatory" — dwie pozycje pod jedną etykietą zamiast dwóch odsyłaczy. */
.stalesia-dropdown {
	position: relative;
}

.stalesia-dropdown > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
}

.stalesia-dropdown > summary::-webkit-details-marker {
	display: none;
}

.stalesia-dropdown > summary::after {
	content: "";
	width: .35rem;
	height: .35rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.stalesia-dropdown__menu {
	position: absolute;
	top: calc(100% + .35rem);
	right: 0;
	z-index: 60;
	min-width: 11rem;
	margin: 0;
	padding: .35rem;
	list-style: none;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-md);
}

.stalesia-dropdown__menu a {
	display: block;
	padding: .45rem .6rem;
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
}

.stalesia-dropdown__menu a:hover {
	background: var(--wp--preset--color--surface-alt);
}

.stalesia-utility__icons {
	display: inline-flex;
	gap: .15rem;
}

.stalesia-iconlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
}

.stalesia-iconlink:hover {
	background: var(--wp--preset--color--base);
}

.stalesia-lang {
	display: inline-flex;
	gap: .15rem;
	padding: 2px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--base);
}

.stalesia-lang a {
	min-width: 2.1rem;
	padding: .1rem .45rem;
	border-radius: var(--st-radius-pill);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.stalesia-lang a[aria-current="true"] {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* YayCurrency przynosi własny rozwijany wybór — tylko go dopasowujemy do paska. */
.stalesia-currency .yay-currency-custom-select__trigger {
	min-height: 0;
	padding: .1rem .55rem;
	border-radius: var(--st-radius-pill);
	font-size: var(--wp--preset--font-size--xs);
}

.stalesia-currency .yay-currency-single-page-switcher {
	margin: 0;
}

/* Konto jako ikona — w jednym rzędzie z przechowalnią i koszykiem. */
.stalesia-account__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--contrast);
}

/* Odsyłacze pomocnicze w menu — tylko w zwartym nagłówku. */
.stalesia-mainnav__item--compact {
	display: none;
}

/* ---------- stopka: dokumenty ---------- */
.stalesia-footer__docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--sm);
}

/* Telefon: odsyłacze pomocnicze przechodzą do menu katalogu (klasa --compact),
   w pasku zostają ikony kontaktu, język i waluta — jeden wiersz na 390 px. */
@media (max-width: 640px) {
	.stalesia-header .stalesia-utility__links {
		display: none;
	}

	.stalesia-header .stalesia-utility__side {
		justify-content: center;
	}

	.stalesia-mainnav__item--compact {
		display: list-item;
	}

	/* Sam „hamburger" — napis „Katalog" zabierał ~60 px, których brakowało
	   wyszukiwarce (placeholder urywał się po kilku znakach). Nazwę przycisku
	   niesie `aria-label`, więc dla czytnika ekranu nic nie ubywa. */
	.stalesia-mainnav__toggle-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.stalesia-header .stalesia-mainnav__toggle {
		width: 44px;
		padding-inline: 0;
		justify-content: center;
	}

	/* Pole z podpowiedziami ma w stylu wtyczki własne minimum szerokości —
	   przy 360 px wypychało stronę w bok (dawało się ją przesuwać). */
	.stalesia-search--fibo .dgwt-wcas-search-wrapp,
	.stalesia-search--fibo .dgwt-wcas-sf-wrapp,
	.stalesia-search--fibo .dgwt-wcas-search-input {
		min-width: 0;
	}

	/* Lupa stoi po prawej (reguła wyżej); na telefonie bliżej krawędzi, a wyściółki
	   węższe, żeby krótki placeholder („Szukaj: DN100 · 1.4404") zmieścił się przed
	   lupą — przy 390 px z zapasem, przy 320 px ucina się tyle samo co przed zmianą.
	   Pole w nagłówku na telefonie i tak tylko otwiera nakładkę wtyczki. */
	.stalesia-search--fibo .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
		right: 12px;
	}

	.stalesia-search--fibo .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
		padding-inline: 12px 46px;
	}
}


/* Od 1280 px strzałka wraca (quiz 28.09, pkt 3 — wzorzec WAI „disclosure
   navigation"): ognisko na nazwie kategorii nie otwiera już panelu, więc
   klawiatura potrzebuje przycisku, a mysz dalej otwiera panel najechaniem.
   23.09 strzałki ukryto, bo po angielsku („Pipes, tubes & Hollow bars") pasek
   łamał się na dwa rzędy — teraz są małe (ikona 11 px w polu 24 × 24 px, minimum
   WCAG 2.5.8), a miejsce oddają ciaśniejsze odstępy: przy 1280 px EN zostaje
   ok. 12 px zapasu w jednym rzędzie (pomiar 28.09). */
@media (min-width: 1280px) {
	.stalesia-mainnav__caretbtn {
		width: 24px;
		height: 24px;
		padding: 0;
		color: var(--wp--preset--color--muted);
	}

	.stalesia-mainnav__caret {
		width: 11px;
		height: 11px;
	}

	.stalesia-mainnav__caretbtn:hover,
	.stalesia-mainnav__item[data-open] > .stalesia-mainnav__caretbtn {
		color: var(--wp--preset--color--accent-hover);
	}

	.stalesia-mainnav__item[data-open] > .stalesia-mainnav__caretbtn .stalesia-mainnav__caret {
		transform: rotate(180deg);
	}

	.stalesia-mainnav__item.has-panel > .stalesia-mainnav__link {
		padding-inline: .375rem 0;
	}

	.stalesia-mainnav__list {
		gap: 0;
	}

	.stalesia-mainnav__inner {
		column-gap: .25rem;
	}

	.stalesia-mainnav__item--aside .stalesia-mainnav__link {
		padding-inline: .375rem;
	}
}

/* 1280–1400 px: zapas dla paska EN (decyzja 28.09). Przy 1280 px „Pipes, tubes & Hollow
   bars…" mieściło się w jednym rzędzie z zapasem 7 px — każda dłuższa nazwa albo inny
   krój z systemu łamały pasek. Węższe wyściółki odsyłaczy (6 → 4 px) dają ok. 22 px więcej;
   nazwy, strzałki 24 × 24 px i układ od 1401 px bez zmian (pomiar: wydajnosc-2809/menu_zapas.py). */
@media (min-width: 1280px) and (max-width: 1400px) {
	.stalesia-mainnav__item.has-panel > .stalesia-mainnav__link {
		padding-inline-start: .25rem;
	}

	.stalesia-mainnav__item--aside .stalesia-mainnav__link {
		padding-inline: .25rem;
	}
}

/* Stopka: cztery równe kolumny. Pierwsza miała 32% przy treści szerokiej na
   ~240 px — dane firmy przyklejały się do lewej krawędzi, a między nimi
   a kolumną „Sklep" zostawało ~270 px pustego pola. */
.stalesia-footer__cols {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 860px) {
	.stalesia-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.stalesia-footer__cols {
		grid-template-columns: 1fr;
	}
}

/* ---------- filtry: liczniki, wyszukiwanie w liście (inc/filters.php) ---------- */
/* Z działającym skryptem lista odświeża się po każdym zaznaczeniu. */
.stalesia-filters.is-live .stalesia-filters__submit {
	display: none;
}

.stalesia-filter__option .stalesia-filter__name {
	flex: 1;
}

.stalesia-filter__num {
	margin-inline-start: auto;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	font-size: .75rem;
}

.stalesia-filter__option[hidden] {
	display: none;
}

/* Wybrana wartość, która przy innych filtrach nie daje już wyników —
   zostaje na liście tylko po to, żeby dało się ją odznaczyć. */
.stalesia-filter__option.is-empty {
	opacity: .55;
}

.stalesia-filter__search {
	position: sticky;
	top: 0;
	z-index: 1;
	width: 100%;
	margin-block-end: .35rem;
	padding: .45rem .6rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: 16px; /* bez powiększania strony na iOS */
}

.stalesia-filters__avail .stalesia-filter__num {
	margin-inline-start: .15rem;
}

.stalesia-filters__avail:has(input:disabled) {
	opacity: .5;
	cursor: not-allowed;
}

/* Pasek informacji o gatunku nad listą (dawniej kolumna boczna). */
.stalesia-catalogaside {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-gap-sm);
}

.stalesia-catalogaside .stalesia-aside__block {
	flex: 1 1 18rem;
	margin: 0;
}

/* ---------- lista: szersze kolumny po zdjęciu kolumny bocznej ---------- */
.stalesia-list {
	--st-col-name: 240px;
	--st-col-attr: 96px;
	--st-col-stock: 136px;
	--st-col-price: 150px;
}

/* Nagłówek kolumny nigdy nie wchodzi na sąsiada: przy braku miejsca kończy
   się wielokropkiem (pełna nazwa w podpowiedzi), zamiast zlewać się
   z następną etykietą jak „POWIERZCHNIADOSTĘPNOŚĆ". */
.stalesia-list__head .stalesia-list__cell {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing: .04em;
}

/* Cena: brutto w jednej linii, netto pod nią mniejszym stopniem —
   w 128 px „(48 018,72 zł netto)" łamało się na trzy linie. */
.stalesia-list__cell--price .woocommerce-Price-amount {
	white-space: nowrap;
}

.stalesia-list__cell--price .woocommerce-price-suffix {
	display: block;
	font-weight: 400;
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

/* Wiersz z logo: niższy, logo mniejsze — nagłówek zabierał ~165 px. */
.stalesia-masthead {
	padding-block: .75rem;
}

.stalesia-masthead__inner {
	min-height: 64px;
}

@media (min-width: 1280px) {
	.stalesia-header .stalesia-brand .custom-logo {
		width: 150px;
		height: auto;
	}
}

/* Elementy pozycjonowane absolutnie w komórkach (tekst dla czytników ekranu)
   uciekały spod przewijania tabeli i rozpychały całą stronę w poziomie. */
.stalesia-list {
	position: relative;
}

/* 861–1279 px: węższe minima kolumn — tabela z pięcioma atrybutami mieści
   się na 1024 px bez przewijania (942 px przy 984 px dostępnych). */
@media (max-width: 1279px) {
	.stalesia-list {
		--st-col-name: 180px;
		--st-col-attr: 80px;
		--st-col-stock: 118px;
		--st-col-price: 132px;
		--st-col-action: 112px;
	}

	.stalesia-list__cell--attr {
		padding-inline: .45rem;
		font-size: var(--wp--preset--font-size--xs);
		white-space: nowrap;
	}

	.stalesia-list__head .stalesia-list__cell {
		font-size: .6875rem;
		letter-spacing: .02em;
		padding-inline: .45rem;
	}

	.stalesia-list__head .stalesia-list__cell--name {
		padding-inline-start: 1rem;
	}
}

/* ---------- wybór długości w wierszu listy ---------- */
.stalesia-buy {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.stalesia-buy__len {
	width: 100%;
	min-height: 36px;
	padding: .3rem 1.6rem .3rem .5rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 8px;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right .55rem center;
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
	appearance: none;
	cursor: pointer;
}

.stalesia-buy__len:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.stalesia-buy .added_to_cart {
	font-size: var(--wp--preset--font-size--xs);
	text-align: center;
}

[data-buy-price][aria-busy="true"] {
	opacity: .45;
}

@media (max-width: 860px) {
	/* Telefon: długość i koszyk jeden pod drugim, na całą szerokość kolumny —
	   w jednym rzędzie z odsyłaczem „Zobacz koszyk" lista zwężała się do strzałki. */
	.stalesia-buy__len {
		font-size: 16px; /* bez powiększania strony na iOS */
	}
}

/* ==========================================================================
   Katalog z kolumną filtrów po lewej (inc/filters.php)
   ========================================================================== */
.stalesia-catalog.has-sidebar {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: var(--st-gap-lg);
	align-items: start;
}

.stalesia-results {
	display: flex;
	flex-direction: column;
	gap: var(--st-gap-sm);
	min-width: 0;
}

.stalesia-results[aria-busy="true"] {
	opacity: .55;
	transition: opacity .12s ease;
}

/* Kolumna płynie z treścią: bez własnego paska przewijania i bez przyklejania
   do okna. Wcześniej `max-height: 100vh` + `overflow-y: auto` dawały panel
   z osobnym przewijaniem, co przy zwiniętych grupach nie ma już sensu. */
.stalesia-sidebar {
	padding: .25rem 1rem 1rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--st-radius);
	box-shadow: var(--st-shadow-sm);
}

.stalesia-sidebar__head,
.stalesia-sidebar__foot {
	display: none;
}

.stalesia-sidebar .stalesia-filters {
	display: block;
	padding: 0;
	background: none;
	box-shadow: none;
}

.stalesia-fgroup {
	padding-block: .75rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.stalesia-fgroup:last-of-type {
	border-bottom: 0;
}

.stalesia-fgroup__head {
	display: flex;
	align-items: center;
	gap: .4rem;
	list-style: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.stalesia-fgroup__head::-webkit-details-marker {
	display: none;
}

/* Strzałka zwijania po prawej. */
.stalesia-fgroup__head::after {
	content: "";
	margin-inline-start: auto;
	width: .45rem;
	height: .45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .12s ease;
}

.stalesia-fgroup:not([open]) > .stalesia-fgroup__head::after {
	transform: rotate(-45deg);
}

.stalesia-fgroup__badge:empty {
	display: none;
}

.stalesia-fgroup__badge {
	min-width: 1.25rem;
	padding: 0 .35rem;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: .7rem;
	line-height: 1.25rem;
	text-align: center;
}

.stalesia-fgroup__list {
	display: flex;
	flex-direction: column;
	gap: .05rem;
	margin-block-start: .5rem;
}

.stalesia-fopt {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .3rem .35rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

.stalesia-fopt:hover {
	background: var(--wp--preset--color--surface-alt);
}

.stalesia-fopt input {
	margin: 0;
	flex: none;
	accent-color: var(--wp--preset--color--accent);
}

.stalesia-fopt__name {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.stalesia-fopt__num {
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}

.stalesia-fopt.is-empty {
	opacity: .55;
}

.stalesia-fopt[hidden] {
	display: none;
}

/* „+ Pokaż więcej": dodatkowe wartości ukryte, dopóki grupa nie jest
   rozwinięta albo przeszukiwana. */
.stalesia-fgroup:not(.is-expanded):not(.is-searching) .stalesia-fopt.is-extra {
	display: none;
}

.stalesia-fgroup__more {
	margin-block-start: .35rem;
	padding: .25rem .35rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--accent);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	cursor: pointer;
}

.stalesia-fgroup.is-searching .stalesia-fgroup__more {
	display: none;
}

.stalesia-fgroup__search {
	width: 100%;
	margin-block-start: .5rem;
	padding: .4rem .55rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 6px;
	font: inherit;
	font-size: 16px;
}

.stalesia-price-range {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-block-start: .5rem;
}

.stalesia-price-range label {
	flex: 1;
}

.stalesia-price-range input {
	width: 100%;
	padding: .4rem .5rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 6px;
	font: inherit;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

/* W wąskiej kolumnie „do 207 600" nie mieściło się w polu. Na telefonie
   zostaje 16 px — mniejsza czcionka pola powoduje powiększenie strony w iOS. */
@media (min-width: 1024px) {
	.stalesia-price-range input {
		padding-inline: .4rem;
		font-size: .875rem;
	}
}

/* Pasek nad listą */
.stalesia-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
}

.stalesia-toolbar .stalesia-count {
	margin: 0;
}

.stalesia-toolbar__spacer {
	flex: 1;
}

.stalesia-toolbar__sort {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.stalesia-toolbar__sort select {
	padding: .35rem 1.6rem .35rem .55rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right .6rem center;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	appearance: none;
}

.stalesia-toolbar__filters {
	display: none;
	align-items: center;
	gap: .4rem;
	min-height: 40px;
	padding: .4rem .9rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
}

/* Aktywne filtry */
.stalesia-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
}

.stalesia-chip--active {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	border-radius: var(--st-radius-pill);
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: none;
}

.stalesia-chip--active:hover {
	background: var(--wp--preset--color--line-strong);
}

.stalesia-active__clear {
	font-size: var(--wp--preset--font-size--xs);
}

/* Od 1024 px kolumna filtrów jest zawsze widoczna — przycisk „Filtry" zostaje
   tylko dla wąskich ekranów, gdzie otwiera wysuwany panel. */

/* Poniżej 1024 px kolumna staje się wysuwanym panelem. */
@media (max-width: 1023px) {
	.stalesia-catalog.has-sidebar {
		display: block;
	}

	.stalesia-toolbar__filters {
		display: inline-flex;
	}

	.stalesia-sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 1000;
		width: min(22rem, 88vw);
		max-height: none;
		border-radius: 0;
		box-shadow: var(--st-shadow-lg);
		transform: translateX(-102%);
		transition: transform .2s ease;
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.stalesia-sidebar.is-open {
		transform: none;
	}

	.stalesia-sidebar .stalesia-filters {
		flex: 1;
		overflow-y: auto;
		padding: 0 1rem;
	}

	.stalesia-sidebar__head,
	.stalesia-sidebar__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .75rem 1rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.stalesia-sidebar__foot {
		border-top: 1px solid var(--wp--preset--color--line);
		border-bottom: 0;
	}

	.stalesia-sidebar__foot .stalesia-btn {
		width: 100%;
		min-height: 44px;
	}

	.stalesia-sidebar__title {
		margin: 0;
		font-weight: 700;
	}

	.stalesia-sidebar__close {
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--surface-alt);
		font-size: 1.4rem;
		cursor: pointer;
	}

	/* Przyciemnienie tła pod otwartym panelem. */
	.stalesia-sidebar.is-open::before {
		content: "";
		position: fixed;
		inset: 0 0 0 min(22rem, 88vw);
		background: rgba(17, 17, 17, .4);
	}

	.stalesia-no-scroll,
	.stalesia-no-scroll body {
		overflow: hidden;
	}
}

/* ---------- opis kategorii pod listą: szerzej, wyśrodkowany, dwie kolumny ---------- */
/* W wąskiej kolumnie po lewej (68 znaków) 5 tys. znaków opisu dawało kilka
   ekranów tekstu przy pustej prawej połowie strony. Dwie kolumny tekstu
   o czytelnej długości wiersza skracają go mniej więcej o połowę. */
.stalesia-catalogdesc.stalesia-prose {
	max-width: 1100px;
	margin-inline: auto;
}

/* Opis zwinięty w sekcje (`stalesia_zwin_sekcje()`) nie idzie w łamy: rozwinięcie
   sekcji w lewym łamie przestawiałoby zawartość prawego. Zamiast tego jedna
   kolumna o mierze, w której da się czytać rozwinięty tekst. */
/* Wspólne dla tekstów zwiniętych w sekcje (opis kategorii, opracowanie gatunku):
   miarę trzyma sam kontener, a sekcje sięgają jego krawędzi. Bez tego proza
   ograniczała każde dziecko do 68 znaków i nagłówki akordeonu kończyły się
   grubo przed prawym bokiem bloku. */
.stalesia-zwijane-blok.stalesia-prose {
	max-width: 46rem;
	margin-inline: auto;
}

.stalesia-zwijane-blok > * {
	max-width: none;
}

@media (min-width: 900px) {
	.stalesia-catalogdesc {
		columns: 2 28rem;
		column-gap: 3rem;
	}

	.stalesia-catalogdesc--zwijany {
		columns: auto;
	}

	.stalesia-catalogdesc :is(h2, h3, h4, h5) {
		break-after: avoid;
	}

	.stalesia-catalogdesc :is(li, table, figure) {
		break-inside: avoid;
	}

	.stalesia-catalogdesc > :first-child {
		margin-block-start: 0;
	}
}

/* ---------- gatunki na stronie kategorii ---------- */
.stalesia-grades__title {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--contrast);
}

.stalesia-grades__intro {
	max-width: 70ch;
	margin-block: .25rem 1rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Gotowe przedziały cen — wyglądają jak opcje radiowe. */
.stalesia-fopt--bucket {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.stalesia-fopt__radio {
	flex: none;
	width: 14px;
	height: 14px;
	border: 1.5px solid var(--wp--preset--color--line-strong);
	border-radius: 50%;
}

.stalesia-fopt--bucket.is-active .stalesia-fopt__radio {
	border: 4px solid var(--wp--preset--color--accent);
}

.stalesia-fopt--bucket.is-active {
	font-weight: 600;
}

.stalesia-price-range__label {
	margin: .6rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Dostępność — poprawki z audytu 25.09.2026 (agent „front”, raport
   docs/raporty/2026-09-25-front.md). Paleta w theme.json przyciemniona
   minimalnie do AA: akcja #326CFF → #2E63EB, najechanie #5383FD → #2856CC
   (ciemniej zamiast jaśniej — jaśniejszy ton nie spełnia 4,5:1 z białym
   napisem), zakup #09941c → #087f18, szary #6f6f6f → #666666.
   ========================================================================== */

/* Napis w kolorze akcji na błękitnym tle (--tint, #e2e8f3): #2E63EB daje tam
   4,2:1 — napisy na tym tle dostają ciemniejszy ton z palety (5,2:1). */
.stalesia-grade__eyebrow,
.stalesia-cat--ask .stalesia-cat__name,
.stalesia-mainnav__link:hover,
.stalesia-mainnav__link.is-current,
.stalesia-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-hover);
}

/* Okruszki: odnośnik między szarym tekstem odróżniał się tylko kolorem
   (1,1:1 względem otoczenia) — delikatne podkreślenie (WCAG 1.4.1). */
.stalesia-crumbs a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.stalesia-crumbs a:hover {
	text-decoration-color: currentColor;
}

/* Pole wyszukiwarki w nagłówku: wtyczka zdejmuje obrys z pola i przycisku,
   więc ognisko klawiatury było niewidoczne (WCAG 2.4.7). Obrys dostaje całe
   pole (ramka wokół pola i lupy) oraz przycisk. */
.stalesia-search--fibo .dgwt-wcas-sf-wrapp:has(.dgwt-wcas-search-input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.stalesia-search--fibo .dgwt-wcas-search-submit:focus-visible,
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar :is(button, a):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Natywna lista długości na karcie produktu jest schowana wizualnie (zastępują
   ją przyciski długości), ale wciąż przyjmowała ognisko klawiatury i była
   czytana jako drugie pole bez etykiety. WooCommerce czyta jej wartość także
   przy visibility: hidden. */
.stalesia-lengths__native {
	visibility: hidden;
}

@media (max-width: 1023px) {
	/* Zamknięta szuflada filtrów stoi poza ekranem, ale jej pola zostawały
	   w kolejności Tab — kilkadziesiąt niewidocznych przystanków (WCAG 2.4.7). */
	.stalesia-sidebar {
		visibility: hidden;
		transition: transform .2s ease, visibility 0s linear .2s;
	}

	.stalesia-sidebar.is-open {
		visibility: visible;
		transition: transform .2s ease;
	}
}

/* Wyszarzone pozycje niedostępne (opacity .62): szary tekst (SKU, „w dostawie")
   spadał do 2,6:1. Tekst w takich wierszach dostaje kolor podstawowy — po
   wyszarzeniu wygląda jak dotychczasowy szary, ale ma 5:1. */
.stalesia-list__row[data-stock="outofstock"] :is(.stalesia-list__sku, .stalesia-stock.is-out, .woocommerce-price-suffix),
.stalesia-tile[data-stock="outofstock"] :is(.stalesia-list__sku, .stalesia-tile__sku, .stalesia-stock.is-out, .woocommerce-price-suffix) {
	color: var(--wp--preset--color--contrast);
}

/* Wtyczka upsell_cert (przycisk „Dodaj” certyfikatu) bierze kolor z tokenów
   Greenshiftu z zapasowym #326CFF (4,4:1 z białym napisem) — podajemy jej tokeny
   z palety motywu. */
/* To samo dla banera zgód (wtyczka stalesia-cookie-consent, tokeny --scc-*; jej
   arkusz stoi przed main.css, więc wygrywa ta deklaracja). Tylko kolory —
   zachowanie banera bez zmian. */
:root {
	--gs-colorcolor1: var(--wp--preset--color--accent);
	--gs-colorcolor2: var(--wp--preset--color--accent-hover);
	--scc-accent: var(--wp--preset--color--accent);
	--scc-accent-hover: var(--wp--preset--color--accent-hover);
}

/* Profil gatunku z danych katalogu (inc/grade-hub.php): odsyłacz do rodziny
   w szarym zdaniu — podkreślenie (WCAG 1.4.1). */
.stalesia-narequest__label a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Profil gatunku (inc/grade-hub.php): nagłówek „Oznaczenia równoważne” przylegał
   do listy kategorii bez odstępu — czytelny podział sekcji. */
.stalesia-linklist + .stalesia-grades__title {
	margin-top: 1.25rem;
}