/* ==========================================================================
   Polecane dla Dzieci – treść wpisu (ładowana na is_singular() po main.css)
   Ujawnienie współpracy, ramka „W skrócie / Werdykt redakcji”, spis treści,
   typografia tekstu (Source Serif 4), tabele porównawcze, FAQ, bloki
   rozpoznawane przez inc/tresc.php (zalety/wady, produkt, werdykt, uwaga, CTA),
   tematy, stopka współpracy i powiązane.
   Szkielet wpisu (.wpis__glowa, .wpis__uklad, .metryczka, .wpis__foto) – main.css.
   ========================================================================== */

/* ---------- 1. Ujawnienie współpracy (nad tytułem – wymóg prawny) ---------- */

.ujawnienie {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	padding: 12px 16px;
	border: 1px solid #efd99a;
	border-radius: var(--r, 6px);
	background: var(--sponsor-tlo, #fdf3d7);
	color: var(--sponsor-tekst, #5c4300);
	font-family: var(--f-ui);
	font-size: .9375rem;
	line-height: 1.45;
}
.ujawnienie__tytul {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ujawnienie__tytul::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 7.2v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 7.2v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ujawnienie__opis { flex: 1 1 18rem; min-width: 0; }
.ujawnienie__opis strong { font-weight: 700; }
.ujawnienie a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 4px; white-space: nowrap; }
.ujawnienie a:hover { color: var(--atrament-mocny, #16283a); }

/* ---------- 2. Ramka „W skrócie” / „Werdykt redakcji” pod tytułem ---------- */

.werdykt {
	margin-top: 24px;
	border: 1px solid var(--linia, #dfe4ea);
	border-radius: var(--r-karta, 10px);
	background: var(--tlo-2, #f5f7f9);
	font-family: var(--f-ui);
	overflow: hidden;
}
.wpis__glowa .wrap > .werdykt { margin-top: 24px; }
.werdykt__tytul {
	padding: 18px 22px 0;
	color: var(--atrament, #22384f);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.werdykt--test .werdykt__tytul { color: var(--pomarancz-ciemny, #b4461b); }
.werdykt__tekst {
	padding: 8px 22px 20px;
	color: var(--atrament-mocny, #16283a);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Pasek najważniejszych danych: ocena, cena, wiek (termin, miejsce – gdy są). */
.werdykt__dane {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	margin: 0;
	border-top: 1px solid var(--linia, #dfe4ea);
	background: var(--tlo, #fff);
}
.werdykt__tytul + .werdykt__dane { margin-top: 14px; }
.werdykt__dane > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 6px;
	min-width: 0;
	padding: 14px 22px 16px;
	border-top: 1px solid var(--linia, #dfe4ea);
	margin-top: -1px;
	box-shadow: -1px 0 0 var(--linia, #dfe4ea);
}
.werdykt__dane dt {
	color: var(--tekst-3, #5f6e7d);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.werdykt__dane dd {
	margin: 0;
	color: var(--atrament-mocny, #16283a);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.werdykt__cena { font-size: 1.25rem !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
.werdykt__dane .ocena { gap: 8px; }
.werdykt__dane .ocena__liczba { font-size: 1.25rem; }
.werdykt__dane .ocena__skala { font-size: 1rem; }

/* ---------- 3. Spis treści ---------- */

.spis {
	font-family: var(--f-ui);
	border: 1px solid var(--linia, #dfe4ea);
	border-radius: var(--r-karta, 10px);
	background: var(--tlo, #fff);
}
.spis summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 16px;
	color: var(--atrament-mocny, #16283a);
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.spis summary::-webkit-details-marker { display: none; }
.spis summary::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid var(--tekst-2, #4b5d70);
	border-bottom: 2px solid var(--tekst-2, #4b5d70);
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.spis details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.spis__ile {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: 999px;
	background: var(--tlo-3, #e9edf2);
	color: var(--tekst-2, #4b5d70);
	font-size: .75rem;
	font-weight: 700;
}
.spis__lista {
	margin: 0;
	padding: 4px 16px 14px;
	list-style: none;
	counter-reset: spis;
}
.spis__lista li {
	counter-increment: spis;
	border-left: 2px solid var(--linia, #dfe4ea);
}
.spis__lista a {
	display: flex;
	gap: 10px;
	padding: 7px 0 7px 14px;
	color: var(--tekst-2, #4b5d70);
	font-size: .9375rem;
	line-height: 1.35;
	text-decoration: none;
}
.spis__lista a::before {
	content: counter(spis);
	flex: none;
	min-width: 1.1em;
	color: var(--tekst-3, #5f6e7d);
	font-variant-numeric: tabular-nums;
}
.spis__lista a:hover { color: var(--atrament-mocny, #16283a); text-decoration: underline; }
.spis__lista li.jest-tu { border-left-color: var(--pomarancz, #f4713b); }
.spis__lista li.jest-tu a { color: var(--atrament-mocny, #16283a); font-weight: 600; }

@media (min-width: 1000px) {
	/* Kolumna boczna: spis bez ramki, zawsze rozwinięty. */
	.spis { border: 0; border-radius: 0; background: none; }
	.spis summary {
		min-height: 0;
		padding: 0 0 12px;
		color: var(--tekst-3, #5f6e7d);
		font-size: .8125rem;
		letter-spacing: .07em;
		text-transform: uppercase;
		pointer-events: none;
	}
	.spis summary::after { display: none; }
	.spis__lista { padding: 0; }
	.spis__lista a { padding-block: 6px; }
}

/* ---------- 4. Typografia tekstu ---------- */

.prose {
	color: var(--tekst, #1f2a36);
	font-family: var(--f-tekst);
	font-size: clamp(1.125rem, 1.09rem + .18vw, 1.1875rem);
	line-height: 1.65;
	overflow-wrap: break-word;
	font-variant-numeric: proportional-nums;
}
.prose > * + *,
.prose .pld-produkt__opis > * + *,
.prose .pld-werdykt__tresc > * + *,
.prose .pld-uwaga__tresc > * + *,
.prose .pld-faq__a > * + * { margin-top: 1.05em; }

.prose p { text-wrap: pretty; }
.prose strong, .prose b { font-weight: 600; color: var(--atrament-mocny, #16283a); }

.prose h2, .prose h3, .prose h4 {
	color: var(--atrament-mocny, #16283a);
	font-family: var(--f-ui);
	scroll-margin-top: 24px;
	overflow-wrap: break-word;
}
.prose h2 {
	margin-top: 2.1em;
	font-size: clamp(1.4375rem, 1.3rem + .55vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.prose h3 {
	margin-top: 1.75em;
	font-size: clamp(1.1875rem, 1.13rem + .3vw, 1.3125rem);
	font-weight: 700;
	line-height: 1.3;
}
.prose h4 { margin-top: 1.5em; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }

/* Odpowiedź w pierwszym akapicie (answer-first): pogrubiony w całości akapit z Publikatora. */
.prose .pld-lead,
.prose--lead > p:first-child {
	color: var(--atrament-mocny, #16283a);
	font-size: 1.1em;
	line-height: 1.55;
}
.prose .pld-lead strong { font-weight: 400; color: inherit; }

/* Oznaczenie współpracy w samej treści – drobny dopisek (główne ujawnienie jest nad tytułem). */
.prose .pld-oznaczenie {
	padding: 10px 14px;
	border-radius: var(--r, 6px);
	background: var(--sponsor-tlo, #fdf3d7);
	color: var(--sponsor-tekst, #5c4300);
	font-family: var(--f-ui);
	font-size: .875rem;
	line-height: 1.45;
}
.prose .pld-oznaczenie strong { color: inherit; font-weight: 700; }

/* Linki w tekście */
.prose a {
	color: var(--atrament, #22384f);
	text-decoration: underline;
	text-decoration-color: var(--linia-mocna, #c3ccd6);
	text-decoration-thickness: 1.5px;
	text-underline-offset: .2em;
	transition: color .15s ease, text-decoration-color .15s ease;
}
.prose a:hover { color: var(--pomarancz-ciemny, #b4461b); text-decoration-color: currentColor; }

/* Listy */
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .45em; }
.prose li > ul, .prose li > ol { margin-top: .45em; }
.prose ul > li::marker { color: var(--tekst-3, #5f6e7d); }
.prose ol > li::marker { color: var(--atrament, #22384f); font-family: var(--f-ui); font-weight: 700; font-size: .9em; }
.prose li { padding-left: .2em; }

/* Cytat eksperta */
.prose blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--atrament, #22384f);
	color: var(--atrament-mocny, #16283a);
	font-size: 1.1em;
	font-style: italic;
	line-height: 1.55;
}
.prose blockquote > * + * { margin-top: .6em; }
.prose blockquote cite,
.prose blockquote footer,
.prose blockquote p:last-child:has(> cite:only-child) {
	display: block;
	color: var(--tekst-2, #4b5d70);
	font-family: var(--f-ui);
	font-size: .8125em;
	font-style: normal;
	font-weight: 600;
}
.prose blockquote cite::before { content: "– "; }

/* Zdjęcia, podpisy, osadzenia */
.prose figure { margin: 1.8em 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-karta, 10px); }
.prose figcaption, .prose .wp-caption-text, .prose .wp-element-caption {
	margin-top: 8px;
	color: var(--tekst-3, #5f6e7d);
	font-family: var(--f-ui);
	font-size: .875rem;
	line-height: 1.45;
}
.prose .wp-caption { max-width: 100%; }
.prose .aligncenter { margin-inline: auto; }
@media (min-width: 760px) {
	.prose .alignleft { float: left; max-width: 45%; margin: .3em 1.5em 1em 0; }
	.prose .alignright { float: right; max-width: 45%; margin: .3em 0 1em 1.5em; }
}
.prose iframe, .prose video { display: block; max-width: 100%; border: 0; border-radius: var(--r-karta, 10px); }
.prose iframe[src*="youtube"], .prose iframe[src*="youtu.be"], .prose iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--linia, #dfe4ea); }
.prose::after { content: ""; display: table; clear: both; }

.prose .pld-ukryte {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- 5. Tabele porównawcze ---------- */

.tabela-przewijana, .prose .tabela {
	position: relative;
	max-width: 100%;
	max-height: min(75vh, 680px);
	margin-block: 1.6em;
	overflow: auto;
	border: 1px solid var(--linia, #dfe4ea);
	border-radius: var(--r-karta, 10px);
	background: var(--tlo, #fff);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.tabela-przewijana:focus-visible { outline: 3px solid var(--pomarancz-ciemny, #b4461b); outline-offset: 2px; }

.prose table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--f-ui);
	font-size: .9375rem;
	line-height: 1.4;
	font-variant-numeric: lining-nums;
}
.prose caption {
	padding: 12px 16px;
	caption-side: top;
	color: var(--tekst-2, #4b5d70);
	font-size: .875rem;
	text-align: left;
}
.prose th, .prose td {
	padding: 11px 16px;
	border-bottom: 1px solid var(--linia, #dfe4ea);
	text-align: left;
	vertical-align: top;
}
.prose tr:last-child > th, .prose tr:last-child > td { border-bottom: 0; }
.prose thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--tlo, #fff);
	border-bottom: 2px solid var(--atrament, #22384f);
	color: var(--atrament-mocny, #16283a);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: bottom;
}
.prose tbody tr:nth-child(even) > * { background: var(--tlo-2, #f5f7f9); }
.prose tbody tr:nth-child(odd) > * { background: var(--tlo, #fff); }
.prose tbody td:first-child { color: var(--atrament-mocny, #16283a); font-weight: 600; }
.prose .pld-liczba { text-align: right; white-space: nowrap; }
.prose tbody .pld-liczba { color: var(--atrament-mocny, #16283a); }

/* Porównanie z nagłówkiem kolumn: pierwsza kolumna (nazwa) przyklejona przy przewijaniu w bok. */
@media (max-width: 759px) {
	.prose table:has(thead) { min-width: 34rem; }
	.prose table:has(thead) tr > :first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		box-shadow: 1px 0 0 var(--linia, #dfe4ea);
	}
	.prose table:has(thead) thead tr > :first-child { z-index: 3; }
	.prose th, .prose td { padding: 10px 12px; }
}

/* Karta danych: „parametr – wartość” (th w pierwszej kolumnie, bez nagłówka). */
.prose .pld-tabela--dane tbody tr > * { background: var(--tlo, #fff); }
.prose .pld-tabela--dane th {
	width: 36%;
	min-width: 8.5rem;
	background: var(--tlo-2, #f5f7f9) !important;
	color: var(--tekst-2, #4b5d70);
	font-size: .875rem;
	font-weight: 600;
}
.prose .pld-tabela--dane td { color: var(--atrament-mocny, #16283a); font-weight: 500; }

/* ---------- 6. Bloki rozpoznane w treści (inc/tresc.php) ---------- */

.prose .pld-ikona { flex: none; width: 1.1em; height: 1.1em; }

/* Zalety i wady */
.prose .pld-zalety-wady {
	display: grid;
	margin-block: 1.8em;
	border: 1px solid var(--linia, #dfe4ea);
	border-radius: var(--r-karta, 10px);
	font-family: var(--f-ui);
	font-size: 1rem;
	line-height: 1.5;
	overflow: hidden;
}
@media (min-width: 640px) {
	.prose .pld-zalety-wady--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prose .pld-zalety-wady--dwie .pld-zalety-wady__kol + .pld-zalety-wady__kol { border-top: 0; border-left: 1px solid var(--linia, #dfe4ea); }
}
.prose .pld-zalety-wady__kol { padding: 20px 22px 22px; }
.prose .pld-zalety-wady__kol + .pld-zalety-wady__kol { border-top: 1px solid var(--linia, #dfe4ea); }
.prose .pld-zalety-wady__tytul {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-family: var(--f-ui);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.3;
	text-transform: uppercase;
}
.prose .pld-zalety-wady__kol--plus .pld-zalety-wady__tytul { color: var(--zielony, #1d6b45); }
.prose .pld-zalety-wady__kol--minus .pld-zalety-wady__tytul { color: var(--czerwony, #a4332a); }
.prose .pld-zalety-wady__lista { margin: 0; padding: 0; list-style: none; }
.prose .pld-zalety-wady__lista li { position: relative; margin: 0; padding: 0 0 0 28px; color: var(--tekst, #1f2a36); }
.prose .pld-zalety-wady__lista li + li { margin-top: 10px; }
.prose .pld-zalety-wady__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--pld-znak) center / contain no-repeat;
	mask: var(--pld-znak) center / contain no-repeat;
}
.prose .pld-zalety-wady__kol--plus li::before {
	color: var(--zielony, #1d6b45);
	--pld-znak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.4 8.2 14l7.3-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.prose .pld-zalety-wady__kol--minus li::before {
	color: var(--czerwony, #a4332a);
	--pld-znak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 5.8l8.4 8.4M14.2 5.8l-8.4 8.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Krótkie „Wady: …” / „Zalety: …” w akapicie */
.prose .pld-krotko { position: relative; padding-left: 28px; }
.prose .pld-krotko .pld-ikona { position: absolute; left: 0; top: .28em; width: 18px; height: 18px; }
.prose .pld-krotko--plus .pld-ikona, .prose .pld-krotko--plus > strong:first-of-type { color: var(--zielony, #1d6b45); }
.prose .pld-krotko--minus .pld-ikona, .prose .pld-krotko--minus > strong:first-of-type { color: var(--czerwony, #a4332a); }
.prose .pld-krotko > strong:first-of-type { font-family: var(--f-ui); font-size: .9em; font-weight: 700; }

/* Werdykt / podsumowanie w treści */
.prose .pld-werdykt {
	margin-block: 2.2em;
	padding: 22px 24px 24px;
	border: 1px solid #f7d3c1;
	border-left: 4px solid var(--pomarancz, #f4713b);
	border-radius: var(--r-karta, 10px);
	background: var(--pomarancz-jasny, #fff1ea);
}
.prose .pld-werdykt__tytul {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: clamp(1.25rem, 1.18rem + .3vw, 1.4375rem);
}
.prose .pld-werdykt__tytul .pld-ikona { color: var(--pomarancz-ciemny, #b4461b); width: 24px; height: 24px; }
.prose .pld-werdykt__tresc { margin-top: .7em; }
.prose .pld-werdykt__tresc > p:first-child { color: var(--atrament-mocny, #16283a); }

/* Na co uważać */
.prose .pld-uwaga {
	margin-block: 2.2em;
	padding: 22px 24px 24px;
	border: 1px solid var(--linia, #dfe4ea);
	border-left: 4px solid var(--atrament, #22384f);
	border-radius: var(--r-karta, 10px);
	background: var(--tlo-2, #f5f7f9);
}
.prose .pld-uwaga__tytul {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: clamp(1.25rem, 1.18rem + .3vw, 1.4375rem);
}
.prose .pld-uwaga__tytul .pld-ikona { color: var(--pomarancz-ciemny, #b4461b); width: 24px; height: 24px; }
.prose .pld-uwaga__tresc { margin-top: .7em; }
.prose .pld-uwaga__tresc ul { padding-left: 1.2em; }

/* Produkt (nagłówek z ceną) */
.prose .pld-produkt {
	position: relative;
	margin-block: 1.5em;
	padding: 20px 22px 22px;
	border: 1px solid var(--linia, #dfe4ea);
	border-radius: var(--r-karta, 10px);
	background: var(--tlo, #fff);
}
.prose h2 + .pld-produkt, .prose h3 + .pld-produkt { margin-top: 1em; }
.prose .pld-produkt + .pld-produkt { margin-top: 16px; }
.prose .pld-produkt--wybor { border: 2px solid var(--pomarancz, #f4713b); padding: 19px 21px 21px; }
.prose .pld-produkt__naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0;
	font-size: clamp(1.1875rem, 1.13rem + .3vw, 1.3125rem);
	line-height: 1.3;
}
.prose .pld-produkt__nr {
	color: var(--tekst-3, #5f6e7d);
}
.prose .pld-produkt__nazwa { flex: 1 1 0; min-width: 8rem; }
.prose .pld-produkt__cena, .prose .pld-lista-produktow__cena {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--linia-mocna, #c3ccd6);
	border-radius: var(--r, 6px);
	background: var(--tlo, #fff);
	color: var(--atrament-mocny, #16283a);
	font-family: var(--f-ui);
	font-size: .9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	line-height: 1.35;
	white-space: nowrap;
}
.prose .pld-produkt__odznaka,
.prose .pld-produkt__wyroznienie {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r, 6px);
	background: var(--pomarancz, #f4713b);
	color: var(--atrament-mocny, #16283a);
	font-family: var(--f-ui);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .07em;
	line-height: 1.3;
	text-transform: uppercase;
}
.prose .pld-produkt__odznaka { margin: 0 0 10px; }
.prose .pld-produkt__wyroznienie { flex-basis: 100%; max-width: max-content; margin-bottom: 4px; }
.prose .pld-produkt__odznaka::before,
.prose .pld-produkt__wyroznienie::before {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4 8 14.2l8-8.6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.4 8 14.2l8-8.6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose .pld-produkt__opis { margin-top: .75em; }

/* Lista zestawienia („Sorter kształtów – 59 zł. Opis…”) */
.prose .pld-lista-produktow {
	margin-block: 1.6em;
	padding: 0;
	list-style: none;
	counter-reset: produkt;
	border-top: 1px solid var(--linia, #dfe4ea);
}
.prose .pld-lista-produktow > li {
	position: relative;
	margin: 0;
	padding: 18px 0 18px 48px;
	border-bottom: 1px solid var(--linia, #dfe4ea);
	counter-increment: produkt;
}
.prose ol.pld-lista-produktow > li::before {
	content: counter(produkt);
	position: absolute;
	left: 0;
	top: 17px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--tlo-3, #e9edf2);
	color: var(--atrament-mocny, #16283a);
	font-family: var(--f-ui);
	font-size: .9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.prose ul.pld-lista-produktow > li { padding-left: 0; }
.prose .pld-lista-produktow__glowa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 4px;
	font-family: var(--f-ui);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}
.prose .pld-lista-produktow__nazwa { flex: 1 1 0; min-width: 8rem; }

/* Linki zakupowe „Sprawdź cenę”, „Gdzie kupić” */
.prose a.pld-cta {
	color: var(--pomarancz-ciemny, #b4461b);
	font-family: var(--f-ui);
	font-size: .9em;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.prose a.pld-cta::after {
	content: "";
	display: inline-block;
	width: .85em;
	height: .85em;
	margin-left: 6px;
	vertical-align: -.05em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose a.pld-cta:hover { text-decoration: underline; }
.prose .pld-cta-wiersz a.pld-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: var(--r, 6px);
	background: var(--pomarancz, #f4713b);
	color: var(--atrament-mocny, #16283a);
	font-size: .9375rem;
	line-height: 1.2;
	white-space: normal;
	transition: background-color .15s ease;
}
.prose .pld-cta-wiersz a.pld-cta:hover { background: var(--pomarancz-hover, #e0602b); color: var(--atrament-mocny, #16283a); text-decoration: none; }

/* ---------- 7. FAQ (section.pld-faq z inc/faq.php) ---------- */

.prose .pld-faq {
	margin-top: 2.4em;
	padding-top: 4px;
}
.prose .pld-faq > h2 { margin-top: 0; margin-bottom: .8em; }
.prose .pld-faq > h2 + * { margin-top: .8em; }
.prose .pld-faq__item {
	margin: 0;
	border-top: 1px solid var(--linia, #dfe4ea);
}
.prose .pld-faq__item + .pld-faq__item { margin-top: 0; }
.prose .pld-faq__item:last-child { border-bottom: 1px solid var(--linia, #dfe4ea); }
.prose .pld-faq__q {
	margin: 0;
	padding: 18px 0 0;
	font-size: 1.125rem;
	line-height: 1.35;
}
.prose .pld-faq__a { padding: 8px 0 20px; margin: 0 !important; }
.prose .pld-faq__a > :first-child { margin-top: 0; }

/* Z JS (spis.js) pytania stają się przyciskami; odpowiedzi zostają w HTML (hidden="until-found"
   – znajdzie je wyszukiwarka strony i roboty), bez JS wszystko jest rozwinięte. */
.prose .pld-faq__przycisk {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: -18px 0 0;
	padding: 18px 0 18px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
}
.prose .pld-faq__przycisk:hover { color: var(--pomarancz-ciemny, #b4461b); }
.prose .pld-faq__przycisk::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border: 1px solid var(--linia-mocna, #c3ccd6);
	border-radius: 999px;
	background:
		linear-gradient(var(--atrament, #22384f), var(--atrament, #22384f)) center / 10px 2px no-repeat,
		linear-gradient(var(--atrament, #22384f), var(--atrament, #22384f)) center / 2px 10px no-repeat;
}
.prose .pld-faq__przycisk[aria-expanded="true"]::after {
	background: linear-gradient(var(--atrament, #22384f), var(--atrament, #22384f)) center / 10px 2px no-repeat;
}
.prose .pld-faq--js .pld-faq__a { padding-top: 0; }
.prose .pld-faq--js .pld-faq__a[hidden] { display: none; }

/* ---------- 8. Tematy i stopka współpracy ---------- */

.tagi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--linia, #dfe4ea);
	font-family: var(--f-ui);
}
.tagi h2 {
	color: var(--tekst-3, #5f6e7d);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.tagi ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tagi a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 5px 12px;
	border: 1px solid var(--linia-mocna, #c3ccd6);
	border-radius: var(--r, 6px);
	color: var(--atrament, #22384f);
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
}
.tagi a:hover { border-color: var(--atrament, #22384f); color: var(--atrament-mocny, #16283a); background: var(--tlo-2, #f5f7f9); }

.ujawnienie-stopka {
	margin-top: 24px;
	padding: 12px 16px;
	border-radius: var(--r, 6px);
	background: var(--sponsor-tlo, #fdf3d7);
	color: var(--sponsor-tekst, #5c4300);
	font-family: var(--f-ui);
	font-size: .875rem;
	line-height: 1.45;
}

/* ---------- 9. Powiązane ---------- */

.powiazane {
	margin-top: var(--odstep, 64px);
	padding-block: var(--odstep, 64px);
	border-top: 1px solid var(--linia, #dfe4ea);
	background: var(--tlo-2, #f5f7f9);
}

/* ---------- 10. Druk ---------- */

@media print {
	.prose { font-size: 11pt; }
	.tabela-przewijana { max-height: none; overflow: visible; border: 0; }
	.prose thead th { position: static; }
	.prose .pld-faq__a[hidden] { display: block !important; }
	.ujawnienie, .ujawnienie-stopka { border: 1px solid currentColor; }
}

/* ---------- 11. Telefon: węższe ramki ---------- */

@media (max-width: 479px) {
	.prose .pld-werdykt, .prose .pld-uwaga { padding: 18px 18px 20px; }
	.prose .pld-produkt { padding: 16px 16px 18px; }
	.prose .pld-produkt--wybor { padding: 15px 15px 17px; }
	.prose .pld-zalety-wady__kol { padding: 16px 16px 18px; }
	.werdykt__tytul { padding-inline: 18px; }
	.werdykt__tekst { padding-inline: 18px; }
	.werdykt__dane > div { padding-inline: 18px; }
}

/* Tabele z bloku Gutenberga: WordPress dokłada własne ramki komórek (style blokowe inline) -
   zerujemy je, żeby obowiązywał wygląd .prose (cienkie linie, zebra). */
.prose .wp-block-table { margin-inline: 0; border: 0; }
.prose .wp-block-table table,
.prose .wp-block-table th,
.prose .wp-block-table td { border-width: 0 0 1px; border-style: solid; border-color: var(--linia); }
.prose .wp-block-table thead { border-bottom: 0; }

/* ==========================================================================
   Galerie w treści i podgląd zdjęć w okienku (assets/js/galeria.js)
   ========================================================================== */

/* Galeria bloku WordPressa (figure.wp-block-gallery) - style bloków nie są ładowane,
   więc siatka jest tutaj. Liczba kolumn z klasy columns-N, na telefonie najwyżej 2. */
.prose .wp-block-gallery {
	--kolumny: 3;
	display: grid;
	grid-template-columns: repeat(var(--kolumny), minmax(0, 1fr));
	gap: 8px;
	margin: 1.75em 0;
	padding: 0;
	list-style: none;
}
.prose .wp-block-gallery.columns-1 { --kolumny: 1; }
.prose .wp-block-gallery.columns-2 { --kolumny: 2; }
.prose .wp-block-gallery.columns-4 { --kolumny: 4; }
.prose .wp-block-gallery.columns-5,
.prose .wp-block-gallery.columns-6 { --kolumny: 4; }
@media (max-width: 599px) {
	.prose .wp-block-gallery { --kolumny: 2; gap: 6px; }
	.prose .wp-block-gallery.columns-1 { --kolumny: 1; }
}
.prose .wp-block-gallery > .wp-block-image,
.prose .wp-block-gallery > figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r, 6px);
	background: var(--tlo-2);
}
.prose .wp-block-gallery img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}
.prose .wp-block-gallery.is-cropped img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; }
.prose .wp-block-gallery figcaption {
	margin: 0;
	padding: 6px 8px;
	font-family: var(--f-ui);
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--tekst-2);
	background: var(--tlo);
}
/* Podpis całej galerii (bezpośrednio pod siatką). */
.prose .wp-block-gallery > figcaption { grid-column: 1 / -1; padding-inline: 0; background: none; }

/* Zdjęcie, które otwiera się w okienku: kursor lupy i lekkie przyciemnienie po najechaniu. */
.galeria-powieksz { cursor: zoom-in; }
a.galeria-powieksz { display: block; }
.galeria-powieksz img,
img.galeria-powieksz { transition: opacity .15s ease; }
.galeria-powieksz:hover img,
img.galeria-powieksz:hover { opacity: .9; }
img.galeria-powieksz:focus-visible { outline: 3px solid var(--pomarancz-ciemny); outline-offset: 3px; }

/* ---------- Okienko podglądu ---------- */

.galeria-otwarta,
.galeria-otwarta body { overflow: hidden; }

.galeria-okno {
	position: fixed;
	inset: 0;
	z-index: 1000000; /* nad banerem zgód unit-cookies */
	display: grid;
	place-items: center;
	padding: 56px 64px 24px;
}
.galeria-okno[hidden] { display: none; }

.galeria-okno__tlo {
	position: absolute;
	inset: 0;
	background: rgba(13, 22, 32, .95);
	cursor: zoom-out;
}

.galeria-okno__figura {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 12px;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.galeria-okno__obraz {
	display: block;
	max-width: min(1400px, 100%);
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.galeria-okno__podpis {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 12px;
	max-width: 60rem;
	font-family: var(--f-ui);
	font-size: .9375rem;
	line-height: 1.45;
	color: #e9edf2;
	text-align: center;
}
.galeria-okno__podpis[hidden] { display: none; }
.galeria-okno__licznik { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.galeria-okno__licznik:empty { display: none; }

.galeria-okno__przycisk {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.galeria-okno__przycisk:hover { background: rgba(255, 255, 255, .24); }
.galeria-okno__przycisk:focus-visible { outline: 3px solid var(--pomarancz); outline-offset: 2px; }
.galeria-okno__przycisk[hidden] { display: none; }
.galeria-okno__zamknij { top: 10px; right: 10px; }
.galeria-okno__poprzednie { left: 10px; top: 50%; transform: translateY(-50%); }
.galeria-okno__nastepne { right: 10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 599px) {
	.galeria-okno { padding: 56px 8px 16px; }
	.galeria-okno__obraz { max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); }
	/* Na telefonie strzałki na dole, żeby nie zasłaniały zdjęcia; przewija też gest. */
	.galeria-okno__poprzednie,
	.galeria-okno__nastepne { top: auto; bottom: 12px; transform: none; }
	.galeria-okno__poprzednie { left: calc(50% - 60px); }
	.galeria-okno__nastepne { right: calc(50% - 60px); }
	.galeria-okno__figura { padding-bottom: 56px; }
}

@media print {
	.galeria-okno { display: none !important; }
}

/*
 * Galeria Publikatora (figure.wp-block-gallery.has-nested-images): WordPress 7.1 dokłada
 * własne style bloku (wp-includes/blocks/gallery/style.min.css) z selektorami
 * :not(#individual-image) - zwężały kafelki do ułamka kolumny i kładły podpis jako
 * nakładkę na zdjęcie (przechwytywała klik). Nadpisujemy je selektorami o tej samej sile:
 * zdjęcie wypełnia kolumnę siatki, podpis stoi pod zdjęciem.
 */
.prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#pld-galeria):not(#pld-g) {
	display: flex;
	flex-direction: column;
	flex: none;
	width: auto;
	height: auto;
	justify-content: flex-start;
	max-width: none;
	margin: 0;
}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#pld-galeria):not(#pld-g)::before { content: none; }
.prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#pld-galeria):not(#pld-g) > a,
.prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#pld-galeria):not(#pld-g) > div {
	display: block;
	flex: none;
	height: auto;
	margin: 0;
}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#pld-galeria):not(#pld-g) img {
	display: block;
	flex: none;
	width: 100%;
	max-width: 100% !important;
	height: auto;
	margin: 0;
	border-radius: 0;
}
.prose .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#pld-galeria):not(#pld-g) img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image:not(#pld-galeria):not(#pld-g) figcaption {
	position: static;
	flex: none;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: 7px 9px 8px;
	background: var(--tlo);
	color: var(--tekst-2);
	font-family: var(--f-ui);
	font-size: .8125rem;
	line-height: 1.35;
	text-align: left;
	text-shadow: none;
	will-change: auto;
	scrollbar-gutter: auto;
}
/* Kafelki z podpisem: ramka wokół zdjęcia z podpisem, żeby podpis nie „wisiał” w powietrzu. */
.prose .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#pld-galeria):not(#pld-g) {
	border: 1px solid var(--linia);
	border-radius: var(--r, 6px);
	overflow: hidden;
	background: var(--tlo);
}
/* Siatka galerii silniejsza niż .wp-block-gallery.has-nested-images { display: flex } z WordPressa. */
.prose .wp-block-gallery.has-nested-images:not(#pld-galeria) {
	display: grid;
	grid-template-columns: repeat(var(--kolumny), minmax(0, 1fr));
	gap: 8px;
	flex-wrap: nowrap;
	align-items: start;
}
@media (max-width: 599px) {
	.prose .wp-block-gallery.has-nested-images:not(#pld-galeria) { gap: 6px; }
}
