/* Minimalny, techniczny CSS stron usług WooCommerce (Analiza Decyzji, Gotowe Odwołanie,
   Wezwanie do Zapłaty). To nie jest finalny design — wyłącznie porządkowanie natywnego
   renderu WooCommerce po usunięciu domyślnej galerii i innych elementów przez hooki. */

.oai-site .oai-service-product {
	display: block;
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	margin: 0 auto;
	padding: 40px 40px 80px;
	box-sizing: border-box;
	overflow-x: hidden;
}

.oai-site .oai-service-product .product {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .woocommerce-product-gallery {
	display: none;
}

.oai-site .oai-service-product .summary {
	display: block;
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Etap 3 — hero strony „Analiza Decyzji”, wyłącznie produkt ID 2365. Selektor bazuje na
   klasie `post-2365`, którą WordPress/WooCommerce dodaje do wrappera produktu przez
   standardowy, rdzenny mechanizm post_class()/wc_product_class() — nie jest to założenie,
   tylko realna, udokumentowana konwencja WordPressa dla widoków pojedynczego wpisu.
   Produkty 2366 i 2368 nie są objęte tymi regułami i pozostają na etapie technicznym. */

/* Korekta: natywna reguła WooCommerce `.woocommerce div.product div.summary
   { width:48%; float:right; }` ma specyficzność (0,3,2) — trzy klasy i dwa selektory
   elementowe. Reguła Etapu 2 powyżej ma (0,3,0) — równa liczba klas, zero elementów —
   i przy równych klasach o wygranej decydują elementy, więc reguła WooCommerce wygrywała.
   Poniższy selektor odtwarza i przewyższa strukturę natywnej reguły (siedem klas, dwa
   elementy), więc wygrywa bez potrzeby !important dla większości właściwości. Dla float,
   width i clear zastosowano dodatkowo !important jako jawnie dozwolony wyjątek, ponieważ
   nie da się zweryfikować dokładnej specyficzności natywnej reguły bez otwierania plików
   wtyczki WooCommerce, co jest poza dozwolonym katalogiem projektu. */

.woocommerce .oai-site .oai-service-product div.product.post-2365 div.summary.entry-summary {
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: none;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.75rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__lead {
	margin: 0 0 24px;
	max-width: 560px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__benefits li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(33, 225, 253, 0.16);
	border: 1px solid var(--oai-color-cyan);
}

/* Karta zakupu — obejmuje natywną cenę, natywny formularz add-to-cart i template-part
   z USP/informacją o formularzu po płatności. Cena, ilość, przycisk i nonce pozostają
   w 100% natywnym renderem WooCommerce; poniższe reguły stylują wyłącznie istniejące,
   publiczne klasy WooCommerce. */

.oai-site .oai-service-product .post-2365 .oai-service-hero__buy {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.06);
	padding: 32px;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .price {
	display: block;
	margin: 0 0 20px;
	font-size: 2rem;
	font-weight: 800;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .quantity .qty {
	width: 72px;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid var(--oai-color-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	color: var(--oai-color-navy);
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 100%;
	padding: 14px 28px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: var(--oai-color-navy);
	color: var(--oai-color-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	box-sizing: border-box;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .single_add_to_cart_button:hover {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__assurance {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__usp {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__usp li {
	font-size: 14px;
	font-weight: 600;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2365 .oai-service-hero__note {
	margin: 0;
	max-width: 420px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Reduced motion: globalne wyłączenie transition/animation w main.css
   (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście box-shadow na przycisku. */

/* Desktop od 900px: dwie kolumny, lewa wyraźnie szersza, karta zakupu o komfortowej,
   ale elastycznej szerokości. Zgodne z konwencją 900px już zastosowaną w Sekcji 6,
   Sekcji 8 i footerze strony głównej. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .summary {
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
		gap: 64px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-hero__buy {
		max-width: 430px;
	}
}

/* Tablet: poniżej 900px pozostaje jedna kolumna (kierunek już zaakceptowany, bez zmian
   poziomego paddingu wrappera — wyłącznie korekta odstępu przed footerem). */

@media (max-width: 899px) {
	body.postid-2365 .oai-site .oai-service-product {
		padding-bottom: 72px;
	}
}

/* Mobile do 600px: formularz w jednej kolumnie (ilość nad przyciskiem), USP w jednej
   kolumnie, pełna szerokość przycisku. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-hero__buy {
		padding: 24px 20px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .cart {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .quantity {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .quantity .qty {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .single_add_to_cart_button {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-hero__usp {
		flex-direction: column;
		gap: 8px;
	}
}

/* Mobile do 480px: docelowy, mniejszy gutter boczny (18–20px) wyłącznie dla produktu
   2365 — przez klasę postid-2365 na <body>, bo wrapper .oai-service-product jest
   elementem nadrzędnym wobec .post-2365 i nie da się go zawęzić selektorem potomnym. */

@media (max-width: 480px) {
	body.postid-2365 .oai-site .oai-service-product {
		padding-left: 18px;
		padding-right: 18px;
		padding-bottom: 56px;
	}
}

/* Mobile do 360px: minimalny gutter zgodny z konwencją reszty motywu; dodatkowo
   bezpieczne zmniejszenie tekstu przycisku, żeby „Zamów Analizę Decyzji” miało szansę
   zmieścić się w jednej linii na najwęższych ekranach. */

@media (max-width: 360px) {
	body.postid-2365 .oai-site .oai-service-product {
		padding-left: 16px;
		padding-right: 16px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-hero__buy .single_add_to_cart_button {
		font-size: 14px;
		padding: 14px 16px;
	}
}

/* Sekcja 2 — „Co to jest analiza decyzji ubezpieczyciela i kiedy warto ją zamówić?”,
   wyłącznie produkt ID 2365. Renderowana przez woocommerce_after_single_product_summary,
   więc jest naturalnym potomkiem `.post-2365` (tak samo jak hero) — do skalowania
   wystarczy istniejący wzorzec `.post-2365 .oai-service-definition`, bez potrzeby
   sięgania po `body.postid-2365` (to było konieczne wyłącznie dla paddingu *rodzica*
   `.oai-service-product`, którego ta sekcja nie dotyka). Brak width: 100vw i ujemnych
   marginesów: prawdziwy full-bleed do krawędzi viewportu byłby tu jedynym sposobem na
   wyjście poza padding rodzica, więc sekcja wypełnia pełną dostępną szerokość swojego
   kontenera (var(--oai-container-width)) własnym tłem, zamiast krawędzi przeglądarki. */

.oai-site .oai-service-product .post-2365 .oai-service-definition {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 64px;
	padding: 48px 40px;
	background: #EDF5FA;
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__heading {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__description {
	margin: 0;
	max-width: 560px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Prawa kolumna: wprowadzenie do listy + lista sześciu sytuacji, razem jako
   jedna grupa — dzięki temu grid dwóch kolumn sekcji (.oai-service-definition__inner)
   nadal ma dokładnie dwa bezpośrednie dzieci (.__intro i .__situations). */

.oai-site .oai-service-product .post-2365 .oai-service-definition__situations {
	min-width: 0;
	max-width: 100%;
	margin-top: 32px;
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__situations-title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__situation {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	padding: 18px 20px;
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__situation-number {
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-definition__situation-text {
	min-width: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.55;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 700px: lista sytuacji w dwóch kolumnach — zarówno na szerszym tablecie
   (sekcja nadal w jednej kolumnie), jak i na desktopie (wewnątrz prawej kolumny
   sekcji), co razem daje układ „dwóch kolumn po trzy elementy”. */

@media (min-width: 700px) {
	.oai-site .oai-service-product .post-2365 .oai-service-definition__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

/* Od 900px: dwie kolumny sekcji — definicja (lewa, ~45%) i sytuacje (prawa, ~55%).
   Lewa kolumna poszerzona względem pierwszej wersji (była ~40%), żeby H2 miał
   realnie więcej miejsca i nie łamał się w miejscu osierocającym „decyzji”. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-definition__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr);
		align-items: start;
		gap: 52px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-definition__situations {
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i kart, jeden logiczny gutter. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-definition {
		margin-top: 48px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-definition__situation {
		padding: 16px 18px;
	}
}

/* Mobile do 480px: docelowy gutter 18–20px, zgodny z konwencją hero tego produktu.
   H2 dostaje dedykowany, nieco mniejszy rozmiar i gęstszy line-height — na tej
   szerokości kolumna jest zbyt wąska, żeby sam clamp() z bazowej reguły
   niezawodnie unikał osierocania „decyzji” w ostatnim wierszu. */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-definition {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-definition__heading {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter zgodny z konwencją reszty motywu. */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-definition {
		padding: 28px 16px;
	}
}

/* Sekcja 3 — „Co sprawdzamy w decyzji ubezpieczyciela?”, wyłącznie produkt ID 2365.
   Kontrastowy, granatowy kierunek wizualny wobec jasnej Sekcji 2 — naturalny rytm:
   białe hero, jasna Sekcja 2, granatowa Sekcja 3. Renderowana przez
   woocommerce_after_single_product_summary (priorytet 10, bezpośrednio po Sekcji 2
   na priorytecie 5), więc jest naturalnym potomkiem `.post-2365` — do skalowania
   wystarczy `.post-2365 .oai-service-scope`, analogicznie do Sekcji 2. Osiem obszarów
   to równoległe kategorie analizy, nie kroki procesu — dlatego bez numeracji 01–08
   (usunięto po korekcie, patrz PROJECT_STATUS.md), z małą etykietą kategorii nad
   opisem zamiast numeru obok tekstu. */

.oai-site .oai-service-product .post-2365 .oai-service-scope {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__heading {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__description {
	margin: 0;
	max-width: 420px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Prawa kolumna: „Standardowo sprawdzamy:” + lista ośmiu obszarów, razem jako
   jedna grupa — dzięki temu grid dwóch kolumn sekcji (.oai-service-scope__inner)
   nadal ma dokładnie dwa bezpośrednie dzieci (.__intro i .__areas). */

.oai-site .oai-service-product .post-2365 .oai-service-scope__areas {
	min-width: 0;
	max-width: 100%;
	margin-top: 32px;
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__areas-title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Osiem obszarów jako lekkie wiersze: etykieta kategorii nad opisem (nie obok —
   wąska kolumna na numer/etykietę niepotrzebnie ściskałaby tekst opisu), cienka
   dolna linia jako jedyny separator, bez numeracji sugerującej kolejność/proces. */

.oai-site .oai-service-product .post-2365 .oai-service-scope__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__area {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__area:last-child {
	border-bottom: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__area-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-scope__area-description {
	min-width: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 700px: lista w dwóch kolumnach po cztery elementy — zarówno na szerszym
   tablecie (sekcja nadal w jednej kolumnie), jak i na desktopie (wewnątrz prawej
   kolumny sekcji). */

@media (min-width: 700px) {
	.oai-site .oai-service-product .post-2365 .oai-service-scope__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
		row-gap: 0;
	}
}

/* Od 900px: dwie główne kolumny sekcji — intro (lewa, ~35%) i lista (prawa, ~65%). */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-scope__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
		align-items: start;
		gap: 64px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-scope__areas {
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji, jeden logiczny gutter. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-scope {
		margin-top: 32px;
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18–20px, dedykowany rozmiar H2 (jak w Sekcji 2). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-scope {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-scope__heading {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter zgodny z konwencją reszty motywu. */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-scope {
		padding: 28px 16px;
	}
}

/* Sekcja 4 — „Co zawiera raport z analizy decyzji?”, wyłącznie produkt ID 2365.
   Jasny, dokumentowy kierunek wizualny — wyraźnie inny niż płaskie tło Sekcji 2
   i granatowe tło Sekcji 3: jeden biały panel z subtelnym obramowaniem, miękkim
   cieniem i cienkim cyanowym akcentem u góry — dokładnie te same, już zatwierdzone
   wzorce co karta zakupu w hero (border + border-radius + box-shadow) i górna
   linia .oai-signals__cta (border-top: 3px solid cyan), nie nowy, arbitralny styl.
   Renderowana przez woocommerce_after_single_product_summary (priorytet 15,
   bezpośrednio po Sekcji 3 na priorytecie 10), więc jest naturalnym potomkiem
   `.post-2365` — do skalowania wystarczy `.post-2365 .oai-service-report`,
   analogicznie do Sekcji 2 i Sekcji 3. */

.oai-site .oai-service-product .post-2365 .oai-service-report {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 48px 40px;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-top: 3px solid var(--oai-color-cyan);
	border-radius: var(--oai-radius-l);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.06);
}

.oai-site .oai-service-product .post-2365 .oai-service-report__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-report__heading {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__lead {
	margin: 0;
	max-width: 480px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Prawa kolumna: lista definicyjna, jeden element pod drugim — bez numerów,
   bez osobnych kart, wyłącznie cienki separator między pozycjami. */

.oai-site .oai-service-product .post-2365 .oai-service-report__content {
	min-width: 0;
	max-width: 100%;
	margin-top: 32px;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__details {
	margin: 0;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__detail {
	padding: 18px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2365 .oai-service-report__detail:last-child {
	border-bottom: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__detail dt {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__detail dd {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Blok doprecyzowania zakresu usługi — pełna szerokość panelu, delikatne
   cyanowe tło, ten sam wzorzec co .oai-trust__notice (Sekcja 6 strony głównej). */

.oai-site .oai-service-product .post-2365 .oai-service-report__notice {
	margin-top: 32px;
	padding: 20px 24px;
	background: rgba(33, 225, 253, 0.08);
	border-left: 2px solid var(--oai-color-cyan);
	border-radius: 0 var(--oai-radius-m) var(--oai-radius-m) 0;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__notice p {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__notice p + p {
	margin-top: 12px;
}

.oai-site .oai-service-product .post-2365 .oai-service-report__disclaimer {
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

/* Od 900px: dwie główne kolumny sekcji — intro (lewa, ~40%) i content (prawa,
   ~60%); blok doprecyzowania rozciąga się na pełną szerokość obu kolumn. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-report__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: start;
		column-gap: 60px;
		row-gap: 32px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-report__content {
		margin-top: 0;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-report__notice {
		grid-column: 1 / -1;
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding panelu i bloku doprecyzowania. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-report {
		margin-top: 32px;
		padding: 32px 24px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-report__notice {
		padding: 18px 20px;
	}
}

/* Mobile do 480px: docelowy gutter 18–20px, dedykowany rozmiar H2 (jak w Sekcji 2 i 3). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-report {
		padding: 28px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-report__heading {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter zgodny z konwencją reszty motywu. */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-report {
		padding: 24px 16px;
	}
}

/* Sekcja 5 — „Jak przebiega Analiza Decyzji?”, wyłącznie produkt ID 2365. Otwarty,
   jasny kierunek wizualny — bez dużego białego panelu (bez border/shadow/radius,
   inaczej niż Sekcje 2, 3 i 4): wyłącznie płaskie, chłodne tło i pionowy proces
   z dekoracyjnym łącznikiem. Klasa celowo nazwana `.oai-service-process`, nie
   `.oai-process` — ta ostatnia jest już zajęta przez animowany, poziomy/pionowy
   proces Sekcji 3 strony głównej (assets/css/how-it-works.css) i nie może zostać
   ponownie użyta ani skopiowana. Renderowana przez woocommerce_after_single_product_summary
   (priorytet 20, bezpośrednio po Sekcji 4 na priorytecie 15), więc jest naturalnym
   potomkiem `.post-2365` — do skalowania wystarczy `.post-2365 .oai-service-process`,
   analogicznie do Sekcji 2, 3 i 4. */

.oai-site .oai-service-product .post-2365 .oai-service-process {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 48px 40px;
	background: #F6FAFC;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-process__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__lead {
	margin: 0;
	max-width: 460px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Proces: cztery kroki jeden pod drugim, numer w stałej 40px kolumnie, treść
   w elastycznej kolumnie. Łącznik to wyłącznie dekoracyjny pseudo-element
   (jedyne dozwolone użycie position: absolute w tej sekcji) wypełniający
   dokładnie przerwę (gap: 40px) między kolejnymi krokami — nie wystaje ani
   nad krok 01, ani pod krok 04, bo ostatni krok nie otrzymuje ::before. */

.oai-site .oai-service-product .post-2365 .oai-service-process__steps {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__step {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 20px;
	transform: translateX(-50%);
	width: 1px;
	height: 40px;
	background: rgba(33, 225, 253, 0.35);
}

.oai-site .oai-service-product .post-2365 .oai-service-process__number {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-process__step-content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__step-title {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-process__step-description {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: dwie główne kolumny sekcji — intro (lewa, ~35%) i proces (prawa, ~65%). */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-process__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
		align-items: start;
		gap: 64px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-process__steps {
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji, jeden logiczny gutter. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-process {
		margin-top: 32px;
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18–20px, dedykowany rozmiar H2 i numeru
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-process {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-process__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-process__number {
		font-size: 18px;
	}
}

/* Mobile do 360px: minimalny gutter — nie mniej niż 16px na najwęższym ekranie. */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-process {
		padding: 28px 16px;
	}
}

/* Sekcja 6 — „Jakie dokumenty przygotować do Analizy Decyzji?”, wyłącznie produkt
   ID 2365. Białe tło całej sekcji, intro na pełnej szerokości nad główną
   zawartością — inaczej niż Sekcje 2–5, gdzie intro stoi obok treści. Dwie
   asymetryczne kolumny: granatowy blok dokumentu podstawowego i otwarta lista
   materiałów dodatkowych w układzie 2×2. Renderowana przez
   woocommerce_after_single_product_summary (priorytet 25, bezpośrednio po
   Sekcji 5 na priorytecie 20), więc jest naturalnym potomkiem `.post-2365` —
   do skalowania wystarczy `.post-2365 .oai-service-documents`, analogicznie
   do Sekcji 2–5. */

.oai-site .oai-service-product .post-2365 .oai-service-documents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 48px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__lead {
	margin: 0;
	max-width: 620px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__content {
	margin-top: 40px;
	min-width: 0;
	max-width: 100%;
}

/* Granatowy blok dokumentu podstawowego — jedyny mocny element kolorystyczny
   sekcji, z jednym subtelnym cyanowym akcentem po lewej krawędzi. */

.oai-site .oai-service-product .post-2365 .oai-service-documents__primary {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-navy);
	border-left: 3px solid var(--oai-color-cyan);
	border-radius: var(--oai-radius-l);
	padding: 32px;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__primary-label {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__primary-title {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__primary-description {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Materiały dodatkowe — układ otwarty, bez kart, bez cieni, bez ikon. */

.oai-site .oai-service-product .post-2365 .oai-service-documents__additional {
	min-width: 0;
	max-width: 100%;
	margin-top: 40px;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__additional-title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__item {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding-top: 16px;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__item:not(:first-child) {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__item-title {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__item-description {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Komunikat końcowy — pełna szerokość, bardzo jasne cyanowe tło, spokojny ton;
   ten sam wzorzec co .oai-service-report__notice (Sekcja 4). */

.oai-site .oai-service-product .post-2365 .oai-service-documents__notice {
	margin-top: 40px;
	padding: 20px 24px;
	background: rgba(33, 225, 253, 0.08);
	border-left: 2px solid var(--oai-color-cyan);
	border-radius: 0 var(--oai-radius-m) var(--oai-radius-m) 0;
}

.oai-site .oai-service-product .post-2365 .oai-service-documents__notice p {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 700px: materiały dodatkowe w układzie 2×2, jeżeli tekst pozostaje czytelny —
   separator wyłącznie pomiędzy dwoma rzędami, nie pomiędzy kolumnami. */

@media (min-width: 700px) {
	.oai-site .oai-service-product .post-2365 .oai-service-documents__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 0;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-documents__item {
		border-top: none;
		padding-top: 0;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-documents__item:nth-child(n+3) {
		border-top: 1px solid var(--oai-color-border);
		padding-top: 20px;
		margin-top: 20px;
	}
}

/* Od 900px: dwie asymetryczne kolumny głównej zawartości — blok podstawy
   (lewa, ~37,5%) i materiały dodatkowe (prawa, ~62,5%). Intro pozostaje na
   pełnej szerokości nad tym układem. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-documents__content {
		display: grid;
		grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
		align-items: start;
		gap: 60px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-documents__additional {
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i bloku podstawy, jeden logiczny gutter. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-documents {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-documents__primary {
		padding: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18–20px, dedykowany rozmiar H2 (jak w
   pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-documents {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-documents__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter — nie mniej niż 16px na najwęższym ekranie. */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-documents {
		padding: 28px 16px;
	}
}

/* Sekcja 7 — „Zobacz fragment Analizy Decyzji”, wyłącznie produkt ID 2365. Krótka,
   lekka sekcja z jednym zanonimizowanym zrzutem raportu w ramce — spokojny,
   dokumentowy charakter, różny od wszystkich poprzednich sekcji (bez granatu,
   bez procesu, bez kart materiałów). Renderowana przez
   woocommerce_after_single_product_summary (priorytet 30, bezpośrednio po
   Sekcji 6 na priorytecie 25), więc jest naturalnym potomkiem `.post-2365` —
   do skalowania wystarczy `.post-2365 .oai-service-preview`, analogicznie do
   Sekcji 2–6. Kolejność DOM (tekst → figura → informacja o danych) odpowiada
   naturalnemu układowi mobile/tablet; na desktopie informacja o danych jest
   celowo przeniesiona do lewej kolumny przez jawne umiejscowienie w CSS Grid
   (grid-column/grid-row), nie przez `order` — obraz pozostaje wizualnie
   wyśrodkowany w prawej kolumnie na wysokości obu bloków tekstu. */

.oai-site .oai-service-product .post-2365 .oai-service-preview {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 48px 40px;
	background: #F5F9FA;
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__text {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__lead {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__note {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Podgląd — biała ramka z bardzo subtelnym cieniem, obraz w całości, bez
   przycinania (object-fit: contain, bez object-position). */

.oai-site .oai-service-product .post-2365 .oai-service-preview__figure {
	margin: 32px 0 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	box-shadow: 0 2px 10px rgba(1, 2, 66, 0.05);
	padding: 16px;
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: var(--oai-radius-m);
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__caption {
	margin: 12px 0 0;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-preview__data-notice {
	margin: 24px 0 0;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: asymetryczne dwie kolumny — tekst (lewa, ~35%) i podgląd (prawa,
   ~65%), pionowo wyśrodkowane. Informacja o danych przeniesiona jawnym
   umiejscowieniem w gridzie do lewej kolumny, pod tekstem uzupełniającym. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-preview__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
		grid-template-rows: auto auto;
		column-gap: 60px;
		align-items: center;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-preview__text {
		grid-column: 1;
		grid-row: 1;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-preview__data-notice {
		grid-column: 1;
		grid-row: 2;
		margin-top: 24px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-preview__figure {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: center;
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i ramki podglądu. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-preview {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-preview__figure {
		padding: 12px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany
   rozmiar H2 (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-preview {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-preview__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-preview {
		padding: 28px 16px;
	}
}

/* Sekcja 8 — „Analiza, Odwołanie czy Wezwanie?”, wyłącznie produkt ID 2365. Jeden
   wspólny, porównawczy panel podzielony na trzy segmenty (nie trzy osobne karty).
   Nazwa przestrzeni celowo `.oai-service-choice`, nie `.oai-service-comparison` —
   uniknięcie mylącego podobieństwa do już istniejącego `.oai-services` (Sekcja 5
   strony głównej, assets/css/services-comparison.css). Mechanizm separatorów:
   `.__list` jest flex-column na mobile/tablet (separator = border-top pomiędzy
   elementami) i przełącza się na flex-row od 900px (separator = border-left) —
   jeden, wspólny mechanizm zamiast duplikowania reguł. `margin-top: auto` na
   statusie/linku wyrównuje je do dołu segmentu przy nierównej długości opisów,
   bez sztywnych wysokości w pikselach. Renderowana przez
   woocommerce_after_single_product_summary (priorytet 35, bezpośrednio po
   Sekcji 7 na priorytecie 30), więc jest naturalnym potomkiem `.post-2365` —
   do skalowania wystarczy `.post-2365 .oai-service-choice`, analogicznie do
   Sekcji 2–7. Focus-visible linku celowo nie jest tu redeklarowany — obowiązuje
   już globalna reguła `.oai-site a:focus-visible` z assets/css/main.css. */

.oai-site .oai-service-product .post-2365 .oai-service-choice {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 48px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__lead {
	margin: 0;
	max-width: 620px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Panel: jeden wspólny kontener z obramowaniem, trzy segmenty rozdzielone
   cienką linią — pionową na desktopie, poziomą na tablecie/mobile. */

.oai-site .oai-service-product .post-2365 .oai-service-choice__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 28px;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__item + .oai-service-choice__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__item--current {
	background: rgba(33, 225, 253, 0.06);
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__situation {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 13px;
	font-weight: 600;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__name {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__description {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__status {
	margin-top: auto;
	max-width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: auto;
	max-width: 100%;
	font-size: 15px;
	font-weight: 700;
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-border);
	text-underline-offset: 3px;
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__link:hover {
	text-decoration-color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-choice__notice {
	margin: 24px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: panel poziomy — trzy równe kolumny, separator pionowy zamiast
   poziomego, spójna wysokość segmentów przez naturalne rozciąganie flex
   (align-items: stretch, domyślne), bez sztywnych wartości w pikselach. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-choice__list {
		flex-direction: row;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-choice__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-choice__item + .oai-service-choice__item {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

/* Mobile do 600px: mniejszy padding sekcji i segmentów. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-choice {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-choice__item {
		padding: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany
   rozmiar H2 (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-choice {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-choice__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-choice {
		padding: 28px 16px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-choice__item {
		padding: 20px 16px;
	}
}

/* Sekcja 9 — „Najczęstsze pytania”, wyłącznie produkt ID 2365. Jedna szeroka
   kolumna (bez podziału intro/lista z FAQ strony głównej). Mechanizm plusa/minusa
   i stanu otwartego celowo replikuje język mikrointerakcji `.oai-faq` (FAQ strony
   głównej, assets/css/home-faq.css) — te same reguły wizualne, ale we własnej,
   nieskolidowanej przestrzeni nazw `.oai-service-faq`, bez kopiowania układu
   dwóch kolumn ani bocznego CTA. Renderowana przez
   woocommerce_after_single_product_summary (priorytet 40, bezpośrednio po
   Sekcji 8 na priorytecie 35), więc jest naturalnym potomkiem `.post-2365` —
   do skalowania wystarczy `.post-2365 .oai-service-faq`, analogicznie do
   Sekcji 2–8. Reduced motion: globalna reguła w main.css
   (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już wszystkie poniższe przejścia. */

.oai-site .oai-service-product .post-2365 .oai-service-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 48px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Lista pytań — natywne details/summary, jedna szeroka kolumna ograniczona
   do wygodnej szerokości czytania, wiersze oddzielone subtelną linią. */

.oai-site .oai-service-product .post-2365 .oai-service-faq__list {
	margin: 32px 0 0;
	max-width: 960px;
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__item {
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__item[open] {
	background: rgba(33, 225, 253, 0.05);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	max-width: 100%;
	padding: 18px 40px 18px 0;
	color: var(--oai-color-navy);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__question::-webkit-details-marker {
	display: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__question:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-service-product .post-2365 .oai-service-faq__question:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

/* Symbol plus zbudowany z dwóch linii w pseudo-elementach summary — ten sam
   wzorzec co .oai-faq__question w FAQ strony głównej. */

.oai-site .oai-service-product .post-2365 .oai-service-faq__question::before,
.oai-site .oai-service-product .post-2365 .oai-service-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__question::before {
	width: 14px;
	height: 2px;
	margin-top: -1px;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__question::after {
	right: 8px;
	width: 2px;
	height: 14px;
	margin-top: -7px;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__item[open] .oai-service-faq__question::after {
	opacity: 0;
}

.oai-site .oai-service-product .post-2365 .oai-service-faq__answer {
	margin: 0;
	max-width: 640px;
	padding: 0 40px 24px 0;
	color: var(--oai-color-navy-muted);
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: normal;
	word-break: normal;
}

/* Mobile do 600px: mniejszy wiersz pytania, bez prawego paddingu odpowiedzi. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-faq {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-faq__question {
		min-height: 52px;
		padding: 14px 32px 14px 0;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-faq__answer {
		padding-right: 0;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany
   rozmiar H2 (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-faq {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-faq__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-faq {
		padding: 28px 16px;
	}
}

/* Sekcja 10 — końcowe CTA, wyłącznie produkt ID 2365. Ostatnia sekcja strony
   produktu: domyka treść i kieruje linkiem kotwiczącym do istniejącego,
   nietkniętego natywnego bloku zakupu (#oai-product-buy w zaakceptowanym
   hero) — bez JavaScriptu, bez własnego scroll-behavior. Grafika jest
   prawdziwym elementem img (nie background-image), inaczej niż CTA strony
   głównej (assets/css/final-cta.css / template-parts/final-cta) — ten wzorzec
   posłużył wyłącznie jako punkt odniesienia jakości (paleta, ranga panelu,
   technika przejścia gradientowego), nie jako kod do skopiowania: układ,
   proporcje kolumn i mechanizm łączenia grafiki z img są tu inne.
   Domyślnie (mobile/szeroki tablet do 899px) grafika i tekst są w naturalnej
   kolejności DOM (figure, potem text) w jednej kolumnie. Od 900px panel
   przechodzi w dwie kolumny przez CSS Grid z jawnym grid-column na
   .oai-service-final-cta__text / __figure — celowo bez własności order — więc
   tekst trafia wizualnie po lewej, a grafika po prawej, mimo że w DOM grafika
   jest pierwsza (ta sama technika jawnego pozycjonowania co w Sekcji 7).
   Renderowana przez woocommerce_after_single_product_summary (priorytet 45,
   bezpośrednio po Sekcji 9 na priorytecie 40), więc jest naturalnym
   potomkiem `.post-2365`. Reduced motion: globalna reguła w main.css
   (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście box-shadow na linku CTA poniżej. */

.oai-site .oai-service-product .post-2365 .oai-service-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 64px;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-radius: var(--oai-radius-l);
	overflow: hidden;
	background: var(--oai-color-navy);
}

/* Grafika — element img prawdziwy (nie background-image). Na mobile/tablecie
   zachowuje naturalne proporcje 1600×650 (width: 100%, height: auto), więc
   object-fit: cover nie przycina niczego. Od 900px kolumna grafiki dostaje
   pełną wysokość wiersza grida, a cover przycina boki zdjęcia — dłonie i oba
   dokumenty są wyśrodkowane w kadrze, więc object-position: center nie ucina
   żadnej z dłoni; kadrowaniu ulegają wyłącznie skrajne krawędzie (laptop po
   lewej, kalkulator po prawej). */

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__figure {
	--oai-final-cta-seam: linear-gradient(180deg, rgba(1, 2, 66, 0) 62%, var(--oai-color-navy) 100%);
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--oai-final-cta-seam);
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__text {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 40px 32px 44px;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__lead {
	margin: 0 0 28px;
	max-width: 480px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #C7CFEA;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 28px;
	border-radius: 8px;
	background: var(--oai-color-cyan);
	color: var(--oai-color-navy);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__link:hover {
	box-shadow: 0 0 0 2px var(--oai-color-white);
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__link:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-service-product .post-2365 .oai-service-final-cta__link:focus-visible {
	outline: 2px solid var(--oai-color-white);
	outline-offset: 2px;
}

.oai-site .oai-service-product .post-2365 .oai-service-final-cta__note {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.5;
	color: #C7CFEA;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: dwie kolumny przez CSS Grid z jawnym grid-column (bez order) —
   tekst po lewej (kolumna 1, ok. 57%), grafika po prawej (kolumna 2, ok.
   43%), mimo że w DOM grafika występuje jako pierwsza. Grafika dostaje pełną
   wysokość wiersza (align-items: stretch), więc nie potrzebuje sztywnej
   wysokości w pikselach — wiersz wyznacza wysokość kolumny tekstowej. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__panel {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: 380px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__text {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		padding: 56px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__figure {
		--oai-final-cta-seam: linear-gradient(90deg, var(--oai-color-navy) 0%, rgba(1, 2, 66, 0.5) 14%, rgba(1, 2, 66, 0) 32%);
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__image {
		height: 100%;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__lead {
		max-width: 460px;
	}
}

/* Mobile do 600px: mniejszy padding tekstu, link CTA na pełną szerokość. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2365 .oai-service-final-cta {
		margin-top: 48px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__text {
		padding: 32px 24px 36px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__link {
		width: 100%;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany
   rozmiar H2 (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__text {
		padding: 28px 18px 32px;
	}

	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2365 .oai-service-final-cta__text {
		padding: 24px 16px 28px;
	}
}

/* Sekcja 1 — hero strony „Gotowe Odwołanie”, wyłącznie produkt ID 2366. Ten sam mechanizm
   izolacji co hero produktu 2365 (patrz wyżej): selektor bazuje na klasie `post-2366`,
   dodawanej automatycznie przez post_class()/wc_product_class(). Produkty 2365 i 2368 nie
   są objęte żadną z poniższych reguł. Przestrzeń nazw celowo odrębna od `.oai-service-hero__*`
   produktu 2365: `.oai-appeal-hero__*`, zgodnie z finalną decyzją PLAN_GOTOWE_ODWOLANIE_v1.1.md.

   Korekta analogiczna do produktu 2365: natywna reguła WooCommerce
   `.woocommerce div.product div.summary { width:48%; float:right; }` ma specyficzność
   (0,3,2) i wygrywałaby z regułą Etapu 2 (0,3,0) bez poniższego, bardziej specyficznego
   selektora — stąd float/width/clear z !important jako jawnie dozwolony wyjątek (ten sam
   udokumentowany powód co przy produkcie 2365). */

.woocommerce .oai-site .oai-service-product div.product.post-2366 div.summary.entry-summary {
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: none;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.75rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__lead {
	margin: 0 0 24px;
	max-width: 560px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__benefits li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(33, 225, 253, 0.16);
	border: 1px solid var(--oai-color-cyan);
}

/* Karta zakupu — obejmuje natywną cenę, natywny formularz add-to-cart i template-part
   z krótkimi informacjami/notatką o formularzu po płatności. Cena, ilość, przycisk i nonce
   pozostają w 100% natywnym renderem WooCommerce; poniższe reguły stylują wyłącznie
   istniejące, publiczne klasy WooCommerce (identycznie jak w karcie zakupu produktu 2365). */

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.06);
	padding: 32px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .price {
	display: block;
	margin: 0 0 20px;
	font-size: 2rem;
	font-weight: 800;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .quantity .qty {
	width: 72px;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid var(--oai-color-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	color: var(--oai-color-navy);
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 100%;
	padding: 14px 28px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: var(--oai-color-navy);
	color: var(--oai-color-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	box-sizing: border-box;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .single_add_to_cart_button:hover {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__assurance {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__usp {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__usp li {
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-hero__note {
	margin: 0;
	max-width: 420px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Reduced motion: globalne wyłączenie transition/animation w main.css
   (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście box-shadow na przycisku. */

/* Desktop od 900px: dwie kolumny, lewa wyraźnie szersza, karta zakupu o komfortowej,
   ale elastycznej szerokości — te same proporcje co karta zakupu produktu 2365. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2366 .summary {
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
		gap: 64px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy {
		max-width: 430px;
	}

	/* Trzy informacje w jednym rzędzie wyłącznie na tym breakpointcie — tablet i mobile
	   zachowują wcześniejszy układ (siatka trzech/jednej kolumny, patrz wyżej i niżej). */

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__usp {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__usp li {
		width: auto;
		min-width: 0;
		white-space: nowrap;
	}
}

/* Tablet: poniżej 900px pozostaje jedna kolumna, tak jak przy produkcie 2365. */

@media (max-width: 899px) {
	body.postid-2366 .oai-site .oai-service-product {
		padding-bottom: 72px;
	}
}

/* Mobile do 600px: formularz w jednej kolumnie (ilość nad przyciskiem), krótkie informacje
   w jednej kolumnie, pełna szerokość przycisku. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy {
		padding: 24px 20px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .cart {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .quantity {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .quantity .qty {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .single_add_to_cart_button {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__usp {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

/* Mobile do 480px: docelowy, mniejszy gutter boczny (18px) wyłącznie dla produktu 2366,
   przez klasę postid-2366 na <body> (ten sam powód co przy produkcie 2365: wrapper
   .oai-service-product jest elementem nadrzędnym wobec .post-2366). */

@media (max-width: 480px) {
	body.postid-2366 .oai-site .oai-service-product {
		padding-left: 18px;
		padding-right: 18px;
		padding-bottom: 56px;
	}
}

/* Mobile do 360px: minimalny gutter boczny (16px); dodatkowo bezpieczne zmniejszenie
   tekstu przycisku, żeby „Zamów Gotowe Odwołanie” miało szansę zmieścić się w jednej
   linii na najwęższych ekranach. */

@media (max-width: 360px) {
	body.postid-2366 .oai-site .oai-service-product {
		padding-left: 16px;
		padding-right: 16px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-hero__buy .single_add_to_cart_button {
		font-size: 14px;
		padding: 14px 16px;
	}
}

/* Sekcja 2 — sytuacje uzasadniające odwołanie, wyłącznie produkt ID 2366. Renderowana
   przez woocommerce_after_single_product_summary (priorytet 5), więc jest naturalnym
   potomkiem `.post-2366` — do skalowania wystarczy `.post-2366 .oai-appeal-reasons`.
   Przestrzeń nazw celowo odrębna od `.oai-service-definition` (Sekcja 2 produktu 2365):
   `.oai-appeal-reasons__*`, zgodnie z decyzją PLAN_GOTOWE_ODWOLANIE_v1.1.md. Brak numeracji
   (w odróżnieniu od Sekcji 2 produktu 2365) — każda sytuacja oznaczona wyłącznie subtelnym
   cyjanowym znacznikiem w CSS, bez wizualnych liczb. */

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 48px 40px;
	background: #F2F8FB;
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__lead {
	margin: 0;
	max-width: 420px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Lista sytuacji — jedna semantyczna ul, wizualnie dzielona na dwie kolumny od 700px
   (bez zmiany kolejności DOM: grid-auto-flow domyślny, wiersz po wierszu, więc kolejność
   wizualna 1-2 / 3-4 / 5-6 / 7 dokładnie odpowiada kolejności czytania). Każdy element ma
   subtelną linię dolną i mały cyjanowy znacznik zamiast liczby — brak kart, brak cieni. */

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__item {
	position: relative;
	min-width: 0;
	padding: 14px 12px 14px 26px;
	border-bottom: 1px solid var(--oai-color-border);
	font-size: 15px;
	line-height: 1.55;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__item:last-child {
	border-bottom: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 21px;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--oai-color-cyan);
}

/* Od 700px: lista przechodzi w dwie kolumny niezależnie od głównego układu (patrz też
   próg 900px niżej) — na węższym tablecie tekst pozostaje nad listą, ale sama lista może
   już korzystać z dodatkowej szerokości. */

@media (min-width: 700px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
}

/* Od 900px: dwie główne kolumny (tekst ~40% / lista ~60%), zgodnie z podaną proporcją
   38-42% / 58-62%. Poniżej tego progu tekst i lista pozostają w jednej kolumnie pionowej
   (dopasowane do rzeczywistej zawartości — lead ma max-width 420px i przy węższym tablecie
   dwie główne kolumny zaczynałyby ściskać tekst). */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__inner {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 48px;
		align-items: start;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__list {
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji, lista wraca do jednej kolumny (próg 700px
   wyżej jest już powyżej tego zakresu). */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-reasons {
		margin-top: 32px;
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-reasons {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-reasons__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-reasons {
		padding: 28px 16px;
	}
}

/* Sekcja 3 — odwołanie przygotowane indywidualnie (nie gotowy wzór), wyłącznie produkt
   ID 2366. Renderowana przez woocommerce_after_single_product_summary (priorytet 10,
   bezpośrednio po Sekcji 2 na priorytecie 5). Przestrzeń nazw `.oai-appeal-tailored__*`,
   wyraźnie inna wizualnie niż Hero (granat) i Sekcja 2 (jasnoniebieski panel): białe tło
   sekcji, asymetryczne dwie kolumny, po prawej rzeczywista infografika (element img) jako
   główny element, bez dodatkowego kolorowego kontenera wokół niej. Kolejność DOM (tekst,
   potem figure) jest jednocześnie kolejnością wizualną na każdej szerokości — brak
   potrzeby użycia `order`. */

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__text {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__title {
	margin: 0 0 20px;
	max-width: 640px;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__paragraph {
	margin: 0 0 16px;
	max-width: 560px;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__paragraph:last-of-type {
	margin-bottom: 0;
}

/* Infografika — prawdziwy element img (nie background-image), bez kadrowania i bez
   dodatkowego kolorowego kontenera. Zachowuje naturalne proporcje 1200×800 (3:2) na każdej
   szerokości dzięki width:100%/height:auto — object-fit i object-position celowo nieużyte,
   bo obraz zawiera tekst i nie wolno go przycinać. Bardzo subtelny cień wyłącznie po to,
   żeby oddzielić białą grafikę od białego tła sekcji. */

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__visual {
	margin: 32px 0 0;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__picture {
	display: block;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Od 1024px: dwie główne kolumny w równym podziale (ok. 50%/50%, w zakresie podanym jako
   50-52% / 48-50%). Próg 1024px pozostaje jak w poprzedniej korekcie: infografika zawiera
   drobniejszy tekst, a poniżej tej szerokości prawa kolumna staje się zbyt wąska, żeby
   podpisy na grafice pozostały czytelne. `align-items: start` (zamiast center) wyrównuje
   górną krawędź większej, pionowo dłuższej grafiki 5:4 z górą tekstu (okolice eyebrow/H2),
   zamiast wyśrodkowywać ją względem całego bloku tekstowego. Poniżej progu tekst i
   infografika pozostają w jednej kolumnie pionowej, infografika wyśrodkowana. */

@media (min-width: 1024px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__visual {
		margin-top: 0;
	}
}

/* Od 1200px: poprzedni podział 0.9fr/1.1fr tej samej szerokości usunięty — dzielenie na
   nowo tej samej przestrzeni zwężało lewą kolumnę i powodowało dodatkowe łamanie H2 oraz
   akapitów. Zamiast tego poszerzono sam kontener .oai-appeal-tailored__inner o dokładnie
   80px: `width: calc(100% + 80px)` wykorzystuje zwykłe przepełnienie blokowe w prawo (bez
   ujemnych marginesów), odzyskując prawy padding .oai-appeal-tailored (40px) oraz prawy
   padding .oai-service-product (40px) — dokładnie do krawędzi .oai-service-product, którego
   overflow-x: hidden chroni przed jakimkolwiek poziomym overflow strony. To realny,
   sprawdzony sufit: dalsze poszerzenie wymagałoby zmiany innego selektora niż __inner.
   Lewa kolumna dostaje sztywną szerokość 536px — dokładnie tyle, ile miała przy poprzednim,
   zaakceptowanym podziale 50%/50% w obrębie 1120px (blok wyżej) — więc H2 i akapity łamią
   się identycznie jak przed nieudaną korektą. Cała odzyskana szerokość (80px) trafia do
   prawej kolumny z grafiką. Zakres 1024-1199px celowo pozostaje przy regule z bloku wyżej. */

@media (min-width: 1200px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__inner {
		width: calc(100% + 80px);
		max-width: calc(100% + 80px);
		grid-template-columns: minmax(0, 536px) minmax(0, 1fr);
		gap: clamp(32px, 3vw, 48px);
		align-items: start;
	}
}

/* Poniżej 1024px (tablet i mobile): infografika wyśrodkowana, ograniczona rozsądnym
   max-width (ok. 960px), żeby na szerokim tablecie nie robiła się nieproporcjonalnie duża
   względem tekstu nad nią; poniżej tego max-width wypełnia pełną szerokość kontenera. */

@media (max-width: 1023px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__visual {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored {
		margin-top: 32px;
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-tailored {
		padding: 28px 16px;
	}
}

/* Sekcja 4 — z czego może korzystać argumentacja Gotowego Odwołania, wyłącznie produkt
   ID 2366. Renderowana przez woocommerce_after_single_product_summary (priorytet 15,
   bezpośrednio po Sekcji 3 na priorytecie 10). Przestrzeń nazw `.oai-appeal-foundations__*`,
   celowo inna niż Sekcje 2/3: jedna redakcyjna matryca sześciu obszarów oddzielonych
   liniami (border), bez kart, cieni, ikon i numeracji. Standardowa szerokość kontenera
   sekcji (bez specjalnego poszerzenia użytego wyłącznie w Sekcji 3 dla infografiki).
   Kolejność DOM sześciu <li> jest jednocześnie kolejnością wizualną na każdej szerokości —
   brak potrzeby użycia `order`. */

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Matryca sześciu obszarów — jedna semantyczna ul. Linie zamiast kart: border-top na całej
   liście + border-bottom na każdym elemencie na mobile (jedna kolumna); od 700px dochodzi
   border-right między kolumnami przez selektory nth-child, dobrane osobno dla układu
   dwukolumnowego i trzykolumnowego, żeby po zmianie liczby kolumn nie zostawały podwójne
   ani brakujące linie. Krótki cyjanowy akcent nad tytułem zamiast numeru czy ikony. */

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__grid {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item {
	min-width: 0;
	padding: 24px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item-title {
	position: relative;
	margin: 0 0 8px;
	padding-top: 14px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__note {
	margin: 32px 0 0;
	padding: 24px 28px;
	max-width: 100%;
	box-sizing: border-box;
	background: #F2F8FB;
	border-left: 2px solid var(--oai-color-cyan);
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 700px do 1023px: dwie kolumny, trzy rzędy. Kolumna 1 = elementy nieparzyste
   (1, 3, 5), kolumna 2 = parzyste (2, 4, 6). */

@media (min-width: 700px) and (max-width: 1023px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item {
		padding: 28px;
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item:nth-child(odd) {
		padding-left: 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item:nth-child(even) {
		padding-right: 0;
		border-right: none;
	}
}

/* Od 1024px: trzy kolumny, dwa rzędy. Kolumna 1 = 3n+1 (1, 4), kolumna 3 = 3n (3, 6)
   traci border-right i prawy padding — bez tego linia po prawej stronie ostatniej kolumny
   wyglądałaby jak przypadkowa ramka przy krawędzi sekcji. */

@media (min-width: 1024px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item {
		padding: 32px;
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item:nth-child(3n+1) {
		padding-left: 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__item:nth-child(3n) {
		padding-right: 0;
		border-right: none;
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations {
		margin-top: 32px;
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-foundations {
		padding: 28px 16px;
	}
}

/* Sekcja 5 — proces po zamówieniu Gotowego Odwołania, wyłącznie produkt ID 2366.
   Renderowana przez woocommerce_after_single_product_summary (priorytet 20, bezpośrednio
   po Sekcji 4 na priorytecie 15). Przestrzeń nazw `.oai-appeal-process__*`. Jedyna sekcja
   produktu 2366 z wizualną numeracją — uzasadnioną tu wprost, bo <ol> opisuje rzeczywisty,
   uporządkowany proces (w odróżnieniu od Sekcji 2 i 4, które celowo jej unikają). Numer
   01-05 pełni podwójną rolę z treści zadania: jest jednocześnie cyjanowym „punktem na osi”
   (mała okrągła plakietka) i widoczną cyfrą etapu — `aria-hidden="true"`, bo rzeczywista
   kolejność jest już dostępna dla czytników ekranu przez semantyczną listę <ol>. Kolejność
   DOM (numer, potem treść) jest jednocześnie kolejnością wizualną na każdej szerokości:
   mobile/tablet — flex-direction: row (numer po lewej); desktop — flex-direction: column
   (numer nad treścią) — bez użycia `order`. */

.oai-site .oai-service-product .post-2366 .oai-appeal-process {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Lista procesu — jedna semantyczna ol. Domyślnie (mobile/tablet, poniżej 1100px): jedna
   pionowa oś, każdy <li> to wiersz flex (numer po lewej, treść po prawej), łączona pionową
   linią biegnącą przez kolumnę numerów. Marker natywnej numeracji <ol> ukryty (list-style:
   none) — kolejność nadal dostępna dla czytników przez semantykę <ol>, wizualnie zastąpiona
   plakietką 01-05. */

.oai-site .oai-service-product .post-2366 .oai-appeal-process__list {
	position: relative;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__item {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
	padding: 0 0 32px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__item:last-child {
	padding-bottom: 0;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 32px;
	bottom: 0;
	left: 15px;
	width: 2px;
	background: var(--oai-color-navy);
	opacity: 0.15;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__number {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--oai-color-cyan);
	color: var(--oai-color-navy);
	font-size: 13px;
	font-weight: 700;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__item-title {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-process__note {
	margin: 32px 0 0;
	padding: 24px 28px;
	max-width: 100%;
	box-sizing: border-box;
	background: #F2F8FB;
	border-left: 2px solid var(--oai-color-cyan);
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 1100px: pozioma ścieżka pięciu równych kolumn. Linia procesu jako pojedynczy
   pseudo-element na liście, rozciągnięty od środka pierwszej do środka ostatniej kolumny
   (left/right: 10% = 100% / (2 × 5 kolumn)) — nie pięć osobnych segmentów per element,
   więc nie ma ryzyka przerw ani podwójnych linii. Numer wyśrodkowany nad treścią (zamiast
   wiersza numer+treść z układu poniżej 1100px) przez zmianę flex-direction z row na
   column — ta sama zasada „bez order”, inna tylko oś układu flex. */

@media (min-width: 1100px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-process__list {
		display: flex;
		gap: 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-process__list::before {
		content: "";
		position: absolute;
		top: 16px;
		left: 10%;
		right: 10%;
		height: 2px;
		background: var(--oai-color-navy);
		opacity: 0.15;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-process__item {
		flex: 1;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0 24px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-process__item:not(:last-child)::after {
		display: none;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-process__number {
		margin: 0 0 20px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-process__item-text {
		max-width: 220px;
	}
}

/* Od 1200px: dodatkowe poszerzenie wyłącznie listy procesu (nie całej sekcji, nie .__inner,
   nie intro/H2/lead) o 100px, symetrycznie wokół obecnego środka — `margin-left: -50px`
   plus `width: calc(100% + 100px)` (z dopasowanym `max-width`, żeby nie zostało nadpisane
   przez bazowe `max-width: 100%`). Bezpieczne bez overflow na każdej szerokości ≥1200px:
   przy viewport dokładnie 1200px lista i tak kończy się z zapasem przed krawędzią
   .oai-service-product (które ma overflow-x: hidden). Ponieważ oś procentowa linii
   (left/right: 10%) i pięć kolumn flex:1 są liczone względem własnej, teraz szerszej
   listy, punkty 01-05 i linia automatycznie zostają wyśrodkowane na nowej szerokości —
   nie wymaga to osobnej korekty. Zakres 1100-1199px celowo pozostaje przy regule wyżej. */

@media (min-width: 1200px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-process__list {
		width: calc(100% + 100px);
		max-width: calc(100% + 100px);
		margin-left: -50px;
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-process {
		margin-top: 32px;
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-process {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-process__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-process {
		padding: 28px 16px;
	}
}

/* Sekcja 6 — dokumenty potrzebne do przygotowania Gotowego Odwołania, wyłącznie produkt
   ID 2366. Renderowana przez woocommerce_after_single_product_summary (priorytet 25,
   bezpośrednio po Sekcji 5 na priorytecie 20). Przestrzeń nazw `.oai-appeal-documents__*`,
   celowo inna niż Sekcja 6 produktu 2365 (tam: dwie nierówne kolumny obok siebie) i niż
   Sekcje 4-5 produktu 2366 (matryca / oś procesu): jeden wspólny, wąsko obramowany moduł
   na pełnej szerokości sekcji, z granatowym pasem dokumentu podstawowego u góry i jasną
   listą materiałów dodatkowych poniżej — hierarchia pionowa, nie kolumnowa. Standardowa
   szerokość kontenera sekcji (bez specjalnego poszerzenia użytego w Sekcji 3 i 5). */

.oai-site .oai-service-product .post-2366 .oai-appeal-documents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Jeden wspólny moduł — pojedyncze obramowanie i promień narożników dla całości;
   overflow: hidden przycina górne narożniki granatowego pasa i dolne narożniki
   notatki do wspólnego kształtu, bez ustawiania border-radius na każdym dziecku. */

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__module {
	margin-top: 40px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

/* Granatowy pas dokumentu podstawowego — jedyny mocny element kolorystyczny modułu,
   z cyanowym akcentem po lewej krawędzi. Pełna szerokość modułu, nie osobna karta. */

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-navy);
	border-left: 3px solid var(--oai-color-cyan);
	padding: 32px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary-heading {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary-label {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary-title {
	margin: 0;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary-description {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Materiały dodatkowe — jasna część modułu, bez kart, cieni ani ikon; pozycje
   rozdzielone wyłącznie subtelną linią poziomą. */

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__additional {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 32px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__additional-label {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding-top: 16px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item:first-child {
	padding-top: 0;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item:not(:first-child) {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item-title {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Informacja końcowa — zintegrowana stopka modułu, bardzo jasne cyanowe tło,
   cienka linia u góry zamiast lewego akcentu (pas jest teraz poziomy, nie pionowy). */

.oai-site .oai-service-product .post-2366 .oai-appeal-documents__note {
	margin: 0;
	padding: 20px 32px;
	max-width: 100%;
	box-sizing: border-box;
	background: #F2F8FB;
	border-top: 1px solid var(--oai-color-cyan);
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 640px: materiały dodatkowe w dwóch kolumnach, jeśli tekst pozostaje czytelny —
   separator wyłącznie pomiędzy dwoma rzędami, nie pomiędzy kolumnami. */

@media (min-width: 640px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item {
		padding-top: 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item:not(:first-child) {
		border-top: none;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__item:nth-child(n+3) {
		border-top: 1px solid var(--oai-color-border);
		padding-top: 20px;
		margin-top: 0;
	}
}

/* Od 900px: dokument podstawowy przechodzi na układ poziomy — etykieta i H3 po lewej
   (stała szerokość kolumny), opis po prawej (elastyczna szerokość), wyśrodkowane
   pionowo. Poniżej tej szerokości blok pozostaje w jednej kolumnie (czytelniejszy
   na tabletach 768-899px, gdzie opis miałby zbyt mało miejsca obok stałej kolumny). */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary {
		display: grid;
		grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
		align-items: center;
		column-gap: 40px;
		padding: 36px 40px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary-description {
		margin: 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__additional {
		padding: 40px;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i wnętrza modułu. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-documents {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary,
	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__additional {
		padding: 24px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__note {
		padding: 18px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-documents {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__primary,
	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__additional {
		padding: 20px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-documents__note {
		padding: 16px 20px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-documents {
		padding: 28px 16px;
	}
}

/* Sekcja 7 — fragment przykładowego Gotowego Odwołania, wyłącznie produkt ID 2366.
   Renderowana przez woocommerce_after_single_product_summary (priorytet 30, bezpośrednio
   po Sekcji 6 na priorytecie 25). Przestrzeń nazw `.oai-appeal-preview__*`, celowo inna
   niż Sekcja 7 produktu 2365 (tam: jasne tło sekcji, tekst po lewej/podgląd po prawej,
   biała ramka na jasnym tle) i niż Sekcje 3-6 produktu 2366: `.oai-appeal-preview__figure`
   sama pełni rolę dużej granatowej sceny redakcyjnej, wewnątrz której biała kartka
   dokumentu (`__media`) wyraźnie odcina się od tła, a `__caption` (podpis + informacja
   o anonimizacji) stoi obok niej z cienkim cyjanowym akcentem. Białe zewnętrzne tło
   sekcji (jak Sekcje 3-6), bez specjalnego poszerzenia użytego w Sekcji 3 i 5 —
   standardowa szerokość kontenera produktu. */

.oai-site .oai-service-product .post-2366 .oai-appeal-preview {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Granatowa scena — jedyny mocny element kolorystyczny sekcji. Mobile/tablet: jedna
   kolumna, dokument nad podpisem (kolejność DOM). Białe tło całej sekcji wokół sceny
   pozwala granatowi i białej kartce dokumentu wyraźnie się odciąć. */

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__figure {
	margin: 40px 0 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
	padding: 32px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__media {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-white);
	border-radius: var(--oai-radius-m);
	box-shadow: 0 8px 24px rgba(1, 2, 66, 0.25);
	padding: 12px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 2px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__caption {
	margin: 24px 0 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 16px;
	border-left: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__caption-text {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-preview__privacy {
	margin: 0;
	padding-top: 16px;
	max-width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 1024px: figure przechodzi na dwie kolumny — dokument (lewa, ~58%) i podpis
   (prawa, ~42%), pionowo wyśrodkowane. Poniżej tej szerokości (tablet 768-1023px
   i mobile) treść pozostaje w jednej kolumnie — dokument i podpis w wąskiej
   kolumnie traciłyby czytelność obok siebie. */

@media (min-width: 1024px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-preview__figure {
		display: grid;
		grid-template-columns: minmax(0, 29fr) minmax(0, 21fr);
		align-items: center;
		column-gap: 48px;
		padding: 48px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-preview__caption {
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i sceny. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-preview {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-preview__figure {
		padding: 20px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-preview__media {
		padding: 8px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-preview {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-preview__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-preview__figure {
		padding: 16px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-preview {
		padding: 28px 16px;
	}
}

/* Sekcja 8 — „Analiza, Odwołanie czy Wezwanie?”, wyłącznie produkt ID 2366. Ten sam
   ogólny mechanizm co Sekcja 8 produktu 2365 (`.oai-service-choice`, patrz wyżej w tym
   pliku), celowo powtórzony jako spójny wzorzec wyboru usługi na obu stronach produktów,
   ale w całkowicie osobnej przestrzeni nazw `.oai-appeal-service-choice__*` i osobnym
   template-parcie — bez importu ani reużycia klas 2365. Separator: `.__list` jest
   flex-column na mobile/tablet (separator = border-top) i przełącza się na flex-row
   od 900px (separator = border-left) — jeden wspólny mechanizm zamiast duplikowania
   reguł. `margin-top: auto` na statusie/linku wyrównuje je do dołu segmentu przy
   nierównej długości opisów, bez sztywnych wysokości w pikselach. Renderowana przez
   woocommerce_after_single_product_summary (priorytet 35, bezpośrednio po Sekcji 7 na
   priorytecie 30), więc jest naturalnym potomkiem `.post-2366` — do skalowania
   wystarczy `.post-2366 .oai-appeal-service-choice`. Focus-visible linku celowo nie
   jest tu redeklarowany — obowiązuje już globalna reguła `.oai-site a:focus-visible`
   z assets/css/main.css. */

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__lead {
	margin: 0;
	max-width: 620px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Panel: jeden wspólny kontener z obramowaniem, trzy segmenty rozdzielone cienką
   linią — poziomą na mobile/tablecie, pionową na desktopie. */

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 28px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__item + .oai-appeal-service-choice__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__item--current {
	background: rgba(33, 225, 253, 0.06);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__situation {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 13px;
	font-weight: 600;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__name {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__description {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__status {
	margin-top: auto;
	max-width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: auto;
	max-width: 100%;
	font-size: 15px;
	font-weight: 700;
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-border);
	text-underline-offset: 3px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__link:hover {
	text-decoration-color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__notice {
	margin: 24px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: panel poziomy — trzy równe kolumny, separator pionowy zamiast poziomego,
   spójna wysokość segmentów przez naturalne rozciąganie flex (align-items: stretch,
   domyślne), bez sztywnych wartości w pikselach. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__list {
		flex-direction: row;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__item + .oai-appeal-service-choice__item {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

/* Mobile do 600px: mniejszy padding sekcji i segmentów. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__item {
		padding: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice {
		padding: 28px 16px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-service-choice__item {
		padding: 20px 16px;
	}
}

/* Sekcja 9 — „Najczęstsze pytania”, wyłącznie produkt ID 2366. Ten sam ogólny
   mechanizm co Sekcja 9 produktu 2365 (`.oai-service-faq`, patrz wyżej w tym pliku):
   natywne details/summary, pytania domyślnie zamknięte, możliwość otwarcia kilku
   jednocześnie, bardzo jasne cyjanowe tło i cyjanowa dolna krawędź otwartego elementu,
   bez JavaScriptu. Celowo powtórzony jako spójny wzorzec FAQ na obu stronach produktów,
   ale w osobnej przestrzeni nazw `.oai-appeal-faq__*` i osobnym template-parcie — bez
   importu ani reużycia klas 2365. Symbol plus/minus wykonany techniką `content: "+"`
   na summary::after, zamienianą na `content: "−"` przez selektor `[open]` (prostszy
   mechanizm niż dwupseudoelementowe linie Sekcji 9 produktu 2365, wybrany świadomie dla
   tej sekcji). Renderowana przez woocommerce_after_single_product_summary (priorytet 40,
   bezpośrednio po Sekcji 8 na priorytecie 35), więc jest naturalnym potomkiem
   `.post-2366` — do skalowania wystarczy `.post-2366 .oai-appeal-faq`. Focus-visible
   summary korzysta z tego samego globalnego mechanizmu `html[data-oai-input="keyboard"]`
   co pozostałe elementy motywu niebędące linkiem `<a>`. Reduced motion: globalna reguła
   w main.css (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście tła/obramowania poniżej. */

.oai-site .oai-service-product .post-2366 .oai-appeal-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Lista pytań — natywne details/summary, jedna szeroka kolumna ograniczona
   do wygodnej szerokości czytania, wiersze oddzielone subtelną linią. */

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__list {
	margin: 32px 0 0;
	max-width: 960px;
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__item {
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__item[open] {
	background: rgba(33, 225, 253, 0.05);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	max-width: 100%;
	padding: 18px 40px 18px 0;
	color: var(--oai-color-navy);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__question::-webkit-details-marker {
	display: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__question:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-service-product .post-2366 .oai-appeal-faq__question:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

/* Symbol plus/minus — tekstowy znak w pseudo-elemencie summary::after, zamieniany
   przez atrybut [open]; wyłącznie dekoracyjny (aria-hidden nie jest tu potrzebny,
   ponieważ ::after nigdy nie trafia do drzewa dostępności). */

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__question::after {
	content: "+";
	flex: none;
	margin-left: auto;
	padding-left: 16px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__item[open] .oai-appeal-faq__question::after {
	content: "−";
}

.oai-site .oai-service-product .post-2366 .oai-appeal-faq__answer {
	margin: 0;
	max-width: 640px;
	padding: 0 40px 24px 0;
	color: var(--oai-color-navy-muted);
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: normal;
	word-break: normal;
}

/* Mobile do 600px: mniejszy wiersz pytania, bez prawego paddingu odpowiedzi. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-faq {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-faq__question {
		min-height: 52px;
		padding: 14px 32px 14px 0;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-faq__answer {
		padding-right: 0;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-faq {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-faq__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-faq {
		padding: 28px 16px;
	}
}

/* Sekcja 10 — końcowe CTA, wyłącznie produkt ID 2366. Ostatnia sekcja strony produktu:
   domyka treść i kieruje kotwicą `#oai-appeal-buy` do istniejącego, nietkniętego
   natywnego bloku zakupu w zaakceptowanym Hero — bez JavaScriptu, bez własnego
   scroll-behavior. Ten sam ogólny mechanizm co Sekcja 10 produktu 2365
   (`.oai-service-final-cta`, patrz wyżej w tym pliku): jeden granatowy panel,
   overflow: hidden na wspólnym zaokrągleniu, grafika jako prawdziwy element img,
   cyjanowy przycisk, gradient na styku tekstu i zdjęcia. Celowo powtórzony jako
   spójny wzorzec finalnego CTA na obu stronach produktów, ale w osobnej przestrzeni
   nazw `.oai-appeal-final-cta__*` i osobnym template-parcie. Różnica względem 2365:
   w DOM `__content` występuje PRZED `__media` (zgodnie z preferowaną strukturą tego
   polecenia), więc naturalna kolejność (mobile/tablet: content nad media; desktop:
   content w pierwszej kolumnie po lewej) nie wymaga jawnego `grid-column` ani `order`
   — inaczej niż w 2365, gdzie figure poprzedza text w DOM. Renderowana przez
   woocommerce_after_single_product_summary (priorytet 45, bezpośrednio po Sekcji 9
   na priorytecie 40), więc jest naturalnym potomkiem `.post-2366` — do skalowania
   wystarczy `.post-2366 .oai-appeal-final-cta`. Reduced motion: globalna reguła
   w main.css (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście box-shadow na przycisku poniżej. */

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-radius: var(--oai-radius-l);
	overflow: hidden;
	background: var(--oai-color-navy);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__content {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 40px 32px 44px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__text {
	margin: 0 0 28px;
	max-width: 480px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #C7CFEA;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 28px;
	border-radius: 8px;
	background: var(--oai-color-cyan);
	color: var(--oai-color-navy);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__button:hover {
	box-shadow: 0 0 0 2px var(--oai-color-white);
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__button:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__button:focus-visible {
	outline: 2px solid var(--oai-color-white);
	outline-offset: 2px;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__note {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.5;
	color: #C7CFEA;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Grafika — element img prawdziwy (nie background-image). Na mobile/tablecie zachowuje
   naturalne proporcje 1600×800 (width: 100%, height: auto), więc object-fit: cover nie
   przycina niczego. Od breakpointu desktopowego kolumna grafiki dostaje pełną wysokość
   wiersza, a cover przycina wyłącznie skrajne krawędzie kadru (okno po lewej, regał po
   prawej) — twarz, dłonie i trzymana kartka pozostają na środku/prawej stronie kadru,
   poza obszarem kadrowania i poza zasięgiem gradientu poniżej. */

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__media {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* Od 1024px: dwie kolumny przez CSS Grid, bez order i bez jawnego grid-column —
   `__content` jest pierwszym dzieckiem w DOM, więc trafia naturalnie do pierwszej
   (lewej) kolumny, `__media` do drugiej (prawej). Grafika dostaje pełną wysokość
   wiersza (align-items: stretch), więc nie potrzebuje sztywnej wysokości w pikselach.
   Poniżej tej szerokości (węższy desktop i tablet) panel pozostaje w jednej kolumnie —
   przycisk i H2 traciłyby czytelność przy dwóch zbyt wąskich kolumnach. */

@media (min-width: 1024px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__panel {
		display: grid;
		grid-template-columns: minmax(0, 14fr) minmax(0, 11fr);
		align-items: stretch;
		min-height: 380px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__content {
		align-self: center;
		padding: 56px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__text {
		max-width: 460px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__media::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(90deg, var(--oai-color-navy) 0%, rgba(1, 2, 66, 0.5) 14%, rgba(1, 2, 66, 0) 32%);
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__image {
		height: 100%;
	}
}

/* Mobile do 600px: mniejszy padding treści, przycisk na pełną szerokość. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta {
		margin-top: 32px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__content {
		padding: 32px 24px 36px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__button {
		width: 100%;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__content {
		padding: 28px 18px 32px;
	}

	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2366 .oai-appeal-final-cta__content {
		padding: 24px 16px 28px;
	}
}

/* Sekcja 1 — hero strony „Wezwanie do Zapłaty”, wyłącznie produkt ID 2368. Ten sam
   mechanizm architektoniczny i ta sama izolacja co hero produktów 2365 i 2366 (patrz
   wyżej): selektor bazuje na klasie `post-2368`, dodawanej automatycznie przez
   post_class()/wc_product_class(). Produkty 2365 i 2366 nie są objęte żadną z poniższych
   reguł. Przestrzeń nazw celowo odrębna od `.oai-service-hero__*` (2365) i
   `.oai-appeal-hero__*` (2366): `.oai-demand-hero__*`, zgodnie z finalną decyzją
   PLAN_WEZWANIE_DO_ZAPLATY_v1.1.md.

   Korekta analogiczna do produktów 2365 i 2366: natywna reguła WooCommerce
   `.woocommerce div.product div.summary { width:48%; float:right; }` ma specyficzność
   (0,3,2) i wygrywałaby z regułą Etapu 2 (0,3,0) bez poniższego, bardziej specyficznego
   selektora — stąd float/width/clear z !important jako jawnie dozwolony wyjątek (ten sam
   udokumentowany powód co przy produktach 2365 i 2366). */

.woocommerce .oai-site .oai-service-product div.product.post-2368 div.summary.entry-summary {
	float: none !important;
	clear: both !important;
	width: 100% !important;
	max-width: none;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.75rem, 1.4rem + 2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__lead {
	margin: 0 0 24px;
	max-width: 560px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__benefits li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(33, 225, 253, 0.16);
	border: 1px solid var(--oai-color-cyan);
}

/* Karta zakupu — obejmuje natywną cenę, natywny formularz add-to-cart i template-part
   z krótkimi informacjami/notatką o formularzu po płatności. Cena, ilość, przycisk i nonce
   pozostają w 100% natywnym renderem WooCommerce; poniższe reguły stylują wyłącznie
   istniejące, publiczne klasy WooCommerce (identycznie jak w kartach zakupu produktów
   2365 i 2366). */

.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.06);
	padding: 32px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .price {
	display: block;
	margin: 0 0 20px;
	font-size: 2rem;
	font-weight: 800;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .quantity .qty {
	width: 72px;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid var(--oai-color-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	color: var(--oai-color-navy);
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 100%;
	padding: 14px 28px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: var(--oai-color-navy);
	color: var(--oai-color-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	box-sizing: border-box;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .single_add_to_cart_button:hover {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__assurance {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__usp {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: start;
	column-gap: 16px;
	row-gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__usp li {
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy);
	text-align: center;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2368 .oai-demand-hero__note {
	margin: 0;
	max-width: 420px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Reduced motion: globalne wyłączenie transition/animation w main.css
   (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście box-shadow na przycisku. */

/* Desktop od 900px: dwie kolumny, lewa wyraźnie szersza, karta zakupu o komfortowej,
   ale elastycznej szerokości — te same proporcje co karty zakupu produktów 2365 i 2366. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2368 .summary {
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
		gap: 64px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy {
		max-width: 430px;
	}

	/* Quantity i przycisk w jednym wierszu na desktopie — grid zamiast flex, ponieważ
	   tekst przycisku „Zamów Wezwanie do Zapłaty” jest dłuższy niż w produktach 2365
	   i 2366 i przy flex-wrap zawijał się do kolejnego wiersza. Quantity jako pierwsza,
	   wąska kolumna (szerokość dopasowana do rzeczywistej szerokości pola .qty), przycisk
	   jako elastyczna druga kolumna wypełniająca resztę szerokości; min-width: 0 na
	   przycisku pozwala mu skurczyć się poniżej szerokości treści zamiast zawijać się do
	   nowego wiersza — tekst w środku może się naturalnie zawinąć na dwie linie i pozostaje
	   wyśrodkowany (text-align/justify-content: center już zdefiniowane wyżej). */

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .cart {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: stretch;
		gap: 16px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .single_add_to_cart_button {
		width: 100%;
		min-width: 0;
	}
}

/* Tablet: poniżej 900px pozostaje jedna kolumna, tak jak przy produktach 2365 i 2366. */

@media (max-width: 899px) {
	body.postid-2368 .oai-site .oai-service-product {
		padding-bottom: 72px;
	}
}

/* Mobile do 600px: formularz w jednej kolumnie (ilość nad przyciskiem), krótkie informacje
   w jednej kolumnie, pełna szerokość przycisku. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy {
		padding: 24px 20px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .cart {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .quantity {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .quantity .qty {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .single_add_to_cart_button {
		width: 100%;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__usp {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__usp li {
		text-align: left;
	}
}

/* Mobile do 480px: docelowy, mniejszy gutter boczny (18px) wyłącznie dla produktu 2368,
   przez klasę postid-2368 na <body> (ten sam powód co przy produktach 2365 i 2366: wrapper
   .oai-service-product jest elementem nadrzędnym wobec .post-2368). */

@media (max-width: 480px) {
	body.postid-2368 .oai-site .oai-service-product {
		padding-left: 18px;
		padding-right: 18px;
		padding-bottom: 56px;
	}
}

/* Mobile do 360px: minimalny gutter boczny (16px); dodatkowo bezpieczne zmniejszenie
   tekstu przycisku, żeby „Zamów Wezwanie do Zapłaty” miało szansę zmieścić się w jednej
   linii na najwęższych ekranach. */

@media (max-width: 360px) {
	body.postid-2368 .oai-site .oai-service-product {
		padding-left: 16px;
		padding-right: 16px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-hero__buy .single_add_to_cart_button {
		font-size: 14px;
		padding: 14px 16px;
	}
}

/* Sekcja 2 — sytuacje uzasadniające wysłanie wezwania, wyłącznie produkt ID 2368.
   Renderowana przez woocommerce_after_single_product_summary (priorytet 5, bezpośrednio
   po Hero), więc jest naturalnym potomkiem `.post-2368` — do skalowania wystarczy
   `.post-2368 .oai-demand-reasons`. Przestrzeń nazw `.oai-demand-reasons__*`, celowo inna
   niż `.oai-service-definition__*` (2365, numerowane pozycje 01-06) i
   `.oai-appeal-reasons__*` (2366, płaska lista z absolutnie pozycjonowaną kropką na
   elemencie li): tu jeden wspólny moduł z intro (eyebrow/H2/lead/wyróżnione zdanie)
   i pięcioma pozycjami tytuł+opis, mały cyjanowy znacznik osadzony na samym H3 (nie na
   li), bez numeracji. Marker wykonany jako pseudo-element czysto dekoracyjny — bez
   aria-hidden, bo ::before nigdy nie trafia do drzewa dostępności. */

.oai-site .oai-service-product .post-2368 .oai-demand-reasons {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__lead {
	margin: 0 0 24px;
	max-width: 100%;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Wyróżnione zdanie — cienki cyjanowy border po lewej, bez tła, bez ikony, bez
   wyglądu przycisku lub karty. */

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__statement {
	margin: 0;
	padding-left: 20px;
	max-width: 100%;
	box-sizing: border-box;
	border-left: 2px solid var(--oai-color-cyan);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Lista pięciu pozycji — jeden wspólny moduł z liniami zamiast kart. Marker: mały
   cyjanowy krążek osadzony bezpośrednio przy tytule (position: relative na H3), różny
   od dużej kropki na li w Sekcji 2 produktu 2366 i od poziomej kreski nad tytułem
   w Sekcji 4 produktu 2366. */

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__item {
	min-width: 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__item-title {
	position: relative;
	margin: 0 0 8px;
	padding-left: 14px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__item-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-reasons__note {
	margin: 40px 0 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 700px: każda pozycja przechodzi w dwie kolumny (tytuł ~34%, opis ~66%) —
   „na szerszym tablecie tytuł i opis mogą pozostać w dwóch kolumnach”. Poniżej tej
   szerokości tytuł pozostaje nad opisem. */

@media (min-width: 700px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-reasons__item {
		display: grid;
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		column-gap: 24px;
		align-items: start;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-reasons__item-title {
		margin: 0;
	}
}

/* Od 1024px: intro i lista przechodzą w dwie główne kolumny (~38% / ~62%) —
   „szeroki breakpoint” zgodnie z poleceniem, wyraźnie inny od 900px zastosowanego
   w Hero i w Sekcji 2 produktu 2366. */

@media (min-width: 1024px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-reasons__content {
		display: grid;
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
		column-gap: 48px;
		align-items: start;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-reasons__list {
		margin-top: 0;
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-reasons {
		margin-top: 32px;
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-reasons {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-reasons__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-reasons {
		padding: 28px 16px;
	}
}

/* Sekcja 3 — „Czym wezwanie różni się od odwołania?”, wyłącznie produkt ID 2368.
   Renderowana przez woocommerce_after_single_product_summary (priorytet 10, bezpośrednio
   po Sekcji 2 na priorytecie 5). Przestrzeń nazw `.oai-demand-difference__*`. Jeden
   wspólny moduł porównawczy (jedno obramowanie, jeden promień) z dwiema
   kolumnami korzystającymi z dokładnie tej samej klasy `__column` — bez żadnej reguły
   różnicującej lewą i prawą stronę, co gwarantuje identyczną wagę wizualną obu usług.
   Separator: pionowy border-left od breakpointu desktopowego, poziomy border-top poniżej
   niego — ten sam mechanizm co w innych sekcjach produktu, bez CSS order. */

.oai-site .oai-service-product .post-2368 .oai-demand-difference {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Wspólny moduł porównawczy — jedno obramowanie, jeden promień na kontenerze.
   Kolumny nie mają własnego tła, więc obcinanie narożników nie jest potrzebne.
   Mobile/węższy tablet: jedna kolumna (flex-column), naturalna
   kolejność DOM (Gotowe Odwołanie, potem Wezwanie do Zapłaty). */

.oai-site .oai-service-product .post-2368 .oai-demand-difference__comparison {
	margin-top: 40px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__column {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 32px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__column + .oai-demand-difference__column {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__column-label {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__column-title {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__column-text {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__item {
	position: relative;
	min-width: 0;
	padding: 10px 0 10px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__item:not(:first-child) {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-difference__note {
	margin: 32px 0 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: moduł przechodzi w dwie równe kolumny (flex: 1 1 0 na obu, bez różnicy
   w treści reguł) z pionowym separatorem zamiast poziomego — dokładnie ten sam
   mechanizm co w innych dwukolumnowych sekcjach produktu, bez CSS order. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-difference__comparison {
		flex-direction: row;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-difference__column {
		flex: 1 1 0;
		min-width: 0;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-difference__column + .oai-demand-difference__column {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

/* Mobile do 600px: mniejszy padding sekcji i kolumn. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-difference {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-difference__column {
		padding: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-difference {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-difference__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-difference__column {
		padding: 20px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-difference {
		padding: 28px 16px;
	}
}

/* Sekcja 4, „Co zawiera przygotowane wezwanie do zapłaty?", wyłącznie produkt ID 2368.
   Renderowana przez woocommerce_after_single_product_summary (priorytet 15, bezpośrednio
   po Sekcji 3 na priorytecie 10). Przestrzeń nazw `.oai-demand-contents__*`. Jedna lista
   `<ul>` w jednym wspólnym module (jedna ramka, jeden promień, jedno tło) z sześcioma
   elementami `<li>` w naturalnej kolejności DOM, bez CSS order. Na desktopie moduł
   przechodzi w siatkę 2 kolumn: elementy 1-2 i 4-5 tworzą pary kolumn, elementy 3 i 6
   (modyfikator `--full`) rozciągają się na pełną szerokość dzięki grid-column: 1 / -1,
   naturalne zachowanie CSS Grid, bez overflow: hidden i bez potrzeby przycinania (element
   `--core` z odmiennym tłem nie sąsiaduje z zaokrąglonymi narożnikami modułu). Element
   „Konkretne żądanie" (modyfikator `--core`) wyróżniony subtelnym tłem cyjanowym z
   istniejącej palety i cienkim akcentem ::before, bez nowego koloru, ikony ani etykiety. */

.oai-site .oai-service-product .post-2368 .oai-demand-contents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__module {
	margin-top: 40px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__item {
	position: relative;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 28px 32px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__item:not(:first-child) {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__item-title {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__item--core {
	background: rgba(33, 225, 253, 0.06);
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__item--core::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__item--core .oai-demand-contents__item-title {
	font-size: 1.1875rem;
}

.oai-site .oai-service-product .post-2368 .oai-demand-contents__note {
	margin: 32px 0 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: lista przechodzi w siatkę 2 kolumn. Elementy 2 i 5 (druga kolumna par 1-2 i
   4-5) tracą border-top na rzecz border-left, ponieważ sąsiadują z parą w tym samym
   wierszu, a nie stoją pod nią. Elementy --full (3 i 6) zachowują border-top z reguły
   bazowej, ponieważ zaczynają nowy wiersz modułu. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-contents__list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-contents__item--full {
		grid-column: 1 / -1;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-contents__item:nth-child(2),
	.oai-site .oai-service-product .post-2368 .oai-demand-contents__item:nth-child(5) {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

/* Mobile do 600px: mniejszy padding sekcji i elementów. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-contents {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-contents__item {
		padding: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-contents {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-contents__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-contents__item {
		padding: 20px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-contents {
		padding: 28px 16px;
	}
}

/* Sekcja 5, „Co dzieje się po zamówieniu Wezwania do Zapłaty?", wyłącznie produkt
   ID 2368. Renderowana przez woocommerce_after_single_product_summary (priorytet 20,
   bezpośrednio po Sekcji 4 na priorytecie 15). Przestrzeń nazw `.oai-demand-process__*`.
   Jedyna sekcja produktu 2368 na granatowym tle (biały tekst, cyjanowe akcenty), wzorem
   już zaakceptowanych sekcji procesu produktów 2365 i 2366, ale z odwróconą kolorystyką.
   Numer 01-05 jest widocznym tekstem (nie treścią pseudo-elementu), oznaczonym
   aria-hidden="true", ponieważ rzeczywista kolejność jest już przekazana przez
   semantyczną listę <ol>. Łącząca linia to pojedynczy pseudo-element (na każdym <li>
   poniżej 1100px, na całej liście od 1100px) - nie pięć osobnych segmentów - więc nie ma
   ryzyka przerw ani podwójnych linii, zgodnie z tą samą zasadą co w Sekcji 5 produktu
   2366. Poniżej 1100px numer po lewej, treść po prawej (flex-direction: row, bez order);
   od 1100px numer nad treścią (flex-direction: column, ta sama zasada, inna oś). */

.oai-site .oai-service-product .post-2368 .oai-demand-process {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-navy);
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__module {
	margin-top: 40px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 40px 32px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__step {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
	padding: 0 0 32px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__step:last-child {
	padding-bottom: 0;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 20px;
	bottom: 0;
	left: 15px;
	width: 1px;
	background: var(--oai-color-cyan);
	opacity: 0.4;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__number {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 32px;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__step-content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__step-title {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-process__step-text {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 1100px: pozioma ścieżka pięciu równych kolumn, zweryfikowana wobec długości treści
   analogicznej do już zaakceptowanej Sekcji 5 produktu 2366 (ten sam breakpoint). Linia
   jako pojedynczy pseudo-element na liście, rozciągnięty od środka pierwszej do środka
   ostatniej kolumny (left/right: 10% = 100% / (2 x 5 kolumn)). */

@media (min-width: 1100px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-process__list {
		flex-direction: row;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__list::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 10%;
		right: 10%;
		height: 1px;
		background: var(--oai-color-cyan);
		opacity: 0.4;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__step {
		flex: 1;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
		padding: 0 20px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__step:not(:last-child)::after {
		display: none;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__number {
		margin: 0 0 16px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__step-text {
		max-width: 210px;
	}
}

/* Jeżeli pięć kolumn przy 1024-1099px nadmiernie ściska tekst, breakpoint 1100px
   zapewnia wcześniejsze przełączenie na układ pionowy - tekst w tym zakresie pozostaje
   w bazowym, jednokolumnowym wariancie zamiast wymuszania pięciu kolumn. */

/* Mobile do 600px: mniejszy padding sekcji i modułu. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-process {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__module {
		padding: 28px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-process {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__module {
		padding: 24px 20px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-process {
		padding: 28px 16px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-process__module {
		padding: 20px 16px;
	}
}

/* Sekcja 6, „Jakie dokumenty przygotować do Wezwania do Zapłaty?", wyłącznie produkt
   ID 2368. Renderowana przez woocommerce_after_single_product_summary (priorytet 25,
   bezpośrednio po Sekcji 5 na priorytecie 20). Przestrzeń nazw `.oai-demand-documents__*`.
   Jasna, spokojniejsza sekcja po granatowej Sekcji 5 - jeden wspólny, asymetryczny
   moduł: od 900px lewa granatowa część (najważniejszy dokument, ok. 40%) obok jasnej
   prawej części (materiały dodatkowe, ok. 60%), poniżej 900px granatowa część nad jasną.
   Zamiast overflow: hidden na module (co przycinałoby granatowe tło do wspólnego
   promienia) każda część otrzymuje własny, częściowy border-radius dopasowany do
   krawędzi modułu, które faktycznie zajmuje - w poziomie lewe rogi na .primary i prawe
   na .additional, w pionie górne rogi na .primary i dolne na .additional. Zastrzeżenie
   jako osobny akapit pod modułem, nie jako część jego wewnętrznej stopki. */

.oai-site .oai-service-product .post-2368 .oai-demand-documents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__module {
	margin-top: 40px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__primary {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-navy);
	border-left: 3px solid var(--oai-color-cyan);
	border-radius: var(--oai-radius-l) var(--oai-radius-l) 0 0;
	padding: 32px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__additional {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 0 0 var(--oai-radius-l) var(--oai-radius-l);
	padding: 32px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__label {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__group-title {
	margin: 0;
	max-width: 100%;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__primary .oai-demand-documents__group-title {
	color: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__additional .oai-demand-documents__group-title {
	color: var(--oai-color-navy);
	margin: 0 0 20px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__primary-text {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__item {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 16px 0 0;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__item:first-child {
	padding-top: 0;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__item:not(:first-child) {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__item-title {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-documents__note {
	margin: 32px 0 0;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: moduł przechodzi w dwa poziome tory (40% / 60%). Promienie przełączają się
   z góra/dół (mobile/tablet) na lewo/prawo (desktop) - dokładnie ten sam mechanizm co
   border-top/border-left w Sekcji 4 i 5, tylko zastosowany do border-radius zamiast
   border-top. Bez overflow: hidden na żadnym etapie. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-documents__module {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-documents__primary {
		flex: 0 0 40%;
		max-width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: var(--oai-radius-l) 0 0 var(--oai-radius-l);
		padding: 40px 36px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-documents__additional {
		flex: 1 1 0;
		min-width: 0;
		border-radius: 0 var(--oai-radius-l) var(--oai-radius-l) 0;
		padding: 40px 40px;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i modułu. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-documents {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-documents__primary,
	.oai-site .oai-service-product .post-2368 .oai-demand-documents__additional {
		padding: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-documents {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-documents__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-documents__primary,
	.oai-site .oai-service-product .post-2368 .oai-demand-documents__additional {
		padding: 20px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-documents {
		padding: 28px 16px;
	}
}

/* Sekcja 7, „Zobacz fragment gotowego wezwania", wyłącznie produkt ID 2368. Renderowana
   przez woocommerce_after_single_product_summary (priorytet 30, bezpośrednio po Sekcji 6
   na priorytecie 25). Przestrzeń nazw `.oai-demand-preview__*`. Jasna, spokojna sekcja -
   celowo inna kompozycja niż `.oai-appeal-preview` produktu 2366 (tam: granatowa scena,
   dokument po lewej, podpis po prawej). Tutaj: jedna szeroka, bardzo delikatnie
   jasnocyjanowa scena mieszcząca obie strony dokumentu jako zwykłe obrazy z własnym
   subtelnym cieniem, bez overflow: hidden - strony nie stykają się z zaokrąglonymi
   narożnikami sceny, mają wokół siebie wyraźny padding, więc przycinanie nie jest
   potrzebne. Poniżej 1024px strony układają się jedna nad drugą w naturalnej kolejności
   DOM, bez CSS order. */

.oai-site .oai-service-product .post-2368 .oai-demand-preview {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__figure {
	margin: 40px 0 0;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__stage {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	background: rgba(33, 225, 253, 0.04);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	padding: 40px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__page {
	min-width: 0;
	max-width: 100%;
	width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 6px;
	box-shadow: 0 16px 32px rgba(1, 2, 66, 0.14);
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__caption {
	margin: 32px 0 0;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-preview__privacy {
	margin: 24px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 1024px: obie strony obok siebie, każda ograniczona do max-width, zeby nie
   wygladac jak nieczytelne miniatury ani nie rozciagac sceny ponad rozsadna
   szerokosc. Druga strona przesunieta pionowo tylko subtelnie (margin-top),
   bez zaburzania wyrownania ani wysokosci modulu. */

@media (min-width: 1024px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-preview__stage {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		gap: 48px;
		padding: 48px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-preview__page {
		flex: 1 1 0;
		max-width: 460px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-preview__page--second {
		margin-top: 32px;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i sceny. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-preview {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-preview__stage {
		padding: 24px;
		gap: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-preview {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-preview__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-preview__stage {
		padding: 18px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-preview {
		padding: 28px 16px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-preview__stage {
		padding: 14px;
	}
}

/* Sekcja 8, „Analiza, Odwołanie czy Wezwanie?", wyłącznie produkt ID 2368. Ten sam
   ogólny, już zaakceptowany mechanizm co Sekcja 8 produktów 2365 (`.oai-service-choice`)
   i 2366 (`.oai-appeal-service-choice`) - trzy segmenty jednego wspólnego panelu,
   pionowy separator od 900px (dokładny breakpoint odczytany z obu istniejących sekcji),
   `margin-top: auto` na statusie/linku dla wyrównania do dołu - odtworzone tu jeden do
   jednego, we własnej przestrzeni `.oai-demand-service-choice__*`, bez importu klas
   2365/2366. Jedna świadoma różnica: obie referencje stosują `overflow: hidden` na
   `.__list` dla wspólnego promienia, ale w 2366 bieżący element jest środkowy i nigdy
   nie styka się z żadnym narożnikiem - `overflow: hidden` jest tam zbędnym skopiowaniem
   z 2365 (gdzie bieżący element jest pierwszy i faktycznie styka się z narożnikiem).
   Tutaj bieżący element („Wezwanie do Zapłaty") jest ostatni w kolejności DOM i również
   styka się z narożnikiem (dolnym na mobile/tablecie, prawym na desktopie) - zamiast
   przycinać cały panel, promień jest ustawiony bezpośrednio na elemencie brzegowym
   (`.__item--current`, zawsze ostatnim), więc `overflow: hidden` nie jest tu używane.
   Focus-visible linku celowo nie jest redeklarowany - obowiązuje globalna reguła
   `.oai-site a:focus-visible` z assets/css/main.css, dokładnie jak w 2365/2366. */

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__lead {
	margin: 0;
	max-width: 620px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 28px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item + .oai-demand-service-choice__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item--current {
	background: rgba(33, 225, 253, 0.06);
	border-bottom-left-radius: var(--oai-radius-l);
	border-bottom-right-radius: var(--oai-radius-l);
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__situation {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 13px;
	font-weight: 600;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__name {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__description {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__status {
	margin-top: auto;
	max-width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: auto;
	max-width: 100%;
	font-size: 15px;
	font-weight: 700;
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-border);
	text-underline-offset: 3px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__link:hover {
	text-decoration-color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__notice {
	margin: 24px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Od 900px: panel poziomy - trzy równe kolumny, separator pionowy zamiast poziomego,
   dokładny breakpoint zaakceptowanych sekcji 2365 i 2366. Promień bieżącego elementu
   przełącza się z dolnego (mobile/tablet) na prawy (desktop), ponieważ pozostaje on
   ostatnią kolumną. */

@media (min-width: 900px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__list {
		flex-direction: row;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item + .oai-demand-service-choice__item {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item--current {
		border-bottom-left-radius: 0;
		border-top-right-radius: var(--oai-radius-l);
		border-bottom-right-radius: var(--oai-radius-l);
	}
}

/* Mobile do 600px: mniejszy padding sekcji i segmentów. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item {
		padding: 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice {
		padding: 28px 16px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-service-choice__item {
		padding: 20px 16px;
	}
}

/* Sekcja 9, „Najczęstsze pytania", wyłącznie produkt ID 2368. Ten sam ogólny, już
   zaakceptowany mechanizm FAQ co produkty 2365 (`.oai-service-faq`) i 2366
   (`.oai-appeal-faq`) - natywne details/summary, pytania domyślnie zamknięte, możliwość
   otwarcia kilku jednocześnie, bez JavaScriptu. Symbol plus/minus odtworzony z techniki
   2365: dwie cienkie cyjanowe linie w pseudo-elementach summary::before/::after tworzące
   plus, pionowa linia znika przy [open], zostawiając poziomą jako minus (nie technika
   pojedynczego znaku tekstowego "+"/"−" z 2366 - wybrana tu świadomie, dokładnie zgodnie
   z opisem tego zadania: dwa ramiona, pionowe znika w stanie otwartym). Odtworzone we
   własnej przestrzeni `.oai-demand-faq__*`, bez importu klas 2365/2366. Renderowana przez
   woocommerce_after_single_product_summary (priorytet 40, bezpośrednio po Sekcji 8 na
   priorytecie 35), naturalny potomek `.post-2368`. Reduced motion: globalna reguła w
   main.css (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście tła/obramowania poniżej. Focus-visible summary korzysta z tego
   samego globalnego mechanizmu `html[data-oai-input="keyboard"]` co 2365/2366 (nie
   globalnej reguły linków, ponieważ summary nie jest elementem `<a>`). */

.oai-site .oai-service-product .post-2368 .oai-demand-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
	padding: 56px 40px;
	background: var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Lista pytań - natywne details/summary, jedna szeroka kolumna ograniczona do
   wygodnej szerokości czytania, wiersze oddzielone subtelną linią. */

.oai-site .oai-service-product .post-2368 .oai-demand-faq__list {
	margin: 32px 0 0;
	max-width: 960px;
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__item {
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__item[open] {
	background: rgba(33, 225, 253, 0.05);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	max-width: 100%;
	padding: 18px 40px 18px 0;
	color: var(--oai-color-navy);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__question::-webkit-details-marker {
	display: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__question:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-service-product .post-2368 .oai-demand-faq__question:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

/* Symbol plus zbudowany z dwóch linii w pseudo-elementach summary - te same wartości
   co .oai-service-faq__question produktu 2365. */

.oai-site .oai-service-product .post-2368 .oai-demand-faq__question::before,
.oai-site .oai-service-product .post-2368 .oai-demand-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__question::before {
	width: 14px;
	height: 2px;
	margin-top: -1px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__question::after {
	right: 8px;
	width: 2px;
	height: 14px;
	margin-top: -7px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__item[open] .oai-demand-faq__question::after {
	opacity: 0;
}

.oai-site .oai-service-product .post-2368 .oai-demand-faq__answer {
	margin: 0;
	max-width: 640px;
	padding: 0 40px 24px 0;
	color: var(--oai-color-navy-muted);
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: normal;
	word-break: normal;
}

/* Mobile do 600px: mniejszy wiersz pytania, bez prawego paddingu odpowiedzi. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-faq {
		margin-top: 32px;
		padding: 40px 24px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-faq__question {
		min-height: 52px;
		padding: 14px 32px 14px 0;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-faq__answer {
		padding-right: 0;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-faq {
		padding: 32px 18px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-faq__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-faq {
		padding: 28px 16px;
	}
}

/* Sekcja 10 — końcowe CTA, wyłącznie produkt ID 2368. Ostatnia sekcja strony produktu:
   domyka treść i kieruje kotwicą `#oai-demand-buy` do istniejącego, nietkniętego natywnego
   bloku zakupu w zaakceptowanym Hero — bez JavaScriptu, bez własnego scroll-behavior.
   Renderowana przez woocommerce_after_single_product_summary (priorytet 45, bezpośrednio po
   Sekcji 9 na priorytecie 40), więc jest naturalnym potomkiem `.post-2368` — do skalowania
   wystarczy `.post-2368 .oai-demand-final-cta`.

   Celowe odejście od wzorca Sekcji 10 produktów 2365/2366 (`.oai-service-final-cta`,
   `.oai-appeal-final-cta`): tam zdjęcie jest prawdziwym elementem `img` w osobnej kolumnie
   `__media`, co wymaga `overflow: hidden` na panelu do przycięcia kwadratowych rogów obrazu
   do wspólnego zaokrąglenia. Tutaj, zgodnie z ostateczną decyzją, zdjęcie jest wyłącznie
   dekoracyjnym `background-image` nałożonym bezpośrednio na `__panel` — element, który sam
   niesie `border-radius`. Przeglądarka automatycznie przycina tło do zaokrąglonych rogów
   własnego elementu, więc `overflow: hidden` jest tu zbędny. DOM celowo uproszczony do
   jednego panelu i jednego kontenera treści (`__content`) — bez osobnego `__media`, bez
   `img`, bez `picture`/`source`.

   Tło to dwie nałożone warstwy: własny gradient granatowy (dla czytelności tekstu,
   niezależnie od kadrowania zdjęcia przy różnych szerokościach panelu) oraz zdjęcie
   (odwolai-wezwanie-do-zaplaty-final-cta.webp, 1536×1024). Na wąskim panelu (mobile/tablet,
   domyślnie poniżej 1024px) gradient jest niemal jednolicie granatowy — tekst rozciąga się
   na (prawie) całą szerokość panelu, więc potrzebuje pełnego pokrycia. Od 1024px panel
   przechodzi na czytelny układ „tekst po lewej, zdjęcie po prawej”: gradient słabnie wzdłuż
   osi poziomej, odsłaniając zdjęcie po prawej stronie, a `__content` dostaje ograniczoną
   szerokość, by nie nachodzić na odsłonięty fragment fotografii. Reduced motion: globalna
   reguła w main.css (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście box-shadow na przycisku poniżej. */

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 48px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__panel {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-radius: var(--oai-radius-l);
	background-color: var(--oai-color-navy);
	background-image: linear-gradient(180deg, rgba(1, 2, 66, 0.88) 0%, rgba(1, 2, 66, 0.94) 100%), url("../images/product-wezwanie-do-zaplaty/odwolai-wezwanie-do-zaplaty-final-cta.webp");
	background-repeat: no-repeat, no-repeat;
	background-position: center, right center;
	background-size: cover, cover;
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__content {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 40px 32px 44px;
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__text {
	margin: 0 0 28px;
	max-width: 480px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #C7CFEA;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 28px;
	border-radius: 8px;
	background: var(--oai-color-cyan);
	color: var(--oai-color-navy);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__button:hover {
	box-shadow: 0 0 0 2px var(--oai-color-white);
}

.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__button:focus-visible {
	outline: none;
}

html[data-oai-input="keyboard"] .oai-site .oai-service-product .post-2368 .oai-demand-final-cta__button:focus-visible {
	outline: 2px solid var(--oai-color-white);
	outline-offset: 2px;
}

/* Od 1024px: panel dostaje minimalną wysokość, by zdjęcie po prawej miało miejsce na
   ujawnienie się, gradient przechodzi na oś poziomą (ciemno po lewej, gdzie stoi tekst;
   przezroczyście po prawej, gdzie widoczna jest fotografia), a `__content` dostaje sztywny
   limit szerokości, by nie rozciągać się na odsłonięty fragment zdjęcia. */

@media (min-width: 1024px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__panel {
		display: flex;
		align-items: center;
		min-height: 420px;
		background-image: linear-gradient(90deg, rgba(1, 2, 66, 0.92) 0%, rgba(1, 2, 66, 0.65) 38%, rgba(1, 2, 66, 0.15) 62%, rgba(1, 2, 66, 0) 82%), url("../images/product-wezwanie-do-zaplaty/odwolai-wezwanie-do-zaplaty-final-cta.webp");
		background-position: center, right center;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__content {
		max-width: 560px;
		padding: 56px;
	}
}

/* Mobile do 600px: mniejszy padding treści, przycisk na pełną szerokość. */

@media (max-width: 600px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta {
		margin-top: 32px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__content {
		padding: 32px 24px 36px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__button {
		width: 100%;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), dedykowany rozmiar H2
   (jak w pozostałych sekcjach produktu). */

@media (max-width: 480px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__content {
		padding: 28px 18px 32px;
	}

	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-service-product .post-2368 .oai-demand-final-cta__content {
		padding: 24px 16px 28px;
	}
}