/* Stockinette — strony złożone z bloków Kadence.
 *
 * Układ, tła, odstępy i rozmiary nagłówków niosą teraz atrybuty bloków Kadence,
 * więc klient zmienia je w edytorze. Ten plik dokłada wyłącznie to, czego bloki
 * nie wyrażają: osadzenie w motywie, wariant przycisku obrysowego i cyfry
 * tabelaryczne w danych liczbowych.
 *
 * Jeśli coś da się ustawić atrybutem bloku — ma być ustawione atrybutem, a nie
 * dopisane tutaj. Inaczej edycja w Gutenbergu przestaje działać.
 */

/* ---------- Osadzenie w motywie ----------
 * Wiersze Kadence są pełnej szerokości i same niosą swoje odstępy, więc
 * opakowania Kadence nie mogą dokładać własnych. Podstrony załatwiają to metą
 * wpisu (_kad_post_content_style = unboxed, _kad_post_vertical_padding = hide);
 * strona główna nie ma jej wszędzie, stąd ten wyjątek.
 */

.home .content-container,
.home .entry-content-wrap,
.home .entry-content,
.home .site-main {
	margin: 0;
	padding: 0;
}

/* Telefon i e-mail dziedziczą oliwkowy kolor akcentu z palety, który na tle
 * #0F1822 ma kontrast poniżej progu czytelności. */
.kb-row-layout-wrap.stk-dark a:not(.kb-button) {
	color: var(--color-white);
	text-decoration: none;
}

.kb-row-layout-wrap.stk-dark a:not(.kb-button):hover {
	color: var(--color-primary-100);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Mikrotypografia ----------
 * Sekcje otwierają się samym nagłówkiem. Stała tu wcześniej mikroetykieta
 * (.stk-kicker) — usunięta razem z blokami, bo w każdym szablonie wygląda tak
 * samo i czyta się jak wypełniacz, a nie jak treść.
 */

/* Kolumna otwarta linią — indeks i nagłówek wiszą pod regułą, bez pudełka. */
.stk-ruled > .kt-inside-inner-col {
	border-top: 1px solid var(--color-neutral-300);
	padding-top: var(--space-5);
}

/* Numer i telefon jako duża typografia, nie drobny podpis. */
.stk-line a {
	color: inherit;
	text-decoration: none;
}

.stk-line a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Dane liczbowe ----------
 * Gramatura, szerokość i numery kroków w Plex Mono z cyframi tabelarycznymi —
 * kolumny liczb układają się w pionie i skanuje się je wzrokiem.
 */

.stk-num,
.stk-num .kt-adv-heading-inner,
.kb-icon-list-item .kt-svg-icon-list-text {
	font-variant-numeric: tabular-nums;
}

.stk-num {
	font-family: var(--font-mono);
	letter-spacing: 0.04em;
	color: var(--text-accent);
}

/* Parametry na kaflu — dane, nie proza, więc mono i cyfry tabelaryczne.
 * Bez własnego koloru: kafel dziedziczy go po kolumnie, dzięki czemu ta sama
 * klasa działa i na zdjęciu z ciemną przesłoną, i na jasnym tle. */
.stk-meta {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

/* Tabela warunków — gramatury, terminy i metry porównuje się w pionie. */
.wp-block-kadence-table td:last-child {
	font-variant-numeric: tabular-nums;
}

/* Kontener tabeli bez pasków przewijania. Kadence dopisuje każdej tabeli
 * overflow-x: auto (wystarcza domyślna jednostka maxWidth, której nie da się
 * zdjąć w edytorze), a przeglądarka zamienia to też na overflow-y: auto.
 * Animacja wejścia przesuwa wiersze o 24 px, więc przez sekundę treść była
 * wyższa od kontenera i przy wejściu pojawiał się pionowy pasek. Tabele są
 * dwukolumnowe i zawijają tekst — w spoczynku nie przepełniają się nawet na
 * telefonie. Dwie klasy, bo reguła Kadence stoi w treści strony, za arkuszem. */
.wp-block-kadence-table.kb-table-container {
	overflow: visible;
}

/* ---------- Karta produktu ----------
 * Tabela parametrów materiału. WooCommerce wyrównuje etykiety do prawej i
 * pochyla wartości — przy kolumnie liczb obie rzeczy utrudniają skanowanie.
 */

.woocommerce-product-attributes-item__label {
	text-align: left;
	font-weight: 600;
}

.woocommerce-product-attributes-item__value,
.woocommerce-product-attributes-item__value p {
	font-style: normal;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

/* Lista w opisie produktu to zwykłe <ul> z edytora WooCommerce — dostaje ten
 * sam wygląd co listy ikonowe: ptaszek w kolorze akcentu w kółku i włosowe
 * linie między pozycjami. Ptaszek jest maską, bo pseudo-element nie przyjmie
 * SVG z currentColor; grubość kreski ta sama co w listach Kadence. */
.woocommerce-Tabs-panel--description ul {
	list-style: none;
	margin: var(--space-5) 0;
	padding: 0;
}

.woocommerce-Tabs-panel--description ul li {
	position: relative;
	margin: 0;
	padding: var(--space-3) 0 var(--space-3) calc(1.5rem + var(--space-4));
	border-top: 1px solid rgb(22 29 34 / 0.1);
	line-height: 1.55;
	text-wrap: pretty;
}

.woocommerce-Tabs-panel--description ul li:first-child {
	border-top: 0;
	padding-top: 0;
}

.woocommerce-Tabs-panel--description ul li:last-child {
	padding-bottom: 0;
}

.woocommerce-Tabs-panel--description ul li::before,
.woocommerce-Tabs-panel--description ul li::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--space-3) + 0.05rem);
	width: 1.5rem;
	height: 1.5rem;
}

.woocommerce-Tabs-panel--description ul li:first-child::before,
.woocommerce-Tabs-panel--description ul li:first-child::after {
	top: 0.05rem;
}

.woocommerce-Tabs-panel--description ul li::before {
	border-radius: 50%;
	background: rgb(138 127 108 / 0.16);
}

.woocommerce-Tabs-panel--description ul li::after {
	background-color: var(--text-accent);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8125rem no-repeat;
}

/* Notka o próbce jest przypisem do przycisku, nie akapitem treści. */
.luna-enquiry__note {
	font-size: var(--font-size-body-sm);
	color: var(--text-muted);
	margin: var(--space-3) 0 0;
}

/* ---------- Formularz kontaktowy (Contact Form 7) ----------
 * CF7 renderuje własny markup i nie da się mu podać klas design systemu, więc
 * jego kontrolki dostają tu ten sam wygląd co .luna-input z components.css —
 * te same tokeny, nie skopiowane wartości. Siatkę dwukolumnową niosą klasy
 * .luna-form__row wpisane w szablon formularza w panelu CF7.
 */

/* Odstęp między polami niesie sam kontener — jedna wartość zamiast marginesów
 * doklejanych do każdego elementu z osobna. CF7 nie dokłada już własnych
 * akapitów (filtr wpcf7_autop_or_not w functions.php), więc nic tego nie psuje. */
.wpcf7 .luna-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.luna-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

@media (max-width: 767px) {
	.luna-form__row { grid-template-columns: 1fr; }
}

/* Marginesy zerujemy wprost: motyw nadaje je akapitom i formularzom, a tutaj
 * rytm ma pochodzić wyłącznie z gap kontenera. */
.wpcf7 .luna-form > *,
.wpcf7 .luna-form__row > *,
.wpcf7 .luna-form p {
	margin: 0;
}

/* Podpowiedź „e-mail albo telefon" należy do pary pól nad nią, więc siedzi
 * bliżej niej niż do następnego pola. */
.wpcf7 .luna-form__note {
	margin-top: calc(-1 * var(--space-2)) !important;
}

/* Przycisk odsunięty od zgody — to koniec formularza, nie kolejne pole. */
.wpcf7 .luna-form__submit {
	margin-top: var(--space-2) !important;
}

/* CF7 wstawia swój komunikat na końcu formularza jako element blokowy. */
.wpcf7 .wpcf7-response-output {
	margin: var(--space-2) 0 0;
}

.wpcf7 .luna-form__field label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.luna-form__req { color: var(--color-error); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-4);
	border: var(--border-width) solid var(--border-strong-color);
	border-radius: var(--radius-field);
	background: var(--color-white);
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: var(--font-size-body);
	line-height: var(--line-height-ui);
	transition: var(--transition-color), box-shadow var(--duration-fast) var(--ease-default);
}

.wpcf7 textarea { min-height: auto; }

.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover { border-color: var(--color-neutral-400); }

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--color-primary-700);
	box-shadow: var(--focus-shadow);
}

/* Zgoda: pole wyboru i tekst w jednej linii, tekst nie podwija się pod znacznik. */
.wpcf7 .luna-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: var(--font-size-body-sm);
	color: var(--text-secondary);
}

.wpcf7 .luna-form__consent .wpcf7-list-item { margin: 0; }

/* Wygląd przycisku wysyłki niesie controls.css — jeden system dla bloków,
 * WooCommerce i CF7. */

/* Komunikaty CF7 mają domyślnie grubą ramkę w kolorach spoza palety. */
.wpcf7 form .wpcf7-response-output {
	margin: var(--space-5) 0 0;
	padding: var(--space-4);
	border: var(--border-width) solid var(--border-strong-color);
	border-radius: var(--radius-field);
	font-size: var(--font-size-body-sm);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--color-error);
	background: var(--color-error-surface);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: var(--space-2);
	color: var(--color-error);
	font-size: var(--font-size-body-sm);
}

/* ---------- Listy ikonowe ----------
 * Kadence daje liście tylko kolor ikony i odstęp 5 px, a resztę bierze z własnego
 * arkusza: ikona 1em wyśrodkowana w pionie, pozycje ściśnięte bez rytmu. Tu
 * dostają układ arkusza specyfikacji — pozycje przedzielone włosową linią,
 * znacznik w miękkim kółku wyrównany do pierwszego wiersza i interlinia, przy
 * której dwuwierszowa pozycja nie zlewa się z następną.
 *
 * Linia i kółko liczą kolor od currentColor, a nie od palety. Listy na ciemnym
 * tle mają kolor tekstu i ikony z atrybutów bloku (ON_DARK), więc jedna reguła
 * obsługuje jasne i ciemne sekcje.
 *
 * Selektory są celowo ciężkie. Arkusz bloku ma `.wp-block-kadence-iconlist
 * ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap { padding: 0 }` (0,3,1),
 * a CSS generowany osobno dla każdej listy (`grid-row-gap: 5px`, też 0,3,1)
 * stoi w treści strony, za naszym arkuszem. Stąd `ul.kt-svg-icon-list`
 * w każdej regule, [class*="kt-svg-icon-list-items"] i podwojona klasa listy.
 */
.wp-block-kadence-iconlist[class*="kt-svg-icon-list-items"] ul.kt-svg-icon-list.kt-svg-icon-list {
	row-gap: 0;
	column-gap: var(--space-10);
	margin: 0;
}

.wp-block-kadence-iconlist[class*="kt-svg-icon-list-items"] ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap {
	align-items: flex-start;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-top: 1px solid rgb(22 29 34 / 0.1);
	border-top-color: color-mix(in srgb, currentColor 14%, transparent);
	line-height: 1.55;
}

/* Lista zaczyna się i kończy równo z tekstem obok — bez linii nad pierwszą
 * pozycją i bez odstępu pod ostatnią. W dwóch kolumnach pierwszy wiersz to
 * dwie pierwsze pozycje; na telefonie lista wraca do jednej kolumny. */
.wp-block-kadence-iconlist[class*="kt-svg-icon-list-items"] ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:first-child,
.wp-block-kadence-iconlist.kt-svg-icon-list-columns-2 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:nth-child(2) {
	border-top: 0;
	padding-top: 0;
}

.wp-block-kadence-iconlist[class*="kt-svg-icon-list-items"] ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:last-child {
	padding-bottom: 0;
}

@media (max-width: 767px) {
	.wp-block-kadence-iconlist.kt-mobile-svg-icon-list-columns-1 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap:nth-child(2) {
		border-top: 1px solid rgb(22 29 34 / 0.1);
		border-top-color: color-mix(in srgb, currentColor 14%, transparent);
		padding-top: var(--space-3);
	}
}

/* Znacznik: ikona z bloku w kółku z 16% jej własnego koloru. Wysokość kółka
 * równa się wysokości wiersza, więc przy zawijaniu stoi przy pierwszej linii. */
.wp-block-kadence-iconlist[class*="kt-svg-icon-list-items"] ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.05rem 0 0;
	padding: 0;
	border-radius: 50%;
	background: rgb(138 127 108 / 0.16);
	background: color-mix(in srgb, currentColor 16%, transparent);
	font-size: 0.8125rem;
}

.wp-block-kadence-iconlist[class*="kt-svg-icon-list-items"] ul.kt-svg-icon-list .kt-svg-icon-list-single svg {
	stroke-width: 2.5;
}

.wp-block-kadence-iconlist[class*="kt-svg-icon-list-items"] ul.kt-svg-icon-list .kt-svg-icon-list-text {
	flex: 1;
	min-width: 0;
	text-wrap: pretty;
}

/* Lista parametrów materiału wyróżnionego. */
.stk-specs .kt-svg-icon-list-text {
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

/* Ta lista nie ma znacznika — parametry to dane, nie wyliczenie korzyści.
 * Kadence i tak zapisuje pusty SVG w miejscu ikony, więc bez tego zostaje
 * samo wcięcie. :has(svg:empty) trafia wyłącznie w ten pusty placeholder:
 * gdy klient wybierze w edytorze ikonę, reguła przestaje obowiązywać.
 * !important, bo blok zapisuje display: inline-flex stylem w atrybucie. */
.stk-specs .kt-svg-icon-list-single:has(svg:empty) {
	display: none !important;
}

/* ---------- Stopka ----------
 * Układ i treść niesie konstruktor stopki Kadence oraz zwykłe widgety, więc
 * klient przestawia kolumny w Dostosuj i edytuje treść w Widgetach. Tutaj
 * zostaje tylko wygląd: oddzielenie od strony, rytm odnośników i skala znaku.
 */

.site-footer {
	background-color: var(--color-neutral-50);
	background-image: var(--gradient-band);
	border-top: var(--border-width) solid var(--border-subtle);
}

/* Pas z tytułem nad katalogiem, kategoriami i wynikami wyszukiwania. Kolor
 * (paleta 7) daje Kadence; gradient kładziemy na nim, więc bez obsługi
 * gradientów zostaje dotychczasowe tło. */
.entry-hero-container-inner {
	background-image: var(--gradient-accent-soft);
}

.site-middle-footer-wrap .site-footer-row {
	padding-block: var(--space-20);
	gap: var(--space-10);
}

/* Znak firmowy. Dopóki logo nie jest wgrane w Dostosuj → Tożsamość witryny,
 * rolę znaku pełni tytuł witryny, więc musi mieć skalę znaku, a nie akapitu. */
.stk-footer__logo img { max-width: 150px; height: auto; }

.stk-footer__wordmark,
.stk-footer__wordmark a {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-heading);
	color: var(--text-primary);
	text-decoration: none;
}

.stk-footer__lead {
	margin: var(--space-4) 0 0;
	max-width: 34ch;
	font-size: var(--font-size-body-sm);
	color: var(--text-secondary);
}

/* Nagłówek kolumny jest etykietą nawigacji, nie nagłówkiem sekcji — stąd
 * skala interfejsu zamiast skali treści. */
.stk-footer__heading {
	margin: 0 0 var(--space-5);
	font-size: var(--font-size-body-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-normal);
	color: var(--text-primary);
}

/* Odnośniki w kolumnie to lista, a nie akapity — domyślne marginesy akapitu
 * rozrzucają je na odstęp wiersza tekstu ciągłego. */
.stk-footer__link {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-body-sm);
	line-height: var(--line-height-ui);
}

.stk-footer__link a {
	color: var(--text-secondary);
	text-decoration: none;
}

.stk-footer__link a:hover {
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.stk-footer__contact {
	margin: 0;
	font-size: var(--font-size-body);
	line-height: 1.9;
}

.stk-footer__contact a {
	color: var(--text-primary);
	text-decoration: none;
}

.stk-footer__contact a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.stk-footer__hours {
	margin: var(--space-2) 0 var(--space-5);
	font-size: var(--font-size-body-sm);
	color: var(--text-muted);
}

.stk-footer__cta { margin: 0; }

/* ---------- Dolny pas ----------
 * Prawa autorskie po lewej, menu zapasowe po prawej, oddzielone linią.
 */

.site-bottom-footer-wrap .site-footer-row {
	padding-block: var(--space-6);
	border-top: var(--border-width) solid var(--border-subtle);
	align-items: center;
}

.site-bottom-footer-wrap .site-info,
.footer-navigation-inner {
	font-size: var(--font-size-body-sm);
	color: var(--text-muted);
}

.footer-navigation-inner ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navigation-inner a {
	color: var(--text-secondary);
	text-decoration: none;
}

.footer-navigation-inner a:hover {
	color: var(--text-primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (max-width: 767px) {
	.site-middle-footer-wrap .site-footer-row { padding-block: var(--space-12); }
	.footer-navigation-inner ul { justify-content: flex-start; }
}

/* ---------- Grupy materiałów w sidebarze katalogu ----------
 * Dwie pozycje na czele listy kategorii są innym poziomem nawigacji niż
 * rodzaje dzianin pod nimi: prowadzą na strony opisowe, nie na listing.
 * Bold niesie tę różnicę, linia oddziela oba poziomy.
 *
 * Odkreślenie wisi na `--last` z filtru, nie na `:last-of-type`: grupy stoją
 * na początku listy, więc żadna z nich nigdy nie jest ostatnim `li`.
 */

.widget_product_categories .product-categories .luna-cat-group > a {
	font-weight: var(--font-weight-semibold);
}

.widget_product_categories .product-categories .luna-cat-group--last {
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: var(--border-strong);
}

/* ---------- Kafle branżowe („Wybierz po branży") ----------
 * Znak nad podpisem. Biblioteka ikon Kadence nie ma ani sofy, ani pikowanej
 * tapicerki, a blok ikony przyjmuje wyłącznie nazwę z tej biblioteki
 * (atrybut `icon`) — dlatego te cztery znaki są rysowane ręcznie i wchodzą
 * blokiem HTML. Idiom jest ten sam co u reszty ikon na stronie: siatka 24×24,
 * kontur 1,5 px, zaokrąglone końce, brak wypełnienia.
 *
 * Kolor i rozmiar siedzą tutaj, a nie w atrybutach bloku, bo core/html
 * atrybutów nie ma. Reszta wyglądu kafla — tło, odstępy wewnętrzne,
 * wyrównanie — idzie atrybutami kolumny, żeby klient zmieniał je w edytorze.
 */
.stk-tile__icon {
	display: block;
	color: var(--text-accent);
	margin: 0 0 var(--space-6);
	transition: color var(--motion-duration-fast, 150ms) ease;
}

.stk-tile__icon svg {
	display: block;
	width: 40px;
	height: 40px;
}

/* Cały kafel jest odnośnikiem, więc reakcja na kursor należy do znaku. */
.stk-tile:hover .stk-tile__icon {
	color: var(--text-primary);
}

/* Podpowiedź pod parą pól kontaktowych. E-mail i telefon są z osobna
 * nieobowiązkowe, ale jedno z nich trzeba podać — regułę pilnuje
 * `luna_child_require_contact` w functions.php, a ta linijka mówi o niej
 * czytelnikowi, zanim wyśle pusty formularz. Odstęp niesie reguła wyżej. */
.luna-form__note {
	font-size: var(--font-size-body-sm);
	color: var(--text-muted);
}

/* Numer kroku jako akapit, nie nagłówek. „01"–„04" to etykiety porządkowe;
 * jako H6 zaśmiecały konspekt strony i były ogłaszane przez czytnik ekranu
 * jak nagłówki. Wygląd niosła wcześniej typografia bloku Kadence, więc przy
 * akapicie trzeba podać rozmiar tutaj. Reguła jest zawężona do `p`, żeby nie
 * ruszyć stron, na których numer nadal wychodzi z generatora jako nagłówek. */
p.stk-num {
	margin: 0 0 var(--space-2);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 1px;
}

/* ---------- Tło hero: nici ze znaku ----------
 * Wiązka równoległych linii przeniesiona z logo — krzywe z grupy „fabric
 * thread lines" w luna-logo.svg, rozciągnięte na szerokość hero. Dwanaście
 * linii to interpolacja między pierwszą a ostatnią nicią znaku.
 *
 * Ma być ledwo widoczna. Kolor i krycie siedzą w zmiennych, żeby stroić je
 * w jednym miejscu. Maska ma trzy warstwy: same nici, wygaszenie pod tekstem
 * i przyciskami (bez niego linie przecinają obrysowany przycisk) oraz
 * rozmycie górnej i dolnej krawędzi — na szerokich ekranach wzór skaluje się
 * do szerokości i bez tego ucinałby się ostro nad kaflami.
 *
 * `::before` wiersza zajmuje clearfix Kadence (display: table), więc motyw
 * wchodzi na `::after`. Strona główna jest edytowana ręcznie, dlatego jej hero
 * łapiemy selektorem pierwszego wiersza, a nie klasą w treści wpisu. Klasa
 * .stk-threads działa tak samo na każdym innym wierszu.
 */
.stk-threads,
body.home .entry-content > .wp-block-kadence-rowlayout:first-child {
	--stk-threads-color: var(--brand-sand-deep);
	--stk-threads-opacity: 0.22;
	--stk-threads-under-text: 0.12;
	isolation: isolate;
}

/* Bez obsługi maski pseudo-element byłby jednolitą beżową plamą na całym hero,
 * dlatego starsze przeglądarki nie dostają motywu wcale. */
@supports (mask-composite: intersect) {
	.stk-threads::after,
	body.home .entry-content > .wp-block-kadence-rowlayout:first-child::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-color: var(--stk-threads-color);
		opacity: var(--stk-threads-opacity);
		mask-image:
			url("../img/stk-threads.svg"),
			radial-gradient(ellipse 38% 62% at 50% 50%, rgb(0 0 0 / var(--stk-threads-under-text)) 55%, #000 100%),
			linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
		mask-size: cover, 100% 100%, 100% 100%;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-composite: intersect;
	}
}

/* Na telefonie tekst zajmuje całą szerokość, więc nici zawsze leżą pod nim. */
@media (max-width: 767px) {
	.stk-threads,
	body.home .entry-content > .wp-block-kadence-rowlayout:first-child {
		--stk-threads-opacity: 0.16;
	}
}