/* =====================================================================
   SPIS TREŚCI  (stan 2026-07-21, po audycie CSS)

   ★★ PLIK JEST UŁOŻONY CHRONOLOGICZNIE, NIE TEMATYCZNIE.
   Rósł blokami doklejanymi na koniec („POPRAWKI v2…v14"), więc:
   - reguły jednego komponentu leżą w KILKU miejscach pliku,
   - przy konflikcie wygrywa ta NIŻEJ, niezależnie od numeru bloku,
   - numery bloków NIE odpowiadają kolejności (v9 i v10 leżą przed v2).
   Zanim poprawisz regułę, sprawdź, czy niżej nie ma drugiej definicji
   tego samego selektora — inaczej poprawka nie zadziała.

   ★ Zanim nazwiesz nowy komponent `pe-*`: sprawdź, czy nazwa nie istnieje
   (kolizje `pe-course`, `pe-review` już się zdarzyły i opakowały pół strony).

   ★ Klasy sklejane w PHP (`pe-catrow--<?php ?>`, `'pe-lesson--'.$typ`) są
   NIEWIDOCZNE dla wyszukiwania po nazwie. Nie kasuj reguły dlatego, że
   `grep` jej nie znalazł — patrz CLAUDE.md, punkt 10.

   UKŁAD (kolejność w pliku):
     warstwa bazowa: tokeny, reset, typografia, przyciski, siatki, kotwice
     nawigacja i nagłówek · stopka · paginacja i wyszukiwarka
     POPRAWKI v9  — komponenty podstron (Ćwiczenia / Kalkulator)
     POPRAWKI v10 — dwustopniowy wybór poziomu + nagłówek landingowy
     STRONA GŁÓWNA — układ 13 sekcji
     ZNAK MARKI — krata na wszystkich ciemnych tłach  ← wspólna reguła, nie kopiuj
     POPRAWKI v2, v4, v5, v7, v8 — karty kursów, pakiety, menu, strona Kursy
     PORADNIK — pojedynczy wpis + typografia treści `.pe-entry`
     BOXY PRODUKTOWE · BOX POBIERANIA PLIKU
     KOMENTARZE · OPINIE (ocena gwiazdkowa)
     POPRAWKI v9b — logo, zdjęcia, opinie, dropdown
     LANDINGI: lejkowe · edytowane w Gutenbergu · mini-system `.pe-landing-content`
     POPRAWKI v11…v14 — poradniki, kalkulator, ćwiczenia, upselle
   ===================================================================== */

/* =====================================================================
   PoczujExcel — motyw, warstwa bazowa
   Paleta: ENERGIA (zieleń #107C41 + limonka + ciemna zieleń).
   Kolory pochodzą z theme.json (jedno źródło prawdy) i są tu tylko
   „przemianowane" na tokeny semantyczne, żeby łatwo się nimi posługiwać.
   Piotr: finalne odcienie zmieniasz w theme.json, nie tutaj.
   ===================================================================== */

:root {
	/* Kolory — aliasy na presety z theme.json */
	--pe-green:      var(--wp--preset--color--green);       /* #107C41 marka */
	--pe-green-deep: var(--wp--preset--color--green-deep);  /* #044922 */
	--pe-forest:     var(--wp--preset--color--forest);      /* #17331E ciemne tło */
	--pe-lime:       var(--wp--preset--color--lime);        /* #77C043 akcent */
	--pe-ink:        var(--wp--preset--color--ink);         /* #17201A tekst */
	--pe-muted:      var(--wp--preset--color--muted);       /* #5A655E */
	--pe-line:       var(--wp--preset--color--line);        /* #E1E7DE */
	--pe-paper:      var(--wp--preset--color--paper);       /* #F6F9F3 */
	--pe-white:      var(--wp--preset--color--white);

	/* Warstwy semantyczne */
	--pe-bg:          var(--pe-white);
	--pe-bg-alt:      var(--pe-paper);
	--pe-text:        var(--pe-ink);
	--pe-text-soft:   var(--pe-muted);
	--pe-accent:      var(--pe-green);
	--pe-accent-ink:  var(--pe-white);

	/* Promienie i cienie */
	--pe-radius:    10px;
	--pe-radius-sm: 6px;
	--pe-shadow:    0 8px 28px rgba(23, 51, 30, 0.08);

	/* Kontener */
	--pe-content: var(--wp--style--global--content-size, 780px);
	--pe-wide:    var(--wp--style--global--wide-size, 1180px);
}

/* ---- Reset lekki / bazowe ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--pe-bg);
	color: var(--pe-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a {
	color: var(--pe-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { color: var(--pe-green-deep); }

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--pe-green);
	outline-offset: 2px;
	border-radius: 2px;
}

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

/* ---- Kontenery ---- */
.pe-container { width: 100%; max-width: var(--pe-wide); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.pe-container--narrow { max-width: var(--pe-content); }

/* ---- Przyciski (spójne z theme.json) ---- */
.pe-btn {
	display: inline-flex; align-items: center; gap: 0.5em;
	background: var(--pe-accent); color: var(--pe-accent-ink);
	font-weight: 700; text-decoration: none;
	padding: 0.8em 1.4em; border-radius: 8px; border: 0; cursor: pointer;
	transition: background-color 0.15s ease;
}
.pe-btn:hover { background: var(--pe-green-deep); color: var(--pe-white); }
.pe-btn--ghost {
	background: transparent; color: var(--pe-green);
	box-shadow: inset 0 0 0 2px var(--pe-green);
}
.pe-btn--ghost:hover { background: var(--pe-green); color: var(--pe-white); }
.pe-btn--ghost-light {
	background: transparent; color: var(--pe-lime-bright);
	box-shadow: inset 0 0 0 2px rgba(152, 219, 104, 0.6);
}
.pe-btn--ghost-light:hover { background: var(--pe-lime); color: var(--pe-forest); box-shadow: inset 0 0 0 2px var(--pe-lime); }

/* ---- Sekcja na ciemnej zieleni (jak w shortsach) ---- */
.pe-section--dark {
	background: var(--pe-forest);
	color: var(--pe-white);
}
.pe-section--dark a:not(.pe-btn) { color: var(--pe-lime); }

/* ---- Płynne przewijanie do kotwic ----
   Dotyczy wszystkich kotwic w serwisie: pasków kategorii w menu (#kursy-excel,
   #kursy-pq, #kursy-pp), cennika (#cennik), zapisu na kurs darmowy (#pe-zapis)
   i spisów treści w poradnikach. Zamiast skoku strona przesuwa się płynnie,
   dzięki czemu widać, DOKĄD się jedzie - przy skoku czytelnik traci orientację.
   Natywne `scroll-behavior` wystarcza (zero JS) i współpracuje ze
   `scroll-margin-top` na kotwicach, więc cel nie chowa się pod nagłówkiem. */
html { scroll-behavior: smooth; }

/* ---- Dostępność: redukcja ruchu ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	/* Płynne przewijanie to też ruch - u osób wrażliwych na wektor potrafi
	   wywołać zawroty głowy. Reguła wyżej go nie wyłącza (to nie animacja
	   ani transition), więc trzeba to zrobić osobno. */
	html { scroll-behavior: auto; }
}

/* ---- Skip link ---- */
.pe-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--pe-green); color: var(--pe-white);
	padding: 0.6em 1em; border-radius: 0 0 var(--pe-radius-sm) 0;
}
.pe-skip-link:focus { left: 0; color: var(--pe-white); }

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

/* ---- Utility: pionowy rytm ---- */
.pe-flow > * + * { margin-top: var(--wp--preset--spacing--40, 1.5rem); }

/* ---- Nagłówek strony ---- */
.pe-header {
	background: var(--pe-bg);
	position: relative; z-index: 100;
}
/* Landing produktowy: logo wyśrodkowane, bez menu */
.pe-header--landing .pe-header__inner { justify-content: center; }
.pe-header--landing .pe-header__brand { text-align: center; }
.pe-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 1rem);
	min-height: 4.5rem;
	padding-top: 1.25rem;
}

.pe-header .custom-logo { max-height: 34px; width: auto; }
.pe-header__logo { display: inline-flex; align-items: center; text-decoration: none; }

/* ---- Nawigacja ---- */
.pe-nav { display: flex; align-items: center; }
.pe-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 2.25rem;
}
.pe-nav__list a {
	text-decoration: none; color: var(--pe-text); font-weight: 600;
}
.pe-nav__list a:hover,
.pe-nav__list .current-menu-item > a { color: var(--pe-green); }
/* ★ Przycisk konta stylujemy PO KLASIE, nie przez `li:last-child`.
   Po zalogowaniu za tą pozycją dochodzi jeszcze „Wyloguj się", więc reguła
   oparta na ostatnim dziecku przeniosłaby zielone tło na ikonę wylogowania,
   a „Panel kursanta" zostałby zwykłym linkiem. Klasę dokłada `pe_nav_konto()`. */
.pe-nav__list > li.pe-nav__account > a {
	background: var(--pe-green); color: #fff; padding: 0.45em 1.1em;
	border-radius: 6px; transition: background 0.2s;
}
.pe-nav__list > li.pe-nav__account > a:hover { background: var(--pe-green-dark, #122a17); color: #fff; }

/* Zalogowany — „Panel kursanta” tylko w ramce, żeby odróżnić stan zalogowania. */
.pe-nav__list > li.pe-nav__account--panel > a {
	background: transparent; color: var(--pe-green);
	border: 2px solid var(--pe-green); padding: calc(0.45em - 2px) calc(1.1em - 2px);
}
.pe-nav__list > li.pe-nav__account--panel > a:hover {
	background: var(--pe-green); color: #fff;
}

/* Powitanie — drugi plan, nie konkuruje z pozycjami menu. */
.pe-nav__list > li.pe-nav__hello > a {
	color: var(--pe-muted); font-weight: 500; cursor: default;
	max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-nav__list > li.pe-nav__hello > a:hover { color: var(--pe-muted); }

/* Wylogowanie — sama ikona, tekst czytelny dla czytników ekranu. */
.pe-nav__list > li.pe-nav__logout > a {
	display: inline-flex; align-items: center; color: var(--pe-muted);
	padding: 0.35em; border-radius: 6px; transition: color 0.2s, background 0.2s;
}
.pe-nav__list > li.pe-nav__logout > a:hover { color: var(--pe-green); background: rgba(15, 90, 50, 0.08); }
.pe-nav__list > li.pe-nav__logout .pe-icon { width: 20px; height: 20px; }
.pe-nav__logout-txt {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Pasek robi się ciasny — imię znika pierwsze, przycisk i wylogowanie zostają. */
@media (max-width: 1100px) {
	.pe-nav__list > li.pe-nav__hello { display: none; }
}

/* Przycisk hamburgera — ukryty na desktopie. */
.pe-nav-toggle {
	display: none;
	background: transparent; border: 0; cursor: pointer;
	padding: 0.5em; margin: -0.5em; color: var(--pe-text);
}
.pe-nav-toggle__box { display: block; width: 24px; height: 16px; position: relative; }
.pe-nav-toggle__bar,
.pe-nav-toggle__bar::before,
.pe-nav-toggle__bar::after {
	content: ''; position: absolute; left: 0; width: 100%; height: 2px;
	background: currentColor; border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.pe-nav-toggle__bar { top: 50%; transform: translateY(-50%); }
.pe-nav-toggle__bar::before { top: -7px; }
.pe-nav-toggle__bar::after  { top: 7px; }

/* Stan otwarty → krzyżyk. */
.pe-nav-open .pe-nav-toggle__bar { background: transparent; }
.pe-nav-open .pe-nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.pe-nav-open .pe-nav-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 47.99em) {
	.pe-nav-toggle { display: block; }
	.pe-nav {
		/* ★ `top: 100%` KONIECZNE. Bez niego `position:absolute` bierze pozycję
		   statyczną z flexowego `align-items:center` nagłówka: rozwinięta lista
		   (~740px) centruje się w 72px pasku i wypycha w górę o ~334px, przez co
		   pierwsze pozycje menu lądują nad ekranem. Kotwiczymy pod nagłówek. */
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--pe-bg); border-bottom: 1px solid var(--pe-line);
		box-shadow: var(--pe-shadow);
		display: none; z-index: 50;
		max-height: calc(100vh - 4.5rem); overflow-y: auto;
	}
	.pe-nav-open .pe-nav { display: block; }
	.pe-nav__list {
		flex-direction: column; gap: 0;
		padding: var(--wp--preset--spacing--30, 1rem) clamp(16px, 4vw, 32px);
	}
	.pe-nav__list a { display: block; padding: 0.6em 0; }
	.pe-header { position: relative; }
}

/* ---- Menu rozwijane „Kursy Online" — mega-panel z 2 poziomami ---- */
.pe-nav__list li { position: relative; }
.pe-nav__list .sub-menu { list-style: none; margin: 0; padding: 0; }

@media (min-width: 48em) {
	/* Strzałka tylko przy pozycji poziomu 0, która ma rozwinięcie */
	.pe-nav__list > .menu-item-has-children { position: relative; }
	.pe-nav__list > .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 0.35em; }
	.pe-nav__list > .menu-item-has-children > a::after {
		content: ''; width: 0.45em; height: 0.45em;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); margin-top: -0.25em;
		transition: transform 0.15s ease;
	}
	.pe-nav__list > .menu-item-has-children:hover > a::after {
		transform: rotate(-135deg); margin-top: 0.15em;
		transition-delay: var(--pe-nav-delay, 0.35s);
	}

	/* Panel (poziom 1) — pojawia się pod „Kursy Online" */
	.pe-nav__list > .menu-item-has-children > .sub-menu {
		position: absolute; top: 100%; left: 0; z-index: 120;
		background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: var(--pe-radius);
		box-shadow: var(--pe-shadow); padding: 1.4rem 1.6rem;
		display: flex; gap: 2.5rem; align-items: flex-start;
		opacity: 0; visibility: hidden; transform: translateY(6px);
		/* Zamknięcie natychmiast (bez opóźnienia), otwarcie z opóźnieniem niżej. */
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
	}
	/* Panel otwiera się dopiero, gdy kursor zatrzyma się na pozycji — inaczej
	   rozwijał się przy samym przejeżdżaniu myszą w drodze gdzie indziej. */
	.pe-nav__list > .menu-item-has-children:hover > .sub-menu,
	.pe-nav__list > .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1; visibility: visible; transform: translateY(0);
		transition-delay: var(--pe-nav-delay, 0.35s);
	}
	.pe-nav__list > .menu-item-has-children:focus-within > .sub-menu {
		/* Klawiatura: bez opóźnienia. */
		transition-delay: 0s;
	}

	/* Kolumna = grupa poziomu 1 */
	.pe-nav__list > .menu-item-has-children > .sub-menu > li { min-width: 11.5rem; }

	/* Nagłówek grupy (poziom 1) */
	.pe-nav__group > a {
		display: inline-block; font-weight: 700; font-size: 0.8rem;
		text-transform: uppercase; letter-spacing: 0.05em; color: var(--pe-green);
		padding: 0 0 0.5rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--pe-line);
		white-space: nowrap;
	}
	.pe-nav__group > a::after { display: none; }
	/* Pojedynczy link bez grupy (Power Pivot) — nagłówek wygląda jak reszta, ale klika */
	.pe-nav__group--solo > a { border-bottom-color: transparent; }
	.pe-nav__group--solo > a:hover { color: var(--pe-green-deep); }

	/* Lista pozycji poziomu 2 — statyczna, w kolumnie */
	.pe-nav__group > .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0;
		background: transparent; display: block;
	}
	.pe-nav__group > .sub-menu > li { border: 0; }
	.pe-nav__group > .sub-menu > li > a {
		display: block; padding: 0.5em 0.5em; margin-left: -0.5em; border-radius: var(--pe-radius-sm);
		font-weight: 500; font-size: 0.9rem; color: var(--pe-text); white-space: nowrap;
	}
	.pe-nav__group > .sub-menu > li > a:hover { background: var(--pe-bg-alt); color: var(--pe-green); }
}

/* Mobile: wszystko rozwinięte, zagnieżdżenie przez wcięcie */
@media (max-width: 47.99em) {
	.pe-nav__list .sub-menu { padding-left: 1rem; border-left: 2px solid var(--pe-line); }
	.pe-nav__group > a { font-weight: 700; color: var(--pe-green); }
	.pe-nav__list .menu-item-has-children > a::after { display: none; }
}

/* Kotwice pakietów — nie chowaj pod nagłówkiem przy przewijaniu */
.pe-package[id], [id="kursy"], [id="pakiety"], [id="cennik"], .pe-catrow[id] { scroll-margin-top: 5.5rem; }

/* ---- Główna treść ---- */
.pe-main { padding-block: var(--wp--preset--spacing--50, 2.5rem); }

/* Lekki nagłówek marki — wpisy bloga, strony treściowe, archiwa.
   Pełnoszerokościowy jasny pasek z eyebrow + tytuł + meta. */
.pe-page-head {
	background: var(--pe-bg-alt);
	border-bottom: 1px solid var(--pe-line);
	padding-block: clamp(2rem, 5vw, 3.25rem);
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.pe-page-head__inner { max-width: var(--pe-narrow, 780px); }
.pe-page-head__eyebrow {
	display: inline-block; font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--pe-green); margin: 0 0 0.7rem;
}
.pe-page-head__eyebrow a { color: inherit; text-decoration: none; }
.pe-page-head__eyebrow a:hover { text-decoration: underline; }
.pe-page-head__title { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--3xl, 2.75rem); }
.pe-page-head__title::after { content: ""; display: block; width: 2.75rem; height: 3px; border-radius: 3px; background: var(--pe-lime); margin-top: 0.9rem; }
.pe-page-head--center .pe-page-head__title::after { margin-inline: auto; }
.pe-page-head__meta { color: var(--pe-text-soft); font-size: 0.9rem; margin: 0; }
.pe-page-head--center .pe-page-head__inner { margin-inline: auto; text-align: center; }

/* =====================================================================
   POPRAWKI v9 — komponenty podstron (Ćwiczenia / Kalkulator)
   ===================================================================== */

/* Siatka 2 kolumn */
.pe-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 52em) { .pe-grid--2 { grid-template-columns: 1fr; } }

/* Listy ✓ / ✗ na jasnym tle */
.pe-ticklist, .pe-xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pe-ticklist li, .pe-xlist li { padding-left: 1.7rem; position: relative; }
.pe-ticklist li::before { content: "✓"; position: absolute; left: 0; color: var(--pe-green); font-weight: 800; }
.pe-xlist li::before { content: "✕"; position: absolute; left: 0; color: #C0705E; font-weight: 800; }

/* Panel dwukolumnowy „problem / rozwiązanie" */
.pe-panel { border: 1px solid var(--pe-line); border-radius: 14px; padding: 1.5rem; background: var(--pe-bg); }
.pe-panel--accent { border-color: rgba(23,51,30,0.25); background: #F1F7EC; }
.pe-panel__h { margin: 0 0 0.9rem; font-size: 1.05rem; }

/* Kroki „jak wygląda nauka" */
.pe-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 52em) { .pe-steps { grid-template-columns: 1fr; } }
.pe-step { position: relative; border: 1px solid var(--pe-line); border-radius: 14px; padding: 1.5rem; background: var(--pe-bg); }
.pe-step__num { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pe-green); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; margin-bottom: 0.75rem; }
.pe-step__title { margin: 0; font-size: 1rem; }

/* Zakresy tematów (Ćwiczenia „co będziesz umiał") */
.pe-scope { border: 1px solid var(--pe-line); border-radius: 14px; padding: 1.5rem; background: var(--pe-bg); }
.pe-scope__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.9rem; }
.pe-scope__title { margin: 0; font-size: 1.1rem; }
.pe-scope__count { font-weight: 700; color: var(--pe-green); font-size: 0.9rem; white-space: nowrap; }
.pe-scope__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.pe-scope__tags li { font-size: 0.78rem; color: #3B4A40; background: var(--pe-bg-alt); border: 1px solid var(--pe-line); border-radius: 6px; padding: 0.25em 0.6em; }

/* Box gwarancji */
.pe-guarantee { text-align: center; max-width: 44rem; margin-inline: auto; border: 1px solid var(--pe-line); border-radius: 16px; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--pe-bg); }
.pe-guarantee__icon { width: 3.25rem; height: 3.25rem; color: var(--pe-green); margin: 0 auto 0.75rem; }
.pe-guarantee__icon .pe-icon, .pe-guarantee__icon svg { width: 100%; height: 100%; }
.pe-guarantee h2 { margin: 0 0 0.6rem; }
.pe-guarantee p { color: var(--pe-text-soft); margin: 0; }

/* Tabela porównawcza (Kalkulator) */
.pe-compare { width: 100%; }
.pe-compare__scroll { overflow-x: auto; }
.pe-compare table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.pe-compare th, .pe-compare td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--pe-line); font-size: 0.9rem; }
.pe-compare thead th { background: var(--pe-green); color: #fff; font-size: 0.85rem; }
.pe-compare thead th:first-child { border-top-left-radius: 10px; }
.pe-compare thead th:last-child { border-top-right-radius: 10px; }
.pe-compare td.pe-compare__col, .pe-compare th.pe-compare__col { text-align: center; width: 8.5rem; }
.pe-compare tbody tr:nth-child(even) { background: var(--pe-bg-alt); }
.pe-compare .pe-yes { color: var(--pe-green); font-weight: 800; }
.pe-compare .pe-no { color: #C0705E; font-weight: 800; }
.pe-compare .pe-pro { display: inline-block; margin-left: 0.3em; font-size: 0.68rem; font-weight: 700; color: #fff; background: var(--pe-green); border-radius: 999px; padding: 0.05em 0.5em; vertical-align: middle; }

/* Cechy hero (Kalkulator) — inline pod tytułem */
.pe-hero__features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.5rem; }
.pe-hero__features li { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.85rem; color: #E4EEE2; }
.pe-hero__features .pe-icon { color: var(--pe-lime-bright); }

/* Dwa przyciski cenowe (Kalkulator hero + CTA) */
.pe-pricebtns { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* =====================================================================
   POPRAWKI v10 — dwustopniowy wybór (Ćwiczenia) + landing header
   ===================================================================== */

/* Zakładki poziomu */
.pe-levelpicker__tabs {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
	margin: 0 0 2.25rem;
}
.pe-leveltab {
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.8em 1.4em; border-radius: 12px; cursor: pointer;
	border: 1px solid var(--pe-line); background: var(--pe-bg); color: var(--pe-text);
	font: inherit; font-weight: 700; font-size: 0.95rem;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pe-leveltab .pe-icon { color: var(--pe-muted); transition: color 0.15s ease; }
.pe-leveltab:hover { border-color: #CBD8C6; }
.pe-leveltab.is-active {
	background: var(--pe-green); color: #fff; border-color: var(--pe-green);
	box-shadow: 0 6px 16px rgba(23, 51, 30, 0.22);
}
.pe-leveltab.is-active .pe-icon { color: #fff; }
.pe-leveltab:focus-visible { outline: 2px solid var(--pe-green); outline-offset: 2px; }

/* Panel wariantów */
.pe-levelpanel[hidden] { display: none; }

/* Lista cech wariantu (✓ / ✗) */
.pe-varfeatures { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.pe-varfeatures li { padding-left: 1.8rem; position: relative; font-size: 0.9rem; }
.pe-varfeatures li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.pe-varfeatures li.is-yes::before { content: "✓"; color: var(--pe-green); }
.pe-varfeatures li.is-no::before { content: "✕"; color: #C0705E; }
.pe-varfeatures li.is-no { color: var(--pe-muted); }
.pe-package--dark .pe-varfeatures li.is-yes::before { color: var(--pe-lime-bright); }
.pe-package--dark .pe-varfeatures li.is-no { color: #9FB39D; }
.pe-package--dark .pe-varfeatures li { color: #E4EEE2; }
.pe-varfeatures strong { font-weight: 700; }

/* Etykieta kategorii na karcie poradnika */
.pe-article__cat {
	align-self: flex-start;
	display: inline-block; margin-bottom: 0.15rem;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--pe-green); text-decoration: none;
	background: #E4EFE7; border-radius: 999px; padding: 0.25em 0.7em;
}
.pe-article__cat:hover { background: var(--pe-green); color: #fff; }

/* ---- Zakładki kategorii (np. strona Poradniki) ---- */
.pe-cat-tabs { margin: 1.75rem auto 0; }
.pe-cat-tabs__list {
	list-style: none; margin: 0; padding: 0 0 1.25rem;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
	border-bottom: 1px solid var(--pe-line);
}
.pe-cat-tabs__list a {
	display: inline-block; padding: 0.45em 1em; border-radius: 999px;
	background: var(--pe-bg-alt); color: var(--pe-text); text-decoration: none; font-weight: 600; font-size: 0.88rem;
}
.pe-cat-tabs__list a:hover { background: var(--pe-green); color: var(--pe-white); }

/* Pasek: zakładki + wyszukiwarka (strona Poradniki) */
.pe-poradniki-bar { margin-top: 1.75rem; }
.pe-poradniki-bar .pe-cat-tabs { margin-top: 0; }
.pe-search {
	 align-items: center;  position: relative;
	max-width: 34rem; margin: 1.25rem auto 0;
}
.pe-search__icon { position: absolute; left: 0.85rem; color: var(--pe-muted); width: 1.1rem; height: 1.1rem; pointer-events: none; }
.pe-search input[type="search"] {
	flex: 1; min-width: 0; padding: 0.7em 0.9em 0.7em 2.4rem;
	border: 1px solid var(--pe-line); border-radius: 999px; font: inherit; background: var(--pe-bg);
}
.pe-search input[type="search"]:focus-visible { outline: 2px solid var(--pe-green); outline-offset: 1px; border-color: var(--pe-green); }
.pe-search .pe-btn { padding: 0.7em 1.2em; border-radius: 999px; flex: none; }
.pe-search-info { color: var(--pe-text-soft); font-size: 0.92rem; margin: 0 0 1.5rem; }
.pe-search-info a { font-weight: 700; }

/* ---- Paginacja (the_posts_pagination / paginate_links) ---- */
.pagination, .page-numbers {
	list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center;
	margin: 2rem 0 0; padding: 0;
}
.page-numbers.pagination { display: block; }
.page-numbers li { display: inline-flex; }
a.page-numbers, span.page-numbers, .pe-pagelinks a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem;
	border-radius: var(--pe-radius-sm); border: 1px solid var(--pe-line);
	text-decoration: none; color: var(--pe-text); font-weight: 600; font-size: 0.85rem;
}
a.page-numbers:hover { background: var(--pe-bg-alt); }
span.page-numbers.current { background: var(--pe-green); border-color: var(--pe-green); color: var(--pe-white); }

/* ---- Lista wpisów / karty ---- */
.pe-post-list {
	display: grid; gap: var(--wp--preset--spacing--50, 2.5rem);
}
.pe-card {
	border: 1px solid var(--pe-line); border-radius: var(--pe-radius);
	overflow: hidden; background: var(--pe-bg);
}
.pe-card__media img { display: block; width: 100%; height: auto; }
.pe-card__body { padding: var(--wp--preset--spacing--40, 1.5rem); }
.pe-card__title { font-size: var(--wp--preset--font-size--xl, 1.5rem); margin-bottom: 0.25em; }
.pe-card__title a { color: var(--pe-text); text-decoration: none; }
.pe-card__title a:hover { color: var(--pe-green); }
.pe-card__meta { color: var(--pe-text-soft); font-size: var(--wp--preset--font-size--sm, 0.875rem); margin-bottom: 0.75em; }

/* ---- Wyszukiwarka ---- */
.pe-search { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pe-search__field {
	flex: 1 1 12rem; min-width: 0;
	padding: 0.7em 1em; border: 1px solid var(--pe-line);
	border-radius: 8px; font: inherit; background: var(--pe-bg); color: var(--pe-text);
}
.pe-search__field:focus-visible { outline: 2px solid var(--pe-green); outline-offset: 1px; }

/* ---- Paginacja ---- */
.pagination, .navigation.pagination { margin-top: var(--wp--preset--spacing--50, 2.5rem); }
.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination a, .pagination .current {
	display: inline-flex; padding: 0.5em 0.9em; border-radius: 6px;
	border: 1px solid var(--pe-line); text-decoration: none; color: var(--pe-text);
}
.pagination .current { background: var(--pe-green); color: var(--pe-white); border-color: var(--pe-green); }

/* ---- Stopka (wielokolumnowa, ciemna) ---- */
.pe-footer { background: var(--pe-forest); color: #B7C7B5; margin-top: var(--wp--preset--spacing--60, 4rem); padding-top: var(--wp--preset--spacing--50, 2.5rem); }
.pe-footer__grid {
	display: grid; grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--50, 2.5rem);
	padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
}
.pe-footer__brandcol { max-width: 26rem; }
.pe-footer__brand { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.25rem; color: #fff; margin: 0 0 0.5rem; }
.pe-footer__tag { font-size: 0.85rem; margin: 0 0 0.75rem; color: #98AC97; }
.pe-footer__mail { color: var(--pe-lime-bright); text-decoration: none; font-size: 0.88rem; }
.pe-footer__h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8AA388; margin: 0 0 0.75rem; font-weight: 700; }
.pe-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pe-footer__list a { color: #C9D6C7; text-decoration: none; font-size: 0.88rem; }
.pe-footer__list a:hover { color: #fff; text-decoration: underline; }
.pe-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 1rem; }
.pe-footer__copy { margin: 0; color: #8AA388; font-size: 0.82rem; }

@media (max-width: 64em) { .pe-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .pe-footer__brandcol { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 40em) { .pe-footer__grid { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   STRONA GŁÓWNA (front-page.php)
   ===================================================================== */

/* Wspólne elementy sekcji */
.pe-section { padding-block: var(--wp--preset--spacing--60, 4rem); }

.pe-section__title { font-size: var(--wp--preset--font-size--2xl, 2rem); margin: 0; }

.pe-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--pe-green); margin: 0;
}

/* Siatka kart */
.pe-grid { display: grid; gap: var(--wp--preset--spacing--40, 1.5rem); }
.pe-grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pe-card__excerpt { color: var(--pe-text-soft); margin: 0; }

/* ---- Hero ---- */
.pe-hero { padding-block: clamp(3rem, 8vw, 6rem); background: var(--pe-bg); }
.pe-hero__content { max-width: 42rem; }
.pe-hero__title {
	font-size: var(--wp--preset--font-size--hero, 3.5rem);
	font-weight: 800; line-height: 1.05; margin: 0;
}
.pe-hero__lead {
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	color: var(--pe-text-soft); max-width: 34em; margin: 0;
}
.pe-hero__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30, 1rem); }

/* ---- CTA (ciemna zieleń; kratę daje wspólna reguła .pe-section--dark) ---- */
.pe-cta { position: relative; overflow: hidden; text-align: center; }
.pe-cta__inner { position: relative; max-width: 40rem; margin-inline: auto; align-items: center; }
.pe-cta__title { font-size: var(--wp--preset--font-size--2xl, 2rem); margin: 0; color: var(--pe-white); }
.pe-btn--on-dark { background: var(--pe-lime); color: #0C3018; }
.pe-btn--on-dark:hover { background: var(--pe-white); color: var(--pe-forest); }

/* =====================================================================
   STRONA GŁÓWNA — pełny układ (13 sekcji wg zatwierdzonego szablonu)
   ===================================================================== */
:root {
	--pe-forest-2:   var(--wp--preset--color--forest-2);   /* #0F2415 */
	--pe-lime-bright:var(--wp--preset--color--lime-bright); /* #8FD65A */
	--pe-strike:     var(--wp--preset--color--strike);      /* #9AA69C */
}

.pe-section--tight { padding-top: 0.5rem; }
.pe-section--paper { background: var(--pe-bg-alt); }
.pe-center { text-align: center; }
.pe-lead { color: var(--pe-text-soft); }

.pe-title--light { color: var(--pe-white); }
.pe-grid--4 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

.pe-accent-lime { color: var(--pe-lime-bright); }

.pe-eyebrow--light, .pe-eyebrow--brand {
	display: inline-block; font-weight: 700; font-size: 0.8rem;
	padding: 0.35em 0.9em; border-radius: 999px; text-transform: none; letter-spacing: 0;
	font-family: var(--wp--preset--font-family--body);
}
.pe-eyebrow--light { background: rgba(109, 190, 69, 0.16); color: var(--pe-lime-bright); }
.pe-eyebrow--brand { background: rgba(16, 124, 65, 0.13); color: var(--pe-green); }

/* ---- 1. Hero ciemny ---- */
.pe-hero--dark { background: var(--pe-forest); color: var(--pe-white);   padding-block: clamp(2.5rem, 6vw, 3.5rem); }

.pe-hero__grid { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.5rem, 4vw, 2.25rem); align-items: center; }
.pe-hero--dark .pe-hero__title { color: var(--pe-white); font-size: clamp(2rem, 4.5vw, 2.65rem); font-weight: 800; }
.pe-hero--dark .pe-hero__lead { color: #E4EEE2; }
.pe-hero__note { font-size: 0.82rem; color: #B7C7B5; }
.pe-hero__media { margin: 0; text-align: center; }
.pe-hero__caption { margin-top: 0.75rem; font-size: 0.82rem; color: #B7C7B5; }

/* ---- 2. Pasek zaufania ---- */
.pe-trust { background: var(--pe-bg-alt); border-block: 1px solid var(--pe-line); }
.pe-trust__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem 1.75rem; padding-block: 0.9rem; font-weight: 600; color: #3B4A40; font-size: 0.9rem; }

/* Ikony paska zaufania na ciemnym hero — jasne, żeby były widoczne */
.pe-hero--dark .pe-trust__item .pe-icon { color: var(--pe-lime-bright); }

.pe-section--dark .pe-section__lead, .pe-hero--dark .pe-section__lead { color: #E4EEE2; }

/* ---- 3. Karty kursów ---- */
.pe-course {
	position: relative;  

}

.pe-course__badge {
	position: absolute; top: -0.7rem; left: 1.25rem;

}

/* Ceny */
.pe-price { font-weight: 700; color: var(--pe-green); font-size: 1.2rem; }
.pe-price del, .pe-price__old { color: var(--pe-strike); text-decoration: line-through; font-weight: 400; font-size: 0.9rem; margin-right: 0.3rem; }

.pe-package h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }

.pe-package--dark h3 { color: var(--pe-white); }

/* ---- 5. Opinie ---- */
.pe-review { background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 12px; padding: 1.15rem; margin: 0; font-size: 0.9rem; }
.pe-review__stars { color: #E9B84A; margin-bottom: 0.5rem; }
.pe-review__quote { margin: 0 0 0.75rem; padding: 0; border: 0; color: #333; }
/* Autor po lewej, data publikacji opinii po prawej — jak w kartach na stronach kursów. */
.pe-review__author {
	font-weight: 700;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}
.pe-review__date {
	flex: 0 0 auto;
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--pe-muted, #5C6B5A);
	white-space: nowrap;
}

/* ---- 6/10. Artykuły (poradniki) ---- */
.pe-article { border: 1px solid var(--pe-line); border-radius: 12px; overflow: hidden; background: var(--pe-bg); display: flex; flex-direction: column; }
.pe-article__media { display: block; }
.pe-article__media img { display: block; width: 100%;   }
.pe-article__ph { display: block; height: 90px; background: #EAF3DE; }

.pe-article__title { font-size: 0.98rem; margin: 0; }
.pe-article__title a { color: var(--pe-text); text-decoration: none; }
.pe-article__title a:hover { color: var(--pe-green); }

/* ---- 7. Ćwiczenia (ciemna sekcja + checklista) ---- */
.pe-split { display: grid; gap: clamp(1.5rem, 4vw, 2rem); align-items: center; }
.pe-split--wide { grid-template-columns: 1.3fr 1fr; }

.pe-exercises__lead { color: #D7E3D5; }
.pe-big-num { color: var(--pe-lime-bright); font-size: 1.4rem; font-weight: 800; }
.pe-checklist { list-style: none; margin: 0; padding: 1.15rem; display: grid; gap: 0.5rem; background: var(--pe-forest-2); border: 1px solid #2A4A32; border-radius: 10px; font-size: 0.88rem; color: #B7C7B5; }
.pe-checklist li::before { content: "✓ "; color: var(--pe-lime-bright); font-weight: 700; }

/* ---- Cechy (siatka ikona + tekst, np. strona Ćwiczeń) ---- */
.pe-feature { display: flex; gap: 0.85rem; align-items: flex-start; }
.pe-feature__icon { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--pe-bg-alt); border-radius: 999px; color: var(--pe-green); }
.pe-feature__icon .pe-icon { width: 1.3rem; height: 1.3rem; }
.pe-feature__title { font-weight: 700; margin: 0 0 0.15em; }
.pe-feature__desc { color: var(--pe-text-soft); font-size: 0.88rem; margin: 0; }

/* ---- 8. Zasięg w sieci ---- */
.pe-social { border-block: 1px solid var(--pe-line); }
.pe-social__label { text-align: center; font-weight: 700; letter-spacing: 0.06em; color: var(--pe-text-soft); font-size: 0.8rem; margin: 0 0 1.5rem; }
.pe-social__grid {  margin-inline: auto; text-align: center; }
.pe-social__num { font-size: 1.6rem; font-weight: 700; color: var(--pe-green); font-variant-numeric: tabular-nums; }
.pe-social__cap { font-size: 0.82rem; color: var(--pe-text-soft); }

/* ---- 9. O autorze ---- */
.pe-author__aside { text-align: center; }
.pe-author__name { margin: 0; font-size: 1rem; }
.pe-author__name span { color: var(--pe-text-soft); font-size: 0.85rem; }

/* ---- Strona Kontakt ---- */
.pe-contact-list, .pe-contact-social {
	list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem;
}
.pe-contact-list a, .pe-contact-social a {
	display: inline-flex; align-items: center; gap: 0.5em; color: var(--pe-text); font-weight: 600; text-decoration: none;
}
.pe-contact-list a:hover, .pe-contact-social a:hover { color: var(--pe-green); }
.pe-contact-list .pe-icon, .pe-contact-social .pe-icon { color: var(--pe-green); width: 1.15rem; height: 1.15rem; }
.pe-contact-form-slot { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--pe-line); }

/* ---- 11. FAQ (natywny <details>) ---- */
.pe-faq { max-width: 40rem; margin-inline: auto; display: grid; gap: 0.6rem; }
.pe-faq__item { background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 10px; }
.pe-faq__item summary {
	list-style: none; cursor: pointer; padding: 0.85rem 1.1rem;
	font-weight: 600; font-size: 0.92rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.pe-faq__item summary::-webkit-details-marker { display: none; }
.pe-faq__item summary::after { content: "+"; color: var(--pe-green); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.pe-faq__item[open] summary::after { content: "–"; }
.pe-faq__answer { padding: 0 1.1rem 1rem; color: var(--pe-text-soft); font-size: 0.9rem; }

@media (max-width: 52em) {
	.pe-hero__grid, .pe-split--wide, .pe-split--author { grid-template-columns: 1fr; }
	.pe-split--author .pe-author__aside { text-align: center; }
}

/* Mini-opinia w hero */
.pe-hero__quote { margin: 1.25rem 0 0; padding-left: 0.9rem;  }
.pe-hero__quote .pe-review__stars { font-size: 0.85rem;  }
.pe-hero__quote blockquote { margin: 0.2rem 0; padding: 0; border: 0; font-size: 0.92rem;  }
.pe-hero__quote figcaption { font-size: 0.78rem;  }

.pe-package .pe-price { margin-bottom: 1rem; }

.pe-package__flag {     margin-bottom: 0.4rem; }

/* Responsywność — dodatkowe punkty */
@media (max-width: 40em) {
	.pe-hero--dark .pe-hero__title { font-size: clamp(1.7rem, 7vw, 2.1rem); }
	.pe-reviews__track .pe-review { flex: 0 0 84%; }
	.pe-trust__row { gap: 0.5rem 1rem; font-size: 0.82rem; }
	.pe-course__foot { flex-direction: column; align-items: stretch; }
	.pe-course__cta, .pe-package__cta { align-self: stretch; text-align: center; }
}

/* =====================================================================
   ZNAK MARKI: krata na WSZYSTKICH ciemnych tłach
   (efekt z shortsów Piotra — spójny w całym motywie)
   ===================================================================== */
.pe-hero--dark,
.pe-section--dark,
.pe-package--dark,
.pe-footer { position: relative; overflow: hidden; }

.pe-hero--dark::before,
.pe-section--dark::before,
.pe-package--dark::before,
.pe-footer::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 40px 40px;
}

/* Treść zawsze nad kratą */
.pe-hero--dark > .pe-container,
.pe-section--dark > .pe-container,
.pe-footer > .pe-container { position: relative; z-index: 1; }
.pe-package--dark > * { position: relative; z-index: 1; }

/* =====================================================================
   POPRAWKI v2 (uwagi Piotra ze screenów)
   ===================================================================== */

/* Jednolita szerokość wszystkich sekcji (pkt 4) */
.pe-container--narrow-wide { max-width: var(--pe-wide); }

/* Większe przerwy pod tytułami (pkt 9) */
.pe-section__title { margin-bottom: 1.6rem; }
.pe-section__intro .pe-section__title { margin-bottom: 0.35rem; }
.pe-section__intro { margin-bottom: 2rem; }

/* Odstępy w hero + notka pod przyciskiem (pkt 1) */
.pe-hero__content > * + * { margin-top: 1.1rem; }
.pe-hero__note { margin: 0.6rem 0 0; }
.pe-hero__quote { margin-top: 1.5rem; }

/* Pigułki kategorii - rodzina zieleni (jedna paleta) */
.pe-pill { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 999px; }
.pe-pill--excel { background: #E4EFE7; color: var(--pe-green); }
.pe-pill--pq    { background: #EAF4E1; color: #4E8B2E; }
.pe-pill--pp    { background: #E1EAE3; color: var(--pe-forest); }

/* Równe karty */
.pe-cards-equal { align-items: stretch; }

/* Karta kursu (bogata, jak na poczujexcel) */
.pe-course {
	display: flex; flex-direction: column; height: 100%; gap: 0.7rem;
	border: 1px solid var(--pe-line); border-radius: 14px; padding: 1.5rem; background: var(--pe-bg);
}
.pe-course--featured { border: 2px solid var(--pe-green); }
.pe-course__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.pe-course__badge { background: var(--pe-green); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 999px; white-space: nowrap; }
.pe-course__title { font-size: 1.2rem; margin: 0; }
.pe-course__title a { color: var(--pe-text); text-decoration: none; }
.pe-course__title a:hover { color: var(--pe-green); }
.pe-course__desc { color: var(--pe-text-soft); font-size: 0.9rem; margin: 0; }

.pe-metapills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pe-metapills li { font-size: 0.74rem; color: #3B4A40; border: 1px solid var(--pe-line); border-radius: 6px; padding: 0.2em 0.55em; background: var(--pe-bg-alt); }

.pe-features { list-style: none; margin: 0.25rem 0; padding: 0; display: grid; gap: 0.4rem; }
.pe-features li { font-size: 0.85rem; padding-left: 1.4rem; position: relative; }
.pe-features li::before { content: "✓"; position: absolute; left: 0; color: var(--pe-green); font-weight: 700; }
.pe-package--dark .pe-features li { color: #E4EEE2; }
.pe-package--dark .pe-features li::before { color: var(--pe-lime-bright); }

.pe-course__foot, .pe-package__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--pe-line); display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }

/* Cena dwuliniowa „Teraz X zł" */
.pe-price { display: flex; flex-direction: column; line-height: 1.25; }
.pe-price__old { color: var(--pe-strike); text-decoration: line-through;  font-weight: 400; }
.pe-price__now { color: var(--pe-green); font-weight: 700; font-size: 1.05rem; }
.pe-price__old--light { color: #8FA98D; }
.pe-price__now--light { color: var(--pe-lime-bright); }

/* Karta pakietu */
.pe-package {
	display: flex; flex-direction: column; height: 100%; gap: 0.55rem;
	border: 1px solid var(--pe-line); border-radius: 14px; padding: 1.5rem; background: var(--pe-bg);
}
.pe-package__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pe-package__flag {   background: var(--pe-green); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.25em 0.7em; border-radius: 999px; }
.pe-package__title { font-size: 1.2rem; margin: 0.15rem 0 0; }
.pe-package__sub { color: var(--pe-text-soft); font-size: 0.85rem; margin: 0; }
.pe-package__desc { font-style: italic; color: var(--pe-text-soft); font-size: 0.85rem; margin: 0; }
.pe-package__bonus { color: var(--pe-green); font-size: 0.82rem; margin: 0; }
.pe-package__bonus--light { color: var(--pe-lime-bright); }
.pe-package--dark { color: #fff; border-color: var(--pe-forest); background: var(--pe-forest); }
.pe-package--dark .pe-package__title { color: #fff; }
.pe-package--dark .pe-package__sub, .pe-package--dark .pe-package__desc { color: #C9D6C7; }
.pe-package--dark .pe-package__foot { border-top-color: rgba(255, 255, 255, 0.15); }

/*
 * Opinie — siatka kart (jak na stronach kursów). Wcześniej była karuzela
 * z przeskokiem sterowana JS-em: kolejne opinie wymagały przewijania, więc
 * większość ich nie widziała. Siatka pokazuje wszystkie naraz i nie potrzebuje
 * skryptu (kod karuzeli usunięty z assets/js/main.js).
 */
.pe-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 0.5rem;
	align-items: start;
}
.pe-reviews__grid .pe-review { height: 100%; }

@media (max-width: 900px) {
	.pe-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.pe-reviews__grid { grid-template-columns: 1fr; }
}

/* Poradniki — krótki opis + mniejsze „Czytaj dalej" */
.pe-article__excerpt { color: var(--pe-text-soft); font-size: 0.85rem; margin: 0; }
.pe-article__more { font-size: 0.8rem; font-weight: 700; color: var(--pe-green); text-decoration: none; }
.pe-article__more:hover { text-decoration: underline; }

/* O autorze — lepszy wizual */
.pe-split--author { grid-template-columns: 15rem 1fr; gap: 2.5rem;  }
.pe-author .pe-section__title { margin-bottom: 1rem; }
.pe-author p { max-width: 44em; }
.pe-author__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.4rem; }
.pe-author__aside {  top: 2rem; }

@media (max-width: 52em) {
	.pe-split--author { grid-template-columns: 1fr; }
	.pe-author__aside { position: static; }

}

/* Poradniki - "Czytaj dalej" na dole po prawej, równa wysokość (pkt 9) */
.pe-article { height: 100%; }
.pe-article__body { display: flex; flex-direction: column; height: 100%; padding: 1.15rem; gap: 0.5rem; }
.pe-article__more { margin-top: auto; align-self: flex-end; }

/* Zasięg - zawsze 3 kolumny (pkt 11) */
.pe-social__grid { grid-template-columns: repeat(3, 1fr); max-width: 42rem; }
@media (max-width: 34em) { .pe-social__grid { grid-template-columns: 1fr; } }

/* O autorze - przyciski w rzędzie (pkt 12) */
.pe-author__actions .pe-btn { white-space: nowrap; }

/* =====================================================================
   POPRAWKI v4 (screeny Piotra)
   ===================================================================== */

/* Ikony SVG - monochromatyczne, w kolorze motywu (pkt 2) */
.pe-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -0.16em; color: var(--pe-green); }
.pe-trust__item, .pe-metapills li, .pe-social__cap { display: inline-flex; align-items: center; gap: 0.4em; }
.pe-package__bonus { display: flex; align-items: center; gap: 0.45em; }
.pe-package__bonus .pe-icon { width: 1.4em; height: 1.4em; vertical-align: middle; }
.pe-btn .pe-icon, .pe-link-strong .pe-icon,
.pe-btn .pe-icon, .pe-course__badge .pe-icon, .pe-package__flag .pe-icon{ color: currentColor; }
.pe-social__cap { justify-content: center; }

/* Hero - opinia na lekkim zielonawym tle (pkt 1) */
.pe-hero__quote {
	background: rgba(124, 201, 78, 0.12);
	color: #EAF4E4;
	border-left: 3px solid var(--pe-lime);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	box-shadow: none;
	max-width: 30rem;
}
.pe-hero__quote blockquote { color: #EAF4E4; font-style: italic; }
.pe-hero__quote figcaption { color: #B7C7B5; }
.pe-hero__quote .pe-review__stars { color: #E9B84A; }

/* Delikatnie większe stare przekreślone ceny (pkt 3) */
.pe-price__old { font-size: 0.98rem; }

/* Odznaka na ciemnym pakiecie - limonka (kontrast) */
.pe-package--dark .pe-package__flag { background: var(--pe-lime); color: var(--pe-forest); }

/* O autorze - zdjęcie wyśrodkowane w pionie (pkt 7) */
.pe-split--author { align-items: center; }
.pe-author__aside { position: static; }

/* Link "wszystkie kursy i pakiety" jako przycisk, niżej */
.pe-allcourses { margin-top: 2.75rem; }
.pe-btn--lg { padding: 0.95em 1.7em; font-size: 1rem; }

/* =====================================================================
   POPRAWKI v5 — estetyka podstron (menu + strony statyczne)
   ===================================================================== */

/* ---- Hero podstrony: wyśrodkowany, jedna kolumna (bez pustej połowy) ---- */
.pe-hero--page { padding-block: clamp(3rem, 7vw, 4.75rem); }
.pe-hero--page .pe-hero__grid { display: block; }
.pe-hero--page .pe-hero__content {
	max-width: 46rem; margin-inline: auto; text-align: center;
}
.pe-hero--page .pe-hero__content > * + * { margin-top: 1.1rem; }
.pe-hero--page .pe-hero__kicker { margin-inline: auto; }
.pe-hero--page .pe-hero__actions { justify-content: center; }
.pe-hero--page .pe-hero__lead { margin-inline: auto; }
/* Delikatna poświata pod hero podstrony (głębia bez grafiki) */
.pe-hero--page::after {
	content: ""; position: absolute; left: 50%; top: 40%; z-index: 0;
	width: min(46rem, 80%); height: 22rem; transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(124, 201, 78, 0.16), transparent 70%);
	pointer-events: none;
}

/* Pasek zaufania w hero podstrony (wyśrodkowany, pod treścią) */
/* Pasek zaufania w hero podstrony (wyśrodkowany{ max-width: 60rem; margin-inline: auto; }

/* ---- Hover-lift na kartach (żywość, nowoczesność) ---- */
.pe-course, .pe-package, .pe-article {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pe-course:hover,
.pe-package:not(.pe-package--dark):hover,
.pe-article:hover {
	transform: translateY(-4px);
	box-shadow: var(--pe-shadow);
	border-color: #CBD8C6;
}
.pe-package--dark:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.pe-course--featured:hover { border-color: var(--pe-green); }
.pe-article__media img { transition: transform 0.35s ease; }
.pe-article:hover .pe-article__media img { transform: scale(1.04); }

/* ---- Nagłówek sekcji: opcjonalny akcent nad tytułem wyśrodkowanym ---- */
.pe-section__title.pe-center::after {
	content: ""; display: block; width: 3rem; height: 3px; border-radius: 3px;
	background: var(--pe-lime); margin: 0.7rem auto 0;
}
.pe-title--light.pe-center::after { background: var(--pe-lime-bright); }

/* ---- Karty cech jako panele (Ćwiczenia / Kalkulator) ---- */
.pe-feature {
	background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 12px;
	padding: 1.15rem 1.25rem; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pe-feature:hover { border-color: #CBD8C6; box-shadow: var(--pe-shadow); }
.pe-section--paper .pe-feature { background: var(--pe-white); }

/* ---- FAQ: subtelny hover ---- */
.pe-faq__item { transition: border-color 0.15s ease; }
.pe-faq__item:hover { border-color: #CBD8C6; }
.pe-faq__item[open] { border-color: var(--pe-green); }

/* ---- Ćwiczenia/kalkulator: przycisk pełnej szerokości w karcie ---- */
.pe-package .pe-btn--block { width: 100%; justify-content: center; margin-top: 0.75rem; }

/* =====================================================================
   POPRAWKI v7 — strona Kursy 1:1 z układem live
   ===================================================================== */

/* ---- Statystyki w hero (duże liczby + podpis, bez ikon/linii) ---- */
.pe-herostats {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0; text-align: center;
}
.pe-herostats__item { min-width: 6rem; }
.pe-herostats dt {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1;
	color: var(--pe-lime-bright); letter-spacing: -0.01em;
}
.pe-herostats__star { color: var(--pe-lime-bright); font-size: 0.9em; margin-left: 0.05em; }
.pe-herostats dd { margin: 0.4rem 0 0; font-size: 0.82rem; color: #C9D6C7; }

/* ---- Cena pozioma: teraz (duża) + stara (przekreślona) + oszczędzasz ---- */
.pe-price--row { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.pe-price--row .pe-price__now { font-size: 1.6rem; font-weight: 800; }
.pe-price--row .pe-price__old { font-size: 1rem; }
.pe-price__save { font-size: 0.8rem; font-weight: 600; color: var(--pe-green); width: 100%; }
.pe-package--dark .pe-price__save { color: var(--pe-lime-bright); }

/* ---- Pakiet: lista „Zawiera X kursów" ---- */
.pe-package__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pe-muted); margin: 0.4rem 0 0.5rem; }
.pe-package--dark .pe-package__label { color: #A9BCA7; }
.pe-package__includes { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.4rem; }
.pe-package__includes li { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; font-size: 0.86rem; padding-left: 1.4rem; position: relative; }
.pe-package__includes li::before { content: "✓"; position: absolute; left: 0; color: var(--pe-green); font-weight: 700; }
.pe-package--dark .pe-package__includes li { color: #E4EEE2; }
.pe-package--dark .pe-package__includes li::before { color: var(--pe-lime-bright); }
.pe-package__inc-meta { flex: none; color: var(--pe-muted); font-size: 0.78rem; white-space: nowrap; }
.pe-package--dark .pe-package__inc-meta { color: #A9BCA7; }

/* ---- Pakiet: box bonusów ---- */
.pe-package__bonusbox {
	background: #EDF6E6; border: 1px solid #D6E8C9; border-radius: 10px;
	padding: 0.85rem 1rem; margin: 0 0 1rem;
}
.pe-package--dark .pe-package__bonusbox { background: rgba(124,201,78,0.10); border-color: rgba(124,201,78,0.28); }
.pe-package__bonus-head { display: flex; align-items: center; gap: 0.4em; margin: 0 0 0.5rem; font-weight: 700; font-size: 0.8rem; color: var(--pe-green); }
.pe-package--dark .pe-package__bonus-head { color: var(--pe-lime-bright); }
.pe-package__bonus-head .pe-icon { color: currentColor; width: 1.2em; height: 1.2em; }
.pe-package__bonusbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pe-package__bonusbox li { font-size: 0.82rem; padding-left: 1.2rem; position: relative; }
.pe-package__bonusbox li::before { content: "✓"; position: absolute; left: 0; color: var(--pe-green); font-weight: 700; }
.pe-package--dark .pe-package__bonusbox li { color: #E4EEE2; }
.pe-package--dark .pe-package__bonusbox li::before { color: var(--pe-lime-bright); }
.pe-package__bonus-val { color: var(--pe-muted); }
.pe-package--dark .pe-package__bonus-val { color: #A9BCA7; }

/* ---- Karta kursu: przycisk pełnej szerokości pod ceną ---- */
.pe-course--stack .pe-course__foot { flex-direction: column; align-items: stretch; gap: 0.85rem; }
.pe-course--stack .pe-btn--block { width: 100%; justify-content: center; margin: 0; }
/* Bonusy gratis na karcie kursu — lista z pe_bonus_map() (inc/woocommerce.php) */
.pe-course__bonus {
	margin-top: 0.9rem; padding: 0.7rem 0.85rem;
	background: var(--pe-bg-alt); border-left: 3px solid var(--pe-lime, #7CC94E);
	border-radius: var(--pe-radius-sm);
}
.pe-course__bonus-head {
	display: inline-flex; align-items: center; gap: 0.35em;
	font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--pe-green);
}
.pe-course__bonus-list { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.pe-course__bonus-list li {
	display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
	font-size: 0.86rem; line-height: 1.35;
}
.pe-course__bonus-value { color: var(--pe-muted); white-space: nowrap; flex: none; }

.pe-course__badge--inline { position: static; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35em; }
.pe-course__top:empty { display: none; }

/* Meta kursu w siatce 2-kolumnowej (jak na live) */
.pe-metagrid { list-style: none; margin: 0.25rem 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.9rem; }
.pe-metagrid li { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8rem; color: #3B4A40; }
.pe-metagrid .pe-icon { color: var(--pe-green); }

/* ---- Dzielnik kategorii (EXCEL / POWER QUERY / POWER PIVOT) ---- */
.pe-catrow { display: flex; align-items: center; gap: 1rem; margin: 2.25rem 0 1.25rem; }
.pe-catrow:first-of-type { margin-top: 0.5rem; }
.pe-catrow::after { content: ""; height: 2px; flex: 1; border-radius: 2px; background: var(--pe-line); }
.pe-catrow__label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-green); }
.pe-catrow--pq .pe-catrow__label { color: #4E8B2E; }
.pe-catrow--pp .pe-catrow__label { color: var(--pe-forest); }
.pe-catrow--pq::after { background: #DCEBCF; }
.pe-catrow--pp::after { background: #D3E0D5; }
.pe-coursegroup { margin-bottom: 0.5rem; }

/* ---- Zapowiedź: pełnoszerokościowy ciemny box ---- */
.pe-announce--dark {
	position: relative; overflow: hidden;
	background: var(--pe-forest); color: #fff; border-radius: 18px;
	padding: clamp(1.75rem, 4vw, 2.75rem);
}
.pe-announce--dark::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 40px 40px;
}
.pe-announce--dark > * { position: relative; z-index: 1; }
.pe-announce__pill {
	display: inline-flex; align-items: center; gap: 0.45em;
	background: rgba(233,184,74,0.16); color: #F1C766;
	font-weight: 700; font-size: 0.76rem; letter-spacing: 0.03em; text-transform: uppercase;
	padding: 0.4em 0.9em; border-radius: 999px;
}
.pe-announce__pill .pe-icon { color: currentColor; }
.pe-announce__title { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0.9rem 0 0.5rem; }
.pe-announce__desc { color: #D7E3D5; max-width: 44rem; margin: 0 0 1rem; }
.pe-announce__badge { display: inline-flex; align-items: center; gap: 0.45em; background: var(--pe-forest-2); border: 1px solid #2A4A32; border-radius: 8px; padding: 0.4em 0.8em; font-size: 0.82rem; color: #C9D6C7; margin: 0 0 1.1rem; }
.pe-announce__badge .pe-icon { color: var(--pe-lime-bright); }
.pe-announce__topics { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.pe-announce__topics li { position: relative; padding-left: 1.3rem; font-size: 0.88rem; color: #E4EEE2; }
.pe-announce__topics li::before { content: "★"; position: absolute; left: 0; color: #E9B84A; }
.pe-announce__cta-label { font-weight: 700; color: var(--pe-lime-bright); margin: 0 0 0.6rem; font-size: 0.9rem; }
.pe-announce__form { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 34rem; }
.pe-announce__form input {
	flex: 1 1 14rem; min-width: 0; padding: 0.8em 1em; border-radius: 8px;
	border: 1px solid #2A4A32; background: var(--pe-forest-2); color: #fff; font: inherit;
}
.pe-announce__form input::placeholder { color: #8AA388; }
.pe-announce__form input:focus-visible { outline: 2px solid var(--pe-lime); outline-offset: 1px; }
.pe-announce__note { font-size: 0.76rem; color: #98AC97; margin: 0.9rem 0 0; }

/* ---- Zielone CTA końcowe (mid-green, jak na live) ---- */
/* ---- Zielone CTA końcowe (mid-green{ background: var(--pe-green); color: #fff; padding-block: clamp(2.75rem, 6vw, 4rem); text-align: center; }

@media (max-width: 34em) {
	.pe-metagrid { grid-template-columns: 1fr; }
	.pe-herostats { gap: 1.25rem 1.75rem; }
}

/* Siatka stałych 3 kolumn (pakiety + grupy kursów) — pojedyncza karta
   NIE rozciąga się na całą szerokość, tylko zajmuje 1/3. */
.pe-grid--fixed3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60em) { .pe-grid--fixed3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .pe-grid--fixed3 { grid-template-columns: 1fr; } }

/* =====================================================================
   POPRAWKI v8 — plakietka pakietu na krawędzi (top-right)
   ===================================================================== */
.pe-package { position: relative; }
/* Ciemna karta ma overflow:hidden (krata) — pozwól plakietce wyjść poza,
   a kratę utrzymaj w zaokrąglonych rogach przez border-radius na ::before. */
.pe-package.pe-package--dark { overflow: visible; }
.pe-package--dark::before { border-radius: 14px; }

.pe-package__flag {
	position: absolute; top: -0.7rem; right: 1.1rem; z-index: 3;
	margin: 0; align-self: auto;
	display: inline-flex; align-items: center; gap: 0.35em;
	box-shadow: 0 3px 10px rgba(20, 40, 25, 0.22);
	white-space: nowrap;
}

/* =====================================================================
   PORADNIK — pojedynczy wpis (single.php)
   Układ 1:1 z produkcją: szare tło, breadcrumb, byline, biała karta
   treści, boxy produktowe (shortcode), karta autora, powiązane, komentarze.
   ===================================================================== */
:root {
	--pe-green-mid: var(--wp--preset--color--green-mid); /* #107C41 */
	--pe-gold:      #E9B84A;                              /* wyjątek: gwiazdki ocen */
}

/* ---- Szare tło całej strony poradnika ---- */
body.pe-guide { background: var(--pe-bg-alt); }

/* ---- Nagłówek w białej karcie ---- */
.pe-guide__head { margin-top: 1rem; }

/* Breadcrumb */
.pe-crumbs__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
	font-size: 0.82rem; color: var(--pe-text-soft);
}
.pe-crumbs__item a { color: var(--pe-text-soft); text-decoration: none; }
.pe-crumbs__item a:hover { color: var(--pe-green); text-decoration: underline; }
.pe-crumbs__item [aria-current] { color: var(--pe-text); font-weight: 600; }
.pe-crumbs__sep { display: inline-flex; color: var(--pe-line); }
.pe-crumbs__sep .pe-icon { width: 0.9em; height: 0.9em; }

/* Badge kategorii nad tytułem */
.pe-guide__badge { text-decoration: none; }
.pe-guide__title {
	margin: 0.7rem 0 0; font-size: var(--wp--preset--font-size--3xl, 2.75rem);
	color: var(--pe-forest);
}

/* Byline: avatar + imię + data */
.pe-byline { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.1rem; }
.pe-byline__avatar { flex: none; }
.pe-byline__img, .pe-byline__avatar img {
	width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
	border: 2px solid var(--pe-lime); display: block;
}
.pe-byline__meta { display: flex; flex-direction: column; line-height: 1.3; }
.pe-byline__name { font-weight: 700; color: var(--pe-text); font-size: 0.95rem; }
.pe-byline__date {
	display: inline-flex; align-items: center; gap: 0.3rem;
	color: var(--pe-text-soft); font-size: 0.82rem;
}
.pe-byline__ico { width: 0.95em; height: 0.95em; }

/* ---- Biała karta treści ---- */
.pe-guide__card {
	background: var(--pe-bg); border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius); box-shadow: var(--pe-shadow);
	padding: clamp(1.25rem, 4vw, 2.75rem); margin-top: clamp(1.25rem, 3vw, 2.25rem);
}

/* Zajawka przed treścią */
.pe-guide__excerpt { margin: 1.25rem 0 0; }
.pe-guide__excerpt p {
	font-size: 1.1rem; color: var(--pe-text); line-height: 1.7;
	margin: 0 0 1.5rem;
}

/* Tagi pod treścią */
.pe-guide__tags { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--pe-line); font-size: 0.85rem; }
.pe-guide__tags-label { color: var(--pe-text-soft); margin-right: 0.4rem; }
.pe-guide__tags a {
	display: inline-block; margin: 0 0.35rem 0.35rem 0; padding: 0.2em 0.7em;
	background: var(--pe-bg-alt); border: 1px solid var(--pe-line); border-radius: 999px;
	color: var(--pe-green); text-decoration: none; font-weight: 600;
}
.pe-guide__tags a:hover { background: var(--pe-lime); color: var(--pe-forest); }

/* =====================================================================
   TYPOGRAFIA TREŚCI — .pe-entry (proza poradnika)
   ===================================================================== */
.pe-entry { color: var(--pe-text); font-size: var(--wp--preset--font-size--lg, 1.125rem); }
.pe-entry > *:first-child { margin-top: 0; }
.pe-entry h2, .pe-entry h3, .pe-entry h4 { scroll-margin-top: 90px; color: var(--pe-forest); }
.pe-entry h2 {
	font-size: var(--wp--preset--font-size--2xl, 2rem); margin: 2.5rem 0 1rem;
	padding-bottom: 0.4rem; border-bottom: 2px solid var(--pe-line);
}
.pe-entry h2::after {
	content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 3px;
	background: var(--pe-lime); margin-top: 0.5rem; margin-bottom: -0.4rem;
}
.pe-entry h3 { font-size: var(--wp--preset--font-size--xl, 1.5rem); margin: 2rem 0 0.75rem; }
.pe-entry h4 { font-size: 1.2rem; margin: 1.5rem 0 0.6rem; }
.pe-entry p { margin: 0 0 1.15em; }
.pe-entry a { color: var(--pe-green); font-weight: 600; text-underline-offset: 2px; }
.pe-entry a:hover { color: var(--pe-green-deep); }

.pe-entry ul, .pe-entry ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.pe-entry li { margin: 0.35em 0; }
.pe-entry ul { list-style: none; padding-left: 0; }
.pe-entry ul > li { position: relative; padding-left: 1.7em; }
.pe-entry ul > li::before {
	content: ""; position: absolute; left: 0.15em; top: 0.62em;
	width: 0.5em; height: 0.5em; border-radius: 2px; background: var(--pe-lime);
}
.pe-entry ol { list-style: decimal; }
.pe-entry ol ol { list-style: lower-alpha; }
/* Zagnieżdżona lista bez podwójnego markera (spis treści z Elementora) */
.pe-entry ol li[style*="list-style-type: none"] { list-style: none; }

.pe-entry img { max-width: 100%; height: auto; border-radius: var(--pe-radius-sm); display: block; margin-inline: auto; }
.pe-entry figure { margin: 1.75rem 0; text-align: center; }
.pe-entry figcaption, .pe-entry .wp-caption-text {
	font-size: 0.85rem; color: var(--pe-text-soft); text-align: center; margin-top: 0.5rem;
}

.pe-entry blockquote {
	margin: 1.75rem 0; padding: 0.75rem 1.25rem; border-left: 4px solid var(--pe-lime);
	background: var(--pe-bg-alt); border-radius: 0 var(--pe-radius-sm) var(--pe-radius-sm) 0;
	color: var(--pe-ink);
}
.pe-entry blockquote p:last-child { margin-bottom: 0; }

.pe-entry code {
	font-family: var(--wp--preset--font-family--mono, monospace); font-size: 0.9em;
	background: var(--pe-bg-alt); border: 1px solid var(--pe-line);
	border-radius: 4px; padding: 0.12em 0.4em; color: var(--pe-green-deep);
}
.pe-entry pre {
	background: var(--pe-bg-alt); color: var(--pe-text); padding: 1rem 1.25rem;
	border: 1px solid var(--pe-line); border-radius: var(--pe-radius-sm); overflow-x: auto; margin: 1.5rem 0;
}
.pe-entry pre code { background: none; border: none; color: inherit; padding: 0; }

.pe-entry hr { border: 0; border-top: 1px solid var(--pe-line); margin: 2.5rem 0; }

/* Filmy YouTube (wp:embed) — responsywne 16:9 */
.pe-entry .wp-block-embed { margin: 1.75rem 0; }
.pe-entry .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--pe-radius); }
.pe-entry .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Tabele — częste w poradnikach Excela (porównania) */
.pe-entry table {
	width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 0.95rem;
	border-radius: var(--pe-radius-sm); overflow: hidden;
}
.pe-entry .wp-block-table { overflow-x: auto; border: none !important; }
.pe-entry .wp-block-table.is-style-stripes,
.pe-entry .wp-block-table.is-style-regular { border: none !important; }
.pe-entry .wp-block-table figcaption { font-size: 0.85rem; color: var(--pe-muted); text-align: center; margin-top: 0.5rem; }
.pe-entry table th, .pe-entry table td {
	border: 1px solid var(--pe-line); padding: 0.65em 0.9em; text-align: left; vertical-align: top;
}
.pe-entry table th {
	background: var(--pe-green); color: var(--pe-white); font-weight: 700;
	border-color: rgba(255,255,255,0.15);
}
.pe-entry table tr:nth-child(even) td { background: var(--pe-bg-alt); }
.pe-entry table tr:nth-child(odd) td { background: var(--pe-bg); }

@media (max-width: 640px) {
	/* ★ `:not(.shop_table)` KONIECZNE. Ten kartowy układ jest dla tabel TREŚCI
	   poradników. Strona kasy i podziękowania renderuje się także w `.pe-entry`,
	   więc bez wykluczenia reguła rozbijała tabelę zamówienia WooCommerce:
	   nazwa dociśnięta do prawej (`text-align:right` + `padding-left:40%`),
	   miniatura w luce, wiersz „Kwota" jako wąskie pudełko. Wszystkie tabele
	   WooCommerce (kasa, koszyk, konto, pobrania) mają klasę `.shop_table`. */
	.pe-entry table:not(.shop_table),
	.pe-entry table:not(.shop_table) thead,
	.pe-entry table:not(.shop_table) tbody,
	.pe-entry table:not(.shop_table) tr,
	.pe-entry table:not(.shop_table) th,
	.pe-entry table:not(.shop_table) td { display: block; width: 100%; }
	.pe-entry table:not(.shop_table) thead { position: absolute; clip: rect(0 0 0 0); height: 1px; overflow: hidden; }
	.pe-entry table:not(.shop_table) tr { margin-bottom: 0.75rem; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-sm); overflow: hidden; }
	.pe-entry table:not(.shop_table) td { padding: 0.5em 0.75em; border: none; border-bottom: 1px solid var(--pe-line); position: relative; padding-left: 40%; text-align: right; }
	.pe-entry table:not(.shop_table) td:last-child { border-bottom: none; }
	.pe-entry table:not(.shop_table) td::before {
		content: attr(data-label); position: absolute; left: 0.75em; top: 0.5em;
		font-weight: 700; color: var(--pe-green); text-align: left; white-space: nowrap;
	}
}

/* =====================================================================
   BOXY PRODUKTOWE (shortcode) — w palecie marki
   ===================================================================== */
/* Banner kursowy: [pe_banner kurs="..."] — obrazek tła + kolorowy overlay */
/* Box subtelny (środek artykułu) */
.pe-box-subtle {
	border-left: 5px solid; border-radius: 0 8px 8px 0;
	padding: 16px 20px; margin: 28px 0;
	display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.pe-box-subtle__text { flex: 1; min-width: 200px; }
.pe-box-subtle__title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pe-box-subtle__desc { font-size: 14px; color: #555; line-height: 1.5; }
/* Podwójna klasa celowo: `.pe-entry a` (0,1,1) bije pojedynczą klasę (0,1,0)
   i barwiło tekst przycisku na zieleń — czyli dokładnie w kolor jego tła,
   przez co napis znikał. Box „mocny" był odporny, bo ma kolor inline. */
.pe-box-subtle .pe-box-subtle__btn {
	display: inline-block; color: #fff; font-size: 14px; font-weight: 700;
	padding: 10px 22px; border-radius: 6px; text-decoration: none;
	white-space: nowrap; flex-shrink: 0;
}
.pe-box-subtle .pe-box-subtle__btn:hover { opacity: 0.9; color: #fff; }

/* Box mocny (koniec artykułu) */
.pe-box-strong {
	border-radius: 12px; padding: 28px 24px; margin: 32px 0;
	display: flex; gap: 24px; align-items: center;
}
.pe-box-strong__content { flex: 1; }
.pe-box-strong__badge {
	display: inline-block; background: var(--pe-lime, #7CC94E); font-size: 12px; font-weight: 700;
	padding: 3px 12px; border-radius: 20px; margin-bottom: 12px;
	text-transform: uppercase; letter-spacing: .05em;
}
.pe-box-strong__title {
	font-size: 21px; font-weight: 700; margin-bottom: 14px;
	line-height: 1.3; text-decoration: underline;
}
.pe-box-strong__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.pe-box-strong__item { display: flex; gap: 8px; font-size: 14px; align-items: flex-start; }
.pe-box-strong__check { font-weight: 700; flex-shrink: 0; font-size: 16px; }
.pe-box-strong__btn {
	display: inline-block; font-size: 16px; font-weight: 700;
	padding: 13px 28px; border-radius: 6px; text-decoration: none;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.pe-box-strong__btn:hover { opacity: 0.9; }
.pe-box-strong__note { font-size: 12px; margin-top: 10px; }
.pe-box-strong__img { flex-shrink: 0; width: 180px; }
.pe-box-strong__img img { width: 100%; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); display: block; }
.pe-box-strong__icon { flex-shrink: 0; width: 150px; display: flex; align-items: center; justify-content: center; }
.pe-box-strong__emoji {
	width: 130px; height: 130px; background: rgba(255,255,255,0.15);
	border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 64px;
}

@media (max-width: 600px) {
	.pe-box-subtle { flex-direction: column; align-items: flex-start; }
	.pe-box-subtle__btn { width: 100%; text-align: center; box-sizing: border-box; }
	.pe-box-strong { flex-direction: column; }
	.pe-box-strong__img, .pe-box-strong__icon { display: none; }
	.pe-box-strong__title { font-size: 18px; }
	.pe-box-strong__btn { display: block; text-align: center; }
}

/* Box pobierania pliku: [pe_plik] */
.pe-download {
	display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap;
	margin: 2rem 0; padding: 1.25rem 1.4rem;
	background: var(--pe-bg-alt); border: 1px dashed var(--pe-green); border-radius: var(--pe-radius);
}
.pe-download__icon {
	flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
	background: var(--pe-green); color: var(--pe-white); border-radius: 12px;
}
.pe-download__icon .pe-icon { width: 26px; height: 26px; }
.pe-download__text { flex: 1; min-width: 180px; }
.pe-download__title { margin: 0 0 0.15rem; font-weight: 700; color: var(--pe-forest); font-size: 1.05rem; }
.pe-download__desc { margin: 0; font-size: 0.88rem; color: var(--pe-text-soft); }
.pe-download__btn { flex-shrink: 0; }

/* =====================================================================
   KARTA „O AUTORZE"
   ===================================================================== */
.pe-authorcard {
	display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap;
	margin-top: 2rem; padding: clamp(1.4rem, 4vw, 1.8rem);
	background: var(--pe-bg); border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius); box-shadow: var(--pe-shadow);
}
.pe-authorcard__avatar { flex-shrink: 0; }
.pe-authorcard__img, .pe-authorcard__avatar img {
	width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: top;
	border: 3px solid var(--pe-lime); display: block;
}
.pe-authorcard__body { flex: 1; min-width: 220px; }
.pe-authorcard__eyebrow { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pe-green); }
.pe-authorcard__name { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--pe-forest); }
.pe-authorcard__role { margin: 0.1rem 0 0.75rem; font-size: 0.85rem; color: var(--pe-text-soft); }
.pe-authorcard__bio { margin: 0 0 1.1rem; font-size: 0.95rem; line-height: 1.7; color: var(--pe-text); }
.pe-authorcard__social { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pe-social-pill {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.4em 0.85em; font-size: 0.8rem; font-weight: 600; text-decoration: none;
	color: var(--pe-green); background: var(--pe-bg-alt);
	border: 1px solid var(--pe-line); border-radius: 999px;
}
.pe-social-pill .pe-icon { width: 1.05em; height: 1.05em; }
.pe-social-pill:hover { background: var(--pe-green); color: var(--pe-white); border-color: var(--pe-green); }

/* =====================================================================
   BOX POBIERANIA PLIKU
   ===================================================================== */
.pe-download-box {
	margin-top: 2rem; padding: clamp(1.2rem, 3vw, 1.6rem);
	background: var(--pe-bg); border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius); box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.pe-download-box__head {
	display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
}
.pe-download-box__icon {
	width: 1.5rem; height: 1.5rem; color: var(--pe-green); flex-shrink: 0;
}
.pe-download-box__title {
	font-size: 1.05rem; font-weight: 700; color: var(--pe-text);
}
.pe-download-box__files { display: flex; flex-direction: column; gap: 0.5rem; }
.pe-download-box__file {
	display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem;
	background: var(--pe-bg-alt); border: 1px solid var(--pe-line); border-radius: var(--pe-radius-sm);
	text-decoration: none; color: var(--pe-text); transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-download-box__file:hover {
	border-color: var(--pe-green); box-shadow: 0 2px 8px rgba(16,124,65,0.1);
}
.pe-download-box__badge {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.7rem; font-weight: 800;
	letter-spacing: 0.04em; background: var(--pe-green); color: var(--pe-white); flex-shrink: 0;
}
.pe-download-box__name {
	flex: 1; min-width: 0; font-size: 0.92rem; font-weight: 600;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-download-box__size {
	font-size: 0.8rem; color: var(--pe-text-soft); flex-shrink: 0;
}
.pe-download-box__arrow {
	width: 1.2rem; height: 1.2rem; color: var(--pe-green); flex-shrink: 0;
	transition: transform 0.15s;
}
.pe-download-box__file:hover .pe-download-box__arrow { transform: translateY(2px); }

/* =====================================================================
   POWIĄZANE PORADNIKI
   ===================================================================== */
.pe-related {
	margin-top: 2rem; padding: clamp(1.4rem, 4vw, 1.8rem);
	background: var(--pe-bg); border: 1px solid var(--pe-line);
	border-radius: var(--pe-radius); box-shadow: var(--pe-shadow);
}
.pe-related .pe-section__title { text-align: center; margin-bottom: 2rem; }

/* =====================================================================
   KOMENTARZE (natywne WP — dopóki nie wgramy wtyczki oceny)
   ===================================================================== */
.pe-comments { margin-top: 2.5rem; padding-block: 1rem 3rem; }

.pe-comments .comment-list ol { list-style: none; }
.pe-comments .comments-title, .pe-comments .comment-reply-title { font-size: 1.5rem; color: var(--pe-forest); margin-bottom: 1.25rem; }
.pe-comments .comment-body { padding: 1rem 0; border-bottom: 1px solid var(--pe-line); }
.pe-comments .comment-author .fn { color: var(--pe-forest); font-weight: 700; }
.pe-comments .comment-metadata a { color: var(--pe-text-soft); font-size: 0.8rem; text-decoration: none; }

.pe-comments input[type="text"], .pe-comments input[type="email"], .pe-comments input[type="url"], .pe-comments textarea {
	width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-sm);
	background: var(--pe-bg-alt); font: inherit; margin-bottom: 0.9rem;
}
.pe-comments .form-submit input, .pe-comments .submit {
	background: var(--pe-green); color: var(--pe-white); border: 0; font-weight: 700;
	padding: 0.7em 1.6em; border-radius: 999px; cursor: pointer;
}
.pe-comments .form-submit input:hover { background: var(--pe-green-deep); }

/* ---- Responsywność poradnika ---- */
@media (max-width: 640px) {
	.pe-download { flex-direction: column; align-items: flex-start; }
	.pe-download__btn { width: 100%; text-align: center; }
	.pe-byline__img, .pe-byline__avatar img { width: 40px; height: 40px; }
}

/* =====================================================================
   OPINIE — ocena gwiazdkowa + komentarze (lekkie, natywne WP)
   ===================================================================== */
/* Gwiazdki (wyświetlanie) */
.pe-stars { display: inline-flex; gap: 1px; letter-spacing: 1px; }
.pe-star { color: var(--pe-line); font-size: 1rem; line-height: 1; }
.pe-star.is-on { color: var(--pe-gold); }

/* Podsumowanie średniej nad listą */
.pe-rating-summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem;
	padding: 1rem 1.25rem; background: var(--pe-bg-alt); border: 1px solid var(--pe-line); border-radius: var(--pe-radius); }
.pe-rating-summary__num { font-size: 2.2rem; font-weight: 800; color: var(--pe-forest); line-height: 1; font-variant-numeric: tabular-nums; }
.pe-rating-summary__meta { display: flex; flex-direction: column; gap: 0.2rem; }
.pe-rating-summary__meta .pe-star { font-size: 1.3rem; }
.pe-rating-summary__count { font-size: 0.85rem; color: var(--pe-text-soft); }

/* Selektor gwiazdek w formularzu */
.pe-rate { border: 0; margin: 0 0 1.1rem; padding: 0; }
.pe-rate__legend { font-weight: 700; color: var(--pe-forest); padding: 0; margin-bottom: 0.4rem; font-size: 0.95rem; }
.pe-rate__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.pe-rate__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pe-rate__stars label { font-size: 3.2rem; line-height: 1; color: var(--pe-line); cursor: pointer; padding: 0 3px; transition: color .12s; }
.pe-rate__stars input:checked ~ label { color: var(--pe-gold); }
.pe-rate__stars:hover label { color: var(--pe-line); }
.pe-rate__stars label:hover,
.pe-rate__stars label:hover ~ label { color: var(--pe-gold) !important; }
.pe-rate__stars input:focus-visible + label { outline: 2px solid var(--pe-green); outline-offset: 2px; border-radius: 3px; }

/* Lista komentarzy */
.pe-comments__title { font-size: 1.5rem; color: var(--pe-forest); margin: 0 0 1.5rem; }
.pe-comments .comment-list, .pe-comments .comment-list .children { list-style: none; margin: 0; padding: 0; }
.pe-comments .comment-list .children { margin-left: 1.5rem; padding-left: 1.25rem; border-left: 2px solid var(--pe-line); margin-top: 1rem; }
.pe-comment { margin: 0 0 1.25rem; }
.pe-comment__body { display: flex; gap: 1rem; padding: 1.1rem; background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: var(--pe-radius); }
.pe-comment__avatar img { width: 52px; height: 52px; border-radius: 50%; display: block; }
.pe-comment__main { flex: 1; min-width: 0; }
.pe-comment__head { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.pe-comment__author { font-weight: 700; color: var(--pe-forest); }
.pe-comment__author a { color: inherit; text-decoration: none; }
.pe-comment__date { color: var(--pe-text-soft); font-size: 0.78rem; margin-left: auto; }
.pe-comment__rating .pe-star { font-size: 0.9rem; }
.pe-comment__text { color: var(--pe-text); }
.pe-comment__text p:last-child { margin-bottom: 0; }
.pe-comment__moderation { font-size: 0.82rem; color: var(--pe-green-mid); font-style: italic; }
.pe-comment__reply a { font-size: 0.8rem; font-weight: 600; color: var(--pe-green); text-decoration: none; }
.pe-comment__reply a:hover { text-decoration: underline; }

/* Formularz opinii */
.pe-comments .comment-respond { margin-top: 2rem; padding: 1.5rem; background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: var(--pe-radius); }
.pe-comments .comment-reply-title { font-size: 1.35rem; color: var(--pe-forest); margin: 0 0 1rem; }
.pe-comments .comment-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--pe-text); margin-bottom: 0.3rem; }
.pe-comments .comment-form input[type="text"], .pe-comments .comment-form input[type="email"],
.pe-comments .comment-form input[type="url"], .pe-comments .comment-form textarea {
	width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-sm);
	background: var(--pe-bg-alt); font: inherit; margin-bottom: 1rem;
}
.pe-comments .comment-form .form-submit input { width: auto; }
.pe-comments .form-submit .pe-btn { cursor: pointer; border: 0; }
.pe-comments__closed, .pe-comments .comment-notes { color: var(--pe-text-soft); font-size: 0.85rem; }

/* Szerokość poradnika = jak produkcja (Elementor boxed 1200px) */
.pe-container--guide { max-width: 1200px; }

/* =====================================================================
   POPRAWKI v9b — drobne poprawki (logo, zdjęcia, opinie, grafiki, dropdown)
   ===================================================================== */

/* ---- Zdjęcie w hero (portret na ciemnym tle) ---- */
.pe-hero__photo {
	max-height: 420px; width: auto; display: block; margin-inline: auto;
	border-radius: 16px; border: 3px solid var(--pe-lime);
	box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
@media (max-width: 52em) {
	.pe-hero__photo { max-height: 320px; }
}

/* ---- Zdjęcie autora (kwadrat → zaokrąglone) ---- */
.pe-author__photo {
	width: 100%; height: auto; aspect-ratio: 1;
	object-fit: cover; object-position: top;
	border-radius: 16px; border: 3px solid var(--pe-lime);
}
@media (max-width: 52em) {
	.pe-author__photo { max-width: 12rem; margin-inline: auto; display: block; }
}

/* ---- Grafiki w kartach poradników: nie ucinaj krawędzi ---- */
.pe-article__media img {
	aspect-ratio: 16/9;
	object-fit: contain;
	background: var(--pe-bg-alt);
}

/* ---- Dropdown menu: strefa hover obejmuje przerwę między linkiem a panelem ---- */

/* ==========================================================================
   LANDINGI LEJKOWE (page-templates/template-landing.php)
   Renderowane realnymi komponentami motywu (pe-hero, pe-section, pe-container,
   pe-ticklist, pe-package, pe-faq, pe-author...) - tak jak strony produktowe
   (np. template-cwiczenia.php). Klasy pe-lf-* to tylko drobne dopełnienia.
   ========================================================================== */

/* Kontener sekcji: pełna szerokość 1180px (pe-container), jak strony
   produktowe - tekst wewnątrz jest zawężany punktowo (patrz niżej), a
   obrazki/widgety/karty mogą korzystać z pełnej szerokości. */

/* Media w hero (obrazek/wideo tuż pod tytułem i CTA) */
.pe-lf-hero-media {
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
	max-width: 46rem;
	margin-inline: auto;
}

/* Samodzielny HTML (embed wideo, widgety) */
.pe-lf-embed {
	max-width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin-bottom: 1.5rem;
}
.pe-lf-embed:last-child { margin-bottom: 0; }
.pe-lf-embed iframe { border-radius: 12px; display: block; }
.pe-lf-hero-media .pe-lf-embed { margin-bottom: 0; }

/* Obrazki w treści */
.pe-lf-img { margin: 0 0 1.5rem; text-align: center; }
.pe-lf-img img {
	max-width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.pe-lf-p {
	max-width: 44rem; margin: 0 auto 1.1rem; line-height: 1.65;
}
.pe-lf-p:last-child { margin-bottom: 0; }

.pe-lf-ticklist {
	max-width: 44rem; margin: 0 auto 1.5rem;
}
.pe-lf-ticklist:last-child { margin-bottom: 0; }

.pe-lf-h3 {
	max-width: 44rem; margin: 0 auto 0.6rem;
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	line-height: 1.3;
	color: var(--pe-ink);
}

/* Badges (ikony + tekst) */
.pe-lf-badges {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 12px 20px; margin: 0 0 1.5rem;
}
.pe-lf-badge {
	font-size: 0.92rem; font-weight: 600;
	color: var(--pe-ink); white-space: nowrap;
}

/* Karty (bonus/card/cards) - reużywają .pe-panel z motywu */
.pe-lf-panel { margin-bottom: 1rem; }
.pe-lf-panel:last-child { margin-bottom: 0; }
.pe-grid .pe-lf-panel { margin-bottom: 0; }

/* Cennik pojedynczy (blok 'price') - reużywa .pe-package */
.pe-lf-package {
	max-width: 26rem;
	margin-inline: auto;
	text-align: center;
}
.pe-lf-package .pe-price--row { justify-content: center; margin-bottom: 0.5rem; }
.pe-lf-package .pe-price__now { font-size: clamp(1.8rem, 5vw, 2.3rem); }

/* Rating (gwiazdki) */
.pe-lf-rating-wrap { text-align: center; }
.pe-lf-rating {
	text-align: center; padding: 14px 20px;
	background: var(--pe-paper, #F6F9F3);
	border: 1px solid var(--pe-green);
	border-radius: 10px;
	display: inline-flex; align-items: center; gap: 8px;
}
.pe-lf-rating__stars { color: #E9B84A; font-size: 1.3rem; letter-spacing: 2px; }
.pe-lf-rating__score { font-weight: 800; font-size: 1.15rem; color: var(--pe-green); }
.pe-lf-rating__count { font-size: 0.88rem; color: var(--pe-muted, #6b7280); }

/* CTA */
.pe-lf-cta { text-align: center; margin: 0.5rem 0 1.5rem; }
.pe-lf-cta:last-child { margin-bottom: 0; }

/* ==========================================================================
   LANDINGI EDYTOWANE W GUTENBERGU (page-templates/template-landing.php,
   gałąź the_content()). Treść = bloki core z klasami motywu (pe-section,
   pe-container, pe-hero...). Poniżej mostki, żeby bloki core wyglądały 1:1.
   ========================================================================== */

/* Kontener treści = pełna szerokość, sekcje same robią tło pełnej szerokości. */
.pe-landing-content { width: 100%; }

/* Grupy Gutenberga niosące klasy motywu nie mają dostawać domyślnych stylów
   .wp-block-group (marginesy flow) - nasze .pe-section/.pe-container rządzą. */
.pe-landing-content .wp-block-group { margin-block: 0; }

/* Odstępy między blokami wewnątrz .pe-container (Gutenberg flow bez block-gap). */
.pe-landing-content .pe-container > * { margin-block: 0; }
.pe-landing-content .pe-container > * + * { margin-block-start: 1.1rem; }

/* Nagłówek sekcji z bloku heading (dodaje wp-block-heading) - zero górnego marginesu. */
.pe-landing-content .pe-section__title { margin-top: 0; }

/* Obrazek jako blok core (figure.wp-block-image) - styl jak .pe-lf-img. */
.pe-landing-content .wp-block-image { margin: 0 auto 1.5rem; text-align: center; }
.pe-landing-content .wp-block-image img {
	max-width: 100%; height: auto; max-height: 520px; object-fit: contain;
	border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Lista core z klasą pe-ticklist - haczyki jak w motywie (reguły .pe-ticklist
   już istnieją; tu tylko usuwamy domyślne wcięcie listy Gutenberga). */
.pe-landing-content ul.pe-ticklist { padding-left: 0; }

/* Przyciski core (wp:buttons/button) w treści landingu = wygląd .pe-btn. */
.pe-landing-content .wp-block-buttons { justify-content: center; }
.pe-landing-content .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 0.5em;
	background: var(--pe-green); color: var(--pe-white);
	font-weight: 700; border-radius: 999px;
	padding: 0.95em 1.7em; font-size: 1rem; line-height: 1;
	text-decoration: none; transition: background-color 0.15s, transform 0.15s;
}
.pe-landing-content .wp-block-button__link:hover {
	background: var(--pe-green-deep); color: var(--pe-white); transform: translateY(-1px);
}
/* Wariant na ciemnym hero = limonka. */
.pe-landing-content .pe-hero .wp-block-button__link {
	background: var(--pe-lime); color: #0C3018;
}
.pe-landing-content .pe-hero .wp-block-button__link:hover {
	background: var(--pe-white); color: var(--pe-forest);
}

/* FAQ jako blok core Details z klasą pe-faq__item - marker +/- z motywu. */
.pe-landing-content .pe-faq__item summary { list-style: none; }
.pe-landing-content .pe-faq__item summary::-webkit-details-marker { display: none; }
.pe-landing-content .pe-faq { margin-inline: auto; }

/* ==========================================================================
   LANDING „kurs-excel-podstawowy" — komponenty natywne (wg zatwierdzonego
   mockupu). Wszystko scope'owane pod .pe-landing-content; zmienne mapowane
   na tokeny motywu. Treść strony = bloki wp:html z tym markupem.
   ========================================================================== */
.pe-main:has(> .pe-landing-content){ padding-block:0; }
.pe-landing-content{
  --forest:var(--pe-forest); --forest2:var(--pe-forest-2); --green:var(--pe-green);
  --green-deep:var(--pe-green-deep); --lime:var(--pe-lime); --lime-bright:var(--pe-lime-bright);
  --ink:var(--pe-ink); --paper:var(--pe-paper); --line:var(--pe-line); --muted:var(--pe-muted);
  --gold:var(--pe-gold); --white:var(--pe-white); --l-wrap:1180px; --l-col:760px;
  color:var(--ink); line-height:1.65;
}
.pe-landing-content .wrap{max-width:var(--l-wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.pe-landing-content .col{max-width:var(--l-col);margin-inline:auto}

/* hero */
.pe-landing-content .hero{position:relative;background:var(--forest);color:var(--white);text-align:center;
  padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,72px);overflow:hidden}
.pe-landing-content .hero::before,.pe-landing-content .sec.forest::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px}
.pe-landing-content .hero>*,.pe-landing-content .sec.forest>*{position:relative}
.pe-landing-content .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime-bright);background:rgba(124,201,78,.14);
  padding:6px 14px;border-radius:999px;margin-bottom:20px}
.pe-landing-content .hero h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;line-height:1.14;
  margin:0 auto 26px;max-width:680px;text-wrap:balance}
.pe-landing-content .hero h1 .hl{color:var(--lime-bright)}
.pe-landing-content .video{max-width:680px;margin:8px auto 26px;aspect-ratio:16/9;border-radius:14px;
  position:relative;background:linear-gradient(180deg,#20472b,#173322);border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.35)}
.pe-landing-content .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pe-landing-content .btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:1.05rem;
  border-radius:999px;padding:.9em 2em;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s,background-color .15s,box-shadow .15s}
.pe-landing-content .btn svg{width:1em;height:1em;fill:currentColor}
.pe-landing-content .btn-lime{background:var(--lime);color:#0C3018;box-shadow:0 8px 22px rgba(124,201,78,.28)}
.pe-landing-content .btn-lime:hover{background:var(--white);transform:translateY(-2px)}
.pe-landing-content .btn-green{background:var(--green);color:var(--white);box-shadow:0 8px 22px rgba(15,90,50,.3)}
.pe-landing-content .btn-green:hover{background:var(--green-deep);transform:translateY(-2px)}
.pe-landing-content .microtrust{margin-top:16px;font-size:.9rem;color:#B7C7B5}

/* sekcje */
.pe-landing-content .sec{padding:clamp(44px,6vw,72px) 0}
.pe-landing-content .sec.paper{background:var(--paper)}
.pe-landing-content .sec.forest{background:var(--forest);color:var(--white);position:relative;overflow:hidden;text-align:center}
.pe-landing-content .h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;text-align:center;line-height:1.2;
  margin:0 auto .5rem;max-width:28ch;text-wrap:balance;color:var(--ink)}
.pe-landing-content .h2::after{content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--lime);margin:14px auto 0}
.pe-landing-content .forest .h2{color:var(--white)}
.pe-landing-content .h2-wide{max-width:none}
.pe-landing-content .lead2{text-align:center;color:var(--muted);max-width:52ch;margin:0 auto 2.4rem}
/* uniwersalne: stos elementów w sekcji + akapit treści */
.pe-landing-content .lstack{display:flex;flex-direction:column;gap:1.4rem}

.pe-landing-content .hlead{color:#E4EEE2;font-size:1.12rem;max-width:46ch;margin:0 auto 26px}

/* pasek oceny */
.pe-landing-content .rating{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  max-width:640px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pe-landing-content .rc{flex:1;min-width:150px;text-align:center;padding:18px 16px}
.pe-landing-content .rc+.rc{border-left:1px solid var(--line)}
.pe-landing-content .rc .big{font-size:1.7rem;font-weight:800;color:var(--green);line-height:1}
.pe-landing-content .stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem}
.pe-landing-content .rc small{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}

/* siatka umiejętności */
.pe-landing-content .skills{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:960px;margin:0 auto}
.pe-landing-content .skill{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:0 10px 10px 0;padding:14px 16px 14px 44px;position:relative;font-size:.96rem;line-height:1.5}
.pe-landing-content .skill svg{position:absolute;left:15px;top:15px;width:17px;height:17px;stroke:var(--green);stroke-width:2.4;fill:none}
.pe-landing-content .skill b{font-weight:700}

/* Bloki tematyczne w sekcji „Czego nauczę się” — nagłówek-obietnica + siatka
   punktów pod nim. Dzięki grupowaniu długa lista czyta się jako kompletny
   program, a nie ściana jednakowych zdań. */
.pe-landing-content .skillgroup{max-width:960px;margin:0 auto}
.pe-landing-content .skillgroup + .skillgroup{margin-top:30px}
.pe-landing-content .sg-title{font-size:1.06rem;font-weight:800;color:var(--forest);
  margin:0 0 13px;display:flex;align-items:center;gap:.6em;text-align:left;line-height:1.3}
.pe-landing-content .sg-title::before{content:"";width:22px;height:3px;border-radius:2px;
  background:var(--lime);flex:0 0 auto}

/* „Zobacz więcej” pod siatką umiejętności — czysty <details>, bez JS (jak
   rozwijane opinie na stronie kursu). Ukryte punkty są w DOM, więc czyta je
   wyszukiwarka i wyszukiwanie na stronie (Ctrl+F po rozwinięciu). */
/* „Zobacz więcej” pod siatką umiejętności — czysty <details>, bez JS (jak rozwijane opinie na stronie kursu). Ukryte punkty są w DOM{max-width:960px;margin:14px auto 0;display:flex;flex-direction:column;align-items:center}

/* po rozwinięciu chowamy „Zobacz więcej”, a pokazujemy „Zwiń” */
/* po rozwinięciu chowamy „Zobacz więcej”{display:none}

/* Zdanie o efekcie końcowym pod blokami zagadnień — to jest obietnica, po którą
   klient płaci. Ciemny panel z kratą: kontrast niezależny od tła sekcji
   (wcześniej miał tło --paper i na sekcji .paper po prostu znikał). */
.pe-landing-content .outcome{position:relative;overflow:hidden;max-width:960px;
  margin:38px auto 0;padding:30px 34px 34px;background:var(--forest);color:var(--white);
  border-radius:16px;text-align:center;box-shadow:0 14px 34px rgba(15,51,30,.18)}
.pe-landing-content .outcome::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px}
.pe-landing-content .outcome>*{position:relative}
.pe-landing-content .outcome__label{display:inline-flex;align-items:center;gap:.5em;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime-bright);background:rgba(124,201,78,.14);padding:6px 14px;
  border-radius:999px;margin-bottom:16px}
.pe-landing-content .outcome__label svg{width:15px;height:15px;stroke:currentColor;
  stroke-width:2.2;fill:none}
.pe-landing-content .outcome p{margin:0;font-size:clamp(1.1rem,2.1vw,1.3rem);line-height:1.45;
  font-weight:700;max-width:46ch;margin-inline:auto;text-wrap:balance;letter-spacing:-.01em}
.pe-landing-content .outcome .hl{color:var(--lime-bright)}
/* Konkretne rezultaty pod zdaniem-obietnicą — trzy kolumny w szerokości siatki
   zagadnień, żeby box nie wyglądał na pustawy. */
.pe-landing-content .outcome__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:24px;text-align:left}
.pe-landing-content .outcome__item{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:15px 17px}
.pe-landing-content .outcome__item b{display:block;color:var(--lime-bright);
  font-size:.95rem;font-weight:700;margin-bottom:5px;line-height:1.3}
.pe-landing-content .outcome__item span{display:block;font-size:.87rem;
  line-height:1.5;color:#D7E3D5}

/* Opinie kursantów na landingu — karty jak na stronie powitalnej kursu
   (tutor/single-course.php). UWAGA: tutor.css nie ładuje się na landingu,
   więc reguły są tu powtórzone; wrapper NIE może się nazywać .pe-reviews,
   bo na landingu to karuzela marketingowa. */
.pe-landing-content .lreviews{max-width:1000px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pe-landing-content .lreviews--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px}
.pe-landing-content .lrscore{display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin:0 auto 1.8rem;color:var(--muted);font-size:.95rem}
.pe-landing-content .lrscore b{color:var(--ink);font-size:1.15rem;font-weight:800}
.pe-landing-content .lrscore svg{width:1.05rem;height:1.05rem;color:var(--gold);fill:var(--gold)}
.pe-landing-content .pe-course-review{background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:1.15rem;text-align:left}
.pe-landing-content .pe-course-review__head{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.pe-landing-content .pe-course-review__img{width:42px;height:42px;flex:none;border-radius:999px;object-fit:cover}
.pe-landing-content .pe-course-review__who{flex:1;min-width:0}
.pe-landing-content .pe-course-review__who b{display:block;font-size:.92rem;line-height:1.3}
.pe-landing-content .pe-course-review__stars{display:inline-flex;gap:1px}
.pe-landing-content .pe-course-review__stars svg{width:.85rem;height:.85rem;color:var(--gold);fill:var(--gold)}
.pe-landing-content .pe-course-review__date{flex:none;font-size:.76rem;color:var(--muted);align-self:flex-start}
.pe-landing-content .pe-course-review__text{font-size:.9rem;margin:0;line-height:1.55}
/* Notka o pochodzeniu opinii (archiwalny kurs, Udemy) - ma być czytelna, ale nie
   konkurować z treścią opinii; stąd mniejszy stopień i wyciszony kolor. */
.pe-landing-content .pe-course-review__source{font-size:.75rem;margin:.5rem 0 0;line-height:1.4;color:var(--pe-muted,#5c6b5f);font-style:italic}
/* Pigułka „Kurs archiwalny" - ciemna zieleń na jasnym tle daje 10:1, więc etykieta
   jest czytelna mimo małego stopnia pisma. Bez kursywy, żeby odcinała się od notki. */
.pe-landing-content .pe-course-review__badge{display:inline-block;font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.02em;padding:.15em .5em;border-radius:999px;background:var(--pe-line,#E1E7DE);color:var(--pe-forest,#17331E);white-space:nowrap}
/* „Pokaż pozostałe opinie" — ten sam wzorzec co na stronie kursu, bez JS. */
.pe-landing-content .lreviews-more{margin-top:1rem;display:flex;flex-direction:column;align-items:center}
.pe-landing-content .lreviews-more>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:.5em;padding:.62em 1.4em;border:1px solid var(--green);border-radius:999px;
  background:var(--white);color:var(--green);font-weight:700;font-size:.94rem;width:max-content;
  transition:background-color .15s,color .15s}
.pe-landing-content .lreviews-more>summary::-webkit-details-marker{display:none}
.pe-landing-content .lreviews-more>summary:hover{background:var(--green);color:var(--white)}
.pe-landing-content .lreviews-more>summary svg{width:15px;height:15px;stroke:currentColor;
  stroke-width:2.4;fill:none;transition:transform .15s}
.pe-landing-content .lreviews-more[open]>summary svg{transform:rotate(180deg)}
.pe-landing-content .lreviews-more .lreviews{margin-top:16px;width:100%}

/* cennik (jasny box) */
.pe-landing-content .price{max-width:460px;margin:0 auto;background:var(--white);border:2px solid var(--green);
  border-radius:16px;padding:30px 26px;text-align:center;box-shadow:0 10px 30px rgba(15,90,50,.08)}
/* Hierarchia cen: przekreślona kwota jest WIĘKSZA od aktualnej (efekt zgodności
   wielkości — mniejsza cena promocyjna czyta się jako większa obniżka).
   Żeby aktualna cena mimo mniejszego stopnia nadal była tą „obowiązującą”,
   akcent przenosimy z rozmiaru na kolor (zieleń) i grubość (800). */
.pe-landing-content .price .old{color:var(--muted);text-decoration:line-through;
  font-size:clamp(1.65rem,4vw,2.1rem);line-height:1.1;display:block}
.pe-landing-content .price .now{font-size:clamp(1.45rem,3vw,1.7rem);font-weight:800;color:var(--green);line-height:1.15;margin:4px 0 0}
.pe-landing-content .price .note{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.pe-landing-content .price .btn-green{width:100%;justify-content:center;font-size:1.1rem}
.pe-landing-content .bonusbox{margin-top:18px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.pe-landing-content .bonusbox .bt{font-weight:700;color:var(--green-deep);font-size:.9rem;margin:0 0 8px;display:flex;gap:8px;align-items:center}
.pe-landing-content .bonusbox .bt svg{width:16px;height:16px;stroke:var(--green);stroke-width:2;fill:none;flex:0 0 auto}
.pe-landing-content .bonusbox ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.pe-landing-content .bonusbox li{font-size:.9rem;padding-left:24px;position:relative}
.pe-landing-content .bonusbox li svg{position:absolute;left:0;top:3px;width:15px;height:15px;stroke:var(--green);stroke-width:2.4;fill:none}
.pe-landing-content .bonusbox li span{color:var(--muted);font-size:.82rem}
.pe-landing-content .trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:16px;font-size:.82rem;color:var(--muted)}
.pe-landing-content .trustrow i{display:inline-flex;gap:5px;align-items:center;font-style:normal}
.pe-landing-content .trustrow svg{width:14px;height:14px;stroke:var(--green);stroke-width:2;fill:none}
.pe-landing-content .guarline{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--muted);display:flex;gap:7px;align-items:center;justify-content:center}
.pe-landing-content .guarline svg{width:16px;height:16px;stroke:var(--green);stroke-width:2;fill:none;flex:0 0 auto}

/* karty dodatków */
.pe-landing-content .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1000px;margin:0 auto}
.pe-landing-content .card{flex:1 1 280px;max-width:320px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px;transition:border-color .15s,box-shadow .15s}
/* Wariant 2x2 — dla kursów z czterema dodatkami. Bez niego flex układa 4 karty
   jako 3+1, co wygląda na niedokończone. */
.pe-landing-content .cards--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px}
.pe-landing-content .cards--2 .card{flex:none;max-width:none}
.pe-landing-content .card:hover{border-color:#CBD8C6;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.pe-landing-content .card .ic{width:44px;height:44px;border-radius:12px;background:rgba(124,201,78,.16);display:grid;place-items:center;margin-bottom:12px}
.pe-landing-content .card .ic svg{width:22px;height:22px;stroke:var(--green);stroke-width:2;fill:none}
.pe-landing-content .card .cthumb{border-radius:10px;overflow:hidden;margin-bottom:14px;border:1px solid var(--line);background:var(--white);padding:8px}
.pe-landing-content .card .cthumb img{display:block;width:100%;height:150px;object-fit:contain}
.pe-landing-content .card h3{font-size:1.02rem;font-weight:700;margin:0 0 6px}
.pe-landing-content .card p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.55}

/* lista formy kursu */
.pe-landing-content .checklist{display:grid;gap:12px;max-width:700px;margin:0 auto}

/* bonusy */
/* Pasek podkreślający, że bonusy są bezpłatne — sama kwota w podtytule ginęła.
   Przekreślona wartość obok „0 zł" pokazuje różnicę, zamiast o niej opowiadać. */
.pe-landing-content .bonusfree{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.55em .8em;width:max-content;max-width:100%;margin:0 auto 2rem;padding:12px 24px;
  background:rgba(124,201,78,.16);border:1px solid var(--lime);border-radius:999px;
  font-size:1.02rem;line-height:1.35;color:var(--green-deep)}
.pe-landing-content .bonusfree svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--green-deep);
  stroke-width:1.8;fill:none}
.pe-landing-content .bonusfree .bf-val{text-decoration:line-through;color:var(--muted);font-weight:600}
.pe-landing-content .bonusfree .bf-free{font-weight:800;color:var(--green-deep)}
.pe-landing-content .bonusfree .bf-zero{font-weight:800;font-size:1.2rem;color:var(--green-deep)}
.pe-landing-content .bonus2{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.pe-landing-content .bcard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative;display:flex;gap:16px;align-items:flex-start;transition:border-color .15s,box-shadow .15s}
.pe-landing-content .bcard:hover{border-color:#CBD8C6;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.pe-landing-content .bthumb{width:84px;flex:0 0 auto;border-radius:8px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#f3f7ee,#e6efe0)}
.pe-landing-content .bthumb img{display:block;width:100%;height:auto}
.pe-landing-content .bbadge{position:absolute;top:14px;right:14px;background:rgba(124,201,78,.16);color:var(--green-deep);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px}
.pe-landing-content .bcard h3{font-size:1rem;font-weight:700;margin:0 0 6px;max-width:24ch}
.pe-landing-content .bcard p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.5}

/* autor */
/* align-items:center — zdjęcie autora wyśrodkowane w pionie względem tekstu;
   przy „start” wisiało przy górnej krawędzi, zostawiając pustkę pod spodem. */
.pe-landing-content .author{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:center;max-width:960px;margin:0 auto}
.pe-landing-content .photo{border-radius:16px;border:2px solid var(--lime);overflow:hidden;background:#eef3ea}
.pe-landing-content .photo img{display:block;width:100%;height:auto}
.pe-landing-content .author .name{margin-top:12px;text-align:center;font-weight:700}
.pe-landing-content .author .name span{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
.pe-landing-content .author h2{font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:800;margin:0 0 12px}
.pe-landing-content .author p{margin:0 0 14px;color:#2b2f2b}

.pe-landing-content .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:1000px;margin:0 auto}
.pe-landing-content .review{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px}
.pe-landing-content .review .rs{color:var(--gold);letter-spacing:2px;margin-bottom:8px}
.pe-landing-content .review p{font-size:.94rem;margin:0 0 12px;line-height:1.55}
.pe-landing-content .review .who{font-weight:700;font-size:.9rem}

/* FAQ */
.pe-landing-content .faq{max-width:680px;margin:0 auto;display:grid;gap:10px}
.pe-landing-content details.q{background:var(--white);border:1px solid var(--line);border-radius:12px;transition:border-color .15s}
.pe-landing-content details.q[open]{border-color:var(--green)}
.pe-landing-content details.q summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;font-size:.98rem;display:flex;justify-content:space-between;gap:16px;align-items:center}
.pe-landing-content details.q summary::-webkit-details-marker{display:none}
.pe-landing-content details.q summary::after{content:"+";color:var(--green);font-size:1.3rem;font-weight:700;line-height:1}
.pe-landing-content details.q[open] summary::after{content:"–"}
.pe-landing-content details.q .ans{padding:0 18px 16px;color:var(--muted);font-size:.94rem}

/* bezterminowy dostęp */
.pe-landing-content .featurec{max-width:620px;margin:0 auto;text-align:center}
.pe-landing-content .featurec .fic{width:60px;height:60px;border-radius:16px;background:rgba(124,201,78,.16);display:grid;place-items:center;margin:0 auto 16px}
.pe-landing-content .featurec .fic svg{width:30px;height:30px;stroke:var(--green);stroke-width:1.8;fill:none}
.pe-landing-content .featurec p{color:var(--muted);margin:0}

/* gwarancja */
.pe-landing-content .guar{max-width:640px;margin:0 auto;text-align:center;background:var(--white);border:2px solid var(--green);border-radius:16px;padding:34px 28px;box-shadow:0 6px 22px rgba(15,90,50,.08)}
.pe-landing-content .guar .shield{width:54px;height:54px;margin:0 auto 12px;stroke:var(--green);stroke-width:1.7;fill:none}
.pe-landing-content .guar h2{font-size:1.3rem;font-weight:800;margin:0 0 8px}
.pe-landing-content .guar p{color:var(--muted);margin:0 auto;max-width:46ch}

/* oferta na ciemnym tle (dolny box) */
.pe-landing-content .doffer{max-width:480px;margin:1.8rem auto 0}
.pe-landing-content .dprice{display:flex;gap:12px;justify-content:center;align-items:baseline;margin-bottom:16px}
/* Ciemny wariant — ta sama hierarchia co w .price (przekreślona większa). */
.pe-landing-content .dold{color:#9FB39D;text-decoration:line-through;font-size:1.55rem}
.pe-landing-content .dnow{color:var(--lime-bright);font-size:1.25rem;font-weight:800}
.pe-landing-content .doffer .btn-lime{width:100%;justify-content:center;font-size:1.1rem}
.pe-landing-content .dbonus{margin-top:18px;text-align:left;background:rgba(124,201,78,.10);border:1px solid rgba(124,201,78,.28);border-radius:12px;padding:14px 16px}
.pe-landing-content .dbt{font-weight:700;color:var(--lime-bright);font-size:.9rem;margin:0 0 8px;display:flex;gap:8px;align-items:center}
.pe-landing-content .dbt svg{width:16px;height:16px;stroke:var(--lime-bright);stroke-width:2;fill:none;flex:0 0 auto}
.pe-landing-content .dbonus ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pe-landing-content .dbonus li{font-size:.9rem;color:#E4EEE2;padding-left:24px;position:relative}
.pe-landing-content .dbonus li svg{position:absolute;left:0;top:3px;width:15px;height:15px;stroke:var(--lime-bright);stroke-width:2.4;fill:none}
.pe-landing-content .dbonus li span{color:#A9BCA7;font-size:.82rem}
.pe-landing-content .dtrust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:16px;font-size:.82rem;color:#B7C7B5}
.pe-landing-content .dtrust i{display:inline-flex;gap:5px;align-items:center;font-style:normal}
.pe-landing-content .dtrust svg{width:14px;height:14px;stroke:var(--lime-bright);stroke-width:2;fill:none}
.pe-landing-content .dguar{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);font-size:.84rem;color:#B7C7B5;display:flex;gap:7px;align-items:center;justify-content:center}
.pe-landing-content .dguar svg{width:16px;height:16px;stroke:var(--lime-bright);stroke-width:2;fill:none;flex:0 0 auto}

@media(max-width:720px){
  .pe-landing-content .skills{grid-template-columns:1fr}
  .pe-landing-content .bonus2{grid-template-columns:1fr}
  .pe-landing-content .cards--2{grid-template-columns:1fr}
  .pe-landing-content .lreviews,
  .pe-landing-content .lreviews--2{grid-template-columns:1fr}
  .pe-landing-content .outcome__grid{grid-template-columns:1fr}
  .pe-landing-content .author{grid-template-columns:1fr;gap:22px}
  .pe-landing-content .photo{max-width:220px;margin-inline:auto}
  .pe-landing-content .rc+.rc{border-left:0}
  /* Pasek bonusów: flex z odstępami zostawiał „dla Ciebie" jako osobną, wyśrodkowaną
     sierotę. Na mobile robimy z niego płynący wyśrodkowany tekst — czyta się jak jedno
     zdanie, a zaokrąglony prostokąt (zamiast pigułki 999px) mieści 2 linie bez „kapsuły". */
  .pe-landing-content .bonusfree{display:block;text-align:center;border-radius:16px;padding:14px 18px;line-height:1.55}
  .pe-landing-content .bonusfree svg{display:inline-block;vertical-align:-4px;margin-right:6px}
  .pe-landing-content .bonusfree span{margin:0 .2em}
  /* Karta bonusu: badge „wartość X zł" jest absolutny w prawym górnym rogu i na wąskiej
     karcie wchodził w tytuł. Górny pas robi mu miejsce, treść startuje pod nim. */
  .pe-landing-content .bcard{padding-top:46px}
  /* Cena w ciemnej ofercie: poziomo „169 zł" + „Teraz tylko 97 zł" nie mieści się
     na wąskim ekranie i zawijało się w połowie napisu (cena „uciekała niżej").
     Na mobile schludny wyśrodkowany stos: przekreślona nad ceną aktualną. */
  .pe-landing-content .dprice{flex-direction:column;gap:2px;align-items:center}
}

/* =====================================================================
   ŚCIEŻKA DARMOWA — formularz zapisu + podziękowanie
   ===================================================================== */
.pe-signup {
	max-width: 560px; margin: 1.6rem auto 0; text-align: left;
	background: var(--pe-white); border: 1px solid var(--pe-line, #E1E7DE);
	border-radius: 14px; padding: 1.6rem; box-shadow: 0 8px 30px rgba(23, 51, 30, 0.06);
}
.pe-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pe-signup__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.pe-signup__field { display: flex; flex-direction: column; gap: 0.35rem; }
.pe-signup__field span { font-weight: 700; font-size: 0.9rem; color: var(--pe-forest, #17331E); }
.pe-signup__field input {
	padding: 0.75em 0.9em; border-radius: 8px; border: 1px solid var(--pe-line, #E1E7DE);
	font-size: 1rem; font-family: inherit; background: var(--pe-paper, #F6F9F3);
}
.pe-signup__field input:focus { outline: 2px solid var(--pe-lime, #7CC94E); outline-offset: 1px; border-color: transparent; }
.pe-signup__consent { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0 0; font-size: 0.9rem; color: var(--pe-text-soft, #5a6b5e); line-height: 1.45; }
.pe-signup__consent input { margin-top: 0.2em; flex: none; width: 1.05em; height: 1.05em; accent-color: var(--pe-green, #0F5A32); }
.pe-signup__submit { width: 100%; justify-content: center; margin-top: 1.1rem; font-size: 1.05rem; padding: 0.95em 1.4em; }
.pe-signup__note { text-align: center; font-size: 0.85rem; color: var(--pe-text-soft, #5a6b5e); margin: 0.8rem 0 0; }
/* Wariant „masz już dostęp" — NIE karta. Karta .pe-signup ma białe tło,
   a na ciemnej sekcji (.sec.forest ma color:white) tekst stawał się
   biały na białym: zostawał pusty biały prostokąt z samym przyciskiem. */
.pe-signup--done {
	text-align: center; background: none; border: 0; box-shadow: none;
	padding: 0; max-width: none;
}
.pe-signup--done p { margin: 0 0 1rem; font-weight: 600; color: inherit; }

.pe-thankyou { text-align: center; max-width: 640px; padding-block: 1rem; }
.pe-thankyou__icon {
	width: 68px; height: 68px; margin: 0 auto 1.2rem; border-radius: 50%;
	background: var(--pe-lime, #7CC94E); color: var(--pe-forest, #17331E);
	display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800;
}
/* Nagłówek i zdanie pod nim sklejały się w jeden blok tekstu (uwaga Piotra 2026-07-22).
   ★ Odstęp zwiększamy na H1, nie przez `margin-top` akapitu — sąsiadujące marginesy
   pionowe SIĘ ZLEWAJĄ, więc górny margines na `.lead2` (0.5em h1 kontra 0.6rem p)
   nie dołożyłby ani piksela. Wygrywa większy z dwóch, nie ich suma.
   ★ Jednostka `em`, żeby odstęp skalował się razem z fluid typography nagłówka.
   Bazowo `h1` ma 0.5em (main.css:87) — tutaj 0.9em. */
.pe-thankyou h1 { margin-bottom: 0.9em; }
.pe-thankyou__cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 0; }

@media (max-width: 560px) {
	.pe-signup__row { grid-template-columns: 1fr; }
	.pe-signup { padding: 1.2rem; }
}

/* ==========================================================================
   POPRAWKI v11 — filmy YouTube w poradnikach
   Osadzamy iframe wprost (nie blokiem wp:embed), bo embed rozwija adres
   dopiero przez oEmbed — bez sieci/cache zostawał goły link zamiast filmu.
   ========================================================================== */
.pe-video {
	margin: 1.8rem 0;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: var(--pe-forest, #17331E);
}
.pe-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   POPRAWKI v12 — landing: zrzuty przycisków wstążki („do czego służy…")
   Grafiki przycisków to ikony 100x100 px. W kontenerze pełnej szerokości
   (.pe-lf-img) rozjeżdżały się i traciły czytelność, więc dostają własny
   układ: ikona w stałym rozmiarze obok wyjaśnienia.
   ========================================================================== */
.pe-landing-content .btnrow {
	max-width: 900px;
	margin: 0 auto 1.4rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.pe-landing-content .btncard {
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px 18px;
}
.pe-landing-content .btncard img {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--paper);
	padding: 6px;
}
.pe-landing-content .btncard b { display: block; margin-bottom: 2px; }
.pe-landing-content .btncard span { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 700px) {
	.pe-landing-content .btnrow { grid-template-columns: 1fr; }
}

/* Jeden bonus — siatka .bonus2 jest dwukolumnowa, więc pojedyncza karta
   zostawiałaby pustą połowę. Wtedy jedna kolumna i węższy kontener. */
.pe-landing-content .bonus2--1 { grid-template-columns: 1fr; max-width: 560px; }

/* Długa opinia — reszta treści schowana w <details> (bez JS).
   Zdarzają się wpisy po ~1500 znaków, które rozbijały siatkę kart. */
.pe-landing-content .pe-course-review__more { display: inline; }
.pe-landing-content .pe-course-review__more > summary {
	list-style: none;
	cursor: pointer;
	display: inline;
	color: var(--green-deep);
	font-weight: 700;
	font-size: 0.86rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-left: 0.35em;
}
.pe-landing-content .pe-course-review__more > summary::-webkit-details-marker { display: none; }
.pe-landing-content .pe-course-review__more > summary:hover { color: var(--green); }

/* Stan zwinięty: widać „Czytaj całość", „Zwiń" ukryte (bez tej reguły span
   domyślnie jest inline i obie etykiety pokazują się naraz). */
.pe-landing-content .pe-course-review__more > summary .more-off { display: none; }

.pe-landing-content .pe-course-review__more[open] > summary .more-on { display: none; }
.pe-landing-content .pe-course-review__more[open] > summary .more-off { display: inline; }
/*
 * <summary> jest pierwszym dzieckiem <details>, więc po rozwinięciu wypadałby
 * POMIĘDZY skrótem a dalszym ciągiem opinii. W stanie otwartym robimy z
 * details kolumnę flex i przesuwamy etykietę na koniec.
 */
.pe-landing-content .pe-course-review__more[open] { display: flex; flex-direction: column; }
.pe-landing-content .pe-course-review__more[open] > .pe-course-review__rest { order: 1; }
.pe-landing-content .pe-course-review__more[open] > summary {
	order: 2;
	display: block;
	margin: 0.5em 0 0;
	align-self: flex-start;
}

/* Karuzela opinii na stronie głównej: nazwa kursu pod autorem.
   Opinie idą teraz z Tutora i pochodzą z różnych kursów, więc warto pokazać,
   którego dotyczą. */
.pe-review__course {
	display: block;
	margin-top: 0.15rem;
	font-weight: 400;
	font-size: 0.82rem;
	color: var(--pe-muted, #5C6B5A);
}
.pe-section__lead {
	max-width: 46rem;
	margin: -0.6rem auto 2rem;
	color: var(--pe-muted, #5C6B5A);
}

/* ===== POPRAWKI v13: kalkulator kredytowy =====
   Szablon składa się z sekcji, które mają własny padding, więc padding-block
   .pe-main dokładał biały pas nad hero i pod ciemnym CTA (tuż przed stopką). */
.page-template-template-kalkulator .pe-main { padding-block: 0; }

/* Finalne CTA kalkulatora - sekcja domykająca stronę, więc dostaje więcej
   powietrza i mocniejsze przyciski niż zwykłe .pe-cta. Scope pod szablonem,
   żeby nie ruszyć CTA na pozostałych stronach. */
.page-template-template-kalkulator .pe-cta { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.page-template-template-kalkulator .pe-cta__inner {
	max-width: 48rem;
	display: grid;
	gap: 2rem;
	justify-items: center;
}
.page-template-template-kalkulator .pe-cta__title {
	max-width: 20ch;
	text-wrap: balance;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
}
/* Równe, pełnowymiarowe przyciski - nie mogą wyglądać jak odnośniki pomocnicze. */
.page-template-template-kalkulator .pe-cta .pe-pricebtns { gap: 1rem; }
.page-template-template-kalkulator .pe-cta .pe-btn--lg {
	min-width: 16rem;
	padding: 1.05em 1.9em;
	font-size: 1.05rem;
	justify-content: center;
}
/* Wariant ghost ma pełną, nieprzezroczystą ramkę - przy alfa .6 przycisk
   ginął obok wypełnionego sąsiada i czytał się jak nieaktywny. */
.page-template-template-kalkulator .pe-cta .pe-btn--ghost-light {
	box-shadow: inset 0 0 0 2px var(--pe-lime-bright);
	color: var(--pe-lime-bright);
}

/* Pasek zaufania: ikony zamiast kropek, jaśniejszy tekst (było rgba .82). */
.pe-cta__trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	color: rgba(255, 255, 255, 0.95);
	font-size: 0.95rem;
}
.pe-cta__trust li { display: inline-flex; align-items: center; gap: 0.5rem; }
.pe-cta__trust svg { width: 1.1em; height: 1.1em; flex: none; color: var(--pe-lime-bright); }

/* =====================================================================
   POPRAWKI v13 — strona ćwiczeń: okładka w hero, zrzut zeszytu,
   rozbicie zakresu na liczby zadań
   ===================================================================== */

/* Hero podstrony z grafiką — przywraca dwie kolumny wyłączone przez .pe-hero--page */
.pe-hero--page.pe-hero--split .pe-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; }
.pe-hero--page.pe-hero--split .pe-hero__content { max-width: none; margin-inline: 0; text-align: left; }
.pe-hero--page.pe-hero--split .pe-hero__kicker { margin-inline: 0; }
.pe-hero--page.pe-hero--split .pe-hero__actions { justify-content: flex-start; }
.pe-hero__cover { display: block; width: 100%; max-width: 20rem; margin-inline: auto; height: auto; border-radius: 14px; }

@media (max-width: 60rem) {
	.pe-hero--page.pe-hero--split .pe-hero__grid { grid-template-columns: 1fr; }
	.pe-hero--page.pe-hero--split .pe-hero__content { text-align: center; }
	.pe-hero--page.pe-hero--split .pe-hero__kicker { margin-inline: auto; }
	.pe-hero--page.pe-hero--split .pe-hero__actions { justify-content: center; }
	.pe-hero__cover { max-width: 14rem; }
}

/* Zrzut ekranu produktu — ramka, żeby czytało się jak screenshot, nie jak grafika marki */
.pe-split--proof { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); margin-bottom: clamp(2rem, 5vw, 2.75rem); }
.pe-shot { margin: 0; }
.pe-shot img {
	display: block; width: 100%; max-width: 19rem; height: auto; margin-inline: auto;
	border: 1px solid var(--pe-line); border-radius: 12px; background: var(--pe-white);
	box-shadow: 0 10px 28px rgba(20, 20, 20, 0.08);
}
.pe-shot__cap { margin-top: 0.7rem; font-size: 0.82rem; color: var(--pe-text-soft); text-align: center; }

@media (max-width: 48rem) {
	.pe-split--proof { grid-template-columns: 1fr; }
}

/* Zakres z liczbą zadań przy temacie — lista, nie pigułki (etykiety są za długie) */
.pe-scope__tags--counted { display: block; }
.pe-scope__tags--counted li {
	display: flex; align-items: baseline; gap: 0.6rem;
	font-size: 0.86rem; background: none; border: 0; border-bottom: 1px dashed var(--pe-line);
	border-radius: 0; padding: 0.45em 0;
}
.pe-scope__tags--counted li:last-child { border-bottom: 0; }
.pe-scope__n {
	margin-left: auto; flex: none; min-width: 1.9rem; text-align: center;
	font-weight: 700; font-size: 0.78rem; color: var(--pe-green);
	background: var(--pe-bg-alt); border: 1px solid var(--pe-line); border-radius: 6px; padding: 0.15em 0.4em;
}

/* Galeria zrzutów produktu — jednakowe kadry mimo różnych proporcji plików */
.pe-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 2vw, 1.15rem); }
.pe-shot--sm img {
	max-width: none;
	aspect-ratio: 4 / 3; object-fit: contain; object-position: center;
	padding: 0.4rem;
}
.pe-shot--sm .pe-shot__cap { font-size: 0.76rem; }
@media (max-width: 64rem) { .pe-shots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .pe-shots { grid-template-columns: 1fr; } }

/* Porządki na stronie ćwiczeń — scope pod szablonem, żeby nie ruszyć innych stron */
.page-template-template-cwiczenia .pe-cta__inner > * + * { margin-top: 1.25rem; }
.page-template-template-cwiczenia .pe-cta__inner .pe-section__lead { margin-inline: auto; }
.page-template-template-cwiczenia .pe-cta .pe-hero__actions { justify-content: center; }
/* Kafle "Co dostajesz" równej wysokości — inaczej ramki kończą się w różnych miejscach */
.page-template-template-cwiczenia .pe-grid--fixed3 { align-items: stretch; }
.page-template-template-cwiczenia .pe-grid--fixed3 .pe-feature { height: 100%; }
/* Panele "Efekty" / "Dla kogo" równej wysokości */
.page-template-template-cwiczenia .pe-grid--2 { align-items: stretch; }
.page-template-template-cwiczenia .pe-grid--2 > .pe-panel { height: 100%; }

/* Podnagłówek wewnątrz sekcji (np. "W każdym wariancie" / "Dokładasz, jeśli chcesz") */
.pe-subhead {
	margin: clamp(1.75rem, 4vw, 2.25rem) 0 1rem;
	font-size: 1.05rem; font-weight: 700; color: var(--pe-forest, #17331E);
	display: flex; align-items: center; gap: 0.75rem;
}
.pe-subhead::after { content: ""; flex: 1; height: 1px; background: var(--pe-line); }
/* Kafle opcjonalne — przerywana ramka i akcent, żeby odróżnić je od tego, co jest zawsze */
.pe-feature--optional { border-style: dashed; border-color: rgba(23, 51, 30, 0.28); }
.pe-feature--optional .pe-feature__icon { background: #E9F3E2; }

/* Wyśrodkowana lista efektów/kwalifikacji (było inline style="margin:0 auto;max-width") */
.pe-ticklist--centered { max-width: 40rem; margin-inline: auto; }
/* Gwarancja jako pas domykający pod cennikiem — węższa niż pełna sekcja */
.pe-guarantee-band { padding-block: clamp(2rem, 5vw, 2.75rem); }

/* Odstęp nad przyciskiem kończącym sekcję (było inline) */
.pe-cta-row { margin-top: 2rem; }
.pe-lead--centered { margin-inline: auto; }

/* Zakładki poziomów: bez JS widać wszystkie panele (z nagłówkiem), z JS - tylko wybrany.
   Nagłówek panelu i zakładki są zbędne, gdy JS przejmie sterowanie. */
.pe-levelpanel__h { margin: 0 0 1rem; font-size: 1.1rem; }
.pe-levelpicker:not(.is-enhanced) .pe-levelpicker__tabs { display: none; }
.pe-levelpicker:not(.is-enhanced) .pe-levelpanel + .pe-levelpanel { margin-top: 2.5rem; }
.pe-levelpicker.is-enhanced .pe-levelpanel__h { display: none; }

/* Zdjęcie autora na stronie kontaktu (zastąpiło pusty slot "Twoje zdjęcie").
   ★ SCOPE do strony Kontakt KONIECZNY. Tam `.pe-author__photo` to WRAPPER z <img>
   w środku; na STRONIE GŁÓWNEJ ta sama klasa to samo <img>. Bez ograniczenia skrót
   `margin: 0 0 0.9rem` zerował `margin-inline: auto` zdjęcia autora na stronie głównej
   i na mobile lądowało ono po lewej zamiast na środku. */
.page-template-template-kontakt .pe-author__photo { margin: 0 0 0.9rem; }
.page-template-template-kontakt .pe-author__photo img {
	display: block; width: 100%; max-width: 15rem; height: auto; margin-inline: auto;
	aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
	border-radius: 14px;
}

/* Główny przycisk CTA w treści: cena w pigułce, wyraźniejszy cień, lekkie uniesienie */
.pe-btn--hero {
	display: inline-flex; align-items: center; gap: 0.75rem;
	padding-inline: 1.75rem; font-size: 1.05rem;
	box-shadow: 0 8px 20px rgba(23, 51, 30, 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.pe-btn--hero:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(23, 51, 30, 0.28); }
.pe-btn--hero .pe-btn__price {
	background: rgba(255, 255, 255, 0.16); border-radius: 999px;
	padding: 0.2em 0.7em; font-size: 0.9em; font-weight: 700; white-space: nowrap;
}
.pe-cta-row__note { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--pe-text-soft); }

@media (max-width: 30rem) {
	.pe-btn--hero { flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding-inline: 1.25rem; }
	.pe-btn--hero .pe-btn__main { flex-basis: 100%; }
}

/* Podpis pod gwarancją (bez zdjęcia - twarz jest w sekcji "Poznaj mnie") */
.pe-guarantee__sign { margin: 1.25rem 0 0; font-weight: 700; line-height: 1.35; }
.pe-guarantee__sign span {
	display: block; font-weight: 400; font-size: 0.85rem; color: var(--pe-text-soft);
}
/* Liczby w sekcji o autorze */
.pe-author__facts {
	list-style: none; margin: 1.25rem 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem;
}
.pe-author__facts li { line-height: 1.2; }
.pe-author__facts strong { display: block; font-size: 1.5rem; color: var(--pe-green); }
.pe-author__facts span { font-size: 0.85rem; color: var(--pe-text-soft); }
/* Na wąskim ekranie flex-wrap układał 3 statystyki jako 2+1 z nierównym odstępem
   (dwie obok siebie, trzecia samotnie pod spodem) — wyglądało na rozjechane.
   Równy rząd 3 kolumn, wyśrodkowany, czyta się jak spójny zestaw liczb. */
@media (max-width: 600px) {
	.pe-author__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 0.5rem; text-align: center; }
}

/* Dowód społeczny w hero ćwiczeń: liczba kupujących nad linijką z ceną */
.pe-hero__proof {
	display: inline-flex; align-items: center; gap: 0.5rem;
	margin: 0.25rem 0 0.6rem; padding: 0.4em 0.9em;
	background: rgba(255, 255, 255, 0.1); border-radius: 999px;
	color: #E4EEE2; font-size: 0.9rem;
}
.pe-hero__proof strong { color: var(--pe-lime-bright); }
.pe-hero__proof .pe-icon { width: 1.1em; height: 1.1em; color: var(--pe-lime-bright); }

/* ======================================================================
   POPRAWKI v14 - UPSELL (page-templates/template-upsell.php)
   Strona decyzji miedzy landingiem a kasa. Odpowiednik krokow "landing"
   z CartFlows, przepisany na tokeny motywu: oryginal mial pomarancz
   (#e67e22) i obce zielenie (#4caf50, #2e7a31), ktorych paleta zabrania.
   Akcent pilnosci niesie zloto #E9B84A - ten sam wyjatek co gwiazdki ocen.
   ====================================================================== */

.pe-upsell {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 2px solid var(--pe-green, #17331E);
	border-radius: var(--pe-radius, 10px);
	background: var(--pe-white, #fff);
	box-shadow: var(--pe-shadow, 0 8px 28px rgba(23, 51, 30, .08));
	text-align: center;
}

.pe-upsell__head { margin-bottom: 1.5rem; }
.pe-upsell__name { margin: 0 0 .35rem; font-size: clamp(1.25rem, 3vw, 1.6rem); }
.pe-upsell__meta { margin: 0 0 1rem; color: var(--pe-text-soft, #5A655E); font-size: .95rem; }

/* Cena: przekreslona wieksza od aktualnej (efekt zgodnosci wielkosci,
   decyzja Piotra przy landingach - trzymamy te sama proporcje ~1,2x). */
.pe-upsell__price { margin: 0; line-height: 1.1; }
.pe-upsell__price .pe-price__old {
	display: block;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--pe-strike, #9AA69C);
	text-decoration: line-through;
}
.pe-upsell__price .pe-price__now {
	display: block;
	margin-top: .2rem;
	font-size: 2rem;
	font-weight: 700;
	color: var(--pe-green, #17331E);
}
.pe-upsell__save {
	display: inline-block;
	margin: .6rem 0 0;
	padding: 3px 12px;
	border-radius: 999px;
	background: rgba(233, 184, 74, .2);
	color: #6b4c07;
	font-size: .8rem;
	font-weight: 700;
}

.pe-upsell__points { margin: 0 0 1.5rem; padding: 0; list-style: none; text-align: left; }
.pe-upsell__points li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; font-size: .95rem; }
.pe-upsell__points .pe-icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: .15em; color: var(--pe-green, #17331E); }

.pe-upsell__bonus {
	margin-bottom: 1.5rem;
	padding: 1rem 1.2rem;
	border: 1px dashed var(--pe-green, #17331E);
	border-radius: var(--pe-radius-sm, 6px);
	background: var(--pe-paper, #F6F9F3);
	text-align: left;
}
.pe-upsell__bonus-lead { display: flex; gap: .5rem; align-items: center; margin: 0 0 .5rem; font-weight: 700; }
.pe-upsell__bonus-lead .pe-icon { width: 1.2em; height: 1.2em; color: var(--pe-green, #17331E); }
.pe-upsell__bonus ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.pe-upsell__bonus-val { color: var(--pe-text-soft, #5A655E); }

.pe-upsell__topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1.75rem; }
.pe-upsell__topic {
	display: flex;
	gap: .5rem;
	align-items: center;
	padding: .6rem .75rem;
	border: 1px solid var(--pe-line, #E1E7DE);
	border-left: 3px solid var(--pe-lime, #77C043);
	border-radius: var(--pe-radius-sm, 6px);
	background: var(--pe-paper, #F6F9F3);
	font-size: .85rem;
	font-weight: 500;
	text-align: left;
}
.pe-upsell__topic .pe-icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; color: var(--pe-green, #17331E); }

.pe-upsell__actions { display: flex; flex-direction: column; gap: .75rem; }
.pe-upsell__yes { width: 100%; justify-content: center; }
/* Odmowa musi byc widoczna i klikalna - ukrywanie jej to ciemny wzorzec,
   a wsrod kupujacych rodzi poczucie wpuszczenia w maliny. */
.pe-upsell__no {
	display: block;
	padding: .7rem;
	border: 1px solid var(--pe-line, #E1E7DE);
	border-radius: var(--pe-radius-sm, 6px);
	color: var(--pe-text-soft, #5A655E);
	font-size: .88rem;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.pe-upsell__no:hover { background: var(--pe-paper, #F6F9F3); color: var(--pe-ink, #17201A); }

.pe-upsell__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	justify-content: center;
	margin: .5rem 0 0;
	color: var(--pe-text-soft, #5A655E);
	font-size: .8rem;
}
.pe-upsell__trust .pe-icon { width: 1em; height: 1em; margin-right: .2em; vertical-align: -.12em; }

.pe-upsell__why { max-width: 46rem; margin-inline: auto; padding: 0; list-style: none; }
.pe-upsell__why li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; }
.pe-upsell__why .pe-icon { flex: 0 0 auto; width: 1.2em; height: 1.2em; margin-top: .15em; color: var(--pe-lime-bright, #8FD65A); }

/* Etykieta ceny promocyjnej w koszyku - odrozniona od "Bonus gratis"
   (patrz pe_upsell_item_name w inc/upsell.php). */
.pe-bonus-tag--upsell { background: rgba(233, 184, 74, .22); color: #6b4c07; }

@media (max-width: 34rem) {
	.pe-upsell__topics { grid-template-columns: 1fr; }
	.pe-upsell__price .pe-price__old { font-size: 1.9rem; }
	.pe-upsell__price .pe-price__now { font-size: 1.6rem; }
}

/* ---- Upsell: cala strona ciemna w krate (2026-07-21) ----------------
   Strona decyzji ma byc jednym plachtem zieleni, nie pasami. Krate daje
   JEDNA regula na .pe-main--upsell, a nie kazda sekcja z osobna - inaczej
   linie siatki lamalyby sie na stykach sekcji.
   Tlo jest takze na <body>, bo przy krotkiej tresci pas pod .pe-main
   pokazywal biel strony. Nie da sie tego zalatwic samym min-height:
   przy dlugiej tresci i tak zostaje margines ponizej. */
.pe-body--upsell { background: var(--pe-forest, #17331E); }

.pe-main--upsell {
	position: relative;
	overflow: hidden;
	padding-block: 0;
	background: var(--pe-forest, #17331E);
	color: var(--pe-white, #fff);
}
.pe-main--upsell::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 42px 42px;
}
.pe-main--upsell > * { position: relative; z-index: 1; }

/* Sekcje oddaja tlo i krate stronie - zostawiaja tylko kolory tekstu. */
.pe-main--upsell .pe-hero--dark,
.pe-main--upsell .pe-section--dark,
.pe-main--upsell .pe-section { background: transparent; }
.pe-main--upsell .pe-hero--dark::before,
.pe-main--upsell .pe-section--dark::before { display: none; }

/* Karta oferty zostaje biala: cena i lista korzysci to tresc do czytania,
   a nie tlo - na ciemnym tle karta jest zarazem punktem uwagi. */
.pe-main--upsell .pe-upsell { color: var(--pe-ink, #17201A); }
.pe-main--upsell .pe-upsell__no { background: var(--pe-white, #fff); }

/* Ostatnia sekcja domyka strone wlasnym oddechem - bez tego tresc
   dotyka krawedzi okna po usunieciu stopki. */
.pe-main--upsell > section:last-child { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

/* Hero i karta na jednolitym tle - odstepy z sekcji sa zaprojektowane pod
   naprzemienne tla (bialy/paper), gdzie duza przerwa oddziela kolory. Tutaj
   tlo jest jedno, wiec 112px robilo dziure miedzy naglowkiem a oferta. */
.pe-main--upsell .pe-hero { padding-bottom: clamp(1.5rem, 3vw, 2rem); }
.pe-main--upsell > section:nth-child(2) { padding-top: 1rem; }

/* ---- Upsell: wejscie tresci (2026-07-21) ---------------------------
   Kaskada od gory: naglowek, potem karta oferty, na koncu sekcja "dlaczego".
   Buduje kolejnosc czytania zamiast wysypywac cala strone naraz.

   ★ Stan poczatkowy siedzi w @keyframes (from), NIE w regule statycznej.
   Gdyby animacje nie zadzialaly - stara przegladarka, wylaczone CSS
   animations, blad skladni wyzej - "opacity:0" w regule zostawiloby PUSTA
   strone sprzedazowa. Przy tym zapisie brak animacji = tresc po prostu
   widoczna od razu. `both` trzyma stan koncowy po zakonczeniu.

   Tylko opacity i transform (kompozytowane przez GPU) - zadnych wlasciwosci
   wymuszajacych relayout. translateY, nigdy translateX: poziome przesuniecie
   potrafi wywolac pasek przewijania w poziomie. */
@keyframes pe-up-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes pe-up-card {
	from { opacity: 0; transform: translateY(22px) scale(.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pe-main--upsell .pe-eyebrow    { animation: pe-up-in .5s ease-out .05s both; }
.pe-main--upsell .pe-hero__title{ animation: pe-up-in .55s ease-out .15s both; }
.pe-main--upsell .pe-hero__lead { animation: pe-up-in .55s ease-out .25s both; }
.pe-main--upsell .pe-upsell     { animation: pe-up-card .6s cubic-bezier(.2, .7, .3, 1) .35s both; }
.pe-main--upsell > section:last-child .pe-section__title,
.pe-main--upsell > section:last-child .pe-upsell__why { animation: pe-up-in .5s ease-out .5s both; }

/* Cena "dobija" po wjezdzie karty - moment, na ktorym ma zatrzymac sie wzrok. */
@keyframes pe-up-price {
	0%   { transform: scale(1); }
	55%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}
.pe-main--upsell .pe-price__now { display: block; animation: pe-up-price .5s ease-out .95s both; }

/* Pigulka oszczednosci wchodzi na koncu - dopowiedzenie do ceny, nie rywal. */
.pe-main--upsell .pe-upsell__save { animation: pe-up-in .45s ease-out 1.05s both; }

/* ★ Dostepnosc przy "ogranicz ruch": motyw ma juz globalna regule (linia ~110),
   ktora zbija `animation-duration` do 0.001ms z !important - czas trwania jest
   wiec zalatwiony i NIE powtarzamy go tutaj.
   Globalna regula nie rusza jednak `animation-delay`, a nasze opoznienia siegaja
   1,05s. Bez tego elementy czekalyby ponad sekunde NIEWIDOCZNE (klatka `from` to
   opacity 0), po czym skokowo sie pojawily - czyli dokladnie ten rodzaj
   zaskoczenia, ktory ustawienie ma eliminowac. Selektory sa bardziej
   specyficzne niz `*`, wiec !important nie jest potrzebny. */
@media (prefers-reduced-motion: reduce) {
	.pe-main--upsell .pe-eyebrow,
	.pe-main--upsell .pe-hero__title,
	.pe-main--upsell .pe-hero__lead,
	.pe-main--upsell .pe-upsell,
	.pe-main--upsell .pe-price__now,
	.pe-main--upsell .pe-upsell__save,
	.pe-main--upsell > section:last-child .pe-section__title,
	.pe-main--upsell > section:last-child .pe-upsell__why {
		animation-delay: 0s;
	}
}

/* ==========================================================================
   POPRAWKI v15 — USTAWIANIE HASŁA NA EKRANIE POWITALNYM (2026-07-22)
   Kod: inc/set-password.php. Formularz pojawia się w DWÓCH miejscach:
   na podziękowaniu po zakupie (karta Woo) i po zapisie darmowym (sekcja).
   ★ Style muszą być TUTAJ, nie w woocommerce.css — tamten arkusz ładuje się
   tylko na stronach WooCommerce, a podziękowanie darmowe renderuje się pod
   adresem strony głównej i nie dostałoby ani jednej reguły.
   ========================================================================== */
.pe-setpass { text-align: left; }
.pe-setpass__title { font-size: 1.05rem; font-weight: 800; color: var(--pe-forest, #17331E); margin: 0 0 6px; }
.pe-setpass__lead { font-size: .9rem; color: var(--pe-text-soft, #5a6b5e); margin: 0 0 16px; line-height: 1.5; }
.pe-setpass__form { display: flex; flex-direction: column; gap: 6px; }
.pe-setpass__label { font-size: .82rem; font-weight: 700; color: var(--pe-forest, #17331E); margin-top: 6px; }
.pe-setpass__input {
	width: 100%; padding: 11px 13px; font-size: 1rem;
	border: 1px solid var(--pe-line, #E1E7DE); border-radius: 8px;
	background: #fff; color: var(--pe-ink, #141414);
}
.pe-setpass__input:focus { outline: 2px solid var(--pe-green, #0F5A32); outline-offset: 1px; border-color: var(--pe-green, #0F5A32); }
.pe-setpass__btn { margin-top: 14px; align-self: flex-start; }
/* Czerwień komunikatu błędu zostaje — czytelność sygnału > paleta,
   ta sama zasada co przy błędach w strefie nauki. */
.pe-setpass__error { font-size: .88rem; color: #8c2f2f; background: #fbf0f0; border-left: 3px solid #8c2f2f; padding: 9px 12px; border-radius: 4px; margin: 0 0 12px; }
.pe-setpass__ok { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; color: var(--pe-green, #0F5A32); margin: 0; }
.pe-setpass__ok svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* Wariant na podziękowaniu darmowym — własna ramka, bo nie ma karty wokół. */
.pe-setpass--sekcja {
	max-width: 420px; margin: 26px auto 0; padding: 22px 24px;
	border: 1px solid var(--pe-line, #E1E7DE); border-radius: 12px; background: #fff;
}