/* =====================================================================
   PASEK PROMOCYJNY I NAGŁÓWKI
   ===================================================================== */

/* ---------------------------------------------------------------------
   PASEK PROMOCYJNY

   NIE JEST przyklejony. Przewija się razem ze stroną i nie wraca przy
   przewijaniu w górę - wraca dopiero wtedy, gdy odwiedzający dojdzie
   do samej góry. Zabieranie wysokości ekranu przez całą wizytę na jedno
   zdanie jest złym interesem.
   --------------------------------------------------------------------- */

.dm-pasek {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.8rem;
	padding: 1rem var(--dm-oddech);
	/*
	 * Pasek nad menu: jednolity grafit zamiast gradientu z logo
	 * (1.09.2026). To pierwsza rzecz widoczna po wejsciu na strone
	 * i to ona najmocniej ustawiala ton na „cukierkowo".
	 */
	background: var(--dm-pasek-tlo);
	overflow: hidden;
}

.dm-pasek__tresc {
	font-size: var(--dm-txt-label);
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	/*
	 * Kolor MUSI iść z tokenu paska, nie z koloru tekstu strony.
	 *
	 * Gdy pasek był gradientem, stał na nim ciemny napis i `--dm-tekst`
	 * było poprawne. Po zamianie tła na grafit ten sam token dał napis
	 * w kolorze tła - tekst zniknął, choć w kodzie wszystko wyglądało
	 * na miejscu.
	 *
	 * Element o własnym tle ma mieć własny token tekstu. Sięganie po
	 * kolor „strony" działa dopóty, dopóki tło jest jasne - czyli do
	 * pierwszej zmiany, o której nikt nie pomyśli.
	 */
	color: var(--dm-pasek-tekst);
	text-align: center;
	transition: opacity 520ms ease, transform 520ms ease;
}

.dm-pasek.is-znika .dm-pasek__tresc {
	opacity: 0;
	transform: translateY(-6px);
}

/* ---------------------------------------------------------------------
   NAGŁÓWEK, CZĘŚĆ WSPÓLNA
   --------------------------------------------------------------------- */

/*
 * WYŚCIÓŁKA NAGŁÓWKA MA NAZWĘ, BO CZYTA JĄ TAKŻE MENU ROZWIJANE.
 *
 * Panel podmenu musi zaczynać się dokładnie pod dolną kreską nagłówka,
 * a od dołu pozycji menu dzieli go właśnie ta wyściółka. Wpisana drugi
 * raz jako liczba rozjechałaby się przy pierwszej zmianie wysokości
 * paska - i to po cichu, bo nic by się nie zepsuło, tylko panel
 * przeciąłby kreskę.
 */
.dm-naglowek {
	--dm-naglowek-wysciolka: 1rem;

	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--dm-biel);
	border-bottom: 1px solid var(--dm-ramka-naglowka);
}

.dm-naglowek__siatka {
	display: grid;
	align-items: center;
	gap: clamp(1.4rem, 2.4vw, 3.2rem);
	/*
	 * Wyściółka zeszła z 1.2 na 1 rem razem z powiększeniem logo
	 * (27.08.2026), żeby pasek nie urósł ponad przewidziane 88 px.
	 */
	padding-block: var(--dm-naglowek-wysciolka, 1rem);
	transition: padding-block 260ms ease;
}

/*
 * JEDEN WIERSZ: LOGO, MENU, IKONY.
 *
 * Przebudowa z 27.08.2026. Wcześniej nagłówek sklepu miał dwa wiersze -
 * górny z logo i rozciągniętą wyszukiwarką, dolny z menu kategorii -
 * i zajmował 126 px ekranu. Teraz wszystko mieści się w jednym rzędzie,
 * a wyszukiwanie jest ikoną obok konta i koszyka.
 *
 * Oba nagłówki, sklepowy i fotograficzny, mają ten sam układ kolumn:
 * logo trzyma swoją szerokość, menu bierze środek, ikony siadają
 * po prawej.
 */
.dm-naglowek--sklep .dm-naglowek__siatka,
.dm-naglowek__siatka--foto {
	grid-template-columns: auto 1fr auto;
	gap: clamp(1.6rem, 3vw, 4rem);
}

/*
 * NAGŁÓWEK SIĘ NIE ZWĘŻA PO PRZEWINIĘCIU.
 *
 * Do 27.08.2026 logo schodziło przy przewijaniu z 74 do 54 px razem
 * z wyściółką. Zamiar był oszczędnościowy, ale w praktyce logo skakało
 * w trakcie czytania strony i wyglądało to na usterkę. Przy jednym
 * wierszu nie ma już czego oszczędzać - pasek ma około 94 px i tyle
 * zostaje.
 *
 * Klasa `is-wezszy` nadal jest dokładana przez skrypt i steruje cieniem
 * pod nagłówkiem. Nie ruszaj jej - to jedyny sygnał, że strona jest
 * przewinięta.
 */
.dm-naglowek.is-wezszy {
	box-shadow: 0 2px 18px var(--dm-cien-cieply-a7);
}

.dm-logo {
	display: block;
	line-height: 0;
}

/*
 * WIELKOŚĆ LOGO - 27.08.2026.
 *
 * Było 62 px w spoczynku i 46 px po zwężeniu (za projektem). W logo
 * Dobrych Momentów napis „Patrycja Tamecka” jest bardzo drobny i przy
 * 62 px robił się nieczytelną kreską - a to jedyne miejsce na stronie,
 * gdzie pada nazwisko właścicielki.
 *
 * Teraz 74 px i 54 px. Miejsce wzięło się ze skrócenia wyszukiwarki,
 * nie z podniesienia paska: wyściółka zeszła o 2 px z każdej strony,
 * więc pasek ma około 94 px w spoczynku i 66 px po zwężeniu.
 *
 * Ta sama reguła obsługuje OBA nagłówki - sklepowy i fotograficzny.
 *
 * SELEKTOR MA DWIE KLASY I TO NIE JEST OZDOBNIK.
 *
 * To była przyczyna zgłoszenia „na podstronie kategorii logo robi się
 * nagle bardzo duże" (27.08.2026). Arkusz sklepu ma regułę
 * `.woocommerce img, .woocommerce-page img { height: auto }` - dwie
 * klasy i znacznik, czyli waga wyższa niż samo `.dm-logo__obraz`.
 * Na stronach, którym sklep dokłada do `body` klasę `woocommerce-page`
 * - kategoria, karta produktu, koszyk, kasa - wygrywał sklep i logo
 * wracało do naturalnej wielkości pliku, czyli 300 x 206 px.
 *
 * Na stronie głównej sklepu tej klasy nie ma, więc tam wszystko
 * wyglądało dobrze i różnica pokazywała się dopiero po kliknięciu
 * w kategorię.
 *
 * `.dm-logo .dm-logo__obraz` to dwie klasy - wygrywa. NIE UPRASZCZAJ
 * tego z powrotem do jednej i nie sięgaj po `!important`.
 */
.dm-logo .dm-logo__obraz {
	height: 7.4rem;
	width: auto;
	display: block;
	transition: height 260ms ease;

	/*
	 * Logo ma białe tło własne. Mieszanie z podłożem usuwa je bez
	 * przerabiania pliku - zadziała dopóki tło pod logo jest jasne.
	 * Docelowo plik z przezroczystością zdejmuje potrzebę tej reguły.
	 */
	mix-blend-mode: multiply;
}

/*
 * Logo NIE zmienia wysokości po przewinięciu - patrz komentarz przy
 * `.dm-naglowek.is-wezszy` wyżej.
 */

.dm-logo__napis {
	font-family: var(--dm-pismo-tyt);
	font-size: 2.6rem;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------
   WYSZUKIWARKA

   Pasek rozwijany spod nagłówka, a nie pole w jego środku.
   Otwiera go ikona lupy stojąca obok konta i koszyka.

   BEZ SKRYPTU PASEK JEST WIDOCZNY. Chowa go dopiero skrypt, przy
   starcie strony - dzięki temu wyszukiwarka działa także wtedy, gdy
   JavaScript nie dojedzie. Reguła `display: none` w arkuszu ukryłaby
   ją na zawsze.
   --------------------------------------------------------------------- */

.dm-szukajka-panel {
	border-top: 1px solid var(--dm-ramka-naglowka);
	background: var(--dm-tlo-jasne);
	padding-block: 1.6rem;
}

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

.dm-akcja--szukaj {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	/*
	 * Ikona-przycisk nie ma się dawać zaznaczyć palcem - inaczej
	 * przeglądarka rysuje pod napisem niebieskie tło zaznaczenia
	 * i wygląda to jak usterka.
	 */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.dm-szukajka {
	display: flex;
	align-items: center;
	gap: .8rem;
	border: 1px solid var(--dm-ramka-pole);
	border-radius: var(--dm-r-pigula);
	padding: 0 .5rem 0 1.6rem;
	background: var(--dm-tlo-jasne);
	transition: border-color 150ms;
}

/*
 * Kontur pola po kliknięciu ma być ledwie widoczny.
 *
 * PUŁAPKA, KTÓRA KOSZTOWAŁA DWA PODEJŚCIA: pierwsza wersja tej reguły
 * sięgała po zmienną, której w palecie NIE MA. Nieznana zmienna nie
 * unieważnia deklaracji - ustawia wartość początkową, a dla koloru
 * ramki jest nią `currentColor`, czyli kolor tekstu. Zamiast delikatnego
 * konturu wychodził więc najciemniejszy możliwy.
 *
 * Wniosek szerszy: `var()` z literówką w nazwie NIE zachowuje się jak
 * brak reguły. Nazwę zmiennej sprawdzaj w palecie, zanim jej użyjesz.
 */
.dm-szukajka:focus-within {
	border-color: var(--dm-ramka-pole-aktywna, #C9BB9F);
}

.dm-szukajka__ikona {
	flex: 0 0 auto;
	display: flex;
	color: var(--dm-tekst-slaby);
}

.dm-szukajka__pole {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-maly);
	padding: 1.2rem .4rem;
	color: var(--dm-tekst);
}

.dm-szukajka__wyslij {
	flex: 0 0 auto;
	border: 0;
	background: var(--dm-tekst);
	color: var(--dm-tekst-jasny);
	font-family: var(--dm-pismo);
	font-size: var(--dm-txt-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 1rem 2rem;
	border-radius: var(--dm-r-pigula);
	cursor: pointer;
	transition: background-color var(--dm-btn-czas);
}

.dm-szukajka__wyslij:hover {
	background: var(--dm-grafit);
}

/* ---------------------------------------------------------------------
   IKONY SPOŁECZNOŚCIOWE I AKCJE
   --------------------------------------------------------------------- */

.dm-spolecznosciowe {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.2rem;
}

.dm-spolecznosciowe__ikona {
	width: 3.4rem;
	height: 3.4rem;
	border-radius: var(--dm-r-pigula);
	border: 1px solid var(--dm-ramka-4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dm-tekst-ciemny);
	transition: background-color 200ms, color 200ms;
}

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

.dm-naglowek__akcje {
	display: flex;
	align-items: center;
	gap: clamp(1.4rem, 2vw, 2.6rem);
}

/*
 * Podpisy pod ikonami nagłówka: „Szukaj", „Konto", „Koszyk".
 *
 * O punkt większe niż metki (1,2rem zamiast 1,1rem). Przy jedenastu
 * pikselach napis czyta się jak przypis, a to są trzy główne wejścia
 * w prawym rogu strony.
 */
.dm-akcja {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	font-size: var(--dm-txt-label);
	line-height: 1.3;
	color: var(--dm-tekst);
}

.dm-koszyk__licznik {
	position: absolute;
	top: var(--dm-licznik-y);
	right: var(--dm-licznik-x);
	/* Licznik koszyka: akcent zamiast rozu z teczy. */
	background: var(--dm-akcent);
	color: var(--dm-tekst-jasny);
	font-size: 1rem;
	line-height: 1;
	min-width: 1.7rem;
	height: 1.7rem;
	border-radius: var(--dm-r-pigula);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 .4rem;
}

/* ---------------------------------------------------------------------
   MENU
   --------------------------------------------------------------------- */

/*
 * Menu nie ma już kreski nad sobą.
 *
 * Kreska miała sens, gdy menu stało w OSOBNYM wierszu pod logo -
 * oddzielała dwa pasy nagłówka. Po przebudowie na jeden wiersz
 * rysowała poziomą linię w połowie wysokości nagłówka i wyglądała
 * jak przypadkowy element. W gałęzi fotograficznej, gdzie menu było
 * w jednym wierszu od początku, ta kreska była tam od zawsze -
 * to ona jest „dziwną szarą kreską" ze zgłoszenia z 27.08.2026.
 */
.dm-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	font-size: var(--dm-txt-menu);
	letter-spacing: .06em;
}

.dm-menu--srodek {
	justify-content: center;
	border: 0;
}

/* Menu bierze środek nagłówka, między logo a ikonami. */
.dm-naglowek--sklep .dm-naglowek__menu .dm-menu {
	justify-content: center;
}

.dm-menu a {
	display: block;
	padding: 1.2rem 1.4rem 1rem;
	border-bottom: 2px solid transparent;
	transition: border-color 200ms, color 200ms;
}

.dm-menu a:hover {
	border-bottom-color: var(--dm-ramka-pole);
}

.dm-menu .current-menu-item > a,
.dm-menu .current_page_item > a,
.dm-menu .current-menu-parent > a,
.dm-menu .current-product-ancestor > a {
	border-bottom-color: var(--dm-akcent);
}

/*
 * Pozycja „Wyprzedaż” dostaje kolor akcentu przez klasę wpisaną
 * w ustawieniach menu (`dm-wyprzedaz`), a nie przez dopasowanie
 * po nazwie. Nazwa jest treścią i wolno ją zmienić bez uprzedzenia.
 */
.dm-menu .dm-wyprzedaz > a {
	color: var(--dm-wyprzedaz);
}

.dm-menu .dm-druga-galaz > a {
	color: var(--dm-tekst-3);
}

/* ---------------------------------------------------------------------
   MENU ROZWIJANE

   Rozwija się na najechanie ORAZ na `:focus-within`. Sama reguła
   `:hover` odcięłaby od podmenu klawiaturę i czytnik ekranu, a przy
   dotyku pierwsze puknięcie w pozycję nadrzędną i tak przenosi na jej
   stronę - podmenu jest wtedy skrótem, nie jedyną drogą.

   Podmenu ma własną warstwę i `padding-top` na pojemniku, żeby przejście
   myszą z pozycji nadrzędnej na pierwszą podrzędną nie prowadziło przez
   szczelinę, w której lista się zamyka.
   --------------------------------------------------------------------- */

/*
 * POZYCJE MENU SIĘGAJĄ CAŁEJ WYSOKOŚCI PASKA.
 *
 * Nie dla wyglądu - napis zostaje tam, gdzie był, bo środkuje go
 * `align-items`. Chodzi o punkt zaczepienia: `top: 100%` panelu liczy
 * się od DOŁU pozycji, więc póki pozycja miała samą wysokość napisu,
 * panel zaczynał się 25 px nad kreską nagłówka i ją przecinał.
 */
.dm-naglowek--sklep .dm-naglowek__menu,
.dm-naglowek__menu--foto {
	align-self: stretch;
}

.dm-naglowek--sklep .dm-naglowek__menu .dm-menu,
.dm-naglowek__menu--foto .dm-menu {
	height: 100%;
}

.dm-menu > li {
	display: flex;
	align-items: center;
}

.dm-menu .menu-item-has-children {
	position: relative;
}

.dm-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	margin-left: .6em;
	vertical-align: .12em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-.1em);
	transition: transform 200ms;
}

.dm-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: .6rem 0;
	position: absolute;
	top: calc(100% + var(--dm-naglowek-wysciolka, 1rem));
	left: 50%;
	transform: translateX(-50%);
	min-width: 22rem;
	/*
	 * TŁO MUSI BYĆ NIEPRZEZROCZYSTE - panel wisi nad banerem ze zdjęciem.
	 *
	 * Stało tu `var(--dm-tlo)`, a taki token NIE ISTNIEJE w palecie tej
	 * strony. Nieznana zmienna nie daje błędu: przeglądarka odrzuca CAŁĄ
	 * deklarację i tło zostaje przezroczyste. Na białym kawałku strony
	 * wygląda to poprawnie, a nad zdjęciem napisy robią się nieczytelne -
	 * i tak to wyszło na banerze.
	 *
	 * Biel, nie `--dm-tlo-jasne`: panel jest przedłużeniem białego paska
	 * nagłówka i ma czytać się jak jedna płaszczyzna, a nie jak nieco
	 * inny prostokąt doklejony pod spodem.
	 *
	 * Wartość zapasowa w `var()` jest tu celowo - żeby literówka w nazwie
	 * tokena nigdy więcej nie skończyła się przezroczystym tłem.
	 */
	background: var(--dm-biel, #FFFFFF);
	border: 1px solid var(--dm-ramka-pole, #E4DCCC);
	box-shadow: 0 1.2rem 3.2rem var(--dm-tekst-a12);
	z-index: 40;
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms;
}

/*
 * PRZEZROCZYSTY MOSTEK NAD PANELEM.
 *
 * Panel odsunął się od napisu o wyściółkę nagłówka, więc mysz w drodze
 * w dół przechodzi przez pas, który nie należy ani do pozycji, ani do
 * panelu - i menu zamykało się w połowie ruchu. Mostek jest w środku
 * panelu, czyli w środku pozycji, więc najechanie na niego liczy się
 * jako najechanie na nią.
 */
.dm-menu .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--dm-naglowek-wysciolka, 1rem);
}

.dm-menu .menu-item-has-children:hover > .sub-menu,
.dm-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.dm-menu .sub-menu a {
	padding: .9rem 1.8rem;
	border-bottom: 0;
	white-space: nowrap;
	text-align: left;
}

.dm-menu .sub-menu a:hover,
.dm-menu .sub-menu a:focus-visible {
	border-bottom: 0;
	color: var(--dm-akcent);
}

.dm-menu--zastepcze a {
	font-weight: 400;
}

.dm-menu__brak {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	padding: 1rem 1.4rem;
}

/* ---------------------------------------------------------------------
   MENU NA TELEFONIE
   --------------------------------------------------------------------- */

.dm-hamburger {
	display: none;
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--dm-ramka-pole);
	border-radius: var(--dm-r-pigula);
	background: none;
	cursor: pointer;
	position: relative;
}

.dm-hamburger span[aria-hidden] {
	position: absolute;
	inset: 50% 1rem auto;
	height: 1px;
	background: var(--dm-tekst);
}

.dm-hamburger span[aria-hidden]::before,
.dm-hamburger span[aria-hidden]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--dm-tekst);
}

.dm-hamburger span[aria-hidden]::before { top: -6px; }
.dm-hamburger span[aria-hidden]::after  { top: 6px; }

@media (max-width: 60em) {

	.dm-hamburger {
		display: block;
	}

	.dm-naglowek--sklep .dm-naglowek__siatka {
		grid-template-columns: auto 1fr auto;
	}

	/*
	 * Menu schodzi pod pasek i otwiera je hamburger. Zajmuje wtedy
	 * całą szerokość siatki, a nie środkową kolumnę - inaczej pozycje
	 * ustawiłyby się w wąskim słupku pośrodku ekranu.
	 */
	.dm-naglowek__menu {
		display: none;
		grid-column: 1 / -1;
	}

	.dm-naglowek.is-menu-otwarte .dm-naglowek__menu {
		display: block;
	}

	/*
	 * Napisy pod ikonami znikają, zostają same ikony - przy czterech
	 * pozycjach w rzędzie nie ma miejsca na podpisy.
	 */
	.dm-naglowek__akcje {
		gap: 1.6rem;
	}

	.dm-naglowek.is-menu-otwarte .dm-menu {
		flex-direction: column;
		gap: 0;
		padding-block: 1rem;
		height: auto;
	}

	/*
	 * Rozciąganie pozycji do wysokości paska jest po to, żeby panel
	 * podmenu zaczepiał się o kreskę nagłówka. Na telefonie panelu nie
	 * ma - podmenu stoi otwarte w kolumnie - a pozycja jako pojemnik
	 * zwijający ścisnęłaby odnośnik do szerokości napisu i kreska pod
	 * nim urwałaby się w połowie ekranu.
	 */
	.dm-naglowek.is-menu-otwarte .dm-menu > li {
		display: block;
	}

	.dm-naglowek.is-menu-otwarte .dm-menu .sub-menu::before {
		content: none;
	}

	.dm-naglowek.is-menu-otwarte .dm-menu a {
		padding: 1.4rem 0;
		border-bottom: 1px solid var(--dm-linia-menu);
	}

	/*
	 * NA TELEFONIE PODMENU STOI OTWARTE, WCIĘTE POD SWOJĄ POZYCJĄ.
	 *
	 * Rozwijanie na najechanie nie istnieje przy dotyku, a drugi poziom
	 * chowany za pukaniem kazałby zgadywać, że w ogóle tam jest. Menu jest
	 * krótkie, więc dwie dodatkowe pozycje niczego nie wydłużają nadmiernie.
	 */
	.dm-naglowek.is-menu-otwarte .dm-menu .sub-menu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0 1.8rem;
	}

	.dm-naglowek.is-menu-otwarte .dm-menu .menu-item-has-children > a::after {
		display: none;
	}

	.dm-naglowek--foto .dm-naglowek__menu--foto {
		grid-column: 1 / -1;
	}

	.dm-naglowek--foto .dm-btn {
		display: none;
	}

	.dm-akcja span:not(.dm-koszyk__licznik) {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   TELEFON: POPRAWKI Z PRZEGLĄDU PRZY 390 px
   --------------------------------------------------------------------- */

@media (max-width: 60em) {

	/*
	 * OTWARTE MENU NIE MOŻE ZRZUCAĆ IKON NA DÓŁ EKRANU.
	 *
	 * Siatka układa elementy w kolejności kodu, a menu rozciąga się
	 * wtedy na całą szerokość - więc ikony i sam hamburger lądowały
	 * w wierszu POD listą pozycji, prawie pół ekranu niżej. Przycisk,
	 * który się właśnie dotknęło, uciekał spod palca.
	 *
	 * `order` decyduje o kolejności układania i nie rusza kodu strony,
	 * czyli kolejności czytania przez czytnik ekranu.
	 */
	.dm-naglowek.is-menu-otwarte .dm-naglowek__menu,
	.dm-naglowek.is-menu-otwarte .dm-naglowek__menu--foto {
		order: 9;
	}

	/*
	 * Obszar dotyku ikon nagłówka.
	 *
	 * Sama ikona ma 19 px - na ekranie dotykowym to za mało, przeciętny
	 * palec zakrywa czterdzieści. Powiększamy sam obszar reagujący
	 * wyściółką, a ujemny margines cofa to, co dołożyliśmy: ikony stoją
	 * dokładnie tam, gdzie stały, i nie rozpychają paska.
	 */
	.dm-akcja {
		padding: 1.2rem;
		margin: -1.2rem;
	}

	.dm-naglowek__akcje {
		gap: 2.4rem;
	}

	/*
	 * Pasek nad nagłówkiem: przy podstawie 9 px napis schodził do 10,4 px,
	 * czyli poniżej progu czytelności. Podnosimy go tylko na telefonie -
	 * na szerokim ekranie skala jest inna i tam wygląda poprawnie.
	 */
	.dm-pasek__tresc {
		font-size: var(--dm-txt-label); /* od 30.09.2026 skala etykiet (14 px na telefonie) */
	}
}

/* ---------------------------------------------------------------------
   TELEFON: PROFILE W MENU, HAMBURGER PRZY PRAWEJ, IKONY PEŁNEJ WIELKOŚCI
   (od 16.09.2026)
   --------------------------------------------------------------------- */

/* Blok profili w menu istnieje tylko na telefonie. */
.dm-menu-profile {
	display: none;
}

@media (max-width: 60em) {

	/*
	 * Profile znikają z paska - są na dole rozwiniętego menu.
	 * Pasek na telefonie to logo, ikony sklepu i hamburger.
	 */
	.dm-naglowek__akcje .dm-akcja--profil {
		display: none;
	}

	/*
	 * AKCJE ZAWSZE W OSTATNIEJ KOLUMNIE, DOSUNIĘTE DO PRAWEJ.
	 *
	 * Menu jest na telefonie ukryte, więc siatka wkładała akcje w pustą
	 * środkową kolumnę `1fr` - i hamburger stał zaraz za logo zamiast
	 * przy prawej krawędzi.
	 */
	.dm-naglowek__akcje {
		grid-column: -2 / -1;
		grid-row: 1;
		justify-self: end;
	}

	/*
	 * IKONY SIĘ NIE ŚCISKAJĄ.
	 *
	 * Przy pięciu pozycjach w rzędzie flex zmniejszał same rysunki -
	 * z 19 do 10 px - zamiast zostawić je w spokoju. Rysunek i hamburger
	 * trzymają swoją wielkość.
	 */
	.dm-akcja svg,
	.dm-hamburger {
		flex-shrink: 0;
	}

	.dm-naglowek.is-menu-otwarte .dm-menu-profile {
		display: flex;
		gap: 2.4rem;
		margin: 0;
		padding: 1.6rem 0 2rem;
		list-style: none;
	}

	.dm-menu-profile a {
		display: inline-flex;
		align-items: center;
		gap: .8rem;
		color: var(--dm-tekst);
		font-size: var(--dm-txt-akapit);
	}

	.dm-menu-profile svg {
		flex-shrink: 0;
	}
}

/*
 * PROFILE W PASKU BEZ PODPISÓW - od 16.09.2026.
 *
 * Ikona Instagrama i Facebooka mówi sama za siebie; podpis zostaje
 * tylko dla czytnika ekranu. Podpisy „Szukaj", „Konto", „Koszyk"
 * zostają widoczne.
 */
.dm-naglowek__akcje .dm-akcja--profil span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}