/* =====================================================================
   UKŁAD I ELEMENTY WSPÓLNE

   Wszystko, co pojawia się w obu gałęziach serwisu: kontener, sekcja,
   nagłówki, separator tęczowy, przyciski, pastylki, kafle, animacje.

   Wartości pochodzą z pomiaru przy 1440 px, gdzie 1rem = 10px.
   Piksele zostają tam, gdzie skalowanie jest niepożądane: włos ramki,
   promień zaokrąglenia, cień.
   ===================================================================== */

/* ---------------------------------------------------------------------
   KONTENER I SEKCJA
   --------------------------------------------------------------------- */

.dm-kontener {
	width: 100%;
	max-width: var(--dm-szer-sklep);
	margin-inline: auto;
	padding-inline: var(--dm-oddech);
}

.dm-galaz-foto .dm-kontener {
	max-width: var(--dm-szer-foto);
}

/*
 * GAŁĄŹ FOTOGRAFII: SZEROKOŚĆ I ODDECH SPRZED 24.09.2026 - od 28.09.2026.
 * Wzór szerokości (kontener 140rem, oddech z progów motywu nadrzędnego)
 * obowiązuje tylko w gałęzi sklepu. W gałęzi fotografii kolejność zdjęć
 * w galeriach jest ułożona pod cztery kolumny przy kontenerze 128rem
 * i oddechu 2.2rem - przy szerszym kontenerze siatka dostaje piątą
 * kolumnę i na końcu galerii zostają puste miejsca.
 */
.dm-galaz-foto {
	--dm-oddech: 2.2rem;
	--bp-tresc:  144rem;
}

.dm-sekcja {
	padding-top: var(--dm-odstep-sekcji);
}

.dm-sekcja--waska {
	padding-top: 5.4rem;
}

/*
 * Kotwica pod przyklejonym nagłówkiem.
 *
 * Bez tego skok do sekcji zatrzymuje się dokładnie tam, gdzie nagłówek
 * ją zasłania, i wygląda to jak trafienie w złe miejsce. Wysokość
 * nagłówka jest mierzona w skrypcie, więc reguła nadąża za zwężeniem.
 */
[id^="sekcja-"] {
	scroll-margin-top: calc( var(--dm-naglowek-wysokosc, 12rem) + 2rem );
}

/* ---------------------------------------------------------------------
   POMIJACZ

   Pierwszy element strony, widoczny dopiero po wejściu w niego
   tabulatorem. Bez niego osoba korzystająca z klawiatury przechodzi
   przez całe menu na każdej podstronie.
   --------------------------------------------------------------------- */

.dm-pomijacz {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1.2rem 2rem;
	background: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
	border-radius: 0 0 var(--dm-r-karta) 0;
}

.dm-pomijacz:focus {
	left: 0;
	top: 0;
	color: var(--dm-tekst-jasny);
}

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

/* ---------------------------------------------------------------------
   NAGŁÓWKI
   --------------------------------------------------------------------- */

.dm-nadtytul {
	font-size: var(--dm-txt-label);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--dm-tekst-3);
	line-height: 1.6;
	margin: 0;
}

.dm-nadtytul--jasny {
	color: var(--dm-tekst-jasny-a82);
}

/*
 * NADTYTUŁ, KTÓRY JEST ZDANIEM, A NIE ETYKIETĄ.
 *
 * Klasę dokłada `dm_klasa_nadtytulu()` po długości tekstu - patrz
 * komentarz przy tej funkcji. Zdanie zostaje w tym samym miejscu układu
 * i w tym samym kolorze, ale traci wersaliki i rozstrzelenie liter,
 * bo w tamtym kroju siedemdziesiąt znaków przestaje być czytelne.
 *
 * Szerokość ograniczona do 46 znaków: zdanie rozciągnięte na całą
 * szerokość sekcji czyta się gorzej niż zawinięte w dwa wiersze.
 */
.dm-nadtytul--zdanie {
	font-size: var(--dm-txt-maly);
	letter-spacing: .01em;
	text-transform: none;
	line-height: 1.65;
	max-width: 46ch;
	margin-inline: auto;
	text-wrap: balance;
}

/*
 * Nadtytuł wyrównany do lewej (slajdy, sekcje z kolumnami) nie ma się
 * nagle wyśrodkować tylko dlatego, że jest długi.
 */
.dm-naglowek-sekcji--lewo .dm-nadtytul--zdanie {
	margin-inline: 0;
}

.dm-naglowek-sekcji {
	text-align: center;
	margin-bottom: 4.4rem;
}

.dm-tytul-sekcji {
	font-family: var(--dm-pismo-tyt);
	font-weight: 400;
	font-size: clamp(2.8rem, 3vw, 3.6rem);
	line-height: 1.16;
	margin: .8rem 0 0;
}

.dm-tytul-sekcji--lewo {
	text-align: left;
}

.dm-tytul-blokowy {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(2.8rem, 3.2vw, 4rem);
	line-height: 1.18;
	margin: 1.2rem 0 0;
}

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

.dm-tresc-akapitowa {
	font-size: var(--dm-txt-akapit);
	line-height: 1.9;
	color: var(--dm-tekst-2);
	max-width: 48rem;
}

.dm-tresc-akapitowa p + p {
	margin-top: 1.4rem;
}

/*
 * Cytat i podpis WEWNĄTRZ treści akapitowej (O mnie, od 16.09.2026).
 * Cytat stoi w środku opowieści, więc nie może siedzieć w osobnym polu
 * pod tekstem - odstępy jak między akapitami, tylko trochę szersze.
 */
.dm-tresc-akapitowa .dm-cytat {
	margin: 2.2rem 0;
}

.dm-tresc-akapitowa .dm-podpis {
	margin-top: 2rem;
	font-family: var(--dm-pismo-tyt);
	font-style: italic;
	font-size: clamp(2.2rem, 2.4vw, 2.6rem);
	color: var(--dm-tekst);
}

.dm-cytat {
	font-family: var(--dm-pismo-tyt);
	font-style: italic;
	font-size: clamp(2rem, 2.2vw, 2.4rem);
	line-height: 1.6;
	margin: 1.8rem 0 2.4rem;
	max-width: 46rem;
	color: var(--dm-tekst);
}

.dm-cytat-blok {
	margin-top: 7.8rem;
	background: var(--dm-tlo-jasne);
	border-radius: var(--dm-r-blok);
	padding: clamp(4rem, 4vw, 6.2rem) clamp(2.4rem, 4vw, 6rem);
	text-align: center;
}

.dm-cytat-blok blockquote {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(2.2rem, 2.4vw, 3rem);
	line-height: 1.5;
	margin: 2rem auto 0;
	max-width: 72rem;
}

/* ---------------------------------------------------------------------
   SEPARATOR TĘCZOWY
   --------------------------------------------------------------------- */

/*
 * ODDECH WOKÓŁ SEPARATORA - 27.08.2026.
 *
 * Było 14 px nad kreską i nic pod nią, więc tekst zaczynał się tuż
 * pod tęczą, a przycisk siedział na tekście. Objaw był widoczny
 * w czterech miejscach naraz (slider hero, slider kolekcji, historia marki,
 * blok rezerwacji), a przyczyna była jedna - dlatego poprawka też jest
 * jedna, tutaj.
 *
 * Nagłówek sekcji ma własny odstęp pod spodem i tam kreska go nie dokłada.
 */
.dm-separator {
	display: flex;
	justify-content: center;
	gap: .6rem;
	margin-top: 2.4rem;
	margin-bottom: 2.6rem;
}

.dm-naglowek-sekcji .dm-separator {
	margin-bottom: 0;
}

.dm-separator--lewo {
	justify-content: flex-start;
}

/*
 * SEPARATOR: KRESKA - ROMB - KRESKA (od 1.09.2026).
 *
 * Kształt opisany przy `dm_separator()`. Kreska jest włosowa i w kolorze
 * ramki, romb - pełny, w kolorze akcentu. Cała waga rysunku siedzi
 * w rombie; linia ma tylko go osadzić.
 *
 * Wysokość kreski w PIKSELACH, nie w `rem`. Włos ma zostać włosem
 * na każdym progu - kreska skalowana razem z typografią robi się
 * na szerokim ekranie paskiem.
 */
/*
 * SZEROKOŚĆ SEPARATORA WYNIKA Z MIEJSCA, W KTÓRYM STOI.
 *
 * Pierwsza wersja miała kreski o stałej długości. Pod szerokim nagłówkiem
 * sekcji wyglądał przez to na zgubiony, a w wąskiej kolumnie karty
 * produktu - na doklejony. Kreska stałej długości pasuje do jednej
 * szerokości treści i do żadnej innej.
 *
 * Teraz separator zajmuje szerokość swojego pojemnika, a kreski rozciągają
 * się `flex`em do granicy zapisanej przy rozmiarze. W wąskiej kolumnie
 * skurczy się razem z nią, pod szerokim nagłówkiem dojdzie do swojego
 * maksimum i dalej nie urośnie - inaczej przy sekcji na pełną szerokość
 * zamieniłby się w linię dzielącą stronę na pół.
 */
.dm-separator {
	gap: 0;
	width: 100%;
	max-width: 22rem;
	margin-inline: auto;
}

.dm-separator--lewo {
	margin-inline: 0;
}

.dm-separator__kreska {
	display: block;
	flex: 1 1 0;
	min-width: 1.8rem;
	height: 1px;
	background: var(--dm-ramka-pole);
}

.dm-separator--xs { max-width: 13rem; }
.dm-separator--sm { max-width: 17rem; }
.dm-separator--lg { max-width: 27rem; }
.dm-separator--xl { max-width: 33rem; }

.dm-separator__romb {
	display: block;
	width: var(--dm-romb);
	height: var(--dm-romb);
	margin: 0 .9rem;
	background: var(--dm-akcent);
	transform: rotate(45deg);
}

.dm-separator--xs .dm-separator__romb { width: var(--dm-romb-xs); height: var(--dm-romb-xs); margin: 0 .7rem; }
.dm-separator--lg .dm-separator__romb { width: var(--dm-romb-lg); height: var(--dm-romb-lg); margin: 0 1rem; }
.dm-separator--xl .dm-separator__romb { width: var(--dm-romb-xl); height: var(--dm-romb-xl); margin: 0 1.2rem; }

/*
 * Na ciemnym tle (ekran wyboru, stopka) kreska musi być jasna,
 * bo kolor ramki na czerni znika. Romb zostaje w akcencie - jest
 * na tyle nasycony, że utrzymuje się na obu tłach.
 */
.dm-wybor__tresc .dm-separator__kreska,
.dm-stopka .dm-separator__kreska,
.dm-separator--jasny .dm-separator__kreska {
	background: var(--dm-tekst-jasny-a45);
}

/*
 * Romb na ciemnym tle - rozjaśniony wariant tego samego zielonego.
 * Akcent #5C6B54 ma na zdjęciu przyciemnionym o połowę kontrast poniżej
 * dwóch do jednego, czyli po prostu znika. To ta sama barwa, tylko
 * podniesiona - nie inny kolor.
 */
.dm-wybor__tresc .dm-separator__romb,
.dm-stopka .dm-separator__romb,
.dm-separator--jasny .dm-separator__romb {
	background: var(--dm-szalwia);
}

/* ---------------------------------------------------------------------
   PRZYCISKI

   JEDEN zestaw wartości na całą stronę. Zaokrąglenie, waga napisu,
   odstęp liter i wyściółka są tu, a nie przy poszczególnych sekcjach.
   Przycisk w sliderze ma wyglądać identycznie jak przycisk w stopce -
   różnić może się wyłącznie wariantem koloru.
   --------------------------------------------------------------------- */

.dm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	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;
	line-height: 1.2;
	padding: var(--dm-btn-wysciolka);
	border-radius: var(--dm-btn-promien);
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--dm-btn-czas), color var(--dm-btn-czas), border-color var(--dm-btn-czas);
}

.dm-btn--pelny {
	background: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
	border-color: var(--dm-tekst);
}

.dm-btn--pelny:hover,
.dm-btn--pelny:focus-visible {
	background: var(--dm-grafit);
	border-color: var(--dm-grafit);
	color: var(--dm-tekst-jasny);
}

.dm-btn--kontur {
	background: none;
	color: var(--dm-tekst);
	border-color: var(--dm-tekst);
}

.dm-btn--kontur:hover,
.dm-btn--kontur:focus-visible {
	background: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
}

/* Warianty na ciemnym tle: napis jasny, nigdy szary. */
.dm-btn--jasny {
	background: none;
	color: var(--dm-tekst-jasny);
	border-color: var(--dm-tekst-jasny-a80);
}

.dm-btn--jasny:hover,
.dm-btn--jasny:focus-visible {
	background: var(--dm-tekst-jasny-a16);
	color: var(--dm-tekst-jasny);
}

.dm-btn--jasny-pelny {
	background: var(--dm-tekst-jasny);
	color: var(--dm-tekst);
	border-color: var(--dm-tekst-jasny);
}

.dm-btn--jasny-pelny:hover,
.dm-btn--jasny-pelny:focus-visible {
	background: var(--dm-kremowy);
	border-color: var(--dm-kremowy);
	color: var(--dm-tekst);
}

/*
 * Przycisk „Umów sesję" w nagłówku fotografii - więcej oddechu po bokach.
 * Wariant mały jest wspólny dla całej strony, więc poszerzamy wyłącznie
 * ten jeden przypadek.
 */
.dm-naglowek--foto .dm-naglowek__akcje .dm-btn--maly {
	padding-left: 3.2rem;
	padding-right: 3.2rem;
}

.dm-btn--maly {
	font-size: var(--dm-txt-label);
	letter-spacing: .16em;
	padding: 1.2rem 2.2rem;
}

.dm-btn--duzy {
	font-size: 1.35rem;
	letter-spacing: .2em;
	padding: 1.8rem 3.8rem;
}

.dm-btn--szeroki {
	width: 100%;
}

.dm-btn[disabled] {
	opacity: .45;
	cursor: default;
}

.dm-przyciski-rzad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.4rem;
}

.dm-przyciski-rzad--srodek {
	justify-content: center;
}

.dm-link-podkreslony {
	font-size: var(--dm-txt-label);
	letter-spacing: .16em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--dm-linia-ciemna);
	padding-bottom: 3px;
}

/* ---------------------------------------------------------------------
   PASTYLKI
   --------------------------------------------------------------------- */

.dm-pastylki {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2.2rem 0 2.6rem;
}

.dm-pastylka {
	font-size: var(--dm-txt-maly);
	line-height: 1.4;
	padding: .8rem 1.4rem;
	border-radius: var(--dm-r-pigula);
	background: var(--dm-pastylka-tlo, var(--dm-tlo-jasne));
	color: var(--dm-pastylka-tekst, var(--dm-tekst-2));
}

.dm-pastylka-wyboru {
	display: inline-flex;
	align-items: center;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-maly);
	line-height: 1.2;
	padding: .8rem 1.4rem;
	border-radius: var(--dm-r-pigula);
	border: 1px solid var(--dm-ramka-pole);
	background: none;
	color: var(--dm-tekst);
	cursor: pointer;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}

.dm-pastylka-wyboru:hover {
	border-color: var(--dm-tekst);
	color: var(--dm-tekst);
}

.dm-pastylka-wyboru.is-wybrana {
	background: var(--dm-tekst);
	border-color: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
}

.dm-pastylka-wyboru--duza {
	font-size: 1.5rem;
	padding: 1.4rem 2.6rem;
	min-width: 9.2rem;
	justify-content: center;
}

.dm-pastylka-wyboru[disabled] {
	opacity: .4;
	cursor: default;
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------
   BADGE
   --------------------------------------------------------------------- */

.dm-badge {
	display: inline-block;
	font-size: var(--dm-txt-badge);
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--dm-tekst);
	background: var(--dm-tlo-jasne);
	padding: .5rem 1.1rem;
	border-radius: var(--dm-r-pigula);
}

.dm-badge--nowosc     { background: var(--dm-pastel-roz); }
.dm-badge--bestseller { background: var(--dm-pastel-zielen); }
.dm-badge--zestaw     { background: var(--dm-pastel-miod); }
.dm-badge--wkrotce    { background: var(--dm-pastel-roz); }
.dm-badge--wyprzedane { background: var(--dm-pastel-roz); }
.dm-badge--ostatnia   { background: var(--dm-pastel-roz); }
.dm-badge--promocja   { background: var(--dm-pastel-roz); }
.dm-badge--polecany   { background: var(--dm-pastel-roz); align-self: flex-start; margin-bottom: 1.2rem; }

/* ---------------------------------------------------------------------
   OKRUSZKI
   --------------------------------------------------------------------- */

.dm-okruszki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	padding: 2.6rem 0 0;
	margin-bottom: 2.4rem;
}

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

.dm-okruszki [aria-current] {
	color: var(--dm-tekst);
}

.dm-hero-foto__panel .dm-okruszki {
	padding-top: 0;
	margin-bottom: 1.4rem;
	color: var(--dm-tekst-jasny-a78);
}

.dm-hero-foto__panel .dm-okruszki a {
	color: var(--dm-tekst-jasny-a78);
}

.dm-hero-foto__panel .dm-okruszki [aria-current] {
	color: var(--dm-tekst-jasny);
}

/* ---------------------------------------------------------------------
   KAFLE ZE ZDJĘCIEM
   --------------------------------------------------------------------- */

.dm-kafle {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: var(--dm-gap);
}

.dm-kafle--poziomy {
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}

/*
 * Kadr kwadratowy - kategorie na stronie sklepu, 27.08.2026.
 * Wcześniej kafle były pionowe (3:4) i zdjęcie biżuterii traciło
 * na wysokości to, co jest w nim najważniejsze: szerokość nadgarstka
 * albo dekoltu.
 */
.dm-kafle--kwadrat {
	grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
}

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

.dm-kafel__kadr {
	display: block;
	aspect-ratio: var(--dm-proporcja-kafla, 3 / 4);
	overflow: hidden;
	background: var(--dm-tlo-zdjecia);
}

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

.dm-kafel:hover .dm-kafel__kadr img {
	transform: scale(1.04);
}

/*
 * Podpis stoi POD zdjęciem, a nie na nim (zmiana 01.10.2026).
 * Pasek nałożony na dół kadru zasłaniał na telefonie dolną część
 * zdjęcia - kawałek biżuterii znikał pod napisem.
 */
.dm-kafel__podpis {
	position: static;
	display: block;
	background: var(--dm-tekst-jasny-a92);
	padding: 2rem 2.2rem;
	text-align: center;
}

.dm-kafel__nadtytul {
	display: block;
	font-size: var(--dm-txt-label);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dm-tekst-3);
}

.dm-kafel__tytul {
	display: block;
	font-family: var(--dm-pismo-tyt);
	font-size: 2.7rem;
	line-height: 1.2;
	margin-top: .4rem;
}

.dm-kafle--poziomy .dm-kafel__tytul {
	font-size: 2.5rem;
}

.dm-kafel__podpis .dm-separator {
	margin-top: 1.1rem;
}

/* ---------------------------------------------------------------------
   PAS ZAUFANIA
   --------------------------------------------------------------------- */

.dm-pas-zaufania {
	margin-top: 4.4rem;
	border-block: 1px solid var(--dm-linia-jasna);
	background: var(--dm-biel);
}

.dm-pas-zaufania__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
	gap: 1.8rem;
	padding-block: 2.2rem;
}

.dm-zaufanie {
	display: flex;
	align-items: center;
	gap: 1.4rem;
}

.dm-zaufanie__ikona {
	flex: 0 0 auto;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: var(--dm-r-pigula);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dm-kolko-tlo, var(--dm-tlo-jasne));
	color: var(--dm-kolko-tekst, var(--dm-tekst-2));
}

.dm-zaufanie__tytul {
	display: block;
	font-size: var(--dm-txt-maly);
	line-height: 1.4;
	color: var(--dm-tekst);
}

.dm-zaufanie__podpis {
	display: block;
	font-size: var(--dm-txt-badge);
	line-height: 1.5;
	color: var(--dm-tekst-3);
}

/* ---------------------------------------------------------------------
   DWIE KOLUMNY I ZDJĘCIE W KOLE
   --------------------------------------------------------------------- */

.dm-dwie-kolumny {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
	gap: clamp(3rem, 4vw, 6rem);
	align-items: center;
}

.dm-dwie-kolumny--gora {
	align-items: start;
}

.dm-sekcja--historia {
	margin-top: 7.8rem;
	padding-top: 0;
	background: var(--dm-tlo-jasne);
	border-block: 1px solid var(--dm-linia-jasna);
}

.dm-sekcja--historia .dm-dwie-kolumny,
.dm-sekcja--historia .dm-historia {
	padding-block: clamp(4.8rem, 5vw, 7.8rem);
}

/* ---------------------------------------------------------------------
   NOTA O OPAKOWANIACH - TEKST NA ŚRODKU, ZDJĘCIA PRZY KRAWĘDZIACH

   Układ z 9.09.2026. Sekcja nie stoi już w kontenerze: zdjęcia mają iść
   do samych krawędzi okna, a kontener zatrzymywałby je na 144 rem.
   Oddech tekstu daje więc środkowa kolumna, nie kontener.

   Kolumny boczne biorą to, co zostanie po środkowej. Poniżej 1100 px
   miejsca jest za mało na trzy kolumny naraz - zdjęcia schodzą wtedy pod
   tekst, dalej na pełną szerokość okna.

   Reguły dla akapitów i cytatu celują w DWIE klasy - `body.dm p` ma wagę
   (0,1,1) i wygrywa z pojedynczą klasą niezależnie od kolejności w pliku.
   --------------------------------------------------------------------- */

.dm-historia {
	display: grid;
	justify-items: center;
	gap: clamp(2.8rem, 3.5vw, 4.4rem);
}

.dm-historia .dm-historia__tresc {
	max-width: 68rem;
	padding-inline: var(--dm-oddech);
	text-align: center;
	text-wrap: pretty;
}

.dm-historia .dm-historia__tresc p,
.dm-historia .dm-historia__tresc blockquote {
	text-align: center;
}

.dm-historia .dm-historia__tresc .dm-tytul-blokowy {
	text-wrap: balance;
}

/* Blok akapitów i cytat mają własne `max-width` - bez marginesu
   automatycznego stoją przy lewej krawędzi kolumny, choć wiersze w środku
   są już wyśrodkowane. Widać to jako tekst przesunięty o kilkadziesiąt
   pikseli w lewo względem nagłówka i separatora nad nim. */
.dm-historia .dm-historia__tresc .dm-tresc-akapitowa,
.dm-historia .dm-historia__tresc .dm-cytat {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
   ZDJĘCIA PRZY KRAWĘDZIACH

   Bez przycinania: `height: auto` zostawia proporcje pliku takie, jakie
   wybrała klientka. Wysokości wyrównuje wyśrodkowanie w pionie, nie kadr.

   Zaokrąglenie tylko od strony tekstu. Narożnik zaokrąglony przy samej
   krawędzi okna czyta się jak niedomknięte zdjęcie, a nie jak zamiar.
   --------------------------------------------------------------------- */

.dm-historia .dm-historia__foto {
	width: 100%;
	margin: 0;
}

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

@media (min-width: 1100px) {

	.dm-historia {
		grid-template-columns: 1fr min(68rem, 100%) 1fr;
		align-items: center;
		gap: clamp(2.4rem, 3vw, 5rem);
	}

	.dm-historia .dm-historia__foto--lewa {
		grid-column: 1;
	}

	.dm-historia .dm-historia__tresc {
		grid-column: 2;
	}

	.dm-historia .dm-historia__foto--prawa {
		grid-column: 3;
	}

	.dm-historia .dm-historia__foto--lewa img {
		border-radius: 0 var(--dm-r-blok) var(--dm-r-blok) 0;
	}

	.dm-historia .dm-historia__foto--prawa img {
		border-radius: var(--dm-r-blok) 0 0 var(--dm-r-blok);
	}
}

.dm-kolo--srodek {
	width: min(32rem, 100%);
}

.dm-kolo {
	justify-self: center;
	width: min(40rem, 100%);
	aspect-ratio: 1 / 1;
	border-radius: var(--dm-r-pigula);
	overflow: hidden;
	background: var(--dm-tlo-zdjecia);
}

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

/* ---------------------------------------------------------------------
   BLOK PASTELOWY I NEWSLETTER
   --------------------------------------------------------------------- */

.dm-blok-pastelowy,
.dm-newsletter {
	border-radius: var(--dm-r-blok);
	background: var(--dm-pastel);
	padding: clamp(4rem, 5vw, 7.4rem) clamp(2.4rem, 5vw, 6rem);
	text-align: center;
}

.dm-blok-pastelowy__tytul,
.dm-newsletter__tytul {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(2.8rem, 3.6vw, 4.4rem);
	line-height: 1.16;
	/*
	 * Odstęp nad tytułem daje teraz separator, który ma własny margines
	 * dolny (27.08.2026). Zostawiony tu margines dokładałby drugi raz
	 * to samo.
	 */
	margin: 0;
}

/*
 * WYŚRODKOWANIE WPISANE WPROST.
 *
 * Blok ma `text-align: center` na sobie, ale akapit dziedziczy je tylko
 * wtedy, gdy nic po drodze nie ustawi wyrównania do lewej - a arkusz
 * motywu nadrzędnego robi to dla akapitów w treści strony. Skutek był
 * taki, że na podstronie fotografii tytuł i przycisk stały na środku,
 * a zdanie między nimi uciekało do lewej krawędzi.
 */
.dm-blok-pastelowy__opis,
.dm-newsletter__opis {
	font-size: var(--dm-txt-akapit);
	line-height: 1.8;
	color: var(--dm-tekst-4);
	margin: 0 auto 3.4rem;
	max-width: 48rem;
	text-align: center;
}

.dm-blok-pastelowy__tytul + .dm-blok-pastelowy__opis,
.dm-newsletter__tytul + .dm-newsletter__opis {
	margin-top: 2.2rem;
}

.dm-newsletter__formularz {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: 47rem;
	margin-inline: auto;
}

.dm-newsletter__pole {
	flex: 1 1 22rem;
	min-width: 0;
	border: 1px solid var(--dm-ramka-2);
	background: var(--dm-biel-a92);
	padding: 1.5rem 1.8rem;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-akapit);
	color: var(--dm-tekst);
	border-radius: var(--dm-r-pigula);
	outline: none;
	transition: border-color 150ms;
}

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

/*
 * Newsletter nad stopką (poza treścią strony) - odstęp od stopki taki sam
 * jak od sekcji nad nim. Bez tego pastelowy blok dotyka ciemnej stopki.
 */
body.dm main + .dm-sekcja--newsletter {
	padding-bottom: var(--dm-odstep-sekcji);
}

/*
 * NEWSLETTER - JEDNA KOLUMNA, WĄSKI BLOK NA ŚRODKU (od 29.09.2026).
 * Zastąpił układ lewo-prawo z 28.09. Nagłówek i zdanie stoją w jednym
 * wierszu na komputerze; na telefonie łamią się normalnie, bo inaczej
 * wyszłyby poza ekran.
 */
/*
 * Tło gładkie zamiast pastelowego gradientu - uwaga klientki 29.09.2026.
 */
.dm-newsletter--wasko {
	background: var(--dm-tlo-cieple);
	max-width: 84rem;
	margin-inline: auto;
	padding: clamp(3.2rem, 4vw, 4.8rem) clamp(2.4rem, 4vw, 4.8rem);
}

.dm-newsletter--wasko .dm-newsletter__tytul {
	font-size: clamp(2.6rem, 2.8vw, 3.4rem);
}

.dm-newsletter--wasko .dm-newsletter__opis {
	max-width: none;
	margin-bottom: 2.6rem;
}

.dm-newsletter--wasko .dm-newsletter__tytul + .dm-newsletter__opis {
	margin-top: 1.2rem;
}

.dm-newsletter--wasko .dm-newsletter__formularz {
	max-width: 52rem;
}

.dm-newsletter--wasko .dm-newsletter__pole {
	flex-basis: 18rem;
}

@media (min-width: 62em) {
	.dm-newsletter--wasko .dm-newsletter__tytul,
	.dm-newsletter--wasko .dm-newsletter__opis {
		white-space: nowrap;
	}
}

.dm-newsletter__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	margin-bottom: 1.6rem;
	border-radius: 50%;
	background: var(--dm-biel-a92);
	color: var(--dm-tekst);
}

/*
 * Zgoda pod polami - cały wiersz, tekst przy polu wyboru. Pole wyboru
 * ma własny kolor akcentu, bez tego przeglądarka daje niebieski.
 */
.dm-newsletter__zgoda {
	flex: 1 1 100%;
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	text-align: left;
	font-size: var(--dm-txt-maly);
	line-height: 1.6;
	color: var(--dm-tekst-4);
	cursor: pointer;
}

.dm-newsletter__zgoda input {
	flex: 0 0 auto;
	margin-top: .3rem;
	accent-color: var(--dm-tekst);
}

.dm-newsletter__zgoda a {
	color: inherit;
	text-decoration: underline;
}

/*
 * Tekst pod zgodami (wycofanie zgody, odnośnik do polityki). Ten sam
 * krój i kolor co zgody, wcięty do tekstu zgód - czyta się jako ich
 * dopowiedzenie, nie jako osobny akapit formularza.
 */
.dm-newsletter__zgody-info {
	flex: 1 1 100%;
	margin: 0;
	padding-left: 2.8rem;
	text-align: left;
	font-size: var(--dm-txt-maly);
	line-height: 1.6;
	color: var(--dm-tekst-4);
}

.dm-newsletter__zgody-info a {
	color: inherit;
	text-decoration: underline;
}

.dm-newsletter__przycisk {
	flex: 1 1 100%;
}

.dm-newsletter__dziekujemy {
	font-size: var(--dm-txt-akapit);
	line-height: 1.8;
	color: var(--dm-tekst);
	margin: 0 auto;
	max-width: 48rem;
	text-align: center;
}

.dm-newsletter__nota {
	font-size: var(--dm-txt-badge);
	line-height: 1.7;
	color: var(--dm-tekst-5);
	margin-top: 1.4rem;
}

.dm-newsletter__nota p {
	margin: 0;
}

/* ---------------------------------------------------------------------
   KARTY I LISTY
   --------------------------------------------------------------------- */

.dm-karta,
.dm-ramka-listy {
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
	padding: 2.8rem;
}

.dm-karta-pastelowa {
	border-radius: var(--dm-r-blok);
	background: linear-gradient(150deg, var(--dm-pastel-fiolet), var(--dm-pastel-roz) 55%, var(--dm-pastel-zolty));
	padding: 3rem 2.8rem;
}

.dm-karta__tytul {
	font-family: var(--dm-pismo-tyt);
	font-size: 2.5rem;
	line-height: 1.2;
	margin: 0;
}

.dm-karta__opis {
	font-size: var(--dm-txt-maly);
	line-height: 1.8;
	color: var(--dm-tekst-2);
	margin: 1rem 0 1.8rem;
}

.dm-karta__stopka {
	border-top: 1px solid var(--dm-linia-jasna);
	margin-top: 2rem;
	padding-top: 1.8rem;
	font-size: var(--dm-txt-maly);
	line-height: 1.8;
	color: var(--dm-tekst-2);
}

.dm-lista-ptaszki {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	font-size: var(--dm-txt-maly);
	line-height: 1.6;
	color: var(--dm-tekst-2);
}

.dm-lista-ptaszki li {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
}

.dm-ptaszek {
	flex: 0 0 auto;
	margin-top: .3rem;
	color: var(--dm-zielen);
}

/* ---------------------------------------------------------------------
   SIATKI ZDJĘĆ
   --------------------------------------------------------------------- */

.dm-portfolio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
	grid-auto-rows: 38rem;
	grid-auto-flow: dense;
	gap: var(--dm-gap-galerii);
}

.dm-portfolio__kadr {
	margin: 0;
	overflow: hidden;
	border-radius: var(--dm-r-karta);
	background: var(--dm-tlo-zdjecia);
}

.dm-portfolio__kadr--2 {
	grid-column: span 2;
}

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

.dm-portfolio__kadr:hover .dm-portfolio__zdjecie {
	transform: scale(1.05);
}

/* ---------------------------------------------------------------------
   PORTFOLIO: ZAKŁADKI KATEGORII
   --------------------------------------------------------------------- */

.dm-portfolio-filtry {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 3.6rem;
}

.dm-portfolio-filtr {
	border: 1px solid var(--dm-linia);
	background: transparent;
	color: var(--dm-tekst);
	font-family: inherit;
	font-size: 1.6rem;
	line-height: 1;
	padding: 1.2rem 2.4rem;
	border-radius: var(--dm-r-pigula);
	cursor: pointer;
	user-select: none;
	transition: background var(--dm-czas-hover) var(--dm-krzywa),
		color var(--dm-czas-hover) var(--dm-krzywa),
		border-color var(--dm-czas-hover) var(--dm-krzywa);
}

/*
 * Zakładka pod kursorem i zakładka wybrana biorą kolory z palety marki.
 * Nazwy zmiennych sprawdzone w `style.css` - `var()` z nazwą, której
 * nie ma, nie unieważnia reguły, tylko podstawia wartość początkową,
 * i wychodzi z tego kolor, którego nikt nie wybierał.
 */
.dm-portfolio-filtr:hover {
	border-color: var(--dm-tekst-3);
}

.dm-portfolio-filtr.is-wybrany {
	background: var(--dm-tekst);
	border-color: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
}

/*
 * Zdjęcia portfolio stoją w jednej siatce, przemieszane między
 * kategoriami (28.08.2026). Nagłówków kategorii nie ma - nazwa wybranej
 * stoi na wciśniętym przycisku zakładki, a przy „Wszystkich" napis
 * „teraz zaczynają się plenery" niczego nie wnosi.
 *
 * Zakładka chowa POJEDYNCZE KADRY atrybutem `hidden`. Reguła niżej
 * jest tu dlatego, że `hidden` z arkusza przeglądarki ma zerową wagę
 * i przegrywa z każdą regułą klasową, która ustawi `display` - a taka
 * może się tu kiedyś pojawić przy pierwszej zmianie układu siatki.
 */
.dm-portfolio__kadr[hidden] {
	display: none;
}

.dm-portfolio__kadr[role="button"] {
	cursor: zoom-in;
}

/* ---------------------------------------------------------------------
   PODGLĄD ZDJĘCIA

   Nakładka budowana jest skryptem, więc te reguły nie mają czego
   dotyczyć, dopóki ktoś nie kliknie w zdjęcie. Zostają w arkuszu,
   bo doklejanie stylu ze skryptu znaczyłoby, że wyglądu podglądu
   nie da się poprawić bez ruszania kodu.
   --------------------------------------------------------------------- */

.dm-podglad {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	padding: 4rem;
	background: var(--dm-czern-galerii-a92);
}

/*
 * Atrybut `hidden` przegrywa z regułą klasową, bo pochodzi z arkusza
 * przeglądarki i ma zerową wagę. Bez tej linijki nakładka byłaby
 * widoczna od wejścia na stronę.
 */
.dm-podglad[hidden] {
	display: none;
}

.dm-podglad__rama {
	margin: 0;
	max-width: min(120rem, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
}

.dm-podglad__obraz {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 82vh;
	height: auto;
	object-fit: contain;
	border-radius: var(--dm-r-karta);
}

.dm-podglad__obraz.is-laduje {
	visibility: hidden;
}

.dm-podglad__podpis {
	color: var(--dm-biel-a82);
	font-size: 1.5rem;
	text-align: center;
	max-width: 60rem;
}

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

.dm-podglad__zamknij,
.dm-podglad__strzalka {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
	border: 0;
	border-radius: 50%;
	background: var(--dm-biel-a12);
	color: var(--dm-biel);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background var(--dm-czas-hover) var(--dm-krzywa);
}

.dm-podglad__zamknij:hover,
.dm-podglad__strzalka:hover {
	background: var(--dm-biel-a24);
}

/* Na ciemnym tle podglądu obwódkę widać tylko w jasnym kolorze. */
.dm-podglad__zamknij:focus-visible,
.dm-podglad__strzalka:focus-visible {
	outline: 2px solid var(--dm-szalwia);
	outline-offset: 2px;
}

.dm-podglad__zamknij {
	position: absolute;
	top: 2rem;
	right: 2rem;
}

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

body.dm-bez-przewijania {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   OKNO PO DODANIU DO KOSZYKA

   Tło jest przyciemnione i rozmyte, żeby okno nie konkurowało
   z kolorowymi zdjęciami produktu. Rozmycie jest dodatkiem, nie
   warunkiem: przeglądarki, które go nie znają, pokazują samo
   przyciemnienie i wygląda to tak samo dobrze.
   --------------------------------------------------------------------- */

.dm-koszyk-okno {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.4rem;
	background: var(--dm-zaslona-a55);
	backdrop-filter: blur(var(--dm-rozmycie));
	-webkit-backdrop-filter: blur(var(--dm-rozmycie));
}

.dm-koszyk-okno[hidden] {
	display: none;
}

.dm-koszyk-okno__karta {
	position: relative;
	width: 100%;
	max-width: 46rem;
	background: var(--dm-biel);
	border-radius: var(--dm-r-blok);
	padding: 3.4rem 3.2rem 3rem;
	box-shadow: 0 24px 60px var(--dm-zaslona-a28);
	text-align: center;
}

.dm-koszyk-okno__zamknij {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 3.6rem;
	height: 3.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--dm-tekst-3);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.dm-koszyk-okno__zamknij:hover {
	background: var(--dm-tlo-jasne);
	color: var(--dm-tekst);
}

.dm-koszyk-okno__naglowek {
	margin: 0 0 2rem;
	font-size: 1.2rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--dm-tekst-3);
}

.dm-koszyk-okno__pozycja {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	text-align: left;
	padding-bottom: 2.4rem;
	border-bottom: 1px solid var(--dm-ramka);
}

.dm-koszyk-okno__kadr {
	flex: 0 0 auto;
	width: 8rem;
	height: 8rem;
	border-radius: var(--dm-r-karta);
	overflow: hidden;
	background: var(--dm-tlo-zdjecia);
}

.dm-koszyk-okno__kadr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dm-koszyk-okno__opis {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	min-width: 0;
}

.dm-koszyk-okno__nazwa {
	font-family: var(--dm-pismo-tyt);
	font-size: 2rem;
	line-height: 1.25;
}

.dm-koszyk-okno__szczegol {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-2);
}

.dm-koszyk-okno__przyciski {
	display: flex;
	gap: 1.2rem;
	margin-top: 2.4rem;
}

.dm-koszyk-okno__przyciski .dm-btn {
	flex: 1 1 0;
}

@media (max-width: 30em) {

	.dm-koszyk-okno__przyciski {
		flex-direction: column;
	}
}

@media (max-width: 48em) {

	.dm-podglad {
		padding: 2rem 1rem;
		gap: .4rem;
	}

	.dm-podglad__zamknij,
	.dm-podglad__strzalka {
		width: 4rem;
		height: 4rem;
	}
}

/*
 * Rząd zdjęć o wyrównanej wysokości.
 *
 * Udział każdego kadru w szerokości liczy PHP z rzeczywistych wymiarów
 * pliku. Odjęcie odstępu z `calc` jest konieczne: bez tego suma
 * szerokości równa się 100% i ostatni kadr spada do nowego wiersza.
 */
.dm-rzad-zdjec {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dm-gap-galerii);
}

.dm-rzad-zdjec__kadr {
	flex: 0 0 calc(var(--dm-udzial) - var(--dm-gap-galerii));
	margin: 0;
	aspect-ratio: var(--dm-proporcja);
	overflow: hidden;
	border-radius: var(--dm-r-karta);
	background: var(--dm-tlo-zdjecia);
}

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

/* ---------------------------------------------------------------------
   ZASTĘPNIK ZDJĘCIA
   --------------------------------------------------------------------- */

.dm-zastepnik {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--dm-tlo-zdjecia);
}

/* ---------------------------------------------------------------------
   ANIMACJE WEJŚCIA

   Element czeka na klasę `is-widoczny`, którą dokłada obserwator.
   Gdy skryptu nie ma albo ustawienie systemowe ogranicza ruch, klasa
   jest dokładana od razu wszystkim - element nigdy nie zostaje ukryty
   na stałe.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	[data-dm-anim] {
		opacity: 0;
		transform: translateY(2.4rem);
		transition:
			opacity 420ms ease var(--dm-anim-zwloka, 0ms),
			transform 420ms cubic-bezier(.22, .61, .36, 1) var(--dm-anim-zwloka, 0ms);
	}

	[data-dm-anim].is-widoczny {
		opacity: 1;
		transform: none;
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
   TELEFON: CZYTELNOŚĆ NADTYTUŁU

   Nadtytuł jest wersalikami z rozstrzeloną spacją, więc traci czytelność
   szybciej niż zwykły tekst. Przy podstawie 9 px schodził do 10,8 px.
   --------------------------------------------------------------------- */

@media (max-width: 60em) {

	.dm-nadtytul {
		font-size: var(--dm-txt-label); /* od 30.09.2026 skala etykiet (14 px na telefonie) */
	}
}

/* ---------------------------------------------------------------------
   TELEFON: SIATKA PORTFOLIO NA JEDNĄ KOLUMNĘ

   Przy 390 px w siatce mieści się jedna kolumna - ale zdjęcie poziome
   ma `grid-column: span 2`, więc siatka DOKŁADAŁA drugą kolumnę,
   niejawną i wąską. Zdjęcia pionowe lądowały w pasku o szerokości
   107 px, obok pustego miejsca.

   Poniżej progu kadr poziomy przestaje się rozciągać na dwie kolumny.
   Wtedy nie ma czego dokładać i wszystkie zdjęcia mają pełną szerokość.
   --------------------------------------------------------------------- */

@media (max-width: 48em) {

	.dm-portfolio {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 42rem;
	}

	.dm-portfolio__kadr--2 {
		grid-column: span 1;
	}
}