/* =====================================================================
   Mendopauza — arkusz motywu.

   Nowy styl (14.09.2026): projekt strony głównej od zamawiającego
   (zasoby/projekt-nowy-styl/projekt-strony-glownej.jpeg) — spokojny,
   redakcyjny: ciepła kość słoniowa, antykwa w nagłówkach pisanych zdaniem
   (nie wersalikami), cienka czerwona kreska pod nagłówkiem, humanistyczny
   grotesk w tekście, ciemna pigułka z rozstrzelonymi wersalikami jako
   główny przycisk, włoskowate linie zamiast grubych ramek.

   Nazwy tokenów zostały z poprzedniej wersji (pakiet design/), zmieniły się
   wartości — dzięki temu tysiące reguł poszły za paletą same. Tam, gdzie
   rola tokenu się zmieniła, mówi o tym komentarz w :root.
   ===================================================================== */

:root {
	/*
	 * Paleta. Wartości próbkowane z JPEG-a projektu i wyrównane (kompresja
	 * rozmywa 2-pikselową kreskę i przesuwa barwy o kilka poziomów).
	 * Kontrasty policzone wzorem WCAG 2.2 (skrypt ../srodowisko/narzedzia/kontrast.mjs).
	 */
	--paper:  #F7F2EC;   /* tło strony — sekcja „To nie jest poradnik." */
	--paper2: #FBF8F4;   /* jaśniejsza powierzchnia: karty, panel, menu mobilne */
	--sand:   #EFE7DC;   /* ciemniejszy pas: stopka, nagłówki tabel — ton tła zdjęcia w hero */
	--ink:    #1C1815;   /* nagłówki i tekst mocny — 15,84:1 na --paper, 14,39:1 na --sand */
	--btn:    #24201D;   /* wypełnienie głównego przycisku; --paper na nim 14,52:1 */

	/*
	 * --accent zmienił ROLĘ. Był ceglastym wypełnieniem przycisków i kolorem cen;
	 * teraz to czerwień kreski pod nagłówkami — ozdoba, kropki list, znacznik
	 * bieżącej pozycji menu. Na --paper 4,18:1, na bieli 4,65:1: wystarcza dla
	 * grafiki i dużego tekstu (próg 3:1), NIE dla drobnego tekstu —
	 * od tego jest --accent-text.
	 */
	--accent:      #B5585C;
	--accent-text: #9E4249;   /* 5,67:1 --paper · 5,96:1 --paper2 · 5,15:1 --sand · 6,31:1 biel · 5,38:1 --err-bg */
	--accent-on-dark: #D9A4A8; /* akcent na ciemnym tle (--ink / --btn): 8,25:1 / 7,56:1 */

	--muted:  #6B6159;   /* drobny tekst: 5,42:1 --paper · 5,70:1 --paper2 · 4,92:1 --sand · 6,04:1 biel · 5,15:1 --err-bg · 5,21:1 --ok-bg */
	--line:   #D5CFC9;   /* linia włoskowata (projekt: podział hero / sekcja) — tylko struktura, nie granica kontrolki */
	/*
	 * Granica kontrolki (pole, checkbox, przycisk „ghost", stepper) musi mieć
	 * 3:1 wobec tła (WCAG 1.4.11). --line ma 1,39:1 — dobra jako podział
	 * treści, za słaba, żeby po niej rozpoznać pole formularza.
	 */
	--line-ui: #847A71;  /* 4,20:1 biel · 3,77:1 --paper · 3,96:1 --paper2 · 3,42:1 --sand */
	--body:   #2B2724;   /* tekst ciągły: 13,30:1 --paper */
	--dim:    #B9AFA6;   /* drobny tekst na ciemnym tle: 7,50:1 --btn, 8,18:1 --ink */

	--ok:     #3F6B4E;
	--ok-text: #3F6B4E;  /* 5,51:1 --paper · 5,30:1 --ok-bg · 6,13:1 biel */
	--ok-bg:  #EAF0E9;

	/* Błąd ma własny token. Dotąd nosił go --accent (cegła), a skoro akcent
	   jest teraz ozdobą, błąd nie może wyglądać jak kreska pod nagłówkiem. */
	--err:    #A3353A;   /* 6,03:1 --paper · 5,73:1 --err-bg · 6,71:1 biel */
	--err-bg: #F8EAE7;

	/*
	 * Pierścień fokusa: przygaszona czerwień, nie --ink. Obramowania przycisków
	 * „outline" i zaznaczonych kafli są w nowym stylu ciemne — czarny pierścień
	 * wyglądałby jak druga ramka. 5,67:1 na --paper, 5,15:1 na --sand (próg 3:1).
	 * Na ciemnym tle zamienia go --paper (15,84:1 wobec --ink).
	 */
	--focus:  var(--accent-text);

	/*
	 * Kroje (bin/fonts.sh). Dobór: wycinki H1, leadu i przycisku z projektu
	 * porównane pikselowo z 18 antykwami i 8 groteskami Google Fonts po
	 * dopasowaniu wysokości wydłużeń, szerokości wiersza i linii bazowej.
	 * Libre Caslon Text miała najmniejszą różnicę z krojów dostępnych
	 * (7 323 px; EB Garamond 8 720, Newsreader 8 290, Crimson Pro 9 080),
	 * identyczną wysokość x (31 px wobec 31 px w projekcie) i zbliżone
	 * pokrycie tuszem (1,08). Lato — najmniejsza różnica w leadzie (1 161 px;
	 * Source Sans 3 1 196, Open Sans 1 214, Nunito Sans 1 363, Karla 1 753).
	 *
	 * Antykwa ma JEDNĄ grubość (400): --fw-display nie może rosnąć, inaczej
	 * przeglądarka dorysuje sztuczne pogrubienie.
	 */
	--font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
	--font-body:    Lato, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-ui:      var(--font-body);
	--fw-display:   400;
	--fw-ui:        700;

	/*
	 * Skala. Zmierzona w JPEG-u projektu (1586 px szerokości) skryptem
	 * ../srodowisko/narzedzia/wiersze.mjs — wysokość x, szerokość wiersza
	 * i rozstaw linii bazowych, przeliczone na metryki naszych krojów
	 * (Libre Caslon Text: wysokość x 0,53 em; Lato: wersalik 0,717 em):
	 *   H1 hero: x 31 px, wiersz „O menopauzie bez lukru," 642 px, linie co 68 px → 58,5 px
	 *   H2 „To nie jest poradnik.": x 24 px, 424 px                              → 46 px
	 *   lead: wiersze 488/385/295 px, co 30,5 px                                 → 22 px
	 *   akapity pod H2: wiersz 1326 px, tusz 18 px                                → 19,5 px
	 * vw dobrane tak, żeby przy 1586 px wypadła wartość z projektu; w komentarzu
	 * wartość przy 1440 px.
	 */
	--fs-display: clamp(34px, 3.69vw, 60px);   /* hero, 53 px (1586: 58,5) */
	--fs-h1:      clamp(34px, 3.6vw, 54px);    /* tytuł podstrony, 52 px */
	--fs-h2:      clamp(30px, 2.9vw, 46px);    /* nagłówek sekcji, 41,8 px (1586: 46) */
	--fs-h3:      clamp(22px, 2vw, 28px);
	--fs-lead:    clamp(17px, 1.39vw, 22px);   /* lead w hero, 20 px (1586: 22) */
	--fs-body:    16px;
	--fs-prose:   clamp(17px, 1.23vw, 19.5px); /* akapity „To nie jest poradnik.", 17,7 px (1586: 19,5) */
	--fs-caps:    12.5px;                      /* wersaliki etykiet i przycisków */

	--ls-display: -0.02em;   /* projekt ma ciasny zecer nagłówków */
	--ls-caps:    0.16em;    /* rozstrzał wersalików przycisku z projektu */

	/* Czerwona kreska pod nagłówkiem: zmierzone 50 × 2 px przy 1586 px
	   (pod H1 i pod H2 ta sama — kreska nie rośnie z nagłówkiem). */
	--rule-w: clamp(40px, 3.15vw, 50px);
	--rule-h: 2px;

	/*
	 * Kontenery.
	 *
	 * Projekt zakładał trzy szerokości: 880 (wąska kolumna czytelnicza),
	 * 1120 (sklep) i 1180 (strony marketingowe). Działało to, dopóki sklep
	 * miał WŁASNY nagłówek i stopkę — każda część była wtedy spójna sama
	 * w sobie. Po ujednoliceniu ramy różnica stała się widoczna jako skok:
	 * przy 1440px logo i treść stały na 170px na landingu i na 196px
	 * w sklepie, więc przejście „strona główna → sklep" przesuwało całą
	 * kolumnę o 26px.
	 *
	 * Serwis ma jeden kręgosłup: --w-page. --w-shop zostaje jako alias,
	 * bo nazwa czyta się lepiej w regułach sklepu, ale wartość jest ta sama.
	 * --w-wide to linia włoskowata z projektu, która sięga niemal krawędzi
	 * okna (46 px od brzegu przy 1586 px), szerzej niż treść.
	 */
	--w-narrow: 880px;
	--w-page:   1180px;
	--w-shop:   var(--w-page);
	--w-wide:   1500px;

	--pad-x: clamp(18px, 4vw, 40px);
	--pad-y: clamp(36px, 7vw, 92px);

	/* Promienie: pigułka zostaje (przycisk z projektu), reszta prawie prosta —
	   w redakcyjnym układzie zaokrąglona karta czyta się jak aplikacja. */
	--r-pill: 999px;
	--r-card: 4px;
	--r-block: 3px;
	--r-cover: 2px;
	--r-field: 3px;

	/* Cienie tylko pod obiektami fotograficznymi — miękkie i krótkie.
	   Kontener interfejsu cienia nie dostaje (stan mówi krawędź). */
	--sh-cover-xl: 0 40px 70px -40px rgba(28, 24, 21, 0.32);
	--sh-cover:    0 26px 46px -30px rgba(28, 24, 21, 0.34);
	--sh-thumb:    0 10px 20px -14px rgba(28, 24, 21, 0.32);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* Skok skip-linku i linków „błąd → pole” lądował pod przyklejonym stosem
   nagłówka. Jedno scroll-padding naprawia wszystkie kotwice naraz. */
html { scroll-padding-top: 124px; }
@media (max-width: 600px) { html { scroll-padding-top: 160px; } }

*, *::before, *::after { box-sizing: border-box; }

/*
 * Atrybut `hidden` musi wygrywać z układem.
 *
 * Przeglądarka daje mu tylko `display: none` z arkusza domyślnego, więc każda
 * własna reguła w rodzaju `display: flex` na tym samym elemencie go przebija —
 * i element zostaje na ekranie mimo `hidden`. Tak właśnie „chowały się" pola
 * faktury w kasie i zwinięte akapity opisów.
 */
[hidden] { display: none !important; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;

	/* Bez tego na krótkich stronach (koszyk z jedną pozycją, pusty koszyk)
	   stopka kończyła się tam, gdzie kończy się treść: zmierzone na /koszyk
	   przy 1440×900 dolna krawędź stopki na 673,9px, czyli 226px gołego
	   --paper pod spodem. */
	min-height: 100vh;   /* zapas dla przeglądarek bez dvh */
	min-height: 100dvh;  /* pasek adresu na telefonie nie tnie wysokości */
	display: flex;
	flex-direction: column;
}
.mp-content { flex: 1 0 auto; }
.mp-footer  { flex: none; }

/* Pasek administratora WP jest fixed i zostaje poza układem, ale <html>
   dostaje od niego margin-top — bez korekty zalogowana autorka dostaje
   32px zbędnego przewijania na każdej krótkiej stronie. */
body.admin-bar { min-height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar { min-height: calc(100dvh - 46px); }
}

img { max-width: 100%; height: auto; }

a { color: var(--accent-text); text-decoration: none; }

/* Link w zdaniu musi różnić się od sąsiedniego tekstu czymś więcej niż barwą.
   --accent-text wobec --body to 2,35:1 — dla osoby nierozróżniającej czerwieni
   te dwa kolory są nie do odróżnienia, a WCAG 1.4.1 mówi wprost, że kolor nie
   może być jedynym nośnikiem informacji. Lighthouse tego nie audytuje.

   Podkreślamy WYŁĄCZNIE linki w tekście ciągłym. Nawigacja, przyciski, pigułki
   i pozycje stopki są rozpoznawalne przez kształt i położenie — tam podkreślenie
   byłoby szumem. */
.mp-prose a,
.mp-terms a,
.mp-contact__more a,
.mp-next p a,
.mp-psec__body a,
.mp-downloads__note a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
a:hover { color: var(--ink); }

button, input, select, textarea { font: inherit; }

/* Nagłówki: antykwa, zdaniem, bez wersalików i bez pogrubienia — tak piszą
   się oba nagłówki projektu. Interlinia 1,15, bo antykwa pisana zdaniem
   ma wydłużenia dolne (wersaliki Bricolage stały na 0,84). */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	line-height: 1.15;
	letter-spacing: -0.01em;
	/* Bez color: kolor dziedziczy się z body (--ink) — jawny --ink zgaszał
	   tytuł w ciemnej karcie fragmentu (--ink na --btn, 1,09:1). */
	margin: 0;
}

p { margin: 0; }

/* Tytuł „Nie jestem niemiła. To menopauza" łamał się z sierotą — ostatni
   wiersz to samo słowo „menopauza", przy pierwszym wypełnionym w ~95%.
   Dziedziczone z body `text-wrap: pretty` tego nie ratuje: pilnuje tylko
   ostatniego wiersza dłuższego akapitu. `balance` przenosi złamanie
   na granicę zdania. Liczba wierszy się nie zmienia, więc wysokości bloków
   zostają.

   Świadomie POMINIĘTE: .mp-ecard__title („Cały ten burdel (ebook)" łamie się
   dziś na granicy tytuł | dopisek formatu; balance rozerwałby tytuł książki),
   .mp-shop__title i .mp-page-title (treść jednowyrazowa). */
.mp-feature__title,
.mp-product__title,
.mp-cart__name,
.mp-panel__name,
.mp-heading {
	text-wrap: balance;
}

/* Jeden pierścień dla całego serwisu. Offset 3 px zostawia szczelinę tła
   między pierścieniem a ciemną pigułką, więc pierścień nie zlewa się
   z wypełnieniem przycisku ani przy hoverze (tło przycisku przechodzi
   wtedy w ten sam odcień czerwieni). */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

/* Link „Przejdź do treści" to ciemna pigułka na jasnym pasku nagłówka —
   pierścień w --paper leżał na --paper (1:1) i był niewidoczny. Wspólne
   --focus ma 5,67:1 do tła paska, a szczelina 3 px oddziela go od pigułki. */

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

.mp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--btn);
	color: var(--paper);
	padding: 12px 20px;
	border-radius: 0 0 var(--r-block) 0;
}
.mp-skip:focus { left: 0; color: var(--paper); }

/* ---------------------------------------------------------------------
   Typografia wspólna: nagłówek sekcji z kreską, lead, linia włoskowata

   Projekt ma dwa nagłówki i oba są zbudowane tak samo: antykwa pisana
   zdaniem, wyśrodkowana, pod nią krótka czerwona kreska, pod kreską
   wyśrodkowany lead groteskiem. Te klasy składają ten wzór z dowolnego
   elementu, żeby kolejne strony nie przepisywały go na nowo.

     <h2 class="mp-heading mp-heading--center mp-ruled">To nie jest poradnik.</h2>
     <p class="mp-lead mp-intro">…</p>

   Kreska jest ::after nagłówka, a nie osobnym <hr>: to ozdoba, nie podział
   treści, więc nie może trafić do drzewa dostępności jako separator.
   Dla układów, w których kreska musi stać osobno (np. między dwoma
   elementami siatki), jest <span class="mp-accent-rule" aria-hidden="true">.
   --------------------------------------------------------------------- */

.mp-heading {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: var(--fs-h2);
	line-height: 1.12;
	letter-spacing: var(--ls-display);
	color: var(--ink);
}
.mp-heading--display { font-size: var(--fs-display); line-height: 1.16; }   /* projekt: linie bazowe H1 co 68 px przy 58,5 px */
.mp-heading--h1      { font-size: var(--fs-h1); }
.mp-heading--h3      { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }
.mp-heading--center  { text-align: center; }

.mp-ruled::after,
.mp-accent-rule {
	content: "";
	display: block;
	width: var(--rule-w);
	height: var(--rule-h);
	background: var(--accent);
}
/* Odstęp w em, żeby rósł razem z nagłówkiem: 0,5em ≈ 30 px pod H1 projektu. */
.mp-ruled::after { margin-top: 0.5em; }
.mp-heading--center.mp-ruled::after,
.mp-ruled--center::after,
.mp-accent-rule--center { margin-left: auto; margin-right: auto; }
.mp-accent-rule { margin-top: 22px; margin-bottom: 22px; }

/* W trybie wymuszonych kolorów tło znika — kreska ma zostać jako linia. */
@media (forced-colors: active) {
	.mp-ruled::after,
	.mp-accent-rule { background: CanvasText; }
}

.mp-lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--body);
}
.mp-intro {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* Akapity pod nagłówkiem sekcji („To nie jest poradnik.").

   Miara WĘŻSZA niż w projekcie. Projekt składa każdy akapit w dwa wiersze
   do 1326 px, czyli ~160 znaków: ponad dwa razy więcej niż górna granica
   czytelności (45–75 znaków), a przy wyśrodkowaniu oko musi co wiersz szukać
   początku następnego. Zamawiający dał w miejsce dwóch akapitów z projektu
   pięć dłuższych, więc miara zeszła do 36em (≈ 700 px przy 19,5 px, do ~70
   znaków).

   Wyśrodkowanie zostaje, jak w projekcie. Renderowany był też wariant
   z tekstem do lewej w wyśrodkowanej kolumnie. Czytał się jak wpis na blogu
   pod nagłówkiem-winietą, a oś nagłówka i kreski przestawała być osią bloku.
   Wyśrodkowany akapit czyta się dobrze, jeśli wiersze mają zbliżoną długość.
   Stąd text-wrap: balance: najdłuższy akapit (5 wierszy) nie kończy się
   krótkim ogonkiem, a wiersze nie skaczą o pół szerokości kolumny.
   Przeglądarka bez balance łamie zwyczajnie i tylko traci ten szlif.
   Odstęp między akapitami to jeden wiersz, jak w projekcie. */
.mp-intro--prose {
	max-width: 36em;
	font-size: var(--fs-prose);
	line-height: 1.5;
	color: var(--body);
}
.mp-intro--prose p { text-wrap: balance; }
.mp-intro--prose p + p { margin-top: 1.1em; }
/* Telefon: tekst do lewej. Przy ~40 znakach w wierszu najdłuższy akapit ma
   9 wierszy, a balance działa tylko do kilku wierszy. Wyśrodkowany blok
   miał wtedy poszarpane oba brzegi i kończył się sierotą („wypada.").
   Kolumna zajmuje prawie całą szerokość ekranu, więc lewy brzeg tekstu
   i oś nagłówka z kreską nie rozjeżdżają się widocznie. */
@media (max-width: 600px) {
	.mp-intro--prose { text-align: left; }
	.mp-intro--prose p { text-wrap: pretty; }
}

/* Linia włoskowata z projektu (między hero a „To nie jest poradnik.").
   Szersza niż treść — sięga niemal krawędzi okna. Ta sama linia otwiera
   każdą sekcję landingu (.mp-section::before) i stopkę (.mp-footer::before) —
   dawny pełnoszerokościowy border-top ciął stronę od krawędzi do krawędzi,
   projekt ma linię z wcięciem. */
.mp-section::before,
.mp-ctabar::before,
.mp-footer::before,
.mp-divider {
	content: "";
	display: block;
	height: 0;
	border: 0;
	border-top: 1px solid var(--line);
	width: calc(100% - 2 * var(--pad-x));
	max-width: var(--w-wide);
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Elementy wspólne: przyciski, pigułki, stepper, pola
   --------------------------------------------------------------------- */

/*
 * Przycisk z projektu: pigułka, wersaliki groteskiem, rozstrzał 0,16em.
 * Wysokość z min-height, nie z paddingu — szablony sklepu podawały dotąd
 * własny padding inline i przyciski obok siebie miały różne wysokości.
 * Rozstrzał dokłada odstęp także PO ostatniej literze, więc lewy padding
 * jest o 0,16em większy od prawego — napis siedzi optycznie na środku.
 */
.mp-btn {
	--btn-px: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 8px var(--btn-px) 8px calc(var(--btn-px) + var(--ls-caps));
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--font-ui);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}

/*
 * Główny: ciemna pigułka. Klasa --accent zostaje ze starych szablonów (była
 * ceglastym wypełnieniem) i znaczy dziś „przycisk główny" — tak samo --primary.
 * Hover przechodzi w przygaszoną czerwień: biel na niej 6,31:1.
 */
.mp-btn--accent,
.mp-btn--primary,
.mp-btn--ink { background: var(--btn); color: var(--paper); }
.mp-btn--accent:hover,
.mp-btn--primary:hover,
.mp-btn--ink:hover { background: var(--accent-text); color: #fff; }

.mp-btn--outline {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.mp-btn--outline:hover { background: var(--btn); border-color: var(--btn); color: var(--paper); }

/* Cichy: granica --line-ui (3,77:1 na --paper), bo po niej rozpoznaje się przycisk. */
.mp-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-ui);
}
.mp-btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.mp-btn--sm { --btn-px: 22px; min-height: 44px; font-size: 12.5px; }
/* Przycisk hero z projektu: 415 × 64 px, wersaliki o wysokości 12 px (Lato
   17 px), napis 296 px szeroki, po ~59 px od tuszu do krawędzi (54 px pola + boczne odsunięcie liter). */
.mp-btn--lg { --btn-px: clamp(34px, 3.4vw, 54px); min-height: clamp(56px, 4.04vw, 64px); font-size: clamp(14.5px, 1.07vw, 17px); }   /* wartości z projektu przy 1586 px, niżej proporcjonalnie */
.mp-btn--block { width: 100%; }

/* W trybie wymuszonych kolorów wypełnienie znika — bez ramki pigułka byłaby
   gołym napisem. Przezroczysta ramka z bazy dostaje kolor systemowy. */
@media (forced-colors: active) {
	.mp-btn, .mp-cta { border: 1px solid ButtonText; }
}

/* CTA w nagłówku i na pasku dolnym — ta sama ciemna pigułka, mniejsza. */
.mp-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 6px 20px 6px calc(20px + 0.14em);
	background: var(--btn);
	color: var(--paper);
	border-radius: var(--r-pill);
	font-family: var(--font-ui);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .16s var(--ease), color .16s var(--ease);
}
.mp-cta:hover { background: var(--accent-text); color: #fff; }

/* Pigułka-etykieta: wersaliki, bez obrotu i bez czarnego tła (dawny styl
   „naklejki" nie pasuje do spokojnego układu). */
.mp-pill {
	display: inline-block;
	border-radius: var(--r-pill);
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	text-transform: uppercase;
}

/* --accent-text na --paper2 5,96:1; ramka --accent to ozdoba. */
.mp-badge {
	background: var(--paper2);
	color: var(--accent-text);
	border: 1px solid var(--accent);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	padding: 6px 12px;
	line-height: 1.2;
}

.mp-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-text);
	margin-bottom: 14px;
}
.mp-eyebrow--center { justify-content: center; }

.mp-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-pill);
	background: #fff;
	overflow: hidden;
}
.mp-stepper button {
	background: none;
	border: none;
	width: 46px;
	height: 50px;
	font-size: 20px;
	color: var(--ink);
	cursor: pointer;
	transition: background-color .14s var(--ease);
}
.mp-stepper button:hover { background: var(--paper); }
/* overflow: hidden (zaokrąglona pigułka) ucinał pierścień z offsetem 3 px —
   zostawała pionowa kreska przy liczbie, czytana jak separator, a nie fokus.
   Pierścień rysuje się więc W ŚRODKU przycisku (na bieli: --focus 7,0:1). */
.mp-stepper button:focus-visible { outline-offset: -5px; border-radius: var(--r-pill); }
.mp-stepper > span,
.mp-stepper input {
	min-width: 34px;
	text-align: center;
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 16px;
	color: var(--ink);
	border: none;
	background: none;
	-moz-appearance: textfield;
}
.mp-stepper input::-webkit-outer-spin-button,
.mp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mp-stepper--sm button { width: 32px; height: 34px; font-size: 17px; }
.mp-stepper--sm button:hover { background: var(--sand); }
.mp-stepper--sm > span { min-width: 24px; font-family: var(--font-body); font-weight: 700; font-size: 15px; }

.mp-field { display: flex; flex-direction: column; gap: 7px; }
.mp-field label,
.mp-label {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--muted);
}
/* Trzy rzeczy naraz:

   1. font-size 15,5 → 16px. Poniżej 16px Safari na iOS powiększa viewport przy
      każdym dotknięciu pola, a meta viewport słusznie nie blokuje skalowania.
      Dotyczy też iPada (>820px), więc to NIE MOŻE siedzieć w media query.

   2. Jawny line-height na input i select. To on, nie min-height, daje RÓWNOŚĆ:
      natywny line-box selecta jest o 2px wyższy (zmierzone: 46px input vs
      48px select). textarea celowo wyłączona — 20px zdusiłoby „Uwagi".

   3. background-color zamiast skrótu `background`: strzałka selecta niżej jest
      background-image i skrót by ją kasował.

   Ramka --line-ui (4,20:1 na bieli), nie --line: po obrysie rozpoznaje się
   pole (WCAG 1.4.11), a biel pola na --paper to ledwie 1,1:1. */
.mp-field input,
.mp-field textarea,
.mp-field select {
	background-color: #fff;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-field);
	padding: 13px 15px;
	font-size: 16px;
	color: var(--ink);
	width: 100%;
	min-height: 50px;
}
.mp-field input,
.mp-field select { line-height: 22px; }

.mp-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }

/* W arkuszu nie było ANI JEDNEJ reguły ::placeholder, więc kolor podpowiedzi
   to domyślne #757575 przeglądarki — ostatni element formularza rysowany przez
   system, a nie przez motyw. Ten sam tekst ląduje na trzech powierzchniach:
     biel (kasa)            --muted = 6,04:1
     --paper                --muted = 5,42:1
     --err-bg (pole błędu)  --muted = 5,15:1
   opacity: 1 jest konieczne — arkusz UA Firefoksa przygasza ::placeholder. */
.mp-field input::placeholder,
.mp-field textarea::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* Pole KRAJ było jedynym elementem kasy rysowanym przez system, a nie przez
   motyw. Chevron w %236B6159 to dokładnie token --muted (6,04:1 na białym;
   dla grafiki nietekstowej próg to 3:1). */
.mp-field select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%236B6159' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

/* `outline: none` tu NIE WRACA. Ta reguła ma specyficzność (0,2,1) i biła
   globalne :focus-visible (0,1,0), czyli wyłączała zaprojektowany pierścień
   na KAŻDYM polu kasy i formularza kontaktowego. Zostawała sama podmiana
   obramowania o 1,4px — sygnał nieczytelny z odległości czytania. */
.mp-field input:focus,
.mp-field textarea:focus,
.mp-field select:focus { border-color: var(--ink); }

/* Link w komunikacie błędu kasy („Podaj adres e-mail…") przewija do POLA,
   a etykieta leży ~25 px nad nim — chowała się pod przyklejonym nagłówkiem
   z paskiem kroków (scroll-padding ledwie przekracza jego wysokość). Margines
   sumuje się ze scroll-padding, więc nad polem widać też jego podpis. */
.mp-field :is(input, select, textarea),
.mp-field .select2-selection { scroll-margin-top: 36px; }

.mp-field select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%231C1815' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Bez tego w trybie wymuszonych kolorów pole KRAJ zostaje bez wskaźnika
   rozwijania. */
@media (forced-colors: active) {
	.mp-field select {
		-webkit-appearance: auto;
		appearance: auto;
		padding-right: 15px;
		background-image: none;
	}
}
.mp-field .description,
.mp-hint {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--muted);
}

.mp-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	cursor: pointer;
}
/* ── Wspólna kontrolka wyboru ───────────────────────────────────────
   „Chcę fakturę na firmę" i „Akceptuję regulamin" były jasnymi kwadracikami
   z włoskowatą systemową ramką, renderowanymi inaczej w Safari niż w Chrome.
   grep ":checked" po arkuszu zwracał zero trafień — stan zaznaczenia był
   w całości rysunkiem przeglądarki.

   Nowy styl: ramka 1.2px --muted (6,04:1 na bieli — kontrolka ma być
   rozpoznawalna, próg 3:1), wypełnienie #fff jak sąsiednie pola, zaznaczenie
   ciemne jak główny przycisk — nie czerwone, bo czerwień to teraz ozdoba
   i błąd. */
.mp-check input[type="checkbox"],
.mp-terms input[type="checkbox"],
.mp-pay input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	flex: none;
	background: #fff;
	border: 1.2px solid var(--muted);
	cursor: pointer;
	transition: background-color .14s var(--ease), border-color .14s var(--ease);
}
.mp-check input[type="checkbox"],
.mp-terms input[type="checkbox"] { border-radius: var(--r-field); }
.mp-pay input[type="radio"] { border-radius: var(--r-pill); }

/* Biel na --btn = 16,4:1. */
.mp-check input[type="checkbox"]:checked,
.mp-terms input[type="checkbox"]:checked {
	background-color: var(--btn);
	border-color: var(--btn);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 10px;
}

/* Pudełko 20px − ramka 2,4px = pole 17,6px; pierścień 3,5px → kropka 10,6px. */
.mp-pay input[type="radio"]:checked {
	background-color: var(--btn);
	border-color: var(--btn);
	box-shadow: inset 0 0 0 3.5px #fff;
}

/* Windows High Contrast: bez tego zaznaczenie regulaminu znika i nie da się
   złożyć zamówienia. background-image: none jest konieczne — zewnętrzna
   reguła :checked (0,3,1) bije bazową w media (0,2,1) i ptaszek by został. */
@media (forced-colors: active) {
	.mp-check input[type="checkbox"],
	.mp-terms input[type="checkbox"],
	.mp-pay input[type="radio"] {
		-webkit-appearance: auto;
		appearance: auto;
		border: 0;
		background: none;
	}
	.mp-check input[type="checkbox"]:checked,
	.mp-terms input[type="checkbox"]:checked { background-image: none; }
}

/* ---------------------------------------------------------------------
   Nagłówek

   Bez logo (zamawiający, 14.09.2026 — wszystkie strony). Renderowane dwa
   warianty paska przy 1024 i 1440 px:
     A) menu na początku, akcje na końcu,
     B) menu na środku (siatka 1fr auto 1fr), akcje na końcu.
   Wybrany A. B wygląda jak winieta tylko wtedy, gdy po obu stronach coś
   stoi — bez logo lewa trzecia paska jest pusta, a menu „wisi" 200–300 px
   od lewej krawędzi treści, na innej osi niż nagłówki i tekst pod spodem.
   W A lewa krawędź menu to lewa krawędź kolumny treści, a na stronach
   sklepu (menu + koszyk) oba warianty i tak zbiegały się w ten sam układ.

   Desktop: menu | „Zamów książkę" + ikona koszyka. Telefon (≤ 820 px):
   „Zamów książkę" na początku, ikona koszyka i przycisk menu na końcu —
   nic więcej (zamawiający, 14.09.2026: „w header ikonka koszyka",
   „na mobile też").
   --------------------------------------------------------------------- */

.mp-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	/* Własna warstwa kompozycji. W WebKicie (Safari/Messenger na iOS) okładka
	   z mask-image (.mp-mockup) potrafi być namalowana PONAD przyklejonym
	   nagłówkiem przy przewijaniu, mimo z-index 40 — zgłoszenie z telefonu
	   14.09.2026. Do poprzedniej rundy warstwę dawał nagłówkowi backdrop-filter;
	   po jego usunięciu (słusznym — patrz niżej) trzeba ją zadeklarować wprost.
	   translateZ(0) nie zmienia układu ani nie tworzy problemów dla
	   potomków: w nagłówku nie ma nic pozycjonowanego fixed. */
	transform: translateZ(0);
}
/* rgba(247,242,234,0.94) nie było ŻADNYM tokenem. Nagłówek i pasek kroków
   zlewały się w jeden jasny slab, a rama zmieniała kolor przy przejściu
   landing → sklep. backdrop-filter znika świadomie: na elemencie sticky
   tworzy dodatkowy kontekst kompozycji, kosztowny przy każdym przemalowaniu
   w Safari. */
.mp-header--shop {
	background: var(--paper);
}

.mp-header__bar {
	max-width: var(--w-page);
	margin: 0 auto;
	min-height: 72px;
	padding: 12px var(--pad-x);
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 32px);
}

.mp-nav { min-width: 0; }
.mp-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* flex-wrap to zawór — przy piątej pozycji menu (menu edytuje autorka
	   w kokpicie) pasek przełamie się do drugiej linijki zamiast wyleźć
	   spod przycisków. */
	gap: 6px clamp(18px, 2.6vw, 38px);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
/* --muted na --paper 5,42:1; bieżąca pozycja --ink z czerwoną kreską —
   nie samym kolorem (WCAG 1.4.1). */
.mp-nav__list a {
	display: inline-block;
	padding: 8px 0;
	color: var(--muted);
	border-bottom: 1px solid transparent;
	transition: color .16s var(--ease), border-color .16s var(--ease);
}
.mp-nav__list a:hover { color: var(--ink); }
.mp-nav__list .current-menu-item > a,
.mp-nav__list .current_page_item > a {
	color: var(--ink);
	border-bottom-color: var(--accent);
}
/* Wymuszone kolory: przezroczysta kreska dostaje kolor systemowy i KAŻDA
   pozycja wyglądała na bieżącą, a czerwień bieżącej znikała. Zwykłe pozycje
   dostają kreskę w kolorze tła, bieżąca grubszą w CanvasText. To samo w menu
   mobilnym (kreska obok napisu) i stan otwarcia przycisku menu. */
@media (forced-colors: active) {
	.mp-nav__list a { border-bottom-color: Canvas; }
	.mp-nav__list .current-menu-item > a,
	.mp-nav__list .current_page_item > a { border-bottom: 2px solid CanvasText; }
}

/* Wąski desktop (821–1100 px): menu z rozstrzałem 0,16em, „Zamów książkę"
   i koszyk nie mieściły się przy 821 px i menu łamało się na dwa wiersze
   (pasek 100 px). Rozstrzał 0,1em i odstęp 18 px: menu 428 px, pasek
   zostaje 72 px. Po zamianie pigułki „Koszyk (n)" na ikonę 44 px zapas
   jest większy, sprawdzone przy 821 px: jeden wiersz. */
@media (max-width: 1100px) {
	.mp-header__bar { gap: 16px; }
	.mp-nav__list { letter-spacing: 0.1em; column-gap: 18px; }
}

.mp-header__action {
	margin-left: auto;
	flex: none;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Ikona koszyka (inc/woo.php, mendopauza_cart_button). Pole 44 × 44 px
   na każdej szerokości: cel dotykowy bez obrysu, bo w minimalnym pasku
   obrys wokół ikony byłby trzecią pigułką obok przycisku i menu.
   Ikona --ink na --paper 15,84:1 (próg dla grafiki 3:1). Na najechaniu
   ikona nie zmienia koloru, tylko pole dostaje tło --sand: zmiana samego
   odcienia ciemnej kreski byłaby ledwo widoczna. */
.mp-carticon {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	color: var(--ink);
	transition: background-color .16s var(--ease);
}
.mp-carticon:hover { background: var(--sand); color: var(--ink); }
.mp-carticon__icon { display: block; }
/* Plakietka z liczbą sztuk na prawym górnym rogu ikony. Biel na
   --accent-text 6,31:1 przy 11 px pogrubionym. Pierścień --paper oddziela
   ją od kreski wózka, żeby cyfra nie zlewała się z ikoną. */
.mp-carticon__count {
	position: absolute;
	top: 3px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-pill);
	background: var(--accent-text);
	color: #fff;
	box-shadow: 0 0 0 2px var(--paper);
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
/* Pusty koszyk: plakietka znika z ekranu, ale nie z drzewa dostępności
   (ten sam wzór co .screen-reader-text), bo „liczba sztuk: 0" jest częścią
   nazwy linku. display: none zabrałoby ją też czytnikowi. */
.mp-carticon__count.is-empty {
	width: 1px;
	min-width: 0;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	box-shadow: none;
}
@media (forced-colors: active) {
	.mp-carticon__count { border: 1px solid CanvasText; }
}

.mp-burger {
	display: none;
	background: transparent;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-pill);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink);
	flex: none;
	transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.mp-burger:hover { border-color: var(--ink); }
.mp-burger[aria-expanded="true"] { background: var(--btn); border-color: var(--btn); color: var(--paper); }
@media (forced-colors: active) {
	.mp-burger[aria-expanded="true"] { border: 3px solid ButtonText; }
}

.mp-menu-mobile {
	border-top: 1px solid var(--line);
	background: var(--paper2);
	padding: 6px var(--pad-x) 18px;
}
.mp-menu-mobile__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.mp-menu-mobile__list li { border-bottom: 1px solid var(--line); }
/* Pozycje menu antykwą, jak nagłówki — na telefonie menu to cała strona treści. */
.mp-menu-mobile__list a {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: -0.01em;
	padding: 14px 0;
}
.mp-menu-mobile__list .current-menu-item > a { color: var(--accent-text); }
.mp-menu-mobile__list .current-menu-item > a::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	margin-left: 12px;
	vertical-align: middle;
	background: var(--accent);
}
@media (forced-colors: active) {
	.mp-menu-mobile__list .current-menu-item > a::after { forced-color-adjust: none; background: CanvasText; }
}

/* Pasek kroków w sklepie. Nowy styl: na tle strony (bez jaśniejszego pasa
   --paper2), wyśrodkowany jak tytuły widoków sklepu pod nim, kroki
   rozdzielone krótką kreską zamiast dywizu. Wysokość bez zmian — od niej
   zależą scroll-padding, sticky podsumowania i ramka błędów kasy (113 px). */
.mp-steps {
	border-top: 1px solid var(--line);
	background: var(--paper);
}
.mp-steps__inner {
	max-width: var(--w-shop);
	margin: 0 auto;
	padding: 8px var(--pad-x);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.mp-steps__item {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	color: inherit;
}
/* „ · Sklep" w osobnym <span> (inc/woo.php) — spacja na początku ma zostać. */
.mp-steps__label { white-space: pre; }
.mp-steps__item:hover { color: var(--ink); }
.mp-steps__item.is-active { color: var(--ink); }
.mp-steps__dot {
	margin-right: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.mp-steps__sep {
	display: block;
	width: 14px;   /* szerzej zawijałby pasek powyżej progu 600 px (zawartość ~537 px) */
	height: 1px;
	overflow: hidden;
	color: transparent;   /* dywiz w HTML zostaje (aria-hidden), rysuje go linia */
	background: var(--line-ui);
}

/* ---------------------------------------------------------------------
   Stopka

   Zamawiający (14.09.2026): w stopce tylko „Regulamin" i „Polityka
   prywatności", w jednej linii, wyśrodkowane — bez lockupu, danych firmy,
   copyrightu i „Kontaktu" (footer.php). Bez własnego pasa koloru: dwa
   odnośniki na --sand byłyby ciężkim blokiem wokół prawie niczego. Stopkę
   oddziela ta sama linia włoskowata z wcięciem, która w projekcie dzieli
   hero i „To nie jest poradnik." (reguła przy .mp-divider).

   Odnośniki mówią językiem menu w nagłówku: wersaliki Lato 12 px
   z rozstrzałem, --muted (5,42:1 na --paper), bieżąca strona --ink
   z czerwonym podkreśleniem — nie samym kolorem (WCAG 1.4.1).
   --------------------------------------------------------------------- */

.mp-footer {
	background: var(--paper);
	color: var(--muted);
}
.mp-footer__links {
	list-style: none;
	margin: 0 auto;
	max-width: var(--w-page);
	padding: clamp(18px, 2.4vw, 30px) var(--pad-x) clamp(22px, 3vw, 36px);
	display: flex;
	flex-wrap: wrap;               /* przy 320 px oba napisy nie mieszczą się obok siebie */
	justify-content: center;
	gap: 0 clamp(28px, 4vw, 56px);
	font-size: 12px;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}
/* Pole 44 px wysokie: cel dotykowy bez powiększania napisu. */
.mp-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--muted);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: color .16s var(--ease), text-decoration-color .16s var(--ease);
}
.mp-footer__links a:hover { color: var(--ink); }
/* 320 px (szerokość reflow z WCAG): przy rozstrzale 0,16em i odstępie 28 px
   oba napisy potrzebowały ~300 px z 284 dostępnych i drugi spadał do nowego
   wiersza, a stopka ma być „w linii". Ciaśniej tylko na najwęższych ekranach. */
@media (max-width: 359.98px) {
	.mp-footer__links { gap: 0 16px; letter-spacing: 0.08em; }
}
.mp-footer__links a[aria-current="page"] {
	color: var(--ink);
	text-decoration-color: var(--accent);
}

/* Hero kupuje przez formularz, nie przez kotwicę — opakowanie nie może
   zmienić układu rzędu. To samo „Zamów książkę" w nagłówku (.mp-cta-form,
   inc/woo.php): formularz nie może dokładać marginesu ani łamać paska. */
.mp-hero__buy,
.mp-cta-form { display: flex; margin: 0; }

/* .mp-cta było dotąd wyłącznie na <a> i — w odróżnieniu od .mp-btn — nie ma
   resetu przycisku. Bez tego iOS Safari domaluje własne tło i obramowanie. */
button.mp-cta {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
   Landing: hero
   --------------------------------------------------------------------- */

.mp-hero {
	max-width: var(--w-page);
	margin: 0 auto;
	padding: var(--pad-y) var(--pad-x) clamp(40px, 5vw, 72px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	gap: clamp(34px, 6vw, 72px);
	align-items: center;
}
.mp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
}

/* ── Hero z okładkami (landing ebooków, nowy styl 14.09.2026) ──────────
   Ten sam układ co hero ze zdjęciem niżej (kolumna obrazu do krawędzi okna,
   tekst na kremie; reguły wspólne w selektorach .mp-hero--photo /
   .mp-hero--covers), ale w kolumnie obrazu zamiast fotografii stoi para
   okładek na --sand — tonie zdjęcia ze strony głównej, więc oba wejścia
   do serwisu zaczynają się tą samą plamą koloru.

   Okładki obok siebie, wyrównane do dołu jak na półce, bez nachodzenia
   i bez obrotu. Dotąd druga była wsunięta pod pierwszą (margin-left −14%)
   i zasłaniała jej krawędź z tytułem — przy dwóch różnych towarach para
   musi czytać się jako dwa tytuły, a nie jeden z cieniem. Cień
   --sh-cover-xl: miękki i krótki, bez „pływających" kart. */
.mp-hero--covers .mp-hero__media {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sand);
	padding: clamp(48px, 5.5vw, 88px) clamp(28px, 4.5vw, 80px);
}
.mp-hero__covers {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(20px, 2.8vw, 44px);
	width: 100%;
}
.mp-hero__cover-link { display: block; flex: 0 1 44%; max-width: 300px; min-width: 0; }
.mp-hero__cover-link:focus-visible { outline-offset: 4px; border-radius: var(--r-cover); }
.mp-hero__cover {
	display: block;
	width: 100%;
	border-radius: var(--r-cover);
	box-shadow: var(--sh-cover-xl);
}

/* Wspólna siatka obu hero ze zdjęciem/obrazem: kolumna obrazu | tekst
   w proporcji 46,6 : 53,4 — oś tekstu na 73,3% szerokości, jak w projekcie.
   Hero z okładkami (landing ebooków) stawia w pierwszej kolumnie okładki;
   hero strony głównej rozciąga zdjęcie pod obie kolumny (reguły niżej). */
.mp-hero--photo,
.mp-hero--covers {
	max-width: 1920px;
	min-height: clamp(540px, 41.9vw, 720px);
	margin-bottom: clamp(10px, 0.95vw, 15px);   /* projekt: 15 px między dołem zdjęcia a linią włoskowatą */
	padding: 0;
	gap: 0;
	grid-template-columns: minmax(0, 46.6fr) minmax(0, 53.4fr);
	align-items: stretch;
}

/* ── Hero ze zdjęciem (strona główna, zdjęcia zamawiającego 14.09.2026) ─
   Jak w projekcie: zdjęcie na całą szerokość okna, tekst leży NA zdjęciu,
   wyśrodkowany w prawej kolumnie. Dwa pliki z osobną kompozycją (<picture>
   w front-page.php): tu układ komputerowy, telefon w bloku ≤ 820 px.

   hero-komputer (3000 × 1500): wazon z gipsówką i pudełka x 0–17,7%,
   książka x 22,4–40,0% / y 30,1–84,1%, pusta ściana od ~42% do prawej
   krawędzi (cień liści od 83%), kamienny blat od y 73%. Tekst stoi
   w kolumnie od 46,6%, więc na ścianie; najjaśniejszy/najciemniejszy
   piksel pod tekstem zmierzony w README — bez żadnej zasłony.

   Wysokość: co najmniej 44vw (projekt 41,9vw; zdjęcie 2:1 to 50vw), a gdy
   tekst jest wyższy — tyle, ile tekst. Zdjęcie ma object-fit: cover, więc
   przy hero niższym niż ½ szerokości przycina się w pionie (książka zajmuje
   środkowe 54% wysokości pliku i zostaje cała do proporcji ~3,4:1), a przy
   wyższym — w poziomie. Wtedy działa --hero-granica: przesunięcie w poziomie
   liczone jednostkami kontenera tak, żeby prawa krawędź książki nigdy nie
   przekroczyła 42% szerokości hero, czyli nie weszła pod kolumnę tekstu
   (46,6%). Najpierw ucina się wazon z lewej, książka zostaje cała do
   proporcji hero ~0,84:1 — węższej niż jakikolwiek widok komputerowy.
   Zmierzone odstępy książka → tekst przy 821–2560 px w README.

   Przy podmianie zdjęcia komputerowego (bin/hero.sh --strona-glowna)
   zmieniają się liczby odczytane wprost z pliku:
   --hero-proporcja      szerokość / wysokość pliku (3000 / 1500 = 2),
   --hero-ksiazka-prawa  prawa krawędź książki jako ułamek szerokości pliku.
   Przeglądarka bez jednostek kontenera dostaje object-position 0% 50%
   (zdjęcie od lewej krawędzi, książka na swoim miejscu z pliku).

   --hero-sciana / --hero-kamien to tony zdjęć (średnie z pikseli), nie kolory
   interfejsu: tło hero, zanim zdjęcie się wczyta, i ciąg dalszy kamienia pod
   zdjęciem telefonu. */
.mp-hero--photo {
	--hero-proporcja: 2;
	--hero-ksiazka-prawa: 0.40;
	--hero-granica: 0.42;
	--hero-sciana: #EDE1D6;   /* średnia ściany pod tekstem, x 45–95%, y 0–73% */
	--hero-kamien: #C6B5A3;   /* średnia ostatnich 120 wierszy zdjęcia telefonu */
	position: relative;
	isolation: isolate;       /* z-index: -1 zdjęcia zostaje wewnątrz hero */
	max-width: none;
	min-height: clamp(560px, 44vw, 1000px);
	background: var(--hero-sciana);
}
.mp-hero__photo {
	grid-column: 1 / -1;
	grid-row: 1;
	position: relative;
	z-index: -1;              /* pod tekstem; w DOM zdjęcie jest po tekście */
	overflow: hidden;
}
.mp-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 0% 50%;
}
@supports (width: 1cqw) {
	/* Kontener o rozmiarze z siatki: obraz jest absolutny, więc zawartość
	   i tak nie wpływa na wymiary — size containment niczego nie zmienia. */
	.mp-hero__photo { container-type: size; }
	.mp-hero__img {
		--hero-obraz-w: max(100cqw, 100cqh * var(--hero-proporcja));
		object-position: clamp(100cqw - var(--hero-obraz-w), var(--hero-granica) * 100cqw - var(--hero-ksiazka-prawa) * var(--hero-obraz-w), 0px) 50%;
	}
}
.mp-hero--photo .mp-hero__text { padding-bottom: clamp(48px, 5vw, 88px); }
/* Pierścień fokusu leży na zdjęciu (jasna ściana, kamień): --ink ma tam
   ≥ 7:1, a domyślny --accent-text na ciemniejszym kamieniu telefonu
   schodził do ~2,7:1 (próg 3:1, WCAG 1.4.11). */
.mp-hero--photo :focus-visible { outline-color: var(--ink); }
/* Pionowo: w projekcie blok tekstu (od góry H1 do dołu przycisku) stoi ~40 px
   poniżej środka zdjęcia — stąd większy padding górny niż dolny. */
.mp-hero__text {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(56px, 8.1vw, 132px) var(--pad-x) clamp(40px, 3.6vw, 56px);
}
/* Kreska → opis 36 px, ostatni wiersz opisu → przycisk 47 px (projekt,
   1586 px). Te same odstępy ma hero z okładkami na landingu ebooków.

   Opis to cztery akapity od zamawiającego, a nie trzy wiersze z projektu.
   Zostają wyśrodkowane jak w projekcie, bo każdy akapit to jedno–trzy
   wiersze: przy tak krótkich blokach oko nie gubi początku wiersza.
   Miara w em, żeby rosła z pismem: 29em to do ~60 znaków w wierszu. Przerwa
   między akapitami to pół wiersza, więc akapity czytają się jako jedna
   wypowiedź, a nie cztery sekcje. Hero jest przez to wyższe niż w projekcie
   (≈ 775 zamiast 664 px przy 1586 px); zdjęcie rośnie razem z kolumną. */
.mp-hero--photo .mp-lead,
.mp-hero--covers .mp-lead {
	margin-top: 1.28em;
	max-width: 29em;
	line-height: 1.45;
}
.mp-hero__desc p { text-wrap: balance; }   /* wyśrodkowane wiersze o zbliżonej długości, bez ogonka „inaczej niż dotychczas." */
.mp-hero__desc p + p { margin-top: 0.55em; }
.mp-hero--photo .mp-hero__actions,
.mp-hero--covers .mp-hero__actions {
	flex-direction: column;
	justify-content: center;
	margin-top: clamp(28px, 2.6vw, 40px);
}
/* H1 łamie się zawsze po przecinku, jak w projekcie. Węższa kolumna łamie
   już tylko wewnątrz pierwszego członu („O menopauzie / bez lukru,"), a nie
   „bez lukru, za / to z humorem.", co dawało balance przy 390 px. */
.mp-heading .mp-hero__line { display: block; }

/* „Mniejszy nagłówek" hero (zamawiający, 15.09.2026): ta sama antykwa co H1,
   o skalę H3 mniejsza, w --ink. Kreska przeszła z H1 pod podtytuł, żeby
   nagłówek i podtytuł czytały się jako jedna para. */
.mp-hero__head { margin: 0; }
.mp-hero__subtitle {
	margin: 0.6em auto 0;
	max-width: 21em;   /* nie szerzej niż H1 — przy 24em podtytuł wystawał poza nagłówek (1440 px) */
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(20px, 1.6vw, 26px);
	line-height: 1.3;
	letter-spacing: var(--ls-display);
	color: var(--ink);
	text-align: center;
	text-wrap: balance;
}
.mp-hero__subtitle.mp-ruled::after { margin: 0.85em auto 0; }

/* ---------------------------------------------------------------------
   Landingi: sekcje („To nie jest poradnik.", ebooki i FAQ landingu ebooków)
   --------------------------------------------------------------------- */

/* Sekcje stoją na tym samym --paper co strona, a oddziela je linia
   włoskowata z wcięciem (::before, reguła przy .mp-divider) — jak w projekcie
   między hero a „To nie jest poradnik.". Dawne --paper2 z pełnoszerokościowym
   border-top dzieliło landing na pasy. */
.mp-section {
	background: var(--paper);
}
.mp-section__inner {
	max-width: var(--w-page);
	margin: 0 auto;
	padding: clamp(48px, 7vw, 92px) var(--pad-x);
}
/* „To nie jest poradnik." — odstępy z projektu (1586 px): linia → góra H2
   48 px, kreska → pierwszy wiersz akapitu 26 px. Pierwsza sekcja pod hero
   jest ciaśniejsza od reszty, bo linia i nagłówek czytają się jak podpis
   pod zdjęciem, a nie jak nowy rozdział. */
.mp-section--intro .mp-section__inner { padding-top: clamp(34px, 2.7vw, 43px); }
.mp-section--intro .mp-intro--prose { margin-top: clamp(18px, 1.45vw, 23px); }
.mp-intro__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 3vw, 48px);
}

/* Sekcje landingu ebooków („Do wyboru", „Najczęściej pytacie"): nagłówek
   z kreską na osi, treść pod nim. Odstęp kreska → treść jak w podpisie
   strony głównej, tylko większy, bo pod spodem stoi siatka, a nie akapit.
   :not(.mp-intro--prose): podpis strony głównej ma własny, ciaśniejszy
   odstęp z projektu (reguła wyżej) i ta reguła nie może go nadpisać. */
.mp-section__inner > .mp-heading + :not(.mp-intro--prose) { margin-top: clamp(32px, 3.6vw, 56px); }

/* Wiersz ceny (karta ebooka, landing ebooków): cena, stara cena, nota. */
.mp-priceline { display: flex;
	/* Doszła stara cena i plakietka przeceny — bez zawijania nota „z VAT”
	   wypychała wiersz 9 px poza ekran na 768 px. */
	flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.mp-priceline__note { font-size: 13.5px; color: var(--muted); }

/* FAQ w kolumnie czytelniczej na osi strony (46em ≈ 740 px), a nie na całą
   ramę: pytania mają po kilka słów i przy 1100 px znak „+" odjeżdżał
   o pół ekranu od pytania, do którego należy. Odpowiedź --body, nie --muted:
   to treść, po którą ktoś kliknął, a nie przypis. */
.mp-faq {
	display: flex;
	flex-direction: column;
	max-width: 46em;
	margin-left: auto;
	margin-right: auto;
}
.mp-faq__item { border-top: 1px solid var(--line); }
.mp-faq__item:last-child { border-bottom: 1px solid var(--line); }
.mp-faq__q {
	width: 100%;
	background: none;
	border: none;
	padding: 22px 0;
	display: flex;
	align-items: center;
	gap: 20px;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.3;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.mp-faq__q:hover { color: var(--accent-text); }
.mp-faq__q span:first-child { flex: 1; }
/* Znak stanu: --accent 4,18:1 na --paper (grafika stanu, próg 3:1). */
.mp-faq__sign { flex: none; width: 1em; text-align: center; font-family: var(--font-body); font-weight: 400; color: var(--accent); font-size: 24px; line-height: 1; }
.mp-faq__a {
	padding: 0 clamp(0px, 6vw, 48px) 24px 0;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--body);
}

/* ---------------------------------------------------------------------
   Podstrony: Fragmenty, Ebooki, Kontakt
   --------------------------------------------------------------------- */

/*
 * Nagłówek podstrony — wzór „To nie jest poradnik." ze strony głównej:
 * antykwa na osi, czerwona kreska (.mp-heading--h1.mp-heading--center.mp-ruled
 * w szablonie), pod nią lead groteskiem. Nadtytuły z ikoną zdjęte z szablonów:
 * powtarzały podświetloną pozycję menu tuż nad nagłówkiem.
 *
 * Lead znów ma miarę (36em ≈ 700 px, jak akapity podpisu na stronie głównej).
 * Pełna szerokość z rundy „Szerokość treści" była lekarstwem na lead przyklejony
 * do lewej krawędzi ramy, pod którym zostawała pusta prawa połowa. Na osi
 * strony wąski blok czyta się jako zamierzony, a długi wiersz na 1100 px
 * wyśrodkowany byłby nieczytelny.
 */
.mp-pagehead {
	max-width: var(--w-page);
	margin: 0 auto;
	padding: clamp(44px, 6.6vw, 96px) var(--pad-x) clamp(36px, 4.4vw, 64px);
	text-align: center;
}
.mp-pagehead__lead {
	max-width: 36em;
	margin: clamp(22px, 1.9vw, 30px) auto 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--body);
	text-wrap: balance;
}

.mp-wrap {
	max-width: var(--w-page);
	margin: 0 auto;
	padding: 0 var(--pad-x) clamp(56px, 7.5vw, 110px);
}
/* 404: jedyna akcja strony na osi, pod leadem. */
.mp-wrap__action { text-align: center; }

/* ── Fragmenty ──────────────────────────────────────────────────────
   Jak strony książki: bez kart, bez ciemnej pierwszej karty (w projekcie
   jedyną ciemną płaszczyzną jest przycisk). Każdy fragment otwiera
   wyśrodkowana głowa — numer, tytuł antykwą, czerwona kreska — a proza idzie
   pod nią w kolumnie czytelniczej wyrównanej do lewej: dialogi od półpauzy
   i jednowierszowe puenty wyśrodkowane rozsypałyby rytm autorki.

   Miara 36em przy --fs-prose (≈ 640–700 px, do ~70 znaków), ta sama co
   w podpisie strony głównej. Runda „Szerokość treści" rozciągnęła kartę na
   całą ramę (1006 px, ~120 znaków), bo w dwukolumnowej karcie pod tytułem
   zostawała pusta połowa — bez karty i z głową na osi tej pustki nie ma,
   a proza wraca do normy czytelności. Fragmenty rozdziela linia włoskowata
   na szerokość kolumny: strona mówi, że żaden nie jest ciągiem dalszym. */
.mp-fragments {
	font-size: var(--fs-prose);
	max-width: 36em;
	margin: 0 auto;
}
.mp-fragment { padding: clamp(40px, 5vw, 76px) 0; }
.mp-fragment:first-child { padding-top: 0; }
.mp-fragment:last-child { padding-bottom: 0; }
.mp-fragment + .mp-fragment { border-top: 1px solid var(--line); }
.mp-fragment__head {
	text-align: center;
	margin-bottom: clamp(26px, 2.4vw, 36px);
}
/* Numer: wersaliki Lato z rozstrzałem jak etykiety, --muted 5,42:1 na --paper. */
.mp-fragment__no {
	display: block;
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 12px;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--muted);
}
.mp-fragment__title {
	margin-top: 14px;
	font-size: clamp(25px, 2.35vw, 34px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
}
.mp-fragment__title::after {
	content: "";
	display: block;
	width: var(--rule-w);
	height: var(--rule-h);
	margin: 0.6em auto 0;
	background: var(--accent);
}
@media (forced-colors: active) {
	.mp-fragment__title::after { background: CanvasText; }
}
.mp-fragment__body { display: flex; flex-direction: column; gap: 1em; }

/* Proza fragmentu. Kursywa z projektu (.mp-fragment__quote) była pomyślana pod
   trzy-cztery zdania cytatu; na kilku akapitach ciągłego tekstu męczy oko.
   Rozmiar i interlinia jak akapity podpisu na stronie głównej. */
.mp-fragment__p { line-height: 1.65; color: var(--body); }

/* Puenty. U autorki to osobne jednowierszowe akapity domykające fragment —
   rytm jest w nich całą treścią, więc dostają odstęp i krój nagłówkowy.
   Kolor --ink, nie czerwień: czerwień jest w nowym stylu tylko kreską,
   a puenta i tak odróżnia się antykwą i wielkością. Ciaśniejszy gap niż
   w prozie: mają się czytać jako seria, nie jako akapity. */
.mp-fragment__beats { display: flex; flex-direction: column; gap: 0.3em; margin-top: 0.5em; }
.mp-fragment__beat {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(20px, 1.75vw, 25px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink);
}
/* Autorka rozstrzeliła te wersaliki spacjami; rozstrzelenie robi tu CSS,
   żeby czytnik ekranowy dostał słowo, a nie ciąg pojedynczych liter. */
.mp-fragment__loud {
	font-size: clamp(22px, 2.1vw, 30px);
	letter-spacing: 0.14em;
	margin-top: 0.15em;
}

/* Zamknięcie strony (Fragmenty): układ podpisu ze strony głównej — linia
   włoskowata z wcięciem (::before, reguła przy .mp-divider), nagłówek
   z kreską na osi, jedno zdanie, jedna pigułka. Dawny pas --paper2 z tekstem
   po lewej i przyciskiem po prawej był boksem wezwania do działania. */
.mp-ctabar { background: var(--paper); }
.mp-ctabar__inner {
	max-width: var(--w-page);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) var(--pad-x) clamp(64px, 7.5vw, 110px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.mp-ctabar__lead {
	max-width: 34em;
	margin-top: clamp(20px, 1.7vw, 26px);
	font-size: var(--fs-prose);
	line-height: 1.55;
	color: var(--body);
	text-wrap: balance;
}
.mp-ctabar__form { display: flex; margin: clamp(28px, 2.6vw, 40px) 0 0; }

/* ── Ebooki (/ebooki/, landing ebooków, lista w /sklep/) ────────────────
   Nowy styl: bez pudełka karty. Pozycję otwiera linia włoskowata, a nie
   ramka z tłem --paper2 — dwie ramki obok siebie pod nagłówkiem z kreską
   czytały się jak widżety sklepu, a nie jak spis tytułów. Odstęp między
   kolumnami robi to, co robiła ramka. Przyciski dalej wyrównane do dołu
   (.mp-ecard__foot margin-top: auto), bo siatka rozciąga pozycje w wierszu. */
.mp-ebooks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: clamp(40px, 5.5vw, 88px);
}
.mp-ecard {
	border-top: 1px solid var(--line);
	padding-top: clamp(26px, 2.8vw, 38px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mp-ecard__top {
	display: grid;
	grid-template-columns: clamp(104px, 32%, 160px) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 30px);
	align-items: start;
}
.mp-ecard__cover { display: block; width: 100%; border-radius: var(--r-cover); box-shadow: var(--sh-cover); }
.mp-ecard .mp-priceline { margin-bottom: 0; align-items: baseline; }   /* dawniej styl inline w szablonach */

/* Ebook w przedsprzedaży musi się odróżniać od tych dostępnych od ręki —
   inaczej trzy karty obiecują to samo, a jedna z nich przyjdzie później.
   Była pigułką na rogu okładki; w nowym stylu to cichy podpis pod okładką
   (wersaliki Lato, --accent-text 5,67:1 na --paper) — informacja zostaje,
   naklejka znika. */
.mp-ecard__media { position: relative; }
.mp-ecard__badge {
	display: block;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-align: center;
}
/* Okładka i tytuł nie były nigdzie linkiem — dotknięcie ich, odruch z Allegro
   i Empiku, nie robiło nic, a /ebooki/ była ślepym zaułkiem: curl zwracał
   ZERO odnośników do /produkt/. */
.mp-coverlink { display: block; }
.mp-coverlink:focus-visible { outline-offset: 3px; }
.mp-ecard__title a,
.mp-feature__title a,
.mp-related__name a { color: inherit; }
.mp-ecard__title a:hover,
.mp-feature__title a:hover,
.mp-related__name a:hover { color: var(--accent-text); }

.mp-ecard__title {
	font-size: clamp(23px, 2.1vw, 29px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 8px;
}
.mp-ecard__meta { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-bottom: 16px; }
.mp-price-md {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.mp-vat { font-size: 12.5px; color: var(--muted); }

/* Cena po premierze — bez przekreślenia (Omnibus, patrz mendopauza_sale_tag). */
.mp-price-future {
	font-size: 14px;   /* nie em: rodzic to wiersz ceny (~16px), nie sama cena — 0.5em dawało 8 px */
	line-height: 1.3;
	color: var(--muted);
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
}
/* „W przedsprzedaży taniej o 20%": nowy styl bez pigułki i obrysu — małe
   wersaliki w --accent-text (5,67:1 na --paper) nad ceną. W HTML plakietka
   stoi po cenie, nad nią przenosi ją order; flex-basis wymusza własny wiersz. */
.mp-badge--sale {
	order: -1;
	flex-basis: 100%;
	background: none;
	color: var(--accent-text);
	border: 0;
	border-radius: 0;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	padding: 0 0 4px;
}
/* Omnibus — drobny, ale nie ukryty: to informacja wymagana ustawą. */
.mp-omnibus { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); width: 100%; }

.mp-ecard__bundle { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.mp-ecard__bundle strong { color: var(--ink); }   /* cena nie krzyczy kolorem — jak cena główna (--ink) */
.mp-ecard__desc { font-size: 16px; line-height: 1.62; color: var(--body); display: flex; flex-direction: column; gap: 12px; }

/* Zapowiedź opisu do stałej wysokości.
   Karty na /ebooki i /sklep stoją obok siebie, a pierwsze akapity opisów mają
   od czterech do jedenastu wierszy. Przyciski wyrównuje margin-top:auto, więc
   w krótszych kartach robiła się kilkuwierszowa dziura — trzy karty przestawały
   czytać się jako komplet. Obcięcie dotyczy WYŁĄCZNIE stanu zwiniętego:
   :has(> [hidden]) znika po rozwinięciu przez „Czytaj dalej", więc pełny akapit
   zawsze da się przeczytać. html.js, bo bez JS-a atrybut [hidden] zostaje
   w DOM-ie (resztę odsłania osobna reguła) i zapowiedź byłaby ucięta bez
   sposobu na rozwinięcie. Brak :has() = brak obcięcia, czyli stan sprzed zmiany. */
html.js .mp-ecard__desc:has(> [hidden]) > p:first-child {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}
.mp-more {
	align-self: flex-start;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--accent-text);
	font-weight: 700;
	font-size: 14px;
	text-decoration: underline;
}
/* Stopka karty — ta sama na /ebooki/, landingu ebooków i w /sklep/
   („Dodaj do koszyka" + „Zobacz produkt", bez wiersza SKU; 15.09.2026).
   Jedna wysokość i jeden odstęp, przyciski dzielą szerokość rzędu. Gdy się
   nie mieszczą (telefon), każdy dostaje cały wiersz zamiast dwóch pigułek
   różnej długości przy lewej krawędzi. „✓ w koszyku" zawsze w osobnym
   wierszu na końcu — app.js dokleja go tuż za formularzem, więc bez order
   wbijałby się między przyciski. */
.mp-ecard__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.mp-ecard__foot form.cart { display: flex; margin: 0; flex: 1 1 auto; }
.mp-ecard__foot .mp-btn { flex: 1 1 auto; white-space: nowrap; }
.mp-ecard__foot .mp-incart { order: 1; flex-basis: 100%; }

/* ── Kontakt ────────────────────────────────────────────────────────
   Wizytówka na osi strony: adres e-mail jako największy element (antykwa,
   jak nagłówki), dane sprzedawcy drobno pod nim, dokumenty pod linią
   włoskowatą. Dawne dwie kolumny (dane | karta dokumentów w ramce) zostawiały
   przy krótkiej treści dwa pudełka różnej wysokości. */
.mp-contact {
	max-width: calc(var(--w-narrow) + 2 * var(--pad-x));
	margin: 0 auto;
	padding: 0 var(--pad-x) clamp(64px, 8vw, 120px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(44px, 5vw, 72px);
}
.mp-contact__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2vw, 28px);
}
/* Odnośnik bez ikony — musi wyglądać na odnośnik: podkreślenie w kolorze
   kreski (ozdoba; rozpoznawalność niesie samo podkreślenie, WCAG 1.4.1).
   min-height 44 px: cel dotykowy. overflow-wrap: adres jest jednym słowem
   i przy 320 px nie może wypchnąć strony w bok. */
.mp-contact__mail {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	overflow-wrap: anywhere;
}
.mp-contact__mail:hover { color: var(--accent-text); }
/* Profile społecznościowe (tylko skonfigurowane w mendopauza_social()):
   wersaliki jak menu w nagłówku, bez pigułek i ikon. */
.mp-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 clamp(24px, 3vw, 40px);
}
.mp-social a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 12px;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--muted);
}
.mp-social a:hover { color: var(--ink); }
.mp-contact__more {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
}
.mp-contact__more strong { color: var(--body); }
/* Telefon: nazwa firmy w osobnym wierszu, NIP i REGON razem pod nią.
   Dotąd wiersz przy 390 px kończył się wiszącym „NIP 6381483109 ·". */
@media (max-width: 600px) {
	.mp-contact__firma { display: block; }
	.mp-contact__sep { display: none; }
}
/* Kod pocztowy z miejscowością i „NIP …" / „REGON …" nie rozdzielają się
   na końcu wiersza (przy 390 px zostawało samo „424 Wrocław"). */
.mp-contact__more .mp-nowrap { white-space: nowrap; }

/* Dokumenty na stronie Kontakt (14.09.2026: „ładne linki do regulaminu
   i polityki prywatności" w miejscu formularza). Dwa odnośniki obok siebie
   pod linią włoskowatą, każdy to tytuł antykwą i jedno zdanie. Bez ikon,
   strzałek i ramek — cały blok jest celem (min. 44 px), a tytuł dostaje
   podkreślenie na najechaniu i przy fokusie. */
.mp-docs {
	width: 100%;
	border-top: 1px solid var(--line);
	padding-top: clamp(32px, 3.4vw, 48px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(24px, 3vw, 48px);
}
.mp-docs__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 4px 0;
	color: var(--ink);
}
.mp-docs__link:focus-visible { outline-offset: 6px; border-radius: var(--r-block); }
.mp-docs__title {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(22px, 1.9vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	/* Podkreślenie stale widoczne (--line-ui, 3,77:1), bo bez ikon i strzałek
	   tylko ono mówi, że tytuł jest odnośnikiem; na najechaniu — czerwień kreski. */
	text-decoration: underline;
	text-decoration-color: var(--line-ui);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color .16s var(--ease);
}
.mp-docs__link:hover .mp-docs__title,
.mp-docs__link:focus-visible .mp-docs__title { text-decoration-color: var(--accent); }
.mp-docs__desc { max-width: 30em; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: balance; }

/* ── Treść stron statycznych (Regulamin, Polityka prywatności) ─────────
   Kolumna czytelnicza na osi strony, pod wyśrodkowanym tytułem z kreską:
   42em ≈ 690 px, do ~85 znaków. Runda „Szerokość treści" dała dokumentom
   całą ramę (wiersz do 176 znaków) i sama odnotowała to „do obserwacji";
   przy tytule na osi pełna szerokość dawała blok szerszy od wszystkiego nad
   nim. Tabela przetwarzania danych wychodzi z kolumny na szerokość ramy
   (niżej), żeby jej cztery kolumny nie przewijały się na desktopie. */
.mp-prose { max-width: 42em; margin: 0 auto; font-size: 16.5px; line-height: 1.7; color: var(--body); }
.mp-prose > * + * { margin-top: 1em; }
.mp-prose__empty {
	padding: 30px 0;
	text-align: center;
	color: var(--muted);
}

/* ---------------------------------------------------------------------
   Dokumenty prawne (Regulamin, Polityka prywatności)

   Teksty na 12–27 tys. znaków, czytane wyrywkowo: ktoś szuka jednego
   paragrafu, nie czyta od deski do deski. Dlatego nagłówki mają wyraźnie
   mocniejszy sygnał niż w zwykłej prozie, a tabela przetwarzania danych
   dostaje własne pudełko z przewijaniem w poziomie.
   --------------------------------------------------------------------- */

.mp-prose__meta,
.mp-legal__meta {
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
/* „Wersja obowiązująca od…" otwiera dokument tuż pod tytułem na osi —
   czyta się jak podtytuł, więc stoi na tej samej osi. */
.mp-prose > .mp-legal__meta:first-child { text-align: center; }

/* Numer paragrafu ma być punktem zaczepienia dla oka przy przewijaniu,
   więc nagłówek dostaje krechę nad sobą — ten sam materiał, co sekcje
   pod kartą produktu (.mp-psec). */
.mp-prose h2 {
	margin-top: 2.2em;
	padding-top: 1.1em;
	border-top: 1px solid var(--line);
	font-size: clamp(22px, 2.3vw, 28px);
	letter-spacing: -0.01em;
}
.mp-prose h2:first-of-type { margin-top: 1.4em; }

.mp-prose h3 {
	margin-top: 1.8em;
	font-size: clamp(17px, 1.8vw, 20px);
	letter-spacing: -0.015em;
}

.mp-prose ul { padding-left: 1.15em; }
.mp-prose li + li { margin-top: 0.55em; }
.mp-prose li > ul { margin-top: 0.55em; }
/* Kropki list w kolorze kreski — ten sam drobny akcent, co pod nagłówkami.
   Ozdoba: treść punktu niesie tekst, nie kropka. */
.mp-prose li::marker { color: var(--accent); }

/* Wtrącenie redakcyjne: „sklep nie prowadzi kont", „formularz odeślij tylko,
   gdy…". Nie jest to ostrzeżenie, więc bez akcentu i bez pudełka: sama
   kreska z lewej, jak wcięcie w druku. */
.mp-legal__note {
	border-left: 1px solid var(--line-ui);
	padding: 2px 0 2px 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted);
}

.mp-legal__hint {
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-text);
	display: none;   /* pokazywane dopiero tam, gdzie tabela faktycznie się nie mieści */
}

/* Tabela ma osiem wierszy po cztery kolumny tekstu prawnego — poniżej
   ~900px nie ma szans zmieścić się bez łamania słów, więc przewija się
   w poziomie we własnym pudełku, zamiast rozpychać całą stronę. */
.mp-legal__table-scroll {
	overflow-x: auto;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--line);
	-webkit-overflow-scrolling: touch;
}
/* Tabela wychodzi z kolumny czytelniczej (42em) na szerokość treści ramy
   (do 1100 px): margines ujemny to różnica między połową kolumny a połową
   dostępnej szerokości. Na wąskim ekranie obie połowy są równe, margines
   wynosi zero, a tabela przewija się w swoim pudełku jak dotąd. pad-x
   (≥ 18 px) trzyma pudełko z dala od krawędzi okna także przy klasycznym
   pasku przewijania, więc strona nie dostaje poziomego przewijania. */
.mp-prose .mp-legal__table-scroll {
	--wybieg: min(0px, 50% - min(50vw - var(--pad-x), (var(--w-page) - 2 * var(--pad-x)) / 2));
	margin-left: var(--wybieg);
	margin-right: var(--wybieg);
}
.mp-legal__table {
	border-collapse: collapse;
	width: 100%;
	min-width: 780px;
	font-size: 14px;
}
/* Nagłówek tabeli jak w druku: bez wypełnienia, wersaliki nad kreską --ink. */
.mp-legal__table thead th {
	color: var(--ink);
	border-bottom: 1px solid var(--line-ui);
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 16px;
}
.mp-legal__table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	line-height: 1.6;
	color: var(--body);
}
.mp-legal__table tbody tr:last-child td { border-bottom: none; }
.mp-legal__table td:first-child {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	color: var(--ink);
}

/* Formularz odstąpienia jest do wydrukowania — stąd biel i ramka
   jak u dokumentu, a nie jak u karty sklepu. */
.mp-legal__form {
	background: #fff;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-card);
	padding: clamp(20px, 3vw, 32px);
	font-size: 15.5px;
	line-height: 1.9;
}
.mp-legal__form .mp-legal__note {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
}

/* Formularz odstąpienia ma pola do wypełnienia ręcznie, zapisane ciągami
   podkreślników. Przeglądarka traktuje je jak jedno długie słowo, więc
   na 390px wypychały stronę w bok (zmierzone: scrollWidth > clientWidth).
   anywhere, nie break-all: łamie tylko wtedy, gdy nie ma innego wyjścia,
   więc zwykłe zdania formularza nadal łamią się po wyrazach. */
.mp-legal__form { overflow-wrap: anywhere; }

@media (max-width: 900px) {
	.mp-legal__hint { display: block; }
}

/* ---------------------------------------------------------------------
   Sklep: lista produktów

   Nowy styl (etap sklepu, 14.09.2026): nagłówek jak podpis strony głównej
   (antykwa na osi, czerwona kreska, lead), książka bez pudełka — okładka na
   piaskowym polu obok tekstu — i lista ebooków pod linią włoskowatą.
   Zdjęte: okruszki „Strona główna / Sklep" (pasek kroków tuż nad nimi mówi
   to samo), plakietka „Przedsprzedaż" na okładce, wiersz SKU pod przyciskami,
   ramka i tło karty książki oraz podsumowania koszyka na dole listy.
   --------------------------------------------------------------------- */

.mp-shop {
	max-width: var(--w-shop);
	margin: 0 auto;
	padding: clamp(28px, 5vw, 58px) var(--pad-x) clamp(40px, 5vw, 64px);
}
/* Okruszki zostały na karcie produktu (jedyny odnośnik „w górę" poza paskiem
   kroków, a BreadcrumbList w JSON-LD mówi to samo maszynom). */
.mp-crumbs { font-size: 13px; color: var(--muted); margin-bottom: clamp(18px, 2.4vw, 30px); }
.mp-crumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.mp-crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.mp-crumbs strong { color: var(--ink); font-weight: 400; }

/* Nagłówek widoku sklepu (Sklep, Koszyk, Zamówienie): klasy
   .mp-heading--h1.mp-heading--center.mp-ruled w szablonie, tu odstępy. */
.mp-shop__head { text-align: center; margin-bottom: clamp(40px, 5.4vw, 80px); }
.mp-shop__sub {
	max-width: 36em;
	margin: clamp(20px, 1.8vw, 28px) auto 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--body);
	text-wrap: balance;
}

/*
 * Książka: dwie kolumny jak hero landingu ebooków (pole obrazu | tekst).
 * Pole obrazu to --sand bez ramki — ton tła zdjęć w hero strony głównej —
 * a nie jasne pudełko z obrysem, które czytało się jak widżet.
 */
.mp-feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(28px, 4.4vw, 64px);
	align-items: center;
}
.mp-feature__media {
	width: 100%;
	background: var(--sand);
	padding: clamp(24px, 4vw, 56px) clamp(24px, 5vw, 72px);
	border-radius: var(--r-card);
}
.mp-feature__media .mp-coverlink { max-width: 360px; margin: 0 auto; }
.mp-feature__media img { display: block; width: 100%; }
.mp-feature__title {
	font-size: clamp(28px, 2.9vw, 40px);
	line-height: 1.12;
	letter-spacing: var(--ls-display);
}
.mp-feature__subtitle,
.mp-product__subtitle {
	margin-top: 12px;
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(17px, 1.45vw, 21px);
	line-height: 1.4;
	color: var(--body);
	text-wrap: balance;
}
.mp-feature__lead { font-size: 16px; line-height: 1.65; color: var(--body); max-width: 56ch; margin-bottom: 26px; }
.mp-feature__price { display: flex; align-items: baseline; gap: 6px 14px; margin-bottom: 26px;
	/* Doszła cena po premierze, plakietka i wiersz Omnibus — bez zawijania „z VAT”
	   wypadał 30 px poza ekran na 768 px, tak samo jak wcześniej .mp-priceline. */
	flex-wrap: wrap;
}
.mp-feature__price .mp-omnibus,
.mp-feature__price .mp-vat { flex-basis: 100%; }
.mp-price-lg {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(32px, 3.6vw, 44px);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--ink);
}
/* Rząd akcji karty książki w sklepie — ten sam układ co stopka karty ebooka
   (.mp-ecard__foot, sekcja „Ebooki"). */
.mp-feature__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.mp-feature__actions form.cart { display: flex; margin: 0; flex: 1 1 auto; }
.mp-feature__actions .mp-btn { flex: 1 1 auto; white-space: nowrap; }
.mp-feature__actions .mp-incart { order: 1; flex-basis: 100%; }

/* Ebooki pod linią włoskowatą, nagłówek na osi jak sekcje landingu. */
.mp-shop__ebooks {
	margin-top: clamp(56px, 7vw, 104px);
	padding-top: clamp(44px, 5.4vw, 80px);
	border-top: 1px solid var(--line);
}
.mp-shop__h2 { font-size: var(--fs-h2); }
.mp-shop__note {
	max-width: 36em;
	margin: clamp(18px, 1.6vw, 24px) auto clamp(36px, 4vw, 56px);
	text-align: center;
	font-size: 16px;
	line-height: 1.55;
	color: var(--muted);
	text-wrap: balance;
}

.mp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(40px, 5.5vw, 88px);
}
/* Wspólna .mp-ecard (etap stron treści) nie ma pudełka — linia włoskowata
   u góry. Sklep idzie za /ebooki: bez tła, mniejsza okładka i tytuł, bo
   nad listą stoi już duża karta książki. */
.mp-grid .mp-ecard__top { grid-template-columns: clamp(90px, 28%, 122px) minmax(0, 1fr); gap: clamp(14px, 3vw, 22px); }
.mp-grid .mp-ecard__title { font-size: clamp(21px, 1.8vw, 25px); }
.mp-grid .mp-price-md { font-size: 28px; }

/* „✓ w koszyku" — potwierdzenie, nie ozdoba: --ok-text 5,51:1 na --paper. */
.mp-incart { font-size: 14px; color: var(--ok-text); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }

/* Podsumowanie koszyka pod listą: jedna linia na osi, bez ramki. Przycisk
   obrysem — ciemne pigułki to „Dodaj do koszyka" przy produktach. */
.mp-cartsum {
	margin-top: clamp(48px, 5.4vw, 80px);
	padding-top: clamp(24px, 2.6vw, 34px);
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 24px;
	font-size: 15px;
	color: var(--body);
}

/* ---------------------------------------------------------------------
   Sklep: karta produktu

   Okładka na piaskowym polu | tytuł, podtytuł, kreska, cena, krótki opis,
   rząd zakupu. Pod spodem sekcje nagłówek | treść (single-product.php
   mówi, dlaczego bez zakładek).

   Proporcja kolumn 2 : 3 (od 821 px), a nie po połowie: rząd zakupu
   (stepper, „Dodaj do koszyka", „Kup teraz") potrzebuje ~540 px, żeby stać
   w jednej linii. Przy 1 : 1 kolumna miała 522 px przy 1440 i przycisk
   „Kup teraz" spadał do drugiego wiersza (zrzut od zamawiającego). Te same
   proporcje mają sekcje pod spodem, więc treść sekcji zaczyna się na tej
   samej pionowej linii co tytuł produktu.
   --------------------------------------------------------------------- */

.mp-product {
	max-width: var(--w-shop);
	margin: 0 auto;
	padding: clamp(24px, 4vw, 46px) var(--pad-x) clamp(56px, 7vw, 96px);
	--mp-product-cols: minmax(0, 2fr) minmax(0, 3fr);
	--mp-product-gap: clamp(28px, 4.4vw, 64px);
}
.mp-product__top {
	display: grid;
	grid-template-columns: var(--mp-product-cols);
	gap: var(--mp-product-gap);
	align-items: start;
}
.mp-product__top > * { min-width: 0; }  /* tor siatki nie może rosnąć ponad viewport przez min-content dzieci */
.mp-product__frame {
	background: var(--sand);
	border-radius: var(--r-card);
	padding: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 56px);
	display: flex;
	justify-content: center;
}
.mp-product__frame img {
	display: block;
	width: min(100%, 340px);
	border-radius: var(--r-cover);
	box-shadow: var(--sh-cover);
}
.mp-product__frame .mp-mockup-crop { max-width: 380px; }

.mp-product__title {
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.1;
	letter-spacing: var(--ls-display);
}
.mp-product__meta { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.mp-product__info .mp-accent-rule { margin: clamp(20px, 1.8vw, 26px) 0; }

/*
 * Cena i wiersze prawne. Kolejność czytania: „w przedsprzedaży taniej o 20%"
 * (małe wersaliki nad ceną), cena z „po premierze 59,99 zł" obok, Omnibus,
 * „z VAT · + dostawa". W HTML plakietka stoi po cenie (mendopauza_sale_tag
 * wypisuje się w kilku miejscach), nad cenę przenosi ją order.
 */
.mp-product__price {
	display: flex;
	align-items: baseline;
	gap: 6px 14px;
	/* Cena + cena po premierze + plakietka + „z VAT” w jednym wierszu bez zawijania
	   rozpychały kolumnę siatki do 410 px na ekranie 390 px — cała karta
	   przewijała się w poziomie. Wiersz ceny musi zawijać wszędzie, gdzie jest przecena. */
	flex-wrap: wrap;
}
.mp-product__price .mp-omnibus,
.mp-product__price .mp-vat { flex-basis: 100%; }
.mp-price-xxl {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: clamp(36px, 3.6vw, 50px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
}
/* Krótki opis: kontener akapitów (autorka pisze rytmem, nie blokiem). Odstęp
   między akapitami mniejszy niż margines bloku — jedna wypowiedź. */
.mp-product__lead { margin: clamp(24px, 2.2vw, 32px) 0 clamp(26px, 2.4vw, 34px); font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 56ch; }
.mp-product__lead > p + p,
.mp-feature__lead > p + p { margin-top: 0.7em; }

/*
 * Rząd zakupu w jednej linii (zamawiający, 14.09.2026, zrzut z „KUP TERAZ"
 * zawiniętym do drugiego wiersza): stepper, „Dodaj do koszyka", „Kup teraz".
 *
 * Jedna wysokość dla trzech kontrolek (--buy-h) na każdej szerokości. Dotąd
 * stepper miał 52 px, przyciski 54 px, a na telefonie reguła celów
 * dotykowych dawała przyciskom 44 px przy stepperze 48 px.
 * Przyciski ciaśniej niż domyślne .mp-btn (13 px, pole 24 px), bo przy 14 px
 * i polu 34 px sam rząd miał ~590 px.
 *
 * Kiedy się nie mieści (kolumna < 520 px: telefon, okno 821–~960 px), zawija
 * się sensownie: stepper i „Dodaj do koszyka" w pierwszym wierszu, „Kup teraz"
 * na całą szerokość pod nimi. Zapytanie o KONTENER, nie o okno — przy 768 px
 * karta jest jednokolumnowa i kolumna ma 700 px (jedna linia), a przy 821 px
 * dwukolumnowa z kolumną 430 px (dwa wiersze).
 */
.mp-product__info { container-type: inline-size; }
.mp-product__form {
	--buy-h: 52px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}
.mp-product__form .mp-stepper { flex: none; height: var(--buy-h); }
.mp-product__form .mp-stepper button { height: 100%; }
.mp-product__form .mp-btn {
	--btn-px: 28px;
	min-height: var(--buy-h);
	font-size: 13px;
	white-space: nowrap;
	flex: 0 1 auto;   /* szeroka kolumna: naturalna długość; rozciągnięta ebookowa para miała 620 px */
}
@container (max-width: 519.98px) {
	.mp-product__form .mp-btn { --btn-px: 22px; flex: 1 1 auto; }
	/* Ze stepperem (książka): stepper + „Dodaj" w pierwszym wierszu, „Kup teraz"
	   pod nimi. Bez steppera (ebook) para mieści się obok siebie od ~390 px
	   kolumny i zawija sama. Bez :has() zawijanie jest naturalne. */
	.mp-product__form:has(.mp-stepper) .mp-product__add { flex: 1 1 0; min-width: 0; }
	.mp-product__form:has(.mp-stepper) .mp-product__buy { flex-basis: 100%; }
}
/* Wąska kolumna (< 360 px, telefon 360–390 px): węższe boki „Dodaj do
   koszyka", żeby napis (~167 px) mieścił się obok steppera (124 px) bez
   łamania — rząd potrzebuje wtedy 333 px. */
@container (max-width: 359.98px) {
	.mp-product__form .mp-product__add { --btn-px: 16px; }
}
/* Najwęższa kolumna (< 334 px, telefon 320–369 px): obok steppera zostawało
   ~150 px i napis łamał się w dwa wiersze w pigułce (audyt przy 320 px).
   Wszystkie trzy kontrolki na całą szerokość, jedna pod drugą, ta sama
   wysokość; stepper rozciągnięty (−  liczba  +). Zmierzone skryptem
   (narzedzia/naprawy1-sonda-rzad.mjs). */
@container (max-width: 333.98px) {
	.mp-product__form .mp-stepper { flex-basis: 100%; }
	.mp-product__form .mp-stepper input { flex: 1 1 auto; }
	.mp-product__form .mp-btn,
	.mp-product__form:has(.mp-stepper) .mp-product__add { flex: 1 1 100%; --btn-px: 16px; }
}

/* „✓ w koszyku" doklejane przez app.js po AJAX-owym dodaniu (markInCart). */
.mp-product__form + .mp-incart { margin-top: 14px; }
/* „W koszyku: 1 szt." — cicha linia pod rzędem zakupu, bez zielonego pudełka. */
.mp-product__added {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	font-size: 14px;
}
.mp-product__added span { font-weight: 700; color: var(--ok-text); }
.mp-product__added a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Oferta łączona: zdanie bez ikony, kwota w --ink. --muted 5,42:1 na --paper. */
.mp-saveline { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 56ch; }
.mp-saveline strong { color: var(--ink); }

/* Ten sam tytuł w dwóch postaciach to dwa osobne produkty — odnośnik jest
   jedynym mostem między nimi. Bez pudełka: zdanie z ceną. */
.mp-product__sibling {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--body);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.mp-product__sibling a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mp-product__sibling-price {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	color: var(--ink);
}

/* ── Sekcje pod kartą: nagłówek | treść ────────────────────────────── */
.mp-psecs { margin-top: clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.mp-psec {
	display: grid;
	grid-template-columns: var(--mp-product-cols);
	gap: 14px var(--mp-product-gap);
	padding: clamp(28px, 3.2vw, 44px) 0;
	border-top: 1px solid var(--line);
}
.mp-psec__title {
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
}
.mp-psec__body {
	max-width: 36em;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--body);
}

/* Szczegóły jak stopka redakcyjna: etykieta wersalikami | wartość, linie
   włoskowate między wierszami, bez ramki wokół. */
.mp-details { margin: 0; }
.mp-details__row {
	display: grid;
	grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15.5px;
	line-height: 1.5;
}
.mp-details__row:first-child { padding-top: 0; }
.mp-details__row:last-child { border-bottom: none; padding-bottom: 0; }
.mp-details__row dd { margin: 0; color: var(--ink); }
.mp-details__label {
	color: var(--muted);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding-top: 3px;
}

/* ── „Zanim książka do Ciebie dojedzie" / „Zobacz też" ────────────────
   Bez pudełek: pozycje otwiera linia włoskowata jak na liście ebooków.
   „Dodaj do koszyka" obrysem, „Zobacz produkt" zwykłym odnośnikiem — jedyną
   ciemną pigułką widoku zostaje rząd zakupu. */
.mp-related { margin-top: clamp(64px, 8vw, 120px); }
.mp-related__lead {
	max-width: 36em;
	margin: clamp(18px, 1.6vw, 24px) auto 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.55;
	color: var(--muted);
	text-wrap: balance;
}
.mp-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(24px, 4vw, 64px);
	margin-top: clamp(32px, 3.6vw, 52px);
}
.mp-related__card {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.mp-related__card img { display: block; width: 100%; height: auto; border-radius: var(--r-cover); box-shadow: var(--sh-thumb); }   /* rozmiar „medium" w pionie; kwadratowa miniatura WooCommerce ucinała tytuł na okładce */
.mp-related__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 19px; line-height: 1.2; margin-bottom: 4px; }
.mp-related__price { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin-bottom: 12px; }
.mp-related__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.mp-related__actions form.cart { display: flex; margin: 0; }
.mp-related__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--line-ui);
	text-underline-offset: 4px;
}
.mp-related__link:hover { color: var(--accent-text); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------
   Koszyk (strona) i kasa

   Nowy styl (etap sklepu, 14.09.2026): tytuł na osi z kreską jak w całym
   serwisie (koszyk ma go wreszcie widocznego), tabela pozycji na liniach
   włoskowatych, podsumowanie na piaskowym polu bez ramki — tym samym tonie
   co pole okładki na karcie produktu. Okruszki „Koszyk / Płatność" nad kasą
   zdjęte: pasek kroków w nagłówku mówi to samo.
   --------------------------------------------------------------------- */

.mp-page-title { margin-bottom: clamp(36px, 4.4vw, 64px); }

.mp-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(24px, 4vw, 44px);
	align-items: start;
}

/* ── Kasa: liczba kolumn nie może zależeć od liczby dzieci formularza ──
   checkout.js wstrzykuje ramkę komunikatów jako PIERWSZE dziecko form.checkout.
   Trzecie dziecko wybija repeat(auto-fit, …) z dwóch torów na trzy: zmierzone
   na 1440px 3 × 320px zamiast 2 × 502px. Tory trzeba usztywnić ZANIM rozepniemy
   ramkę na całą szerokość — element rozpięty 1/-1 sam blokuje zwijanie torów
   auto-fit i zostałaby trzecia, pusta kolumna.

   Koszyk (cart.php) ma samą klasę .mp-cols i zostaje na auto-fit. */
.woocommerce-checkout.mp-cols { grid-template-columns: minmax(0, 1fr); }

/* 682px, nie 700 ani 820 — to próg auto-fit wyliczony z clampów .mp-shop:
   kontener = vw − 2 × --pad-x (4vw w tym zakresie) = 0.92vw,
   gap = clamp(24px,4vw,44px) = 0.04vw, więc drugi tor wchodzi przy
   0.92vw ≥ 600 + 0.04vw → vw ≥ 681,8px. Dzięki temu kasa BEZ błędów
   nie drgnie na żadnej szerokości. */
@media (min-width: 682px) {
	.woocommerce-checkout.mp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Warianty bez opakowania .woocommerce-NoticeGroup pochodzą z drugiej gałęzi
   checkout.js — bez nich zostałyby zwykłym elementem siatki w pierwszej kolumnie. */
.woocommerce-checkout.mp-cols > .woocommerce-NoticeGroup,
.woocommerce-checkout.mp-cols > .woocommerce-error,
.woocommerce-checkout.mp-cols > .woocommerce-message,
.woocommerce-checkout.mp-cols > .woocommerce-info { grid-column: 1 / -1; }

/* Odstęp pod ramką daje już gap siatki (do 44px) — własny margines go dubluje. */
.woocommerce-checkout.mp-cols > .woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-checkout.mp-cols > .woocommerce-NoticeGroup .woocommerce-message,
.woocommerce-checkout.mp-cols > .woocommerce-NoticeGroup .woocommerce-info,
.woocommerce-checkout.mp-cols > .woocommerce-error,
.woocommerce-checkout.mp-cols > .woocommerce-message,
.woocommerce-checkout.mp-cols > .woocommerce-info { margin-bottom: 0; }

/* ── Góra ramki nie chowa się pod przyklejonym nagłówkiem ──
   Przyklejony stos (.mp-header + .mp-steps) ma 148px przy 390px i 113px przy
   1440px, a WooCommerce przewija zawsze do offset().top − 100. Na telefonie
   48px ramki lądowało pod paskiem.

   scroll-margin-top tu nie pomaga: checkout.js startuje animację PRZED
   .trigger('focus'), więc trwająca animacja nadpisuje przewinięcie od fokusu.
   Zostaje podniesienie górnej krawędzi pudełka; ujemny margines zdejmuje ten
   wzrost z układu, więc wysokość wiersza siatki się nie zmienia. */
.woocommerce-checkout.mp-cols > .woocommerce-NoticeGroup {
	padding-top: 30px;    /* 113 − 100 + 17 oddechu */
	margin-top: -30px;
}
@media (max-width: 600px) {
	.woocommerce-checkout.mp-cols > .woocommerce-NoticeGroup {
		padding-top: 64px;   /* 148 − 100 + 16 oddechu */
		margin-top: -64px;
	}
}

.mp-cart__head {
	display: grid;
	grid-template-columns: 1fr 110px 120px 40px;
	gap: 14px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--ink);
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.mp-cart__head span:nth-child(3) { text-align: right; }

.mp-cart__row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 16px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.mp-cart__prod { display: flex; gap: 18px; align-items: center; min-width: 0; flex: 1 1 220px; }
.mp-cart__thumb { width: 54px; height: 76px; object-fit: cover; border-radius: var(--r-cover); flex: none; box-shadow: var(--sh-thumb); }
.mp-cart__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 19px; line-height: 1.25; margin-bottom: 4px; }
.mp-cart__meta { font-size: 13.5px; color: var(--muted); }
.mp-cart__line {
	min-width: 92px;
	text-align: right;
	margin-left: auto;
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: 19px;
	color: var(--ink);
}

/* Te same cztery kolumny były opisane dwoma systemami układu: .mp-cart__head
   to grid 1fr 110px 120px 40px, a .mp-cart__row flex z margin-left: auto —
   wyrównać się nie mogły z definicji. Etykieta ILOŚĆ wisiała nad pustym
   miejscem na lewo od steppera, a kwota wystawała poza kolumnę SUMA, mimo że
   kreska nad wierszem obiecuje tabelę.

   Próg 1100px, nie 821px: poniżej ~1066px kolumna 1fr schodzi pod min-content
   .mp-cart__prod (163px) i miniatura z tytułem nachodziłaby na stepper. */
@media (max-width: 1099.98px) {
	.mp-cart__head { display: none; }

	/* .mp-cart__head niosło DWIE rzeczy: podpisy i border-bottom 1px --ink,
	   czyli jedyną mocną kreskę koszyka. Podniesienie progu z 820 na 1100
	   zabrało obie — lewa kolumna zaczynała się od razu miniaturą, bez górnej
	   krawędzi. Krecha 1px --ink to w tym arkuszu linia tabeli, nie podpis. */
	.mp-cart__head + .mp-cart__row { border-top: 1px solid var(--ink); }
}

/* Koszyk nie dzieli się po połowie. Przy auto-fit obie kolumny miały po 502px,
   więc na tor „produkt" zostawało 190px, a sam tytuł dostawał 120px i łamał się
   na cztery wiersze — przy podsumowaniu, które tyle miejsca nie potrzebuje.
   1,6fr / 1fr daje 815 / 509px: tytuł mieści się w jednym–dwóch wierszach,
   a podsumowanie jest nadal szersze niż to samo pole w kasie. */
@media (min-width: 1100px) {
	.woocommerce-cart .mp-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
	.mp-cart__row {
		display: grid;
		grid-template-columns: 1fr 110px 120px 40px;
		gap: 14px;
		align-items: center;
	}
	.mp-cart__row .mp-stepper { justify-self: start; }
	.mp-cart__line { min-width: 0; margin-left: 0; }
	/* padding ZOSTAJE — jego skasowanie zmniejszyłoby pole klikalne z 25 do 17px. */
	.mp-cart__remove { justify-self: end; }
}
.mp-cart__remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--muted);
	font-size: 18px;
	line-height: 1;
}
.mp-cart__remove:hover { color: var(--accent-text); }

/* „Przelicz koszyk" obrysem i „Kontynuuj zakupy" odnośnikiem w jednej linii. */
.mp-cart__foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 26px; }

/* Ciche odnośniki powrotu (koszyk, panel, kasa): --ink z podkreśleniem, nie
   pogrubiona czerwień — w nowym stylu czerwień to kreska, a nie trzecia akcja. */
.mp-cart__continue,
.mp-panel__continue,
.mp-back {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--line-ui);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.mp-cart__continue:hover,
.mp-panel__continue:hover,
.mp-back:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.mp-cart__continue { margin-left: auto; }

/* Pusty koszyk (strona): zdanie i jedna akcja na osi, bez przerywanej ramki. */
.mp-empty { padding: clamp(8px, 2vw, 24px) 0 clamp(24px, 4vw, 48px); text-align: center; }
.mp-empty p { margin-bottom: 26px; font-size: var(--fs-lead); color: var(--body); }

/*
 * Podsumowanie (koszyk i kasa): piaskowe pole bez ramki. Kontrasty na --sand
 * (#EFE7DC): --muted 4,92:1, --accent-text 5,15:1 (także pierścień fokusa),
 * --line-ui 3,42:1 (obrys kafelków dostawy, próg 3:1), --ink 14,39:1.
 */
.mp-summary {
	position: sticky;
	top: 130px;
	background: var(--sand);
	border-radius: var(--r-card);
	padding: clamp(22px, 2.4vw, 34px);
}
/* W trybie wymuszonych kolorów tło --sand znika — pole podsumowania zostaje ramką. */
@media (forced-colors: active) {
	.mp-summary { border: 1px solid CanvasText; }
}
.mp-summary__title {
	font-size: var(--fs-h3);
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}
.mp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
/* wc_price() zwraca kwotę opakowaną w <span class="woocommerce-Price-amount">
   WEWNĄTRZ <strong class="mp-total">, więc ten span był PIERWSZYM DZIECKIEM
   stronga i łapały go obie deskryptorowe reguły etykiety (0,1,1) — a te biją
   .mp-total (0,1,0). Skutki: „Do zapłaty" renderowało się 15px jak etykieta
   obok, a kwota przy „Suma częściowa" wychodziła --muted.
   Kombinator DZIECKA zamyka obie dziury naraz. */
.mp-row > span:first-child { color: var(--muted); }
.mp-row strong { font-weight: 700; color: var(--ink); }
.mp-summary__rows { display: flex; flex-direction: column; gap: 12px; }
.mp-rule { height: 1px; background: var(--line-ui); opacity: .45; margin: 6px 0; }
.mp-row--total { align-items: baseline; }
.mp-row--total > span:first-child { font-family: var(--font-ui); font-weight: var(--fw-ui); font-size: 15px; color: var(--ink); }
/* Zawężenie do .mp-row--total (0,2,0) jest konieczne dla grubości:
   .mp-row strong (0,1,1) bije .mp-total (0,1,0), więc bez tego suma byłaby
   antykwą w wadze 700 — pogrubieniem dorysowanym przez przeglądarkę. */
.mp-row--total .mp-total {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: 30px;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.mp-summary .mp-btn { margin-top: 24px; }
.mp-summary__note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--muted); }

.mp-checkout__sections { display: flex; flex-direction: column; gap: clamp(36px, 3.6vw, 52px); }
.mp-checkout h2,
.mp-block-title {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}
.mp-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 16px;
}
.mp-field--full { grid-column: 1 / -1; }
/* Bez JS WooCommerce dokleja pod polem KRAJ <noscript><button>„Zaktualizuj kraj
   / region" — jedyny przycisk kasy rysowany przez system (szare pudełko pod
   polem 50 px). Wygląd cichego przycisku motywu; działa jak „Przelicz dostawę"
   w podsumowaniu (ta sama nazwa pola). */
.mp-field button[name="woocommerce_checkout_update_totals"] {
	align-self: flex-start;
	min-height: 44px;
	margin-top: 4px;
	padding: 6px 18px 6px calc(18px + 0.14em);
	background: transparent;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-pill);
	font-family: var(--font-ui);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
}
.mp-field button[name="woocommerce_checkout_update_totals"]:hover { border-color: var(--ink); }

/* Przełącznik „Chcę fakturę na firmę" i pola firmy pod nim (dawniej style inline). */
.mp-invoice-toggle { margin-top: 20px; }
.mp-fields--invoice { margin-top: 16px; }

/* ── Pole KRAJ (selectWoo) ─────────────────────────────────────────
   Przy „Lokalizacjach sprzedaży" z więcej niż jednym krajem (strefa „Europa")
   WooCommerce zamienia select na selectWoo: <span class="select2-selection">
   z własnym arkuszem. Rysowało się jako szare pudełko 28 px obok pól 50 px —
   jedyny element kasy spoza systemu formularza. Tu dostaje wysokość, obrys,
   strzałkę i stany pól motywu. Lista rozwijana jest doklejana do <body>,
   więc jej selektory nie mogą zaczynać się od .mp-field. */
.mp-field .select2-container { width: 100% !important; }   /* selectWoo wpisuje szerokość inline w px z chwili startu */
.mp-field .select2-container .select2-selection--single {
	height: 50px;
	background-color: #fff;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-field);
}
.mp-field .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 42px 0 15px;
	line-height: 48px;
	font-size: 16px;
	color: var(--ink);
}
.mp-field .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	width: 22px;
	height: 48px;
}
.mp-field .select2-container .select2-selection--single .select2-selection__arrow b { border-top-color: var(--muted); }
.mp-field .select2-container--open .select2-selection--single .select2-selection__arrow b { border-bottom-color: var(--ink); }
.mp-field .select2-container--focus .select2-selection--single,
.mp-field .select2-container--open .select2-selection--single { border-color: var(--ink); }
/* Arkusz selectWoo zdejmuje obrys fokusa — wraca pierścień serwisu. */
.mp-field .select2-container .select2-selection--single:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}
.mp-field.woocommerce-invalid .select2-container .select2-selection--single {
	border-color: var(--err);
	background-color: var(--err-bg);
	box-shadow: inset 3px 0 0 0 var(--err);
}
.select2-container--default .select2-dropdown {
	border-color: var(--line-ui);
	border-radius: var(--r-field);
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-field);
	font-size: 16px;   /* poniżej 16 px iOS powiększa ekran przy dotknięciu */
}
.select2-container--default .select2-results__option { padding: 9px 14px; }
/* Biel na --btn 16,4:1; zaznaczony kraj --sand pod --ink 14,39:1. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--btn); color: #fff; }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] { background: var(--sand); color: var(--ink); }

/* ── Pole z błędem ──────────────────────────────────────────────────
   Dotąd błędne pole wyglądało identycznie jak poprawne: to samo białe tło,
   ta sama ramka. Klasę .woocommerce-invalid wiesza samo WooCommerce na
   .form-row, a .form-row to u nas .mp-field.

   Krecha 3px po lewej i tło --err-bg to ten sam materiał, co ramka zbiorcza
   nad formularzem — pole i ramka mówią jednym językiem. box-shadow: inset
   nie rusza pudełka, więc nic nie skacze przy przełączeniu stanu. */
.mp-field.woocommerce-invalid > label { color: var(--err); }

.mp-field.woocommerce-invalid input,
.mp-field.woocommerce-invalid select,
.mp-field.woocommerce-invalid textarea {
	border-color: var(--err);
	background: var(--err-bg);
	box-shadow: inset 3px 0 0 0 var(--err);
}

/* Ścieżka natywna — OSOBNA reguła, żeby nieznane :user-invalid nie zabrało
   ze sobą gałęzi WooCommerce (nieprawidłowy selektor unieważnia całą listę).
   Łapie też literówkę w e-mailu na /kontakt, gdzie klasy Woo nie powstają. */
.mp-field input:user-invalid,
.mp-field select:user-invalid,
.mp-field textarea:user-invalid {
	border-color: var(--err);
	background: var(--err-bg);
	box-shadow: inset 3px 0 0 0 var(--err);
}
.mp-field:has(:user-invalid) > label { color: var(--err); }

/* Pole aktywne wraca na białe — bez tego fokus i błąd wyglądają identycznie. */
.mp-field.woocommerce-invalid input:focus,
.mp-field.woocommerce-invalid select:focus,
.mp-field.woocommerce-invalid textarea:focus { background: #fff; }
.mp-field input:user-invalid:focus,
.mp-field select:user-invalid:focus,
.mp-field textarea:user-invalid:focus { background: #fff; }

/* ── Komunikat pod polem ────────────────────────────────────────────
   <p class="checkout-inline-error-message"> dokleja checkout.js, a motyw
   nigdy go nie stylował — dziedziczył 16px/--ink z body i był WIĘKSZY niż
   etykieta nad polem. Hierarchia odwrócona.

   Drabinka po zmianie: 12,5px podpowiedź (--muted) / 13px błąd (--err)
   / 16px wartość pola. Sygnał niesie pole, nie rozmiar pisma. */
.mp-field .checkout-inline-error-message {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--err);
	text-wrap: pretty;
}

/* Kafle metod płatności. Tło białe jak pola formularza obok. */
.mp-pay { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.mp-pay li {
	border: 1px solid var(--line-ui);
	border-radius: var(--r-block);
	background: #fff;
	transition: border-color .14s var(--ease);
}
/* Wybrany kafel miał dokładnie tę samą ramkę co niewybrane — jedyną różnicą
   była kropka w radiu. Co gorsza hover dawał border-color: --ink, czyli
   NAJECHANIE na niewybrany kafel wyglądało mocniej niż faktyczny wybór.

   Nowy styl: struktura to linie włoskowate, więc STAN niesie ciemna krawędź
   podwojona cieniem wewnętrznym (2px --btn) — jak ciemna pigułka głównego
   przycisku. Czerwień odpada: to ozdoba i kolor błędu. Hover zostaje na
   1px --muted, więc hover i wybór różnią się grubością i odcieniem.

   Bez cienia: w tym arkuszu cień mają wyłącznie obiekty fotograficzne,
   nigdy kontener UI. Papierowy język komunikuje stan krawędzią, nie uniesieniem. */
.mp-pay li:hover { border-color: var(--muted); }

.mp-pay li:has(input[type="radio"]:checked) {
	border-color: var(--btn);
	box-shadow: inset 0 0 0 1px var(--btn);
}
.mp-pay label {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	margin: 0;
}
.mp-pay__name { display: block; font-family: var(--font-ui); font-weight: var(--fw-ui); font-size: 15.5px; }
.mp-pay__desc { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.mp-pay .payment_box { padding: 0 18px 14px 50px; font-size: 13px; color: var(--muted); }
.mp-pay .payment_box p { margin: 0; }

.mp-order-items { margin-bottom: 16px; }
.mp-order-item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid rgba(132, 122, 113, .35);   /* --line-ui przygaszone: --line (1,39:1 na --paper) na --sand ginęło */
}
.mp-order-item img { width: 34px; height: 48px; object-fit: cover; border-radius: var(--r-cover); flex: none; }
.mp-order-item__name { flex: 1; font-size: 14.5px; line-height: 1.35; }
.mp-order-item__name span { color: var(--muted); }
.mp-order-item__line { font-weight: 700; font-size: 14.5px; white-space: nowrap; }

.mp-terms { display: flex; gap: 10px; margin-top: 20px; font-size: 13.5px; line-height: 1.5; cursor: pointer; }

/* ── Zgoda na regulamin: błąd widoczny przy kontrolce ───────────────
   Opakowanie (woocommerce/checkout/terms.php) daje checkout.js punkt
   zaczepienia; tu tylko wygląd. W stanie błędu karta rośnie o ~26px,
   co sticky top:130px wytrzymuje, a poniżej 820px .mp-summary jest
   i tak position: static. */
.mp-terms-row { display: block; }

.mp-terms-row .checkout-inline-error-message {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--err);
}

/* Sygnał przy samej kontrolce — bez plamy tła, żeby zgoda nie krzyczała
   głośniej niż pola w lewej kolumnie. */
.mp-terms-row.woocommerce-invalid input[type="checkbox"] {
	outline: 2px solid var(--err);
	outline-offset: 2px;
}

/* Reguła wyżej deklaruje dokładnie to samo, co globalny :focus-visible,
   i ma wyższą specyficzność — tabulator na błędnej zgodzie nie zmieniał NIC,
   a to jedyna kontrolka blokująca złożenie zamówienia. Pierścień fokusa
   (--focus) i sygnał błędu (--err) to w nowym stylu dwie czerwienie, więc
   fokus na błędnej zgodzie schodzi na --ink. Geometria bez zmian, więc karta
   podsumowania nie drga. */
.mp-terms-row.woocommerce-invalid input[type="checkbox"]:focus-visible {
	outline-color: var(--ink);
}
.mp-back {
	display: block;
	width: fit-content;
	margin: 16px auto 0;
	text-align: center;
}

/* Komunikaty Woo w szacie projektu. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.mp-notice {
	margin: 0 0 26px;
	border: 1px solid var(--err);
	border-radius: var(--r-block);
	padding: 16px 20px;
	background: var(--err-bg);
	font-size: 14.5px;
	line-height: 1.55;
	list-style: none;
}
/* Potwierdzenie — zielone. */
.woocommerce-message {
	border-color: var(--ok);
	background: var(--ok-bg);
}

/* Informacja neutralna. .woocommerce-info to u Woo „koszyk jest pusty",
   prośba o kupon, komunikat o wysyłce — nic się nie udało ani nie zepsuło.
   .mp-notice (thankyou.php) to „płatność nie została jeszcze zaksięgowana",
   czyli normalny stan po przelewie — dziedziczył ramkę błędu, więc udana
   transakcja wyglądała jak awaria. */
.woocommerce-info,
.mp-notice {
	border-color: var(--line);
	background: var(--paper2);
	color: var(--body);
	box-shadow: inset 3px 0 0 0 var(--muted);
}

.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; }
.woocommerce-error .button, .woocommerce-message .button { display: none; }

/* ── Wnętrze ramki błędów ───────────────────────────────────────────
   Siedem komunikatów przy `li { margin: 0 }` czytało się jak jeden zbity
   akapit. Po rozpięciu ramki na całą szerokość jest gorzej: na 1440px
   pudełko ma 1048px, czyli ~150 znaków w wierszu przy 14,5px. */
.woocommerce-error li + li,
.woocommerce-message li + li,
.woocommerce-info li + li { margin-top: 10px; }

/* Kropka 7px na wysięgniku. Wcięcie sprawia, że drugi wiersz komunikatu
   nie udaje początku następnego. */
.woocommerce-error li { position: relative; padding-left: 20px; }
.woocommerce-error li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.58em;
	width: 7px;
	height: 7px;
	border-radius: var(--r-pill);
	background: var(--err);
}

/* Dwie kolumny tną miarę do ~70 znaków. :has() pilnuje, żeby przy jednym
   czy dwóch błędach nie powstała ramka z pustą prawą połową. */
@media (min-width: 900px) {
	.woocommerce-checkout .woocommerce-error:has(li:nth-child(4)) {
		columns: 2;
		column-gap: 36px;
	}
	.woocommerce-checkout .woocommerce-error:has(li:nth-child(4)) li {
		break-inside: avoid;
	}
}

/* Przy włączonym JS każde z tych zdań stoi drugi raz pod swoim polem.
   Ramki nie chowamy — bez JS to jedyny kanał błędów, ma role="alert"
   i jest celem przewinięcia. Zdejmujemy z niej nacisk, żeby czytała się
   jako spis skrótów do pól: checkout.js opakowuje każdą pozycję w <a>,
   więc podkreślenie to nie ozdoba, tylko brakująca informacja,
   że w te wiersze da się kliknąć. */
html.js .woocommerce-checkout .woocommerce-error { font-size: 13.5px; }
.woocommerce-error a {
	color: var(--err);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-error a:hover { color: var(--ink); }

/* ---------------------------------------------------------------------
   Potwierdzenie

   Nowy styl: jak paragon w kolumnie na osi strony (do 820 px) — potwierdzenie
   płatności cichym wierszem, tytuł z kreską, dane zamówienia w wierszu na
   liniach włoskowatych zamiast siatki kafli, bloki (książka, pliki, co dalej)
   oddzielone liniami zamiast ramek.
   --------------------------------------------------------------------- */

/* Potwierdzenie trzyma kolumnę sklepu, gdy renderuje się samo; wewnątrz
   .mp-shop (niżej) dostaje kolumnę paragonu. */
.mp-done {
	max-width: var(--w-shop);
	margin: 0 auto;
	padding: clamp(28px, 5vw, 62px) var(--pad-x) clamp(40px, 5vw, 64px);
}
/* Potwierdzenie renderuje się WEWNĄTRZ <div class="mp-shop">: page.php owija
   w nią gałąź is_cart() || is_checkout(), a is_checkout() obejmuje też endpoint
   order-received. .mp-done dokładało więc padding drugi raz.

   POTOMEK, nie dziecko: shortcode WooCommerce bezwarunkowo wkłada między
   .mp-shop a .mp-done własne <div class="woocommerce">. Kombinator `>`
   dałby regułę martwą. */
.mp-shop .mp-done {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
}

.mp-done__head { text-align: center; margin-bottom: clamp(32px, 3.6vw, 52px); }
/* „✓ Płatność zaksięgowana": potwierdzenie wersalikami w --ok-text (5,51:1),
   bez zielonej pigułki. Znak ✓ i słowo niosą znaczenie, nie sam kolor. */
.mp-done__badge {
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ok-text);
	margin-bottom: 18px;
}
.mp-done__lead {
	max-width: 36em;
	margin: clamp(20px, 1.8vw, 28px) auto 0;
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--body);
	text-wrap: balance;
}
.mp-done__head .mp-notice { text-align: left; margin-bottom: 26px; }

/* Weryfikacja adresu e-mail (link do potwierdzenia otwarty poza sesją
   zakupu): woocommerce/checkout/order-received.php rysuje nagłówek,
   form-verify-email.php formularz. Dwa osobne bloki w wąskiej kolumnie na
   osi, pole jak w kasie, jedna ciemna pigułka na całą szerokość kolumny. */
.mp-verify { max-width: 26rem; margin-left: auto; margin-right: auto; }
.mp-done__head.mp-verify { max-width: 36rem; }
.mp-verify__form { display: flex; flex-direction: column; gap: 22px; padding-bottom: clamp(24px, 3vw, 40px); }
.mp-verify__lead { text-align: center; font-size: 16px; line-height: 1.55; color: var(--body); text-wrap: balance; }
.mp-verify__form .required { color: var(--muted); text-decoration: none; }

/* Numer, data, suma, płatność, dostawa — jeden wiersz danych między liniami. */
.mp-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50% - 12px, 140px), 1fr));
	gap: 0 24px;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--line);
	margin-bottom: clamp(36px, 4vw, 56px);
}
.mp-tile { padding: 16px 0; }
.mp-tile__label {
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
	margin-bottom: 5px;
}
.mp-tile__value { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 18px; color: var(--ink); }

/* Bloki „Twoje zamówienie w przedsprzedaży" i „Pliki do pobrania". */
.mp-reserved,
.mp-downloads {
	padding-bottom: clamp(28px, 3.2vw, 44px);
	margin-bottom: clamp(28px, 3.2vw, 44px);
	border-bottom: 1px solid var(--line);
}
.mp-reserved__label,
.mp-downloads .mp-block-title {
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: 12px;
}
.mp-reserved__lead { font-size: 16px; line-height: 1.6; color: var(--body); max-width: 56ch; margin-bottom: 22px; }
.mp-reserved__row { display: flex; align-items: center; gap: 18px; }
/* Miało SAMO width — bez wysokości i bez object-fit, więc kwadratowe źródło
   zostawało kwadratem i na stronie domykającej zakup okładka była jedynym
   obrazem w sklepie, który nie jest pionowy. 62×88 trzyma wspólną proporcję
   z resztą ścieżki. */
.mp-reserved__row img {
	flex: none;
	width: 62px;
	height: 88px;
	object-fit: cover;
	object-position: top;
	border-radius: var(--r-cover);
	box-shadow: var(--sh-thumb);
}
.mp-reserved__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(19px, 2vw, 22px); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.mp-reserved__note { margin-top: 4px; font-size: 13.5px; color: var(--muted); }

.mp-downloads__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}
.mp-downloads__row img { width: 42px; height: 60px; object-fit: cover; border-radius: var(--r-cover); }
.mp-downloads__name { flex: 1; min-width: 140px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 18px; }
.mp-downloads__links { display: flex; gap: 8px; flex-wrap: wrap; }
/* Pobranie pliku to główna akcja tego bloku — obrys pigułki, wersaliki jak przyciski. */
.mp-downloads__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid var(--ink);
	border-radius: var(--r-pill);
	padding: 6px 18px 6px calc(18px + 0.14em);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}
.mp-downloads__links a:hover { background: var(--btn); border-color: var(--btn); color: var(--paper); }
.mp-downloads__note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.mp-downloads__note--premiera { margin-bottom: 10px; }

.mp-next {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 24px clamp(24px, 4vw, 56px);
}
.mp-next strong { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 20px; display: block; margin-bottom: 8px; color: var(--ink); }
.mp-next p { font-size: 15px; line-height: 1.6; color: var(--body); }
.mp-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(40px, 4.4vw, 64px); }
@media (max-width: 600px) {
	.mp-done__actions .mp-btn { flex: 1 1 100%; }   /* dwie pigułki różnej długości pod sobą → jeden pełny rząd każda */
}

/* „Szczegóły zamówienia" i adres z haka woocommerce_thankyou (szablony
   WooCommerce, arkusz Woo wyłączony). Bez tych reguł renderowały się jako
   surowa tabela z wyśrodkowanymi nagłówkami i adresem kursywą pod
   dopracowanym paragonem. Nowy styl: tytuł antykwą jak bloki wyżej, tabela
   na liniach włoskowatych, kwoty do prawej. */
.mp-done .woocommerce-order-details,
.mp-done .woocommerce-customer-details {
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: clamp(28px, 3.2vw, 44px);
	border-top: 1px solid var(--line);
}
.mp-done .woocommerce-order-details__title,
.mp-done .woocommerce-column__title {
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 16px;
}
.mp-done .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	color: var(--body);
}
.mp-done .woocommerce-table--order-details th,
.mp-done .woocommerce-table--order-details td {
	padding: 11px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
	font-weight: 400;
}
.mp-done .woocommerce-table--order-details thead th {
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom-color: var(--ink);
}
.mp-done .woocommerce-table--order-details .product-total,
.mp-done .woocommerce-table--order-details tfoot td { text-align: right; padding-left: 16px; white-space: nowrap; }
.mp-done .woocommerce-table--order-details tfoot th { color: var(--muted); }
.mp-done .woocommerce-table--order-details tfoot td small { color: var(--muted); font-size: 12.5px; white-space: normal; }
.mp-done .woocommerce-table--order-details a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-ui); text-underline-offset: 3px; }
.mp-done .woocommerce-table--order-details .product-quantity { font-weight: 400; color: var(--muted); }
.mp-done .woocommerce-customer-details address {
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
}
.mp-done .woocommerce-customer-details address p { margin: 0; }
.mp-done .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 24px clamp(24px, 4vw, 56px);
}

/* ---------------------------------------------------------------------
   Panel koszyka
   --------------------------------------------------------------------- */

.mp-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(28, 24, 21, 0.38);   /* --ink z przezroczystością */
	opacity: 0;
	transition: opacity 260ms var(--ease);
}
.mp-overlay.is-open { opacity: 1; }

.mp-panel {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 61;
	width: min(440px, 92vw);
	height: 100dvh;
	background: var(--paper);
	border-left: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 260ms var(--ease);
}
.mp-panel.is-open { transform: translateX(0); }
.mp-panel.is-busy { opacity: .55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.mp-panel, .mp-overlay { transition: none; }
}

.mp-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 14px clamp(20px, 5vw, 28px);
	border-bottom: 1px solid var(--line);
	flex: none;
}
.mp-panel__title { font-size: 26px; letter-spacing: -0.01em; }
.mp-panel__title span { font-size: 0.7em; color: var(--muted); }
/* Zamknięcie bez obrysu: pole 44 × 44 px, tło --sand na najechaniu — jak ikona
   koszyka w nagłówku, której panel jest przedłużeniem. */
.mp-panel__close {
	margin-left: auto;
	background: none;
	border: 0;
	border-radius: var(--r-pill);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink);
	transition: background-color .14s var(--ease);
}
.mp-panel__close:hover { background: var(--sand); }
@media (forced-colors: active) {
	.mp-panel__close { border: 1px solid ButtonText; }
}

.mp-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 6px clamp(20px, 5vw, 28px) 26px;
	display: flex;
	flex-direction: column;
}
.mp-panel__items { list-style: none; margin: 0 0 22px; padding: 0; }
.mp-panel__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}
.mp-panel__img { width: 54px; height: 76px; object-fit: cover; border-radius: var(--r-cover); flex: none; box-shadow: var(--sh-thumb); }

/* Źródłem był 'woocommerce_gallery_thumbnail', czyli kwadrat wycięty ze ŚRODKA
   pionowej okładki 800×1315 — z okładki zostawało „niemiła. TO MENOPAUZA",
   bez nazwiska autorki i bez pierwszego wiersza tytułu, w panelu widzianym
   przy każdym dodaniu do koszyka. Po przejściu na 'medium' (proporcje
   zachowane) kadr trzeba zakotwiczyć u góry, żeby przy dopasowaniu do gniazda
   docinał się dół, a nie tytuł książki. */
.mp-panel__img,
.mp-cart__thumb,
.mp-order-item img,
.mp-downloads__row img { object-position: top; }
.mp-panel__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* .mp-panel__info to flex-column BEZ align-items, więc dzieci dostawały
   domyślne stretch: stepper „− 1 +" rozciągał się na ~245px (desktop)
   i ~164px (390px), choć zawartość potrzebuje ~90px. Nazwa i meta mają dalej
   zajmować całą szerokość, więc align-items na kontenerze nie wchodzi w grę. */
.mp-panel__info .mp-stepper { align-self: flex-start; }
.mp-panel__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 18px; line-height: 1.25; }
.mp-panel__meta { font-size: 13px; color: var(--muted); }

/* Ebook sprzedajemy pojedynczo — zamiast steppera sama liczba, w tej samej
   wadze co kwota obok, żeby wiersz nie zrobił się lżejszy od pozostałych. */
.mp-panel__qty-fixed,
.mp-cart__qty-fixed {
	font-family: var(--font-ui);
	font-weight: var(--fw-ui);
	font-size: 15px;
	color: var(--muted);
}
.mp-panel__right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.mp-panel__line { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 18px; white-space: nowrap; color: var(--ink); }
.mp-panel__remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--muted);
	font-size: 18px;
	line-height: 1;
}
.mp-panel__remove:hover { color: var(--accent-text); }

.mp-panel__totals { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.mp-panel__rule { height: 1px; background: var(--line); margin: 4px 0; }
.mp-panel__continue { align-self: center; margin-top: 16px; }
/* Pusty panel: zdanie i jedna akcja na osi, bez przerywanej ramki. */
.mp-panel__empty {
	padding: 36px 8px;
	text-align: center;
	margin: auto 0;
}
.mp-panel__empty p { margin-bottom: 22px; font-family: var(--font-display); font-size: 22px; color: var(--ink); }

body.mp-locked { overflow: hidden; }

/* ---------------------------------------------------------------------
   Widok mobilny (≤ 820px)
   --------------------------------------------------------------------- */

@media (max-width: 820px) {
	.mp-nav { display: none; }
	.mp-burger { display: flex; }

	/* W pasku tylko „Zamów książkę", ikona koszyka i przycisk menu
	   (zamawiający, 14.09.2026). Grupa akcji wypełnia pasek: przycisk na
	   początku (wariant z nim po prawej zostawiał pustą lewą połowę paska),
	   ikona dosunięta do przycisku menu. Między ikoną a menu 6 px: oba pola
	   44 px mają własny luz wokół kreski, więc czytają się jako para, a nie
	   dwa osobne elementy. */
	.mp-header__bar { min-height: 64px; padding-top: 10px; padding-bottom: 10px; gap: 6px; }
	.mp-header__action { flex: 1 1 auto; min-width: 0; margin-left: 0; }
	.mp-header__action .mp-carticon { margin-left: auto; }

	.mp-menu-mobile[hidden] { display: none; }
	/* Menu jest w przyklejonym nagłówku. Na niskim ekranie (telefon poziomo,
	   powiększenie 400%) otwarte menu było wyższe niż okno, a dolnych pozycji
	   nie dało się przewinąć do widoku — nagłówek jedzie razem z oknem (WCAG
	   1.4.10, 2.4.11; audyt 15.09.2026: „Kontakt" poza oknem przy 568 × 320).
	   Menu przewija się więc we własnym pudełku: okno minus pasek (64 px + linia)
	   i — w sklepie — pasek kroków (--mp-kroki-h). Fokus z klawiatury sam
	   przewija pudełko do pozycji. */
	.mp-menu-mobile {
		max-height: calc(100vh - 65px - var(--mp-kroki-h, 0px));
		max-height: calc(100dvh - 65px - var(--mp-kroki-h, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.mp-header--shop { --mp-kroki-h: 46px; }

	.mp-hero { padding-top: clamp(28px, 7vw, 48px); }
	/* Na telefonie i tablecie obraz PIERWSZY, pod nim tytuł i opis (decyzja
	   zamawiającego 14.09.2026). W DOM tekst zostaje przed obrazem — czytnik
	   ekranu i wyszukiwarka dostają h1 na początku; kolejność wizualną zmienia
	   siatka (grid-row) albo — na stronie głównej — tekst zaczyna się pod
	   książką na zdjęciu. Dotyczy obu landingów: książki (zdjęcie)
	   i ebooków (para okładek). */
	.mp-hero { grid-template-columns: 1fr; }   /* na tablecie też jedna kolumna — „poniżej", nie „obok" */

	/* Reguły muszą stać PO .mp-hero wyżej (ta sama specyficzność).
	   Hero z okładkami: piaskowy pas z parą okładek na całą szerokość okna,
	   pod nim tekst.

	   Hero ze zdjęciem: <picture> podaje tu zdjęcie telefonu (hero-telefon,
	   1080 × 1920, kadr z góry). Zdjęcie na całą szerokość, przyklejone do
	   góry hero; tekst leży na gładkim kamieniu POD książką. Książka zajmuje
	   x 19–77% / y 8–49% pliku (lewy dolny róg najniżej), kawa y 0–21% przy
	   prawej krawędzi — tekst zaczyna się na 52% wysokości zdjęcia
	   (--hero-tel-tekst), czyli 3% zdjęcia (~20 px przy 390 px) pod
	   najniższym rogiem książki.

	   Tekst (nagłówek, cztery akapity, przycisk) jest wyższy niż kamień pod
	   książką: przy 390 px zdjęcie ma 693 px, a hero ~1060. Hero rośnie, a pod
	   zdjęciem ciągnie się tło --hero-kamien — średni kolor ostatnich wierszy
	   zdjęcia. Dolne 30% zdjęcia przechodzi w ten kolor gradientem (::after),
	   więc zamiast krawędzi faktura kamienia miękko wygasa. Na tablecie
	   w pionie (600–820 px) tekst mieści się na zdjęciu, a hero ucina
	   niepotrzebny dół kamienia (overflow: hidden).

	   Szerokość zdjęcia to 100vw, a nie 100%: padding tekstu liczy wysokość
	   zdjęcia z szerokości okna, a hero ma jej pełną szerokość. Pasek
	   przewijania w oknie przeglądarki na komputerze (≤ 17 px) daje najwyżej
	   ~15 px większy odstęp pod książką — w bezpieczną stronę. */
	.mp-hero--photo,
	.mp-hero--covers { padding: 0; min-height: 0; margin-bottom: 0; grid-template-columns: minmax(0, 1fr); }
	.mp-hero--photo {
		--hero-tel-tekst: 0.52;
		overflow: hidden;
		margin-bottom: 10px;   /* jak na desktopie: kamień, szczelina, linia włoskowata — bez szczeliny linia zlewała się z krawędzią hero */
		background: var(--hero-kamien);
	}
	.mp-hero--photo .mp-hero__photo {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		aspect-ratio: 9 / 16;
		container-type: normal;
	}
	.mp-hero--photo .mp-hero__photo::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 30%;
		background: linear-gradient(to bottom, transparent, var(--hero-kamien) 92%);   /* przeglądarki mieszają z przezroczystością bez szarego nalotu (alfa premultiplikowana) */
	}
	.mp-hero--photo .mp-hero__img { object-position: 50% 0%; }
	.mp-hero--covers .mp-hero__media { padding: clamp(36px, 9vw, 64px) var(--pad-x); }
	.mp-hero__cover-link { max-width: 220px; }
	.mp-hero--covers .mp-hero__text { grid-column: 1; grid-row: 2; padding: clamp(30px, 7vw, 52px) var(--pad-x) clamp(40px, 8vw, 60px); }
	.mp-hero--photo .mp-hero__text {
		grid-column: 1;
		grid-row: 1;
		padding: calc(100vw * 16 / 9 * var(--hero-tel-tekst)) var(--pad-x) clamp(40px, 8vw, 60px);
	}
	.mp-hero--photo .mp-hero__actions,
	.mp-hero--covers .mp-hero__actions { width: 100%; align-items: center; }
	.mp-hero--photo .mp-hero__buy { width: min(100%, 415px); }   /* formularz albo — gdy książka jest w koszyku — opakowanie odnośnika */
	.mp-hero--photo .mp-btn--lg { width: 100%; }
	.mp-hero--covers .mp-btn--lg,
	.mp-ctabar .mp-btn--lg { width: min(100%, 415px); }
	.mp-ctabar__form { width: 100%; justify-content: center; }

	/* Cele dotykowe: nic poniżej 44px. */
	.mp-btn, .mp-cta, .mp-social a, .mp-related__link { min-height: 44px; }
	.mp-btn--lg { --btn-px: 24px; min-height: 56px; font-size: clamp(13.5px, 3.6vw, 16px); }
	.mp-stepper button { width: 44px; height: 46px; }
	.mp-stepper--sm button { width: 40px; height: 40px; }
	.mp-panel__close { width: 44px; height: 44px; }

	/* Krzyżyk „usuń" i „Kontynuuj zakupy" też są celami dotykowymi, a w liście
	   wyżej ich zabrakło. Zmierzone przy 390px: 21,5×26, 25,5×26 i 314×20px —
	   jedyna NIEODWRACALNA akcja w koszyku miała najmniejszy cel dotykowy
	   (21,5px nie przechodzi nawet progu 24px z WCAG 2.2 SC 2.5.8).
	   Pole rośnie W LEWO: zostawiamy poziomy padding i dociskamy glif do prawej,
	   żeby × nie odjechał od prawej krawędzi ceny. */
	.mp-panel__remove,
	.mp-cart__remove {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
	}
	.mp-panel__remove { padding: 0 6px; }
	.mp-cart__remove  { padding: 0 8px; }
	.mp-panel__continue { min-height: 44px; margin-top: 4px; }
	.mp-faq__q { padding: 20px 0; min-height: 44px; }

	.mp-cart__head { display: none; }
	.mp-cart__line { min-width: 0; }


	/* Karta produktu jednokolumnowa. Bez sticky na formularzu: prostokąt
	   ograniczający sticky to rodzic formularza (.mp-product__info
	   w single-product.php), a ten zaczyna się na .mp-product__title —
	   przeglądarka nie mogła cofnąć paska wyżej i dociskała go NA tytuł.
	   Efekt: h1 nie było widać wcale, cena przecięta poziomo w połowie glifów,
	   a „Kup teraz" wypadało poza dolną krawędź okna. Przy 768px to samo
	   zjadało akapit leadu. Przyklejony był i tak tylko przez kilkanaście
	   procent długości strony i gasł przed zakładkami opisu.

	   Trwałe CTA na telefonie wymaga position: fixed na OSOBNYM elemencie
	   poza tym <div> — to zmiana znaczników i osobna decyzja, nie poprawka
	   w tym bloku. */
	.mp-product__top,
	.mp-psec { grid-template-columns: minmax(0, 1fr); }
	/* Pole okładki niższe: na telefonie pod nim od razu tytuł i cena. */
	.mp-product__frame { padding: 28px 24px; }
	.mp-product__frame img { width: min(62%, 260px); }
	.mp-product__frame .mp-mockup-crop { max-width: 280px; }
	.mp-feature__media { padding: 24px; }
	.mp-feature__media .mp-coverlink { max-width: 280px; }
}

/* Przycisk nagłówka tylko dla telefonu — w sklepie na desktopie jego miejsce
   zajmuje koszyk (inc/woo.php, mendopauza_header_action). */
@media (min-width: 821px) {
	.mp-cta--tylko-telefon { display: none; }
}

/* Pasek kroków na telefonie (≤ 600 px; pełna zawartość ma ~537 px).
   Dotąd zawijał się w dwa wiersze wyrównane do lewej, z samotnym
   „4 · POTWIERDZENIE" w drugim — a na desktopie stoi w jednym wierszu na osi.
   Teraz ten sam układ w wersji zwartej: nieaktywne kroki pokazują sam numer,
   bieżący numer z nazwą, między nimi te same kreski. Nazwy nieaktywnych
   kroków zostają w nazwie odnośnika dla czytnika (wzór .screen-reader-text,
   nie display: none), więc „1" czyta się jako „1 · Sklep". Pole numeru
   ma min. 24 × 32 px (WCAG 2.5.8). Pasek ma jeden wiersz, ~46 px
   (--mp-kroki-h w bloku ≤ 820 px). */
@media (max-width: 600px) {
	.mp-steps__inner { gap: 4px; padding-top: 6px; padding-bottom: 6px; }
	.mp-steps__item { min-width: 24px; min-height: 32px; justify-content: center; padding: 6px; }
	.mp-steps__item:not(.is-active) .mp-steps__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (max-width: 420px) {
	.mp-related__card { grid-template-columns: 64px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Bez JavaScriptu

   Elementy, które normalnie zwija skrypt, mają w znacznikach atrybut
   `hidden`. Gdy skryptu nie ma, nikt ich nie rozwinie — więc pokazujemy
   je z powrotem i chowamy przełączniki, które i tak by nie zadziałały.
   --------------------------------------------------------------------- */

/* Jedno `display: block` dla wszystkich spłaszczało kontenery flex.
   .mp-ecard__desc trzyma odstępy WYŁĄCZNIE flexowym `gap` (reguła globalna
   zeruje `p { margin: 0 }`), więc bez skryptu akapity stykały się na zero.
   Menu mobilne i odpowiedź FAQ są blokowe od początku i zostają na `block`.
   Zakładek produktu już nie ma (sekcje .mp-psec są widoczne zawsze), więc
   ich gałąź bez JS — pokaz paneli i nagłówki z data-title — zniknęła. */
html:not(.js) .mp-menu-mobile[hidden],
html:not(.js) .mp-faq__a[hidden] { display: block !important; }

html:not(.js) .mp-ecard__desc[hidden] { display: flex !important; }

html:not(.js) .mp-burger,
html:not(.js) .mp-more,
html:not(.js) .mp-faq__sign,
html:not(.js) .mp-stepper button { display: none; }
/* „−" i „+" steppera działają tylko ze skryptem — bez niego były klikalne
   i nic nie robiły. Zostaje samo pole liczby, szersze, żeby dało się w nie
   trafić i wpisać ilość (cel ≥ 44 px). */
html:not(.js) .mp-stepper input { min-width: 64px; }

html:not(.js) .mp-faq__q { cursor: default; }

/* Menu mobilne bez skryptu pokazujemy tylko tam, gdzie znika zwykła nawigacja. */
@media (min-width: 821px) {
	html:not(.js) .mp-menu-mobile[hidden] { display: none !important; }
}

/* ─── Zapewnienia pod przyciskiem płatności ─── */
.mp-assure {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted);
}
.mp-assure li { position: relative; padding-left: 16px; }
.mp-assure li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

/* ─── Formularz kontaktowy: wynik i pułapka ─── */

/* ─── Mockup 3D książki ───
   Zamawiający dostarczył render książki na własnym kremowym tle z cieniem od
   podłogi. Dotychczasowe reguły (obrót −2°, cień, zaokrąglenie) były pisane pod
   PŁASKĄ okładkę i na renderze dawały obróconą, ocienioną kartę z widoczną
   krawędzią kwadratu — „zdjęcie w ramce", nie książka na stronie. Render ma
   już własną perspektywę i cień, więc zostaje płaski, a krawędź kwadratu
   rozpuszcza maska: tło mockupu (#FAF0E6 → #E6DFD1) różni się od --paper
   i --paper2 o kilka poziomów, za mało, by je dopasować, za dużo, by ignorować.
   Płaskie okładki ebooków tej klasy nie dostają. */
.mp-mockup,
.mp-feature__media .mp-mockup,
.mp-product__frame .mp-mockup {
	transform: none;
	box-shadow: none;
	border-radius: 0;
	-webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 47%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 62% 66% at 50% 47%, #000 58%, transparent 100%);
}

/* ─── Kadr na książkę (.mp-mockup-crop) ───
   Mockup to kwadrat 1600×1600, w którym sama książka zajmuje ~53% szerokości
   i ~75% wysokości (zmierzone: x 24–77%, y 14–89%), reszta to tło i cień.
   Pokazywany 1:1 dawał małą książkę w dużym pustym polu — „większe zdjęcie
   książki" (zamawiający, 14.09.2026). Kadr wycina okno x 14–86%, y 5–97%
   pliku: obraz ma 139% szerokości ramki, przesunięty o 14% / 5% pliku.
   Maska przechodzi z obrazu NA RAMKĘ i jest prostokątna z miękkimi brzegami
   (dwa gradienty liniowe złożone przez mask-composite) — elipsa ścinała rogi
   książki, a maska na obrazie kończyłaby się poza kadrem i na krawędzi ramki
   zostawał twardy szew tła mockupu (#F9F1E6 ≠ --paper). Obraz produktu bez
   zmian, więc podmiana zdjęcia w panelu dalej działa wszędzie. */
.mp-mockup-crop {
	display: block;
	width: 100%;
	aspect-ratio: 72 / 92;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-composite: intersect;
}
.mp-mockup-crop .mp-mockup {
	width: 138.89%;
	max-width: none;
	margin-left: -19.44%;
	margin-top: -6.94%;   /* 5% wysokości pliku = 5% × 139% szerokości ramki */
	-webkit-mask-image: none;
	mask-image: none;
}

/* Potwierdzenie po nieudanej płatności */
.mp-done__hero { display: grid; gap: 14px; }
.mp-done__note { font-size: 14px; color: var(--muted); }
.mp-done__note a { text-decoration: underline; }

/* Pola bramki płatności pod etykietą metody (siatka banków PayU, BLIK, karta).
   Klasa .payment_box jest wymagana — checkout.js WooCommerce po niej przełącza. */
.mp-pay__fields { margin: 12px 0 4px; padding: 14px 16px; background: var(--paper2); border: 1px solid var(--line); border-radius: var(--r-card); font-size: 14px; }
.mp-pay__fields img { max-height: 32px; width: auto; }
.mp-pay__fields .payu-list-banks, .mp-pay__fields ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

/* Siatka banków „PayU – lista banków" z klawiatury (audyt 15.09.2026).
   Arkusz wtyczki ma `.pbl-container .payu-list-banks li label input
   { display: none }` — radio znikało z kolejności Tab i z drzewa dostępności.
   Tu radio jest schowane WIZUALNIE (jak .screen-reader-text), więc Tab na nie
   wchodzi, strzałki przełączają bank, a kafel pokazuje pierścień i stan.
   Nazwę radia daje alt obrazka (mendopauza_payu_banki_dostepne, inc/checkout.php).
   Kafel: obrys --line-ui (4,20:1 na bieli), zaznaczony — ciemna krawędź --btn
   podwojona cieniem, jak kafle metod dostawy i płatności. Specyficzność
   wyższa niż reguła wtyczki (0,2,3). */
.mp-pay__fields .pbl-container .payu-list-banks li { padding: 0; }
.mp-pay__fields .pbl-container .payu-list-banks li label {
	position: relative;
	width: 92px;
	min-height: 52px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--line-ui);
	border-radius: var(--r-field);
	transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.mp-pay__fields .pbl-container .payu-list-banks li:not(.payu-inactive) label:hover { background: #fff; border-color: var(--ink); }
.mp-pay__fields .pbl-container .payu-list-banks li label input {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	opacity: 0;
}
.mp-pay__fields .pbl-container .payu-list-banks li label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.mp-pay__fields .pbl-container .payu-list-banks li label:has(input:checked),
.mp-pay__fields .pbl-container .payu-list-banks li label.active { border-color: var(--btn); box-shadow: inset 0 0 0 1px var(--btn); background: #fff; }
@media (forced-colors: active) {
	.mp-pay__fields .pbl-container .payu-list-banks li label:has(input:checked) { border: 3px solid Highlight; }
}

/* ─── Dostawa: wybór metody (InPost) w koszyku i kasie ───
   Pozycja to siatka: radio | etykieta, a wszystko, co wtyczka InPost dokleja
   po etykiecie (logo, „Wybierz punkt odbioru", nazwa wybranego paczkomatu),
   ląduje w drugim wierszu pod etykietą — radio zostaje przy nazwie metody,
   a ramka obejmuje całość. Radio pozycjonowane absolutnie wobec <li>
   zjeżdżało w dół, gdy <li> rosło o elementy wtyczki. */
.mp-shipping { margin: 6px 0 10px; }
.mp-shipping__label { margin: 0 0 8px; font-family: var(--font-ui); font-weight: var(--fw-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mp-shipping__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-shipping__item { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 11px 14px; background: var(--paper); border: 1px solid var(--line-ui); border-radius: var(--r-card); }
.mp-shipping__item--single { grid-template-columns: 1fr; }
.mp-shipping__item input[type="radio"] { margin: 0; width: 16px; height: 16px; accent-color: var(--btn); }
.mp-shipping__item label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-size: 15px; min-width: 0; }
.mp-shipping__item--single label { cursor: default; }
.mp-shipping__item:has(input:checked) { border-color: var(--btn); box-shadow: inset 0 0 0 1px var(--btn); }
.mp-shipping__item:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.mp-shipping__name { min-width: 0; }
.mp-shipping__cost { font-weight: 700; white-space: nowrap; }
.mp-shipping__item > :not(input):not(label) { grid-column: 2; margin-top: 8px; font-size: 14px; }
.mp-shipping__item--single > :not(input):not(label) { grid-column: 1; }
.mp-shipping__note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.mp-shipping__recalc { margin: 4px 0 10px; }
.mp-shipping__admin { padding: 8px 10px; border-left: 3px solid var(--err); background: var(--paper2); color: var(--ink); }