/**
 * Dark Editorial Commerce – style strony pojedynczego produktu.
 *
 * Ładowany TYLKO na is_product() (patrz inc/enqueue.php), więc każda reguła
 * poniżej mogłaby technicznie być nieprzedrostkowana. Mimo to wszystko jest
 * spięte pod klasą .kde-single-product (kontener renderowany w
 * woocommerce/content-single-product.php) – druga linia bezpieczeństwa,
 * żeby żadna reguła nie "wyciekła" na header/footer/sidebar Kadence, które
 * w tym etapie rebrandingu mają zostać bez zmian.
 *
 * Źródło decyzji projektowych (kolory, fonty, skala, spacing, zasada ceny,
 * styl CTA): ../../brief.md i ../../prototyp-newsletter-od-zera.html.
 * Nie zmieniać wartości tutaj bez aktualizacji tamtego briefu.
 */

/* ── ZMIENNE (scoped do strony produktu) ── */
.kde-single-product {
	--kde-bg-hero: #121212;
	--kde-bg-warm-dark: #1c1a17;
	--kde-bg-light: #f3f0eb;

	--kde-text-on-dark: #f3f0eb;
	--kde-text-on-dark-muted: #a8a196;
	--kde-text-on-light: #1c1a17;
	--kde-text-on-light-muted: #6b6558;

	--kde-accent: #c9a15a;
	--kde-accent-dark: #a9813f;

	--kde-line-on-dark: rgba(243, 240, 235, 0.12);
	--kde-line-on-light: rgba(28, 26, 23, 0.14);

	--kde-space-xs: 8px;
	--kde-space-s: 16px;
	--kde-space-m: 24px;
	--kde-space-l: 32px;
	--kde-space-xl: 48px;
	--kde-space-2xl: 64px;
	--kde-space-3xl: 96px;
	--kde-space-4xl: 128px;
}

.kde-single-product,
.kde-single-product *,
.kde-single-product *::before,
.kde-single-product *::after {
	box-sizing: border-box;
}

.kde-single-product img {
	max-width: 100%;
	display: block;
}

/* ── HERO ──
 * Technika "full-bleed" (width:100vw + margin negatywny): rozciąga tło na
 * pełną szerokość viewportu niezależnie od tego, jak wąski jest kontener
 * treści Kadence. Ta sama technika wraca niżej w .kde-section. Wymaga, żeby
 * żaden przodek nie miał overflow-x: hidden — jeśli po wdrożeniu w Kadence
 * sekcja nie sięga krawędzi, sprawdź to w devtools jako pierwszy podejrzany.
 */
.kde-hero {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--kde-bg-hero);
	padding: var(--kde-space-2xl) 24px var(--kde-space-3xl);
	text-align: center;
}
.kde-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.kde-hero__eyebrow {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kde-accent);
	margin-bottom: var(--kde-space-m);
}

.kde-hero__title {
	font-family: 'Fraunces', serif;
	font-optical-sizing: auto;
	font-weight: 560;
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 900px;
	margin: 0 auto;
	color: var(--kde-text-on-dark);
}

.kde-hero__tagline {
	max-width: 560px;
	margin: var(--kde-space-m) auto 0;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: var(--kde-text-on-dark-muted);
}
.kde-hero__tagline p:last-child {
	margin-bottom: 0;
}

.kde-hero__cover {
	max-width: 420px;
	margin: var(--kde-space-xl) auto 0;
}
.kde-hero__cover-img {
	width: 100%;
	height: auto;
	/* Świadomie bez cienia/filtrów/nakładek – okładka ma wybrzmieć czysto. */
}
.kde-hero__cover-placeholder {
	aspect-ratio: 3 / 4;
	background: var(--kde-bg-warm-dark);
	border: 1px dashed var(--kde-line-on-dark);
}

/* ── CENA – zawsze samodzielna linia, nigdy obok okładki ── */
.kde-hero__price {
	margin-top: var(--kde-space-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.kde-hero__price .woocommerce-Price-amount {
	font-family: 'Inter', sans-serif;
	font-size: 40px !important;
	font-weight: 600;
	color: var(--kde-text-on-dark) !important;
}
.kde-hero__price del {
	text-decoration: line-through;
	opacity: 1;
}
.kde-hero__price del .woocommerce-Price-amount {
	font-size: 16px !important;
	font-weight: 400;
	color: var(--kde-text-on-dark-muted) !important;
}
.kde-hero__price ins {
	text-decoration: none;
}
.kde-hero__price-note {
	margin-top: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kde-accent);
}

/* ── CTA – formularz add-to-cart WooCommerce, wewnątrz .kde-hero__cta ── */
.kde-hero__cta {
	margin-top: var(--kde-space-m);
}
.kde-hero__cta form.cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kde-space-s);
}
/* Stepper ilości ukryty – produkty cyfrowe kupuje się w ilości 1;
   input zostaje w DOM (display:none, nie disabled), więc formularz nadal
   wysyła domyślną wartość 1 przy submit. */
.kde-hero__cta .quantity {
	display: none;
}

.kde-hero__cta .single_add_to_cart_button,
.kde-cta {
	display: inline-block;
	padding: 18px 40px;
	background: transparent !important;
	color: var(--kde-accent) !important;
	border: 1.5px solid var(--kde-accent) !important;
	border-radius: 4px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.kde-hero__cta .single_add_to_cart_button:hover,
.kde-hero__cta .single_add_to_cart_button:focus-visible,
.kde-cta:hover,
.kde-cta:focus-visible {
	background: var(--kde-accent) !important;
	color: var(--kde-bg-hero) !important;
}
.kde-hero__cta .single_add_to_cart_button:focus-visible,
.kde-cta:focus-visible {
	outline: 2px solid var(--kde-accent);
	outline-offset: 2px;
}

.kde-hero__trust-row {
	margin-top: var(--kde-space-s);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kde-text-on-dark-muted);
	letter-spacing: 0.01em;
}

/* ── OPIS PRODUKTU (the_content(), bez zakładek, bez ograniczenia szerokości) ──
 * Baza typograficzna dla dowolnej treści wpisanej "na czysto" w Gutenbergu.
 * Sekcje .kde-section niżej nadpisują tło/kolor per blok.
 */
.kde-product-description {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: var(--kde-text-on-light);
}
.kde-product-description h2,
.kde-product-description h3 {
	font-family: 'Fraunces', serif;
	font-optical-sizing: auto;
}
.kde-product-description h2 {
	font-weight: 540;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.kde-product-description h3 {
	font-weight: 520;
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.kde-product-description > .wp-block-group,
.kde-product-description > p,
.kde-product-description > ul,
.kde-product-description > ol {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ── UTILITY: SEKCJE PEŁNEJ SZEROKOŚCI DO UŻYCIA W GUTENBERGU ──
 * Dodaj klasę "Dodatkowa klasa CSS" (Advanced → Additional CSS class(es))
 * bloku Grupa w edytorze: kde-section + kde-section--dark LUB kde-section--light.
 * Środek (.kde-section__inner) wyśrodkowuje i ogranicza kolumnę tekstu –
 * sama sekcja (tło) sięga zawsze krawędzi ekranu.
 */
.kde-product-description .kde-section {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: var(--kde-space-2xl) 24px;
}
@media (min-width: 782px) {
	.kde-product-description .kde-section {
		padding: var(--kde-space-4xl) 24px;
	}
}
.kde-product-description .kde-section--dark {
	background: var(--kde-bg-warm-dark);
	color: var(--kde-text-on-dark);
}
.kde-product-description .kde-section--dark p {
	color: var(--kde-text-on-dark-muted);
}
.kde-product-description .kde-section--dark strong {
	color: var(--kde-text-on-dark);
}
.kde-product-description .kde-section--light {
	background: var(--kde-bg-light);
	color: var(--kde-text-on-light);
}
.kde-product-description .kde-section--light p {
	color: var(--kde-text-on-light-muted);
}
.kde-product-description .kde-section--light strong {
	color: var(--kde-text-on-light);
}
.kde-product-description .kde-section p {
	margin: 0 0 20px;
}
.kde-product-description .kde-section p:last-child {
	margin-bottom: 0;
}

.kde-section__inner {
	max-width: 720px;
	margin: 0 auto;
}
.kde-section__inner--wide {
	max-width: 1000px;
}
.kde-section__eyebrow {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kde-accent);
	text-align: center;
	margin-bottom: var(--kde-space-s);
}
.kde-section__title {
	text-align: center;
	margin: 0 0 var(--kde-space-l);
}

/* Lista "dla kogo" – bez ikon/kart, poziome linie jak w prototypie */
.kde-list-plain {
	list-style: none;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
}
.kde-list-plain li {
	padding: 20px 0;
	border-top: 1px solid var(--kde-line-on-light);
	font-size: 18px;
}
.kde-list-plain li:last-child {
	border-bottom: 1px solid var(--kde-line-on-light);
}

/* Spis treści modułów – numeracja jak w książce, bez ikon/kart */
.kde-toc {
	max-width: 720px;
	margin: 0 auto;
}
.kde-toc__item {
	display: flex;
	gap: var(--kde-space-l);
	padding: var(--kde-space-l) 0;
	border-top: 1px solid var(--kde-line-on-dark);
	text-align: left;
}
.kde-toc__item:last-child {
	border-bottom: 1px solid var(--kde-line-on-dark);
}
.kde-toc__num {
	font-family: 'Fraunces', serif;
	font-weight: 500;
	font-size: 28px;
	color: var(--kde-accent);
	min-width: 48px;
	flex-shrink: 0;
}
.kde-toc__title {
	font-family: 'Fraunces', serif;
	font-weight: 540;
	font-size: 20px;
	letter-spacing: -0.01em;
	color: var(--kde-text-on-dark);
	margin-bottom: 8px;
}
.kde-toc__desc {
	font-size: 16px;
	color: var(--kde-text-on-dark-muted);
}

/* Podgląd — okładki/fragmenty obok siebie */
.kde-preview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kde-space-l);
	max-width: 1000px;
	margin: 0 auto;
}
.kde-preview-item {
	text-align: left;
}
.kde-preview-frame {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--kde-line-on-light);
	background: #e9e5dd;
}
.kde-preview-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kde-preview-num {
	font-family: 'Fraunces', serif;
	font-size: 14px;
	color: var(--kde-accent);
	margin-top: var(--kde-space-s);
}
.kde-preview-title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--kde-text-on-light);
	margin-top: 4px;
}
@media (max-width: 720px) {
	.kde-preview-grid {
		grid-template-columns: 1fr;
		max-width: 360px;
	}
}

/* Bio autora */
.kde-bio {
	display: flex;
	align-items: center;
	gap: var(--kde-space-xl);
	max-width: 720px;
	margin: 0 auto;
}
.kde-bio__photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.kde-bio__text p {
	color: var(--kde-text-on-light-muted);
	margin-bottom: 14px;
	font-size: 17px;
}
.kde-bio__text strong {
	color: var(--kde-text-on-light);
}
@media (max-width: 640px) {
	.kde-bio {
		flex-direction: column;
		text-align: center;
		gap: var(--kde-space-m);
	}
}

/* Finalne CTA – shortcode [kde_final_cta], patrz inc/woocommerce.php */
.kde-final-cta {
	text-align: center;
}
.kde-final-cta__price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.kde-final-cta__price .woocommerce-Price-amount {
	font-family: 'Inter', sans-serif;
	font-size: 40px !important;
	font-weight: 600;
}
.kde-final-cta__price del .woocommerce-Price-amount {
	font-size: 16px !important;
	font-weight: 400;
	opacity: 0.7;
}
.kde-final-cta__price-note {
	margin-top: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--kde-accent);
}
.kde-final-cta .kde-cta {
	margin-top: var(--kde-space-m);
}
.kde-final-cta__trust-row {
	margin-top: var(--kde-space-s);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	letter-spacing: 0.01em;
}