/*
Theme Name: Jadwiga Kander
Theme URI: https://jadwigakander.com.pl
Author: Stas
Description: Autorski motyw blokowy dla jadwigakander.com.pl — estetyka nowoczesnego magazynu premium. Książki, kursy online, warsztaty w Azji.
Version: 0.9.97
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jadwiga
*/

/* ===== Przyciski =====
   Kształt i kolory bazowe siedzą w theme.json (pigułka, biel, obrys taupe).
   Hover robimy tutaj: kolor marki wjeżdża od lewej, tekst rozjaśnia się w tym
   samym tempie, całość unosi się o włos. */
.wp-block-button__link,
.wp-element-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color 0.35s ease, border-color 0.35s ease,
		transform 0.35s ease, box-shadow 0.35s ease;
}
.wp-block-button__link::before,
.wp-element-button::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--brand);
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier( 0.65, 0, 0.35, 1 );
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--brand);
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 168, 154, 139, 0.28 );
}
.wp-block-button__link:hover::before,
.wp-element-button:hover::before,
.wp-block-button__link:focus-visible::before,
.wp-element-button:focus-visible::before {
	transform: scaleX( 1 );
}
.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY( 0 );
	box-shadow: none;
}
@media ( prefers-reduced-motion: reduce ) {
	.wp-block-button__link,
	.wp-element-button,
	.wp-block-button__link::before,
	.wp-element-button::before {
		transition-duration: 0.01ms;
	}
	.wp-block-button__link:hover,
	.wp-element-button:hover {
		transform: none;
	}
}

/* Przyciski wysyłki formularzy logowania (konto Woo, „Moje kursy” Sensei) to
   `<input type="submit">`. Na inpucie pseudoelement `::before` się nie renderuje,
   więc firmowe wypełnienie hoverem (kolor marki wjeżdżający od lewej) nie działa
   i przycisk wyglądał na płaski obrys. Odtwarzamy tę samą animację BEZ
   `::before` — tłem samego przycisku: gradient marki o szerokości 0% przy lewej
   krawędzi, rosnący do 100% na hover. Efekt i tempo jak w pozostałych. */
.woocommerce-form-login .button,
.woocommerce-form-login button[type='submit'],
form.login .button,
form.login button[type='submit'] {
	border: 1px solid var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--white);
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--brand),
		var(--wp--preset--color--brand)
	);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: var(--wp--preset--color--contrast);
	transition: background-size 0.45s cubic-bezier( 0.65, 0, 0.35, 1 ),
		color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.woocommerce-form-login .button:hover,
.woocommerce-form-login .button:focus-visible,
.woocommerce-form-login button[type='submit']:hover,
.woocommerce-form-login button[type='submit']:focus-visible,
form.login .button:hover,
form.login .button:focus-visible,
form.login button[type='submit']:hover,
form.login button[type='submit']:focus-visible {
	background-size: 100% 100%;
	color: var(--wp--preset--color--white);
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 168, 154, 139, 0.28 );
}
@media ( prefers-reduced-motion: reduce ) {
	.woocommerce-form-login .button,
	form.login .button,
	.woocommerce-form-login button[type='submit'],
	form.login button[type='submit'] {
		transition-duration: 0.01ms;
	}
	.woocommerce-form-login .button:hover,
	form.login .button:hover {
		transform: none;
	}
}

/* Przyciski bloków WooCommerce (koszyk, mini-koszyk) dostają na `:focus`
   niebieską poświatę rdzenia — `box-shadow: … 0 0 0 2px #0675c4`. Po kliknięciu
   myszą zostawała na przycisku obca, systemowa ramka w kolorze, którego nie ma
   nigdzie w serwisie. Zdejmujemy ją, ale nie zostawiamy przycisku bez znaku
   dla klawiatury: obrys wraca na `:focus-visible`, w kolorze marki. Prefiks
   `body` tylko po to, by przebić regułę rdzenia bez `!important`. */
body .wc-block-components-button:not( .is-link ):focus {
	box-shadow: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
}
body .wc-block-components-button:not( .is-link ):focus-visible {
	outline-color: var(--wp--preset--color--brand);
}

/* ===== Nagłówek =====
   Karta wisi nad treścią i zostaje w polu widzenia przy scrollu (sticky),
   zachowując odstęp od górnej krawędzi. Bez ramki: białe tło i miękki cień,
   który po przewinięciu delikatnie się pogłębia. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 1.25rem 1.5rem 0;
	/* Treść wjeżdża pod nagłówek — karta unosi się nad zdjęciem hero */
	margin-bottom: calc( -1 * var( --jadwiga-header-h, 84px ) );
}
.jadwiga-header {
	border: 0;
	border-radius: 16px;
	box-shadow: 0 8px 28px rgba( 69, 65, 62, 0.08 );
	padding-block: 0.5rem;
	padding-inline: 0;
	transition: box-shadow 0.3s ease;
}
.jadwiga-header.is-scrolled {
	box-shadow: 0 14px 38px rgba( 69, 65, 62, 0.16 );
}
/* Wiersz: logo · kreska · menu (do lewej) · [luz] · promo · przycisk · koszyk */
.jadwiga-header-rzad {
	gap: 0;
}
/* Blok akcji odpycha się do prawej krawędzi — cała wolna przestrzeń ląduje
   między ostatnią pozycją menu a zachętą (jak w referencji) */
.jadwiga-header .jadwiga-header-akcje {
	gap: 1rem;
	margin-left: auto;
	padding-left: 2.5rem;
	padding-right: 1.5rem;
}

/* ===== Margines od krawędzi ekranu =====
   Układ „constrained” WordPressa ogranicza tylko szerokość treści (1240px), ale
   marginesu bocznego nie dodaje. Poniżej tej szerokości — czyli na każdym
   telefonie i tablecie — tekst dotykał gołych krawędzi ekranu.
   Padding kładziemy na sekcjach: na szerokich ekranach nie zmienia nic (treść
   i tak jest węższa od dostępnego miejsca), na wąskich robi cały oddech.
   Wyjątki: hero i zapis do newslettera — obie sekcje są splitem, w którym
   zdjęcie ma iść do samej krawędzi. Margines daje w nich kolumna z tekstem. */
:root {
	/* 0.75rem, nie 1.25rem: przy 375px ekranu dwa razy po 20px zabierały ponad
	   dziesiątą część szerokości, a karty produktów i podsumowanie zamówienia
	   robiły się przez to ciasne. Od tej zmiennej liczą się też ujemne marginesy
	   sekcji „od krawędzi do krawędzi" (pasek regaliów, hero), więc zmiana
	   przechodzi przez nie sama. */
	--jadwiga-margines: 0.75rem;
}
@media ( min-width: 600px ) {
	:root {
		--jadwiga-margines: 2.5rem;
	}
}
.wp-block-post-content > *:not( .jadwiga-hero, .jadwiga-zapis ),
footer.wp-block-template-part > * {
	padding-inline: var( --jadwiga-margines );
}

/* Blokowy layout WP wstawia odstęp między nagłówkiem a treścią oraz przed
   pierwszą sekcją — hero ma zaczynać się od samej góry, pod kartą nagłówka. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* ===== Strony spoza motywu (WooCommerce, Sensei) =====
   Karta nagłówka wisi nad treścią (ujemny margines), więc każdy szablon musi
   oddać jej miejsce u góry. `page.html` robi to sam przez `.jadwiga-strona`,
   ale sklep i kursy jadą na własnych szablonach wtyczek — tam dokładamy to
   tutaj, razem z marginesem bocznym, którego układ „constrained” nie daje. */
/* Karta produktu owija <main> w dodatkową grupę `.woocommerce`, więc nie jest
   ono bezpośrednim dzieckiem `.wp-site-blocks` — celujemy w oba przypadki. */
body.woocommerce-page .wp-site-blocks main,
body.woocommerce .wp-site-blocks main {
	padding-top: calc( var( --jadwiga-header-h, 84px ) + var(--wp--preset--spacing--50) );
	padding-bottom: var(--wp--preset--spacing--70);
}
body.woocommerce-page .wp-site-blocks main > *,
body.woocommerce .wp-site-blocks main > * {
	padding-inline: var( --jadwiga-margines );
}
.wp-block-post-content > *:first-child {
	margin-block-start: 0;
}

/* ===== Hero — pełnoekranowy split jak w referencji (lustrzany) ===== */
.jadwiga-hero {
	position: relative;
	/* pasek regaliów wyjeżdża za prawy brzeg — przycinamy do sekcji */
	overflow: hidden;
}
.jadwiga-hero-kolumny {
	gap: 0;
	/* Górny margines kolumn wychodził poza sekcję (składanie marginesów)
	   i spychał hero w dół — stąd biały pasek nad zdjęciem. */
	margin-block: 0;
}
.jadwiga-hero-foto {
	background: var(--wp--preset--color--portrait);
	/* zdjęcie zakrywa lewy koniec paska — logotypy „wyjeżdżają" spod niego */
	position: relative;
	z-index: 2;
}
.jadwiga-hero-foto figure {
	margin: 0;
	height: 100%;
}
.jadwiga-hero-foto img {
	display: block;
	width: 100%;
	height: 100vh;
	min-height: 620px;
	object-fit: cover;
	/* Kadr trzymamy przy górze: gdy proporcje ekranu przycinają zdjęcie w pionie,
	   ucina się dół sukni, a głowa zawsze zostaje w całości pod górną krawędzią */
	object-position: center top;
}
.jadwiga-hero-tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
	/* Górny padding mija kartę nagłówka wiszącą nad treścią */
	padding: calc( var( --jadwiga-header-h, 92px ) + 2rem ) clamp( 2rem, 5vw, 5rem ) 3rem;
}

/* ===== Pasek regaliów (marquee) w hero — prawa kolumna, spod zdjęcia w prawo ===== */
.jadwiga-mq {
	position: relative;
	/* W toku, tuż pod przyciskiem (mocniejszy dowód społeczny przy CTA). Ujemne
	   marginesy = szerokość poziomego paddingu kolumny, więc pasek sięga od linii
	   podziału (spod zdjęcia) po prawy brzeg ekranu, mimo że siedzi w treści. */
	margin-top: 2.5rem;
	margin-left: calc( -1 * clamp( 2rem, 5vw, 5rem ) );
	margin-right: calc( -1 * clamp( 2rem, 5vw, 5rem ) );
	overflow: hidden;
	padding: 0.85rem 0;
	/* Zamiast twardych kresek-separatorów — miękkie znikanie na obu krawędziach:
	   logotypy pojawiają się delikatnie przy zdjęciu i rozpływają za prawy brzeg. */
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 11%, #000 88%, transparent 100% );
	        mask-image: linear-gradient( 90deg, transparent 0, #000 11%, #000 88%, transparent 100% );
}
.jadwiga-mq__track {
	display: flex;
	width: max-content;
	transform: translateX( 0 );
	animation: jadwiga-mq 48s linear infinite;
}
.jadwiga-mq:hover .jadwiga-mq__track {
	animation-play-state: paused;
}
/* ruch W LEWO: taśma startuje w 0 i sunie o -50% (druga połowa = duplikat, więc
   pętla jest bezszwowa) */
@keyframes jadwiga-mq {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}
.jadwiga-mq__el {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	/* bez kresek-separatorów — rozdziela sam odstęp (2×2.1rem między elementami) */
	padding: 0 2.1rem;
	white-space: nowrap;
	font-size: 15px;
	color: var(--wp--preset--color--muted);
}
/* Flagi mają własne wypełnienia, więc wypisujemy je spod tej reguły. */
.jadwiga-mq__el svg:not( .jadwiga-mq__flaga ) {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: var(--wp--preset--color--brand);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.jadwiga-mq__logo {
	height: 19px;
	width: auto;
	display: block;
	opacity: 0.82;
	/* Taśma to flex — bez tego Safari ściskał logotypy do zera/kwadratu. */
	flex: 0 0 auto;
}
.jadwiga-mq__ted {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--wp--preset--color--contrast);
}
.jadwiga-mq__ted sup {
	font-size: 0.62em;
}
/* Wyłączona animacja — pasek stoi (pokazuje statyczny rząd logotypów) */
@media ( prefers-reduced-motion: reduce ) {
	.jadwiga-mq__track { animation: none; }
}
/* Telefon: układ hero jest ułożony w pion (zdjęcie na górze), więc sztuczka
   „spod zdjęcia" nie ma sensu — pasek robimy zwykłym, pełnej szerokości pod
   treścią, ze znikaniem na obu krawędziach. */
@media ( max-width: 781px ) {
	.jadwiga-hero .jadwiga-mq {
		margin-top: 1.75rem;
		/* na telefonie padding kolumny to --jadwiga-margines — tyle „oddajemy"
		   ujemnym marginesem, żeby pasek dobił do obu krawędzi ekranu */
		margin-left: calc( -1 * var( --jadwiga-margines ) );
		margin-right: calc( -1 * var( --jadwiga-margines ) );
		-webkit-mask-image: linear-gradient( 90deg, transparent, #000 9%, #000 91%, transparent );
		        mask-image: linear-gradient( 90deg, transparent, #000 9%, #000 91%, transparent );
	}
	.jadwiga-mq__el {
		font-size: 13px;
		padding: 0 1.4rem;
		gap: 0.55rem;
	}
	.jadwiga-mq__el svg { width: 20px; height: 20px; }
	.jadwiga-mq__logo { height: 16px; }
	.jadwiga-mq__ted { font-size: 15px; }
}
/* Zakotwiczenia z menu (Warsztaty / Mentoring / Darmowe). Kotwica ma wylądować
   na TREŚCI sekcji tuż pod nagłówkiem, a nie na jej krawędzi — dlatego od
   wysokości nagłówka odejmujemy własny górny padding sekcji (spacing 60). Inaczej
   duże „powietrze" nad sekcją dokłada się do offsetu i po skoku z menu zostaje
   wielka luka u góry. Padding chowa się wtedy za pływającym nagłówkiem, a treść
   siada równo — niezależnie od szerokości ekranu (padding to płynny clamp). */
#warsztaty,
#mentoring,
#darmowe {
	scroll-margin-top: calc( var( --jadwiga-header-h, 84px ) + 1.5rem - var( --wp--preset--spacing--60 ) );
}
/* JadwigaLetter linkujemy z zewnątrz (`/#newsletter`). Ta sekcja nie ma
   własnego górnego wcięcia — zdjęcie sięga krawędzi — więc odliczamy sam
   nagłówek, bez odejmowania paddingu jak wyżej. */
#newsletter {
	scroll-margin-top: calc( var( --jadwiga-header-h, 84px ) + 1rem );
}
/* Zdjęcia trzech kart „Warsztaty w Azji" trzymamy w jednym pionowym kadrze,
   niezależnie od proporcji źródła (zdjęcia z wyjazdów bywają poziome — kadrujemy
   je na portret, żeby rząd był równy i spójny z pozostałymi kartami). Tylko na
   desktopie — na mobilu karty składają się w jedną kolumnę i mają własny, niższy
   kadr 4:3 (inaczej jedna karta zajmowałaby cały ekran). */
@media ( min-width: 782px ) {
	#warsztaty .wp-block-column > .wp-block-image img {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}
}
/* Mobile: jak w referencji — zdjęcie kończy się na własnej wysokości, tekst
   leży pod nim na tle strony, a nagłówek lekko nachodzi na dół zdjęcia.
   (Wcześniej zdjęcie zajmowało cały ekran, przez co hero było puste u góry.) */
@media ( max-width: 781px ) {
	.jadwiga-hero {
		position: relative;
		background: none;
	}
	.jadwiga-hero-kolumny.wp-block-columns.is-stacked-on-mobile {
		display: block;
	}
	.jadwiga-hero-foto {
		width: 100%;
		padding: 0;
		background: var(--wp--preset--color--portrait);
		/* Zdjęcie rozpływa się ku dołowi w tle strony — tekst może wejść wysoko
		   i nadal być czytelny, bez żadnej nakładki */
		-webkit-mask-image: linear-gradient( to bottom, #000 52%, rgba( 0, 0, 0, 0.55 ) 76%, transparent 97% );
		mask-image: linear-gradient( to bottom, #000 52%, rgba( 0, 0, 0, 0.55 ) 76%, transparent 97% );
	}
	.jadwiga-hero-foto figure,
	.jadwiga-hero-foto img {
		width: 100%;
	}
	.jadwiga-hero-foto img {
		height: 66vh;
		min-height: 400px;
		object-fit: cover;
		object-position: top center;
	}
	/* .jadwiga-hero w selektorze: własne reguły kolumn WP zerują margines
	   kolumny i bez tego wjazd na zdjęcie nie działa */
	.jadwiga-hero .jadwiga-hero-tekst {
		position: relative;
		z-index: 2;
		width: 100%;
		margin-top: -15vh;
		/* Ten sam margines boczny, co w pozostałych sekcjach — inaczej nagłówek
		   hero zaczyna się o kilka pikseli dalej niż treść pod nim */
		padding: 0 var( --jadwiga-margines ) 2rem;
	}
	.jadwiga-hero-tekst h1 {
		/* Bez tego własny margines nagłówka zjada wjazd na zdjęcie */
		margin-block-start: 0;
	}
	.jadwiga-hero-tekst h1 {
		font-size: clamp( 26px, 7vw, 32px );
		line-height: 1.15;
	}
	/* Akapit pod nagłówkiem — mniejszy, żeby nie konkurował z tytułem */
	.jadwiga-hero-tekst p {
		font-size: 15px;
		line-height: 1.65;
	}
	/* Przycisk w rozmiarze desktopowym (18px, 217px szerokości) zajmował ponad
	   połowę ekranu i ciągnął na siebie uwagę — na telefonie ma być dyskretny */
	.jadwiga-hero-tekst .wp-block-button__link {
		padding: 0.7rem 1.6rem;
		font-size: 14px;
	}
	/* Odznaka siada w lewym dolnym rogu ZDJĘCIA — liczymy od jego wysokości,
	   bo „bottom” odnosiłoby się do końca całej sekcji, czyli pod tekstem */
	.jadwiga-obrotowy {
		display: block;
		/* Nad nagłówkiem, w strefie zanikania zdjęcia */
		top: calc( max( 66vh, 400px ) - 250px );
		bottom: auto;
		left: var( --jadwiga-margines );
		transform: none;
		width: 76px;
	}
}

/* ===== Emoji nad nagłówkiem sekcji =====
   Ten sam sygnał co 🎁 w menu mobilnym. Systemowy krój emoji, żeby nie wciągać
   go do Playfaira, i rozmiar niezależny od stopnia nagłówka. */
/* Nagłówki sekcji z ikoną — „Bezpłatne materiały" (prezent) i „Warsztaty
   w Azji" (samolot): tytuł i ikona w jednym rzędzie (ikona po prawej od
   tytułu). Ikony w stylu pozostałych na stronie: liniowe, malowane maską SVG
   w kolorze marki. */
.jadwiga-darmowe-glowa,
.jadwiga-warsztaty-glowa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 0.6rem, 1.6vw, 1.1rem );
}
.jadwiga-darmowe-glowa .wp-block-heading,
.jadwiga-warsztaty-glowa .wp-block-heading {
	margin: 0;
}
/* Na telefonie tytuł zajmuje niemal całą szerokość (293 z 335px), więc ikona
   lądowała przyklejona do prawej krawędzi i wyglądała, jakby nie należała do
   nagłówka. Układamy ją nad tytułem — `column-reverse`, bo w treści idzie po
   nim (kolejność w DOM zostaje sensowna dla czytników ekranu). */
@media ( max-width: 781px ) {
	.jadwiga-darmowe-glowa,
	.jadwiga-warsztaty-glowa {
		flex-direction: column-reverse;
		gap: 0.6rem;
	}
}
.jadwiga-ikona--prezent,
.jadwiga-ikona--samolot {
	flex: none;
	width: clamp( 38px, 4vw, 52px );
	height: clamp( 38px, 4vw, 52px );
	background-color: var(--wp--preset--color--brand);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.jadwiga-ikona--prezent {
	-webkit-mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="black" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><rect x="7" y="21" width="34" height="7" rx="1.5"/><path d="M10 28 h28 v11 a1.5 1.5 0 0 1 -1.5 1.5 h-25 a1.5 1.5 0 0 1 -1.5 -1.5 Z"/><path d="M24 21 V40.5"/><path d="M24 21 C 24 15, 20 12, 17 14 C 14.5 15.7, 16 20, 24 21 Z"/><path d="M24 21 C 24 15, 28 12, 31 14 C 33.5 15.7, 32 20, 24 21 Z"/></svg>' );
	mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="black" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><rect x="7" y="21" width="34" height="7" rx="1.5"/><path d="M10 28 h28 v11 a1.5 1.5 0 0 1 -1.5 1.5 h-25 a1.5 1.5 0 0 1 -1.5 -1.5 Z"/><path d="M24 21 V40.5"/><path d="M24 21 C 24 15, 20 12, 17 14 C 14.5 15.7, 16 20, 24 21 Z"/><path d="M24 21 C 24 15, 28 12, 31 14 C 33.5 15.7, 32 20, 24 21 Z"/></svg>' );
}
.jadwiga-ikona--samolot {
	-webkit-mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="black" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><path d="M44.5 24 c0 -1.7 -1.4 -3 -3.1 -3 H28.6 L15.2 6.5 h-4.4 l6.7 14.5 H8.4 L4.3 16.6 H2 l2.9 7.4 L2 31.4 h2.3 l4.1 -4.2 h9.1 l-6.7 14.5 h4.4 L28.6 27 h12.8 c1.7 0 3.1 -1.3 3.1 -3 Z"/></svg>' );
	mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="black" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><path d="M44.5 24 c0 -1.7 -1.4 -3 -3.1 -3 H28.6 L15.2 6.5 h-4.4 l6.7 14.5 H8.4 L4.3 16.6 H2 l2.9 7.4 L2 31.4 h2.3 l4.1 -4.2 h9.1 l-6.7 14.5 h4.4 L28.6 27 h12.8 c1.7 0 3.1 -1.3 3.1 -3 Z"/></svg>' );
}

/* ===== Etykieta statusu produktu (Bestseller / Nowość / ...) ===== */
.jadwiga-badge {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	padding: 0.25rem 0.9rem;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
}

/* ===== Sekcja produktu =====
   Tekst leży na jasnej karcie. Sekcje mają jednolite tło strony — rytm robią
   karty, nie naprzemienne tła (dwa naraz dawałyby beż na beżu). */
.jadwiga-produkt {
	background: var(--wp--preset--color--alt);
	border-radius: 28px;
	padding: clamp( 2.5rem, 4vw, 3.5rem );
}
.jadwiga-produkt__kicker {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
/* Kicker w rzędzie z etykietą statusu (.jadwiga-badge, np. Bestseller) */
.jadwiga-produkt__kicker-rzad {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
/* Kolumny Gutenberga niosą własne `word-break: break-word` (styl rdzenia
   `.wp-block-column`), a ono dziedziczy się na cały tekst w środku. Polskie
   wyrazy łamały się przez to w środku, bez dywizu: „dojr / załe”. Tekstom kart
   produktowych oddajemy zwykłe zawijanie po wyrazach. */
.jadwiga-produkt__kicker,
.jadwiga-produkt__tytul,
.jadwiga-produkt__opis {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}
.jadwiga-produkt__tytul {
	margin: 0.75rem 0 0;
	font-size: clamp( 32px, 3.2vw, 42px );
	line-height: 1.15;
}
.jadwiga-produkt__opis {
	margin: 1.25rem 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
}
.jadwiga-produkt__akcje {
	margin-top: 2rem;
}
/* Zdjęcie produktu bez podkładki — mokapy leżą wprost na tle strony */
.jadwiga-produkt__foto img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===== Dekoracje strony głównej =====
   Odręczne napisy i strzałki prowadzą wzrok od produktu do produktu — „zacznij
   tutaj” przy książkach, dalej strzałka do kolejnej sekcji. Rysunki pochodzą od
   projektantki (te same, co na schemacie układu); leżą jako tło pseudoelementów,
   więc nie wchodzą do DOM-u treści i nie łapią kliknięć.

   Modyfikator sekcji (--komplet) dokłada `jadwiga_modyfikator_sekcji_produktu`
   przy renderze — w bazie wszystkie sekcje produktów mają jeden wspólny klas. */
/* Każdy napis to dwie warstwy na tej samej geometrii: ciemny tekst i złota
   kreska pod nim. Pliki mają wspólny viewBox, więc nałożone trafiają co do
   piksela — a rozdzielone mogą wchodzić osobno: najpierw napis, chwilę później
   podkreślenie, tak jak pisze ręka. Stąd ::before (tekst) i ::after (kreska)
   z identycznym położeniem. */
.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::before,
.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::after,
.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::before,
.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::after,
#warsztaty::before,
#warsztaty::after {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
	pointer-events: none;
}

.jadwiga-sekcja-produkt--komplet {
	position: relative;
}
.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto ) {
	position: relative;
}
/* „zacznij tutaj” — nad zdjęciem książek, w wolnym polu nad mokapem */
.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::before,
.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::after {
	right: 8%;
	bottom: calc( 100% + 4px );
	width: 236px;
	aspect-ratio: 202.63 / 64.32;
	background-size: contain;
	background-position: center;
}
.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::before {
	background-image: url( 'assets/img/dekor-zacznij-tekst.svg' );
}
.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::after {
	background-image: url( 'assets/img/dekor-zacznij-kreska.svg' );
}
/* Strzałka z kursu do warsztatów. Kurs ma zdjęcie po lewej, więc strzałka
   schodzi spod niego — bez odbicia, rysunek biegnie w dół i w prawo, wprost na
   napis „celebruj życie” nad warsztatami. */
.jadwiga-sekcja-produkt--kobieta {
	position: relative;
}
.jadwiga-sekcja-produkt--kobieta::after {
	content: '';
	position: absolute;
	left: 16%;
	top: calc( 100% - 130px );
	width: 64px;
	aspect-ratio: 19.07 / 64.07;
	background: url( 'assets/img/dekor-strzalka.svg' ) center / contain no-repeat;
	pointer-events: none;
	z-index: 1;
}
/* „celebruj życie” z koroną — nad nagłówkiem warsztatów, po lewej stronie.
   Sekcja warsztatów ma w treści kotwicę `warsztaty`, więc nie potrzebuje
   dokładanego modyfikatora. */
#warsztaty {
	position: relative;
}
#warsztaty::before,
#warsztaty::after {
	left: 8%;
	top: 62px;
	width: 216px;
	aspect-ratio: 146.97 / 62.81;
	background-size: contain;
	background-position: center;
}
#warsztaty::before {
	background-image: url( 'assets/img/dekor-celebruj-tekst.svg' );
}
#warsztaty::after {
	background-image: url( 'assets/img/dekor-celebruj-kreska.svg' );
}

/* Grupa kursów: „gdy potrzebujesz ukojenia” nad pierwszym z nich, dalej łańcuch
   krótkich strzałek — ABC → rozstanie → 8 medytacji. Schemat pokazywał tu jedne
   widełki na trzy kursy ustawione w rzędzie, ale rząd rozsypuje się na telefonie
   w kolumnę i widełki nie mają czego rozgałęziać. Łańcuch działa na obu
   szerokościach i trzyma ten sam rytm, co reszta strony.

   Sekcje kursów przeplatają strony zdjęcia (ABC po prawej, rozstanie po lewej,
   8 medytacji znów po prawej), więc strzałki idą raz w lewo, raz w prawo —
   rysunek jest jeden, kierunek robi odbicie w poziomie. */
.jadwiga-sekcja-produkt--abc,
.jadwiga-sekcja-produkt--rozstanie {
	position: relative;
}
.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto ) {
	position: relative;
}
/* Napis + podkreślenie. W pliku „gdy potrzebujesz ukojenia” przyszło samo,
   bez zamaszystej kreski pod spodem — a mają ją i „zacznij tutaj”, i „celebruj
   życie”. Kreska jest więc drugim tłem: oryginał wyjęty z `1svg.svg`, ten sam
   pociągnięcie ręką, tylko najdłuższe z dostępnych — pasuje pod długi napis.
   Rozmiary tła w procentach, żeby na telefonie wystarczyło zmienić szerokość. */
.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::before,
.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::after {
	right: 6%;
	bottom: calc( 100% + 26px );
	width: 300px;
	aspect-ratio: 300 / 58;
}
.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::before {
	background-image: url( 'assets/img/dekor-ukojenie.svg' );
	background-position: center top;
	background-size: 100% auto;
}
.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::after {
	background-image: url( 'assets/img/dekor-podkreslenie.svg' );
	background-position: center bottom;
	background-size: 97% auto;
}
/* ABC (zdjęcie po prawej) → rozstanie (zdjęcie po lewej): strzałka w lewo */
.jadwiga-sekcja-produkt--abc::after {
	content: '';
	position: absolute;
	right: 30%;
	top: calc( 100% - 90px );
	width: 56px;
	aspect-ratio: 19.07 / 64.07;
	background: url( 'assets/img/dekor-strzalka.svg' ) center / contain no-repeat;
	transform: scaleX( -1 );
	pointer-events: none;
	z-index: 1;
}
/* Rozstanie (zdjęcie po lewej) → 8 medytacji (zdjęcie po prawej): w prawo */
.jadwiga-sekcja-produkt--rozstanie::after {
	content: '';
	position: absolute;
	left: 26%;
	top: calc( 100% - 90px );
	width: 56px;
	aspect-ratio: 19.07 / 64.07;
	background: url( 'assets/img/dekor-strzalka.svg' ) center / contain no-repeat;
	pointer-events: none;
	z-index: 1;
}

/* Strzałka z książek do następnego produktu. Rysunek biegnie w dół i w prawo,
   a prowadzi do sekcji ze zdjęciem po lewej — stąd odbicie w poziomie. */
.jadwiga-sekcja-produkt--komplet::after {
	content: '';
	position: absolute;
	right: 16%;
	top: calc( 100% - 170px );
	width: 64px;
	aspect-ratio: 19.07 / 64.07;
	background: url( 'assets/img/dekor-strzalka.svg' ) center / contain no-repeat;
	transform: scaleX( -1 );
	pointer-events: none;
	z-index: 1;
}

/* ===== Ruch =====
   Strona ma 12 000 px i sporo zdjęć, więc animujemy wyłącznie `opacity`,
   `transform` i `clip-path` — każda inna właściwość kazałaby przeglądarce
   przeliczać układ przy każdej klatce przewijania.

   Klasę `jadwiga-wejscie` rozdaje `animacje.js`, a `jest-widoczny` dokłada,
   gdy sekcja wjedzie w kadr. Bez JS-a nic się nie chowa — strona wygląda tak
   jak dotąd, tylko bez ruchu.

   Uwaga na kolejność: przejścia siedzą wyłącznie w stanie docelowym. Gdyby
   `transition` stało przy stanie ukrytym, dołożenie klasy przez skrypt
   animowałoby znikanie — sekcja najpierw mignęłaby w całości, a potem powoli
   gasła. Ukrycie ma być natychmiastowe, płynne jest tylko wejście. */
.jadwiga-wejscie {
	opacity: 0;
	transform: translateY( 22px );
}
.jadwiga-wejscie.jest-widoczny {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* Ścieżka zapasowa dla przeglądarek bez osi przewijania (patrz sekcja niżej).
   Ukrycie wisi na klasie od skryptu, nie w stanie domyślnym — inaczej strona
   bez JS-a zostałaby z dekoracjami przyciętymi do zera na zawsze. Kadrowanie
   wchodzi bez przejścia; płynne jest dopiero odsłanianie niżej. */
.jadwiga-dekor-czeka:not( .jest-widoczny ) .wp-block-column:has( .jadwiga-produkt__foto )::before,
.jadwiga-dekor-czeka:not( .jest-widoczny ) .wp-block-column:has( .jadwiga-produkt__foto )::after,
#warsztaty.jadwiga-dekor-czeka:not( .jest-widoczny )::before,
#warsztaty.jadwiga-dekor-czeka:not( .jest-widoczny )::after {
	clip-path: inset( 0 100% 0 0 );
}
.jadwiga-sekcja-produkt--komplet.jadwiga-dekor-czeka:not( .jest-widoczny )::after,
.jadwiga-sekcja-produkt--kobieta.jadwiga-dekor-czeka:not( .jest-widoczny )::after,
.jadwiga-sekcja-produkt--abc.jadwiga-dekor-czeka:not( .jest-widoczny )::after,
.jadwiga-sekcja-produkt--rozstanie.jadwiga-dekor-czeka:not( .jest-widoczny )::after {
	clip-path: inset( 0 0 100% 0 );
}
/* Odsłanianie: napis pisze się od lewej, kreska dociąga go chwilę później */
.jadwiga-dekor-czeka.jest-widoczny .wp-block-column:has( .jadwiga-produkt__foto )::before,
#warsztaty.jadwiga-dekor-czeka.jest-widoczny::before {
	transition: clip-path 0.75s cubic-bezier( 0.33, 0.9, 0.5, 1 ) 0.15s;
}
.jadwiga-dekor-czeka.jest-widoczny .wp-block-column:has( .jadwiga-produkt__foto )::after,
#warsztaty.jadwiga-dekor-czeka.jest-widoczny::after {
	transition: clip-path 0.5s cubic-bezier( 0.33, 0.9, 0.5, 1 ) 0.55s;
}
/* Strzałki kreślą się z góry na dół — tak, jak prowadzą wzrok */
.jadwiga-sekcja-produkt--komplet.jadwiga-dekor-czeka.jest-widoczny::after,
.jadwiga-sekcja-produkt--kobieta.jadwiga-dekor-czeka.jest-widoczny::after,
.jadwiga-sekcja-produkt--abc.jadwiga-dekor-czeka.jest-widoczny::after,
.jadwiga-sekcja-produkt--rozstanie.jadwiga-dekor-czeka.jest-widoczny::after {
	transition: clip-path 0.55s cubic-bezier( 0.4, 0.8, 0.5, 1 ) 0.3s;
}

/* Hero jest widoczne od pierwszej klatki, więc nie czeka na obserwatora.
   Zdjęcie nie dostaje żadnego ruchu poza pojawieniem się. Portret człowieka
   źle znosi przekształcenia: zbliżenie czyta się jako poprawianie kadru, a
   odsłanianie od dołu — jak materializująca się postać. Zostaje samo
   rozjaśnienie, wolne na tyle, żeby nie mrugnęło. Ruch w hero niesie tekst. */
@keyframes jadwiga-hero-foto {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes jadwiga-hero-tekst {
	from { opacity: 0; transform: translateY( 18px ); }
	to   { opacity: 1; transform: none; }
}
.jadwiga-hero-foto img {
	animation: jadwiga-hero-foto 0.9s ease both;
}
.jadwiga-hero-tekst > * {
	animation: jadwiga-hero-tekst 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 ) both;
}
.jadwiga-hero-tekst > *:nth-child( 1 ) { animation-delay: 0.15s; }
.jadwiga-hero-tekst > *:nth-child( 2 ) { animation-delay: 0.3s; }
.jadwiga-hero-tekst > *:nth-child( 3 ) { animation-delay: 0.45s; }
.jadwiga-hero-tekst > *:nth-child( 4 ) { animation-delay: 0.6s; }

/* ===== Ruch spięty z przewijaniem =====
   Powyższa ścieżka (skrypt + `transition`) odpala ruch raz, jako błysk: zanim
   dojedziesz wzrokiem, jest już po wszystkim. Dlatego tam, gdzie przeglądarka
   to potrafi, animacje wiszą na osi przewijania — postęp animacji to pozycja
   elementu w kadrze. Ruch trwa dokładnie tyle, ile go przewijasz, więc widać
   go naprawdę, a nie domyśla się go z efektu końcowego.

   `animation-timeline` obsługuje dziś ~90% ruchu w sieci; reszta zostaje przy
   ścieżce ze skryptem, która jest wyżej. Skrypt sam sprawdza `CSS.supports` i
   nie dokłada swoich klas tam, gdzie działa oś — inaczej oba mechanizmy
   walczyłyby o te same właściwości.

   Odsłona idzie maską z gradientem, nie `clip-path`. Kadrowanie ścina obraz
   twardą krawędzią — widać przesuwającą się pionową linię. Maska z miękkim
   przejściem wygląda jak atrament dobiegający do końca litery, czyli tak, jak
   napis powstawał naprawdę. */
@supports ( animation-timeline: view() ) {

	/* Sekcje najeżdżają: lekkie zbliżenie i podniesienie, spięte z kółkiem */
	@keyframes jadwiga-najazd {
		from { opacity: 0; transform: translateY( 46px ) scale( 0.975 ); }
		to   { opacity: 1; transform: none; }
	}
	.wp-block-post-content > .wp-block-group:not( .jadwiga-hero ) {
		animation: jadwiga-najazd linear both;
		animation-timeline: view();
		animation-range: entry 4% cover 22%;
	}

	/* Napis pisze się od lewej, kreska rusza za nim z opóźnieniem — nie czasowym,
	   tylko w przewijaniu: jej zakres zaczyna się tam, gdzie napis kończy. */
	@keyframes jadwiga-pisanie {
		from { mask-position: 100% 0; }
		to   { mask-position: 0% 0; }
	}
	.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::before,
	.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::after,
	.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::before,
	.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::after,
	#warsztaty::before,
	#warsztaty::after {
		/* Proporcje nie są dowolne: przy masce 250% czarne pole 0–40% pokrywa
		   dokładnie całą szerokość na końcu ruchu, a przezroczystość od 58%
		   zakrywa ją w całości na starcie. Szersze pole zostawiłoby blady brzeg
		   napisu, węższe — widoczny skrawek przed czasem. */
		mask-image: linear-gradient( to right, #000 0 40%, rgba( 0, 0, 0, 0 ) 58% );
		mask-size: 250% 100%;
		mask-repeat: no-repeat;
		animation: jadwiga-pisanie linear both;
		animation-timeline: view();
	}
	.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::before,
	.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::before,
	#warsztaty::before {
		animation-range: entry 12% cover 26%;
	}
	.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::after,
	.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::after,
	#warsztaty::after {
		animation-range: cover 24% cover 34%;
	}

	/* Strzałki rysują się z góry na dół, tym samym miękkim czołem */
	@keyframes jadwiga-kreslenie {
		from { mask-position: 0 100%; }
		to   { mask-position: 0 0%; }
	}
	.jadwiga-sekcja-produkt--komplet::after,
	.jadwiga-sekcja-produkt--kobieta::after,
	.jadwiga-sekcja-produkt--abc::after,
	.jadwiga-sekcja-produkt--rozstanie::after {
		mask-image: linear-gradient( to bottom, #000 0 40%, rgba( 0, 0, 0, 0 ) 58% );
		mask-size: 100% 250%;
		mask-repeat: no-repeat;
		animation: jadwiga-kreslenie linear both;
		animation-timeline: view();
		animation-range: entry 30% cover 46%;
	}

	/* Zdjęcia produktów suną wolniej niż strona — kadr zostaje, obraz oddycha.
	   Okładki książek mają zajęty `transform` (pochylenie za kursorem), więc
	   paralaksy tam nie ma; reszcie wystarczy kilkanaście pikseli. */
	@keyframes jadwiga-paralaksa {
		from { transform: translateY( 26px ); }
		to   { transform: translateY( -26px ); }
	}
	.jadwiga-sekcja-produkt:not( .jadwiga-sekcja-produkt--komplet ) .jadwiga-produkt__foto img {
		animation: jadwiga-paralaksa linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	/* Warsztaty to jedyne zdjęcia w kadrze przyciętym (`overflow: hidden`, dla
	   przybliżenia pod kursorem). Sam przesuw odsłaniałby tam pustą krawędź —
	   raz u góry, raz u dołu — więc obraz dostaje zapas skalą. Amplituda jest
	   mniejsza niż przy mokapach: 14 px w każdą stronę pokrywa się z zapasem
	   nawet przy niskich kadrach na telefonie. */
	@keyframes jadwiga-paralaksa-kadr {
		from { transform: translateY( 14px ) scale( 1.1 ); }
		to   { transform: translateY( -14px ) scale( 1.1 ); }
	}
	#warsztaty .wp-block-column .wp-block-image img {
		animation: jadwiga-paralaksa-kadr linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	/* Na telefonie paralaksy nie ma wcale. Ruch obrazu wewnątrz kadru zostawiał
	   tam ślady niedomalowania — strzępki poprzedniej klatki przy nagłówkach —
	   a zysk jest żaden: przy wąskiej kolumnie przesunięcie o kilkanaście pikseli
	   i tak ginie. Sekcje nadal najeżdżają, dekoracje nadal się piszą. */
	@media ( max-width: 781px ) {
		.jadwiga-sekcja-produkt .jadwiga-produkt__foto img,
		#warsztaty .wp-block-column .wp-block-image img {
			animation: none;
		}
	}
	/* Najechanie kursorem ma być silniejsze niż paralaksa, więc na czas hoveru
	   oddajemy `transform` z powrotem przejściu — ale tylko przy prawdziwym
	   kursorze, żeby dotknięcie na telefonie nie zatrzymało paralaksy na stałe. */
	@media ( hover: hover ) and ( pointer: fine ) and ( min-width: 782px ) {
		#warsztaty .wp-block-column:hover .wp-block-image img {
			animation: none;
		}
	}
}

@media ( prefers-reduced-motion: reduce ) {
	@supports ( animation-timeline: view() ) {
		.wp-block-post-content > .wp-block-group:not( .jadwiga-hero ),
		.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::before,
		.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::after,
		.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::before,
		.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::after,
		#warsztaty::before,
		#warsztaty::after,
		.jadwiga-sekcja-produkt--komplet::after,
		.jadwiga-sekcja-produkt--kobieta::after,
		.jadwiga-sekcja-produkt--abc::after,
		.jadwiga-sekcja-produkt--rozstanie::after,
		.jadwiga-sekcja-produkt .jadwiga-produkt__foto img,
		#warsztaty .wp-block-column .wp-block-image img {
			animation: none;
			mask-image: none;
		}
	}
}

/* ===== „mogłaś mnie widzieć lub słyszeć” — siatka logotypów =====
   Blok leży na jasnej karcie, tak jak sekcje produktów — dzięki temu odcina się
   od białego tła strony i nie zlewa ze stopką, która zaczyna się zaraz pod nim.

   Znaki mają bardzo różne proporcje: od kwadratowych (Radio Chicago, PNŚ) po
   bardzo szerokie (TEDx, Maejo — ponad 4:1). Sama wspólna wysokość zrobiłaby
   z tych szerokich pasy na pół rzędu, więc ogranicza je równolegle szerokość.
   Dopiero para ograniczeń daje wrażenie, że wszystkie ważą tyle samo. */
.jadwiga-media {
	/* O ton ciemniej niż stopka (`alt`), która zaczyna się zaraz pod spodem.
	   W tym samym beżu oba pasy zlewały się w jedną plamę i nie było widać,
	   gdzie kończy się treść, a zaczyna stopka. */
	background: var(--wp--preset--color--portrait);
	/* Pas dochodzi do samej stopki — bez zaokrągleń i bez odstępu pod spodem,
	   inaczej między nimi zostaje biała szpara. */
	margin-bottom: 0;
	padding: clamp( 2.5rem, 4vw, 4rem ) 0 clamp( 2.75rem, 4.5vw, 4.5rem );
}
.jadwiga-media__wnetrze {
	max-width: var(--wp--style--global--wide-size, 1240px );
	margin: 0 auto;
	padding-inline: clamp( 1.25rem, 3vw, 2rem );
}
/* Stopka ma standardowy odstęp od treści (24px). Wszędzie indziej jest on na
   miejscu, ale tutaj wypadałby między dwoma beżowymi pasami jako biała szpara.
   Zdejmujemy go tylko na stronie z tym pasem. */
main:has( .jadwiga-media ) + footer.wp-block-template-part {
	margin-top: 0;
}
/* Nagłówek jak dawniej: pismo motywu i złota kreska pod spodem — ta sama, co
   pod „zacznij tutaj”. Kreska jest tłem pseudoelementu, więc nie wchodzi
   w tekst i nie łapie kliknięć. */
.jadwiga-media__tytul {
	margin: 0 0 clamp( 2rem, 3vw, 2.75rem );
	font-size: clamp( 24px, 2.6vw, 34px );
	font-weight: 500;
	line-height: 1.2;
}
.jadwiga-media__tytul::after {
	content: '';
	display: block;
	width: clamp( 190px, 21vw, 278px );
	/* Osobny plik, przycięty do samej kreski. Ten spod „zacznij tutaj” dzieli
	   viewBox z napisem, więc nad kreską zostaje puste pole i podkreślenie
	   odjeżdżało od tekstu na kilkadziesiąt pikseli. */
	aspect-ratio: 147.71 / 13.46;
	margin-top: 0.45rem;
	background: url( 'assets/img/dekor-kreska-tytul.svg' ) left center / contain no-repeat;
	pointer-events: none;
}
/* Nie siatka, tylko swobodny rząd z zawijaniem: przy trzech stopniach wielkości
   sztywne kolumny zostawiałyby wokół małych znaków wielkie dziury. Tutaj każdy
   zajmuje tyle, ile potrzebuje, a rzędy same się dopasowują. */
.jadwiga-media__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( 2rem, 3vw, 2.75rem ) clamp( 2rem, 4vw, 3.5rem );
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Wysokość komórki trzyma się sama, niezależnie od tego, czy znak zdążył się
   wczytać. Bez tego blok z `loading="lazy"` startuje jako pasek zerowej
   wysokości i podskakuje w chwili dojścia obrazków. */
.jadwiga-media__znak {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.jadwiga-media__znak img {
	width: auto;
	height: auto;
}
/* Trzy stopnie wielkości. Ograniczenie idzie i po wysokości, i po szerokości:
   znaki mają proporcje od kwadratu (PNŚ) po 4:1 (TEDx, Maejo), więc sama
   wysokość zrobiłaby z tych szerokich pasy przez pół rzędu. */
.jadwiga-media__znak--duzy {
	min-height: 82px;
}
.jadwiga-media__znak--duzy img {
	max-width: min( 100%, 210px );
	max-height: 82px;
}
.jadwiga-media__znak--sredni {
	min-height: 56px;
}
.jadwiga-media__znak--sredni img {
	max-width: min( 100%, 156px );
	max-height: 56px;
}
.jadwiga-media__znak--maly {
	min-height: 40px;
}
.jadwiga-media__znak--maly img {
	max-width: min( 100%, 124px );
	max-height: 40px;
}
@media ( max-width: 781px ) {
	.jadwiga-media {
		padding: 2.25rem 0 2.5rem;
	}
	.jadwiga-media__lista {
		gap: 1.75rem 2rem;
	}
	/* Na telefonie te same trzy stopnie, tylko proporcjonalnie mniejsze —
	   inaczej duże znaki zajmowałyby całą szerokość kolumny. */
	.jadwiga-media__znak--duzy {
		min-height: 58px;
	}
	.jadwiga-media__znak--duzy img {
		max-width: min( 100%, 148px );
		max-height: 58px;
	}
	.jadwiga-media__znak--sredni {
		min-height: 42px;
	}
	.jadwiga-media__znak--sredni img {
		max-width: min( 100%, 112px );
		max-height: 42px;
	}
	.jadwiga-media__znak--maly {
		min-height: 32px;
	}
	.jadwiga-media__znak--maly img {
		max-width: min( 100%, 92px );
		max-height: 32px;
	}
}

/* Warsztaty: kadr zostaje na miejscu, przybliża się samo zdjęcie.
   Zaokrąglenie 16px — ten sam promień, co karty w „Skorzystaj za darmo” i
   pozostałe kadry ze zdjęciem; karta produktu ma 28px, ale ona jest dużo
   większa i przy tych trzech kolumnach wyglądałoby to na inny język. */
#warsztaty .wp-block-column .wp-block-image {
	overflow: hidden;
	border-radius: 16px;
}

/* Reakcje na kursor tylko tam, gdzie kursor istnieje.
   Na telefonie nie ma najechania — jest dotknięcie, po którym przeglądarka
   zostawia `:hover` włączony aż do kolejnego tapnięcia gdzie indziej. Karta
   podnosiła się więc i tak zostawała, z cieniem, bez powodu. `pointer: fine`
   odcina też rysiki i pady, które potrafią zgłaszać `hover: hover`.

   Do tego próg szerokości. Same zapytania o wskaźnik wystarczają na żywym
   telefonie, ale w trybie podglądu urządzenia w narzędziach deweloperskich
   przeglądarka dalej potrafi meldować mysz — i efekt wracał tam, gdzie się go
   sprawdza. Na wąskim ekranie nie ma go więc w żadnym wypadku. */
@media ( hover: hover ) and ( pointer: fine ) and ( min-width: 782px ) {
	.jadwiga-produkt {
		transition: transform 0.35s ease, box-shadow 0.35s ease;
	}
	.jadwiga-produkt:hover {
		transform: translateY( -4px );
		box-shadow: 0 18px 40px -24px rgba( 69, 65, 62, 0.45 );
	}
	#warsztaty .wp-block-column .wp-block-image img {
		transition: transform 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 );
	}
	#warsztaty .wp-block-column:hover .wp-block-image img {
		transform: scale( 1.16 );
	}
}

/* Okładki książek reagują na kursor — kąt liczy `animacje.js` i podaje go
   zmiennymi. Bez skryptu obie są zerowe i nic się nie dzieje. */
.jadwiga-sekcja-produkt--komplet .jadwiga-produkt__foto img {
	transform: perspective( 900px ) rotateX( var( --jadwiga-obrot-x, 0deg ) ) rotateY( var( --jadwiga-obrot-y, 0deg ) );
	transition: transform 0.4s ease-out;
}

/* Kto wyłączył animacje w systemie, dostaje stronę bez ruchu. Dla tej grupy
   odbiorców to nie jest rzadkie ustawienie, więc nie zostawiamy nic „na pół”:
   elementy mają być od razu na swoich miejscach i w pełni widoczne. */
@media ( prefers-reduced-motion: reduce ) {
	.jadwiga-wejscie,
	.jadwiga-wejscie.jest-widoczny {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.jadwiga-dekor-czeka .wp-block-column:has( .jadwiga-produkt__foto )::before,
	.jadwiga-dekor-czeka .wp-block-column:has( .jadwiga-produkt__foto )::after,
	.jadwiga-dekor-czeka::before,
	.jadwiga-dekor-czeka::after {
		clip-path: none;
		transition: none;
	}
	.jadwiga-hero-foto img,
	.jadwiga-hero-tekst > * {
		animation: none;
	}
	.jadwiga-produkt,
	#warsztaty .wp-block-column .wp-block-image img,
	.jadwiga-sekcja-produkt--komplet .jadwiga-produkt__foto img {
		transition: none;
	}
	.jadwiga-produkt:hover,
	#warsztaty .wp-block-column:hover .wp-block-image img,
	.jadwiga-sekcja-produkt--komplet .jadwiga-produkt__foto img {
		transform: none;
	}
}

/* Przycisk ze strzałką — pigułka zgodnie ze specyfikacją, tylko większa */
.jadwiga-strzalka .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.95rem 2.1rem;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.jadwiga-strzalka .wp-block-button__link::after {
	content: '';
	width: 20px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path d="M0 6h21M16 1l5 5-5 5" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path d="M0 6h21M16 1l5 5-5 5" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' ) center / contain no-repeat;
	transition: transform 0.25s ease;
}
.jadwiga-strzalka .wp-block-button__link:hover::after {
	transform: translateX( 4px );
}

/* Telefon: cała sekcja produktu to JEDNA karta — zdjęcie, a pod nim treść
   i przycisk (tak jak w referencji). Na desktopie zdjęcie leży w osobnej
   kolumnie obok karty z tekstem, więc kartą staje się tutaj cały wiersz
   kolumn, a wewnętrzna karta oddaje mu tło i wcięcia. */
@media ( max-width: 781px ) {
	.jadwiga-sekcja-produkt .wp-block-columns {
		flex-direction: column;
		background: var(--wp--preset--color--alt);
		border-radius: 20px;
		padding: 1.25rem 1.25rem 1.75rem;
	}
	/* Zdjęcie zawsze na górze. Sekcje „zdjęcie obok tekstu” są na desktopie
	   lustrzane, więc w kodzie raz pierwsza jest kolumna ze zdjęciem, a raz
	   z tekstem — po złożeniu w jedną kolumnę dawało to różną kolejność w
	   kolejnych sekcjach. Reguła jest wspólna dla wszystkich takich sekcji
	   (produkty, mentoring, konsultacje).
	   Karty w „Skorzystaj za darmo” mają zdjęcie w zagnieżdżonej grupie, a nie
	   wprost w kolumnie, więc ich to nie dotyczy; w warsztatach zdjęcie ma
	   każda z trzech kolumn, więc kolejność zostaje bez zmian. */
	.wp-block-post-content .wp-block-column:has( > .wp-block-image ) {
		order: -1;
	}
	.jadwiga-produkt {
		background: none;
		border-radius: 0;
		padding: 0;
	}
	.jadwiga-produkt__tresc {
		margin-block-start: 0;
	}
	.jadwiga-produkt__kicker {
		font-size: 13px;
	}
	.jadwiga-produkt__tytul {
		font-size: clamp( 23px, 6.4vw, 28px );
	}
	.jadwiga-produkt__opis {
		margin-top: 0.9rem;
		font-size: 15px;
		line-height: 1.65;
	}
	.jadwiga-produkt__akcje {
		margin-top: 1.5rem;
	}
	/* Przycisk ze strzałką na wąskiej karcie: mniej wersalikowego rozstrzelenia,
	   inaczej etykieta łamie się na dwie linie */
	.jadwiga-strzalka .wp-block-button__link {
		gap: 0.6rem;
		padding: 0.8rem 1.4rem;
		font-size: 12px;
		letter-spacing: 0.05em;
	}
	/* Dekoracje: na telefonie sekcja to jedna wąska karta, więc napis siada nad
	   nią (a nie nad samym zdjęciem, bo tam nie ma już wolnego pola), a strzałka
	   robi się węższa i prowadzi w dół pod kartą. */
	.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::before,
	.jadwiga-sekcja-produkt--komplet .wp-block-column:has( .jadwiga-produkt__foto )::after {
		right: auto;
		left: 50%;
		bottom: calc( 100% + 10px );
		width: 168px;
		transform: translateX( -50% );
	}
	.jadwiga-sekcja-produkt--komplet::after {
		right: 12%;
		top: calc( 100% - 96px );
		width: 40px;
	}
	/* Kurs → warsztaty. Układ pionowy, tak jak na dużym ekranie: strzałka wyżej
	   i z prawej, napis niżej i z lewej — razem czytają się jako jeden gest.
	   Między kartą kursu a nagłówkiem warsztatów jest na to za mało miejsca,
	   więc strzałka zachodzi kilkadziesiąt pikseli na dół karty. To ta sama
	   sytuacja, co na desktopie, gdzie też wychodzi poza swoją sekcję; z prawej
	   strony karty jest pusto (przycisk siedzi po lewej), więc nic nie zasłania. */
	.jadwiga-sekcja-produkt--kobieta::after {
		/* Grot musi wypaść nad napisem, nie obok. Napis zaczyna się na 8%
		   szerokości i ma 150 px, więc jego prawa połowa wypada koło 28–36% —
		   i tam siada strzałka. Ustawiona przy prawej krawędzi wskazywała w bok,
		   kilkaset pikseli od tego, do czego prowadzi. */
		left: 28%;
		right: auto;
		top: calc( 100% - 60px );
		width: 28px;
	}
	#warsztaty::before,
	#warsztaty::after {
		left: 8%;
		right: auto;
		top: 14px;
		width: 150px;
	}
	/* Grupa kursów: napis siada nad kartą, strzałki robią się krótsze. Sekcje
	   składają się w jedną kolumnę, więc przeplot stron znika — strzałki i tak
	   zostają po przeciwnych bokach, żeby łańcuch nie szedł jedną kreską. */
	.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::before,
	.jadwiga-sekcja-produkt--abc .wp-block-column:has( .jadwiga-produkt__foto )::after {
		right: auto;
		left: 50%;
		bottom: calc( 100% + 18px );
		width: 210px;
		transform: translateX( -50% );
	}
	.jadwiga-sekcja-produkt--abc::after,
	.jadwiga-sekcja-produkt--rozstanie::after {
		top: calc( 100% - 58px );
		width: 36px;
	}
	.jadwiga-sekcja-produkt--abc::after {
		right: 14%;
	}
	.jadwiga-sekcja-produkt--rozstanie::after {
		left: 14%;
	}
}

/* ===== Karuzela opinii — dwa rzędy sunące w przeciwne strony ===== */
.jadwiga-marquee {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( to right, transparent, #000 5%, #000 95%, transparent );
	mask-image: linear-gradient( to right, transparent, #000 5%, #000 95%, transparent );
}
.jadwiga-marquee__track {
	display: flex;
	gap: 1.5rem;
	width: max-content;
	animation: jadwiga-marquee 60s linear infinite;
	/* Karuzelę da się przewinąć ręcznie (assets/js/opinie.js). `pan-y` oddaje
	   przeglądarce pionowy gest, żeby na telefonie strona dalej się przewijała,
	   a poziomy zostawia nam. */
	cursor: grab;
	touch-action: pan-y;
}
/* Na czas chwytu animacja musi zniknąć, nie tylko się zatrzymać: dopóki działa,
   wygrywa z `transform` w stylu elementu i przeciąganie nie byłoby widoczne. */
.jadwiga-marquee__track.jest-ciagniety {
	animation: none;
	cursor: grabbing;
	user-select: none;
}
.jadwiga-marquee__track--wstecz {
	animation-name: jadwiga-marquee-wstecz;
	animation-duration: 72s;
}
.jadwiga-marquee:hover .jadwiga-marquee__track {
	animation-play-state: paused;
}
@keyframes jadwiga-marquee {
	to { transform: translateX( -50% ); }
}
@keyframes jadwiga-marquee-wstecz {
	from { transform: translateX( -50% ); }
	to { transform: translateX( 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.jadwiga-marquee__track { animation: none; }
	.jadwiga-marquee { overflow-x: auto; }
}

.jadwiga-opinia {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 440px;
	flex-shrink: 0;
	background: var(--wp--preset--color--alt);
	border-radius: 20px;
	padding: 2rem 2.25rem 2.5rem;
}
.jadwiga-opinia__gwiazdki {
	color: var(--wp--preset--color--brand);
	font-size: 15px;
	letter-spacing: 0.22em;
	margin: 0 0 1rem;
}
.jadwiga-opinia__tekst {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 1.25rem;
}
/* Zdjęcie nad nazwiskiem, nie obok: przy 52px w rzędzie portret czytał się jak
   ikonka przy podpisie. W kolumnie jest twarzą autorki opinii, a nazwisko
   podpisem pod nią. Rozmiar do 80px — pliki mają 200x200, więc na ekranach 2x
   (160px) nadal są ostre. */
.jadwiga-opinia__stopka {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	margin-top: auto;
}
.jadwiga-opinia__foto {
	flex: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--portrait);
}
.jadwiga-opinia__imie {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 21px;
	font-weight: 700;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}
/* Znacznik „w przygotowaniu" w miejscu przycisku. Sekcja ma wyglądać na
   skończoną, ale nigdzie nie prowadzić — pusty przycisk albo link do strony,
   której nie ma, wygląda jak usterka. Kształt jak u przycisku, ale bez
   wypełnienia i bez kursora wskazującego: to etykieta, nie akcja. */
/* Plakietka na karcie produktu („Nowy e-book"). Ton z palety strony: beż karty
   i ciemny tekst zamiast krzykliwej naklejki, jaką rysuje WooCommerce. Siedzi
   w rogu zdjęcia (blok obrazka ma `position: relative`), lekko odsunięta od
   krawędzi okładki. */
.jadwiga-plakietka {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 2;
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--alt, #efe8df);
	color: var(--wp--preset--color--contrast, #45413e);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
}

.jadwiga-wkrotce {
	display: inline-block;
	padding: 0.8rem 1.7rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	background: transparent;
}

/* Delikatny cudzysłów w rogu karty — akcent, nie ozdoba na pierwszym planie */
.jadwiga-opinia::after {
	content: '”';
	position: absolute;
	right: 1.5rem;
	bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 76px;
	line-height: 1;
	color: var(--wp--preset--color--brand);
	opacity: 0.35;
	pointer-events: none;
}

/* Karuzela ma iść od krawędzi do krawędzi — wychodzi więc poza margines
   boczny sekcji (rozmycie na obu końcach robi całą robotę) */
.jadwiga-marquee {
	margin-inline: calc( -1 * var( --jadwiga-margines ) );
}

@media ( max-width: 781px ) {
	.jadwiga-opinia {
		width: 300px;
		padding: 1.5rem 1.75rem 2rem;
	}
	/* Rozmycie 5% to na telefonie ledwie 19px — karty ucinały się ostrą krawędzią
	   zamiast znikać. Szersza strefa zaniku wygląda jak na desktopie. */
	.jadwiga-marquee {
		gap: 1rem;
		-webkit-mask-image: linear-gradient( to right, transparent, #000 14%, #000 86%, transparent );
		mask-image: linear-gradient( to right, transparent, #000 14%, #000 86%, transparent );
	}
	.jadwiga-marquee__track {
		gap: 1rem;
	}
}

/* ===== Nagłówek — elementy i responsywność ===== */
/* Logo + pionowa kreska-separator (jak w referencji), menu tuż przy kresce */
.jadwiga-logo {
	display: inline-flex;
	align-items: center;
	padding-inline: 1.25rem 1.5rem;
	border-right: 1px solid var(--wp--preset--color--border);
}
.jadwiga-logo img {
	display: block;
	width: 38px;
	height: 38px;
}
/* Menu wyrównane do lewej, z takim samym oddechem od kreski, jaki kreska ma
   od logo — inaczej pierwsza pozycja przykleja się do separatora */
/* Bez presetu fontSize na bloku nawigacji — WP drukuje go z !important
   i nadpisuje ten rozmiar */
.jadwiga-nav {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* Ikony społecznościowe siedzą w menu tylko po to, żeby pojawić się na dole
   rozwiniętego menu na telefonie — na desktopie pasek ich nie pokazuje */
.jadwiga-nav .jadwiga-nav-social {
	display: none;
}
/* Kontener nawigacji dokłada własny wcięcie — odstęp od kreski liczymy tak,
   żeby wyszedł taki sam jak odstęp logo od kreski (1.5rem) */
.jadwiga-header .jadwiga-nav {
	margin-left: 1.5rem;
}
.jadwiga-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 1.5rem;
	/* Lista dokłada własne wcięcie do wcięcia bloku — kasujemy je, żeby odstęp
	   od kreski był dokładnie taki jak odstęp logo od kreski */
	margin-left: 0;
}
.jadwiga-nav .wp-block-navigation-item {
	white-space: nowrap;
}
/* Zachęta, nie nazwa produktu — zwykły tekst bez linku */
.jadwiga-promo {
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}
/* Przycisk w nagłówku ma się wyróżniać: pełne wypełnienie kolorem marki
   (na stronie reszta przycisków zostaje obrysowana, zgodnie ze specyfikacją) */
.jadwiga-zapisz .wp-block-button__link {
	white-space: nowrap;
	padding: 0.6rem 1.3rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background-color: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}
/* Blok przycisku jest „block”, a sam przycisk w środku „inline-block” — pod nim
   zostaje pusty pasek wysokości wiersza (u nas 9px). Pasek wlicza się do
   wysokości bloku, więc przycisk wyrównany do środka paska siedzi kilka pikseli
   wyżej niż zachęta i koszyk obok. flex + center kasuje pasek.
   Reguła bazowa, nie tylko w menu mobilnym: na desktopie usterka jest ta sama. */
.jadwiga-header .jadwiga-zapisz,
.jadwiga-header .jadwiga-zapisz .wp-block-button {
	display: flex;
	align-items: center;
}

/* W nagłówku przycisk jest już wypełniony, więc zamiast wjeżdżającego koloru
   po prostu ciemnieje */
.jadwiga-zapisz .wp-block-button__link::before {
	background: var(--wp--preset--color--contrast);
}
.jadwiga-zapisz .wp-block-button__link:hover {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--contrast);
}
/* Własny krzyżyk zamykający — stoi w miejscu burgera przy otwartym menu.
   Osobny przycisk, bo klikanie w burgera WP kończyło się wyścigiem: nasze
   zamknięcie i natywna obsługa otwarcia wykonywały się jedno po drugim. */
.jadwiga-zamknij {
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
html.has-modal-open .jadwiga-zamknij {
	display: inline-flex;
}
/* Ikona koszyka */
.jadwiga-koszyk {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--contrast);
	margin-left: 0.25rem;
}
.jadwiga-koszyk:hover {
	color: var(--wp--preset--color--brand);
}
/* Promo + przycisk „Zapisz się" to jedna całość: sam przycisk, bez tekstu obok
   („na co się zapisać? dokąd prowadzi?"), traci sens — więc chowamy je RAZEM, gdy
   przestają się mieścić. Pomiar: menu + promo + przycisk + koszyk stykają się
   dopiero ~1441px, stąd wspólny próg 1500px (zostaje ~60px luzu i zapas na dłuższy
   tekst promo). Na telefonie (≤1159px) oba wracają — patrz reguły niżej. */
@media ( max-width: 1499px ) {
	.jadwiga-header .jadwiga-promo,
	.jadwiga-header .jadwiga-zapisz {
		display: none;
	}
}
/* Poniżej 1160px: menu w overlay (burger) — WP łamie dopiero na 600px,
   ale 8 pozycji nie mieści się już wcześniej. Promo i przycisk wracają
   na telefonie, tak jak w referencji. */
@media ( max-width: 1159px ) {
	/* is-menu-open ląduje na kontenerze, nie na <nav> */
	.jadwiga-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	/* Burger widoczny tylko przy zamkniętym menu — po otwarciu jego miejsce
	   zajmuje krzyżyk WordPressa (patrz niżej) */
	.jadwiga-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
	/* Przy otwartym menu burger ustępuje miejsca własnemu krzyżykowi */
	html.has-modal-open .jadwiga-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}
	/* Kolejność jak w referencji: logo · zachęta · przycisk · koszyk · burger */
	.jadwiga-header .jadwiga-nav {
		order: 5;
		margin-left: 0;
	}
	.jadwiga-header .jadwiga-promo {
		display: block;
		order: 1;
		/* Promo bierze jeden rząd, dopóki się mieści; przy ciasnocie zawija się —
		   i tylko wtedy. Sztywny limit w `ch` na węższym ekranie bywał SZERSZY
		   (19ch<781px vs 16ch) i łamał tekst bez potrzeby; flex robi to naturalnie:
		   wolne miejsce idzie w odstęp z lewej, brak miejsca → kurczy się promo. */
		white-space: normal;
		text-align: right;
		font-size: 12px;
		line-height: 1.3;
	}
	/* Przycisk i koszyk nie oddają szerokości — ściska się tylko promo */
	.jadwiga-header .jadwiga-zapisz,
	.jadwiga-header .jadwiga-koszyk {
		flex-shrink: 0;
	}
	/* Bez rozłożystego menu jest miejsce na przycisk — wraca.
	   `display` musi tu być: wyżej ukrywa go reguła dla ≤1339px, a bazowe
	   wyrównanie (flex + center) leży przed nią w kaskadzie i jej nie przebije. */
	.jadwiga-header .jadwiga-zapisz {
		display: flex;
		order: 2;
	}
	.jadwiga-header .jadwiga-koszyk {
		order: 3;
	}
	/* Krzyżyk zajmuje dokładnie miejsce burgera (ta sama szerokość, ten sam
	   koniec wiersza), więc przy otwieraniu menu nic się nie przesuwa */
	.jadwiga-header .jadwiga-zamknij {
		order: 6;
	}
	.jadwiga-header .jadwiga-header-akcje {
		gap: 0.75rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	/* ===== Rozwinięte menu (overlay) =====
	   Jak w referencji: pasek nagłówka zostaje widoczny, a lista menu dokleja
	   się pod nim, tworząc jedną kartę. Nagłówek musi więc być NAD overlayem
	   (WP nadaje mu bardzo wysoki z-index), a krzyżyk siada tam, gdzie burger. */
	/* Overlay zaczyna się POD paskiem nagłówka — pasek zostaje widoczny.
	   (z-index nie wystarcza: WP tworzy własny kontekst nakładania) */
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: var( --jadwiga-header-h, 84px );
		bottom: 0;
		height: auto;
		padding: 0;
		/* Przyciemnienie robi osobna warstwa (patrz niżej), która sięga też pod
		   pasek nagłówka. !important, bo blok nawigacji WP wymusza tu
		   background-color: inherit. */
		background-color: transparent !important;
		overflow-y: auto;
		/* Menu nie ma jeździć na boki pod palcem */
		overflow-x: hidden;
		overscroll-behavior: contain;
		/* Ponad paskiem (z-index 100), żeby krzyżyk wyniesiony do paska był
		   klikalny — inaczej łapie go ikona koszyka pod spodem */
		z-index: 150;
	}
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		align-self: flex-start;
	}
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		/* Dokleja się do karty nagłówka — razem tworzą jedną bryłę */
		position: relative;
		/* Karta rozwija się z góry na dół, jakby wysuwała się spod paska */
		animation: jadwiga-menu-wjazd 0.44s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
		transform-origin: top center;
		margin: 0 1.5rem;
		background: var(--wp--preset--color--white);
		border-radius: 0 0 16px 16px;
		box-shadow: 0 14px 38px rgba( 69, 65, 62, 0.16 );
		padding: 0.5rem 1.5rem 1.75rem;
	}
	/* Zamykaniem steruje natywny przycisk WordPressa (własna obsługa gryzła się
	   z Interactivity API i nie działała na telefonie). Ustawiamy go tylko tam,
	   gdzie przed otwarciem był burger — w pasku nagłówka. */
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		/* Natywny krzyżyk chowamy wizualnie (nie display:none — inaczej
		   programowe kliknięcie z burgera nie zadziała). Zamyka burger. */
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 1px;
		padding: 0;
		opacity: 0;
		pointer-events: none;
		/* Ikona w środku wystawała poza kartę i dawała poziome przewijanie */
		overflow: hidden;
	}
	/* Pozycje: duże, w kolumnie, bez wersalików — jak w przykładzie */
	/* WordPress rezerwuje u góry miejsce na własny przycisk zamykania — u nas
	   zamyka burger w pasku, więc ta przestrzeń jest pusta i ją kasujemy */
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		width: 100%;
		padding-top: 0;
		margin-top: 0;
	}
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: 0;
	}
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item,
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		width: 100%;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
	}
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		padding-block: 0.8rem;
		animation: jadwiga-pozycja-wjazd 0.32s ease both;
	}
	/* Kaskada: każda kolejna pozycja startuje odrobinę później */
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.06s; }
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.10s; }
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.14s; }
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.18s; }
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.22s; }
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.26s; }
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.30s; }
	.jadwiga-nav .is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.34s; }
	/* Ikony społecznościowe na dole rozwiniętego menu, oddzielone jedną linią */
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.jadwiga-nav-social {
		display: flex;
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--wp--preset--color--border);
		width: 100%;
	}
	/* Prezent tylko w menu mobilnym — na pasku desktopowym nie występuje */
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.jadwiga-prezent .wp-block-navigation-item__label::before {
		content: '🎁 ';
	}
}

/* Przyciemnienie całego ekranu przy otwartym menu — również pasa nagłówka
   i marginesów obok jego karty. Leży pod kartą (z-index 100), więc sam pasek
   zostaje jasny. */
html.has-modal-open .wp-site-blocks::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba( 69, 65, 62, 0.45 );
	pointer-events: none;
	animation: jadwiga-przyciemnienie 0.3s ease both;
}

@keyframes jadwiga-menu-wjazd {
	from {
		/* Karta jest przycięta do zera i wysuwa się spod nagłówka */
		clip-path: inset( 0 0 100% 0 );
		transform: translateY( -18px );
	}
	to {
		clip-path: inset( 0 0 0 0 );
		transform: translateY( 0 );
	}
}
@keyframes jadwiga-przyciemnienie {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* Pozycje wchodzą jedna po drugiej — delikatna kaskada, nie „dyskoteka” */
@keyframes jadwiga-pozycja-wjazd {
	from {
		opacity: 0;
		transform: translateY( -6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog,
	html.has-modal-open .wp-site-blocks::before,
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		animation: none;
	}
}

/* Przy otwartym menu karta nagłówka traci dolne zaokrąglenie i cień —
   razem z listą menu wygląda jak jedna bryła (tak jak w referencji). */
html.has-modal-open .jadwiga-header {
	border-radius: 16px 16px 0 0;
	box-shadow: none;
}
/* Telefon: karta węższa, elementy ciaśniej, logo bliżej krawędzi */
@media ( max-width: 781px ) {
	header.wp-block-template-part {
		padding: 0.75rem 0.75rem 0;
	}
	/* Do krawędzi dosuwamy tylko logo — burger zachowuje odstęp od brzegu */
	.jadwiga-header-rzad {
		padding-left: 0 !important;
	}
	.jadwiga-logo {
		padding-inline: 0.9rem 0;
		/* Na telefonie kreska-separator tylko zabiera miejsce */
		border-right: 0;
	}
	.jadwiga-logo img {
		width: 34px;
		height: 34px;
	}
	.jadwiga-zapisz .wp-block-button__link {
		padding: 0.45rem 0.85rem;
		font-size: 9.5px;
		letter-spacing: 0.04em;
	}
	.jadwiga-header .jadwiga-promo {
		font-size: 11px;
	}
	.jadwiga-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		margin: 0 0.75rem;
		padding: 0.5rem 1.25rem 1.5rem;
	}
}
@media ( max-width: 359px ) {
	/* Na najwęższych ekranach zachęta ustępuje miejsca przyciskowi */
	.jadwiga-header .jadwiga-promo {
		display: none;
	}
}

/* ===== Zapis do newslettera — split: zdjęcie po lewej, formularz po prawej =====
   Ten sam chwyt co w hero: zdjęcie idzie do krawędzi ekranu, treść siedzi
   w jasnej strefie. Sekcja nie ma własnego wcięcia bocznego (patrz wyjątek
   przy „--jadwiga-margines”) — daje je dopiero kolumna z formularzem. */
.jadwiga-zapis__rzad {
	gap: 0;
	/* Marginesy kolumn wychodziłyby poza sekcję i robiły pasek nad zdjęciem */
	margin-block: 0;
}
.jadwiga-zapis__foto {
	align-self: stretch;
	background: var(--wp--preset--color--portrait);
}
.jadwiga-zapis__foto figure {
	margin: 0;
	height: 100%;
}
.jadwiga-zapis__foto img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 560px;
	object-fit: cover;
	/* Kadr przy górze — przy przycięciu w pionie znika dół, głowa zostaje cała */
	object-position: center top;
}
.jadwiga-zapis__tresc {
	padding: clamp( 3rem, 6vw, 5rem ) clamp( 2rem, 5vw, 5rem );
}
.jadwiga-zapis__tytul {
	font-size: clamp( 32px, 3.4vw, 46px );
	line-height: 1.15;
}
/* Akcent jak w referencji: kursywa na podświetleniu w kolorze marki */
.jadwiga-akcent {
	display: inline-block;
	background: var(--wp--preset--color--white);
	border-radius: 6px;
	padding: 0 0.35em;
	font-style: italic;
}

/* ===== Formularz newslettera (placeholder do podpięcia MailerLite) ===== */
.jadwiga-newsletter {
	margin-top: clamp( 1.75rem, 3vw, 2.5rem );
}
.jadwiga-newsletter__pole {
	margin: 0 0 0.75rem;
}
.jadwiga-newsletter input[type='text'],
.jadwiga-newsletter input[type='email'] {
	/* Bez tego wcięcia dolicza się do zadanej szerokości i pole wystaje poza formularz */
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.9rem 1.2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
}
.jadwiga-newsletter input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}
.jadwiga-newsletter input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}
/* Zgoda: kwadracik w kolorze marki, tekst drobny i stonowany */
.jadwiga-newsletter__zgoda {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1rem 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.jadwiga-newsletter__zgoda input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0.1rem 0 0;
	accent-color: var(--wp--preset--color--brand);
}
.jadwiga-newsletter__zgoda a {
	color: inherit;
	text-underline-offset: 3px;
}
/* Przycisk na całą szerokość formularza, ze strzałką jak w innych sekcjach.
   Klasa „wp-element-button” w znaczniku nie jest ozdobna — to ona wpina
   przycisk we wspólną animację hoveru z góry tego pliku. Każdy przycisk spoza
   bloku „wp:button” (formularze, koszyk, checkout) musi ją nosić. */
.jadwiga-newsletter__wyslij {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	width: 100%;
	margin-top: 1.5rem;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	padding: 1rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--brand);
	cursor: pointer;
}
/* Przycisk jest już wypełniony kolorem marki, więc — tak jak ten w nagłówku —
   zamiast wjeżdżającego koloru po prostu ciemnieje */
.jadwiga-newsletter__wyslij::before {
	background: var(--wp--preset--color--contrast);
}
.jadwiga-newsletter__wyslij::after {
	content: '';
	width: 20px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path d="M0 6h21M16 1l5 5-5 5" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path d="M0 6h21M16 1l5 5-5 5" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' ) center / contain no-repeat;
	transition: transform 0.25s ease;
}
.jadwiga-newsletter__wyslij:hover,
.jadwiga-newsletter__wyslij:focus-visible {
	border-color: var(--wp--preset--color--contrast);
}
.jadwiga-newsletter__wyslij:hover::after,
.jadwiga-newsletter__wyslij:focus-visible::after {
	transform: translateX( 4px );
}
/* Etykieta czytana przez czytniki ekranu — pole ma widoczny placeholder,
   ale sam placeholder nie jest etykietą */
.jadwiga-tylko-dla-czytnika {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Telefon: zdjęcie kadrujemy na poziom (pionowy portret zajmowałby cały ekran),
   a formularz dostaje zwykły margines boczny sekcji */
@media ( max-width: 781px ) {
	.jadwiga-zapis__rzad.wp-block-columns.is-stacked-on-mobile {
		display: block;
	}
	.jadwiga-zapis__foto img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.jadwiga-zapis__tresc {
		padding: 2rem var( --jadwiga-margines ) 2.5rem;
	}
	/* Akcent to długi jednolinijkowy napis na podświetleniu — przy większym
	   stopniu wychodził poza margines na najwęższych ekranach */
	.jadwiga-zapis__tytul {
		font-size: clamp( 22px, 6.4vw, 30px );
	}
}

/* ===== Responsywność sekcji ===== */
@media ( max-width: 781px ) {
	/* Mniejsze karty opinii na telefonie */
	.jadwiga-opinia {
		width: 280px;
		padding: 1.25rem;
	}
	/* Węższa karta — portret o krok mniejszy, żeby zostawił miejsce tekstowi. */
	.jadwiga-opinia__foto {
		width: 64px;
		height: 64px;
	}
	.jadwiga-opinia__imie {
		font-size: 20px;
	}
	/* Numer sekcji odrobinę mniejszy */
	.jadwiga-num {
		font-size: 22px;
	}
	/* Sekcja będąca samym nagłówkiem („Zacznij swoją zmianę”) niosła pełne
	   wcięcie XXL z obu stron. Razem z wcięciami sąsiadów i odstępem między
	   blokami dawało to ponad 100px pustki nad tytułem i 90px pod nim —
	   na telefonie sam tytuł zajmował wtedy pół ekranu bez treści.
	   Selektor po zawartości, bo klasa musiałaby przejść przez wzorzec, a treść
	   strony głównej siedzi już w bazie. */
	/* !important, bo wcięcie przychodzi ze stylu inline bloku — a inline wygrywa
	   z arkuszem niezależnie od specyficzności */
	.wp-block-post-content > .wp-block-group:has( > h2:only-child ) {
		padding-block: 1.5rem !important;
	}
	/* Warsztaty: nazwa kierunku i przycisk w jednym rzędzie pod zdjęciem.
	   Osobno zajmowały trzy poziomy (zdjęcie, nazwa, przycisk) i jedna pozycja
	   rozciągała się na pół ekranu; obok siebie mieszczą się swobodnie, bo
	   „Poznaj szczegóły” to wąska pigułka, a nazwy są krótkie. Zdjęcie zostaje
	   nad nimi na pełną szerokość — stąd zawijanie i baza 100% dla kadru. */
	#warsztaty .wp-block-column {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0 1rem;
	}
	#warsztaty .wp-block-column > .wp-block-image {
		flex: 0 0 100%;
	}
	#warsztaty .wp-block-column > .wp-block-heading,
	#warsztaty .wp-block-column > .wp-block-buttons {
		margin-top: 1.15rem;
	}
	#warsztaty .wp-block-column > .wp-block-heading {
		flex: 0 1 auto;
	}

	/* Zdjęcia w kolumnach (warsztaty, mentoring, konsultacje) to portrety 4:5 —
	   po rozłożeniu kolumn w jedną wchodziły na całą szerokość i rosły do 470px
	   wysokości, przez co jedna karta zajmowała cały ekran. Kadrujemy je na
	   poziom; hero ma własny układ i zostaje nietknięte. */
	.wp-block-post-content .wp-block-column:not( .jadwiga-hero-foto ) > .wp-block-image img {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
	/* …ale nie packshoty produktów. Reguła wyżej powstała dla PORTRETÓW i na
	   zdjęciu kadr jest niegroźny. Mockup to pudełko z tytułem — `cover` ucinał
	   mu bok (na telefonie wystawał laptop i telefon poza kartę). Pokazujemy je
	   w całości; tło karty jest beżowe jak tło samych mockupów, więc pusta
	   przestrzeń po bokach nie robi szwu.

	   Wyjątek zawężony do sekcji produktowych. Klas `jadwiga-produkt__foto`
	   noszą w bazie także zdjęcia warsztatów, a to zwykłe fotografie miejsc —
	   wpasowywane w całości siedziały w kadrze 4:3 jako wąski słupek z pustymi
	   marginesami po bokach, zamiast wypełnić kartę. */
	.wp-block-post-content .jadwiga-sekcja-produkt .wp-block-column:not( .jadwiga-hero-foto ) > .wp-block-image.jadwiga-produkt__foto img {
		object-fit: contain;
	}

	/* Okładka e-booka na stronie oferty. Reguła kadrująca 4:3 wyżej ucinała
	   jej górę i dół (oryginał jest pionowy, 722x1024), a `contain` z sekcji
	   produktowych tu nie sięga, bo oferta nie jest `jadwiga-sekcja-produkt`.
	   Okładka ma być widoczna w całości i w swoich proporcjach. */
	.wp-block-post-content .wp-block-column:not( .jadwiga-hero-foto ) > .wp-block-image.jadwiga-oferta__okladka img {
		aspect-ratio: auto;
		height: auto;
		object-fit: contain;
	}
	/* Portrety w CONCIERGE i SPOTKANIA 1:1. Kadr 4:3 wycina z pionowego zdjęcia
	   pas o wysokości 60% oryginału, a domyślne wyśrodkowanie brało go ze środka
	   — czyli ucinało głowę. Przy portrecie punktem odniesienia jest twarz.

	   Oba zdjęcia są w proporcji 4:5, ale twarz mają na innej wysokości, więc
	   jedna wartość im nie wystarcza. Na zdjęciu do SPOTKAŃ nad głową zostaje
	   zapas, więc kadr schodzi o 14% — inaczej u góry robi się pusto. Portret
	   do CONCIERGE zaczyna się niemal przy samej krawędzi i każde zejście
	   ścinałoby czubek głowy, więc ten trzyma się góry. */
	.wp-block-post-content .wp-block-column > .wp-block-image.has-custom-border img {
		object-position: center 14%;
	}
	.wp-block-post-content #mentoring .wp-block-column > .wp-block-image.has-custom-border img {
		object-position: center top;
	}
}

/* ===== Zwykła strona (regulaminy, polityki, teksty) =====
   Dokumenty prawne to długi tekst do czytania, nie do przeglądania: węższa
   miara wiersza niż 1240px treści strony głównej, wyraźna hierarchia sekcji
   i oddech między nimi.

   Filtr `jadwiga_spis_tresci` opakowuje treść w `.jadwiga-dokument__tresc`,
   więc reguły odstępów muszą trafiać i w bezpośrednie dzieci `post-content`
   (zwykła strona), i w dzieci tego kontenera (dokument ze spisem). */
/* Nagłówek strony wisi nad treścią (ujemny margines pod kartą) — na stronie
   głównej wjeżdża pod niego zdjęcie hero i o to chodzi, ale tu podjeżdżałby
   pod niego tytuł. Dokładamy więc jego wysokość do górnego wcięcia.
   Wcięcia trzymamy w CSS, a nie w stylu inline szablonu — inline wygrywa
   z arkuszem i nie dałoby się go tu przeliczyć. */
.jadwiga-strona {
	padding-top: calc( var( --jadwiga-header-h, 84px ) + var(--wp--preset--spacing--50) );
	padding-bottom: var(--wp--preset--spacing--70);
	/* Margines boczny bierze cała strona, a nie osobno każdy blok treści —
	   tytuł leży poza `post-content` i inaczej jako jedyny dotykałby krawędzi */
	padding-inline: var( --jadwiga-margines );
}

/* ===== Strona „Kontakt" ===== */
/* Treść stron ma wąską szerokość czytania (46rem, dla regulaminów). Kontakt to
   układ z formularzem — potrzebuje więcej miejsca, więc TYLKO tę stronę
   poszerzamy (rozpoznajemy po nagłówku sekcji). */
.jadwiga-strona:has( .jadwiga-kontakt-glowa ) .wp-block-post-content {
	max-width: min( 1080px, 100% );
	margin-top: 0;
}
/* Mniejszy odstęp u góry — sam header, plus trochę oddechu (bez wielkiej luki) */
.jadwiga-strona:has( .jadwiga-kontakt-glowa ) {
	padding-top: calc( var( --jadwiga-header-h, 84px ) + 1.5rem );
}
.jadwiga-kontakt-glowa {
	margin-bottom: clamp( 2.5rem, 5vw, 4rem );
}
.jadwiga-kontakt-glowa h1 {
	margin: 0.5rem 0 0;
}
.jadwiga-kontakt-glowa__lid {
	max-width: 40rem;
	margin: 1.25rem auto 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}
.jadwiga-kontakt-kolumny {
	align-items: flex-start;
}
.jadwiga-kontakt-info__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
}
.jadwiga-kontakt-info__mail {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp( 16px, 1.6vw, 20px );
	line-height: 1.3;
	/* łamie dopiero, gdy naprawdę brak miejsca — nie w środku wyrazu bez potrzeby */
	overflow-wrap: anywhere;
}
.jadwiga-kontakt-info__mail a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: color 0.25s ease, border-color 0.25s ease;
}
.jadwiga-kontakt-info__mail a:hover {
	color: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
}

/* Formularz kontaktowy — pola jak w newsletterze/lejku */
.jadwiga-kformularz__rzad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.jadwiga-kformularz__pole {
	margin: 0 0 1rem;
}
.jadwiga-kformularz label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.jadwiga-kformularz label span {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}
.jadwiga-kformularz input[type='text'],
.jadwiga-kformularz input[type='email'],
.jadwiga-kformularz textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.85rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
}
.jadwiga-kformularz textarea {
	resize: vertical;
	min-height: 8rem;
}
.jadwiga-kformularz :is( input, textarea ):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}
/* Honeypot — poza ekranem, niedostępny dla człowieka */
.jadwiga-kformularz__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.jadwiga-kformularz__zgoda {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0.25rem 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.jadwiga-kformularz__zgoda input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0.1rem 0 0;
	accent-color: var(--wp--preset--color--brand);
}
.jadwiga-kformularz__zgoda a {
	color: inherit;
	text-underline-offset: 3px;
}
.jadwiga-kformularz__wyslij {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	width: 100%;
	margin-top: 1.5rem;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	padding: 1rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--brand);
	cursor: pointer;
}
.jadwiga-kformularz__wyslij::before {
	background: var(--wp--preset--color--contrast);
}
.jadwiga-kformularz__wyslij::after {
	content: '';
	width: 20px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path d="M0 6h21M16 1l5 5-5 5" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12"><path d="M0 6h21M16 1l5 5-5 5" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' ) center / contain no-repeat;
	transition: transform 0.25s ease;
}
.jadwiga-kformularz__wyslij:hover,
.jadwiga-kformularz__wyslij:focus-visible {
	border-color: var(--wp--preset--color--contrast);
}
.jadwiga-kformularz__wyslij:hover::after,
.jadwiga-kformularz__wyslij:focus-visible::after {
	transform: translateX( 4px );
}
.jadwiga-kformularz__wyslij:disabled {
	opacity: 0.75;
	cursor: default;
}
.jadwiga-kformularz__status {
	margin: 1rem 0 0;
	font-size: 15px;
	line-height: 1.55;
	min-height: 1.2em;
}
.jadwiga-kformularz__status.is-ok {
	color: #5f8a5a;
}
.jadwiga-kformularz__status.is-blad {
	color: #b0564e;
}
@media ( max-width: 781px ) {
	.jadwiga-kformularz__rzad {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.jadwiga-kontakt-glowa {
		margin-bottom: 1.75rem;
	}
	.jadwiga-kontakt-glowa__lid {
		font-size: 16px;
		margin-top: 1rem;
	}
	/* Formularz to główny cel strony — na telefonie idzie na samą górę,
	   pod nim dane kontaktowe, a zdjęcie na końcu jako miłe domknięcie.
	   Uwaga: globalna reguła stawia kolumnę ze zdjęciem na początku (order:-1) —
	   dla kontaktu to kolumna INFO, więc jawnie przywracamy jej order:0, a
	   formularz dajemy przed nią (specyficzność 0,3,0 bije globalną). */
	.jadwiga-kontakt-form {
		order: -1;
	}
	.jadwiga-strona .jadwiga-kontakt-kolumny .jadwiga-kontakt-info {
		order: 0;
		display: flex;
		flex-direction: column;
		margin-top: 2.75rem;
	}
	/* Zdjęcie na końcu; odstęp od ikon social (0,2,0 bije margines figure z WP).
	   Kadr zostaje bazowy (4:5, center top) — głowa w całości. */
	.jadwiga-kontakt-info .jadwiga-kontakt-info__foto {
		order: 5;
		margin-top: 2.5rem;
	}
}
/* Tytuł strony chowamy domyślnie — strony treściowe mają własny nagłówek
   w hero/treści, a strony narzędziowe (konto, „Moje kursy”, koszyk) nie
   potrzebują powtórzonego tytułu nad formularzem. Wyjątek — dokumenty prawne
   (`body.jadwiga-dokument`), gdzie tytuł to jedyny nagłówek. */
.jadwiga-strona__tytul {
	display: none;
	max-width: 46rem;
	margin-inline: auto;
	font-size: clamp( 30px, 4.4vw, 52px );
	line-height: 1.15;
}
body.jadwiga-dokument .jadwiga-strona__tytul {
	display: block;
}
.jadwiga-strona .wp-block-post-content {
	max-width: 46rem;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--50);
}

/* Rytm treści dokumentu */
.jadwiga-strona :is( .wp-block-post-content, .jadwiga-dokument__wstep, .jadwiga-dokument__tresc ) > * {
	margin-block: 0 1rem;
	padding-inline: 0;
}
/* Numerowane sekcje dokumentu — wyraźny start, sporo powietrza nad nagłówkiem */
.jadwiga-strona :is( .wp-block-post-content, .jadwiga-dokument__wstep, .jadwiga-dokument__tresc ) > h2 {
	margin-block: 2.75rem 1rem;
	font-size: clamp( 22px, 2.4vw, 28px );
	line-height: 1.25;
	/* Kotwica ze spisu ma nie chować nagłówka pod przyklejoną kartą nagłówka */
	scroll-margin-top: calc( var( --jadwiga-header-h, 84px ) + 2rem );
}
.jadwiga-strona :is( .wp-block-post-content, .jadwiga-dokument__wstep, .jadwiga-dokument__tresc ) > h3 {
	margin-block: 2rem 0.75rem;
	font-size: clamp( 19px, 2vw, 22px );
	line-height: 1.3;
}
.jadwiga-strona :is( .wp-block-post-content, .jadwiga-dokument__wstep, .jadwiga-dokument__tresc ) > :is( h2, h3 ):first-child {
	margin-block-start: 0;
}
.jadwiga-strona :is( .wp-block-post-content, .jadwiga-dokument__wstep, .jadwiga-dokument__tresc ) > p {
	line-height: 1.75;
}
.jadwiga-strona :is( .wp-block-post-content, .jadwiga-dokument__wstep, .jadwiga-dokument__tresc ) > :is( ul, ol ) {
	margin-block: 0 1rem;
	padding-left: 1.25rem;
	line-height: 1.75;
}
.jadwiga-strona :is( .wp-block-post-content, .jadwiga-dokument__wstep, .jadwiga-dokument__tresc ) li + li {
	margin-top: 0.4rem;
}
.jadwiga-strona .wp-block-post-content a {
	text-underline-offset: 3px;
}

/* ===== Spis treści dokumentu ===== */
.jadwiga-spis {
	margin-bottom: 2rem;
}
.jadwiga-spis__pudelko {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 0.9rem 1.25rem;
	background: var(--wp--preset--color--alt);
}
.jadwiga-spis__tytul {
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
/* Bez własnych numerków — rozdziały niosą numer w tytule („1. Postanowienia
   ogólne”), więc lista dokładałaby drugi. */
.jadwiga-spis__lista {
	margin: 1rem 0 0.25rem;
	padding-left: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
}
.jadwiga-spis__lista li + li {
	margin-top: 0.6rem;
}
.jadwiga-spis__lista a {
	text-decoration: none;
}
.jadwiga-spis__lista a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Szeroki ekran: spis siada w kolumnie obok tekstu i jedzie razem ze scrollem.
   Kolumna tekstu zostaje wąska — o czytelność wiersza chodzi, nie o wypełnienie
   ekranu — a pusty margines zaczyna wreszcie na coś służyć.
   Dwa elastyczne pudełka, nie siatka: przy siatce spis i akapity były
   rodzeństwem, a `grid-row: 1 / -1` bez jawnych wierszy nie rozciąga się na
   całą kolumnę — spis rozpychał wtedy pierwszy wiersz i zostawiał pod tytułem
   pół ekranu pustki. */
@media ( min-width: 1180px ) {
	/* Nazwane obszary, a nie `grid-row: 1 / -1`: przy nich wiersze są jawne,
	   więc spis naprawdę rozciąga się przez oba i nie rozpycha pierwszego. */
	/* Tylko strony ze spisem treści (dokumenty prawne) dostają układ dwóch
	   kolumn. Wcześniej siatka szła na każdą `.jadwiga-strona` — również konto
	   Woo i „Moje kursy” — i ściskała pojedynczy blok do szerokości treści
	   (formularz logowania kurczył się do ~240px). `:has(.jadwiga-spis)` wiąże
	   układ z faktyczną obecnością spisu. */
	.jadwiga-strona:has( .jadwiga-spis ) .wp-block-post-content {
		display: grid;
		grid-template-columns: 15rem minmax( 0, 46rem );
		grid-template-areas:
			'spis wstep'
			'spis tresc';
		align-items: start;
		gap: 0 4rem;
		max-width: 65rem;
	}
	/* Dzieci układu „constrained” nie rozciągają się w komórce siatki — zostają
	   szerokości własnej treści i lądują na jej środku. Widać to było po wstępie:
	   krótsze wiersze niż rozdziały pod nim i przesunięty w prawo.
	   `justify-self: stretch` tego nie ruszał, `width: 100%` ustawia szerokość
	   kolumny wprost i działa. border-box, bo wcięcia dokładamy osobno. */
	.jadwiga-strona .wp-block-post-content > .jadwiga-spis,
	.jadwiga-strona .wp-block-post-content > .jadwiga-dokument__wstep,
	.jadwiga-strona .wp-block-post-content > .jadwiga-dokument__tresc {
		box-sizing: border-box;
		width: 100%;
		margin-inline: 0;
	}
	.jadwiga-dokument__wstep {
		grid-area: wstep;
		min-width: 0;
	}
	/* Tytuł stoi poza układem (jest w szablonie, nie w treści), więc równamy go
	   do kolumny tekstu ręcznie — inaczej wisiałby nad spisem, przesunięty
	   w lewo względem pierwszego akapitu. */
	.jadwiga-strona:has( .jadwiga-spis ) .jadwiga-strona__tytul {
		max-width: 65rem;
		padding-left: 19rem;
	}
	.jadwiga-dokument__tresc {
		grid-area: tresc;
		/* min-width: 0 — inaczej długi adres w tekście rozpycha kolumnę */
		min-width: 0;
	}
	.jadwiga-spis {
		grid-area: spis;
		position: sticky;
		top: calc( var( --jadwiga-header-h, 84px ) + 1.5rem );
		align-self: start;
		margin-bottom: 0;
	}
	.jadwiga-spis__pudelko {
		border: 0;
		border-left: 1px solid var(--wp--preset--color--border);
		border-radius: 0;
		padding: 0 0 0 1.25rem;
		background: none;
	}
	/* Na szerokim spis jest zawsze rozwinięty — chowanie ma sens tylko tam,
	   gdzie zabiera cały ekran */
	.jadwiga-spis__tytul {
		cursor: default;
		list-style: none;
	}
	.jadwiga-spis__tytul::-webkit-details-marker {
		display: none;
	}
	.jadwiga-spis__lista {
		max-height: calc( 100vh - var( --jadwiga-header-h, 84px ) - 9rem );
		overflow-y: auto;
	}
}
/* Pobieranie PDF-ów. Etykiety mają bardzo różną długość („Pobierz regulamin”
   obok „Pobierz formularz odstąpienia od umowy”), więc puszczone luzem stały
   jeden pod drugim w dwóch różnych szerokościach, a dłuższa łamała się na dwie
   linie. Dajemy im wspólną szerokość: na wąskim ekranie kolumna na całą
   szerokość, dalej — rząd równych kafli. */
.jadwiga-strona .wp-block-buttons {
	margin-block: 1.75rem;
	gap: 0.75rem;
}
.jadwiga-dokument__pobrania {
	/* Dłuższa etykieta łamie się na dwie linie — w rzędzie krótszy przycisk
	   byłby wtedy niższy od sąsiada. Rozciągamy oba do wspólnej wysokości. */
	align-items: stretch;
}
.jadwiga-dokument__pobrania .wp-block-button {
	flex: 1 1 15rem;
}
.jadwiga-dokument__pobrania .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 3.25rem;
	text-align: center;
}
@media ( max-width: 599px ) {
	.jadwiga-dokument__pobrania {
		flex-direction: column;
	}
	/* Po obróceniu osi „flex-basis: 15rem” stałoby się wysokością przycisku */
	.jadwiga-dokument__pobrania .wp-block-button {
		flex: 0 0 auto;
		width: 100%;
	}
}
/* Kreska przed spisem pozostałych dokumentów */
.jadwiga-dokument__kreska {
	margin-block: 3rem 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	background: none;
	height: 0;
}

/* ===== Sklep (WooCommerce) =====
   Wtyczka daje gołą siatkę: zdjęcie, tytuł, cena, przycisk. Ubieramy ją w ten
   sam język, co reszta strony — karta na bieli z cienkim obrysem (jak w sekcji
   „Skorzystaj za darmo”), zdjęcie w stałym kadrze, delikatne uniesienie pod
   kursorem. Przycisk niesie już `wp-element-button`, więc animację hoveru
   dostaje z góry tego pliku za darmo. */

/* Tytuł archiwum, okruszki i licznik wyników wycinamy w PHP (functions.php),
   a sortowanie podmieniamy na pasek kategorii (też w PHP). */

/* Pasek kategorii — rząd linków, aktywna z kreską w kolorze marki. Bierze całą
   szerokość rzędu (sortowanie było wąskie i dosuwane w prawo, filtr czyta się
   od lewej). Na wąskich ekranach przewija się w bok zamiast łamać w kilka
   linii — długie nazwy („Wyjazdy i warsztaty”) inaczej zajmowały pół ekranu. */
.jadwiga-kat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.75rem;
	width: 100%;
}
.jadwiga-kat__link {
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
	transition: color 0.25s ease, border-color 0.25s ease;
}
.jadwiga-kat__link:hover,
.jadwiga-kat__link:focus-visible {
	color: var(--wp--preset--color--contrast);
}
.jadwiga-kat__link.is-aktywna {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--brand);
}
@media ( max-width: 599px ) {
	.jadwiga-kat {
		flex-wrap: nowrap;
		gap: 1.25rem;
		overflow-x: auto;
		/* Margines boczny sekcji „wjeżdża” pod przewijany pasek, żeby skrajne
		   pozycje nie kleiły się do krawędzi ekranu */
		margin-inline: calc( -1 * var( --jadwiga-margines ) );
		padding-inline: var( --jadwiga-margines );
		scrollbar-width: none;
		/* Rozmycie krawędzi jako sygnał „jest więcej w bok” — bez niego twarde
		   ucięcie drugiej pozycji łatwo wziąć za brak dalszych kategorii.
		   Domyślnie lewa krawędź ostra, prawa rozmyta, więc już przy pierwszym
		   wyświetleniu widać, że pasek się przewija. `header.js` przełącza
		   zmienne przy przewijaniu: rozmycie znika z tej strony, gdzie nic nie
		   ma, i pojawia się po drugiej. */
		-webkit-mask-image: linear-gradient( to right, var( --kat-l, #000 ) 0, #000 1.25rem, #000 calc( 100% - 2rem ), var( --kat-r, transparent ) 100% );
		mask-image: linear-gradient( to right, var( --kat-l, #000 ) 0, #000 1.25rem, #000 calc( 100% - 2rem ), var( --kat-r, transparent ) 100% );
	}
	.jadwiga-kat::-webkit-scrollbar {
		display: none;
	}
}

/* Sortowanie (gdyby gdzieś zostało): natywny <select> wygląda jak z formularza
   urzędowego — dajemy mu obrys i własną strzałkę w kolorze marki */
.woocommerce-ordering select {
	appearance: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.6rem 2.75rem 0.6rem 1.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--white);
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%23A89A8B" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>' );
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 12px 8px;
	cursor: pointer;
	transition: border-color 0.25s ease;
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus-visible {
	border-color: var(--wp--preset--color--brand);
}

/* Siatka. Woo liczy kolumny sam, przez `auto-fill` z minimalną szerokością
   toru — i wystarczyło powiększyć odstęp, żeby trzecia kolumna się nie zmieściła
   i katalog przeskoczył na dwie. Zadajemy liczbę kolumn wprost, wtedy odstęp
   jest już tylko odstępem. */
.wc-block-product-template.wc-block-product-template {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1.25rem, 2.5vw, 2rem );
}
@media ( max-width: 1023px ) {
	.wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Karta produktu. Siatka z nazwanymi obszarami: zdjęcie i tytuł na całą
   szerokość, a na dole jeden wiersz — cena po lewej, przycisk-ikona po prawej
   (jak w referencji). Wiersz tytułu to `1fr`, żeby wchłonął różnicę wysokości
   między kartami i przykleił wiersz ceny do dołu — przyciski stoją w jednej
   linii nawet przy tytułach różnej długości. */
li.wc-block-product {
	box-sizing: border-box;
	display: grid;
	/* Kolumna przycisku ma stałe 3rem, a nie `auto`: przy schowanej etykiecie
	   `auto` skurczyłoby się do min-content ikony (20px) i pociągnęło przycisk
	   za sobą. Stała szerokość toru rozwiązuje to u źródła. */
	grid-template-columns: minmax( 0, 1fr ) 3rem;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'zdjecie zdjecie'
		'tytul   tytul'
		'cena    przycisk';
	column-gap: 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	padding: 1rem 1rem 1.5rem;
	background: var(--wp--preset--color--white);
	transition: transform 0.35s ease, box-shadow 0.35s ease,
		border-color 0.35s ease;
}
li.wc-block-product:hover {
	transform: translateY( -4px );
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 14px 34px rgba( 69, 65, 62, 0.10 );
}

/* Zdjęcie w stałym kadrze — produkty mają różne proporcje (mokapy książek
   obok zdjęć z wyjazdów) i bez tego rząd rozjeżdżał się na różne wysokości */
li.wc-block-product .wc-block-components-product-image {
	grid-area: zdjecie;
	overflow: hidden;
	border-radius: 14px;
	margin-bottom: 1.25rem;
}
li.wc-block-product .wc-block-components-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	/* „contain", nie „cover" — produkty to głównie makiety pudełek/e-booków na
	   przezroczystym tle; kadrowanie do 4:5 ucinało im boki. Pokazujemy cały
	   produkt wyśrodkowany (WooCommerce wstawia inline object-fit:cover, stąd
	   !important). Karta i tak ma równą wysokość dzięki aspect-ratio. */
	object-fit: contain !important;
	transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}
li.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale( 1.05 );
}

li.wc-block-product .wp-block-post-title {
	grid-area: tytul;
	align-self: start;
	margin: 0 0 0.75rem;
	line-height: 1.3;
	/* Do lewej — w jednej linii z ceną pod spodem. Blok tytułu niesie klasę
	   `has-text-align-center` z ustawień Woo, stąd nadpisanie. */
	text-align: left;
}
li.wc-block-product .wp-block-post-title a {
	text-decoration: none;
}

li.wc-block-product .wc-block-components-product-price {
	grid-area: cena;
	align-self: center;
	display: block;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	text-align: left;
}
/* „z VAT” to przypis, nie część ceny */
.woocommerce-price-suffix {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

/* Przycisk-ikona koszyka. Etykieta zostaje w DOM (button ma własny aria-label
   z nazwą produktu), tylko ją chowamy — stąd font-size:0 na widocznym <span>.
   Wypełnienie kolorem marki, więc — jak w nagłówku — na hover ciemnieje
   zamiast wjazdu koloru. */
li.wc-block-product .wc-block-components-product-button {
	grid-area: przycisk;
	align-self: center;
	margin: 0;
}
li.wc-block-product .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* WooCommerce trzyma przycisk jako element flex, a przy schowanej etykiecie
	   (font-size:0) jego min-content to sama ikona (20px) — dlatego bez wymuszenia
	   przycisk kurczył się do niej. Zwykły `width` przegrywa z regułą wtyczki,
	   więc szerokość trzyma `min-width` (jej WooCommerce już nie nadpisuje). */
	flex: none;
	min-width: 3rem;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}
li.wc-block-product .wc-block-components-product-button__button > span {
	font-size: 0;
}
li.wc-block-product .wc-block-components-product-button__button::before {
	background: var(--wp--preset--color--contrast);
}
li.wc-block-product .wc-block-components-product-button__button::after {
	content: '';
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 8.5h15.6l-1 10.2a2 2 0 0 1-2 1.8H7.2a2 2 0 0 1-2-1.8L4.2 8.5Z"/><path d="M8.6 11V6.8a3.4 3.4 0 0 1 6.8 0V11"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 8.5h15.6l-1 10.2a2 2 0 0 1-2 1.8H7.2a2 2 0 0 1-2-1.8L4.2 8.5Z"/><path d="M8.6 11V6.8a3.4 3.4 0 0 1 6.8 0V11"/></svg>' ) center / contain no-repeat;
}
li.wc-block-product .wc-block-components-product-button__button:hover,
li.wc-block-product .wc-block-components-product-button__button:focus-visible {
	border-color: var(--wp--preset--color--contrast);
}

/* Telefon: jeden produkt w rzędzie (jak w referencji) — karta szeroka,
   więc cena i przycisk-ikona mają swobodnie miejsce w dolnym wierszu */
@media ( max-width: 599px ) {
	/* Rząd „licznik wyników + sortowanie” jest flexem `space-between`; przy
	   dwóch elementach na 375px select wystawał poza ekran. Łamiemy na dwie
	   linie i dajemy mu całą szerokość. */
	body.woocommerce-page .wp-block-group.is-content-justification-space-between {
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.wc-block-catalog-sorting,
	.woocommerce-ordering,
	.woocommerce-ordering select {
		width: 100%;
	}
	.wc-block-product-template.wc-block-product-template {
		grid-template-columns: minmax( 0, 1fr );
	}
	li.wc-block-product {
		padding: 0.75rem 0.75rem 1.25rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	li.wc-block-product,
	li.wc-block-product .wc-block-components-product-image img {
		transition: none;
	}
	li.wc-block-product:hover {
		transform: none;
	}
	li.wc-block-product:hover .wc-block-components-product-image img {
		transform: none;
	}
}

/* ===== Strona zamówienia „Komplet książek” (lejek) =====
   Dwie kolumny jak w referencji: po lewej marketing (zdjęcie, cena, opinie),
   po prawej formularz zamówienia. Prawa kolumna „lepka” — przy przewijaniu
   długiej lewej strony formularz zostaje w polu widzenia. */
.jadwiga-komplet {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 2rem, 5vw, 5rem );
	align-items: start;
	max-width: 72rem;
	margin-inline: auto;
}
.jadwiga-komplet__foto {
	margin: 0 0 2rem;
	border-radius: 20px;
	overflow: hidden;
	background: var(--wp--preset--color--alt);
}
.jadwiga-komplet__foto img {
	display: block;
	width: 100%;
	height: auto;
}
.jadwiga-komplet__tytul {
	margin: 0;
	font-size: clamp( 28px, 3vw, 40px );
	line-height: 1.15;
}
/* Krótki opis produktu (podtytuł pod nazwą) — z pola „Krótki opis” w adminie */
.jadwiga-komplet__krotki {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}
.jadwiga-komplet__krotki p {
	margin: 0;
}
.jadwiga-komplet__krotki p + p {
	margin-top: 0.5rem;
}
.jadwiga-komplet__cena {
	margin: 1.25rem 0 0;
	font-size: 26px;
	font-weight: 600;
}
.jadwiga-komplet__opis {
	margin-top: 1.25rem;
	line-height: 1.7;
}
/* Przycisk „Pokaż pełny opis” należy wyłącznie do telefonu (styl i sens ma
   w media query niżej). Na szerokim ekranie opis stoi w całości, więc gdyby
   skrypt nie zdążył go sprzątnąć po zmianie szerokości okna, chowamy go tu. */
.jadwiga-komplet__wiecej {
	display: none;
}

/* Opinie — węższe karty niż na stronie głównej, żeby zmieściły się w kolumnie */
.jadwiga-komplet__opinie {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}
.jadwiga-komplet__opinia {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border-radius: 16px;
	background: var(--wp--preset--color--alt);
}
.jadwiga-komplet__gwiazdki {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.15em;
}
.jadwiga-komplet__opinia blockquote {
	margin: 0 0 0.5rem;
	line-height: 1.6;
}
.jadwiga-komplet__opinia figcaption {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}
.jadwiga-komplet__prawa {
	position: sticky;
	top: calc( var( --jadwiga-header-h, 84px ) + 1.5rem );
}

/* Zamówienie z koszyka (`/zamowienie/`) — ta sama oprawa, jedna kolumna.
   W koszyku może być wiele pozycji, więc lewa kolumna lejka (marketing jednego
   produktu) nie ma tu czego pokazać; listę zamawianych rzeczy niesie samo
   podsumowanie checkoutu. Bez jednej kolumny obok formularz nie ma się też do
   czego „przyklejać”, więc zdejmujemy `sticky`. */
.jadwiga-komplet--koszyk {
	grid-template-columns: minmax( 0, 1fr );
	max-width: 42rem;
}
.jadwiga-komplet--koszyk .jadwiga-komplet__prawa {
	position: static;
}

/* Tytuł strony w lejku jest zbędny — nagłówek niesie sama treść */
body.jadwiga-lejek .jadwiga-strona__tytul {
	display: none;
}
/* Szablon `page` zwęża treść do 46rem i na szerokim ekranie robi z niej siatkę
   dwukolumnową dla spisu treści regulaminów. Lejek to inny, własny układ —
   zdejmujemy oba na tej stronie, żeby siatka dokumentu go nie ściskała. */
body.jadwiga-lejek .wp-block-post-content {
	display: block;
	max-width: none;
	margin-top: var(--wp--preset--spacing--40);
}

/* ===== Order bumpy — dodatki nad formularzem =====
   Jak w referencji: kartka z przerywaną ramką, po lewej zdjęcie, po prawej
   nazwa + opis + cena i przycisk z „ptaszkiem”. Po dodaniu ramka i ptaszek
   przechodzą w kolor marki. */
.jadwiga-bumpy {
	display: grid;
	gap: 1rem;
	margin-bottom: 2rem;
}
.jadwiga-bump {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 1.25rem;
	align-items: center;
	padding: 1rem 1.25rem;
	border: 2px dashed var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
.jadwiga-bump.is-dodany {
	border-color: var(--wp--preset--color--brand);
	border-style: solid;
	background: var(--wp--preset--color--alt);
}
.jadwiga-bump__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.jadwiga-bump__tytul {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}
.jadwiga-bump__akcja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 0.9rem;
}
.jadwiga-bump__cena {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.jadwiga-bump__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}
/* „Ptaszek” — pusty kwadracik, po dodaniu wypełnia się marką ze znaczkiem */
.jadwiga-bump__ptaszek {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 5px;
	background: var(--wp--preset--color--white);
	transition: background-color 0.25s ease;
}
.jadwiga-bump.is-dodany .jadwiga-bump__ptaszek {
	background: var(--wp--preset--color--brand);
}
.jadwiga-bump.is-dodany .jadwiga-bump__ptaszek::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--white);
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}
.jadwiga-bump__btn:hover,
.jadwiga-bump.is-dodany .jadwiga-bump__btn {
	background: var(--wp--preset--color--alt);
}
@media ( max-width: 479px ) {
	.jadwiga-bump {
		grid-template-columns: 60px 1fr;
		gap: 0.9rem;
		padding: 0.9rem 1rem;
	}
}

/* ===== Własne pole kuponu przy podsumowaniu =====
   Zwijane, delikatne. „Masz kupon?” to zwykły, cichy link; po rozwinięciu —
   pole i przycisk w jednej linii, jak w referencji. */
.jadwiga-kupon {
	margin-bottom: 1.25rem;
}
.jadwiga-kupon__toggle {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.jadwiga-kupon__link {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Domyślnie schowane; otwiera klasa na kontenerze (JS), z delikatnym pojawieniem.
   Nie `hidden` + slideToggle — atrybut `hidden` przegrywał z `display:flex`,
   a jQuery pokazywał div jako `block` i psuł układ pola obok przycisku. */
.jadwiga-kupon__pole {
	display: none;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.9rem;
}
.jadwiga-kupon.is-otwarte .jadwiga-kupon__pole {
	display: flex;
	animation: jadwiga-kupon-poj 0.25s ease both;
}
@keyframes jadwiga-kupon-poj {
	from { opacity: 0; transform: translateY( -4px ); }
	to   { opacity: 1; transform: none; }
}
@media ( prefers-reduced-motion: reduce ) {
	.jadwiga-kupon.is-otwarte .jadwiga-kupon__pole {
		animation: none;
	}
}
.jadwiga-kupon__input {
	box-sizing: border-box;
	flex: 1 1 12rem;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.75rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
}
.jadwiga-kupon__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}
.jadwiga-kupon__apply {
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.jadwiga-kupon__apply:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}
.jadwiga-kupon__msg {
	flex: 1 0 100%;
	margin: 0;
	font-size: 13px;
}
.jadwiga-kupon__msg.is-ok {
	color: #3f7a4e;
}
.jadwiga-kupon__msg.is-blad {
	color: #b3413a;
}

/* ===== Osadzony checkout Woo w lejku =====
   Klasyczny `[woocommerce_checkout]` układa pola w dwie podkolumny (dane +
   informacje dodatkowe). W wąskiej prawej kolumnie to się nie mieści — składamy
   wszystko w jedną kolumnę i ubieramy pola tak jak formularz newslettera. */

/* Powiadomienia „Masz kupon?” i „Powracający klient?” WooCommerce rysuje jako
   niebieskie ramki z ikoną — krzyczą i psują spokój strony. Spłaszczamy je do
   drobnej, stonowanej linijki tekstu z linkiem w kolorze marki; ikonę chowamy. */
.jadwiga-komplet__prawa .wc-block-components-notice-banner.is-info {
	min-height: 0;
	margin: 0 0 1rem;
	/* WooCommerce trzyma `padding:16px !important` na banerze — bez !important
	   tekst „Powracający klient?” miał ~16px wcięcia od lewej krawędzi kolumny. */
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}
.jadwiga-komplet__prawa .wc-block-components-notice-banner.is-info svg {
	display: none;
}
.jadwiga-komplet__prawa .wc-block-components-notice-banner.is-info .wc-block-components-notice-banner__content {
	margin: 0;
	padding: 0;
}
.jadwiga-komplet__prawa .wc-block-components-notice-banner.is-info a {
	color: var(--wp--preset--color--brand);
	text-underline-offset: 3px;
}

.jadwiga-komplet__prawa .col2-set,
.jadwiga-komplet__prawa .col2-set .col-1,
.jadwiga-komplet__prawa .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}
.jadwiga-komplet__prawa .col2-set .col-2 {
	margin-top: 1.5rem;
}
.jadwiga-komplet__prawa h3 {
	margin: 0 0 1rem;
	font-size: 20px;
}
.jadwiga-komplet__prawa .form-row {
	margin: 0 0 1rem;
}
/* Formularz logowania ma dwie kolumny obok siebie: login (etykieta łamie się na
   dwa wiersze) i hasło (jeden wiersz) — przez to pola startowały na różnej
   wysokości. Rezerwujemy etykietom dwa wiersze, żeby oba pola się zrównały. */
.jadwiga-komplet__prawa .woocommerce-form-login .form-row-first label,
.jadwiga-komplet__prawa .woocommerce-form-login .form-row-last label {
	min-height: 2.9em;
	line-height: 1.35;
}
/* Wiersz „Logowanie” + „Zapamiętaj mnie” ma iść w dwóch kolumnach jak pola nad
   nim: przycisk pod loginem (przy lewej krawędzi), checkbox pod hasłem. Te same
   kolumny (47% / 47% z odstępem) i wyrównanie do lewej w każdej. W DOM checkbox
   jest pierwszy (kolejność wcześniej trzymał `float` przycisku) — kolejnością
   grida wracamy do przycisk-lewo, checkbox-prawo. */
.jadwiga-komplet__prawa .woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme ) {
	display: grid;
	grid-template-columns: 47% 47%;
	justify-content: space-between;
	justify-items: start;
	align-items: center;
}
.jadwiga-komplet__prawa .woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme ) button {
	order: 1;
}
.jadwiga-komplet__prawa .woocommerce-form-login__rememberme {
	order: 2;
	margin: 0;
}
.jadwiga-komplet__prawa label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.jadwiga-komplet__prawa input:not( [type='checkbox'] ):not( [type='radio'] ),
.jadwiga-komplet__prawa select,
.jadwiga-komplet__prawa textarea,
.jadwiga-komplet__prawa .select2-selection {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.8rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
}
/* Pole kraju (Select2) było wyższe niż reszta: padding zewnętrznego pudełka
   sumował się z paddingiem wewnętrznego `__rendered` i domyślną wysokością
   Select2. Wyrównujemy do wysokości pól tekstowych — jedno pudełko, treść
   wyśrodkowana, wewnętrzne wcięcia zerujemy. */
.jadwiga-komplet__prawa .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	min-height: 3.125rem;
	height: auto;
	/* wysokość z min-height — pionowy padding zerujemy, żeby nie sumował się z
	   paddingiem `__rendered` */
	padding-top: 0;
	padding-bottom: 0;
	line-height: normal;
}
.jadwiga-komplet__prawa .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: normal;
	color: inherit;
}
.jadwiga-komplet__prawa .select2-selection--single .select2-selection__arrow {
	top: 0;
	height: 100%;
	right: 0.6rem;
}
.jadwiga-komplet__prawa input:focus-visible,
.jadwiga-komplet__prawa select:focus-visible,
.jadwiga-komplet__prawa textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}

/* Podsumowanie zamówienia + płatności — na jasnej karcie, oddzielone od pól */
.jadwiga-komplet__prawa #order_review,
.jadwiga-komplet__prawa .woocommerce-checkout-review-order {
	margin-top: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--alt);
}
.jadwiga-komplet__prawa .shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.25rem;
}
/* Podsumowanie porzuca układ tabeli na rzecz flexa. Inaczej o szerokości
   decyduje najwęższa kolumna (ceny), a wiersz wysyłki — z logo przewoźnika
   i przyciskiem mapy paczkomatów — dostaje ledwie 200 px. Sam `display:block`
   na komórkach nie pomaga: dopóki wiersz jest `table-row`, przeglądarka
   opakowuje je w anonimową komórkę i znów mierzy kolumnami. */
.jadwiga-komplet__prawa .shop_table,
.jadwiga-komplet__prawa .shop_table thead,
.jadwiga-komplet__prawa .shop_table tbody,
.jadwiga-komplet__prawa .shop_table tfoot {
	display: block;
}
.jadwiga-komplet__prawa .shop_table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Kreski rysuje wiersz. Komórki mają własne obramowania od WooCommerce
   (`.woocommerce table.shop_table td` — trzy klasy, więc przebija nasze dwie;
   stąd `body.jadwiga-lejek` z przodu). To one dawały podwójne linie nad
   przyciskiem wyboru paczkomatu. */
body.jadwiga-lejek .jadwiga-komplet__prawa .shop_table th,
body.jadwiga-lejek .jadwiga-komplet__prawa .shop_table td {
	display: block;
	/* Wcięcie boczne, żeby tekst i kwoty nie stały wprost na ramce tabeli. */
	padding: 0.6rem;
	text-align: left;
	border-top: 0;
	border-bottom: 0;
}
.jadwiga-komplet__prawa .shop_table .order-total {
	border-bottom: 0;
}
/* Prefiks `body.jadwiga-lejek` konieczny: reguła bazowa dla komórek tabeli ma
   go u siebie i ustawia `text-align: left` — bez niego przegrywamy. */
body.jadwiga-lejek .jadwiga-komplet__prawa .shop_table .order-total td {
	font-size: 18px;
	font-weight: 600;
	text-align: right;
}
/* Kwota z VAT-em szła w tej samej linii co suma i łamała się w przypadkowym
   miejscu („(zawiera" zostawało przy kwocie, reszta spadała niżej). Dajemy jej
   własny wiersz i mniejszy stopień — to przypis do sumy, nie druga suma. */
body.jadwiga-lejek .jadwiga-komplet__prawa .shop_table .order-total .includes_tax {
	display: block;
	margin-top: 0.2rem;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}
/* Wysyłka i wybór paczkomatu — na pełną szerokość, etykieta nad metodami */
.jadwiga-komplet__prawa tr.woocommerce-shipping-totals,
.jadwiga-komplet__prawa tr.easypack-parcel-machine {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
/* Metody, przycisk mapy i notatka to jeden blok dostawy — kreska dopiero
   pod nim, tuż przed sumą. */
.jadwiga-komplet__prawa tr.woocommerce-shipping-totals,
.jadwiga-komplet__prawa tr.easypack-parcel-machine {
	border-bottom: 0;
}
.jadwiga-komplet__prawa .woocommerce-shipping-totals th,
.jadwiga-komplet__prawa .easypack-parcel-machine th {
	padding-bottom: 0.4rem;
	font-size: 13px;
	font-weight: 500;
}
.jadwiga-komplet__prawa .woocommerce-shipping-totals td,
.jadwiga-komplet__prawa .easypack-parcel-machine td {
	padding-top: 0;
}
/* Etykieta wiersza paczkomatu jest pusta (podpis zakomentowany w szablonie
   wtyczki), ale zawiera białe znaki, więc `:empty` jej nie łapie — chowamy ją
   wprost. Bez tego nad przyciskiem mapy zostaje pusty pasek. Cała komórka
   z przyciskiem przysuwa się wtedy do metod. */
body.jadwiga-lejek .jadwiga-komplet__prawa th.easypack-parcel-machine-label {
	display: none;
}
.jadwiga-komplet__prawa .easypack-parcel-machine-select {
	padding-top: 0.75rem;
}
.jadwiga-komplet__prawa #shipping_method {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jadwiga-komplet__prawa #shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
}
.jadwiga-komplet__prawa #shipping_method label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}
/* Logo przewoźnika wtyczka wstawia w wysokości 40px — za dużo obok tekstu */
.jadwiga-komplet__prawa .easypack-shipping-method-logo img {
	display: block;
	width: auto;
	height: 18px;
}
/* „Wybierz punkt odbioru” — wtyczka daje żółty klocek InPostu o sztywnych
   200 px (przez co napis się łamie); ubieramy go w nasz przycisk pomocniczy.
   Selektor z `#` — reguła wtyczki też idzie po id i inaczej wygrywa. */
.jadwiga-komplet__prawa #easypack_show_geowidget {
	display: inline-block;
	width: auto;
	max-width: none;
	margin-top: 0;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	padding: 0.7rem 1.5rem;
	background: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.jadwiga-komplet__prawa #selected-parcel-machine {
	margin-top: 0.6rem;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
/* Kiedy i jak dociera zamówienie — zamyka blok dostawy */
.jadwiga-komplet__prawa .jadwiga-dostawa td {
	padding-top: 0.75rem;
}
.jadwiga-komplet__prawa .jadwiga-dostawa p {
	margin: 0;
	/* WooCommerce pogrubia każdą komórkę tabeli podsumowania */
	font-weight: 400;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.jadwiga-komplet__prawa .jadwiga-dostawa p + p {
	margin-top: 0.35rem;
}

.jadwiga-komplet__prawa .wc_payment_methods {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}
.jadwiga-komplet__prawa .wc_payment_method label {
	display: inline;
	font-size: 15px;
}

/* Informacja o zakładaniu konta przy kursie — nad danymi rozliczeniowymi */
.jadwiga-komplet__prawa .jadwiga-kurs-konto {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--brand);
	border-radius: 10px;
	background: var(--wp--preset--color--alt);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

/* Zgody nad przyciskiem złożenia zamówienia — checkbox po lewej, tekst obok,
   drobniejszy i stonowany. Obowiązkowe z gwiazdką w kolorze marki. */
.jadwiga-zgody {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
}
.jadwiga-zgody .jadwiga-zgoda {
	margin: 0;
}
/* Trzy klasy w selektorze, bo i lejek (`.jadwiga-komplet__prawa label`), i
   WooCommerce (`.woocommerce .form-row label`) robią z etykiety blok o wyższej
   specyficzności — inaczej checkbox i tekst nie ustawiają się obok siebie. */
.jadwiga-komplet__prawa .jadwiga-zgody .jadwiga-zgoda__label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
	margin: 0;
	cursor: pointer;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.jadwiga-komplet__prawa .jadwiga-zgody .jadwiga-zgoda__label input[type='checkbox'] {
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0.1rem 0 0;
	padding: 0;
	accent-color: var(--wp--preset--color--brand);
	cursor: pointer;
}
.jadwiga-zgoda__tekst a {
	color: var(--wp--preset--color--brand);
	text-underline-offset: 2px;
}
.jadwiga-zgoda .required {
	border: 0;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* Przycisk „Kupuję i płacę” — pełna szerokość, w kolorze marki.
   Prefiks `body.jadwiga-lejek`, bo reguła WooCommerce `.woocommerce #place_order`
   ma tę samą specyficzność co zwykły `.jadwiga-...__prawa #place_order` i wygrywa
   późniejsza w kaskadzie — dokładamy klasę body, żeby przebić. */
body.jadwiga-lejek .jadwiga-komplet__prawa #place_order {
	display: block;
	/* WooCommerce daje przyciskowi `float: right`, przez co kurczy się do treści */
	float: none;
	width: 100%;
	margin-top: 0.5rem;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	padding: 1rem 2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--brand);
	cursor: pointer;
}

/* ===== Metody płatności na telefonie =====
   Rząd metody to w rdzeniu trzy elementy liniowe obok siebie: kropka wyboru,
   etykieta i (dla karty) formularz. WooPayments dokłada do środka etykiety
   logotypy kart i trzyma ją na `display: inline` — dopóki nazwa i logotypy
   mieszczą się w jednym wierszu, wygląda to dobrze. Na wąskim ekranie logotypy
   schodzą niżej, ale pudełko liniowej etykiety dalej ma wysokość jednego
   wiersza, więc formularz karty startował 9px NAD logotypami i na nie nachodził.

   Składamy rząd na fleksa: kropka i etykieta obok siebie, formularz osobnym
   wierszem pod spodem. Trzy rzeczy, które łatwo tu przeoczyć:

   - etykieta dostaje `flex: 1 1 0`, nie `auto`. Fleks łamie wiersz według
     bazowej szerokości elementów, a dopiero potem je ściska — przy `auto`
     etykieta karty (nazwa + logotypy) była szersza niż rząd i spadała pod
     kropkę, zamiast zawinąć się w sobie;
   - `align-items: baseline` trzyma kropkę przy pierwszym wierszu etykiety.
     Przy `center` kropka karty wypadała w pionowym środku dwuwierszowej
     etykiety, czyli pod nazwą metody;
   - lista metod zachowuje boczne wypełnienie. Zdjęte do zera dawało 52px
     szerokości formularzowi karty, ale kropki siadały na samej krawędzi
     szarego pudełka płatności i wyglądały, jakby z niego wychodziły.

   Do tego zdejmujemy wypełnienia, które niczego nie trzymają (element
   Stripe'a), a wypełnienie `payment_box` zwężamy: przy ekranie 375 sześć
   zagnieżdżonych pudełek zjadało 44% szerokości i na formularz karty zostawało
   211px. Zostaje 239px.

   Na szerokim ekranie nic z tego nie robimy: nazwa i logotypy mieszczą się
   w jednym wierszu, nic nie nachodzi, a `float: right` wtyczki dosuwa logotypy
   do prawej krawędzi rzędu — we fleksie float przestaje działać i logotypy
   wróciłyby pod nazwę. */
@media ( max-width: 781px ) {
	body.jadwiga-lejek .jadwiga-komplet__prawa #payment ul.payment_methods > li.wc_payment_method {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.5rem;
	}
	body.jadwiga-lejek .jadwiga-komplet__prawa #payment ul.payment_methods > li.wc_payment_method > input[type="radio"] {
		flex: 0 0 auto;
		margin: 0;
	}
	/* Dwa selektory, bo regułę `display: inline` wtyczka trzyma pod własnym,
	   długim selektorem tylko dla karty — trzeba go przebić co do wagi. */
	body.jadwiga-lejek .jadwiga-komplet__prawa #payment .payment_methods li[class*="payment_method_woocommerce_payments"] > label,
	body.jadwiga-lejek .jadwiga-komplet__prawa #payment ul.payment_methods > li.wc_payment_method > label {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0;
	}
	body.jadwiga-lejek .jadwiga-komplet__prawa #payment ul.payment_methods > li.wc_payment_method > .payment_box {
		flex: 0 0 100%;
	}
	body.jadwiga-lejek .jadwiga-komplet__prawa #payment ul.payment_methods {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	body.jadwiga-lejek .jadwiga-komplet__prawa #payment .payment_box {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	body.jadwiga-lejek .jadwiga-komplet__prawa .wcpay-upe-element {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Telefon: kolumny jedna pod drugą, formularz przestaje być lepki */
@media ( max-width: 899px ) {
	.jadwiga-komplet {
		grid-template-columns: minmax( 0, 1fr );
	}
	.jadwiga-komplet__prawa {
		position: static;
	}
	/* Gdy kolumny są jedna nad drugą, marketing spycha formularz w dół —
	   dlatego opinie na telefonie zostają schowane, a długi opis pokazujemy
	   przycięty do trzech wierszy z przyciskiem „Pokaż pełny opis”.
	   Przy wyjazdach to nie ozdoba: w opisie stoi, co obejmuje pakiet, jak się
	   zapisać i kto za co odpowiada — schowany w całości zabierał telefonom
	   najważniejsze. Przycinaniem steruje skrypt (klasa `jest-zwiniety`), więc
	   bez JavaScriptu opis widać w całości, a nie wcale. */
	.jadwiga-komplet__opinie {
		display: none;
	}
	/* Przycinamy wysokością, nie `line-clamp`: opis wyjazdu to nagłówki, akapity
	   i listy, a `-webkit-box` układa takie dzieci po swojemu (i w Firefoksie
	   nie działa razem z `display: flow-root`, które opis dostaje wyżej).
	   Maska u dołu wygasza urwany wiersz, żeby cięcie nie wyglądało na błąd. */
	/* Opis i przycisk stoją na wspólnym beżu i razem czytają się jak jedna
	   karta — inaczej urwany akapit, link „Pokaż pełny opis" i pierwszy wiersz
	   formularza zlewały się w jeden ciąg tekstu. Zaokrąglenia dzielimy: górne
	   na opisie, dolne na przycisku, więc bez dodatkowego opakowania w HTML. */
	.jadwiga-komplet__opis {
		padding: 1.1rem 1.15rem 0.9rem;
		border-radius: 16px 16px 0 0;
		background: var(--wp--preset--color--alt);
	}
	/* Wygaszony ogon tekstu potrzebuje własnego miejsca — inaczej ostatni,
	   półprzezroczysty wiersz kładł się wprost na „Pokaż pełny opis” i całość
	   wyglądała na błąd renderowania. Dokładamy wysokości na ten jeden wiersz
	   i kończymy maskę na przezroczystości przed dolną krawędzią. */
	.jadwiga-komplet__opis.jest-zwiniety {
		/* 8.5em, nie „trzy wiersze”: opis zaczyna się nagłówkiem, a ten sam zjada
		   ponad dwa wiersze wysokości. Przy krótszym cięciu na telefonie widać
		   było sam nagłówek i strzęp zdania. */
		position: relative;
		max-height: 9.6em;
		overflow: hidden;
		padding-bottom: 0.2rem;
	}
	/* Wygaszenie kładziemy NA tekst, w kolorze karty. Wcześniej robiła to maska,
	   ale `mask-image` przezroczyści cały element razem z tłem — beż znikał
	   i między opisem a przyciskiem prześwitywała biała strona. */
	.jadwiga-komplet__opis.jest-zwiniety::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 4.2em;
		background: linear-gradient(
			to bottom,
			rgba( 239, 232, 223, 0 ),
			var( --wp--preset--color--alt, #efe8df ) 78%
		);
		pointer-events: none;
	}
	.jadwiga-komplet__wiecej {
		display: block;
		width: 100%;
		margin: 0 0 2rem;
		padding: 0.55rem 1.15rem 1.1rem;
		border: 0;
		border-radius: 0 0 16px 16px;
		background: var(--wp--preset--color--alt);
		font-family: inherit;
		font-size: 15px;
		text-align: left;
		color: var(--wp--preset--color--contrast);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}
	/* Bez przycisku (opis krótki albo rozwinięty na stałe) karta i tak musi
	   odsunąć się od formularza. */
	.jadwiga-komplet__opis {
		margin-bottom: 2rem;
	}
	.jadwiga-komplet__opis + .jadwiga-komplet__wiecej {
		margin-top: -2rem;
	}
}

/* Telefon: karta podsumowania oddawała bokom 24px z każdej strony, a strona
   dokłada swoje 20px marginesu — z 375px ekranu na treść zostawało 247px, czyli
   dwie trzecie. Nazwy produktów łamały się na trzy wiersze, a kwota lądowała
   przy samej krawędzi. Ścieśniamy wcięcia samej karty; treść dostaje 24px
   więcej, a karta dalej czytelnie odcina się od tła. */
@media ( max-width: 600px ) {
	/* Selektor z id, bo reguła bazowa też go ma (`#order_review`) — sama klasa
	   przegrywa z nim specyficznością niezależnie od kolejności. */
	.jadwiga-komplet__prawa #order_review,
	.jadwiga-komplet__prawa .woocommerce-checkout-review-order {
		padding: 1.15rem 0.75rem;
	}
	/* Wiersze podsumowania stały wtedy tekstem wprost na ramce tabeli (kwoty
	   dotykały prawej linii). Oddech dajemy w środku wiersza, nie w karcie —
	   karta ma zostać wąska, żeby na treść było jak najwięcej miejsca. */
	.jadwiga-komplet__prawa .jadwiga-bump {
		padding: 0.9rem;
	}
}

/* ===== Kontakt w pasie „społeczność + kontakt” ===== */
.jadwiga-kontakt {
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: clamp( 1.5rem, 3vw, 3rem );
}
.jadwiga-kontakt__mail {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp( 24px, 2.4vw, 34px );
	font-weight: 700;
	line-height: 1.2;
}
.jadwiga-kontakt__mail a {
	text-decoration: none;
}

/* ===== Stopka ===== */
.jadwiga-stopka-logo img {
	display: block;
	width: 52px;
	height: 52px;
}
.jadwiga-stopka-tytul {
	margin: 0 0 1rem;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.jadwiga-stopka-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jadwiga-stopka-lista li + li {
	margin-top: 0.7rem;
}
.jadwiga-stopka-lista a {
	font-size: 16px;
	text-decoration: none;
}
.jadwiga-stopka-lista a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Jasny pas na dole — logotypy płatności bez ramek, wprost na bieli.
   Nad nim jest beżowa sekcja stopki, więc oddzielamy go cienką linią. */
.jadwiga-stopka-dol {
	border-top: 1px solid var(--wp--preset--color--border);
}
.jadwiga-stopka-dol a {
	color: inherit;
}
.jadwiga-platnosci {
	gap: 1.25rem;
	align-items: center;
}
.jadwiga-platnosci__etykieta {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.6;
}
/* Oficjalne logotypy metod płatności bez ramek — kolorowe znaki marek są
   kalibrowane pod białe tło i siedzą wprost na jasnym pasku. Pliki SVG są
   przycięte ściśle do krawędzi znaku, więc jedna wspólna wysokość daje
   jednakowy rozmiar wszystkich logotypów. */
.jadwiga-platnosci__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.jadwiga-platnosci__lista li {
	display: flex;
	align-items: center;
}
.jadwiga-platnosci__lista img {
	display: block;
	width: auto;
	height: 22px;
}

@media ( max-width: 781px ) {
	.jadwiga-kontakt {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--40);
	}
	/* Adres ma zmieścić się w jednej linii — przy 24px łamał się na „…com.” i „pl” */
	.jadwiga-kontakt__mail {
		font-size: 19px;
	}
}

/* ==========================================================================
   Powiadomienia WooCommerce (konto, reset hasła, koszyk)
   Blokowe „notice-banner” Woo są zielone/niebieskie — sukces ma jasnozielone
   tło, zieloną ramkę i zielone kółko z ptaszkiem. Przestawiamy sukces i info
   na kolor marki (błędy zostają czerwone — mają czytać się jako błąd).
   Po wysłaniu formularza Woo ustawia focus na banerze → przeglądarka rysuje
   niebieski pierścień; podmieniamy go na obrys marki.
   ========================================================================== */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info {
	background: var(--wp--preset--color--alt);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}
.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--wp--preset--color--brand);
}
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}
/* Klasyczne komunikaty Woo (część przepływów) — zielony akcent → marka */
.woocommerce-message {
	border-top-color: var(--wp--preset--color--brand);
}
.woocommerce-message::before {
	color: var(--wp--preset--color--brand);
}

/* ==========================================================================
   Sensei LMS — kursy, lekcje, tryb nauki
   Sensei renderuje się swoimi blokami i wpina naszą theme.json (fonty, kolory
   dziedziczą), ale własny akcent trzyma na zieleni #63a95f — częściowo w
   zmiennej `--sensei-primary-color` (tryb nauki), częściowo na sztywno w
   klasach (podglądy, pasek postępu, ptaszki). Przestawiamy jedno i drugie na
   kolor marki. Nasza style.css ładuje się też w trybie nauki, więc to wystarcza.
   ========================================================================== */
body {
	--sensei-primary-color: var(--wp--preset--color--brand);
	--sensei-primary-contrast-color: var(--wp--preset--color--white);
	--sensei-accent-color: var(--wp--preset--color--brand);
	--sensei-course-theme-primary-color: var(--wp--preset--color--brand);
}

/* Zielone akcenty wbite na sztywno → marka */
.lesson .preview-label,
.module-lessons .preview-label,
.meter .value,
.course .status.completed,
.course-lessons .status.completed,
.course-container .status.completed {
	background: var(--wp--preset--color--brand);
}
.course .course-lessons .lesson-status.complete,
.course .module-lessons .lesson-status.complete,
.course-container .lesson-status.complete,
.module-archive .status.completed,
.sensei-message.tick:before,
.sensei-message.download:before,
.sensei-message.success:before,
.sensei-course-theme__lesson-module {
	color: var(--wp--preset--color--brand);
}

/* Przyciski Sensei (blokowe i trybu nauki) — jak CTA w nagłówku: marka + biały
   tekst, zaokrąglone. Tryb nauki to osobny motyw blokowy z własną theme.json
   (przycisk brał turkus z jej tokenu `--wp--custom--button--color--background`)
   i jego CSS ładuje się po naszym — stąd podwójne klasy i element w selektorze. */
.sensei-course-theme a.sensei-course-theme__button.is-primary,
.sensei-course-theme button.sensei-course-theme__button.is-primary,
.sensei-course-theme a.sensei-course-theme__button.is-secondary,
.sensei-course-theme button.sensei-course-theme__button.is-secondary,
.wp-block-sensei-lms-button-complete-lesson .wp-block-button__link,
.wp-block-sensei-lms-button-take-course .wp-block-button__link,
.wp-block-sensei-lms-course-list-filter .wp-block-button__link,
.course-container .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}
/* Wariant „is-style-outline” (np. Ukończ lekcję poza trybem nauki) — obrys marki */
.wp-block-sensei-lms-button-complete-lesson.is-style-outline .wp-block-button__link {
	background: none;
	color: var(--wp--preset--color--contrast);
}
/* „Ukończ lekcję” w trybie nauki (.is-secondary) — jak standardowy przycisk strony:
   biała pigułka, obrys marki, ciemny tekst, wypełnienie marką na hover (mechanizm
   `::before` dziedziczy z `.wp-element-button`). Learning-mode Sensei narzuca temu
   przyciskowi radius 2px o wyższej specyficzności, stąd długi selektor + !important. */
body.single-lesson .sensei-course-theme__button.sensei-course-theme-lesson-actions__complete.wp-element-button.wp-block-button__link {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--brand) !important;
	border-radius: 999px !important;
	padding: 0.75rem 2rem !important;
	font-weight: 500 !important;
}
body.single-lesson .sensei-course-theme__button.sensei-course-theme-lesson-actions__complete.wp-element-button:hover,
body.single-lesson .sensei-course-theme__button.sensei-course-theme-lesson-actions__complete.wp-element-button:focus-visible {
	color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--brand) !important;
}
/* Learning-mode owija przycisk w `.wp-block-button` z własnym (zielonym) obrysem
   i kwadratowymi rogami — to opakowanie psuło kształt „Ukończ lekcję”. Zdejmujemy
   jego obrys i zaokrąglenie, żeby widoczna była sama pigułka przycisku. Celujemy
   przez przodka `.sensei-course-theme-lesson-actions` (bez `:has()`, które nie
   działa w starszych przeglądarkach — stąd zielony kwadrat nadal się pokazywał). */
body.single-lesson .sensei-course-theme-lesson-actions .wp-block-button {
	border: 0 !important;
	border-radius: 0 !important;
}
/* „Ukończ lekcję” pod treścią lekcji (blok `is-style-outline`). Learning-mode
   maluje mu własny obrys w swojej zieleni `--sensei-secondary-color` i rogi 2px,
   i robi to selektorem na sześć klas — nasza reguła wyżej przegrywa, stąd
   !important. Ma wyglądać jak każdy przycisk strony: biała pigułka, obrys marki. */
.sensei-course-theme .wp-block-sensei-lms-button-complete-lesson .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--brand) !important;
	border-radius: 999px !important;
	padding: 0.75rem 2rem !important;
}
/* Na hover Sensei podświetla nie przycisk, tylko jego opakowanie `.wp-block-button`
   (szare `--sensei-button-outline-hover-color`), a ono jest na całą szerokość
   treści i ma rogi 2px — stąd prostokątna podkładka za pigułką. Wypełnienie
   przycisku i tak robi nasze `::before`, więc tło opakowania zdejmujemy. */
.sensei-course-theme .wp-block-sensei-lms-button-complete-lesson.wp-block-button:hover {
	background-color: transparent !important;
}

/* Wideo lekcji. Sensei przepuszcza `_lesson_video_embed` przez własny kses,
   który z iframe zostawia tylko src/width/height/frameborder/allowfullscreen —
   ścina responsywny <div> i style, więc bunny.net spada do domyślnych 300×150
   (ten mały ciemny prostokąt). Sam iframe zostaje w `.sensei-video-embed` —
   robimy go responsywnym (pełna szerokość, 16:9). */
.sensei-video-embed,
.sensei-course-theme__frame .sensei-video-embed {
	position: relative;
	width: 100%;
	margin-bottom: 1.5rem;
}
.sensei-video-embed iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}
/* Margines boczny treści w trybie nauki daje samo Sensei (`--content-padding`),
   więc nasz gutter z `.wp-block-post-content > *` dokładał drugie wcięcie. Wideo
   wypadało z niego po swojemu, opis lekcji nie — i tekst stał wcięty względem
   odtwarzacza. Zerujemy dla całej treści lekcji, żeby trzymała wspólną krawędź. */
.single-lesson .entry-content > * {
	padding-inline: 0 !important;
}
/* Odstęp między opisem lekcji a wideo. Opis to goły węzeł tekstowy tuż przy
   iframe, a jego kolejność bywa różna (raz nad, raz pod wideo), więc odstęp
   dajemy z obu stron iframe — zadziała niezależnie od kolejności. */
.single-lesson .sensei-video-embed iframe {
	margin-block: 1.5rem;
}
.sensei-course-theme a.sensei-course-theme__button.is-link,
.sensei-course-theme button.sensei-course-theme__button.is-link {
	background: none;
	color: var(--wp--preset--color--contrast);
}

/* Strona kursu używa klasycznego szablonu Sensei (article.module, nie bloki).
   Konspekt modułów: karta zaokrąglona, nagłówek w tonie marki zamiast surowej
   szarości rgba(0,0,0,.05). */
.course-container .module,
.course .module {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 1.25rem;
}
.course-container .module > header,
.course .module > header {
	background: var(--wp--preset--color--alt);
	margin: 0;
}
.course-container .module-lessons,
.course .module-lessons {
	margin: 0;
}

/* Bez zapisu blok „meta kursu” i przycisk zapisu bywają puste (dostęp po zakupie
   dojdzie z wtyczką Paid Courses) — ścinamy odstęp między tytułem a programem. */
.course-container .course-meta,
.course-container .sensei-course-meta {
	margin-bottom: 0;
}
.module-lessons + .course-meta:empty {
	display: none;
}

/* Strona pojedynczego kursu (klasyczny szablon Sensei): mniejszy odstęp u góry
   (tytuł strony i tak schowany, więc puste miejsce nad postępem było zbędne)
   oraz bez linku „Skontaktuj się z nauczycielem kursu”. */
.single-course .jadwiga-strona {
	padding-top: calc( var( --jadwiga-header-h, 84px ) + var(--wp--preset--spacing--40) );
}
.single-course .jadwiga-strona .wp-block-post-content {
	margin-top: 0;
}
.single-course p:has( .send-message-button ) {
	display: none;
}
/* Podtytuł „Lekcje” nad listą lekcji w każdym module dubluje nazwę modułu
   (a gdy moduł nazywa się „Lekcje” — dosłownie) — chowamy nagłówek listy. */
.single-course .module-lessons > header {
	display: none;
}
/* Pusty opis modułu (Sensei renderuje <p class="module-description"> nawet bez
   treści) zjada cały wiersz nad listą lekcji — chowamy. */
.single-course .module-description:empty {
	display: none;
}
/* Konspekt kursu (spis modułów i lekcji) trzymamy delikatnie — to spis treści,
   a nie sekcje landingu. Domyślne rozmiary (H2 „Moduły" 48px, nagłówek modułu
   32px, pasek postępu i plakietka statusu) były nieproporcjonalnie ciężkie
   względem reszty strony. Skalujemy je płynnie na każdej szerokości. */
.single-course .modules-title h2 {
	font-size: clamp( 20px, 2.4vw, 28px );
	line-height: 1.2;
	margin-bottom: clamp( 1rem, 2vw, 1.5rem );
}
.single-course article.module {
	margin-bottom: clamp( 0.75rem, 1.4vw, 1rem );
}
.single-course article.module > header {
	padding: clamp( 0.7rem, 1.3vw, 0.95rem ) clamp( 1rem, 1.8vw, 1.4rem );
}
.single-course article.module > header h2 {
	font-size: clamp( 18px, 1.7vw, 21px );
	line-height: 1.25;
	margin: 0;
}
.single-course .lessons-list {
	margin-bottom: clamp( 0.5rem, 1vw, 0.75rem );
}
/* Nazwy lekcji mniejsze niż nagłówek modułu (Sensei daje im 1.1em względnego
   z `.course .module .module-lessons ul li a` — wyższa specyficzność, stąd
   !important, żeby nie były większe od tytułu). */
.single-course .module-lessons li a {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	font-size: 16px !important;
}
/* Pasek postępu: Sensei koloruje wypełnienie wg poziomu (red/yellow/green) z
   wyższą specyficznością niż ogólny .meter .value — nadpisujemy na markę dla
   wszystkich progów. Niższy i lżejszy niż domyślne 25px; line-height = wysokość
   paska, żeby liczba „%" była wyśrodkowana w pionie, a nie zjeżdżała za krawędź. */
.single-course .meter {
	height: 20px;
	line-height: 20px;
}
.single-course .meter.red .value,
.single-course .meter.yellow .value,
.single-course .meter.green .value,
.single-course .meter .value {
	background: var(--wp--preset--color--brand);
	font-size: 12px;
	line-height: 20px;
}
/* Plakietka statusu kursu / modułu („W trakcie", „Ukończony") — dyskretny mały
   znacznik zamiast ciężkiej szarej plakietki. „Ukończony" zostaje w kolorze
   marki (reguła wyżej), „W trakcie" robimy stonowanym. */
.single-course .status.in-progress,
.single-course .status.completed {
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
}
.single-course .status.in-progress {
	background: var(--wp--preset--color--alt);
	color: var(--wp--preset--color--muted);
}

/* Karty kursów — autor („admin”) to szum, chowamy */
.wp-block-sensei-lms-course-list .wp-block-post-author,
.course-container .wp-block-post-author {
	display: none;
}

/* ==========================================================================
   „Moje kursy” — porządki na liście kursów zalogowanego ucznia.
   Zakres tylko dla `.jadwiga-moje-kursy` (patrz body_class w functions.php),
   bo katalog „Kursy” dzieli te same bloki Sensei i nie chcemy go ruszać.
   1) Chowamy przycisk „Moje wiadomości” i filtr statusu kursów.
   2) Kursy układamy po dwa w rzędzie.
   ========================================================================== */
.jadwiga-moje-kursy .wp-block-sensei-lms-button-learner-messages,
.jadwiga-moje-kursy .wp-block-sensei-lms-course-list-filter {
	display: none;
}
/* Filtr siedzi w osobnej grupie z własnym paddingiem — chowamy całą grupę, żeby
   nie został pusty odstęp nad listą. To jedyna grupa-dziecko listy (obok <ul> z
   kursami), więc celujemy wprost, bez `:has()` (brak wsparcia w starszych
   przeglądarkach). */
.jadwiga-moje-kursy .wp-block-sensei-lms-course-list > .wp-block-group {
	display: none;
}
/* Szersza treść i mniejszy odstęp u góry (wszystkie szerokości). Strona
   narzędziowa `.jadwiga-strona` zwęża treść do 46rem i dokłada podwójny odstęp
   u góry, bo tytuł jest schowany — tu chcemy pełną szerokość treści i bliżej
   nagłówka (zostaje tylko odsłona spod nachodzącego nagłówka + jeden odstęp). */
/* Odstęp nad treścią (już bez wysokości nagłówka) równy temu pod nią — inaczej
   przy krótkiej treści, jak konto bez zakupów, strona wisiała przy nagłówku
   i miała dwa razy więcej powietrza od dołu.
   Od dołu odliczamy globalny `block-gap`: WordPress i tak wstawia go między
   treść a stopkę, więc bez tego widoczna przerwa byłaby o te 1,5rem większa. */
.jadwiga-moje-kursy .jadwiga-strona {
	padding-top: calc( var( --jadwiga-header-h, 84px ) + var(--wp--preset--spacing--50) );
	padding-bottom: max( 0px, calc( var(--wp--preset--spacing--50) - var(--wp--style--block-gap, 1.5rem) ) );
}
/* Rytm treści dokłada każdemu blokowi 1rem od dołu — ostatniemu odbieramy,
   bo inaczej ten 1rem doliczał się do dolnego wcięcia strony. */
.jadwiga-moje-kursy .jadwiga-strona .wp-block-post-content > :last-child {
	margin-bottom: 0;
}
.jadwiga-moje-kursy .jadwiga-strona .wp-block-post-content {
	max-width: var(--wp--style--global--content-size);
	margin-top: 0;
}
/* Tytuły kursów były za duże jak na kartę — zmniejszamy (wszystkie szerokości). */
.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-title {
	font-size: 34px;
	line-height: 1.15;
}
/* Zdjęcie kursu pełną szerokością karty (cover, bez marginesów po bokach).
   Padding karty WP trzyma inline (stąd `!important`), a wewnętrzny margines i
   szerokość figury (środkujący `aligncenter`) zerujemy. Odstęp tekstu od krawędzi
   przenosimy z paddingu karty na kolumny z treścią. */
.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template > li > .wp-block-group.has-border-color {
	padding: 0 !important;
	overflow: hidden;
}
.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template figure.wp-block-post-featured-image {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}
.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template figure.wp-block-post-featured-image img {
	display: block;
	width: 100%;
}
.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template .wp-block-columns {
	padding: 20px 24px 24px;
}

/* Siatka dwóch kolumn i wyrównania kart tylko od 782px. Poniżej WP sam stackuje
   listę (jedna kolumna) i wewnętrzne kolumny „tytuł/przycisk”, a nasze reguły by
   z nim kolidowały: WP wymusza wtedy `flex-basis:100%` na kolumnach, przez co przy
   `flex-direction:column` przycisk „zawijał się” do drugiej kolumny (uciekał w bok). */
@media ( min-width: 782px ) {
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var(--wp--preset--spacing--50);
		align-items: stretch;
	}
	/* Równa wysokość kart: siatka rozciąga <li> do najwyższego w rzędzie, a wnętrze
	   (grupa z obwódką) wypełnia tę wysokość. Zerujemy margines z `is-layout-flow`
	   (`> * + *` doklejał ~6px górnego marginesu drugiej karcie — odstępy daje `gap`). */
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template > li {
		display: flex;
		margin: 0;
	}
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template > li > .wp-block-group {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	/* Karta jest węższa niż ekran, więc wewnętrzny układ „tytuł | przycisk”
	   układamy pionowo (WP robi to sam dopiero <782px viewportu). */
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template .wp-block-columns {
		flex-direction: column;
		gap: 1rem;
		flex: 1; /* wypełnia wysokość karty, żeby dopchać przycisk do dołu */
	}
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template .wp-block-columns > .wp-block-column {
		flex-basis: auto;
	}
	/* „Kontynuuj” równo przy dole każdej karty, niezależnie od długości tytułu. */
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template .wp-block-columns > .wp-block-column:last-child {
		margin-top: auto;
		flex-grow: 0;
	}
}

/* Na telefonie karty „Moich kursów” były za ciężkie — mniejszy tytuł, niższe
   zdjęcie i ciaśniejszy tekst, spójnie z delikatnym charakterem strony.
   Wysokość zdjęcia trzyma blok Sensei inline (na figure i img), stąd
   `!important`. */
@media ( max-width: 781px ) {
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template .wp-block-post-title {
		font-size: 23px;
		line-height: 1.2;
	}
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template figure.wp-block-post-featured-image,
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template figure.wp-block-post-featured-image img {
		height: 200px !important;
	}
	.jadwiga-moje-kursy .wp-block-sensei-lms-course-list .wp-block-post-template .wp-block-columns {
		padding: 16px 18px 20px;
	}
}

/* ==========================================================================
   „Twoje pliki” — sekcja nad listą kursów w „Moich kursach”.
   Doklejana z PHP (inc/pliki-do-pobrania.php), więc bez klas WP — własny,
   lekki układ w duchu kart kursów: obwódka, zdjęcie po lewej, pliki po prawej.
   ========================================================================== */
.jadwiga-pliki {
	margin-bottom: var(--wp--preset--spacing--50);
}
/* Wspólny nagłówek sekcji na „Moich kursach” — nad plikami i nad listą kursów.
   Tytuł strony jest w motywie ukryty, więc te dwa nagłówki dzielą stronę. */
.jadwiga-sekcja-tytul {
	margin: 0 0 var(--wp--preset--spacing--30);
	/* Ta sama skala co nagłówki h2 w treści stron — patrz „Rytm treści”. */
	font-size: clamp( 22px, 2.4vw, 28px );
	line-height: 1.25;
}
/* Nagłówek kursów stoi między dwiema sekcjami, więc potrzebuje odstępu z góry. */
.jadwiga-pliki + .jadwiga-sekcja-tytul {
	margin-top: var(--wp--preset--spacing--50);
}

/* Konto bez zakupów. Krótko i z jednym wyjściem — do kursów w sklepie.
   Interlinia jak w akapitach treści (1,75), żeby blok czytał się jak reszta. */
.jadwiga-pusto__tekst {
	max-width: 34rem;
	margin: 0 0 var(--wp--preset--spacing--40);
	line-height: 1.75;
	color: var(--wp--preset--color--muted);
}
/* Gość na stronie za hasłem: zamiast ekranu bez zakupów stoi tu formularz
   logowania WooCommerce (`global/form-login.php`, ten sam co w checkoucie).
   Szablon układa login i hasło w dwóch kolumnach po 47% — na „Moim koncie”
   te same pola stoją jedno pod drugim, więc prostujemy je i tutaj. Obwódkę
   i wypełnienie karty daje styl rdzenia dla `form.login`, nie dokładamy
   własnej. */
.jadwiga-logowanie__tekst {
	max-width: 34rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	line-height: 1.75;
	color: var(--wp--preset--color--muted);
}
.jadwiga-logowanie .woocommerce-form-login {
	max-width: 30rem;
	margin: 0;
}
.jadwiga-logowanie .woocommerce-form-login .form-row-first,
.jadwiga-logowanie .woocommerce-form-login .form-row-last {
	float: none;
	width: 100%;
}
/* Pól WooCommerce nie ubiera wcale — szły domyślne pola przeglądarki: 31px
   wysokości, róg 4px, pismo 13px, czarna obwódka. Obok reszty serwisu wyglądały
   jak wklejone z innej strony. Bierzemy ten sam zestaw, co formularz kontaktowy
   i lejek: etykieta 13px/500 nad polem, pole 49px z rogiem 10px i pismem 16px.
   Zakres jak wszędzie w motywie — własna sekcja ubiera własne pola. */
.jadwiga-logowanie .woocommerce-form-login label:not( .woocommerce-form-login__rememberme ) {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.jadwiga-logowanie .woocommerce-form-login input.input-text {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.85rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
}
.jadwiga-logowanie .woocommerce-form-login input.input-text:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
}
/* Oczko „pokaż hasło" rdzeń stawia na sztywnej odległości od góry (0,7em), co
   pasowało do pola o wysokości 31px. Przy 49px wisiało pod górną krawędzią —
   wiążemy je ze środkiem pola i robimy mu miejsce z prawej. */
.jadwiga-logowanie .woocommerce-form-login .password-input {
	display: block;
}
.jadwiga-logowanie .woocommerce-form-login #password {
	padding-right: 3.2rem;
}
.jadwiga-logowanie .woocommerce-form-login .show-password-input {
	top: 50%;
	right: 1.1rem;
	transform: translateY( -50% );
}
/* Przycisk w skali przycisków serwisu (13px, wersaliki, rozstrzelenie) — sam
   wygląd pigułki i wypełnienie hoverem ma już z reguły ogólnej wyżej. */
.jadwiga-logowanie .woocommerce-form-login button[type='submit'] {
	padding: 16px 32px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* „Zapamiętaj mnie" i przycisk stały krzywo: rząd był zwykłym blokiem, przycisk
   pływał w lewo, a etykieta — jako etykieta pola — niosła dolny margines, przez
   co jej środek wypadał 3px wyżej niż środek przycisku. Rząd na fleksa ze
   środkowaniem, kolejność wraca do przycisk-lewo, checkbox-prawo. */
.jadwiga-logowanie .woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme ) {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
}
/* Rdzeń domyka rzędy clearfixem — dwa puste `::before`/`::after` o `display:
   table`. W bloku były niewidzialne, ale we fleksie stają się elementami:
   zerowej szerokości, za to z `order: 0`, czyli przed przyciskiem, i dwa
   odstępy po 20px odsuwały go od lewej krawędzi o równe 40px. */
.jadwiga-logowanie .woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme )::before,
.jadwiga-logowanie .woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme )::after {
	display: none;
}
/* Rzędy niosą 3px wypełnienia na obwódkę focusa, ale „nie pamiętasz hasła"
   leży poza rzędem i wychodziło o te 3px w lewo. Zerujemy — miejsca na obwódkę
   jest aż nadto w 20px wypełnienia samego formularza. */
.jadwiga-logowanie .woocommerce-form-login .form-row {
	padding: 0;
}
.jadwiga-logowanie .woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme ) button {
	order: 1;
	float: none;
	margin: 0;
}
.jadwiga-logowanie .woocommerce-form-login label.woocommerce-form-login__rememberme {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
}
.jadwiga-logowanie .woocommerce-form-login label.woocommerce-form-login__rememberme input[type='checkbox'] {
	margin: 0;
}
.jadwiga-logowanie .woocommerce-form-login .lost_password {
	margin: 1rem 0 0;
	font-size: 14px;
}
/* Na telefonie przyciski serwisu schodzą o stopień — reguła ogólna dla
   `form.login` robi to niżej, ale nasz zakres jest od niej bardziej
   szczegółowy, więc powtarzamy tu. */
@media ( max-width: 781px ) {
	.jadwiga-logowanie .woocommerce-form-login button[type='submit'] {
		padding: 13px 26px;
	}
	/* W rzędzie zostaje 309px: przycisk w wersalikach bierze 134, a „Zapamiętaj
	   mnie" potrzebuje więcej niż reszta i łamało się na dwa wiersze przy
	   jednowierszowym przycisku. Schodzi więc pod niego, całym rzędem. */
	.jadwiga-logowanie .woocommerce-form-login .form-row:has( .woocommerce-form-login__rememberme ) {
		flex-wrap: wrap;
		gap: 0.9rem;
	}
	.jadwiga-logowanie .woocommerce-form-login label.woocommerce-form-login__rememberme {
		flex-basis: 100%;
	}
}
/* Kto nie ma konta, nie ma tu czego szukać w rejestracji — konta powstają po
   zakupie. Jedno zdanie zamiast linku, który prowadziłby donikąd. */
.jadwiga-logowanie__stopka {
	max-width: 34rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* Widoczne tylko dla admina przy `?podglad=pliki` — ma odróżniać się od treści
   klienta, żeby nikt nie wziął podglądu za prawdziwe zakupy. */
.jadwiga-pliki__podglad {
	margin: 0 0 12px;
	padding: 8px 12px;
	border-left: 3px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--alt);
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}
.jadwiga-pliki__produkty,
.jadwiga-pliki__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jadwiga-pliki__produkt {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--alt);
}
.jadwiga-pliki__produkt + .jadwiga-pliki__produkt {
	margin-top: 12px;
}
/* Wysokość z proporcji, nie na sztywno — okładka jest pionowa (3:4) i kwadrat
   ucinał jej górę i dół. Przy innym produkcie proporcja może być inna, więc
   trzymamy tylko szerokość. */
.jadwiga-pliki__foto {
	flex: 0 0 88px;
	width: 88px;
	height: auto;
	border-radius: 6px;
}
.jadwiga-pliki__tytul {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	line-height: 1.25;
}
.jadwiga-pliki__lista li + li {
	margin-top: 6px;
}
.jadwiga-pliki__link {
	font-size: 16px;
	text-underline-offset: 3px;
}
.jadwiga-pliki__limit {
	margin-left: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}
/* Na telefonie zdjęcie zabierało pół szerokości — schodzimy na wąski pasek.
   Nazwy plików są długie („Szept pomarańczy — e-book (PDF)” to 219px przy 16px
   w wierszu szerokim na 227px), a licznik pobrań stał w tej samej linii i je
   łamał w pół. Licznik idzie więc pod spód, a nazwa schodzi o stopień — wtedy
   każda mieści się w jednym wierszu z zapasem. */
@media ( max-width: 600px ) {
	.jadwiga-pliki__produkt {
		gap: 12px;
		padding: 12px;
	}
	.jadwiga-pliki__foto {
		flex-basis: 56px;
		width: 56px;
	}
	.jadwiga-pliki__tytul {
		font-size: 17px;
	}
	.jadwiga-pliki__link {
		font-size: 14px;
	}
	.jadwiga-pliki__limit {
		display: block;
		margin: 2px 0 0;
	}
	.jadwiga-pliki__lista li + li {
		margin-top: 10px;
	}
}

/* ==========================================================================
   Logowanie do „Moich kursów” (formularz Sensei).
   Sensei wkłada „Nie pamiętasz hasła?” do tego samego akapitu co przycisk, więc
   na telefonie link zawijał się tuż obok niego i układ się rozjeżdżał.
   `display: contents` rozpuszcza ten akapit — przycisk i link stają się
   elementami kolumny formularza i można im nadać kolejność: przycisk →
   „Zapamiętaj mnie” → link (czyli tak, jak czyta się formularz).
   ========================================================================== */
form.login.sensei {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}
form.login.sensei > p {
	width: 100%;
	margin: 0;
}
form.login.sensei .sensei-login-submit {
	display: contents;
}
form.login.sensei .sensei-login-username {
	order: 1;
}
form.login.sensei .sensei-login-password {
	order: 2;
}
form.login.sensei .sensei-login-submit input[type='submit'] {
	order: 3;
}
form.login.sensei .remember_me {
	order: 4;
}
form.login.sensei .sensei-login-submit > a {
	order: 5;
}

/* Na telefonie przycisk logowania był większy niż każdy inny przycisk strony
   (52px wysokości i 16px tekstu przy 47px i 12–14px w hero i na kartach kursów).
   Sprowadzamy go do tej samej skali. */
@media ( max-width: 781px ) {
	form.login .button,
	form.login input[type='submit'],
	.woocommerce-form-login .button,
	.woocommerce-form-login button[type='submit'] {
		font-size: 14px;
		padding: 11px 26px;
	}
}

/* ==========================================================================
   Strona „O mnie" — nagłówek, historia na dwie kolumny i oś czasu.
   ========================================================================== */
/* Treść stron ma wąską szerokość czytania (46rem, dla regulaminów) — tu
   potrzebny układ dwukolumnowy, więc poszerzamy TYLKO tę stronę (tak samo jak
   przy kontakcie, rozpoznajemy po nagłówku sekcji). */
.jadwiga-strona:has( .jadwiga-omnie-glowa ) .wp-block-post-content {
	max-width: min( 1080px, 100% );
	margin-top: 0;
}
.jadwiga-strona:has( .jadwiga-omnie-glowa ) {
	padding-top: calc( var( --jadwiga-header-h, 84px ) + 1.5rem );
}
/* Odstępy między sekcjami. Selektor musi wejść przez `.wp-block-post-content >`,
   bo „rytm treści" (patrz wyżej) daje każdemu bloku strony `margin-block: 0 1rem`
   i samą klasą się tego nie przebije — wszystkie sekcje siedziały na 16px. */
.jadwiga-strona .wp-block-post-content > .jadwiga-omnie-glowa {
	margin-bottom: clamp( 2.5rem, 5vw, 4rem );
}
/* `:not(:last-child)`, bo ten odstęp jest MIĘDZY sekcjami. Po zdjęciu osi czasu
   „Moja historia" została ostatnia i jej 96px doklejało się do 128px wcięcia
   strony — nad stopką robiła się dziura na 248px. */
.jadwiga-strona .wp-block-post-content > .jadwiga-omnie-historia:not( :last-child ),
.jadwiga-strona .wp-block-post-content > .jadwiga-omnie-osczasu:not( :last-child ) {
	margin-bottom: var(--wp--preset--spacing--60);
}
/* Wideo „O mnie" — druga sekcja strony. Trzyma szerokość kolumny treści,
   proporcje ma z pliku (1626x1080, czyli nie 16:9 — dlatego bez wymuszonego
   `aspect-ratio`). Zaokrąglenie jak u zdjęcia obok „Mojej historii", żeby oba
   kadry na stronie miały ten sam charakter. Ciemne tło wypełnia kadr, zanim
   przeglądarka pokaże plakat. */
.jadwiga-omnie-wideo {
	margin: 0;
}
.jadwiga-omnie-wideo video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	background: var(--wp--preset--color--contrast, #45413e);
}

.jadwiga-omnie-glowa h1 {
	margin: 0.5rem 0 0;
}
.jadwiga-omnie-glowa__lid {
	max-width: 40rem;
	margin: 1.25rem auto 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp( 20px, 2.2vw, 26px );
	line-height: 1.45;
}

/* Wyrównanie kolumn w pionie robi sam blok (`verticalAlignment: center`
   w treści strony), a nie ten arkusz: biblioteka bloków trzyma na
   `.wp-block-columns` twarde `align-items: initial !important`, którego żadną
   specyficznością się nie przebije. Tu zostaje tylko odstęp. */
.jadwiga-omnie-foto figure {
	margin: 0;
}
/* Kadr 4:5 z głową u góry — oryginały są pionowe, więc nic nie ucinamy. */
.jadwiga-omnie-foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
}
/* Myśl zamykająca historię — wyróżniona, bo to jedyne zdanie skierowane
   wprost do czytelniczki. */
.jadwiga-omnie-historia__mysl {
	margin-top: var(--wp--preset--spacing--30);
	padding-left: 1.25rem;
	border-left: 2px solid var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	line-height: 1.55;
}
/* ===== Oś czasu =====
   `<details>` zamiast własnego skryptu: działa bez JS, czytniki ekranu je
   znają, a treść jest w HTML nawet zwinięta (dobre dla wyszukiwarek). */
.jadwiga-os {
	border-top: 1px solid var(--wp--preset--color--border);
}
.jadwiga-os__punkt {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.jadwiga-os__belka {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;   /* chowamy domyślny trójkącik… */
}
.jadwiga-os__belka::-webkit-details-marker {
	display: none;      /* …również w Safari */
}
.jadwiga-os__belka:hover .jadwiga-os__tytul {
	color: var(--wp--preset--color--brand);
}
.jadwiga-os__nr {
	flex: 0 0 auto;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
}
.jadwiga-os__tytul {
	flex: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	line-height: 1.3;
	transition: color 0.25s ease;
}
/* Znak „+" składany z dwóch kresek — po otwarciu pionowa znika i zostaje „−”. */
.jadwiga-os__znak {
	position: relative;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	align-self: center;
}
.jadwiga-os__znak::before,
.jadwiga-os__znak::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: var(--wp--preset--color--contrast);
	transition: transform 0.3s cubic-bezier( 0.65, 0, 0.35, 1 ), opacity 0.3s ease;
}
.jadwiga-os__znak::after {
	transform: rotate( 90deg );
}
.jadwiga-os__punkt[open] .jadwiga-os__znak::after {
	transform: rotate( 0deg );
	opacity: 0;
}
.jadwiga-os__tresc {
	padding: 0 0 1.4rem calc( 2ch + 1rem );   /* wcięcie równe numerowi + odstęp */
	color: var(--wp--preset--color--muted);
	line-height: 1.75;
}
.jadwiga-os__tresc p {
	margin: 0;
}
@media ( prefers-reduced-motion: reduce ) {
	.jadwiga-os__znak::before,
	.jadwiga-os__znak::after,
	.jadwiga-os__tytul {
		transition-duration: 0.01ms;
	}
}

@media ( max-width: 781px ) {
	/* Ta sama walka ze „rytmem treści" co wyżej — stąd pełny selektor. */
	.jadwiga-strona .wp-block-post-content > .jadwiga-omnie-glowa {
		margin-bottom: 1.75rem;
	}
	.jadwiga-omnie-historia__mysl {
		font-size: 17px;
	}
	.jadwiga-os__tytul {
		font-size: 18px;
	}
}

/* Lid sekcji „Warsztaty w Azji" — dwa zdania wprowadzenia pod nagłówkiem.
   Węższy niż siatka kart, żeby wiersze nie ciągnęły się przez całą szerokość. */
.jadwiga-warsztaty__lid {
	max-width: 46rem;
	margin-inline: auto;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}
@media ( max-width: 781px ) {
	.jadwiga-warsztaty__lid {
		font-size: 16px;
	}
}

/* ==========================================================================
   Materiały do pobrania na stronie kursu (inc/materialy.php).
   Widzą je tylko zapisane, więc blok ma wyglądać jak część kursu, a nie jak
   reklama — spokojna karta w kolorze tła sekcji.
   ========================================================================== */
.jadwiga-materialy {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}
.jadwiga-materialy__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jadwiga-materialy__pozycja {
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--alt);
}
.jadwiga-materialy__pozycja + .jadwiga-materialy__pozycja {
	margin-top: 12px;
}
.jadwiga-materialy__link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	text-underline-offset: 3px;
}
.jadwiga-materialy__meta {
	margin-left: 10px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.jadwiga-materialy__opis {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
}
@media ( max-width: 600px ) {
	.jadwiga-materialy__link {
		font-size: 17px;
	}
	/* Waga pliku pod nazwą — obok zawijała się w osobny, sierocy wiersz. */
	.jadwiga-materialy__meta {
		display: block;
		margin: 4px 0 0;
	}
}

/* ==========================================================================
   Okładki kursów na listach (katalog „Kursy" i „Moje kursy").
   Okładki to mockupy o różnych proporcjach — od poziomej 1178×698 po pionową
   1122×1402. Kadrowanie `cover` ucinało im głowę i tytuł, więc pokazujemy je
   w całości (`contain`) w polu o stałej proporcji: karty zostają równe, a to,
   co nie wypełni pola, dopełnia tło sekcji.
   Proporcja i `contain` siedzą w atrybutach bloku (`aspectRatio`, `scale`)
   w treści stron, bo blok drukuje je stylem inline — arkusz by z tym przegrał.
   Tutaj zostaje tylko tło i zaokrąglenie.
   ========================================================================== */
.wp-block-sensei-lms-course-list figure.wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--color--alt);
	border-radius: 16px;
	overflow: hidden;
}
.wp-block-sensei-lms-course-list figure.wp-block-post-featured-image img {
	width: 100%;
}

/* Kraje wystąpień: mikrofon + flaga. Kolor flagi jest tu nośnikiem znaczenia —
   przy 20px z konturu nie zostaje nic, a barwy rozpoznaje się od razu.
   Przygaszamy je (i logotypy stacji) tak, żeby nie przekrzykiwały przycisku
   nad paskiem — pasek to dowód społeczny, nie wezwanie do działania. */
.jadwiga-mq__wystep {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
}
.jadwiga-mq__wystep svg:not( .jadwiga-mq__flaga ) {
	width: 19px;
	height: 19px;
}
.jadwiga-mq__flaga {
	width: 22px;
	height: 14.7px;
	flex: none;
	display: block;
	border-radius: 1px;
	opacity: 0.85;
}
.jadwiga-mq__logo {
	opacity: 0.85;
}
.jadwiga-mq__ted {
	color: #E62B1E;
	opacity: 0.85;
}
@media ( max-width: 781px ) {
	.jadwiga-mq__wystep svg:not( .jadwiga-mq__flaga ) {
		width: 16px;
		height: 16px;
	}
	.jadwiga-mq__flaga {
		width: 19px;
		height: 12.7px;
	}
}

/* Dosprzedaż w koszyku („Może Cię też zainteresować”).
   Karta jest tu wąska (~200px, bo obok stoi podsumowanie), a tytuł dziedziczy
   rozmiar z kart sklepu, gdzie kafelek jest dwa razy szerszy. Efekt: nazwa
   łamała się na trzy wiersze i ważyła więcej niż nagłówek nad nią.
   Sam rozmiar zszedł z „medium" na „small" w atrybutach bloku (w treści strony)
   — presetowa klasa rozmiaru ma w globalnych stylach `!important`, więc z tego
   arkusza nie dało się jej ruszyć. Tutaj zostaje reszta. */
.wc-block-cart .wp-block-woocommerce-product-collection .wp-block-post-title a {
	text-decoration: none;
}
/* Nagłówek sekcji ma być mocniejszy od nazwy produktu pod spodem — inaczej
   czyta się to jako dwa równorzędne tytuły. */
.wc-block-cart .wp-block-woocommerce-cart-cross-sells-block > h2,
.wc-block-cart__main > .wp-block-heading {
	font-size: 19px;
	line-height: 1.3;
}

/* Siatka produktów w pustym koszyku („Nowości w sklepie”).
   To starszy blok Woo (`product-new`), nie ta sama siatka co w sklepie — stąd
   podkreślone nazwy i inna skala. Dociągamy go do wyglądu kart sklepu. */
.wc-block-grid__product-link {
	text-decoration: none;
}
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	line-height: 1.35;
}
.wc-block-grid__product-price {
	font-size: 16px;
}
.wc-block-grid__product-image img {
	border-radius: 12px;
}

/* ==========================================================================
   Pusty koszyk.
   Tytuł strony („Koszyk”) chowamy — na wszystkich stronach serwisu tytuł jest
   ukryty, bo każda ma własny nagłówek w treści; koszyk i zamówienie jadą na
   szablonach z wtyczki, więc omijały tę regułę i jako jedyne pokazywały tytuł.
   ========================================================================== */
body.woocommerce-cart .wp-site-blocks > .wp-block-group > .wp-block-post-title,
body.woocommerce-checkout .wp-site-blocks > .wp-block-group > .wp-block-post-title {
	display: none;
}

/* Ikona: zamiast płaczącej buźki z wtyczki ta sama torba, co w nagłówku strony.
   Wtyczka rysuje ją maską na `::before`, więc podmieniamy samą maskę — bez
   ruszania znaczników. Kontur zamiast plamy: 140px wypełnionej ciemnej figury
   było najcięższym elementem całej strony. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 76px;
	height: 76px;
	margin: 0 auto 1.25rem;
	background-color: var(--wp--preset--color--brand);
	-webkit-mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 8.5h15.6l-1 10.2a2 2 0 0 1-2 1.8H7.2a2 2 0 0 1-2-1.8L4.2 8.5Z"/><path d="M8.6 11V6.8a3.4 3.4 0 0 1 6.8 0V11"/></svg>' ) center / contain no-repeat;
	mask: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 8.5h15.6l-1 10.2a2 2 0 0 1-2 1.8H7.2a2 2 0 0 1-2-1.8L4.2 8.5Z"/><path d="M8.6 11V6.8a3.4 3.4 0 0 1 6.8 0V11"/></svg>' ) center / contain no-repeat;
}
.wp-block-woocommerce-empty-cart-block {
	padding-top: var(--wp--preset--spacing--50);
	text-align: center;
}
.jadwiga-pustykoszyk__lid {
	max-width: 32rem;
	margin: 0.75rem auto 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}
/* Nowości oddzielamy linią, a nie pustką — inaczej siatka wygląda, jakby
   należała jeszcze do komunikatu. */
.wp-block-woocommerce-empty-cart-block > .jadwiga-sekcja-tytul:not( .wc-block-cart__empty-cart__title ) {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}
@media ( max-width: 781px ) {
	.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
		width: 60px;
		height: 60px;
	}
	.jadwiga-pustykoszyk__lid {
		font-size: 16px;
	}
}

/* Koszyk i zamówienie wyjeżdżały na telefonie o 20px w bok.
   Powód: `cart.css` daje tym blokom `width: 100%` przy `box-sizing:
   content-box`, a nasz rytm treści dokłada im margines boczny — 100% szerokości
   RODZICA plus dwa razy po 20px własnego paddingu, czyli dokładnie tyle poza
   ekran. Wystarczy policzyć padding do środka. */
.wp-block-post-content > .wp-block-woocommerce-cart,
.wp-block-post-content > .wp-block-woocommerce-checkout {
	box-sizing: border-box;
}

/* --- Bezpłatne e-booki: okno z formularzem ------------------------------- */

.jadwiga-pdf-modal {
	width: min(30rem, calc(100vw - 2.5rem));
	max-width: none;
	max-height: min(44rem, calc(100vh - 3rem));
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 24px 70px rgba(69, 65, 62, 0.3);
	overflow: auto;
	overscroll-behavior: contain;
}

.jadwiga-pdf-modal::backdrop {
	background: rgba(69, 65, 62, 0.55);
	backdrop-filter: blur(2px);
}

.jadwiga-pdf-modal__zamknij-rzad {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	position: sticky;
	top: 0;
	z-index: 1;
	background: linear-gradient(var(--wp--preset--color--base) 70%, transparent);
}

.jadwiga-pdf-modal__zamknij {
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.9rem 1.1rem 0.4rem;
	color: var(--wp--preset--color--contrast);
	opacity: 0.45;
	transition: opacity 0.2s;
}

.jadwiga-pdf-modal__zamknij:hover,
.jadwiga-pdf-modal__zamknij:focus-visible {
	opacity: 1;
}

/* --- Strona pojedynczego bezpłatnego materiału ---------------------------- */

/* Tytuł strony z szablonu zbędny — `h1` z tytułem materiału rysuje skrót. */
.jadwiga-strona-materialu .wp-block-post-title {
	display: none;
}
/* Treść stron ma domyślnie wąską szerokość czytania (46rem, pod regulaminy) —
   przez nią cała sekcja mieściła się w 736px i okładka wychodziła mała.
   Lądowanie jest dwukolumnowe, więc poszerzamy je tak samo jak „O mnie”. */
.jadwiga-strona-materialu .wp-block-post-content {
	max-width: min( 1080px, 100% );
}
.jadwiga-strona-materialu main {
	padding-top: var( --jadwiga-header-h, 84px );
}

/* Lądowanie pod automatyzacje MailerLite: okładka po lewej, formularz od razu
   po prawej. Formularz jest ten sam, co w modalu (te same klasy), więc wygląd
   pól przychodzi z reguł niżej — tu tylko układ i oprawa. */
.jadwiga-lead {
	display: grid;
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1fr );
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	align-items: center;
	max-width: 1080px;
	margin-inline: auto;
}
.jadwiga-lead__foto {
	margin: 0;
}
.jadwiga-lead__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.jadwiga-lead__tytul {
	margin: 0.6rem 0 0;
	font-size: clamp( 26px, 3vw, 40px );
	line-height: 1.15;
}
.jadwiga-lead__opis {
	margin: 1rem 0 1.75rem;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
}
/* Formularz na lądowaniu stoi na beżu — inaczej rozpływa się na białej stronie. */
.jadwiga-lead .jadwiga-pdf-formularz {
	padding: 1.5rem;
	border-radius: 16px;
	background: var(--wp--preset--color--alt);
}

@media ( max-width: 899px ) {
	.jadwiga-lead {
		grid-template-columns: minmax( 0, 1fr );
	}
	/* Na telefonie okładka nie ma rywalizować z formularzem o ekran. */
	.jadwiga-lead__foto img {
		max-width: 15rem;
		margin-inline: auto;
	}
}

.jadwiga-pdf-modal__tresc {
	padding: 0 2rem 2.2rem;
}

.jadwiga-pdf-modal .jadwiga-produkt__kicker {
	margin: 0 0 0.5rem;
}

.jadwiga-pdf-modal__tytul {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(1.35rem, 4.4vw, 1.75rem);
	font-weight: 400;
	line-height: 1.22;
	margin: 0 0 0.85rem;
}

.jadwiga-pdf-modal__opis {
	font-size: 0.92rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
	opacity: 0.85;
}

.jadwiga-pdf-formularz {
	display: flex;
	flex-direction: column;
}

.jadwiga-pdf-formularz__pole {
	margin: 0 0 0.6rem;
}

.jadwiga-pdf-formularz__pole input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(69, 65, 62, 0.22);
	border-radius: 2px;
	font: inherit;
	font-size: 0.95rem;
	background: #fff;
	color: inherit;
}

.jadwiga-pdf-formularz__pole input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #a98a6f);
	outline-offset: 1px;
	border-color: transparent;
}

.jadwiga-pdf-formularz__zgoda {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-size: 0.76rem;
	line-height: 1.55;
	margin: 0.45rem 0 0;
	opacity: 0.9;
}

.jadwiga-pdf-formularz__zgoda input {
	margin: 0.15rem 0 0;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	accent-color: var(--wp--preset--color--accent, #a98a6f);
}

.jadwiga-pdf-formularz__wyslij,
.jadwiga-pdf-formularz__pobierz {
	align-self: stretch;
	margin-top: 1.4rem;
	text-align: center;
	cursor: pointer;
}

.jadwiga-pdf-formularz__komunikat {
	margin: 1.2rem 0 0;
	padding: 0.75rem 0.95rem;
	border-left: 2px solid var(--wp--preset--color--accent, #a98a6f);
	background: rgba(169, 138, 111, 0.09);
	border-radius: 0 2px 2px 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast, #45413e);
}

/* Błąd różni się od potwierdzenia tonem paska i tła, nie krzykiem czerwieni —
   pełna czerwień na ciepłej palecie wygląda jak komunikat systemowy. */
.jadwiga-pdf-formularz__komunikat--blad {
	border-left-color: #9c5f52;
	background: rgba(156, 95, 82, 0.08);
	color: var(--wp--preset--color--contrast, #45413e);
}

.jadwiga-pdf-formularz__gwiazdka {
	color: #9c5f52;
}

/* Pole, na które czekamy: sama obwódka. Tekstu zgody nie przefarbowujemy —
   to cztery linijki, a czerwony akapit czyta się jak ostrzeżenie o awarii. */
.jadwiga-pdf-formularz--uwaga input {
	border-color: #9c5f52;
	outline: 2px solid rgba(156, 95, 82, 0.22);
	outline-offset: 1px;
}

.jadwiga-pdf-formularz__zgoda.jadwiga-pdf-formularz--uwaga input {
	accent-color: #9c5f52;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.jadwiga-pdf-modal__tresc {
		padding: 0 1.3rem 1.8rem;
	}
}

/* --- Strona oferty po pobraniu bezpłatnego e-booka ----------------------- */

/* Strona lejka zaczyna się wysoko — nie ma tu tytułu ani wstępu, więc
   domyślny oddech szablonu zostawiał pół ekranu pustki. */
.jadwiga-strona-oferty main {
	padding-top: var(--wp--preset--spacing--30);
}

/* Na telefonie nagłówek nie zajmuje miejsca w układzie (pływa nad treścią),
   więc samo wcięcie 24px wpychało górę oferty POD pasek — potwierdzenie
   pobrania chowało się za logo. Oddajemy tu wysokość nagłówka, tak jak robi
   to `.jadwiga-strona` na pozostałych stronach; resztę odstępu daje własny
   margines treści. */
@media (max-width: 781px) {
	.jadwiga-strona-oferty main {
		padding-top: var( --jadwiga-header-h, 84px );
	}
}

/* Potwierdzenie pobrania: cichy pasek nad ofertą, nie systemowy komunikat. */
/* Elementy paska liczą szerokość razem z paddingiem. Bez tego przycisk
   z `width:100%` i wyściółką 32px robił się szerszy niż pasek, rozpychał
   dokument i na telefonie strona jechała w bok. */
.jadwiga-oferta-pobranie,
.jadwiga-oferta-pobranie__tekst,
.jadwiga-oferta-pobranie__przycisk {
	box-sizing: border-box;
}

.jadwiga-oferta-pobranie {
	max-width: 44rem;
	margin: 0 auto var(--wp--preset--spacing--50);
	padding: 0 0 1.4rem;
	border-bottom: 1px solid rgba(69, 65, 62, 0.12);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem 1.4rem;
}

.jadwiga-oferta-pobranie__tekst {
	margin: 0;
	flex: 1 1 15rem;
	font-size: 0.88rem;
	line-height: 1.55;
	opacity: 0.85;
	position: relative;
	padding-left: 1.9rem;
}

.jadwiga-oferta-pobranie__tekst::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #a98a6f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center/0.72rem no-repeat;
}

.jadwiga-oferta-pobranie__przycisk {
	flex: 0 0 auto;
	font-size: 0.9rem;
}

/* Okładka bez oprawy: makieta niesie własny cień i światło, więc dokładany
   cień, zaokrąglony róg i przechył robiły ramkę wokół ramki.
   `jadwiga-produkt__foto` przycina zdjęcia do 4:3 (tak wyglądają fotki
   produktów na głównej), a okładka jest pionowa 722x1024 — bez zdjęcia
   proporcji obcinało jej górę i dół. */
/* Tytuł oferty w węższej kolumnie (tablet, wąskie okno) wchodził na pięć
   wierszy i przytłaczał kartę — schodzimy o krok ze stopniem pisma. Zawężone
   do oferty, sekcje produktowe na stronie głównej zostają bez zmian.
   W środku `min-width: 782px`, żeby nie ruszyć telefonu. */
@media ( min-width: 782px ) {
	.jadwiga-produkt--ebook .jadwiga-produkt__tytul {
		font-size: clamp( 26px, 2.6vw, 36px );
	}
}

/* Strona oferty ma własny, dwukolumnowy układ, a szablon `page` zwęża treść do
   46rem (szerokość czytania dla regulaminów). Ten ogranicznik tnie też bloki
   `alignwide`, więc obie kolumny mieściły się w 736px na ekranie 1280:
   okładka dostawała 313px i przy karcie wysokiej na 586px wyglądała jak
   miniaturka. Zdejmujemy zwężenie na tej jednej stronie — tak samo jak przy
   „O mnie” i w lejku, rozpoznając ją po własnej klasie sekcji. */
.jadwiga-strona:has( .jadwiga-oferta ) .wp-block-post-content {
	max-width: min( 1080px, 100% );
	margin-inline: auto;
}

/* Ogranicznik okładki: 22rem brało się z czasów, gdy kolumna miała 313px i i tak
   nie dawała więcej. Po poszerzeniu sekcji kolumna ma 465px, więc to on decyduje
   o rozmiarze — 26rem stawia okładkę dokładnie w wysokości karty obok (520px
   przy 519px), czyli robi z niej równorzędnego partnera, a nie przypis. */
.jadwiga-oferta__okladka img {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
	max-width: 26rem;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

/* Kicker jest długi („kobiety, które pobierają…”), więc łamiemy go miękko. */
.jadwiga-produkt--ebook .jadwiga-produkt__kicker {
	max-width: 26rem;
	line-height: 1.5;
}

.jadwiga-oferta__cena {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.7rem 0.9rem;
	margin: 1.4rem 0 1.8rem;
}

.jadwiga-oferta__cena-stara {
	/* Stara cena ma być czytelna obok nowej, a nie ginąć jako przypis. */
	font-size: 1.25rem;
	opacity: 0.5;
	text-decoration-thickness: 1px;
}

.jadwiga-oferta__cena-nowa {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(2.1rem, 5vw, 2.7rem);
	text-decoration: none;
	line-height: 1;
}

.jadwiga-oferta__oszczedzasz {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #45413e);
}

@media (max-width: 781px) {
	/* Po złożeniu kolumn okładka stoi nad tekstem, więc jej szerokość mierzy się
	   z szerokością akapitów. Przy 14rem wypadała o połowę węższa od tekstu pod
	   nią i wyglądała jak wklejona przez pomyłkę (na 375px: 224px obrazu w
	   351px kolumnie, po 63px pustki z każdej strony). Bierze teraz całą
	   kolumnę, z górnym ogranicznikiem na szersze telefony — cień ma wtedy
	   gdzie paść. Obrót zdejmujemy: przy pełnej szerokości róg wychodziłby
	   poza kolumnę. */
	.jadwiga-oferta__okladka img {
		max-width: min( 100%, 20rem );
	}

	.jadwiga-oferta-pobranie {
		flex-direction: column;
		align-items: stretch;
	}

	.jadwiga-oferta-pobranie__przycisk {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* W kolumnie `flex-basis` ustala wysokość, nie szerokość — z bazą 15rem
	   akapit rozpychał się na 240px w pionie. */
	.jadwiga-oferta-pobranie__tekst {
		flex: 0 0 auto;
		max-width: 100%;
	}

	/* Oferta na telefonie: cztery bloki tekstu jeden pod drugim (nadtytuł,
	   tytuł, zdanie, cena) i wąski przycisk na końcu robiły kaszę — każdy
	   element miał inny odstęp, a cena mieszała trzy stopnie pisma w jednej
	   linii. Porządkujemy jednym rytmem odstępów i rozbijamy cenę na dwa
	   piętra. Wszystko zawężone do `--ebook`, żeby nie ruszyć sekcji
	   produktowych na stronie głównej. */
	/* Nadtytuł zapowiada całą kartę („kobiety, które pobierają ten e-book,
	   wybierają również"), więc na telefonie ma stać nad okładką, a nie pod
	   nią. Sam `order` tu nie wystarczy: okładkę wynosi na górę reguła dla
	   kolumn ze zdjęciem, a nadtytuł siedzi trzy poziomy głębiej — w drugiej
	   kolumnie, w karcie i w grupie treści — więc nie jest elementem tego
	   samego fleksa. Sprowadzamy te trzy opakowania do `display: contents`:
	   na telefonie i tak nie mają już ani tła, ani wypełnienia (karta gubi je
	   wyżej), a ich dzieci stają się elementami fleksa kolumn i dają się
	   ustawić `orderem`. Desktop zostaje nietknięty. */
	.jadwiga-oferta__kolumny > .wp-block-column:has( .jadwiga-produkt ),
	.jadwiga-oferta__kolumny .jadwiga-produkt--ebook,
	.jadwiga-oferta__kolumny .jadwiga-produkt__tresc {
		display: contents;
	}
	/* Po spłaszczeniu akapity tracą `flex-basis: 100%`, które rdzeń daje samym
	   kolumnom — bez tego ustawiłyby się w jednym rzędzie zamiast jeden pod
	   drugim. */
	.jadwiga-oferta__kolumny .jadwiga-produkt__tresc > * {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.jadwiga-oferta__kolumny .jadwiga-produkt__kicker {
		order: -2;
	}
	/* Rytm pionowy niosą teraz własne marginesy akapitów, więc `row-gap`
	   kolumn zerujemy, a światło wokół okładki dokładamy marginesem. */
	.jadwiga-oferta__kolumny {
		row-gap: 0;
	}
	.jadwiga-oferta__kolumny > .wp-block-column:has( > .wp-block-image ) {
		margin-block: 1.25rem;
	}

	/* Nadtytuł ma prowadzić do tytułu, a nie konkurować z nim. Bez `max-width`:
	   układ „constrained" wyśrodkowuje każde węższe dziecko, więc ogranicznik
	   odsuwał nadtytuł od lewej krawędzi, na której stoi cała reszta. */
	.jadwiga-produkt--ebook .jadwiga-produkt__kicker {
		font-size: 12px;
		letter-spacing: 0.07em;
	}
	.jadwiga-produkt--ebook .jadwiga-produkt__tytul {
		margin-top: 0.75rem;
	}
	.jadwiga-produkt--ebook .jadwiga-produkt__opis {
		margin-top: 0.75rem;
	}
	/* Cena schodzi z fleksa na zwykły blok: w fleksie `flex-basis` ustala
	   szerokość elementu i plakietka rozciągała się na całą kolumnę. Jako blok
	   ceny płyną w jednej linii, a plakietka — własnym wierszem niżej,
	   `fit-content` trzyma ją przy treści. */
	.jadwiga-produkt--ebook .jadwiga-oferta__cena {
		display: block;
		margin: 1.5rem 0;
	}
	.jadwiga-produkt--ebook .jadwiga-oferta__cena-stara,
	.jadwiga-produkt--ebook .jadwiga-oferta__cena-nowa {
		display: inline;
		vertical-align: baseline;
	}
	.jadwiga-produkt--ebook .jadwiga-oferta__cena-nowa {
		margin-left: 0.6rem;
	}
	/* Obok „39 zł" plakietka siadała na tej samej linii bazowej co pismo 34px
	   i wyglądała na doklejoną w locie. Tło bierze beż zamiast bieli: plakietka
	   ma białe tło z myślą o sekcjach na beżu, a strona oferty jest biała —
	   biel na bieli znikała i zostawał sam tekst z wcięciem, przez co linia
	   wypadała z lewej krawędzi bloku. */
	.jadwiga-produkt--ebook .jadwiga-oferta__oszczedzasz {
		display: block;
		width: fit-content;
		margin-top: 0.8rem;
		background: var(--wp--preset--color--alt, #efe8df);
	}
	/* Przycisk na całą szerokość — kończy blok równą krawędzią zamiast
	   urwanego prostokąta na 197px z 351px kolumny. */
	.jadwiga-produkt--ebook .jadwiga-produkt__akcje,
	.jadwiga-produkt--ebook .jadwiga-produkt__akcje .wp-block-button {
		width: 100%;
	}
	.jadwiga-produkt--ebook .jadwiga-produkt__akcje .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
	.jadwiga-produkt--ebook .jadwiga-produkt__akcje {
		margin-top: 1.5rem;
	}
}

/* --- Baner cookies (Complianz) na telefonie ------------------------------ */

/* Complianz trzyma szerokość banera w ustawieniach (u nas 526px) i w swoim
   arkuszu ma jeden jedyny media query. Na telefonie baner był więc szerszy
   niż ekran: rozpychał dokument, przez co treść stron wyglądała na uciętą
   z prawej. Zwężamy go do ekranu — `!important`, bo walczymy z arkuszem
   generowanym przez wtyczkę, który ładuje się po naszym. */
@media (max-width: 600px) {
	.cmplz-cookiebanner {
		width: auto !important;
		max-width: calc(100vw - 1.2rem) !important;
		left: 0.6rem !important;
		right: 0.6rem !important;
		bottom: 0.6rem !important;
	}

	.cmplz-cookiebanner .cmplz-buttons {
		flex-wrap: wrap;
	}
}