/* =====================================================================
   GAŁĄŹ SKLEPOWA

   Ekran wyboru, slidery, kafle produktów, listing i karta produktu.
   ===================================================================== */

/* ---------------------------------------------------------------------
   EKRAN WYBORU
   --------------------------------------------------------------------- */

/*
 * ROZDROŻE ZAJMUJE DOKŁADNIE JEDEN EKRAN, NIE „CO NAJMNIEJ".
 *
 * `min-height` pozwalał treści rozepchnąć stronę i wtedy dawało się
 * przewijać w miejscu, gdzie nie ma czego przewijać - a pasek przewijania
 * przy dwóch połówkach zdjęć wygląda na niedokończoną stronę.
 *
 * `100dvh`, nie `100vh`: na telefonie pasek adresu chowa się przy
 * przewijaniu i `vh` liczy wysokość razem z nim, czyli o kilkadziesiąt
 * pikseli za dużo. `100vh` zostaje pierwszą deklaracją jako droga zapasowa
 * dla przeglądarek, które `dvh` nie znają.
 */

/*
 * ZNAK POWIĘKSZONY O JEDNĄ TRZECIĄ 4.09.2026 - z 15.5vw na 20.5vw, czyli
 * ze 190 px na 253 px przy oknie 1229 px. Przy nazwach gałęzi w stopniu
 * 56 px czytał się jak podpis, a nie jak marka nad wejściem.
 *
 * Sprawdzone pomiarem na żywej stronie: przy tej wielkości żaden napis
 * nie wchodzi znakowi w drogę - najbliższy ma do niego 111 px. Miejsce
 * wzięło się stąd, że od 2.09 znak stoi WYŻEJ niż tekst, więc ich pola
 * w ogóle nie pokrywają się w pionie.
 *
 * NA TELEFONIE NIC SIĘ NIE ZMIENIA - poniżej progu 42.5625em obowiązuje
 * osobna reguła na dole tego rozdziału, ustawiająca 24rem.
 *
 * TEN KOMENTARZ MUSI STAĆ POZA KLAMRĄ, I TO NIE JEST UPODOBANIE.
 *
 * Za pierwszym podejściem stał w środku bloku, tuż nad `--dm-znak`,
 * i miał w sobie nawiasy. Sklejarka arkuszy zgubiła się na nich: zjadła
 * komentarz RAZEM z obiema zmiennymi i z klamrą zamykającą, po czym
 * wkleiła do środka następną regułę. Skutek na żywej stronie: `--dm-znak`
 * przestał istnieć, więc `width: var(--dm-znak)` nie miał wartości i znak
 * urósł do naturalnej wielkości pliku, czyli 608 px.
 *
 * Komentarz stojący nad regułą jest bezpieczny. Komentarz z nawiasami
 * w środku bloku deklaracji - nie jest.
 */
.dm-wybor {
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/*
	 * SZEROKOŚĆ ZNAKU NA OSI PODZIAŁU - jedna liczba dla dwóch rzeczy.
	 *
	 * Znak stoi na styku połówek, więc jego szerokość decyduje o tym, ile
	 * miejsca zostaje na tekst po obu stronach. Dopóki były to dwie
	 * niezależne wartości, przy części rozdzielczości napis dochodził
	 * do znaku i wchodził pod niego - bo obie rosły w innym tempie.
	 *
	 * Teraz kolumna treści liczy swoją szerokość OD TEJ ZMIENNEJ i między
	 * tekstem a znakiem zawsze zostaje ten sam odstęp.
	 */
	--dm-znak: clamp(22.5rem, 20.5vw, 37rem);
	--dm-znak-odstep: 6rem;
}

/* ---------------------------------------------------------------------
   PRZYPIĘCIE DO OKNA, A NIE LICZENIE WYSOKOŚCI

   Wersja licząca `100dvh` minus pasek administratora zostawiała na dole
   wąski biały pas. Powód jest prosty: to działanie na dwóch liczbach,
   z których jedna (odsunięcie strony przez WordPressa) bywa inna, niż
   zakłada arkusz - wystarczy inna wersja panelu albo drugi pasek nad
   treścią i wynik przestaje się zgadzać.

   Element przypięty do okna nie liczy niczego. Zajmuje dokładnie tyle,
   ile jest widać, na każdym monitorze i przy każdym powiększeniu.

   Tylko w układzie dwukolumnowym. Poniżej progu połówki stoją jedna nad
   drugą i muszą się przewijać.
   --------------------------------------------------------------------- */

@media (min-width: 42.5625em) {

	.dm-wybor {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		/*
		 * Dół liczony z wysokości okna zmierzonej skryptem. `bottom: 0`
		 * wystarcza w przeglądarce, która liczy wysokość tak samo jak
		 * arkusz - a nie każda tak robi.
		 */
		height: var(--dm-okno, 100dvh);
		bottom: auto;
	}

	/* Pasek administratora widzi tylko zalogowany - i tylko jemu odsuwamy górę. */
	body.admin-bar .dm-wybor {
		top: var(--dm-pasek-panelu, 32px);
		height: calc( var(--dm-okno, 100dvh) - var(--dm-pasek-panelu, 32px) );
	}
}

/*
 * BLOKADA PRZEWIJANIA NA KAŻDEJ SZEROKOŚCI - od 2.09.2026.
 *
 * Wcześniej obowiązywała tylko w układzie dwukolumnowym, bo na telefonie
 * połówki były razem wyższe od ekranu i przewijanie było jedyną drogą
 * do drugiej z nich. Od tego wydania obie mieszczą się w jednym ekranie
 * (`1fr 1fr` w zapytaniu niżej), więc przewijać nie ma czego - a pasek
 * przewijania na stronie, która kończy się na pierwszym ekranie, wygląda
 * na treść urwaną w połowie.
 */
body.dm-galaz-wybor {
	overflow: hidden;
}

/*
 * ZERO PASKÓW POD ROZDROŻEM - ANI BIAŁEGO, ANI CIEMNEGO.
 *
 * Dwie poprzednie próby („min-height" i „100dvh minus pasek panelu")
 * zostawiały wąski pas na dole, a trzecia zamalowała go na ciemno -
 * czyli ukryła objaw zamiast usunąć przyczynę.
 *
 * Teraz wysokość bierze się z POMIARU OKNA wykonanego w przeglądarce
 * (`dm.js` ustawia `--dm-okno`), a nie z jednostek CSS. `dvh` i `vh`
 * liczą różne rzeczy w różnych przeglądarkach i przy różnych paskach
 * narzędzi; zmierzona liczba pikseli nie kłamie nigdzie.
 *
 * `100dvh` zostaje jako wartość zapasowa na czas, zanim skrypt policzy
 * pierwszy raz - i na wypadek, gdyby nie dojechał.
 */
html.dm-rozdroze,
html.dm-rozdroze body {
	height: 100%;
	overflow: hidden;
}

/*
 * ŹRÓDŁO PASKA ZNALEZIONE - i to nie była wysokość ekranu.
 *
 * Pasek administratora odsuwa CAŁY dokument regułą
 * `html { margin-top: 32px !important }`. Przy `height: 100%` daje to
 * dokument wyższy od okna dokładnie o te 32 piksele - czyli tyle, ile
 * dało się przewinąć, i tyle, ile widać było pod spodem. Kolejne wersje
 * poprawiały wysokość samego rozdroża, a rozdroże było w porządku:
 * to dokument pod nim był za wysoki.
 *
 * Zdejmujemy margines i odsuwamy zamiast niego sam ekran wyboru
 * (`top: var(--dm-pasek-panelu)` wyżej). Pasek administratora jest
 * przyklejony do okna, więc niczego nie zasłania.
 *
 * `!important` jest konieczne: reguła WordPressa też je ma.
 */
html.dm-rozdroze {
	margin-top: 0 !important;
}

/*
 * DRUGIE ŹRÓDŁO PASKA: WYŚCIÓŁKA POD TREŚCIĄ.
 *
 * Zmierzone: `.dm-wybor` miał `padding-bottom: 78px`. Bierze się on
 * z reguły dla głównej treści strony - odsuwa ją od dolnej krawędzi,
 * żeby ostatnia sekcja nie kończyła się w połowie ekranu. Na każdej
 * podstronie jest to potrzebne; na rozdrożu, które ma wypełnić ekran
 * co do piksela, jest to dokładnie ten pas, o który chodziło.
 *
 * Trzy poprzednie podejścia mierzyły wysokość okna i za każdym razem
 * wychodziło, że się zgadza - bo się zgadzała. Za krótka była ZAWARTOŚĆ,
 * nie pojemnik.
 */
html.dm-rozdroze .dm-wybor {
	padding: 0 !important;
	margin: 0 !important;
}

.dm-wybor__siatka {
	flex: 1;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.dm-wybor__polowka {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/*
	 * Zero, a nie 66vh: przy stałej wysokości rodzica połówka ma dostać
	 * tyle miejsca, ile jest, a nie żądać swojego minimum i rozpychać
	 * ekran. Wysokość i tak wypełnia siatka.
	 */
	min-height: 0;
	padding: clamp(4rem, 5vw, 8rem);
	overflow: hidden;
	color: var(--dm-tekst-jasny);
}

.dm-wybor__polowka:hover {
	color: var(--dm-tekst-jasny);
}

.dm-wybor__tlo {
	position: absolute;
	inset: 0;
}

.dm-wybor__tlo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-wybor__przyciemnienie {
	position: absolute;
	inset: 0;
	background: var(--dm-zaslona-a50);
	transition: background-color 400ms ease;
}

.dm-wybor__polowka:hover .dm-wybor__przyciemnienie,
.dm-wybor__polowka:focus-visible .dm-wybor__przyciemnienie {
	background: var(--dm-zaslona-a34);
}

/*
 * Treść stoi na ŚRODKU swojej połowy (zmiana 28.08.2026).
 *
 * Wcześniej obie kolumny były dosunięte do zewnętrznych krawędzi ekranu,
 * żeby zrobić miejsce płytce z logo na osi podziału. Skutek uboczny:
 * napisy siedziały przy brzegach monitora, a cały środek ekranu był pusty.
 *
 * Szerokość treści jest ograniczona do 37vw minus miejsce na logo, więc
 * wyśrodkowana kolumna i tak kończy się kilka procent szerokości okna
 * przed osią podziału - płytka ma swoje miejsce, a treść stoi tam,
 * gdzie pada wzrok.
 */
/*
 * SZEROKOŚĆ MUSI POMIEŚCIĆ NAJDŁUŻSZE SŁOWO.
 *
 * Poprawka 1.09.2026. Kolumna miała 42rem, a pojedynczy wyraz
 * „Okolicznościowa" w tym stopniu pisma zajmuje ponad 52rem. Wiersz
 * wychodził więc poza pojemnik - symetrycznie, bo tekst jest wyśrodkowany,
 * ale nierówno względem sąsiednich wierszy. Nagłówek łamał się wtedy
 * na cztery linie o bardzo różnej długości i wyglądał na rozsypany,
 * mimo że każda z nich stała dokładnie na środku.
 *
 * Sam pomiar to potwierdzał: środek treści wypadał co do piksela na
 * środku połówki. Zepsuta była szerokość, nie wyśrodkowanie - i dlatego
 * poprawianie centrowania niczego by nie dało.
 */
/*
 * SZEROKOŚĆ LICZONA OD ZNAKU (poprawka 2.09.2026).
 *
 * Poprzednia wartość, `40vw - 4.6rem`, nie wiedziała nic o znaku stojącym
 * na osi. Przy części rozdzielczości - zwłaszcza szerokich - napis
 * dochodził do niego i wchodził pod rysunek.
 *
 * Rachunek: kolumna stoi na środku swojej połówki, więc od osi ekranu
 * dzieli ją `25vw - szerokość/2`. Ma się tam zmieścić połowa znaku
 * i odstęp - stąd `50vw` minus znak minus dwa odstępy. Znak rośnie
 * najszybciej jako `11vw`, a odstęp wynosi `6rem`, więc cała reguła
 * skraca się do `39vw - 12rem`.
 *
 * WARTOŚCI SĄ WPISANE WPROST, NIE PRZEZ `var()`. Sklejka arkuszy potrafi
 * wyrzucić bez ostrzeżenia całą regułę z `calc()`, w którym siedzi zmienna
 * i działanie - razem z sąsiednimi deklaracjami. Reguła, bez której napis
 * wchodzi pod znak, ma być napisana najprościej, jak się da.
 *
 * TEN RACHUNEK PRZESTAŁ OBOWIĄZYWAĆ 4.09.2026 - i wartość zostaje.
 *
 * Zakładał, że znak stoi na tej samej wysokości co tekst, więc szerokość
 * kolumny musi się z nim rozminąć. Od 2.09 znak jest wyżej (`top: 20%`),
 * a treść niżej (`padding-top: 22vh`) - ich pola nie pokrywają się już
 * w pionie ani przez piksel, więc szerokość kolumny nie ma z czym
 * kolidować. Po powiększeniu znaku o jedną trzecią najbliższy napis miał
 * do niego 111 px - sprawdzone pomiarem na żywej stronie, nie rachunkiem.
 *
 * Wartości `39vw` nie zmniejszamy, bo rachunek dawałby dziś `29.5vw`,
 * a przy tej kolumnie wyraz `FOTOGRAFIA` w stopniu nagłówka przestaje
 * się mieścić w jednym wierszu. Węższa kolumna psuje to, przed czym
 * miała chronić.
 *
 * Wracając tu kiedyś: gdyby znak zjechał z powrotem na wysokość tekstu,
 * rachunek trzeba przywrócić - `50 - (mnożnik vw znaku)` i podwojony
 * odstęp w `rem`.
 */
.dm-wybor__tresc {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(52rem, calc(39vw - 12rem));
	margin-inline: auto;
}

.dm-wybor__nadtytul {
	display: block;
	font-size: 1.3rem;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--dm-tekst-jasny-a88);
}

/*
 * STOPIEŃ ZEJŚCIA O KROK W DÓŁ (2.09.2026, wieczorem).
 *
 * Nazwa gałęzi zajmowała tyle szerokości, że przy powiększonym znaku
 * na osi obie rzeczy zaczynały się stykać - `FOTOGRAFIA` kończyła się
 * dokładnie tam, gdzie zaczynał się rysunek. Mniejszy stopień daje
 * oddech, a nazwa i tak jest największym napisem na ekranie.
 */
.dm-wybor__naglowek {
	display: block;
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(3rem, 4.6vw, 6.8rem);
	line-height: 1.04;
	margin-top: 1.4rem;
	/*
	 * Przeglądarka sama wyrównuje długości wierszy zamiast łamać
	 * „gdzie wypadnie". Przy wyśrodkowanym nagłówku z czterech wierszy
	 * to różnica między napisem a rozsypanym tekstem.
	 */
	text-wrap: balance;
}

/*
 * DRUGA LINIA JEST DOPOWIEDZENIEM, NIE DRUGĄ NAZWĄ.
 *
 * „FOTOGRAFIA" to nazwa gałęzi; „Rodzinna, Przedszkolna
 * i Okolicznościowa" mówi, jaka. Złożone tym samym stopniem czytały się
 * jak dwa równorzędne nagłówki, a przy dłuższym dopowiedzeniu to ono
 * dominowało nad nazwą.
 *
 * Mniejszy stopień porządkuje hierarchię i przy okazji skraca wiersze -
 * dopowiedzenie mieści się wtedy w dwóch zamiast trzech.
 */
.dm-wybor__naglowek em {
	display: block;
	font-size: .68em;
	line-height: 1.16;
	margin-top: .3em;
}

.dm-wybor__tresc .dm-separator {
	margin-top: 2.2rem;
}

.dm-wybor__opis {
	display: block;
	font-size: 1.75rem;
	line-height: 1.75;
	color: var(--dm-tekst-jasny-a92);
	margin: 2rem auto 2.8rem;
	max-width: 42rem;
}

/* --- Podział i logo --- */

/*
 * ZNAK STOI NAD ŚRODKIEM, NIE NA ŚRODKU (2.09.2026, wieczorem).
 *
 * Do tej pory był dokładnie na przecięciu osi - a więc na tej samej
 * wysokości co nazwy obu gałęzi, między nimi. Przy powiększeniu wchodziłby
 * im w drogę, a i wcześniej czytał się jak trzeci napis w rzędzie.
 *
 * Wyżej ma dwie zalety: nie konkuruje z nazwami o tę samą linię wzroku
 * i wygląda jak znak nad wejściem, a nie jak podpis między dwiema
 * kolumnami. `36%` to miejsce nad nazwami, a jednocześnie na tyle nisko,
 * żeby przy niskim oknie nie zetknąć się z górną krawędzią.
 */
.dm-wybor__podzial {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}


.dm-wybor__pasek {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: var(--dm-os-grubosc);
	transform: translateX(-50%);
	background: var(--dm-os-wyboru);
	z-index: 4;
}

/*
 * BIAŁA PŁYTKA POD ZNAKIEM ZDJĘTA 1.09.2026 (prośba klientki).
 *
 * Płytka istniała po to, żeby logo w pliku z BIAŁYM TŁEM dało się
 * położyć na zdjęciu - bez niej widać było biały prostokąt obcięty
 * na krawędziach pliku. Od tego wydania znak jest wektorem
 * wyrenderowanym do PNG z przezroczystością, więc płytka nie jest
 * już potrzebna i sama stała się tym prostokątem, który miała ukryć.
 *
 * Zostaje cień - ale rzucany przez sam rysunek, nie przez pudełko.
 * Bez niego kolorowy znak na jasnym zdjęciu gubi krawędzie.
 */
.dm-wybor__logo {
	position: relative;
	z-index: 5;
	line-height: 0;
}

/*
 * ZNAK STOI NAD ŚRODKIEM, NIE NA ŚRODKU (2.09.2026, wieczorem).
 *
 * Do tej pory był dokładnie na przecięciu osi, czyli na tej samej
 * wysokości co nazwy obu gałęzi. Po powiększeniu wchodziłby im w drogę,
 * a i wcześniej czytał się jak trzeci napis w rzędzie. Wyżej wygląda
 * jak znak nad wejściem, a nie jak podpis wciśnięty między dwie kolumny.
 *
 * `top` w procentach liczy się od WYSOKOŚCI rodzica - w przeciwieństwie
 * do `margin-top`, który liczyłby procent od jego SZEROKOŚCI i na szerokim
 * ekranie zepchnąłby znak poza dolną krawędź.
 *
 * TA REGUŁA MUSI STAĆ PO `position: relative` WYŻEJ. Obie mają wagę
 * (0,1,0), więc przy równej wadze wygrywa ta późniejsza w pliku -
 * postawiona wcześniej nie robiła nic, a znak lądował o pół ekranu obok.
 *
 * Tylko w układzie dwukolumnowym. Poniżej progu połówki leżą jedna nad
 * drugą, a znak stoi na poziomej osi podziału - przesunięcie go w górę
 * wsadziłoby go w środek górnego zdjęcia.
 */
@media (min-width: 42.5625em) {

	.dm-wybor__logo {
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translate(-50%, -50%);
	}

	/*
	 * Treść zjeżdża poniżej środka, żeby zrobić miejsce znakowi.
	 * Przesuwamy ją WYŚCIÓŁKĄ, nie zmianą wyrównania: połówka zostaje
	 * elementem wyśrodkowanym, więc przy niskim oknie treść nadal
	 * dosuwa się do środka zamiast wyjeżdżać poza dolną krawędź.
	 */
	.dm-wybor__polowka {
		padding-top: 22vh;
	}
}

/*
 * SZEROKOŚĆ MUSI BYĆ WYLICZANA Z WYSOKOŚCI, nie odziedziczona.
 *
 * Reguła porządkująca obrazki („obrazek nigdy nie wystaje poza rodzica")
 * ma postać `img { width: 100% }`, czyli celuje w znacznik i wygrywa
 * z pojedynczą klasą. Ustawienie samej wysokości zostawia więc szerokość
 * rozciągniętą na całą płytkę - znak robi się płaski i szeroki, przy tej
 * skali bardzo widocznie.
 *
 * `width: auto` przywraca proporcje pliku, `max-width` broni przed
 * wyjściem poza płytkę na wąskim ekranie, a `object-fit: contain`
 * jest zabezpieczeniem na wypadek, gdyby któraś z tych dwóch wartości
 * przegrała z regułą, której dziś nie znamy.
 */
.dm-wybor__logo .dm-logo__obraz {
	/*
	 * SZEROKOŚĆ, NIE WYSOKOŚĆ (2.09.2026). To szerokość znaku decyduje,
	 * ile miejsca zostaje na tekst po obu stronach osi - i to ona musi być
	 * wielkością zadaną. Przy zadanej wysokości szerokość zależała od
	 * proporcji pliku, więc podmiana znaku na inny zmieniałaby układ.
	 */
	width: var(--dm-znak);
	max-width: 100%;
	height: auto;
	object-fit: contain;
	/*
	 * `mix-blend-mode: multiply` MUSIAŁO ZNIKNĄĆ RAZEM Z PŁYTKĄ.
	 *
	 * Mnożenie służyło do wtopienia białego tła pliku w białą płytkę.
	 * Na zdjęciu robi coś zupełnie innego: mnoży znak przez ciemne
	 * przyciemnienie połówek, przez co czarne linie znikają, a kolory
	 * gasną. Plik ma dziś przezroczystość, więc mieszanie jest zbędne.
	 */
	mix-blend-mode: normal;
	filter: drop-shadow(0 18px 42px var(--dm-cien-ciemny-a45));
}

/*
 * Próg 680 px: poniżej tej szerokości połówki nie mieszczą się obok
 * siebie, więc układają się jedna nad drugą, a pasek tęczowy kładzie się
 * poziomo. Zapytanie medialne, nie skrypt - inaczej przy pierwszym
 * malowaniu pasek stoi pionowo i widać przeskok.
 *
 * Jednostka `em` w zapytaniu medialnym odnosi się do domyślnego rozmiaru
 * przeglądarki (16 px), a NIE do podstawy `rem` ustawionej w motywie.
 * 42.5em to dokładnie 680 px.
 */
@media (max-width: 42.5em) {

	/*
	 * DWA RÓWNE WIERSZE NA JEDNYM EKRANIE - 2.09.2026.
	 *
	 * Do tej pory każda połówka miała `min-height: 52vh`, czyli razem 104%
	 * wysokości ekranu. Skutek: sekcje były nierówne (druga dostawała tyle,
	 * ile wyszło z treści), a przycisk dolnej wypadał pod krawędź ekranu -
	 * trzeba było przewinąć, żeby zobaczyć, że w ogóle istnieje.
	 *
	 * `1fr 1fr` na siatce o wysokości okna daje dwa wiersze co do piksela
	 * równe, niezależnie od tego, ile treści jest w którym. Rozdroże ma
	 * pokazywać dwie drogi naraz - jeśli jedną trzeba znaleźć przewijaniem,
	 * to nie jest rozdroże, tylko strona z sekcjami.
	 */
	.dm-wybor__siatka {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		min-height: 0;
	}

	/*
	 * Wyściółka mniejsza niż na komputerze: przy połowie ekranu telefonu
	 * to ona zjada miejsce, którego brakuje przyciskowi.
	 */
	.dm-wybor__polowka {
		min-height: 0;
		padding: clamp(2rem, 5vw, 3.6rem);
	}

	/*
	 * Typografia schodzi o krok, żeby komplet - nadtytuł, nazwa,
	 * dopowiedzenie, separator, opis i przycisk - zmieścił się w połowie
	 * ekranu także na niższych telefonach. Nazwa gałęzi zostaje największa;
	 * skraca się to, co ją opisuje.
	 */
	.dm-wybor__naglowek {
		font-size: clamp(3rem, 8.4vw, 4.4rem);
		margin-top: 1rem;
	}

	.dm-wybor__opis {
		font-size: 1.6rem;
		line-height: 1.6;
		margin: 1.4rem auto 2rem;
	}

	.dm-wybor__tresc .dm-separator {
		margin-top: 1.6rem;
	}

	/*
	 * NA TELEFONIE BIŻUTERIA IDZIE NA GÓRĘ - i to jest zmiana wyłącznie
	 * dla telefonu.
	 *
	 * Klientka napisała wprost: „na telefonie chciałabym żeby bizuteria
	 * była u góry a fotografia na dole, czyli odwrotnie jak jest teraz",
	 * a w następnym punkcie odesłała do schematu na komputer, gdzie
	 * fotografia stoi PO LEWEJ - czyli tak, jak jest.
	 *
	 * To dwie różne rzeczy. Na komputerze połówki stoją obok siebie
	 * i „u góry" nie ma tam sensu. Zamiana kolejności w polach ACF
	 * naprawiłaby telefon, psując komputer, dlatego odwracamy tylko tutaj:
	 * dane zostają, zmienia się kolejność w siatce poniżej 680 px.
	 *
	 * Wyściółka idzie za kolejnością. Połówka NAD paskiem potrzebuje
	 * zapasu na dole, ta POD nim - na górze; inaczej napisy wchodzą
	 * pod poziomy pasek na osi podziału.
	 */
	.dm-wybor__polowka--prawa {
		order: 1;
		padding-top: 0;
		padding-bottom: clamp(7.8rem, 14vw, 10.4rem);
	}

	.dm-wybor__polowka--lewa {
		order: 2;
		padding-top: clamp(7.8rem, 14vw, 10.4rem);
		padding-bottom: 0;
	}

	.dm-wybor__tresc {
		max-width: 42rem;
		margin-inline: auto;
	}

	.dm-wybor__pasek {
		left: 0;
		right: 0;
		top: 50%;
		bottom: auto;
		width: auto;
		height: var(--dm-os-grubosc);
		transform: translateY(-50%);
		background: var(--dm-os-wyboru);
	}

	/*
	 * Znak na telefonie też jest większy (2.09.2026). Zapisujemy SZEROKOŚĆ,
	 * tak jak na komputerze - wysokość wyliczy się z proporcji pliku
	 * i podmiana znaku na inny nie zmieni układu.
	 */
	.dm-wybor__logo .dm-logo__obraz {
		width: 24rem;
		height: auto;
	}
}

/* ---------------------------------------------------------------------
   SLIDER
   --------------------------------------------------------------------- */

.dm-sekcja--hero {
	padding-top: 4.4rem;
}

.dm-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--dm-r-karta);
}

.dm-slider__tasma {
	display: flex;
	width: calc(var(--dm-slajdy, 3) * 100%);
	transition: transform 800ms var(--dm-krzywa-slajd);
}

.dm-slajd,
.dm-kolekcja {
	width: calc(100% / var(--dm-slajdy, 3));
	flex: 0 0 auto;
}

.dm-slajd {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
	background: var(--dm-slajd-tlo, var(--dm-tlo-jasne));
}

/*
 * TEKST SLAJDU NA ŚRODKU W OBU GAŁĘZIACH - od 29.09.2026.
 *
 * Do tej pory na środku stał tylko slajd gałęzi fotograficznej
 * (reguła w foto.css), a sklep trzymał tekst przy lewej krawędzi.
 * Jeden slider, jeden układ - reguły przeniesione tutaj bez
 * ograniczenia do gałęzi.
 */
.dm-slajd__tresc {
	order: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: clamp(3.8rem, 5vw, 7.2rem) clamp(2.4rem, 5vw, 6.8rem);
}

.dm-slajd__tresc .dm-separator--lewo {
	margin-inline: auto;
	justify-content: center;
}

.dm-slajd__tytul {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(3.4rem, 3.6vw, 5.4rem);
	line-height: 1.06;
	margin: 1.3rem 0 0;
}

/*
 * Odstęp pod opisem powiększony 27.08.2026 razem z oddechem separatora -
 * przycisk siedział zbyt blisko ostatniego wiersza tekstu.
 */
.dm-slajd__opis {
	font-size: var(--dm-txt-akapit);
	line-height: 1.8;
	color: var(--dm-tekst-2);
	max-width: 40rem;
	margin: 0 auto 3.6rem;
}

.dm-slajd__akcja {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.8rem;
	flex-wrap: wrap;
}

.dm-slajd__cena {
	font-size: var(--dm-txt-maly);
	letter-spacing: .12em;
	color: var(--dm-tekst-3);
}

.dm-slajd__zdjecie {
	order: 1;
	position: relative;
	min-height: 32rem;
	background: var(--dm-tlo-zdjecia);
}

.dm-slajd__zdjecie img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Sterowanie sliderem --- */

.dm-slider__strzalka {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3.4rem;
	height: 6.2rem;
	border: 0;
	background: var(--dm-tekst-a42);
	color: var(--dm-tekst-jasny);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 3;
	transition: background-color 200ms;
}

.dm-slider__strzalka:hover {
	background: var(--dm-tekst-a62);
}

.dm-slider__strzalka--lewo  { left: 0; }
.dm-slider__strzalka--prawo { right: 0; }

.dm-slider__strzalka--okragla {
	width: 4rem;
	height: 4rem;
	border-radius: var(--dm-r-pigula);
	border: 1px solid var(--dm-ramka-2);
	background: var(--dm-biel-a90);
	color: var(--dm-tekst);
}

.dm-slider__strzalka--okragla:hover {
	background: var(--dm-biel);
}

.dm-slider__strzalka--okragla.dm-slider__strzalka--lewo  { left: .8rem; }
.dm-slider__strzalka--okragla.dm-slider__strzalka--prawo { right: .8rem; }

.dm-slider__kropki {
	position: absolute;
	bottom: 1.6rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .8rem;
	z-index: 3;
}

.dm-slider__kropka {
	width: 2.6rem;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: var(--dm-r-pigula);
	cursor: pointer;
	background: var(--dm-tekst-a26);
	transition: background-color 200ms;
}

.dm-slider__kropka.is-wybrana {
	background: var(--dm-tekst);
}

/* --- Slider kolekcji --- */

.dm-sekcja--kolekcje {
	margin-top: 7.4rem;
	padding-top: 0;
	background: var(--dm-tlo-cieple);
	position: relative;
	overflow: hidden;
}

.dm-slider--kolekcje {
	border-radius: 0;
}

/*
 * Taśma slidera kolekcji siedzi WEWNĄTRZ kontenera, a przycinanie
 * stoi na sliderze - czyli na elemencie szerszym od kontenera.
 * Bez przycięcia na kontenerze sąsiedni slajd wystaje po bokach
 * i widać dwie kolekcje naraz.
 */
.dm-slider--kolekcje > .dm-kontener {
	overflow: hidden;
}

.dm-slider--kolekcje .dm-slider__kropki {
	bottom: 2.2rem;
}

.dm-kolekcja {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
	gap: clamp(3rem, 4vw, 5.8rem);
	align-items: center;
	padding-block: clamp(4.4rem, 5vw, 7.6rem);
}

.dm-kolekcja__zdjecie {
	border-radius: var(--dm-r-karta);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--dm-tlo-zdjecia);
}

.dm-kolekcja__zdjecie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dm-kolekcja__tytul {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(3rem, 3.4vw, 4.2rem);
	line-height: 1.14;
	margin: 1.2rem 0 0;
}

.dm-kolekcja__opis {
	font-size: var(--dm-txt-akapit);
	line-height: 1.9;
	color: var(--dm-tekst-2);
	margin: 0 0 2.8rem;
	max-width: 46rem;
}

/*
 * Przycisk kolekcji odsunięty od tego, co nad nim stoi - pastylek
 * z kamieniami albo opisu, gdy pastylek nie ma.
 */
.dm-kolekcja__tresc .dm-btn {
	margin-top: 1.2rem;
}

/*
 * Kolekcja poza sliderem.
 *
 * Szerokość kolekcji liczona jest z liczby slajdów (`--dm-slajdy`).
 * Poza sliderem tej zmiennej nie ma, więc bez tej reguły sekcja
 * bierze wartość zapasową i zwęża się do jednej trzeciej ekranu.
 * Dwie klasy, bo reguła wyliczająca szerokość ma tę samą wagę.
 */
.dm-kolekcja.dm-kolekcja--sama {
	width: 100%;
}

/* ---------------------------------------------------------------------
   KARUZELA I KAFEL PRODUKTU
   --------------------------------------------------------------------- */

.dm-karuzela__pasek {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.2rem;
	margin-bottom: 1.8rem;
}

.dm-strzalka {
	width: 3.8rem;
	height: 3.8rem;
	border-radius: var(--dm-r-pigula);
	border: 1px solid var(--dm-ramka-pole);
	background: var(--dm-biel);
	cursor: pointer;
	color: var(--dm-tekst);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 200ms, opacity 200ms;
}

.dm-strzalka:hover {
	background: var(--dm-tlo-cieple);
}

.dm-strzalka[disabled] {
	opacity: .35;
	cursor: default;
}

.dm-karuzela {
	display: flex;
	align-items: stretch;
	gap: var(--dm-gap);
	overflow-x: auto;
	padding-bottom: .4rem;

	/*
	 * NIE dokładaj tu `scroll-behavior: smooth`. Przewijanie strzałkami
	 * jest animowane w skrypcie przez ustawianie `scrollLeft`, a ta
	 * właściwość przechwytuje każdą taką zmianę i unieruchamia strzałki
	 * bez żadnego błędu.
	 */
}

.dm-karuzela__pole {
	flex: 0 0 clamp(23rem, calc((100% - 6.6rem) / 4), 34rem);
	display: flex;
}

/*
 * `auto-fill`, NIE `auto-fit` - i to jest cała różnica, 27.08.2026.
 *
 * `auto-fit` zwija puste kolumny i rozdaje ich szerokość tym, które
 * zostały. Kategoria z dwoma produktami dostawała przez to dwa kafle
 * rozciągnięte na pół ekranu, a kategoria z trzema wyglądała normalnie.
 * Objaw wyglądał na błąd układu, a wynikał z jednego słowa.
 *
 * `auto-fill` zostawia puste kolumny na miejscu, więc kafel ma zawsze
 * tę samą szerokość, niezależnie od tego, ile produktów jest w środku.
 */
.dm-siatka-produktow {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
	gap: var(--dm-gap);
}

/*
 * Pięć propozycji w jednym rzędzie na szerokim ekranie.
 *
 * Zwykła siatka dobiera liczbę kolumn sama i przy tej szerokości układa
 * cztery - piąty kafel zostaje wtedy sam w drugim rzędzie i wygląda jak
 * coś, co się nie zmieściło. Poniżej 90em wracamy do doboru
 * automatycznego, bo pięć kolumn nie mieści się już czytelnie.
 */
@media (min-width: 90em) {

	.dm-siatka-produktow--piec {
		grid-template-columns: repeat(5, 1fr);
	}
}

/*
 * KAFEL JEST ZAMKNIĘTY W RAMCE.
 *
 * Bez niej kafle zlewały się z tłem strony i przy trzech w rzędzie
 * trzeba było się domyślać, gdzie kończy się jeden, a zaczyna drugi -
 * zwłaszcza gdy sąsiedzi mieli nazwy różnej długości.
 *
 * Ramka jest jasna i ciepła, w tonie tła strony: ma dzielić kafle,
 * a nie rysować siatkę.
 */
.dm-kafel-produktu {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1.2rem 1.2rem 1.6rem;
	border: 1px solid var(--dm-ramka-naglowka);
	border-radius: var(--dm-r-blok);
	background: var(--dm-biel);
	transition: border-color 220ms, box-shadow 220ms;
}

.dm-kafel-produktu:hover {
	border-color: var(--dm-ramka-pole-aktywna);
	box-shadow: 0 2px 10px var(--dm-cien-cieply-2-a6);
}

/*
 * Kadr zdjęcia w kaflu ma tło BIAŁE, nie beżowe (zmiana 28.08.2026).
 *
 * Zdjęcia wyrobów robione są na białym tle, a w miejsce brakującego
 * zdjęcia wchodzi znak firmowy - też na białym. Na ciepłym beżu
 * obie te rzeczy odcinały się widocznym prostokątem, jakby zdjęcie
 * było źle wycięte. Biel znika pod zdjęciem i nie ma czego zauważyć.
 */
.dm-kafel-produktu__zdjecie {
	position: relative;
	display: block;
	border-radius: var(--dm-r-karta);
	overflow: hidden;
	background: var(--dm-biel);
}

.dm-kafel-produktu__kadr {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.dm-kafel-produktu__kadr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dm-czas-hover) var(--dm-krzywa);
}

.dm-kafel-produktu:hover .dm-kafel-produktu__kadr img {
	transform: scale(1.05);
}

/*
 * Kafel ze zdjęciem zastępczym: znak firmowy cały widoczny, z oddechem,
 * i bez powiększania przy najechaniu - nie ma czego pokazywać z bliska.
 */
.dm-kafel-produktu--zastepnik .dm-kafel-produktu__kadr img {
	object-fit: contain;
	padding: 14%;
}

.dm-kafel-produktu--zastepnik:hover .dm-kafel-produktu__kadr img {
	transform: none;
}

/*
 * Metka w górnym rogu kadru: wyróżnik („Nowość"), stan braku
 * („Wyprzedane", „Dostępne wkrótce") albo „Ostatnia sztuka" - zawsze
 * jedna, wybiera ją `dm_metka_kafla()`. Cały kadr jest odnośnikiem do
 * karty wyrobu, więc metka nie może robić w nim martwego pola.
 */
.dm-kafel-produktu .dm-badge {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 2;
	pointer-events: none;
}

.dm-kafel-produktu__nazwa {
	font-size: var(--dm-txt-nazwa);
	line-height: 1.45;
	font-weight: 400;
	margin-top: 1.5rem;
}

/*
 * Cena pod nazwą i kamieniami. Bez `nowrap` - w kolumnie ma całą
 * szerokość kafla, a przy przecenie stoją tu dwie kwoty i muszą się
 * móc złamać na wąskim ekranie.
 */
.dm-kafel-produktu__cena {
	font-size: var(--dm-txt-nazwa);
	line-height: 1.45;
	margin-top: .8rem;
}

/*
 * Cena przed obniżką w kaflu. Przekreślenie samo w sobie bywa
 * niewidoczne przy drobnym piśmie, więc kwota jest dodatkowo
 * przygaszona - dwa sygnały zamiast jednego.
 */
.dm-kafel-produktu__cena del {
	color: var(--dm-tekst-slaby);
	font-size: .86em;
	margin-right: .4rem;
	text-decoration-thickness: 1px;
}

.dm-kafel-produktu__cena ins {
	text-decoration: none;
	color: var(--dm-wyprzedaz);
	font-weight: 500;
}

.dm-kafel-produktu__kamienie {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	margin-top: .5rem;
	line-height: 1.5;
}

/*
 * Przycisk dociśnięty do dołu karty. Bez tego przyciski w rzędzie
 * stoją na różnych wysokościach, bo nazwa produktu raz mieści się
 * w jednym wierszu, a raz łamie na dwa.
 */
.dm-kafel-produktu__akcja {
	margin-top: auto;
	padding-top: 1.4rem;
}

/* ---------------------------------------------------------------------
   LISTING
   --------------------------------------------------------------------- */

.dm-listing__opis {
	font-size: var(--dm-txt-akapit);
	line-height: 1.85;
	color: var(--dm-tekst-2);
	max-width: 62rem;
	margin: 1.8rem auto 0;
}

.dm-listing__uklad {
	display: grid;
	grid-template-columns: minmax(24rem, 30rem) 1fr;
	gap: 3.4rem;
	align-items: start;
}

.dm-listing__pasek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.8rem;
	flex-wrap: wrap;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--dm-ramka);
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
}

/*
 * WŁASNA STRZAŁKA, BO SYSTEMOWEJ NIE DA SIĘ ODSUNĄĆ OD KRAWĘDZI.
 *
 * Strzałkę listy rozwijanej rysuje system i stoi ona zawsze przy samym
 * brzegu pola - wyściółka po prawej odsuwa tekst, a nie ją. Przy
 * zaokrąglonym polu wygląda to, jakby wychodziła poza ramkę.
 *
 * `appearance: none` zdejmuje strzałkę systemową, a naszą rysujemy tłem
 * i ustawiamy dokładnie tam, gdzie ma być. Wyściółka po prawej musi
 * zostawić na nią miejsce, inaczej najdłuższa pozycja listy wejdzie
 * pod znak.
 *
 * SVG w adresie `data:` ma APOSTROFY, nie cudzysłowy - cudzysłów kończy
 * `url("…")` w połowie ikony i przeglądarka po cichu wyrzuca całą regułę.
 */
.dm-listing__pasek select {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--dm-ramka-pole);
	border-radius: var(--dm-r-pigula);
	padding: .9rem 4.4rem .9rem 1.8rem;
	background-color: var(--dm-tlo-jasne);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23615A4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.8rem center;
	background-size: 1.3rem 1.3rem;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-maly);
	cursor: pointer;
}

.dm-listing .dm-siatka-produktow {
	padding-top: 2.4rem;
}

/* ---------------------------------------------------------------------
   PAGINACJA - ODDECH NAD NUMERAMI STRON

   Numery stały tuż pod ostatnim rzędem kafli, bez żadnej przerwy, więc
   czytały się jak część ostatniego kafla, a nie jak osobny element listy.
   Odstęp jest większy niż przerwa między rzędami - to ma być koniec listy,
   nie kolejny rząd.
   --------------------------------------------------------------------- */

.dm-listing .woocommerce-pagination {
	margin-top: clamp(3.6rem, 4vw, 5.6rem);
	margin-bottom: 1.2rem;
}

.dm-listing__pusto {
	padding: 4rem 0;
	font-size: var(--dm-txt-akapit);
	color: var(--dm-tekst-2);
}

.dm-listing__wkrotce {
	padding: clamp(4rem, 6vw, 8rem) 0;
	text-align: center;
	font-size: var(--dm-txt-maly);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dm-tekst-2);
}

.dm-listing__pusto a {
	border-bottom: 1px solid var(--dm-linia-ciemna);
}

/* --- Filtry --- */

.dm-filtry {
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-karta);
	overflow: hidden;
}

/*
 * PRZYCISK „FILTROWANIE" - widoczny tylko na wąskim ekranie.
 *
 * Na komputerze filtry stoją w swojej kolumnie obok produktów i nie ma
 * czego rozwijać; przycisk byłby wtedy dodatkowym klikaniem po nic.
 * `display: none` na `summary` zabiera go z układu, a `details` zostaje
 * otwarty, bo ma `open` w kodzie strony.
 */
.dm-filtry__przelacznik {
	display: none;
}

.dm-filtry__wnetrze {
	display: block;
}

@media (max-width: 60em) {

	.dm-filtry__przelacznik {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.2rem;
		padding: 1.6rem 1.8rem;
		cursor: pointer;
		list-style: none;
		font-family: var(--dm-pismo);
		font-size: 1.3rem;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--dm-tekst);
		user-select: none;
	}

	/* Trójkącik przeglądarki zastępujemy własnym znakiem. */
	.dm-filtry__przelacznik::-webkit-details-marker {
		display: none;
	}

	/*
	 * Znak to plus, który po otwarciu staje się minusem - ta sama zasada
	 * co w akordeonie na karcie produktu, żeby oba zwijane elementy
	 * zachowywały się tak samo.
	 */
	.dm-filtry__znak {
		position: relative;
		width: var(--dm-znak-filtra);
		height: var(--dm-znak-filtra);
		flex: 0 0 auto;
	}

	.dm-filtry__znak::before,
	.dm-filtry__znak::after {
		content: "";
		position: absolute;
		inset: 50% 0 auto 0;
		height: 1px;
		background: var(--dm-tekst);
		transition: transform 200ms var(--dm-krzywa);
	}

	.dm-filtry__znak::after {
		transform: rotate(90deg);
	}

	.dm-filtry[open] .dm-filtry__znak::after {
		transform: rotate(0deg);
	}

	.dm-filtry__wnetrze {
		padding-bottom: .6rem;
		border-top: 1px solid var(--dm-ramka);
	}
}

.dm-filtry__tytul {
	font-family: var(--dm-pismo);
	font-weight: 400;
	font-size: var(--dm-txt-label);
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0;
	padding: 1.5rem 2rem;
	background: var(--dm-tlo-jasne);
	border-block: 1px solid var(--dm-ramka);
}

.dm-filtry__tytul:first-child {
	border-top: 0;
}

.dm-filtry__blok {
	padding: 1.4rem 2rem 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: var(--dm-txt-maly);
}

.dm-filtry__blok--pastylki {
	flex-direction: row;
	flex-wrap: wrap;
	gap: .8rem;
}

.dm-filtry__kategoria {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.dm-filtry__kategoria.is-wybrana {
	font-weight: 400;
	color: var(--dm-tekst);
}

/*
 * PODKATEGORIA W BLOKU „PRODUKTY".
 *
 * Wcięcie z pionową kreską zamiast samego odstępu: przy dwóch pozycjach
 * pod jedną nadrzędną sam odstęp czyta się jak przypadkowe przesunięcie,
 * a nie jak zależność. Kreska mówi, że te dwie należą do tej wyżej.
 *
 * Stopień pisma nietknięty - to nadal pełnoprawne wejście do listy,
 * a nie dopisek do nazwy nadrzędnej.
 */
.dm-filtry__kategoria--podrzedna {
	margin-left: 1rem;
	padding-left: 1.2rem;
	border-left: 1px solid var(--dm-ramka, #EFE9DD);
	color: var(--dm-tekst-2, #5F5C56);
}

.dm-filtry__licznik {
	color: var(--dm-tekst-3);
}

.dm-filtry__cena {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
}

.dm-filtry__widelka {
	flex: 1 1 8rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-size: var(--dm-txt-badge);
	color: var(--dm-tekst-3);
}

.dm-filtry__widelka input {
	border: 1px solid var(--dm-ramka-pole);
	border-radius: var(--dm-r-karta);
	padding: 1rem 1.2rem;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst);
	background: var(--dm-biel);
	outline: none;
	width: 100%;
	transition: border-color 150ms;
}

.dm-filtry__widelka input:focus {
	border-color: var(--dm-tekst);
}

@media (max-width: 60em) {

	.dm-listing__uklad {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   KARTA PRODUKTU
   --------------------------------------------------------------------- */

.dm-produkt__uklad {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(34rem, 1fr));
	gap: clamp(3rem, 4vw, 6.6rem);
	align-items: start;
}

.dm-produkt__galeria {
	display: grid;
	grid-template-columns: 7.6rem 1fr;
	gap: 1.4rem;
}

/*
 * JEDNO ZDJĘCIE - JEDNA KOLUMNA.
 *
 * Wąska kolumna po lewej jest miejscem na pasek miniatur. Przy jednym
 * zdjęciu paska nie ma, więc zdjęcie wskakiwało w tę kolumnę i wychodziło
 * wielkości znaczka pocztowego (76 px), a obok zostawało 577 px pustki.
 * Objaw mylił, bo wyglądał na zły rozmiar obrazka - a chodziło o to,
 * w której kolumnie siatki stanął.
 */
.dm-produkt__galeria--jedno {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Znak firmowy w miejscu brakującego zdjęcia: cały widoczny, z oddechem.
 * Zdjęcie ma wypełnić kadr, znak ma się w nim zmieścić - to dwie różne
 * rzeczy i widać to od razu, gdy pomylić kadrowanie.
 */
.dm-produkt__galeria--zastepnik .dm-produkt__kadr img {
	object-fit: contain;
	padding: 12%;
}

.dm-produkt__miniatury {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.dm-produkt__miniatura {
	padding: 0;
	cursor: pointer;
	background: none;
	line-height: 0;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-mini);
	overflow: hidden;
	transition: border-color 200ms;
}

.dm-produkt__miniatura.is-wybrana {
	border-color: var(--dm-tekst);
}

.dm-produkt__miniatura img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Tło kadru na karcie produktu białe z tego samego powodu co w kaflach. */
.dm-produkt__glowne {
	position: relative;
	background: var(--dm-biel);
	border-radius: var(--dm-r-karta);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.dm-produkt__kadr {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}

.dm-produkt__kadr.is-widoczny {
	opacity: 1;
	pointer-events: auto;
}

.dm-produkt__kadr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * FILM W GALERII (od 1.10.2026) - kadruje się jak zdjęcie: wypełnia
 * kwadrat. Tło ciemne tylko pod filmem, na chwilę przed pierwszą klatką.
 */
.dm-produkt__film {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--dm-tekst);
}

.dm-produkt__miniatura--film {
	position: relative;
}

.dm-produkt__miniatura-film {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	pointer-events: none;
}

/* Trójkąt „odtwórz" na miniaturze - żeby film nie udawał zdjęcia. */
.dm-produkt__odtworz {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.dm-produkt__odtworz::before {
	content: "";
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.85);
	box-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 0.2);
}

.dm-produkt__odtworz::after {
	content: "";
	position: absolute;
	margin-left: 0.2rem;
	border-style: solid;
	border-width: 0.5rem 0 0.5rem 0.8rem;
	border-color: transparent transparent transparent var(--dm-tekst);
}

.dm-produkt__tytul {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(3.2rem, 3.6vw, 4.8rem);
	line-height: 1.1;
	margin: 1.2rem 0 0;
}

.dm-produkt__podtytul {
	font-family: var(--dm-pismo-tyt);
	font-style: italic;
	font-size: 2rem;
	line-height: 1.4;
	color: var(--dm-tekst-2);
	margin-top: .4rem;
}

.dm-produkt__cena {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin-top: 2.2rem;
	/*
	 * Cena idzie krojem bezszeryfowym, tak samo jak w kaflach, w koszyku
	 * i w kasie. Krój ozdobny został tu z pierwszej wersji karty i był
	 * jedynym miejscem w sklepie, gdzie ta sama liczba wyglądała inaczej.
	 *
	 * Rozmiar w dół, bo Jost jest szerszy od kroju ozdobnego: przy 3,4rem
	 * cena z groszami i walutą łamała się na dwa wiersze na wąskim ekranie.
	 */
	font-family: var(--dm-pismo);
	font-size: 2.8rem;
	font-weight: 500;
	line-height: 1.25;
	/*
	 * Metka „Taniej o X%" ma stać w OSI kwoty, a nie na linii pisma.
	 * `baseline` ustawiał ją względem dolnej krawędzi liter i wychodziła
	 * o kilka pikseli za nisko - widać to od razu, bo metka jest niższa
	 * od cyfr.
	 */
	align-items: center;
	margin-bottom: 0;
}

/*
 * Komunikat o najniższej cenie należy do kwoty, więc stoi tuż pod nią.
 * Domyślny odstęp akapitu odsuwał go na tyle, że wyglądał na osobną
 * informację, niezwiązaną z ceną obok.
 */
.dm-produkt__cena + .bpo-info {
	margin: .6rem 0 0;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
}

.dm-produkt__cena del {
	font-family: var(--dm-pismo);
	font-size: 1.4rem;
	color: var(--dm-tekst-slaby);
}

/* ---------------------------------------------------------------------
   NUMER KATALOGOWY POD CENĄ

   Stoi tuż pod kwotą i zmienia się razem z nią, bo każdy rozmiar ma
   własny numer. Stopień drobny i barwa druga: to informacja porządkowa
   dla kupującego, który wraca z pytaniem albo z reklamacją, a nie
   element, który ma konkurować z ceną.

   Dwie klasy w selektorze - inaczej arkusz sklepu wygrywa na każdej
   podstronie, której WooCommerce dokłada do body swoją klasę.
   --------------------------------------------------------------------- */

.dm-produkt .dm-produkt__kod {
	margin: .8rem 0 0;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
	letter-spacing: .02em;
}

.dm-produkt .dm-produkt__kod-numer {
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}

.dm-produkt__cena ins {
	text-decoration: none;
}

/* ---------------------------------------------------------------------
   JEDNA CENA NA KARCIE

   Cena wybranego rozmiaru stoi u góry karty i tam jest podmieniana.
   Sklep wypisuje własną kopię pod formularzem zakupu - ta sama liczba,
   pięćdziesiąt pikseli niżej, w innym kroju. Chowamy ją.
   --------------------------------------------------------------------- */

body.dm .woocommerce-variation-price,
body.dm .woocommerce-variation-availability .price {
	display: none;
}

/*
 * Produkt z jednym wariantem: wiersz wyboru schodzi w całości.
 * Wariant jest wybrany domyślnie po stronie serwera, więc przycisk
 * zakupu i cena działają bez niego.
 */
/*
 * SELEKTOR MA `body.dm` I TO NIE JEST OZDOBNIK.
 *
 * Niżej w tym samym arkuszu stoi reguła rozkładająca tabelę wariantów
 * na bloki (`.dm-produkt__zakup .variations { display: block }`). Ma tę
 * samą wagę co ukrycie, a że jest PÓŹNIEJ - wygrywała. Wybór rozmiaru
 * przy produkcie z jednym wariantem był więc widoczny mimo tej reguły.
 */
body.dm .dm-produkt__zakup--bez-wyboru .variations,
body.dm .dm-produkt__zakup--bez-wyboru .dm-rozmiary,
body.dm .dm-produkt__zakup--bez-wyboru .dm-wybrany-rozmiar,
body.dm .dm-produkt__zakup--bez-wyboru .reset_variations {
	display: none !important;
}

/* ---------------------------------------------------------------------
   DOSTĘPNOŚĆ

   Kropka niesie tę informację szybciej niż napis, ale nie sama: kolor
   bywa nierozróżnialny, a przy kropce bez podpisu trzeba się domyślać,
   co znaczy. Dlatego zawsze jedno i drugie.
   --------------------------------------------------------------------- */

.dm-dostepnosc {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 1.4rem 0 0;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
}

.dm-dostepnosc__kropka {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dm-stan-dostepny);
	box-shadow: 0 0 0 3px var(--dm-stan-dostepny-a18);
}

.dm-dostepnosc--zamowienie .dm-dostepnosc__kropka {
	background: var(--dm-stan-wkrotce);
	box-shadow: 0 0 0 3px var(--dm-stan-wkrotce-a18);
}

.dm-dostepnosc--brak .dm-dostepnosc__kropka {
	background: var(--dm-stan-brak);
	box-shadow: 0 0 0 3px var(--dm-stan-brak-a18);
}

/*
 * Kadr galerii jest przyciskiem powiększenia, więc ma to zapowiadać
 * kursorem. Lupa z plusem to kursor systemowy `zoom-in` - nie ikona
 * wstawiona do treści.
 */
.dm-produkt__kadr[role="button"] {
	cursor: zoom-in;
}

.dm-produkt__wstep {
	font-size: var(--dm-txt-akapit);
	line-height: 1.9;
	color: var(--dm-tekst-2);
	margin: 2rem 0 0;
	max-width: 52rem;
}

.dm-produkt__zakup {
	margin-top: 3rem;
}

.dm-rozmiary {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

/*
 * FORMULARZ WARIANTÓW SKLEPU.
 *
 * Sklep składa wybór wariantu z tabeli: nazwa cechy w komórce po lewej,
 * lista rozwijana po prawej. Układ tabelaryczny wygląda tu obco i przy
 * dłuższej nazwie cechy ścieśnia pastylki do jednej trzeciej szerokości.
 *
 * Rozkładamy tabelę na bloki. NIE USUWAMY jej ze znaczników - sklep
 * odwołuje się do tych elementów w swoim skrypcie i podmiana struktury
 * kończy się tym, że wybór wariantu przestaje aktualizować cenę.
 */
.dm-produkt__zakup .variations,
.dm-produkt__zakup .variations tbody,
.dm-produkt__zakup .variations tr,
.dm-produkt__zakup .variations th,
.dm-produkt__zakup .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.dm-produkt__zakup .variations th.label {
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-label);
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dm-tekst);
	margin-bottom: 1.2rem;
}

.dm-produkt__zakup .variations th.label label {
	margin: 0;
}

/*
 * „Wyczyść" znika. Odnośnik ma sens tam, gdzie da się nie wybrać nic -
 * a tu zawsze jakiś rozmiar jest zaznaczony, więc czyszczenie prowadzi
 * do stanu, w którym karta nie potrafi pokazać ceny.
 */
body.dm .dm-produkt__zakup .reset_variations {
	display: none !important;
}

/*
 * Cena wariantu. Sklep wypisuje ją tym samym znacznikiem co cenę
 * u góry karty, więc bez tego to samo pojawia się drugi raz, mniejsze
 * i w innym miejscu.
 */
.dm-produkt__zakup .woocommerce-variation-price {
	margin: 1.4rem 0 0;
	font-family: var(--dm-pismo-tyt);
	font-size: 2.6rem;
	line-height: 1.2;
}

.dm-produkt__zakup .woocommerce-variation-price del {
	font-family: var(--dm-pismo);
	font-size: 1.4rem;
	color: var(--dm-tekst-slaby);
	margin-right: .6rem;
}

.dm-produkt__zakup .woocommerce-variation-price ins {
	text-decoration: none;
}

.dm-produkt__zakup .woocommerce-variation-availability {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	margin-top: .6rem;
}

/*
 * Przycisk zakupu przed wybraniem rozmiaru.
 *
 * Sklep wyszarza go własnym kolorem, który nie ma nic wspólnego
 * z tą stroną. Zostaje wygaszony - bo naprawdę jeszcze nie działa -
 * ale w kolorze marki.
 */
 body.dm .dm-produkt__zakup form.cart .woocommerce-variation-add-to-cart-disabled button.single_add_to_cart_button,
body.dm .dm-produkt__zakup form.cart button.single_add_to_cart_button.disabled {
	background: var(--dm-tekst);
	border-color: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
	opacity: .35;
	cursor: not-allowed;
}

/*
 * Podpowiedź pod pastylkami: co wybrano i kiedy to wyjdzie.
 * Wypisuje ją skrypt, więc bez niego po prostu jej nie ma.
 */
.dm-wybrany-rozmiar {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	margin-top: 1rem;
}

/*
 * Lista rozwijana zostaje w kodzie i działa dalej - chowamy ją przed
 * wzrokiem, a nie przed sklepem. `display: none` wyłączyłoby ją także
 * dla mechaniki wariantów.
 */
.dm-lista-schowana select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/*
 * WAGA SELEKTORA MUSI BYĆ WYŻSZA NIŻ W ARKUSZU SKLEPU.
 *
 * Sklep celuje w swój przycisk zapisem w rodzaju
 * `.woocommerce div.product form.cart button.button.alt` - trzy klasy
 * i dwa znaczniki. Krótszy zapis po naszej stronie przegrywa niezależnie
 * od kolejności wczytania arkuszy i przycisk zostaje fioletowy.
 *
 * Stąd `body.dm` i `form.cart` w selektorze. To nie jest ozdobnik:
 * bez nich ta reguła nie robi nic.
 */
/*
 * WIERSZ ZAKUPU: liczba sztuk i przycisk obok siebie.
 *
 * Formularz sklepu układa je jeden pod drugim, a przycisk rozciąga
 * na całą szerokość kolumny - przy szerokiej karcie produktu wychodzi
 * z tego pasek na pół ekranu, który wygląda na baner, nie na przycisk.
 */
body.dm .dm-produkt__zakup form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1.2rem;
}

/*
 * „Dostępne w magazynie" nie pojawia się na karcie (28.08.2026).
 *
 * Szablon karty przestał wypisywać ten napis sam, ale przy produkcie
 * z wariantami robi to skrypt sklepu po wybraniu rozmiaru - i tamtego
 * miejsca szablon nie kontroluje. Chowamy wyłącznie informację
 * o dostępności; komunikat o BRAKU towaru zostaje widoczny, bo mówi
 * kupującemu coś, czego inaczej nie ma skąd wiedzieć.
 */
body.dm .dm-produkt__zakup .stock.in-stock,
body.dm .dm-produkt__dane > .stock.in-stock {
	display: none;
}

/*
 * Wybór rozmiaru i komunikaty zajmują cały wiersz - obok przycisku
 * stoi wyłącznie pole liczby sztuk.
 */
body.dm .dm-produkt__zakup form.cart > .variations,
body.dm .dm-produkt__zakup form.cart > .woocommerce-variation,
body.dm .dm-produkt__zakup form.cart > .dm-rozmiary,
body.dm .dm-produkt__zakup form.cart > .dm-wybrany-rozmiar,
body.dm .dm-produkt__zakup form.cart > .reset_variations,
body.dm .dm-produkt__zakup form.cart > .dm-limit-sztuk,
/*
 * `.single_variation_wrap` to POŚREDNI pojemnik, który sklep wstawia
 * między formularz a wiersz zakupu. Bez tej pozycji zwężał się do
 * szerokości swojej zawartości (349 px) i przycisk lądował pod polem
 * liczby sztuk zamiast obok niego - mimo poprawnych reguł piętro niżej.
 */
body.dm .dm-produkt__zakup form.cart > .single_variation_wrap {
	flex: 0 0 100%;
	width: 100%;
}

body.dm .dm-produkt__zakup form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1.2rem;
	flex: 1 1 100%;
	margin-top: .4rem;
}

body.dm .dm-produkt__zakup form.cart button.single_add_to_cart_button,
body.dm .dm-produkt__zakup form.cart button[type="submit"] {
	flex: 0 1 26rem;
	max-width: 26rem;
	width: auto;
	border: 1px solid var(--dm-tekst);
	background: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
	font-family: var(--dm-pismo);
	font-size: var(--dm-btn-pismo);
	font-weight: var(--dm-btn-waga);
	letter-spacing: var(--dm-btn-odstep);
	text-transform: uppercase;
	padding: 1.9rem 3rem;
	border-radius: var(--dm-btn-promien);
	cursor: pointer;
	margin-top: 1.4rem;
	transition: background-color var(--dm-btn-czas);
}

body.dm .dm-produkt__zakup form.cart button.single_add_to_cart_button:hover {
	background: var(--dm-grafit);
	border-color: var(--dm-grafit);
}

/*
 * Liczba sztuk znika. Bransoletka jest robiona ręcznie i kupuje się
 * jedną - pole na liczbę tylko dokłada decyzji przed zakupem.
 * Wysoka waga selektora z tego samego powodu co przy przycisku wyżej.
 */
/*
 * `!important` jest tu konieczne, nie wygodne.
 *
 * Skrypt sklepu po wybraniu wariantu pokazuje pole liczby sztuk
 * wywołaniem `.show()`, które wpisuje `display: block` WPROST
 * w atrybut stylu. Atrybutu nie da się przebić wagą selektora -
 * przebija go wyłącznie `!important`.
 *
 * LICZBA SZTUK WRACA (27.08.2026, wieczorem). Wcześniej była ukryta
 * przy założeniu „bransoletkę kupuje się jedną" - ale komplet dla
 * dwóch osób albo prezenty dla drużyny to zamówienie, które trzeba
 * było składać dwa razy.
 *
 * `!important` zostaje z innego powodu niż wtedy: skrypt sklepu
 * po wybraniu wariantu ustawia `display` WPROST w atrybucie stylu,
 * a atrybutu nie przebije żadna waga selektora.
 */
/*
 * WYSOKOŚĆ POLA RÓWNA WYSOKOŚCI PRZYCISKU (poprawka 28.08.2026).
 *
 * Wiersz zakupu jest siatką rozciągającą oba elementy do swojej
 * wysokości, ale przycisk ma nad sobą odstęp 1,4 rem, a pole nie
 * miało - więc pole zaczynało się wyżej i o ten odstęp wychodziło
 * wyższe. Ten sam odstęp po obu stronach zrównuje je bez wpisywania
 * wysokości liczbą, która rozjechałaby się przy zmianie kroju.
 */
body.dm .dm-produkt__zakup form.cart .quantity {
	display: flex !important;
	flex: 0 0 auto;
	align-items: stretch;
	margin-top: 1.4rem;
	border: 1px solid var(--dm-ramka-pole);
	border-radius: var(--dm-btn-promien);
	overflow: hidden;
	background: var(--dm-biel);
}

body.dm .dm-produkt__zakup form.cart .quantity input.qty {
	width: 5.4rem;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: center;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-akapit);
	padding: 0 .4rem;
	/* Strzałki przeglądarki są drobne i różne w każdej z nich - mamy własne. */
	appearance: textfield;
	-moz-appearance: textfield;
}

body.dm .dm-produkt__zakup form.cart .quantity input.qty::-webkit-outer-spin-button,
body.dm .dm-produkt__zakup form.cart .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.dm-ilosc__krok {
	flex: 0 0 auto;
	width: 4rem;
	border: 0;
	background: none;
	color: var(--dm-tekst);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--dm-czas-hover) var(--dm-krzywa);
}

.dm-ilosc__krok:hover:not(:disabled) {
	background: var(--dm-tlo-jasne);
}

.dm-ilosc__krok:disabled {
	opacity: .3;
	cursor: not-allowed;
}

/*
 * Komunikat o wyczerpanym stanie magazynowym. Pojawia się dopiero
 * przy próbie przekroczenia - zawczasu nikogo nie interesuje, ile
 * sztuk leży w pracowni.
 */
.dm-limit-sztuk {
	margin: 0;
	font-size: var(--dm-txt-maly);
	color: var(--dm-wyprzedaz);
}

.dm-limit-sztuk[hidden] {
	display: none;
}

.dm-produkt__zapewnienia {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.8rem;
	margin: 2rem 0 0;
	padding: 0;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
}

/* --- Gwarancja prawna (od 30.09.2026) ---
   Jedno ciche zdanie pod zapewnieniami; po kliknięciu okno z pełną
   grafiką Komisji, na szerokość czytelną przy zwykłym powiększeniu. */

.dm-gwarancja {
	margin-top: 1.4rem;
}

.dm-gwarancja__przycisk {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	text-decoration: underline;
	text-decoration-color: var(--dm-linia-ciemna);
	text-underline-offset: .3em;
	cursor: pointer;
}

.dm-gwarancja__przycisk:hover,
.dm-gwarancja__przycisk:focus-visible {
	color: var(--dm-tekst);
}

.dm-gwarancja__okno {
	width: min(88rem, 94vw);
	max-height: 92vh;
	padding: 1.2rem;
	border: 0;
	border-radius: var(--dm-r-karta);
	background: var(--dm-biel);
	overflow: auto;
}

.dm-gwarancja__okno::backdrop {
	background: rgba(30, 28, 24, .55);
}

.dm-gwarancja__okno img {
	display: block;
	width: 100%;
	height: auto;
}

.dm-gwarancja__zamknij {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: flex-end;
	margin: 0 0 -3.6rem;
	z-index: 1;
}

.dm-gwarancja__zamknij button {
	width: 3.6rem;
	height: 3.6rem;
	border: 0;
	border-radius: 50%;
	background: var(--dm-biel);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--dm-tekst);
	cursor: pointer;
}

.dm-gwarancja__link {
	margin: 1rem 0 0;
	font-size: var(--dm-txt-maly);
	text-align: center;
}

.dm-produkt__kategoria {
	margin-top: 2rem;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
}

/* --- Akordeon --- */

.dm-akordeon {
	margin-top: 3.6rem;
	border-top: 1px solid var(--dm-ramka);
}

.dm-akordeon__sekcja {
	border-bottom: 1px solid var(--dm-ramka);
}

.dm-akordeon__naglowek {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.4rem;
	padding: 2rem .2rem;
	font-size: 1.25rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dm-tekst);
	cursor: pointer;
	list-style: none;
}

.dm-akordeon__naglowek::-webkit-details-marker {
	display: none;
}

/*
 * Znak plus i minus rysowany dwiema kreskami: pionowa znika po otwarciu.
 * Znak tekstowy różni się szerokością między krojami i przy zmianie
 * rozjeżdża wyrównanie do prawej krawędzi.
 */
.dm-akordeon__znak {
	position: relative;
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
}

.dm-akordeon__znak::before,
.dm-akordeon__znak::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: var(--dm-tekst-3);
}

.dm-akordeon__znak::after {
	inset: 0 50% auto;
	width: 1px;
	height: 100%;
	transition: opacity 200ms;
}

.dm-akordeon__sekcja[open] .dm-akordeon__znak::after {
	opacity: 0;
}

/* ---------------------------------------------------------------------
   OPIS WYROBU I NOTA O WYKONANIU - OTWARTE, POZA ZAKŁADKAMI

   Oba bloki mają tę samą typografię co treść zakładek, bo czyta się je
   jednym ciągiem: opis, zakładki, nota. Różny stopień pisma rozbiłby to
   na trzy osobne rzeczy.

   Reguły celują w dwie klasy - `body.dm p` ma wagę (0,1,1).
   --------------------------------------------------------------------- */

.dm-produkt__historia,
.dm-produkt__wykonanie {
	font-size: var(--dm-txt-akapit);
	line-height: 1.85;
	color: var(--dm-tekst-2);
}

.dm-produkt__historia {
	margin: 2.4rem 0 .6rem;
}

.dm-produkt__historia p,
.dm-produkt__wykonanie p {
	font-size: var(--dm-txt-akapit);
	line-height: 1.85;
	margin: 0 0 1.2rem;
}

.dm-produkt__historia p:last-child,
.dm-produkt__wykonanie p:last-child {
	margin-bottom: 0;
}

.dm-produkt__historia strong,
.dm-produkt__wykonanie strong {
	font-weight: 600;
	color: var(--dm-tekst);
}

/*
 * Śródtytuł w opisie („Dla kogo?") jest pytaniem otwierającym akapit,
 * nie nagłówkiem sekcji - stąd stopień tekstu i wersaliki.
 */
.dm-produkt__historia h3,
.dm-produkt__historia h4 {
	font-family: var(--dm-pismo);
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dm-tekst);
	margin: 2.2rem 0 .8rem;
}

/*
 * Nota o ręcznym wykonaniu zamyka kartę, więc dostaje kreskę u góry
 * i jaśniejszy kolor - to podpis pod całością, nie kolejny akapit opisu.
 */
.dm-produkt__wykonanie {
	margin-top: 2.4rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--dm-ramka);
	color: var(--dm-tekst-3);
}

/*
 * TREŚĆ ZAKŁADEK - JEDNA TYPOGRAFIA NA WSZYSTKIE (2.09.2026).
 *
 * Zawartość zakładek pochodzi z trzech miejsc: pola powtarzalnego
 * (symbolika), pól tekstowych przy produkcie i pól domyślnych
 * w ustawieniach. Każde z nich wpuszczało własne znaczniki - listy,
 * nagłówki, akapity - i w efekcie sąsiednie zakładki miały inny stopień
 * pisma i inny odstęp wierszy.
 *
 * Reguły niżej celują w DWIE klasy albo w klasę i znacznik z przedrostkiem,
 * bo `body.dm p` ma wagę (0,1,1) i wygrałoby z pojedynczą klasą.
 *
 * Stopień podniesiony z `--dm-txt-maly` (14 px) na `--dm-txt-akapit`
 * (16 px): to treść do czytania, a nie podpis, i obowiązuje ją próg
 * z punktu 7 standardu wizualnego.
 */
.dm-akordeon__tresc {
	padding: 0 .2rem 2.4rem;
	font-size: var(--dm-txt-akapit);
	line-height: 1.85;
	color: var(--dm-tekst-2);
}

.dm-akordeon .dm-akordeon__tresc p,
.dm-akordeon .dm-akordeon__tresc li {
	font-size: var(--dm-txt-akapit);
	line-height: 1.85;
	margin: 0 0 1rem;
}

.dm-akordeon .dm-akordeon__tresc li {
	margin-bottom: .5rem;
}

/*
 * Nagłówek wewnątrz zakładki („Wymiary", „Materiały") jest ETYKIETĄ
 * części, nie nagłówkiem strony - stąd stopień tekstu i wersaliki
 * zamiast większego pisma. Większy nagłówek konkurowałby z nazwą samej
 * zakładki stojącą kilka pikseli wyżej.
 */
.dm-akordeon .dm-akordeon__tresc h3,
.dm-akordeon .dm-akordeon__tresc h4,
.dm-akordeon .dm-akordeon__tresc h5 {
	font-family: var(--dm-pismo);
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dm-tekst);
	margin: 2rem 0 .8rem;
}

.dm-akordeon .dm-akordeon__tresc > *:first-child {
	margin-top: 0;
}

/*
 * Pogrubienie w treści zakładki ma być widoczne, ale nie krzykliwe:
 * ciemniejszy kolor i waga 600, nie 700. Przy piśmie o cienkim rysunku
 * pełna czerń w wadze 700 wygląda jak inny krój.
 */
.dm-akordeon .dm-akordeon__tresc strong,
.dm-akordeon .dm-akordeon__tresc b {
	font-weight: 600;
	color: var(--dm-tekst);
}

.dm-symbolika {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

/*
 * NAZWA KAMIENIA POGRUBIONA I ODDZIELONA MYŚLNIKIEM (2.09.2026).
 *
 * Przecinek sklejał nazwę z opisem w jedno zdanie: „Sodalit, Symbol
 * harmonii…" czyta się jak wyliczenie, a to są dwie różne rzeczy -
 * nazwa i jej znaczenie. Myślnik rozdziela je tak, jak w słowniku.
 *
 * Pogrubienie nazwy daje oku punkty zaczepienia: przy czterech kamieniach
 * pod rząd jednolity tekst zlewa się w blok, po którym nie da się przebiec
 * wzrokiem w poszukiwaniu konkretnego.
 */
.dm-symbolika dt {
	display: inline;
	font-weight: 600;
	color: var(--dm-tekst);
}

.dm-symbolika dt::after {
	content: " - ";
	font-weight: 400;
	color: var(--dm-tekst-2);
}

.dm-symbolika dd {
	display: inline;
	margin: 0;
}

/*
 * Zdanie zamykające, wspólne dla całej symboliki. Oddzielone od listy
 * kamieni odstępem i kreską - to podsumowanie, nie kolejna pozycja.
 */
.dm-symbolika-podsumowanie {
	margin: 2rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--dm-ramka);
}

@media (max-width: 42.5em) {

	.dm-produkt__galeria {
		grid-template-columns: 1fr;
	}

	.dm-produkt__miniatury {
		order: 2;
		flex-direction: row;
		overflow-x: auto;
	}

	.dm-produkt__miniatura {
		flex: 0 0 7.6rem;
	}
}

/* ---------------------------------------------------------------------
   TELEFON: OBSZAR DOTYKU KROPEK SLIDERA

   Kropka ma 4 px wysokości - to kreska, nie przycisk. Wygląd zostaje,
   powiększa się tylko obszar reagujący na dotyk: wyściółka rozpycha
   sam przycisk, a rysowana kreska siedzi w jego tle na środku.
   --------------------------------------------------------------------- */

@media (max-width: 60em) {

	.dm-slider__kropki {
		gap: 0;
	}

	.dm-slider__kropka {
		width: 3.8rem;
		height: 22px;
		background: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dm-slider__kropka::before {
		content: "";
		display: block;
		width: 2.6rem;
		height: 4px;
		border-radius: var(--dm-r-pigula);
		background: var(--dm-tekst-a26);
		transition: background-color 200ms;
	}

	.dm-slider__kropka.is-wybrana {
		background: none;
	}

	.dm-slider__kropka.is-wybrana::before {
		background: var(--dm-tekst);
	}
}

/* ---------------------------------------------------------------------
   „OD" PRZY CENIE WARIANTOWEJ

   Mniejsze i stonowane: to jest kwalifikator kwoty, a nie druga liczba.
   --------------------------------------------------------------------- */

.dm-cena-od {
	font-size: .78em;
	color: var(--dm-tekst-3);
	letter-spacing: .02em;
}

/* ---------------------------------------------------------------------
   DOSTĘPNE WKRÓTCE I ZAPIS NA POWIADOMIENIE

   Blok stoi w miejscu, w którym normalnie jest wybór rozmiaru i przycisk
   zakupu, więc ma tę samą szerokość i ten sam oddech. Nie jest ramką
   ani polem ostrzegawczym: to nie usterka, tylko stan wyrobu.
   --------------------------------------------------------------------- */

.dm-wkrotce {
	margin: 0 0 2.4rem;
}

.dm-wkrotce__nota {
	font-size: var(--dm-txt-label, 1.2rem);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dm-akcent, #5C6B54);
	margin: 0 0 .8rem;
}

.dm-wkrotce__opis,
.dm-wkrotce__potwierdzenie {
	font-size: var(--dm-txt-akapit, 1.6rem);
	line-height: 1.7;
	color: var(--dm-tekst-2, #5F5C56);
	margin: 0 0 1.6rem;
}

.dm-wkrotce__blad {
	font-size: var(--dm-txt-maly, 1.4rem);
	color: var(--dm-wyprzedaz, #A94F72);
	margin: 0 0 1.2rem;
}

.dm-wkrotce__etykieta {
	display: block;
	font-size: var(--dm-txt-label, 1.2rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dm-tekst-3, #686454);
	margin: 0 0 .8rem;
}

/*
 * Pole i przycisk w jednym wierszu, ale ZAWIJANE. Przy wąskiej kolumnie
 * przycisk schodzi pod pole zamiast wypychać je do szerokości nazwy.
 */
.dm-wkrotce__wiersz {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	align-items: center;
}

.dm-wkrotce__pole {
	flex: 1 1 22rem;
	min-width: 0;
	padding: 1.4rem 1.6rem;
	font: inherit;
	font-size: var(--dm-txt-akapit, 1.6rem);
	color: var(--dm-tekst, #2E2D2A);
	background: var(--dm-biel, #FFFFFF);
	border: 1px solid var(--dm-ramka-pole, #E4DCCC);
	border-radius: var(--dm-r-mini, 4px);
	transition: border-color 200ms;
}

.dm-wkrotce__pole:focus-visible {
	outline: none;
	border-color: var(--dm-ramka-pole-aktywna, #C9BB9F);
}

/*
 * Pułapka na roboty. `display: none` bywa przez nie rozpoznawane, więc
 * pole jest wypchnięte poza ekran, a nie ukryte - dla człowieka wychodzi
 * na to samo, a dla robota wygląda jak zwykłe pole do wypełnienia.
 */
.dm-wkrotce__pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}