/* Komponenty sekcji marki (STD web-akademia) — używane przez block markup stron.
   Kolory wyłącznie przez var(--wp--preset--color--*). Mobile-first. */

/* Nagłówki na ciemnych sekcjach dziedziczą biel (Astra nadpisuje kolorem globalnym) */
.has-on-brand-color h1,
.has-on-brand-color h2,
.has-on-brand-color h3,
.has-on-brand-color h4 {
	color: inherit;
}

/* Astra daje przyciskom text-transform: capitalize — przywracamy naturalny zapis.
   Selektor wzmocniony, bo reguła Astry (.wp-block-button .wp-block-button__link) wygrywała specyficznością. */
.wp-block-button .wp-block-button__link.wp-element-button,
.wp-block-buttons .wp-block-button__link,
button.wp-element-button {
	text-transform: none;
}

/* Eyebrow nad tytułem sekcji */
.pde-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
	margin-bottom: 0.75rem;
}
/* Eyebrow na granatowym hero = pigułka jak na oferta.polskidoegzaminu.pl:
   przezroczyste tło + obwódka + jasny tekst + kropka w akcencie.
   !important, bo blok ma własne tło z palety (jasny róż) — na granacie dawało
   jasny tekst na jasnym tle, czyli napis praktycznie niewidoczny. */
.has-brand-background-color .pde-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 1.05rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.08) !important;
	border: 1px solid rgb(255 255 255 / 0.22);
	color: rgb(255 255 255 / 0.92) !important;
}
.has-brand-background-color .pde-eyebrow::before {
	content: "";
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Karta (ścieżki, kroki metody) */
.pde-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl, 1.5rem);
	box-shadow: var(--wp--custom--shadow--card);
	padding: 2rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Równa wysokość kart tylko w rzędach (karta = jedyne dziecko kolumny);
   przy kilku kartach w kolumnie height:100% wypychało drugą kartę poza sekcję. */
.wp-block-column > .pde-card:only-child {
	height: 100%;
}
.pde-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--md);
}

/* Tag-pigułka na karcie */
.pde-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.875rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--accent-text);
	margin-bottom: 1rem;
}
/* Ta sama pigułka NA GRANACIE (hero) — jak na oferta.polskidoegzaminu.pl.
   Na jasnej karcie .pde-tag jest czytelna, ale w sekcji brand dziedziczyła biały
   kolor tekstu z `has-on-brand-color`, zostając na jasnoróżowym tle: biały napis
   na jasnym tle. Tło i kolor ustawiamy WPROST, żeby nic nie zależało od tego,
   która reguła wygra remis (Chrome i Edge rozstrzygały to różnie). */
.has-brand-background-color .pde-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 1.05rem;
	background: rgb(255 255 255 / 0.08);
	border: 1px solid rgb(255 255 255 / 0.22);
	color: rgb(255 255 255 / 0.92);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.has-brand-background-color .pde-tag::before {
	content: "";
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Ikony metod w kartach — małe, bez ramek/cieni galerii */
.pde-card img[src*="metoda-"] {
	width: 90px;
	height: 90px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.pde-card .wp-block-image:has(img[src*="metoda-"]) {
	margin: 0 0 0.75rem;
}

/* Numerowane kółko kroku metody */
.pde-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

/* Hero: dodatkowy oddech u góry. Portret jest WYŻSZY od kolumny z tekstem, więc
   jego górna krawędź wychodzi ponad sekcję i chowa się pod nieprzezroczystym,
   przyklejonym nagłówkiem — zdjęcie wygląda na ucięte. Widać to TYLKO u gościa:
   zalogowanemu pasek administracyjny dokłada 32 px i maskuje problem.
   (Stąd fałszywy trop „to różnica między Chrome a Edge".)
   Dotyczy PIERWSZEJ sekcji na KAŻDEJ stronie, nie tylko granatowego hero —
   na kontakcie i stronach treściowych nagłówek też przylegał do paska nawigacji. */
.entry-content > .wp-block-group:first-child {
	padding-top: calc(var(--wp--preset--spacing--section) + 5rem) !important;
}
@media (max-width: 921px) {
	.entry-content > .wp-block-group:first-child {
		padding-top: calc(var(--wp--preset--spacing--section) + 3rem) !important;
	}
}
/* Sklep i archiwa Woo: nagłówek rysuje motyw (pde_shop_archive_header), poza .entry-content */
.pde-shop-header { padding-top: 5rem; }
@media (max-width: 921px) {
	.pde-shop-header { padding-top: 3rem; }
}
/* Karta produktu: układ generuje w całości WooCommerce, bez sekcji z własnym
   odstępem (404 ma swój w .pde-404, więc go nie ruszamy). */
.single-product div.product { padding-top: 4rem; }
@media (max-width: 921px) {
	.single-product div.product { padding-top: 2.5rem; }
}
/* Moje konto / koszyk / zamówienie: treść to shortcode Woo, a nie blok grupy,
   więc reguła „pierwsza sekcja" ich nie łapie — potrzebny osobny odstęp. */
.woocommerce-account .entry-content,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	padding-top: 4rem;
}
@media (max-width: 921px) {
	.woocommerce-account .entry-content,
	.woocommerce-cart .entry-content,
	.woocommerce-checkout .entry-content {
		padding-top: 2.5rem;
	}
}

/* Poświata za portretem w hero — robiona CSS-em, NIE wypalona w pliku.
   Dzięki temu zdjęcie zostaje przezroczyste (można je przenieść na inne tło),
   a kolory poświaty stroi się w jednym miejscu. Warstwa pod obrazkiem. */
.pde-hero-img {
	position: relative;
	isolation: isolate;
}
.pde-hero-img::before {
	content: "";
	position: absolute;
	inset: -4% -8% 10%;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(58% 52% at 50% 40%, rgb(230 53 122 / 0.55), transparent 70%),
		radial-gradient(70% 62% at 50% 55%, rgb(124 58 237 / 0.38), transparent 72%);
	filter: blur(26px);
	pointer-events: none;
}
@media (max-width: 921px) {
	.pde-hero-img::before { filter: blur(18px); inset: -2% -6% 12%; }
}

/* Portret hero: wygaszony dół (STD: cutout na granacie) */
.pde-hero-img img {
	-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

/* Plakietka statystyki na hero */
.pde-hero-badge {
	display: inline-block;
	background: rgb(255 255 255 / 0.1);
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: var(--wp--custom--radius--lg, 1rem);
	padding: 0.75rem 1.25rem;
	backdrop-filter: blur(4px);
}
.pde-hero-badge strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	color: var(--wp--preset--color--accent);
}

/* Przyciski bez jawnego koloru ZAWSZE w akcencie marki.
   Astra (ustawienia customizera: szary #535254 / stary róż #F02878) nadpisywała theme.json
   — wykryte na darmowych materiałach. Ghost wyłączony z reguły. */
.wp-block-buttons .wp-block-button:not(.pde-btn-ghost) .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-brand) !important;
}
.wp-block-buttons .wp-block-button:not(.pde-btn-ghost) .wp-block-button__link:not(.has-background):hover,
.wp-block-buttons .wp-block-button:not(.pde-btn-ghost) .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--accent-text) !important;
}

/* Granatowe pigułki (np. „Napisz do mnie"): rozjaśnienie na hover — identycznie jak
   ghost „Kurs E8 na żywo" na hero (tylko zmiana tła, bez ruchu).
   !important bo klasa has-background nadpisuje hover z theme.json. */
.wp-block-button__link.has-brand-background-color {
	transition: background-color 0.2s ease;
}
.wp-block-button__link.has-brand-background-color:hover,
.wp-block-button__link.has-brand-background-color:focus-visible {
	background-color: var(--wp--preset--color--brand-hover) !important;
	/* Nakładka bieli jak w ghost-buttonie na hero — sam token brand-hover
	   (#16243D→#20314F) jest niezauważalny na jasnym tle. */
	background-image: linear-gradient(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.14));
}

/* Przycisk odwrócony (outline na granacie) */
.pde-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 2px solid rgb(255 255 255 / 0.5);
	color: var(--wp--preset--color--on-brand);
}
.pde-btn-ghost .wp-block-button__link:hover {
	background: rgb(255 255 255 / 0.1);
	border-color: #fff;
}

/* Karuzela zdjęć opinii — scroll-snap, bez JS; działa dla dowolnej liczby zdjęć */
.pde-carousel {
	display: flex !important;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-color: var(--wp--preset--color--accent) transparent;
	scrollbar-width: thin;
}
.pde-carousel .wp-block-image {
	flex: 0 0 min(420px, 85%);
	scroll-snap-align: center;
	margin: 0;
}
.pde-carousel img,
.pde-opinie img {
	border-radius: var(--wp--custom--radius--lg, 1rem);
	box-shadow: var(--wp--custom--shadow--md);
}

/* Plakietki wyników (zielone pigułki jak na oferta.) */
.pde-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.5rem 0 1.75rem;
}
.pde-badges span {
	background: rgb(30 158 87 / 0.12);
	color: var(--wp--preset--color--success);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.4rem 1rem;
	border-radius: 0.6rem;
	white-space: nowrap;
}

/* Galeria zrzutów opinii: telefon = karuzela scroll-snap, desktop = mozaika 3 kolumny */
.pde-gallery {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent) transparent;
}
.pde-gallery .wp-block-image {
	flex: 0 0 min(320px, 80%);
	scroll-snap-align: center;
	margin: 0;
}
.pde-gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg, 1rem);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--card);
}
@media (min-width: 768px) {
	.pde-gallery {
		display: block;
		columns: 3;
		column-gap: 1.25rem;
		overflow: visible;
	}
	.pde-gallery .wp-block-image {
		break-inside: avoid;
		margin: 0 0 1.25rem;
	}
}

/* „Pokaż więcej opinii" — rozwijana druga część galerii (details, bez JS) */
.pde-more-gallery {
	border: 0;
	padding: 0;
	text-align: center;
}
.pde-more-gallery > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-text);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	padding: 0.65rem 1.75rem;
	border-radius: 9999px;
	cursor: pointer;
	margin: 0.75rem auto 0;
	transition: background 0.2s ease, color 0.2s ease;
}
.pde-more-gallery > summary::-webkit-details-marker { display: none; }
.pde-more-gallery > summary:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-brand);
}
.pde-more-gallery > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.pde-more-gallery[open] > summary { display: none; }
.pde-more-gallery .pde-gallery { text-align: left; margin-top: 1.25rem; }

/* FAQ — akordeony details w kartach */
.pde-faq details {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg, 1rem);
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
	box-shadow: var(--wp--custom--shadow--card);
}
.pde-faq details[open] {
	border-color: var(--wp--preset--color--accent);
}
.pde-faq summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.pde-faq summary::-webkit-details-marker { display: none; }
.pde-faq summary::after {
	content: "+";
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	flex: none;
	transition: transform 0.2s ease;
}
.pde-faq details[open] summary::after { transform: rotate(45deg); }
.pde-faq summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.pde-faq details > *:not(summary) { margin-top: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
	.pde-faq summary::after { transition: none; }
}

/* Podpis autora opinii z ikonką */
.pde-quote-author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-text);
}
.pde-quote-author svg {
	width: 1.375rem;
	height: 1.375rem;
	fill: var(--wp--preset--color--accent);
	flex: none;
}

/* „Czytaj więcej" — natywny blok details */
.wp-block-details.pde-more {
	border: 0;
	padding: 0;
	margin-top: 0.5rem;
}
.wp-block-details.pde-more summary {
	color: var(--wp--preset--color--accent-text);
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 0.5rem;
}
.wp-block-details.pde-more summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ===== Nagłówek — STD web-akademia =====
   Sticky, tło surface-alt (róż), przy scrollu: jasne szkło + cień + mniejsze logo (klasa
   .pde-scrolled dodawana w pde.js). */
/* fixed (nie sticky — overflow na kontenerach Astry łamał sticky i nagłówek znikał);
   body dostaje padding-top o wysokość nagłówka z pde.js (--pde-header-h). */
.site-header {
	position: fixed !important; /* Astra nadpisywała position — nagłówek zostawał w dokumencie */
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100%;
	z-index: 999 !important;
	background: #fff; /* tło BEZ zmian — biały jak dotychczas */
	transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
/* Odstęp pod przyklejonym nagłówkiem. Dokładną wartość wpisuje pde.js do
   --pde-header-h, ale skrypt jest ODROCZONY — do czasu jego wykonania obowiązuje
   wartość zapasowa. Musi być NIE MNIEJSZA niż realna wysokość nagłówka (logo 5rem
   + odstępy ≈ 8,5rem), inaczej góra sekcji hero chowa się pod nagłówkiem i zdjęcie
   wygląda na ucięte. Objaw bywał mylony z różnicą między przeglądarkami — w istocie
   zależał od tego, jak szybko przeglądarka wykona odroczony skrypt. */
body { padding-top: var(--pde-header-h, 9rem); }
@media (max-width: 921px) {
	body { padding-top: var(--pde-header-h, 7.5rem); }
}
body.admin-bar .site-header { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px !important; } }
.site-header.pde-scrolled {
	background: rgb(255 255 255 / 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: var(--wp--custom--shadow--md);
}
.site-header .main-header-bar,
.site-header .ast-main-header-wrap { background: transparent !important; }

/* Logo: wektorowe (filtr get_custom_logo), kurczy się przy scrollu */
.site-header .custom-logo,
.site-header .custom-logo-link img {
	height: 5rem !important;
	width: auto !important;
	max-width: none;
	transition: height 0.3s ease;
}
.site-header.pde-scrolled .custom-logo,
.site-header.pde-scrolled .custom-logo-link img { height: 4rem !important; }
@media (max-width: 921px) {
	.site-header .custom-logo,
	.site-header .custom-logo-link img { height: 4rem !important; }
	.site-header.pde-scrolled .custom-logo,
	.site-header.pde-scrolled .custom-logo-link img { height: 3.5rem !important; }
}

/* Linki menu: Inter 14px/500, text-main, hover/active accent-text + animowane podkreślenie */
.main-header-menu .menu-link,
.ast-header-account-link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-main) !important;
	transition: color 0.2s ease;
}
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link {
	color: var(--wp--preset--color--accent-text) !important;
}
.main-header-menu li.menu-item:not(:has(.dashicons-admin-users)) > .menu-link { position: relative; }
.main-header-menu li.menu-item:not(:has(.dashicons-admin-users)) > .menu-link::before {
	content: "";
	position: absolute;
	left: 0.6rem;
	right: 0.6rem;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent-text);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.main-header-menu li.menu-item:not(:has(.dashicons-admin-users)) > .menu-link:hover::before,
.main-header-menu li.current-menu-item:not(:has(.dashicons-admin-users)) > .menu-link::before,
.main-header-menu li.current_page_item:not(:has(.dashicons-admin-users)) > .menu-link::before {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.main-header-menu .menu-link::before { transition: none; }
	.site-header, .site-header .custom-logo { transition: none; }
}

/* „Moje konto" na desktopie: kompaktowa pigułka z ikoną (jak CTA w web-akademia) */
.main-header-menu li.menu-item:has(.dashicons-admin-users) { align-self: center; }
.main-header-menu li.menu-item:has(.dashicons-admin-users) > .menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	height: auto !important;
	line-height: 1 !important;
	font-size: 0.85rem;
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-brand) !important;
	border-radius: 9999px;
	padding: 0.55rem 1.15rem !important;
	margin-left: 0.5rem;
	font-weight: 600;
	transition: background 0.2s ease;
}
.main-header-menu li.menu-item:has(.dashicons-admin-users) > .menu-link:hover {
	background: var(--wp--preset--color--accent-text) !important;
	color: var(--wp--preset--color--on-brand) !important;
}
.main-header-menu li.menu-item:has(.dashicons-admin-users) > .menu-link::after {
	content: "Moje konto";
}
.main-header-menu .dashicons-admin-users {
	font-size: 1.1rem;
	width: auto;
	height: auto;
	line-height: 1;
}

/* Koszyk w menu (WP Menu Cart): granatowa pigułka; gdy koszyk ma produkty,
   zastępuje pigułkę „Moje konto" (klasa pde-cart-empty nadawana w pde.js) */
.main-header-menu li.wpmenucartli { align-self: center; }
.main-header-menu li.wpmenucartli > a {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	height: auto !important;
	line-height: 1 !important;
	font-size: 0.85rem;
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--on-brand) !important;
	border-radius: 9999px;
	padding: 0.55rem 1.15rem !important;
	margin-left: 0.5rem;
	font-weight: 600;
	transition: background 0.2s ease;
}
.main-header-menu li.wpmenucartli > a:hover {
	background: var(--wp--preset--color--brand-hover) !important;
	background-image: linear-gradient(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.14)) !important;
}
/* Przełącznik sterowany klasą na body (cookie Woo woocommerce_items_in_cart, pde.js) */
body:not(.pde-cart-full) li.wpmenucartli { display: none !important; }
body.pde-cart-full .main-header-menu li.menu-item:has(.dashicons-admin-users),
body.pde-cart-full .ast-mobile-header-content li.menu-item:has(.dashicons-admin-users),
body.pde-cart-full .ast-mobile-popup-drawer li.menu-item:has(.dashicons-admin-users) {
	display: none !important;
}
/* Włoskowy pasek spektrum pod nagłówkiem (jak w web-akademia) */
.site-header {
	position: relative;
}
.site-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	opacity: 0.35;
	background: linear-gradient(90deg,
		var(--wp--preset--color--spectrum-1),
		var(--wp--preset--color--spectrum-3),
		var(--wp--preset--color--spectrum-2));
	pointer-events: none;
}
/* Menu mobilne w STD web-akademia: jasny panel, linki text-main 500, hover róż, separatory */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-content {
	background: var(--wp--preset--color--surface-alt) !important;
}
.ast-mobile-popup-drawer .menu-link,
.ast-mobile-header-content .menu-link {
	color: var(--wp--preset--color--text-main) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 500;
	padding: 0.7rem 1rem !important;
	border-bottom: 1px solid rgb(0 0 0 / 0.06) !important;
}
.ast-mobile-popup-drawer .menu-link:hover,
.ast-mobile-header-content .menu-link:hover {
	color: var(--wp--preset--color--accent-text) !important;
	background: rgb(255 255 255 / 0.6) !important;
}
.ast-mobile-popup-drawer .menu-toggle-close {
	color: var(--wp--preset--color--text-main);
}
/* Hamburger w kolorze tekstu marki */
.ast-header-break-point .main-header-menu-toggle,
.ast-mobile-menu-trigger-minimal {
	color: var(--wp--preset--color--text-main) !important;
}

/* Galeria opinii na telefonie: zamiast karuzeli — zdjęcia jedno pod drugim,
   widoczne 2 pierwsze + reszta za „Pokaż więcej opinii" (desktop bez zmian: mozaika 6). */
@media (max-width: 767px) {
	.pde-gallery {
		display: block;
		overflow: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
	}
	.pde-gallery .wp-block-image {
		margin: 0 0 1rem;
	}
	/* Przycinanie do 2 zdjęć TYLKO w galeriach, które mają co chować (4+ obrazków —
	   opinie na stronie głównej z „Pokaż więcej"). Galeria dyplomów na /about/ ma
	   dokładnie 3 i bez tego warunku trzeci znikał bez możliwości podejrzenia. */
	.pde-gallery:has(> .wp-block-image:nth-child(4)) > .wp-block-image:nth-child(n+3) {
		display: none;
	}
	.pde-more-gallery .pde-gallery > .wp-block-image {
		display: block;
	}
}

/* Strzałka „do góry" (Astra): brandowe kółko zamiast różowego kwadratu */
#ast-scroll-top,
.ast-scroll-to-top {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-brand) !important;
	border-radius: 9999px !important;
	box-shadow: var(--wp--custom--shadow--md);
	transition: background-color 0.2s ease;
}
#ast-scroll-top:hover,
.ast-scroll-to-top:hover {
	background-color: var(--wp--preset--color--accent-text) !important;
}

/* Kontakt na mobile: kolejność Dane kontaktowe → Formularz → Dane firmy
   (kolumny rozpuszczone przez display:contents, porządek nadany order) */
@media (max-width: 781px) {
	.page-id-811 .wp-block-columns {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	.page-id-811 .wp-block-column { display: contents; }
	.page-id-811 .wp-block-column:first-child > .pde-card:first-child { order: 1; }
	.page-id-811 .wp-block-column:last-child > .pde-card { order: 2; }
	.page-id-811 .wp-block-column:first-child > .pde-card + .pde-card {
		order: 3;
		margin-top: 0 !important;
	}
}

/* ===== CookieYes — banner w kolorach marki ===== */
.cky-consent-container, .cky-consent-bar {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--lg, 1rem) !important;
	box-shadow: var(--wp--custom--shadow--md) !important;
}
.cky-consent-container .cky-title,
.cky-consent-container p, .cky-notice-des, .cky-notice-des p {
	color: var(--wp--preset--color--text-main) !important;
	font-family: var(--wp--preset--font-family--body);
}
.cky-btn-accept {
	background: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-brand) !important;
	border-radius: 9999px !important;
	font-weight: 600;
}
.cky-btn-accept:hover { background: var(--wp--preset--color--accent-text) !important; }
.cky-btn-reject, .cky-btn-customize {
	background: transparent !important;
	border: 2px solid var(--wp--preset--color--border) !important;
	color: var(--wp--preset--color--text-main) !important;
	border-radius: 9999px !important;
	font-weight: 600;
}
.cky-btn-reject:hover, .cky-btn-customize:hover {
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent-text) !important;
}
.cky-consent-container a { color: var(--wp--preset--color--accent-text) !important; }
/* Cookies na mobile: banner mieści się w ekranie, tekst zawija, przyciski łamią do pionu */
.cky-consent-container {
	max-width: calc(100vw - 1.5rem) !important;
	box-sizing: border-box !important;
	left: 0.75rem !important;
	right: 0.75rem !important;
	overflow-x: hidden;
}
.cky-consent-container *,
.cky-consent-bar * {
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal !important;
	overflow-wrap: break-word;
}
.cky-notice-btn-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem;
}

/* Menu mobilne: zero kolorowych pasków Astry — tła gasimy na li ORAZ linku
   (fiolet aktywnej pozycji siedział na li przez dynamiczny CSS Astry) */
.ast-mobile-header-content .menu-item,
.ast-mobile-header-content .menu-item > .menu-link,
.ast-mobile-popup-drawer .menu-item,
.ast-mobile-popup-drawer .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-item,
.ast-header-break-point .main-header-menu .menu-item > .menu-link {
	background: transparent !important;
	background-color: transparent !important;
}
.ast-mobile-header-content .current-menu-item > .menu-link,
.ast-mobile-header-content .current_page_item > .menu-link,
.ast-mobile-popup-drawer .current-menu-item > .menu-link,
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link {
	color: var(--wp--preset--color--accent-text) !important;
}

/* „Moje konto" w menu mobilnym: pozycja z ikonką konta jako pigułka CTA (jak w web-akademia) */
.ast-mobile-header-content li.menu-item:has(.dashicons-admin-users) > .menu-link,
.ast-mobile-popup-drawer li.menu-item:has(.dashicons-admin-users) > .menu-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* wyśrodkowana pigułka, nigdy nie wystaje poza ekran (margin auto + calc) */
	box-sizing: border-box;
	width: calc(100% - 2.5rem);
	max-width: 20rem;
	margin: 1rem auto !important;
	padding: 0.8rem 1rem !important;
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-brand) !important;
	border-radius: 9999px !important;
	border-bottom: 0 !important;
	font-weight: 600;
}
.ast-mobile-header-content li.menu-item:has(.dashicons-admin-users) > .menu-link::after,
.ast-mobile-popup-drawer li.menu-item:has(.dashicons-admin-users) > .menu-link::after {
	content: "Moje konto";
}

/* ===== Stopka — STD web-akademia (granat + pasek spektrum) =====
   Struktura pozostaje z Astra footer-buildera; tu tylko warstwa wizualna. */
.site-footer {
	background: var(--wp--preset--color--brand);
	color: rgb(255 255 255 / 0.7);
}
.site-footer::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--spectrum-1),
		var(--wp--preset--color--spectrum-3),
		var(--wp--preset--color--spectrum-2));
}
/* Astra customizer maluje wiersze stopki na biało/szaro — wyłączamy, granat ma być tłem całości.
   !important konieczne: Astra wstrzykuje te tła własnym CSS z customizera. */
.site-footer .ast-builder-grid-row-container,
.site-footer .site-footer-focus-item,
.site-footer .site-above-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
	background: transparent !important;
}
.site-footer a {
	color: rgb(255 255 255 / 0.7);
}
.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--wp--preset--color--on-brand);
}
.site-footer .widget-title,
.site-footer h2,
.site-footer .ast-footer-widget-title {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.5);
}
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-html {
	font-size: 0.75rem;
	color: rgb(255 255 255 / 0.5);
}
/* Layout stopki (własny footer.php, układ 1:1 z web-akademia) */
.pde-footer__inner {
	max-width: 72rem;
	margin-inline: auto;
	padding: 3.5rem 1rem 2rem;
}
.pde-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 768px) {
	.pde-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
	.pde-footer__inner { padding: 4rem 2rem 2rem; }
}
.pde-footer__brand img {
	height: 7.5rem;
	width: auto;
	margin-bottom: 1.25rem;
}
.pde-footer__tagline {
	font-size: 0.875rem;
	line-height: 1.6;
	max-width: 22rem;
	margin-bottom: 1.5rem;
}
/* ===== Informacja o wstrzymanej sprzedaży — znika SAMA 1.09 (PDE_SALE_RESUMES_ON w functions.php).
   Globalnie w pde.css, bo notka pojawia się i w sklepie, i w treści stron (shortcode [pde_sale_note]). ===== */
.pde-notice--pause {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid rgb(230 53 122 / 0.45);
	border-radius: 1rem;
	padding: 0.9rem 1.15rem;
	margin: 0 0 1.75rem;
}
.pde-notice--pause svg {
	width: 1.35rem;
	height: 1.35rem;
	flex: none;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--accent-text);
}
.pde-notice--pause p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-main);
}
.pde-notice--pause strong { color: var(--wp--preset--color--accent-text); }
/* Wariant kompaktowy — wewnątrz kart (np. „Materiały i nagrane kursy" na stronie głównej) */
.pde-notice--sm {
	gap: 0.55rem;
	padding: 0.7rem 0.9rem;
	margin: 0 0 1.1rem;
}
.pde-notice--sm svg { width: 1.15rem; height: 1.15rem; }
.pde-notice--sm p { font-size: 0.875rem; }

/* ===== Potwierdzenie wysłania formularza (WPForms) =====
   Domyślnie WPForms rysuje zielone pudełko (#e0ffc7 + #b4d39b) — obce marce.
   Ikona przez ::before, bo wp_kses_post wycina <svg> z pola potwierdzenia w kreatorze. */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: var(--wp--preset--color--surface-alt) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--lg, 1rem) !important;
	padding: 2rem 1.5rem !important;
	color: var(--wp--preset--color--text-main) !important;
}
.wpforms-confirmation-container p:last-of-type { margin-bottom: 0 !important; }

.pde-thanks { text-align: center; }
.pde-thanks::before {
	content: "";
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background-color: rgba(230, 53, 122, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C82E6C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.6rem 1.6rem;
}
.pde-thanks__title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--brand);
}
.pde-thanks p { margin: 0 0 0.75rem; line-height: 1.6; }
.pde-thanks p:last-child { margin-bottom: 0; }
.pde-thanks__hint {
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-muted, inherit);
}

/* ===== Sekcja zapisu na darmowe materiały: formularz + „co dostaniesz" =====
   Formularz Sendera ma szerokość zadaną po ich stronie i nie da się jej rozciągnąć
   z zewnątrz — dlatego zamiast walczyć o szerokość, zagospodarowujemy drugą kolumnę. */
.pde-signup-cols {
	align-items: center;
	gap: 2.5rem;
}
/* Karta z formularzem NIE unosi się pod kursorem — to pole do wypełnienia, nie link.
   (globalny .pde-card:hover podskakiwał w trakcie pisania w polach) */
.pde-signup-cols .pde-card:hover {
	transform: none;
	box-shadow: var(--wp--custom--shadow--card);
}
/* Sender wstrzykuje formularz o własnej szerokości — centrujemy go w karcie */
.sender-form-field {
	display: flex;
	justify-content: center;
}
.sender-form-field > * {
	margin-inline: auto !important;
}
/* Lista korzyści — kropki w akcencie zamiast domyślnych punktorów */
.pde-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pde-benefits li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 1.15rem;
	line-height: 1.6;
}
.pde-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 0.28rem rgba(230, 53, 122, 0.15);
}
.pde-benefits li:last-child { margin-bottom: 0; }
.pde-benefits strong { color: var(--wp--preset--color--brand); }
@media (max-width: 781px) {
	.pde-signup-cols { gap: 1.75rem; }
}

/* Social — ikony bez podpisów (IG/TikTok/YT); 44px = minimalny cel dotykowy WCAG */
.pde-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.pde-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.08);
	color: var(--wp--preset--color--accent) !important;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pde-footer__social a:hover,
.pde-footer__social a:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-brand) !important;
	transform: translateY(-2px);
}
.pde-footer__social svg { width: 1.5rem; height: 1.5rem; flex: none; }
@media (prefers-reduced-motion: reduce) {
	.pde-footer__social a { transition: none; }
	.pde-footer__social a:hover,
	.pde-footer__social a:focus-visible { transform: none; }
}
.pde-footer__col h2 { margin-bottom: 1rem; }
.pde-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}
.pde-footer__col a {
	font-size: 0.875rem;
	text-decoration: none;
}
.pde-footer__bottom {
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgb(255 255 255 / 0.1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	font-size: 0.75rem;
	color: rgb(255 255 255 / 0.5);
}
.pde-footer__bottom p { margin: 0; }
.pde-footer__bottom a { color: inherit; }

/* Formularze WPForms — spójne z przyciskami marki */
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-brand) !important;
	border: 0 !important;
	border-radius: 9999px !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 600 !important;
	padding: 0.75rem 1.75rem !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.2s ease;
}
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
	background: var(--wp--preset--color--accent-text) !important;
}
.wpforms-container input:focus-visible,
.wpforms-container textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Pigułki social (IG/TikTok) na stronach dziękujemy */
.pde-social-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin: 0.5rem 0 0;
}
.pde-pill-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand) !important;
	border-radius: 9999px;
	padding: 0.55rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}
.pde-pill-link:hover,
.pde-pill-link:focus-visible {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--on-brand) !important;
}
.pde-pill-link svg { width: 1.1rem; height: 1.1rem; flex: none; }

/* ===== Strona 404 ===== */
body.error404 #content,
body.error404 .site-content {
	background: var(--wp--preset--color--surface) !important;
}
.pde-404 {
	max-width: 42rem;
	margin: 0 auto;
	padding: 6rem 1.25rem 7rem;
	text-align: center;
}
.pde-404 h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--wp--preset--color--text-main);
	margin: 0.5rem 0 1rem;
}
.pde-404__sub { color: var(--wp--preset--color--text-muted); margin-bottom: 1.75rem; }
.pde-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-bottom: 1.5rem;
}
.pde-404__contact { font-size: 0.9rem; color: var(--wp--preset--color--text-muted); }
.pde-404__contact a { color: var(--wp--preset--color--accent-text); }

/* Dostępność: wyraźny focus na interaktywnych */
.pde-card a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Płynne wejścia tylko gdy użytkownik nie ogranicza ruchu */
@media (prefers-reduced-motion: reduce) {
	.pde-card { transition: none; }
	.pde-card:hover { transform: none; }
}