/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE PRODUKTU
   Ładowany warunkowo — tylko na is_product() (inc/30-landing-assets.php).
   Wszystkie wartości pochodzą z tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */

.w24-lp {
	color: var(--w24-color-text);
	font-family: var(--w24-font-body);
	font-size: var(--w24-text-base);
	line-height: var(--w24-leading-normal);
}

.w24-lp h1,
.w24-lp h2 {
	color: var(--w24-color-heading);
	font-family: var(--w24-font-heading);
	line-height: var(--w24-leading-tight);
}

/* ── Sekcje ─────────────────────────────────────────────────────────────── */

.w24-lp-sekcja {
	padding-block: var(--w24-section-padding);
	border-bottom: 1px solid var(--w24-color-border);
}

.w24-lp-sekcja--alt {
	margin-inline: calc(-1 * var(--w24-space-5));
	padding-inline: var(--w24-space-5);
	border-bottom: 0;
	background: var(--w24-color-bg-alt);
}

.w24-lp-sekcja__naglowek {
	margin: 0 0 var(--w24-space-5);
	font-size: var(--w24-text-2xl);
	font-weight: var(--w24-weight-bold);
}

/* ── 1. Hero ────────────────────────────────────────────────────────────── */

.w24-lp-hero {
	display: grid;
	gap: var(--w24-space-6);
	padding-block: var(--w24-space-6) var(--w24-section-padding);
	border-bottom: 1px solid var(--w24-color-border);
}

@media (min-width: 768px) {

	.w24-lp-hero {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
		gap: var(--w24-space-7);
	}
}

.w24-lp-hero__naglowek {
	margin: 0 0 var(--w24-space-4);
	font-size: var(--w24-text-3xl);
	font-weight: var(--w24-weight-black);
	letter-spacing: var(--w24-tracking-tight);
}

.w24-lp-hero__problem {
	margin: 0 0 var(--w24-space-5);
	max-width: var(--w24-content-max);
	color: var(--w24-color-text-muted);
	font-size: var(--w24-text-lg);
	line-height: var(--w24-leading-relaxed);
}

.w24-lp-hero__weryfikacja {
	margin: var(--w24-space-4) 0 0;
	color: var(--w24-color-text-muted);
	font-size: var(--w24-text-sm);
}

.w24-lp-hero__obraz {
	overflow: hidden;
	border: 1px solid var(--w24-color-border);
	border-radius: var(--w24-radius-lg);
	box-shadow: var(--w24-shadow-lg);
}

.w24-lp-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Cena ───────────────────────────────────────────────────────────────── */

.w24-lp-cena {
	margin: 0 0 var(--w24-space-4);
	color: var(--w24-color-navy);
	font-size: var(--w24-text-2xl);
	font-weight: var(--w24-weight-bold);
}

.w24-lp-cena del {
	margin-right: var(--w24-space-2);
	color: var(--w24-color-text-muted);
	font-size: var(--w24-text-lg);
	font-weight: var(--w24-weight-regular);
}

/* ── CTA ────────────────────────────────────────────────────────────────── */

/*
 * Etykiety przycisków są celowo >=18.66px i pogrubione: przy takim rozmiarze
 * biały tekst na --w24-color-accent (3.84:1) spełnia WCAG AA dla tekstu dużego.
 */
.w24-lp-przycisk,
.w24-lp .cart button[type="submit"],
.w24-lp .cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--w24-space-3) var(--w24-space-6);
	border: 0;
	border-radius: var(--w24-radius-md);
	background: var(--w24-color-accent);
	color: var(--w24-color-text-inverse);
	font-family: var(--w24-font-body);
	font-size: 1.1667rem; /* 18.66px przy 16px bazowych */
	font-weight: var(--w24-weight-bold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--w24-transition-base), transform var(--w24-transition-fast);
}

.w24-lp-przycisk:hover,
.w24-lp .cart button[type="submit"]:hover,
.w24-lp .cart .single_add_to_cart_button:hover {
	background: var(--w24-color-accent-dark);
	color: var(--w24-color-text-inverse);
	transform: translateY(-1px);
}

.w24-lp-przycisk:focus-visible,
.w24-lp .cart button[type="submit"]:focus-visible,
.w24-lp .cart .single_add_to_cart_button:focus-visible,
.w24-lp .w24-lp-podglad__przycisk:focus-visible,
.w24-lp .w24-lp-faq__pytanie:focus-visible {
	outline: var(--w24-focus-ring-width) solid var(--w24-color-focus);
	outline-offset: var(--w24-focus-ring-offset);
}

.w24-lp .cart {
	margin: 0;
}

.w24-lp .cart .quantity {
	margin-right: var(--w24-space-3);
}

/* Bloki CTA #2 i #3 */

.w24-lp-cta-blok {
	text-align: center;
}

.w24-lp-cta-blok__tekst {
	margin: 0 0 var(--w24-space-4);
	font-size: var(--w24-text-lg);
	color: var(--w24-color-text-muted);
}

/*
 * CTA #3 — kompaktowy pasek zamiast pełnej sekcji.
 * Na desktopie hasło po lewej, cena i przycisk w jednej linii po prawej.
 * max-height pilnuje, żeby pasek nie rozjechał się w kolejny ekran treści.
 */
.w24-lp-cta-pasek {
	display: flex;
	flex-direction: column;
	gap: var(--w24-space-4);
	max-height: 200px;
	margin-block: var(--w24-space-6);
	padding: var(--w24-space-5);
	border-radius: var(--w24-radius-lg);
	background: var(--w24-color-navy);
}

@media (min-width: 768px) {

	.w24-lp-cta-pasek {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--w24-space-6);
		padding: var(--w24-space-4) var(--w24-space-6);
	}
}

.w24-lp-cta-pasek__haslo {
	margin: 0;
	color: var(--w24-color-text-inverse);
	font-family: var(--w24-font-body);
	font-size: var(--w24-text-lg);
	font-weight: var(--w24-weight-medium);
	line-height: var(--w24-leading-snug);
}

.w24-lp-cta-pasek__akcja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--w24-space-4);
}

.w24-lp-cta-pasek__cena {
	color: var(--w24-color-text-inverse);
	font-size: var(--w24-text-xl);
	font-weight: var(--w24-weight-bold);
	white-space: nowrap;
}

.w24-lp-cta-pasek__cena del {
	margin-right: var(--w24-space-2);
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--w24-text-base);
	font-weight: var(--w24-weight-regular);
}

/* Formularz WooCommerce wewnątrz paska ma zachowywać się jak jeden element. */
.w24-lp-cta-pasek .w24-lp-cta,
.w24-lp-cta-pasek form.cart {
	display: flex;
	align-items: center;
	gap: var(--w24-space-3);
	margin: 0;
}

/*
 * W pasku chowamy licznik ilości — pole nadal wysyła domyślną wartość 1,
 * a pełny formularz z licznikiem jest w hero. Bez tego pasek rośnie
 * o spinner, który przy wzorze DOCX i tak nie ma zastosowania.
 */
.w24-lp-cta-pasek .quantity {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── 2. Dla kogo ────────────────────────────────────────────────────────── */

.w24-lp-lista-sytuacji {
	display: grid;
	gap: var(--w24-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.w24-lp-lista-sytuacji {
		grid-template-columns: 1fr 1fr;
		gap: var(--w24-space-3) var(--w24-space-6);
	}
}

.w24-lp-lista-sytuacji li {
	position: relative;
	padding-left: var(--w24-space-6);
	line-height: var(--w24-leading-normal);
}

.w24-lp-lista-sytuacji li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: var(--w24-space-2);
	width: 8px;
	height: 8px;
	border-radius: var(--w24-radius-full);
	background: var(--w24-color-accent);
}

/* ── 3. Co dostajesz ────────────────────────────────────────────────────── */

.w24-lp-korzysci {
	display: grid;
	gap: var(--w24-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.w24-lp-korzysci {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--w24-space-5);
	}
}

.w24-lp-korzysc {
	display: flex;
	align-items: flex-start;
	gap: var(--w24-space-3);
	padding: var(--w24-space-4);
	border: 1px solid var(--w24-color-border);
	border-radius: var(--w24-radius-md);
	background: var(--w24-color-bg);
}

.w24-lp-ikona {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--w24-color-primary);
}

/* ── Opis ───────────────────────────────────────────────────────────────── */

.w24-lp-opis__tresc {
	max-width: var(--w24-content-max);
}

.w24-lp-opis__tresc p {
	margin: 0 0 var(--w24-space-4);
}

/* ── 4. Podgląd dokumentu ───────────────────────────────────────────────── */

.w24-lp-podglad__przycisk {
	position: relative;
	display: block;
	max-width: 520px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--w24-color-border);
	border-radius: var(--w24-radius-md);
	background: var(--w24-color-bg);
	box-shadow: var(--w24-shadow-md);
	cursor: zoom-in;
	overflow: hidden;
}

.w24-lp-podglad__img {
	display: block;
	width: 100%;
	height: auto;
}

.w24-lp-podglad__lupa {
	position: absolute;
	right: var(--w24-space-3);
	bottom: var(--w24-space-3);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--w24-radius-full);
	background: var(--w24-color-navy);
	color: var(--w24-color-text-inverse);
}

.w24-lp-podglad__lupa svg {
	width: 20px;
	height: 20px;
}

.w24-lp-lightbox {
	max-width: min(94vw, 1000px);
	max-height: 92vh;
	padding: var(--w24-space-2);
	border: 0;
	border-radius: var(--w24-radius-lg);
	background: var(--w24-color-bg);
	box-shadow: var(--w24-shadow-xl);
}

.w24-lp-lightbox::backdrop {
	background: rgba(13, 31, 53, 0.78);
}

.w24-lp-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 84vh;
	height: auto;
	margin: 0 auto;
}

.w24-lp-lightbox__zamknij {
	position: absolute;
	top: var(--w24-space-2);
	right: var(--w24-space-2);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--w24-radius-full);
	background: var(--w24-color-navy);
	color: var(--w24-color-text-inverse);
	font-size: var(--w24-text-xl);
	line-height: 1;
	cursor: pointer;
}

/* ── 7. FAQ ─────────────────────────────────────────────────────────────── */

.w24-lp-faq__pozycja {
	border-bottom: 1px solid var(--w24-color-border);
}

.w24-lp-faq__pozycja:first-of-type {
	border-top: 1px solid var(--w24-color-border);
}

.w24-lp-faq__pytanie {
	padding: var(--w24-space-4) var(--w24-space-6) var(--w24-space-4) 0;
	position: relative;
	color: var(--w24-color-heading);
	font-size: var(--w24-text-lg);
	font-weight: var(--w24-weight-semibold);
	cursor: pointer;
	list-style: none;
}

.w24-lp-faq__pytanie::-webkit-details-marker {
	display: none;
}

.w24-lp-faq__pytanie::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: var(--w24-space-2);
	transform: translateY(-50%);
	color: var(--w24-color-accent);
	font-size: var(--w24-text-xl);
	line-height: 1;
}

.w24-lp-faq__pozycja[open] .w24-lp-faq__pytanie::after {
	content: "\2212";
}

.w24-lp-faq__odpowiedz {
	padding: 0 var(--w24-space-6) var(--w24-space-4) 0;
	max-width: var(--w24-content-max);
	color: var(--w24-color-text);
}

.w24-lp-faq__odpowiedz p {
	margin: 0 0 var(--w24-space-3);
}

/* ── 6. Podstawa prawna ─────────────────────────────────────────────────── */

.w24-lp-podstawa__tresc {
	max-width: var(--w24-content-max);
}

.w24-lp-podstawa__tresc a {
	color: var(--w24-color-primary);
	text-underline-offset: 0.15em;
}

.w24-lp-podstawa__tresc a:hover {
	color: var(--w24-color-primary-dark);
}

.w24-lp-podstawa__data {
	margin: var(--w24-space-4) 0 0;
	padding: var(--w24-space-3) var(--w24-space-4);
	border-left: 4px solid var(--w24-color-warning);
	background: var(--w24-color-warning-bg);
	color: var(--w24-color-heading);
	font-size: var(--w24-text-sm);
}

/* ── 9. Powiązane wzory ─────────────────────────────────────────────────── */

.w24-lp-powiazane__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--w24-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.w24-lp-powiazane__pozycja a {
	display: flex;
	flex-direction: column;
	gap: var(--w24-space-2);
	height: 100%;
	padding: var(--w24-space-3);
	border: 1px solid var(--w24-color-border);
	border-radius: var(--w24-radius-md);
	color: var(--w24-color-text);
	text-decoration: none;
	transition: border-color var(--w24-transition-base), box-shadow var(--w24-transition-base);
}

.w24-lp-powiazane__pozycja a:hover {
	border-color: var(--w24-color-primary);
	box-shadow: var(--w24-shadow-md);
}

.w24-lp-powiazane__pozycja img {
	width: 100%;
	height: auto;
	border-radius: var(--w24-radius-sm);
}

.w24-lp-powiazane__tytul {
	font-weight: var(--w24-weight-medium);
	line-height: var(--w24-leading-snug);
}

.w24-lp-powiazane__cena {
	margin-top: auto;
	color: var(--w24-color-navy);
	font-weight: var(--w24-weight-bold);
}

/* ── 10. Sticky bar (mobile) ────────────────────────────────────────────── */

.w24-lp-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--w24-z-sticky-bar);
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--w24-space-3);
	min-height: var(--w24-sticky-bar-height);
	padding: var(--w24-space-2) var(--w24-space-4);
	border-top: 1px solid var(--w24-color-border);
	background: var(--w24-color-bg);
	box-shadow: 0 -2px 12px rgba(13, 31, 53, 0.12);
}

.w24-lp-sticky[hidden] {
	display: none;
}

@media (max-width: 767px) {

	.w24-lp-sticky:not([hidden]) {
		display: flex;
	}

	/* Pasek nie może zasłaniać końca strony ani celu kotwicy. */
	.w24-lp {
		padding-bottom: var(--w24-sticky-bar-height);
	}

	html {
		scroll-padding-top: var(--w24-space-5);
	}
}

.w24-lp-sticky__cena {
	color: var(--w24-color-navy);
	font-size: var(--w24-text-lg);
	font-weight: var(--w24-weight-bold);
	white-space: nowrap;
}

.w24-lp-sticky__cena del {
	display: none;
}

.w24-lp-sticky .w24-lp-przycisk {
	flex: 1;
	min-height: 44px;
	padding-inline: var(--w24-space-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   Skalowanie odstępów wg liczby wyrenderowanych sekcji.

   Klasę w24-lp--sekcje-N ustawia szablon. Produkt z jedną lub dwiema
   sekcjami dostaje ciaśniejszy rytm — inaczej między hero a CTA powstaje
   ekran pustki. Od trzech sekcji wracamy do pełnej skali.
   ══════════════════════════════════════════════════════════════════════════ */

.w24-lp--sekcje-0,
.w24-lp--sekcje-1 {
	--w24-section-padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
}

.w24-lp--sekcje-2 {
	--w24-section-padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
}

.w24-lp--sekcje-3,
.w24-lp--sekcje-4 {
	--w24-section-padding: clamp(2rem, 1.4rem + 3.4vw, 4.5rem);
}

/* Przy ubogiej treści hero i pasek CTA też schodzą bliżej siebie. */
.w24-lp--sekcje-0 .w24-lp-hero,
.w24-lp--sekcje-1 .w24-lp-hero {
	padding-bottom: var(--w24-space-5);
}

.w24-lp--sekcje-0 .w24-lp-cta-pasek,
.w24-lp--sekcje-1 .w24-lp-cta-pasek {
	margin-block: var(--w24-space-5);
}

/* ── Etykieta nad podglądem dokumentu ───────────────────────────────────── */

/*
 * Informacja, że podgląd jest fragmentem. Kontrast tekstu na tle
 * --w24-color-warning-bg to 8.1:1, czytelne także przy dużym powiększeniu.
 */
.w24-lp-podglad__info {
	display: flex;
	align-items: flex-start;
	gap: var(--w24-space-2);
	max-width: var(--w24-content-max);
	margin: 0 0 var(--w24-space-4);
	padding: var(--w24-space-3) var(--w24-space-4);
	border-left: 4px solid var(--w24-color-warning);
	border-radius: var(--w24-radius-sm);
	background: var(--w24-color-warning-bg);
	color: var(--w24-color-heading);
	font-size: var(--w24-text-sm);
	font-weight: var(--w24-weight-medium);
	line-height: var(--w24-leading-normal);
}

.w24-lp-podglad__info-ikona {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 0.1em;
	color: var(--w24-color-warning);
}

@media (max-width: 767px) {

	.w24-lp-podglad__info {
		/* Na wąskim ekranie tekst ma pełną szerokość, ikona zostaje w linii. */
		padding: var(--w24-space-3);
		font-size: var(--w24-text-base);
	}
}