/*
Theme Name: Lazy Sunday
Theme URI: https://lazysunday.pl
Author: Lazy Sunday
Description: Własny block theme (FSE) dla sklepu WooCommerce Lazy Sunday — meble tapicerowane i dodatki do wnętrz. Sunday feeling every day.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lazy-sunday
Tags: block-patterns, full-site-editing, e-commerce, one-column
*/

/*
 * Kolory, typografia i odstępy są zdefiniowane wyłącznie w theme.json.
 * Ten plik zawiera tylko wyjątki, których nie da się wyrazić w theme.json.
 */

/* ------------------------------------------------------------------
 * Nagłówek — wyjątki spoza theme.json (parts/header.html).
 * theme.json nie umie: ukrywać/pozycjonować elementów, stylować pola
 * formularza wyszukiwarki ani rysować podkreśleń pod linkami nawigacji.
 * Żadnego JS: mega menu otwiera się przez :hover / :focus-within.
 * ------------------------------------------------------------------ */

/* Linki w pasku: 6 px odstępu i 1 px linia (przezroczysta → czarna na hover). */
.ls-header-bar .wp-block-navigation-item__content {
	padding: 6px 0;
	border-bottom: 1px solid transparent;
}
.ls-header-bar .wp-block-navigation-item__content:hover,
.ls-header-bar .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--black);
}

/* Mega menu: panel pod paskiem, pełna szerokość, domyślnie ukryty. */
.ls-header {
	position: relative;
}
.ls-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin: 0;
	z-index: 20;
}
/* Panel otwierany najechaniem ma sens tylko tam, gdzie jest kursor i miejsce
   na cztery kolumny. Poniżej 1240 px te same trzy menu stoją w szufladzie —
   patrz „Nagłówek poniżej 1240 px” niżej i inc/mobile-nav.php. */
@media (min-width: 1240px) {
	/* Niewidoczny „mostek” pod pozycją-wyzwalaczem, żeby kursor nie gubił panelu
	   w drodze z linku do panelu. */
	.ls-mega-trigger {
		position: relative;
	}
	.ls-mega-trigger::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 32px;
	}
	.ls-header:has(.ls-mega-trigger:hover) .ls-mega,
	.ls-header:has(.ls-mega-trigger:focus-within) .ls-mega,
	.ls-mega:hover,
	.ls-mega:focus-within {
		display: block;
	}
	.ls-header:has(.ls-mega:hover) .ls-mega-trigger > .wp-block-navigation-item__content,
	.ls-header:has(.ls-mega:focus-within) .ls-mega-trigger > .wp-block-navigation-item__content,
	.ls-mega-trigger:hover > .wp-block-navigation-item__content,
	.ls-mega-trigger:focus-within > .wp-block-navigation-item__content {
		border-bottom-color: var(--wp--preset--color--black);
	}
}

/* Logo to jeden napis z trackingiem 0.25em — w wierszu `nowrap` flexbox ściskał
   je poniżej 1440 px do dwóch linii („LAZY / SUNDAY”). */
.ls-header-row > .wp-block-site-title {
	flex: 0 0 auto;
}
.ls-header-row .wp-block-site-title a {
	white-space: nowrap;
}

/* Pole „Szukaj”: bez ramki i tła, tylko 1 px linia pod spodem, ikona po prawej. */
.ls-header .wp-block-search__button-inside .wp-block-search__inside-wrapper {
	padding: 0 0 5px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	background: transparent;
	align-items: center;
}
.ls-header .wp-block-search__input {
	padding: 0;
	background: transparent;
	color: inherit;
}
.ls-header .wp-block-search__input::placeholder {
	color: inherit;
	opacity: 1;
}
.ls-header .wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
}
.ls-header .wp-block-search__button svg {
	width: 14px;
	height: 14px;
	min-width: 0;
	min-height: 0;
}

/* ------------------------------------------------------------------
 * Nagłówek poniżej 1240 px — pasek i szuflada
 * (parts/header.html, inc/mobile-nav.php).
 *
 * Makieta obejmuje tylko desktop; decyzje o tym układzie — docs/menu.md.
 *
 * Żadnego własnego JS: nakładkę otwiera, zamyka i pilnuje (Esc, focus,
 * blokada przewijania tła) skrypt bloku Nawigacja z rdzenia.
 * ------------------------------------------------------------------ */

@media (max-width: 1239.98px) {

	/* Rdzeń zwija menu do nakładki dopiero poniżej 600 px (media query
	   w wp-includes/blocks/navigation/style.css). Między 600 a 1240 px pasek
	   rozkładał się na całą szerokość i wyjeżdżał poza ekran — na 768 px
	   o 211 px. Te dwie reguły przesuwają próg, tylko dla menu głównego. */
	.ls-header .menu-location-glowne .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.ls-header .menu-location-glowne .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Pasek: logo po lewej, „Konto / Koszyk” i hamburger przy prawej krawędzi.
	   Pole „Szukaj” schodzi do szuflady — to ono odpowiadało za 92 px
	   przewijania w bok na 375 px. */
	.ls-header .ls-header-row {
		gap: var(--wp--preset--spacing--30);
	}
	.ls-header .ls-header-row > .wp-block-site-title {
		margin-right: auto;
	}
	.ls-header .ls-header-row > .menu-location-glowne {
		order: 3;
	}
	.ls-header .ls-header-search {
		display: none;
	}

	/* Szuflada: jedna kolumna na pełną szerokość. Blok ustawia pozycje na
	   środek (justifyContent w parts/header.html) — w pionowej liście
	   21 pozycji czyta się to źle, a wyśrodkowany link ma pole dotyku
	   szerokie na tyle, ile ma liter. Zmienna steruje wszystkimi regułami
	   nakładki naraz (ul, li, kontener treści). */
	.ls-header .menu-location-glowne,
	.ls-header .ls-drawer-group .wp-block-navigation {
		--navigation-layout-justification-setting: stretch;
	}
	/* Blok w układzie pionowym dokleja jeszcze `align-items: flex-start`
	   na samym <nav> — bez tego lista w grupie jest szeroka na najdłuższy
	   wyraz, a nie na całą kolumnę. */
	.ls-header .ls-drawer-group .wp-block-navigation {
		align-items: stretch;
	}

	/* Rdzeń liczy padding nakładki z `--wp--style--root--padding-*`, których ten
	   motyw nie wystawia — wychodziło zero i linki dotykały krawędzi ekranu.
	   Boki jak margines strony. Dół szeroki celowo: nakładka to `position:
	   fixed`, a pasek adresu telefonu zjada kilkadziesiąt pikseli u dołu —
	   bez zapasu ostatnia pozycja zostaje ucięta po przewinięciu do końca. */
	.ls-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--90) var(--wp--preset--spacing--70);
	}
	.ls-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		gap: var(--wp--preset--spacing--50);
	}
	.ls-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		gap: 0;
	}

	/* Wyszukiwarka na górze szuflady. W markupie jest na końcu (wstawka
	   wchodzi za listę pozycji), kolejność ustawia flexbox. */
	.ls-header .ls-drawer-search {
		order: -1;
		width: 100%;
	}
	.ls-header .is-menu-open .wp-block-search__inside-wrapper {
		min-height: 44px;
	}

	/* Pole dotyku pozycji: pełna szerokość wiersza i 44 px wysokości —
	   przy 21 linkach jeden pod drugim to minimum, żeby nie trafiać
	   w sąsiedni. Linia 1 px stone rysuje granicę między wierszami;
	   na hover i na bieżącej pozycji czernieje regułą wspólną z paskiem. */
	.ls-header .is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 44px;
		border-bottom-color: var(--wp--preset--color--stone);
	}

	/* Nagłówki grup — te same, co nad kolumnami panelu na desktopie. */
	.ls-header .ls-drawer-group {
		width: 100%;
	}
	.ls-header .ls-drawer-label {
		margin: 0 0 var(--wp--preset--spacing--20);
		letter-spacing: 0.04em;
	}
}

/* Wstawka z inc/mobile-nav.php siedzi w HTML zawsze, ale od 1240 px nakładka
   jest rozłożona w pasek — tam nie ma dla niej miejsca. */
@media (min-width: 1240px) {
	.ls-header .ls-drawer-search,
	.ls-header .ls-drawer-group {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Strona produktu — formularz koszyka (templates/single-product.html,
 * parts/variable-product-add-to-cart-with-options.html).
 * theme.json nie umie stylować przycisków wariantów bloku WooCommerce
 * ani układać kropek tkanin w grupy — oznacza je filtr w functions.php
 * (lazy_sunday_group_fabric_swatches), a układ robi ten CSS.
 * ------------------------------------------------------------------ */

/* Formularz jako kolumna z odstępem 32 px. Wiersze atrybutów wyjmujemy
   z ich kontenera (display: contents), żeby Tkaninę dało się ustawić nad
   Konfiguracją przez `order` niezależnie od kolejności atrybutów w panelu. */
.ls-product form.wp-block-woocommerce-add-to-cart-with-options {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}
.ls-product form.wp-block-woocommerce-add-to-cart-with-options > * {
	margin: 0;
}
.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector {
	display: contents;
}

/* To samo z tego samego powodu: `single_variation_wrap` to wrapper WooCommerce
   z trzema `<input type="hidden">` i zerową wysokością, ale jako element flexa
   zabierał pełne 32 px przerwy. Wyjęcie go z układu (`display: contents`)
   oddaje te 32 px — inputy zostają w DOM i dalej jadą z formularzem, bo
   `display: none` i tak nie czyni z nich elementów flexa. Zmierzone: 32 px
   między górą formularza a górą wiersza Tkanina, na pusto. */
.ls-product form.wp-block-woocommerce-add-to-cart-with-options .single_variation_wrap {
	display: contents;
}
.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute {
	order: 3;
}
.ls-product .ls-fabric-row {
	order: 1;
}
.ls-product .wc-block-components-product-button {
	order: 4;
}

/* Zachęta do próbek (`ls-fabric-note`) nie stoi już w formularzu — od
   11.10.2026 mieszka w szufladzie, na jej górze. Powód jest treściowy,
   nie układowy: trafia do osoby, która właśnie otworzyła pełną listę,
   czyli przyznała, że waha się co do odcienia. Dlatego nie ma tu już
   `order: 2` ani ujemnego marginesu. */

/* Nazwa wybranej wartości POD rzędem próbek: „Corbett Ivory”. Treść wstawia
   assets/js/product.js, element stoi w parts/variable-product-add-to-cart-
   with-options.html pod blokiem próbek.

   13 px (`small`), nie 12 — to jedyne miejsce, w którym klient czyta, co
   wybrał, a przy próbce 44 px nie rozpozna tkaniny z samego koloru.
   Potwierdzenie decyzji nie może być najmniejszym tekstem na stronie.

   Pusty wiersz jest rezerwowany twardą spacją, a nie chowany: nazwa
   pojawia się dopiero po wyborze, więc `display: none` zepchnęłoby całą
   resztę formularza w dół o jeden wiersz dokładnie w chwili dotknięcia
   próbki. `min-height: 1lh` dałoby to samo czyściej, ale jednostka `lh` ma
   ten sam próg przeglądarek co `:has()`, a `:has()` jest w tym motywie
   jedynym takim miejscem i ma takim zostać (CLAUDE.md). */
.ls-product .ls-selected-label:empty::before {
	content: "\00a0";
}

/* Nieaktywny przycisk: tło Stone, tekst Black, bez półprzezroczystości
   (domyślnie WooCommerce ściemnia go do 50 %, czyli szarego spoza palety). */
.ls-product .wc-block-components-product-button .wp-element-button.disabled {
	background: var(--wp--preset--color--stone);
	color: var(--wp--preset--color--black);
	opacity: 1;
	cursor: default;
}

/* Podpowiedź pod nieaktywnym przyciskiem („Wybierz tkaninę i konfigurację.”).
   Znika, gdy wszystko jest wybrane — skrypt zostawia pusty tekst. */
.ls-product .ls-cart-hint {
	order: 5;
	margin-top: calc(-1 * var(--wp--preset--spacing--30));
}
.ls-product .ls-cart-hint:empty {
	display: none;
}

/* Tkaniny: kwadraty 1:1 w siatce wypełniającej szerokość kolumny.
 *
 * Jedna reguła na desktop i telefon — rozmiar bierze się z podziału miejsca
 * (`1fr`), a 44 px jest tylko minimum, czyli progiem pola dotyku. Dlatego nie
 * ma tu osobnego bloku @media ani jednej wartości dobranej na oko:
 * odstępy to `spacing|20` (8 px), a szerokość liczy przeglądarka.
 *
 * `auto-fill`, nie `auto-fit`: auto-fill zostawia puste tory, więc produkt
 * z dwiema tkaninami dostaje dwa kwadraty po 44 px, a nie dwa rozciągnięte
 * na pół kolumny.
 *
 * Czego tu nie ma: podziału na rodziny tkanin (Corbett / Noma / Devon).
 * Do 10.10.2026 każda rodzina zaczynała nowy rząd (`grid-column-start: 1`),
 * a jej nazwa stała nad pierwszym kwadratem — to właśnie ono robiło „trzy
 * w rzędzie z dziurami” i zjadało 367,8 px szerokości na desktopie.
 * Rodzina nie znika z ekranu: niesie ją nazwa wybranej tkaniny pod rzędem
 * („Corbett Ivory”), czyli to miejsce, w które klient patrzy po kliknięciu.
 * Pełny podział na rodziny będzie w szufladzie z całą listą (osobne zadanie).
 *
 * Atrybuty `data-ls-group` i `data-ls-group-start` dokłada dalej filtr
 * lazy_sunday_group_fabric_swatches() w functions.php — zostają nietknięte,
 * bo szuflada ich potrzebuje. Tutaj po prostu nikt ich nie czyta.
 *
 * Pomiary przed i po: docs/strona-produktu.md. */
.ls-product .ls-fabric-row .wc-block-product-filter-chips {
	align-self: stretch; /* grupa jest pionowym flexem — bez tego siatka ma szerokość jednej kropki */
}
.ls-product .ls-fabric-row .wc-block-product-filter-chips__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
	gap: var(--wp--preset--spacing--20);
	/* Kafelki NIE rozciągają się na wysokość rzędu — i to nie jest kosmetyka.
	   Domyślny `align-items: stretch` wyrównuje wysokość wszystkich kafelków
	   w rzędzie do najwyższego, a rozciągnięty kafelek wyśrodkowuje swoją
	   zawartość w pionie. W szufladzie wystarczy, że JEDEN podpis złamie się
	   na dwie linie — wtedy pozostałe kafelki w tym rzędzie zjeżdżają w dół
	   o połowę różnicy i rząd przestaje być równy.
	   Zmierzone przy 324 px, rodzina Noma („Noma Chocolate” łamie się na dwie
	   linie): rozrzut górnych krawędzi 8,10 px na próbkach i 8,09 px na
	   podpisach; po `align-items: start` — 0,00 px na jednym i drugim.
	   Przy 375 px i szerzej wszystkie podpisy mieszczą się w jednej linii,
	   więc usterki nie było widać — dlatego dwa wcześniejsze pomiary wyszły
	   czysto. Pełny opis: docs/strona-produktu.md. */
	align-items: start;
}

/* Odstęp pod spodem to zarezerwowane miejsce na kreskę zaznaczenia. Jest
   zawsze, więc wybór tkaniny nie rusza układu — a tego właśnie nie dawała
   ramka dookoła, która rozpychała rząd. */
.ls-product .ls-fabric-row .wc-block-product-filter-chips__item {
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--20);
	border: 0;
	border-radius: 0;
}
.ls-product .ls-fabric-row .wc-block-product-filter-chips__swatch {
	box-sizing: border-box; /* bez tego ramka 1 px dokłada się z zewnątrz i kwadrat nie jest kwadratem */
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
}

/* Trzy stany, żadnego ruchu w układzie: spoczynek — ramka Stone, dotknięcie
   i fokus klawiatury — ta sama ramka na Black, wybór — kreska 1 px pod
   kwadratem. Ramka swatcha jest zarezerwowana tak samo jak padding, więc
   zmienia się wyłącznie kolor. */
.ls-product .ls-fabric-row .wc-block-product-filter-chips__item:hover .wc-block-product-filter-chips__swatch,
.ls-product .ls-fabric-row .wc-block-product-filter-chips__item:focus-visible .wc-block-product-filter-chips__swatch {
	border-color: var(--wp--preset--color--black);
}
.ls-product .ls-fabric-row .wc-block-product-filter-chips__item[aria-checked="true"]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--wp--preset--color--black);
}

/* ------------------------------------------------------------------
 * Szuflada z pełną listą tkanin.
 *
 * JEDNA lista próbek, nie dwie: na stronie widać pierwszych pięć
 * (telefon) albo sześć (desktop) i kafelek „+N”, a po otwarciu te same
 * przyciski układają się w trzy kolumny z nazwami pod spodem. Przestawia
 * się pojemnik, nie lista — przyciski są przez cały czas tymi samymi
 * węzłami DOM, więc nie ma duplikatu w HTML ani drugiego zestawu inputów.
 *
 * Stan zamknięty i otwarty są rozdzielone przez `:not(:checked)` i
 * `:checked`, a nie przez specyficzność. To celowe: reguły przycinania
 * rzędu mają `:nth-child` i `:not([aria-checked])`, więc wygrywałyby
 * z regułami szuflady, gdyby oba stany opisywał ten sam selektor bazowy.
 *
 * Markup i podział ról PHP ↔ CSS:
 * parts/variable-product-add-to-cart-with-options.html i functions.php.
 * Pomiary i lista rzeczy, których nie da się bez JS: docs/strona-produktu.md.
 * ------------------------------------------------------------------ */

/* Przełącznik: gdy jest włączony, zostaje niewidoczny, ale OGNISKOWALNY —
   inaczej szuflady nie dałoby się otworzyć z klawiatury. Bez `name`, więc
   formularz go nie wysyła. Domyślnie wyłączony; kiedy się włącza — niżej. */
.ls-product .ls-drawer-toggle {
	display: none;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Przełącznik istnieje DOKŁADNIE WTEDY, co kafelek „+N”, czyli tylko gdy rząd
   jest przycięty. Wcześniej wyłączał go inny warunek — „to nie jest wiersz
   Tkaniny” — i przy produkcie z sześcioma tkaninami albo mniej zostawał
   ogniskowalny mimo braku kafelka: Tab trafiał na niewidzialną kontrolkę
   „Pokaż wszystkie tkaniny”, która otwierała szufladę pokazującą to samo,
   co już w całości widać na stronie. Sprawdzone pomiarowo 11.10.2026.

   Stąd dwa progi, tak jak przy kafelku: `ls-trim-d` na desktopie,
   `ls-trim-m` w @media. Każdy rząd przycięty na desktopie jest przycięty
   także na telefonie, więc te reguły nigdy się nie kłócą.

   Reguła wyłączająca rusztowanie przy innych atrybutach (Konfiguracja,
   Kolor, Rozmiar) jest przez to zbędna i odeszła: przełącznik i kafelek są
   domyślnie wyłączone, a klasy przycięcia dostaje wyłącznie wiersz Tkaniny. */
.ls-product .ls-trim-d .ls-drawer-toggle {
	display: block;
}

/* Wszystko, co należy wyłącznie do szuflady, jest schowane, dopóki jest
   zamknięta: tło, nagłówek z zamykaniem, zachęta do próbek, „Gotowe”. */
.ls-product .ls-fabric-chrome {
	display: none;
}

/* Grupa wokół wiersza atrybutu jest pionowym flexem, a WordPress ustawia
   w nim `align-items: flex-start` — bez tego panel ma szerokość jednej
   próbki i cała siatka zapada się do 16 px. Ta sama pułapka, przez którą
   blok próbek ma niżej `align-self: stretch`; po dołożeniu panelu to on
   jest elementem flexa, więc rozciągnięcie musi stać tutaj. */
.ls-product .ls-fabric-panel {
	align-self: stretch;
}

/* --- Rząd przycięty, czyli szuflada zamknięta -----------------------
 *
 * Siatka siedmiu kolumn: sześć zajmuje blok próbek, siódmą kafelek „+N”.
 * Szerokości wychodzą co do piksela te same, bo sześć kolumn z pięcioma
 * przerwami liczone z zewnątrz i z wewnątrz dają tę samą wartość —
 * dlatego kafelek stoi równo, mimo że leży poza blokiem WooCommerce.
 *
 * Klasę `ls-trim-d` dokłada PHP tylko wtedy, gdy poza rzędem zostaje
 * więcej niż jedna próbka. Przy siedmiu i mniej kafelka nie ma wcale,
 * a rząd zostaje przy regule `auto-fill` z 10.10. */
.ls-product .ls-trim-d .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .ls-fabric-rowgrid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--wp--preset--spacing--20);
}
.ls-product .ls-trim-d .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .wc-block-product-filter-chips {
	grid-column: span 6;
}
.ls-product .ls-trim-d .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .wc-block-product-filter-chips__items {
	grid-template-columns: repeat(6, 1fr);
}

/* Wybrana tkanina nie chowa się, nawet gdy stoi poza pierwszą szóstką,
   i wskakuje na początek rzędu. Koszt: w tym jednym przypadku rząd ma
   o jedną próbkę więcej, a kafelek „+N” zawija się do drugiej linii
   i jego liczba jest o jeden za wysoka. Odrzucona alternatywa (stała
   długość rzędu: wybrana wchodzi, domyślna wypada) i powód odrzucenia:
   docs/strona-produktu.md. */
/* `:nth-of-type`, nie `:nth-child` — dziś to bez różnicy, bo w `__items`
   są same przyciski próbek. Zostaje jako zabezpieczenie: listę posiada
   Interactivity API WooCommerce i może kiedyś dołożyć tam własny węzeł,
   a liczenie wszystkich dzieci przesunęłoby wtedy próg i rząd pokazywałby
   mniej próbek niż powinien. „+N” i „pokaż więcej” leżą poza `__items`. */
.ls-product .ls-trim-d .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .wc-block-product-filter-chips__item:nth-of-type(n+7):not([aria-checked="true"]) {
	display: none;
}
.ls-product .ls-trim-d .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .wc-block-product-filter-chips__item[aria-checked="true"] {
	order: -1;
}

/* Kafelek „+N”. Liczbę wpisuje PHP w `data-ls-rest`, bo progi na desktopie
   i telefonie są różne, więc jedna liczba by nie wystarczyła. */
.ls-product .ls-fabric-more {
	display: none;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	align-self: start;
	aspect-ratio: 1;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	cursor: pointer;
}
.ls-product .ls-trim-d .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .ls-fabric-more {
	display: flex;
}
.ls-product .ls-fabric-more::after {
	content: "+" attr(data-ls-rest);
}
/* Wskaźnik fokusu stoi na `:focus`, nie na `:focus-visible` — inaczej niż
   przy próbkach. Przełącznik jest schowany przed wzrokiem, więc jedynym
   śladem fokusu jest ten kafelek i nie chcemy tu zależeć od heurystyki
   przeglądarki. Przypadek myszy jest nieszkodliwy: kliknięcie w kafelek
   otwiera szufladę, a wtedy kafelek i tak znika. */
.ls-product .ls-fabric-more:hover,
.ls-product .ls-drawer-toggle:focus ~ .ls-fabric-panel .ls-fabric-more {
	border-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
}

/* --- Szuflada otwarta ----------------------------------------------- */

.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
}

/* Tło nie jest przyciemnione i to jest decyzja, nie przeoczenie: paleta
   ma sześć kolorów bez przezroczystości, a przyciemnienie wymagałoby
   siódmego. Panel odcina się warstwą Warm White i kreską Stone — tak jak
   reszta motywu oddziela plany. Sam element zostaje jako pole do kliknięcia
   zamykające szufladę. */
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .ls-fabric-backdrop {
	display: block;
	position: absolute;
	inset: 0;
	/* Bez tego element dziedziczy 9,8 px marginesu dolnego i przy `top: 0`
	   razem z `bottom: 0` wychodzi 890,2 px zamiast 900 — na dole zostaje
	   pasek, w którym kliknięcie nie zamyka szuflady. Zmierzone. */
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
	cursor: pointer;
}

.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .ls-fabric-sheet {
	display: flex;
	position: absolute;
	inset: 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	/* Zapas u dołu na pasek adresu Safari — ta sama rezerwa co w nakładce
	   nawigacji mobilnej w nagłówku. */
	padding-bottom: var(--wp--preset--spacing--70);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--warm-white);
}

.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .ls-fabric-sheet-head {
	display: flex;
}
.ls-product .ls-fabric-close {
	flex: 0 0 auto;
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

/* Zachęta do próbek — na górze szuflady, nie pod próbkami. */
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .ls-fabric-note {
	display: block;
	margin: 0;
}
.ls-product .ls-fabric-note a {
	border-bottom: 1px solid var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
}

/* Siatka w szufladzie: trzy kolumny, nazwa pod kwadratem, rodziny tkanin
   rozdzielone nagłówkiem.

   Nagłówek rodziny jest elementem rzekomym nad pierwszą próbką rodziny
   i stoi w 48-pikselowej przerwie siatki. **To nie jest wybór z wygody** —
   prawdziwego elementu nie da się tam wstawić, bo listę posiada
   Interactivity API WooCommerce i przy hydracji wypycha obce węzły przed
   listę. Pełny opis próby i dowód: komentarz „NIE WSTAWIAJ WŁASNYCH
   ELEMENTÓW DO LISTY PRÓBEK” w functions.php.

   Dlatego odstęp pionowy to 48 px, a nie mniej: w tej przerwie mieszka
   nagłówek. **Zmniejszenie `row-gap` urwie nagłówki** — stąd osobny
   `row-gap`, a nie jeden `gap`.

   Układu to nie psuje: zmierzony rozrzut górnych krawędzi próbek w rzędzie
   wynosi 0,00 px na 320, 360, 375, 390 i 1440 px. Przy trzech kolumnach
   i rodzinach po trzy kolory każdy rząd to dokładnie jedna rodzina, więc
   ten odstęp nigdzie nie stoi pusty. */
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .ls-fabric-rowgrid {
	display: block;
}
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .wc-block-product-filter-chips {
	grid-column: auto;
}
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .wc-block-product-filter-chips__items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--20);
	row-gap: var(--wp--preset--spacing--60);
}
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .wc-block-product-filter-chips__item {
	display: block;
	order: 0;
}
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .wc-block-product-filter-chips__item[data-ls-group-start] {
	grid-column-start: 1;
}

/* Nazwa rodziny nad pierwszą próbką. Rozciągnięta na CAŁĄ szerokość siatki,
   a nie na jedną kolumnę: `300%` to trzy kolumny, `2 × 8px` to dwie przerwy
   między nimi. Bez tego nazwa dłuższa niż kafelek (np. „Brushed Linen”)
   wychodziła poza swoją kolumnę i kładła się na sąsiedniej próbce —
   to była jedyna realna usterka tego nagłówka. Nazwa dłuższa niż cała
   siatka ucina się wielokropkiem zamiast zachodzić na cokolwiek. */
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .wc-block-product-filter-chips__item[data-ls-group-start]::before {
	content: attr(data-ls-group);
	position: absolute;
	bottom: 100%;
	left: 0;
	width: calc(300% + 2 * var(--wp--preset--spacing--20));
	margin-bottom: var(--wp--preset--spacing--20);
	overflow: hidden;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1;
	/* Przyciski mają domyślnie `text-align: center`. Przy pudełku szerokim
	   na jedną kolumnę nie było tego widać, przy pudełku na całą siatkę
	   nazwa rodziny wylądowała na środku. */
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Nazwa tkaniny pod kwadratem. WooCommerce chowa ją dla czytników ekranu
   (clip-path), więc tutaj ją po prostu odsłaniamy — nie dopisujemy drugiej. */
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .wc-block-product-filter-chips__label {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
}
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .wc-block-product-filter-chips__text {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.35;
	text-align: left;
	white-space: normal;
}

/* „Gotowe” nie zatwierdza wyboru — wybór dzieje się przy kliknięciu
   w próbkę, bo to są te same przyciski WooCommerce co na stronie. To jest
   drugie wyjście z szuflady, przyklejone do dołu, żeby przy trzydziestu
   próbkach nie trzeba było wracać na górę. */
.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .ls-fabric-done {
	display: block;
	position: sticky;
	bottom: 0;
	margin-top: auto;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--warm-white);
	font-size: var(--wp--preset--font-size--base);
	text-align: center;
	cursor: pointer;
}

/* Desktop: panel przy prawej krawędzi, nie pełny ekran. Powód jest jeden
   i wystarcza — zdjęcie sofy musi zostać widoczne, bo zadaniem szuflady
   jest dobranie tkaniny do konkretnego mebla. Szerokość odpowiada prawej
   kolumnie produktu (zmierzone 487,8 px przy 1440), więc kafelek w panelu
   jest tej samej wielkości co w rzędzie i nic nie skacze przy otwieraniu. */
@media (min-width: 783px) {
	.ls-product .ls-drawer-toggle:checked ~ .ls-fabric-panel .ls-fabric-sheet {
		left: auto;
		width: 480px;
		max-width: 100%;
		padding: var(--wp--preset--spacing--50);
		border-left: 1px solid var(--wp--preset--color--stone);
	}
}

/* Konfiguracja (Lewy / Prawy) i inne atrybuty tekstowe: przyciski z 1 px
   ramką Stone, wybrany — Black. Bez wypełnienia, bez zaokrągleń. */
.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute:not(.ls-fabric-row) .wc-block-product-filter-chips__items {
	gap: var(--wp--preset--spacing--20);
}
.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute:not(.ls-fabric-row) .wc-block-product-filter-chips__item {
	padding: 10px 20px;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
}
.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute:not(.ls-fabric-row) .wc-block-product-filter-chips__item:hover,
.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute:not(.ls-fabric-row) .wc-block-product-filter-chips__item:focus-visible,
.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute:not(.ls-fabric-row) .wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--wp--preset--color--black);
	background: transparent;
	color: var(--wp--preset--color--black);
}
.ls-product .wc-block-product-filter-chips__item:focus {
	outline: none;
}

/* ------------------------------------------------------------------
 * Strona produktu na telefonie.
 * Rozstrzygnięcia i pomiary: docs/strona-produktu.md.
 * ------------------------------------------------------------------ */

/* 1. Swatche tkanin — reguła wycofana 10.10.2026, nie szukaj jej niżej.
 *
 * Stała tu reguła, która na telefonie rozciągała swatche do 86,5 px (375 px)
 * i 90,6 px (390 px) — trzy w rzędzie, po jednym rzędzie na rodzinę tkaniny.
 * Uzasadnieniem było: swatch jest próbką koloru, więc jego rozmiar pełni
 * funkcję, a przy 26 px nie da się ocenić odcienia.
 *
 * Co ją unieważniło: przy 12–16 kolorach na model trzy w rzędzie to ekran
 * i pół samych próbek, a sam blok tkanin miał 380,55 px przy zdjęciu
 * produktu 307,5 px — był największym obiektem na ekranie. Przyjęty
 * wzorzec to mały rząd na stronie i pełna lista w rozwijanej szufladzie,
 * więc ocena odcienia przenosi się tam, gdzie jest na nią miejsce: do
 * szuflady i do próbek fizycznych.
 *
 * Upadł przy okazji argument „86,5 = tyle samo, co kafelek próbki w sekcji
 * 09 strony głównej”. Ta zgodność była świadoma i jest świadomie porzucona
 * — to NIE jest rozjazd do naprawienia.
 *
 * Rozmiar robi teraz jedna reguła wspólna dla desktopu i telefonu, wyżej
 * w tym pliku (`minmax(44px, 1fr)`). Osobnej reguły mobilnej już nie ma
 * i nie powinna wrócić. Pomiary przed i po: docs/strona-produktu.md. */

/* 1a. Rząd przycięty na telefonie: PIĘĆ próbek plus kafelek, nie sześć.
 *
 * Na desktopie rząd ma sześć próbek i kafelek, czyli siedem komórek.
 * Przy 375 px siedem komórek daje (307,5 − 48) / 7 = 37,07 px na próbkę,
 * czyli PONIŻEJ progu pola dotyku 44 px, który sami ustawiliśmy 10.10.
 * Sześć komórek daje (307,5 − 40) / 6 = 44,58 px — dokładnie tyle, ile
 * próbka ma dziś. Rozstrzygnięcie wyłącznie mobilne (zasada 11).
 *
 * Progi przycięcia są przez to różne i dlatego PHP dokłada dwie klasy
 * (`ls-trim-d`, `ls-trim-m`) i dwie liczby (`data-ls-rest`,
 * `data-ls-rest-m`). Każdy rząd przycięty na desktopie jest przycięty
 * także na telefonie, więc tutaj wystarczy `ls-trim-m` — nadpisuje
 * reguły desktopowe późniejszą kolejnością przy równej specyficzności. */
@media (max-width: 782px) {
	.ls-product .ls-trim-m .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .ls-fabric-rowgrid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: var(--wp--preset--spacing--20);
	}
	.ls-product .ls-trim-m .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .wc-block-product-filter-chips {
		grid-column: span 5;
	}
	.ls-product .ls-trim-m .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .wc-block-product-filter-chips__items {
		grid-template-columns: repeat(5, 1fr);
	}
	.ls-product .ls-trim-m .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .wc-block-product-filter-chips__item:nth-of-type(n+6):not([aria-checked="true"]) {
		display: none;
	}
	.ls-product .ls-trim-m .ls-drawer-toggle:not(:checked) ~ .ls-fabric-panel .ls-fabric-more {
		display: flex;
	}
	/* Przełącznik razem z kafelkiem — próg mobilny, patrz komentarz wyżej. */
	.ls-product .ls-trim-m .ls-drawer-toggle {
		display: block;
	}
	.ls-product .ls-fabric-more::after {
		content: "+" attr(data-ls-rest-m);
	}
}

/* 2. Chipy atrybutów tekstowych (Konfiguracja: Lewy / Prawy) do progu 44 px.
 *    Dziś 72–79 × 35. Odstęp 10 → 16 px (`spacing|30`) daje 16 + 13 + 16
 *    + 2 px ramki = 47 px. 14 px dałoby równo 44, ale takiego tokenu nie ma,
 *    a zaokrąglamy do skali zamiast dokładać wartość — tak samo jak przy
 *    przycisku newslettera. Odstęp boczny zostaje 20 px, czyli dokładnie taki
 *    jak w regule desktopowej wyżej: rośnie sama wysokość, szerokość chipa
 *    jest co do piksela ta sama co przed zmianą. */
@media (max-width: 782px) {
	.ls-product .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute:not(.ls-fabric-row) .wc-block-product-filter-chips__item {
		padding: var(--wp--preset--spacing--30) 20px;
	}
}

/* 3. Odnośnik „Zamów próbki." w zdaniu pod tkaninami: 92,55 × 18,5.
 *    Nakładka ::after na 44 px, bez ruszania widocznego atramentu —
 *    ta sama sztuczka co w `.ls-link` i `.ls-tile`. Zdanie stoi samo
 *    w wierszu formularza (odstęp 32 px od sąsiadów), więc nakładka
 *    sięgająca 13 px w górę i w dół na nic nie zachodzi. */
@media (max-width: 782px) {
	.ls-product .ls-fabric-note a {
		position: relative;
	}
	.ls-product .ls-fabric-note a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 44px;
		transform: translateY(-50%);
	}
}

/* 4. Okruszki: linki mają 16,5 px wysokości i leżą w trzech liniach
 *    odległych o 20,15 px, więc nakładka ::after na 44 px zachodziłaby
 *    na sąsiednie linie — nachodzące na siebie pola dotyku są gorsze niż
 *    małe. Zamiast nakładki linki stają się `inline-block` o wysokości
 *    44 px: wiersz rośnie razem z nimi, więc nic się nie nakłada.
 *    Kosztem jest wysokość całych okruszków — liczby w docs/strona-produktu.md.
 *    Rozmiar pisma, kolor i treść bez zmian. */
@media (max-width: 782px) {
	.ls-product .wc-block-breadcrumbs a {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}
}

/* ------------------------------------------------------------------
 * Lista produktów i siatka kart (templates/archive-product.html,
 * sekcja „Może Ci się spodobać” w templates/single-product.html).
 * theme.json nie sięga: odstępów siatki bloku Product Collection
 * (WooCommerce wpisuje 1.25em na sztywno), marginesów między elementami
 * karty, pola „Sortowanie” ani numerów paginacji.
 * ------------------------------------------------------------------ */

/* Siatka jak sekcja 08 makiety: 3 kolumny, 48 px między rzędami, 24 px między
   kolumnami. Kolumny na sztywno, bo automatyczne kolumny WooCommerce liczą
   szerokość z własnym odstępem 1.25em i przy 24 px mieszczą tylko dwie.
   Poniżej 782 px dwie kolumny — wersja mobilna do dopracowania w dniu 18. */
.ls-product-grid .wc-block-product-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
@media (max-width: 782px) {
	.ls-product-grid .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ls-product-grid .wc-block-product-template .wc-block-product > * {
	margin: 0;
}

/* Karta: nazwa zajmuje wolne miejsce, cena zawsze w jednej linii. */
.ls-product-card .wp-block-post-title {
	flex: 1 1 auto;
}
.ls-product-card .wc-block-components-product-price {
	flex: 0 0 auto;
	white-space: nowrap;
	line-height: 1.55;
}
.ls-product-card img[alt=""] {
	border: 0; /* WooCommerce dorysowuje szarą ramkę spoza palety */
}

/* Telefon: nazwa nad ceną, nie obok niej. Przy dwóch kolumnach kafel ma
   141,75 px (375 px) / 147,9 px (390 px), a cena z `white-space: nowrap`
   zabiera z tego 49,6–70 px — nazwie zostaje 52,7–74,3 px i rozjeżdża się
   na 3–4 linie, łamiąc wyrazy w środku („TMP Wazon ceramiczn|y”, 4 linie,
   80,6 px). Kafle w jednym rzędzie dostają przez to różne wysokości.
   W pionie nazwa ma całe 141,75 px.

   Reguła celowo siedzi przy `.ls-product-card`, a nie przy którejś siatce:
   ta sama karta stoi w sekcjach 06 i 08 strony głównej, na liście produktów
   (templates/archive-product.html) i w „Może Ci się spodobać” na stronie
   produktu. Jedna reguła w jednym miejscu — inaczej te cztery widoki
   rozjechałyby się przy pierwszej poprawce.

   `align-items` trzeba ustawić wprost: w kolumnie odpowiada za oś poziomą,
   a układ bloku wnosi `flex-end` (sekcja 06, „wyrównanie do dołu”), przez
   co cena wylądowałaby przy prawej krawędzi kafla. 8 px odstępu zamiast
   dziedziczonych 24 px, żeby nazwa i cena czytały się jako jedno. */
@media (max-width: 782px) {
	.ls-product-card > .wp-block-group.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--20);
	}
}

/* ------------------------------------------------------------------
 * Sekcja 06 „Dwie sofy” (patterns/featured-sofas.php).
 * ------------------------------------------------------------------ */

/* Dwie karty obok siebie, 24 px między nimi — nadpisanie trzech kolumn listy
   produktów, stąd obie klasy w selektorze. Na telefonie jedna karta w rzędzie. */
.ls-product-grid.ls-sofa-grid .wc-block-product-template {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
@media (max-width: 782px) {
	.ls-product-grid.ls-sofa-grid .wc-block-product-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Kropki tkanin pod nazwą: 12 px, okrągłe, 8 px odstępu — tak jest w makiecie.
   Zaokrąglenie to jedyny wyjątek od zasady „zero zaokrągleń”; na stronie
   produktu te same tkaniny są kwadratami (pytanie o ujednolicenie jest
   u Mateusza). Nazwę tkaniny zostawiamy w HTML dla czytników ekranu —
   tutaj tylko znika z widoku. Kolory dokłada lazy_sunday_fabric_dots(). */
.ls-fabric-dots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.ls-fabric-dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

/* Sortowanie: zwykły tekst 13 px, bez ramki i tła, 1 px linia pod spodem jak „Szukaj”. */
.ls-archive .wc-block-catalog-sorting select.orderby {
	padding: 0 20px 5px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

/* Paginacja: same numery 13 px, bieżąca strona z 1 px podkreśleniem. */
.ls-archive .wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}
.ls-archive .wp-block-query-pagination-numbers .page-numbers {
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
}
.ls-archive .wp-block-query-pagination-numbers .page-numbers.current,
.ls-archive .wp-block-query-pagination-numbers .page-numbers:hover {
	border-bottom-color: var(--wp--preset--color--black);
}

/* Filtry nad siatką: każda grupa to wiersz „ETYKIETA  wartość  wartość …”.
   Przyciski bloku WooCommerce (chips) jako zwykły tekst 13 px bez ramki i tła;
   wybrana wartość i hover — 1 px podkreślenie jak linki w nagłówku. */
.ls-filters .wc-block-product-filters__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
/* Grupa bez wartości do wyboru: WooCommerce oznacza ją klasą
   `wc-block-product-filter--hidden`, a nasz `display: flex` by to nadpisał
   — zostałaby goła etykieta (np. na pustej kategorii). */
.ls-filters .ls-filter.wc-block-product-filter--hidden,
.ls-filters .ls-filter[hidden] {
	display: none;
}
.ls-filters .ls-filter {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}
.ls-filters .ls-filter > .wp-block-heading {
	flex: 0 0 120px;
	margin: 0;
}
.ls-filters .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}
.ls-filters .wc-block-product-filter-chips__item {
	padding: 0 0 2px;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	cursor: pointer;
}
.ls-filters .wc-block-product-filter-chips__item:hover,
.ls-filters .wc-block-product-filter-chips__item:focus-visible,
.ls-filters .wc-block-product-filter-chips__item[aria-checked="true"] {
	background: transparent;
	color: var(--wp--preset--color--black);
	border-bottom-color: var(--wp--preset--color--black);
}
.ls-filters .wc-block-product-filter-chips__item:focus {
	outline: none;
}
/* Tkanina: mały kwadrat koloru 12 px przed nazwą (blok domyślnie pokazuje samo kółko). */
.ls-filters .wc-block-product-filter-chips__label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}
.ls-filters .wc-block-product-filter-chips__swatch {
	width: 12px;
	height: 12px;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 0;
}
.ls-filters .is-style-swatch .wc-block-product-filter-chips__text {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	overflow: visible;
}
.ls-filters .wc-block-product-filter-chips__show-more {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}
/* „Wyczyść filtry” pojawia się tylko, gdy coś jest wybrane — jako link 13 px. */
.ls-filters .ls-filter-clear .wp-block-button__link {
	padding: 0 0 2px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	background: transparent;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------
 * Szuflada filtrów (atrybut `showFilterDrawer` w templates/archive-product.html).
 *
 * Mechanika w całości należy do WooCommerce: markup, otwieranie, zamykanie,
 * blokada przewijania tła i próg 601 px, poniżej którego filtry chowają się
 * w szufladzie, a powyżej wracają płasko. Tutaj jest wyłącznie wygląd.
 * Decyzja i pomiary: docs/lista-produktow.md.
 * ------------------------------------------------------------------ */

/* Odstęp między grupami filtrów na desktopie.
 *
 * Włączenie szuflady przenosi grupy filtrów o jeden poziom głębiej:
 * kontenerem flex przestaje być `__content`, a staje się `__overlay-content`.
 * To ta sama reguła WooCommerce, ale zmienna odstępu rozwiązuje się tam
 * inaczej i odstęp rośnie z 16 na 24 px, przez co pasek filtrów na desktopie
 * był wyższy o 16 px (163,74 → 179,74). Przywracamy 16 px tam, gdzie filtry
 * stoją płasko, czyli od progu WooCommerce 601 px w górę.
 *
 * Wewnątrz szuflady (do 600 px) zostaje 24 px — tam jest miejsce, a większy
 * odstęp rozdziela grupy czytelniej. */
@media (min-width: 601px) {
	.ls-filters .wc-block-product-filters__overlay-content {
		gap: var(--wp--preset--spacing--30);
	}
}

/* Przycisk otwierający. WooCommerce renderuje goły tekst 11 px z ikoną;
   dostaje wygląd przycisku konturowego motywu — 1 px ramka Black, bez tła,
   bez zaokrągleń, pismo 14 px. Odstęp 16 px w pionie daje 48 px wysokości,
   czyli ponad próg dotyku. Na desktopie WooCommerce i tak go chowa. */
.ls-filters .wc-block-product-filters__open-overlay {
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1;
}

/* Płótno szuflady: tło strony, bez zaokrągleń. */
.ls-filters .wc-block-product-filters__overlay-dialog {
	background-color: var(--wp--preset--color--warm-white);
	border-radius: 0;
}

/* Przyciemnienie pod szufladą. WooCommerce daje tu szarość spoza palety
   (rgba(95,95,95,.35)). Zasada 2 mówi „zero nowych kolorów”, więc zamiast
   nowej szarości bierzemy Charcoal z palety i rozcieńczamy go
   przezroczystością — to ten sam kolor, nie nowy. */
.ls-filters.is-overlay-opened .wc-block-product-filters__overlay {
	background-color: color-mix(in srgb, var(--wp--preset--color--charcoal) 45%, transparent);
}

/* Nagłówek i stopka szuflady: 1 px linia Stone zamiast cienia. Motyw nie ma
   cieni — rozdziela liniami, tak samo jak wiersze na stronie produktu. */
.ls-filters .wc-block-product-filters__overlay-header {
	border-bottom: 1px solid var(--wp--preset--color--stone);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.ls-filters .wc-block-product-filters__overlay-footer {
	box-shadow: none;
	border-top: 1px solid var(--wp--preset--color--stone);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* „Zamknij”: WooCommerce daje 73,8 × 24. Etykieta jak nagłówki kolumn
   w motywie — 11 px, uppercase, tracking 0,04em — a pole dotyku 44 px.
   `justify-content` trzyma napis przy prawej krawędzi, bo nagłówek szuflady
   jest ustawiony `row-reverse`. */
.ls-filters .wc-block-product-filters__close-overlay {
	min-width: 44px;
	min-height: 44px;
	justify-content: flex-end;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Treść szuflady: odstęp boczny jak margines strony na telefonie. */
.ls-filters .wc-block-product-filters__overlay-content {
	padding-right: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------
 * Koszyk i zamówienie (bloki WooCommerce: Koszyk, Zamówienie, Potwierdzenie).
 * WYŁĄCZNIE wygląd — logika, pola i kroki zamówienia zostają WooCommerce.
 * theme.json nie sięga wnętrza tych bloków: zaokrągleń pól i przycisków
 * ilości, koloru linii (zmienna --wc-separator-color), tytułów kroków,
 * pól formularza ani panelu podsumowania.
 * ------------------------------------------------------------------ */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-separator-color: var(--wp--preset--color--stone);
}

/* Tytuły kroków i kolumn jak etykiety sekcji na stronie produktu: 11 px, uppercase. */
.wp-block-woocommerce-cart .wc-block-cart-items__header span,
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.55;
}

/* Nazwa produktu 14 px, warianty (Tkanina, Konfiguracja) 12 px Charcoal, ceny 13 px. */
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}
.wp-block-woocommerce-cart .wc-block-components-product-details,
.wp-block-woocommerce-checkout .wc-block-components-product-details {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--charcoal);
}
.wp-block-woocommerce-cart .wc-block-components-totals-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-item {
	font-weight: 400;
}

/* Wybór ilości: bez zaokrągleń, 1 px ramka Stone, znaki „−” i „+” bez wyblaknięcia. */
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--minus,
.wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--plus {
	border-radius: 0;
}
.wc-block-components-quantity-selector {
	border-color: var(--wp--preset--color--stone);
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	opacity: 1;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	font-size: var(--wp--preset--font-size--small);
}

/* Pola formularza: bez zaokrągleń, 1 px Stone, tło strony, 14 px; w fokusie linia Black. */
/* Selektory celowo długie — muszą przebić reguły WooCommerce (np.
   `.wc-block-components-form .wc-block-components-text-input input[type=text]`). */
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type],
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type],
.wp-block-woocommerce-checkout .wc-block-components-textarea textarea,
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container,
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-block-components-text-input input[type],
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type] {
	border-radius: 0;
	border-color: var(--wp--preset--color--stone);
	background: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	box-shadow: none;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input[type]:focus,
.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type]:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea textarea:focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-cart .wc-block-components-text-input input[type]:focus,
.wp-block-woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type]:focus {
	border: 1px solid var(--wp--preset--color--black);
	box-shadow: none;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--base);
}

/* Pola wyboru (notatka, regulamin): kwadrat 1 px Stone, zaznaczony — Black. */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 0;
	border-color: var(--wp--preset--color--stone);
	background: var(--wp--preset--color--warm-white);
}
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--warm-white);
}

/* Karta adresu, panel podsumowania, komunikaty: bez zaokrągleń.
   Podsumowanie na Cream, jak kafelki w makiecie. */
.wp-block-woocommerce-checkout .wc-block-components-address-card,
.wc-block-components-notice-banner {
	border-radius: 0;
}
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
	border: 0;
	border-radius: 0;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--cream);
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	border-radius: 0;
}

/* Wybrana metoda płatności / dostawy: 1 px ramka Black zamiast zaokrąglonej 1,5 px. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--black);
}

/* Nagłówek zamówienia (parts/checkout-header.html): link „Wróć do koszyka” jako
   zwykły tekst z podkreśleniem na hover, jak linki w nagłówku sklepu. Ikonę koszyka
   blok WooCommerce dodaje zawsze — chowamy ją, w makiecie koszyk jest napisem. */
.ls-header .wp-block-woocommerce-cart-link .wc-block-mini-cart__icon {
	display: none;
}
.ls-header .wc-block-cart-link {
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	text-decoration: none;
}
.ls-header .wc-block-cart-link:hover {
	border-bottom-color: var(--wp--preset--color--black);
}

/* Strona „Zamówienie otrzymane” (szablon WooCommerce order-confirmation, nienadpisany).
   Tytuł w rozmiarze nagłówka sekcji zamiast 84 px, podziękowanie jak cytat manifestu,
   tabele i ramki bez zaokrągleń, linie Stone, bez pogrubień (Outfit ma tylko 300/400/500). */
.woocommerce-order-received main {
	--wc-separator-color: var(--wp--preset--color--stone);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--100);
}
.woocommerce-order-received main h1 {
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: 0;
	line-height: 1.25;
}
.woocommerce-order-received main h2 {
	font-size: var(--wp--preset--font-size--product);
	font-weight: 300;
}
.woocommerce-order-received .wc-block-order-confirmation-status p {
	font-size: var(--wp--preset--font-size--quote);
	font-weight: 300;
	line-height: 1.45;
}
.woocommerce-order-received .wc-block-order-confirmation-summary,
.woocommerce-order-received .wc-block-order-confirmation-totals__table,
.woocommerce-order-received .wc-block-order-confirmation-billing-address,
.woocommerce-order-received .wc-block-order-confirmation-shipping-address {
	border-radius: 0;
	border-color: var(--wp--preset--color--stone);
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key,
.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table strong {
	font-weight: 400;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key,
.woocommerce-order-received .wc-block-order-confirmation-totals__table thead th {
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--charcoal);
}

/* ------------------------------------------------------------------
 * Koszyk i zamówienie na telefonie.
 *
 * Wszystko tutaj to CSS na klasach WooCommerce — nadpisanie szablonu nie
 * wchodzi w grę i nie jest potrzebne: Koszyk i Zamówienie to bloki
 * renderowane w przeglądarce, które nie czytają szablonów `woocommerce/*.php`,
 * więc katalogu `woocommerce/` ta sekcja nie potrzebuje (zasada 5 w CLAUDE.md
 * nie jest tu w ogóle naruszana).
 *
 * Pomiary przed i po: docs/audyt-strony-glownej.md.
 * ------------------------------------------------------------------ */

/* 1. Wiersz koszyka — siatka.
 *
 * WooCommerce MA układ mobilny i on działa: przy wąskim bloku dokłada
 * `.wc-block-cart` klasę `is-mobile`, a `cart.css` zamienia wiersz w siatkę
 * `grid-template-columns: 80px 132px`. Problem w tym, że ta siatka nie zgadza
 * się z własnym markupem wtyczki:
 *
 * - `.wc-block-cart-item__product` ma `grid-column: 2 / 4`, więc wchodzi
 *   w kolumnę 3 — niezadeklarowaną, czyli dorobioną i dopasowaną do treści,
 * - `.wc-block-cart-item__total` nie ma ustawionej kolumny, więc ląduje
 *   automatycznie w kolumnie 4 — też dorobionej.
 *
 * Zmierzona siatka wynikowa to `80px 132px 22,06px 56,57px`, czyli cztery
 * kolumny: 80 + 132 + 22,06 + 56,57 + 3 × 16 odstępu + 4 ramki = 342,63 px
 * przy 307,5 px treści (375 px) — tabela wystawała 35,13 px poza kontener
 * i 1,38 px poza ekran. (`cart.css` ustawia też ilości `grid-row-start: 2`,
 * ale ta reguła nigdy nie działa: w tej wersji markupu ilość siedzi WEWNĄTRZ
 * komórki produktu, a nie jest dzieckiem wiersza.)
 *
 * Deklarujemy więc siatkę zgodną z markupem: zdjęcie i opis w pierwszym
 * wierszu, wartość pozycji w drugim, przy prawej krawędzi. 80 + 16 + 211,5
 * daje dokładnie 307,5. Kolumna produktu rośnie ze 170,06 do 207,5 px,
 * a wiersz ilości potrzebuje 159 px, więc zostaje 48,5 px zapasu i selektor
 * ilości nie musi się zawijać.
 *
 * Odrzucone warianty (wszystkie mieściły tabelę w 307,5, ale gorzej):
 * ukrycie kolumny zdjęcia — zdjęcie jest głównym rozpoznaniem pozycji;
 * ukrycie kolumny kwoty — przy ilości > 1 wartość pozycji to nie to samo
 * co cena jednostkowa pod nazwą, więc to ukrywanie informacji, nie duplikatu;
 * siatka trzykolumnowa z zawijanym wierszem ilości — kolumna produktu tylko
 * 134,93 px i wiersze wysokie na 256,5 zamiast 202,7.
 *
 * Selektor zaczyna się od `.wc-block-cart`, a nie od `.is-mobile`, i to jest
 * istotne. WooCommerce wchodzi w ten układ DWIEMA drogami, które dają ten sam
 * zepsuty wynik:
 *
 * - `@container (max-width: 699px)` z selektorem `.wc-block-cart table…`
 *   — droga nowa, nie wymaga żadnej klasy,
 * - `.is-mobile table…` bez zapytania — droga stara, przez klasę dokładaną
 *   skryptem po wyrenderowaniu bloku.
 *
 * Klasa `is-mobile` pojawia się i znika asynchronicznie, więc reguła oparta
 * tylko na niej działa z doskoku: przy jednym wyrenderowaniu łapie, przy
 * następnym nie i wraca siatka 342,63 px. `.wc-block-cart` jest zawsze,
 * więc łapie obie drogi. Waga wystarcza (remis z `cart.css`, a `style.css`
 * ładuje się po arkuszach wtyczki), a `@media` pilnuje, żeby desktop został
 * nietknięty. */
@media (max-width: 782px) {
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 80px minmax(0, 1fr);
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3;
		grid-row: 1;
	}
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2 / 3;
		grid-row: 2;
		justify-self: end;
	}
}

/* 2. Pola dotyku 44 px.
 *
 * Kolejność ma znaczenie: same pola dotyku bez poprawki siatki wyżej
 * POGARSZAJĄ sprawę — kosz 24 → 44 px poszerza wiersz ilości, tabela rośnie
 * z 342,63 do 362,63, a przewijanie w bok z 1 px na 21 px.
 *
 * Tam, gdzie powiększenie samej kontrolki nic nie psuje (ilość, kosz), rośnie
 * kontrolka. Tam, gdzie zmieniłoby to wygląd, rośnie wyłącznie pole dotyku —
 * nakładka ::after, ta sama sztuczka co w `.ls-link` i `.ls-tile`, bez ruszania
 * widocznego atramentu. */
@media (max-width: 782px) {
	/* Ilość: przyciski 30 × 25,9 i pole 45 × 25,9. Przyciski „−” i „+” dostają
	   44 px także wszerz — próg dotyczy obu wymiarów, a cały selektor rośnie
	   wtedy ze 107 do 135 px i nadal mieści się w kolumnie produktu (207,5). */
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		min-width: 44px;
	}
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
		min-height: 44px;
	}

	/* Kosz: 24 × 24 — najmniejsza kontrolka w koszyku. */
	.wc-block-cart-item__remove-link {
		min-width: 44px;
		min-height: 44px;
	}

	/* Szerokie, ale niskie: „Dodaj kupony” 243,5 × 18,2, „Wróć do koszyka”
	   96 × 33,1, etykieta „Dodaj notatkę do zamówienia” 203,1 × 20.
	   Nakładka trzyma szerokość elementu i podnosi samą wysokość. */
	.wc-block-components-totals-coupon .wc-block-components-panel__button,
	.ls-header .wc-block-cart-link,
	.wc-block-components-checkbox label {
		position: relative;
	}
	.wc-block-components-totals-coupon .wc-block-components-panel__button::after,
	.ls-header .wc-block-cart-link::after,
	.wc-block-components-checkbox label::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 44px;
		transform: translateY(-50%);
	}

	/* ✕ przy nazwie kuponu: 16 × 16, najmniejsze pole dotyku w całym sklepie.
	   Tu nakładka musi rosnąć w obie strony, bo element jest mały także wszerz. */
	.wc-block-components-chip__remove {
		position: relative;
	}
	.wc-block-components-chip__remove::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}

/* 3. Wiersz podsumowania zamówienia.
 *
 * Dotyczy POJEDYNCZEGO wiersza, nie liczby wierszy ani podziału bloku —
 * te zmienią się po ustawieniu metody wysyłki (punkt na liście produkcyjnej
 * w CLAUDE.md) i świadomie ich nie ruszamy.
 *
 * Wiersz jest rzędem „zdjęcie | opis | kwota”, przez co przy 307,5 px treści
 * na nazwę zostaje 67,6–78,7 px: „TMP Vento 3-osobowa” łamie się na trzy linie,
 * a krótki opis spada we wstążkę na 7–8 linii. Ta sama zasada co w koszyku
 * wyżej: opis dostaje całą szerokość obok zdjęcia, a kwota schodzi do drugiego
 * wiersza przy prawej krawędzi.
 *
 * `.wc-block-components-order-summary` w selektorze jest konieczne: `checkout.css`
 * ustawia `display: flex` selektorem o dwóch klasach, więc sama klasa wiersza
 * ma za małą wagę i siatka w ogóle się nie włącza. */
@media (max-width: 782px) {
	.wc-block-components-order-summary .wc-block-components-order-summary-item {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--30);
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
		grid-column: 1;
		grid-row: 1;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
		grid-column: 2;
		grid-row: 1;
	}
	.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}
}

/* Telefon: pasek filtrów i sortowanie jedno pod drugim, etykieta nad wartościami. */
@media (max-width: 782px) {
	.ls-archive-toolbar {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--40);
	}
	.ls-archive-toolbar > * {
		flex: 1 1 100%;
	}
	.ls-filters .ls-filter {
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
	}
	.ls-filters .ls-filter > .wp-block-heading {
		flex: 0 0 auto;
	}
}

/* Telefon: pola dotyku na liście produktów — cztery kontrolki poniżej progu
 * 44 px. Pomiary i uzasadnienie: docs/lista-produktow.md.
 *
 * Wszystkie cztery to napisy z 1 px kreską, a nie przyciski, więc wszędzie
 * rośnie samo pole dotyku przez nakładkę ::after — widoczny atrament zostaje
 * bez zmian i kreska nie odkleja się od tekstu. Wyjątkiem jest pole
 * „Sortowanie”, które jest `select` i nakładki nie przyjmie.
 *
 * Dwa miejsca wymagają przy okazji większego odstępu, bo nakładki 44 px
 * stojące zbyt blisko siebie zachodziłyby na siebie — a nachodzące pola
 * dotyku są gorsze niż małe. Dotyczy to chipów filtrów (w pionie)
 * i numerów paginacji (w poziomie). */
@media (max-width: 782px) {
	/* 1. Chipy filtrów: 23,1 px wysokości, 22 sztuki w trzech grupach.
	   Odstęp między wierszami rośnie z 8 na 24 px, więc rozstaw wierszy to
	   23,1 + 24 = 47,1 px, a nakładka sięga 10,45 px w górę i w dół — mieści
	   się w odstępie bez kolizji. Odstęp poziomy zostaje 24 px. */
	.ls-filters .wc-block-product-filter-chips__items {
		row-gap: var(--wp--preset--spacing--40);
	}
	.ls-filters .wc-block-product-filter-chips__item {
		position: relative;
	}
	.ls-filters .wc-block-product-filter-chips__item::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 44px;
		transform: translateY(-50%);
	}

	/* 2. Sortowanie: `select` 206 × 24,5. Nakładka na `select` nie zadziała
	   (element zastępowany), więc rośnie sama kontrolka. Kreska pod spodem
	   zjeżdża przez to niżej — to jedyna widoczna zmiana w tym zestawie,
	   wyłącznie na telefonie. */
	.ls-archive .wc-block-catalog-sorting select.orderby {
		box-sizing: border-box;
		min-height: 44px;
	}

	/* 3. „Wyczyść filtry”: 78,72 × 16 — najmniejsza kontrolka tego widoku.
	   Stoi sama w wierszu, więc nakładka na nic nie zachodzi. */
	.ls-filters .ls-filter-clear .wp-block-button__link {
		position: relative;
	}
	.ls-filters .ls-filter-clear .wp-block-button__link::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 44px;
		transform: translateY(-50%);
	}

	/* 4. Numery paginacji: 4,5 × 25,1 i 7 × 25,1 — pole dotyku miało
	   szerokość cyfry, czyli najmniejsze w całym sklepie. Tu nakładka musi
	   rosnąć w obie strony, bo element jest wąski także w poziomie, a wtedy
	   odstęp 16 px jest za mały: dwie nakładki po 44 px wymagają co najmniej
	   37 px między cyframi. Stąd odstęp 48 px (`spacing|60`) — przy dwóch
	   stronach daje to rząd szeroki na 59,5 px, a przy wielu numerach rząd
	   zawija się do drugiej linii, co jest poprawnym zachowaniem. */
	.ls-archive .wp-block-query-pagination-numbers {
		gap: var(--wp--preset--spacing--60);
	}
	.ls-archive .wp-block-query-pagination-numbers .page-numbers {
		position: relative;
	}
	.ls-archive .wp-block-query-pagination-numbers .page-numbers::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}

/* ------------------------------------------------------------------
 * Strona główna — sekcje z design/homepage.html (patterns/).
 * ------------------------------------------------------------------ */

/* CTA w makiecie to nie przycisk, tylko napis 14 px z 1 px kreską pod spodem
   (sekcje 03, 04, 06, 10). theme.json umie opisać przycisk wyłącznie jako
   prostokąt z tłem i paddingiem, więc wariant „link” mieszka tutaj. */
.ls-link .wp-block-button__link {
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
}
.ls-link .wp-block-button__link:hover,
.ls-link .wp-block-button__link:focus {
	background: transparent;
	color: inherit;
}

/* Telefon: pole dotyku odnośnika `ls-link`. Napis 14 px z kreską ma 18 px
   wysokości (74,2 px w hero, 128,4 px w sekcji 05, 156,2 px w sekcji 08)
   przy wymaganym minimum 44 px. Nakładka ::after rozciąga samo pole dotyku,
   nie ruszając ani jednego piksela widocznego atramentu — kreska zostaje
   3 px pod tekstem. Ta sama sztuczka co w `.ls-tile a::after` niżej.
   Nakładka sięga 13 px w górę i w dół poza tekst, a najciaśniejsze
   sąsiedztwo to 36 px (hasło w hero) i 48 px (siatka w sekcjach 05 i 08),
   więc nigdzie nie zachodzi na sąsiada.
   Reguła jest jedna dla wszystkich trzech odnośników — hero miało ją
   wcześniej osobno, z identycznymi deklaracjami. */
@media (max-width: 782px) {
	.ls-link .wp-block-button__link {
		position: relative;
	}
	.ls-link .wp-block-button__link::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 44px;
		transform: translateY(-50%);
	}
}

/* 03 hero: margines boczny treści. Pattern ustawia na okładce `padding: 0`
   na boki, a WordPress zeruje `has-global-padding` na zagnieżdżonym
   kontenerze treści — hero jako jedyna sekcja na stronie nie dostaje więc
   marginesu strony i sama układa hasło, centrując 1180 px w pełnej szerokości
   okna. Przy 1440 px wychodzi z tego 130 px, czyli przypadkiem dokładnie tyle,
   ile margines strony (9vw = 129,59 px) — i dlatego w makiecie nic nie razi.
   Poniżej tej szerokości oba sposoby się rozjeżdżają, bo margines strony
   maleje z vw, a centrowanie nie. Zmierzone: 1366 px → hero 93, reszta strony
   122,9 (rozjazd 30 px); 1024 px → hero 0, reszta 92,2; 900 px → hero 0,
   reszta 81. Rozjazd sięga 1438 px i znika dopiero przy 1439 px.

   Te same dwa `padding` co w każdej innej sekcji ustawiają hero na tej samej
   pionowej linii na każdej szerokości. Reguła jest celowo bez media query,
   bo powyżej 1439 px nic nie zmienia: dodanie marginesu P i wyśrodkowanie
   w nim 1180 px daje ten sam wynik co wyśrodkowanie 1180 px w pełnym oknie,
   dopóki vw ≥ 1180 + 2P. Sprawdzone pomiarowo na 1439, 1440, 1500 i 1920 px.
   Pomiary: docs/hero.md. */
.ls-hero > .wp-block-cover__inner-container {
	padding-right: var(--wp--preset--spacing--90);
	padding-left: var(--wp--preset--spacing--90);
}

/* 03 hero na telefonie. Dwie poprawki, obie wyłącznie mobilne — makieta
   obejmuje sam desktop, więc to rozstrzygnięcia z zasady 11 w CLAUDE.md,
   a nie odstępstwo od projektu. Pomiary i uzasadnienie: docs/hero.md.

   1. Wysokość. 820 px na ekranie 812 px wypycha odnośnik pod zgięcie i przy
      okazji rozciąga zdjęcie poziome do proporcji 1:2,2 — przy `cover` skalę
      wyznacza wtedy wysokość i z kadru zostaje 25,5 % szerokości, czyli 38 %
      sofy. 560 px mieści całe hero nad zgięciem także w realnym Safari
      (~635 px) i podnosi widoczny kadr do 37,4 % szerokości, czyli 55 % sofy.
      To łata na czas, zanim powstanie zdjęcie: docelowo hero ma dwa kadry
      z tej samej sceny, poziomy na desktop i pionowy na telefon.
      Stała w pikselach, nie `svh`, bo wysokość nagłówka nie jest stałą CSS —
      560 px działa tak samo z paskiem informacyjnym i bez niego.
      Jedyne `!important` w całym arkuszu i jedyne miejsce, gdzie jest ono
      konieczne: blok Okładka zapisuje wysokość jako `style="min-height:820px"`
      wprost w treści strony (a ta siedzi w bazie), więc żaden selektor
      z arkusza tego nie przebije. Alternatywą byłaby zmiana w
      patterns/hero.php, ale ta nie przeskakuje do sekcji już wstawionej
      w stronę — trzeba by wymieniać sekcję w edytorze przy każdym wdrożeniu.

   2. Pole dotyku odnośnika „Zobacz sofy”. Nakładka ::after na 44 px mieszka
      przy regule `.ls-link` wyżej — te same deklaracje obowiązywały tu
      wcześniej osobno, a sekcje 05 i 08 potrzebują dokładnie tego samego.
      Hero renderuje się bez zmian. */
@media (max-width: 782px) {
	.wp-block-cover.ls-hero {
		min-height: 560px !important;
	}
}

/* 03 hero: pionowe położenie napisu na telefonie. Ustawienie z panelu
   (Wygląd → Hero na telefonie), nie reguła na sztywno — blok Okładka ma jedną
   pozycję treści na wszystkie szerokości, a to pozwala ruszyć sam telefon,
   zostawiając ustawienie bloku tam, gdzie je widać, czyli w edytorze strony.

   Klasę dokłada filtr w inc/hero-mobile.php i tylko przy wartości innej niż
   „domyślne”. Powyżej progu **nie ma tu żadnej deklaracji** — nie wygrywamy
   z klasą rdzenia specyficznością, tylko w ogóle nie wchodzimy w grę.
   Zmierzone: przy 1440 i 601 px dołożenie którejkolwiek z tych klas nie zmienia
   ani piksela; przy 600 i 375 px zmienia się sam pion, lewa krawędź stoi.

   Próg 600 px jest ten sam co przy podmianie kadru — liczba żyje w PHP
   (`lazy_sunday_hero_mobile_config()`), ale media query jej nie przeczyta,
   więc przy zmianie trzeba poprawić oba miejsca.

   Samo `align-items` wystarcza: rdzeń trzyma pozycję treści okładki wyłącznie
   przez `align-items` i `justify-content` na niej samej, a kontener treści
   dostaje tylko `position`, `width`, `color` i `margin` — bez `align-self`
   i bez wysokości (wp-includes/blocks/cover/style.css). WooCommerce okładki
   nie dotyka.

   „Góra” stawia napis na styk z górną krawędzią zdjęcia, bo pattern ustawia
   okładce `padding-top: 0` stylem wpisanym w element, a tego nie przebije
   reguła z arkusza. Świadome: odstęp wymagałby drugiego `!important` albo
   podbijania specyficzności pod regułę rdzenia. Ekran w panelu uprzedza o tym
   przy polu. Pomiary: docs/hero.md. */
@media (max-width: 600px) {
	.wp-block-cover.ls-hero-text-top {
		align-items: flex-start;
	}

	.wp-block-cover.ls-hero-text-center {
		align-items: center;
	}

	.wp-block-cover.ls-hero-text-bottom {
		align-items: flex-end;
	}
}

/* 04 siatka kategorii: klikalny jest cały kafelek, ale odnośnik jest jeden —
   ten w podpisie pod zdjęciem. Dzięki temu adres kategorii zmienia się w edytorze
   strony w jednym miejscu, a nie osobno na zdjęciu i osobno w tekście.
   theme.json nie opisuje pozycjonowania, więc rozciągnięcie linku mieszka tutaj. */
.ls-tile {
	position: relative;
}
.ls-tile a::after {
	content: "";
	position: absolute;
	inset: 0;
}
/* Jedyna reakcja na kursor: 1 px kreska pod podpisem. Linia jest od początku
   przezroczysta, żeby tekst nie podskakiwał przy najechaniu. */
.ls-tile a {
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}
.ls-tile a:hover,
.ls-tile a:focus {
	border-bottom-color: var(--wp--preset--color--black);
}

/* 05 modułowość: sześć modułów w jednym rzędzie jak w makiecie. Układ „Siatka”
   bloku Grupa umie albo stałą liczbę kolumn (sześć ikon w rzędzie także na
   telefonie), albo minimalną szerokość kolumny — a ta jedną wartością nie daje
   jednocześnie 6 kolumn przy 1180 px treści i 2 przy 307 px na telefonie.
   Dlatego 6 kolumn niesie blok (minimalna szerokość 150 px), a telefon ten
   wyjątek. Dwie klasy w selektorze, żeby przebić regułę układu bloku.
   Pełna wersja mobilna wszystkich sekcji to osobny etap (dzień 18). */
@media (max-width: 782px) {
	.wp-block-group.ls-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 08 siatka dodatków: zakładki kategorii. To zwykłe linki z parametrem
   `categories` w adresie, nie blok filtrów — powody w nagłówku
   patterns/accessories-grid.php. W makiecie wyglądają jak tekst 13 px,
   a kreskę ma tylko zakładka włączona; theme.json opisuje przycisk wyłącznie
   jako prostokąt z tłem, więc wariant „zakładka” mieszka tutaj, tak samo jak
   `ls-link` wyżej. Kreska jest od początku przezroczysta, żeby tekst nie
   podskakiwał przy najechaniu. Klasę `is-active` dokłada
   lazy_sunday_mark_active_tab() w functions.php.
   Siatka pod zakładkami nie ma tu własnych reguł — `ls-product-grid` (3 kolumny,
   48/24) jest napisana dokładnie pod tę sekcję. */
.ls-tabs .wp-block-button__link {
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}
.ls-tabs .wp-block-button__link:hover,
.ls-tabs .wp-block-button__link:focus,
.ls-tabs .wp-block-button__link.is-active {
	border-bottom-color: var(--wp--preset--color--black);
	background: transparent;
	color: inherit;
}

/* Telefon: pole dotyku zakładki. Napis 13 px z kreską ma 18 px wysokości
   (35,3–59 px szerokości) przy wymaganym minimum 44 px. Ta sama nakładka
   co przy `ls-link` wyżej — rośnie wyłącznie w pionie, więc 24 px odstępu
   między sąsiednimi zakładkami zostaje nietknięte, a do siatki pod spodem
   jest 48 px. Widoczny atrament bez zmian. */
@media (max-width: 782px) {
	.ls-tabs .wp-block-button__link {
		position: relative;
	}
	.ls-tabs .wp-block-button__link::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		left: 0;
		height: 44px;
		transform: translateY(-50%);
	}
}

/* 09 próbki tkanin: sześć kwadratów w jednym rzędzie, 24 px między nimi —
   nadpisanie trzech kolumn listy produktów, stąd obie klasy w selektorze.
   Na telefonie trzy w rzędzie: sześć kwadratów przy 307 px treści zeszłoby
   do 43 px i faktury tkanin nie byłoby widać. Pełna wersja mobilna
   wszystkich sekcji to osobny etap (dzień 18). */
.ls-product-grid.ls-fabric-grid .wc-block-product-template {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}
@media (max-width: 782px) {
	.ls-product-grid.ls-fabric-grid .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
 * Sekcja 07 „Shop the look” (patterns/shop-the-look.php).
 *
 * Lista produktów obok zdjęcia to ta sama lista produktów co w siatkach,
 * tylko ustawiona w jedną kolumnę. Klasy `ls-product-grid` celowo tu nie ma:
 * tamta jest napisana pod siatkę kart (3 kolumny, odstępy 48/24), a tutaj
 * wiersze mają stykać się kreskami, bez odstępu między nimi.
 * ------------------------------------------------------------------ */

/* Jedna kolumna, zero odstępu: wiersze rozdziela kreska, nie luka. */
.ls-look-list .wc-block-product-template {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* Telefon: wiersz „nagłówek ↔ etykieta” ma się zawinąć. Blok Grupa trzyma
   `nowrap`, przez co przy 307,5 px treści nagłówek dostaje 226 px i łamie
   się na dwie linie, a etykieta „Shop the look” ściska się do 57,5 px
   i też łamie („Shop the” / „look”). Po zawinięciu nagłówek ma całą
   szerokość, a etykieta spada pod niego w jednej linii. Kolejność, treść
   i rozmiary bez zmian.

   Selektor przez `:has()`, bo pattern nie daje temu wierszowi własnej klasy,
   a dopisanie jej w patterns/shop-the-look.php nie przeskoczyłoby do sekcji
   już wstawionej w stronę (treść strony głównej siedzi w bazie). Nagłówek
   sekcji odróżnia ten wiersz od wierszy „nazwa ↔ cena” w kartach produktów,
   które mają `wp-block-post-title`, nie `wp-block-heading`.

   Sprawdzone: na stronie głównej pasuje dokładnie jeden wiersz (sekcja 07),
   a na stronie produktu drugi — „Może Ci się spodobać ↔ Z tej samej
   kategorii”. To ten sam układ i ta sama wada, więc reguła celowo obejmuje
   oba; „O nas” i „Dostawa i zwroty” nie mają takiego wiersza.
   Przeglądarka bez `:has()` po prostu pomija regułę i zostaje dzisiejszy
   układ. */
@media (max-width: 782px) {
	.wp-block-group.is-nowrap:has(> .wp-block-heading) {
		flex-wrap: wrap;
	}
}

/* Miniatura 56 px jak w makiecie; reszta wiersza bierze resztę szerokości.
   `margin: 0` na dzieciach, bo WooCommerce dokłada karcie własne marginesy. */
.ls-look-row > * {
	margin: 0;
}
.ls-look-row .wc-block-components-product-image {
	flex: 0 0 56px;
	width: 56px;
}
.ls-look-row .wc-block-components-product-image img {
	display: block;
	width: 100%;
	border: 0; /* WooCommerce dorysowuje szarą ramkę spoza palety */
}

/* Nazwa zajmuje wolne miejsce, cena zawsze w jednej linii — tak samo jak
   w karcie produktu wyżej. */
.ls-look-row .wp-block-post-title {
	flex: 1 1 auto;
}
.ls-look-row .wc-block-components-product-price {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Sekcja 10 „Sunday Stories” (patterns/sunday-stories.php).
 * ------------------------------------------------------------------ */

/* Trzy kolumny i odstęp 24 px liczy siatka core — tu tylko telefon.
   Siatka core z ustawioną liczbą kolumn nie zwęża się sama, a trzy artykuły
   obok siebie na 375 px są nieczytelne.

   Jedna kolumna, nie dwie. Rozstrzyga rozmiar zdjęcia, nie długość tytułu:
   przy dwóch kolumnach kafel ma 141,8 px, czyli zdjęcie 3:2 wysokie na
   94,5 px — miniatura. Sunday Stories to sekcja redakcyjna, która ma
   zachęcać do wejścia w artykuł, więc zdjęcie musi być czytelne: jedna
   kolumna daje 307,5 px szerokości i 205 px wysokości. Przy okazji znika
   pusty slot po trzecim wpisie (trzy pozycje w dwóch kolumnach to zawsze
   2 + 1). Sekcja rośnie o ok. 470 px — do przyjęcia, bo stoi przy końcu
   strony i są to trzy pozycje, nie dwadzieścia. */
@media (max-width: 782px) {
	.ls-stories-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
 * Sekcja 11 „Newsletter” (patterns/newsletter.php, inc/newsletter.php).
 * Formularz nie jest blokiem — nie ma czym go ostylować w theme.json:
 * pole z samą kreską u dołu, przycisk z obwódką, wiersz na środku.
 * Wartości z makiety zaokrąglone do tokenów (10 px → spacing|20).
 * ------------------------------------------------------------------ */

/* Ukrycie dla oka, nie dla czytnika ekranu — etykieta pola e-mail.
   Pomocnik ogólny, pierwsze użycie tutaj. */
.ls-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Formularz nie dostaje tu marginesu: 48 px między nagłówkiem a polem niesie
   blockGap grupy (patterns/newsletter.php). Własne `margin: 0` nadpisywało go,
   bo reguła układu z rdzenia ma `:where()` i tę samą wagę co klasa. */

/* Pole i przycisk w jednym rzędzie na środku; na telefonie rząd się zawija. */
.ls-newsletter-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* 360 px jak w makiecie, ale nigdy szerzej niż ekran. */
.ls-newsletter-field {
	width: min(360px, 100%);
	padding: 0 0 var(--wp--preset--spacing--20);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1;
	text-align: left;
}
.ls-newsletter-field::placeholder {
	color: var(--wp--preset--color--charcoal);
	opacity: 1;
}

/* Przycisk z samą obwódką — inny niż domyślny, pełny przycisk z theme.json. */
.ls-newsletter-button {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}
/* Makieta nie pokazuje stanu po najechaniu; odwrócenie kolorów jest spójne
   z przyciskiem z theme.json (tam charcoal → black) i nie dokłada koloru. */
.ls-newsletter-button:hover {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--warm-white);
}
.ls-newsletter-field:focus-visible,
.ls-newsletter-button:focus-visible {
	outline: 1px solid var(--wp--preset--color--black);
	outline-offset: 4px;
}

/* Telefon: pole i przycisk do progu dotyku 44 px — tego samego, który
   obowiązuje w szufladzie menu. Dziś pole ma 26,5 px, a przycisk 32 px,
   i są jedyną drogą do zapisania się na newsletter.

   To jedyne dwie poprawki tego etapu, które widać: kreska pod polem zjeżdża
   niżej, a przycisk jest wyższy. Wyłącznie na telefonie, czyli tam, gdzie
   makiety nie ma (zasada 11 w CLAUDE.md). Kolory, krój, rozmiar pisma
   i treść bez zmian.

   Przycisk dostaje 16 px odstępu zamiast 8 px, czyli 48 px wysokości —
   14 px dałoby równo 44, ale nie ma takiego tokenu, a zasada mówi
   zaokrąglać do najbliższej wartości ze skali, nie dokładać nowej. */
@media (max-width: 782px) {
	.ls-newsletter-field {
		box-sizing: border-box; /* bez tego 44 px liczy się od pudełka treści i wychodzi 53 */
		min-height: 44px;
	}
	.ls-newsletter-button {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}
}

.ls-newsletter-message {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--base);
	text-align: center;
}

/* Pułapka na boty — ukryta przed wszystkimi, także przed czytnikiem ekranu. */
.ls-newsletter-trap {
	display: none;
}

/* Przypomnienie tylko dla zalogowanego administratora (inc/newsletter.php). */
.ls-newsletter-admin {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--tiny);
	text-align: center;
}