/*
 * Uluna - strona produktu: bloki długiego opisu (moduł inc/produkt)
 *
 * Wygląd bloków, z których zloz-opis.py składa opis produktu (strona/produkt/bloki/*.html),
 * plus kilka dopowiedzeń do bloków kolumny kupna (uluna-produkt-bloki.php).
 * Budowa bloków (układ, odstępy, rozmiary, zachowanie na telefonie) jest ze wzoru wskazanego
 * przez Pawła (12.10.2026); kolory idą wyłącznie ze zmiennych --uluna-*, kroje z --uluna-font-*.
 * Arkusz ładuje się tylko na stronie produktu i każdy selektor zaczyna się od body.single-product.
 *
 * Każdy blok ma na korzeniu klasę "uluna-opis" (wspólne zerowanie stylów motywu) i własną:
 *   0 wspólne (zerowanie, nadtytuł, gwiazdki, przyciski, taśma, zdjęcie w kolumnie, karta-kolumna)
 *   0a pozycje snu (4 zdjęcia)    uluna-opis-pozycje
 *   1 pasek logotypów            uluna-opis-loga
 *   2 karty "przed / po"         uluna-opis-przedpo
 *   3 blok tekstowy              uluna-opis-tekst
 *   4 i 10 karty na osi          uluna-opis-kroki (--dlaczego, --uzycie)
 *   5 trzy karty opinii          uluna-opis-opinie3
 *   6 ciemny panel ze zdjęciem   uluna-opis-panel
 *   7 oś czasu                   uluna-opis-os
 *   8 opinie przewijane w bok    uluna-opis-przewijak
 *   9 ciemna sekcja, trzy karty  uluna-opis-trzy
 *   11 liczby                    uluna-opis-liczby
 *   11b porównanie (karta+tabela) uluna-opis-porownanie
 *   12 pasek haseł               uluna-opis-hasla
 *   13 szczegóły produktu        uluna-opis-szczegoly
 *   14 pytania i odpowiedzi      uluna-opis-faq
 *   15 gwarancja                 uluna-opis-gwar
 *   16 metody płatności          uluna-opis-platnosci
 *   K. kolumna kupna - dopowiedzenia
 *
 * Najmniejszy rozmiar tekstu to 14 px (wzór schodził do 11 px) - klientka Uluny ma 45-64 lata.
 * Ruch (taśmy, przewijanie opinii) włącza skrypt uluna-produkt-opis.js; bez niego bloki stoją
 * w miejscu i dają się przewijać palcem.
 */

/* =====================================================================
   0. WSPÓLNE
   ===================================================================== */

body.single-product .uluna-opis {
	--uluna-opis-rog: 14px;
	box-sizing: border-box;
	color: var(--uluna-tekst);
	font-family: var(--uluna-font-tekst);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.single-product .uluna-opis *,
body.single-product .uluna-opis *::before,
body.single-product .uluna-opis *::after {
	box-sizing: border-box;
}

/*
 * Motyw dokłada akapitom, listom, nagłówkom i obrazkom własne odstępy - w blokach zaczynamy od zera.
 * :where() trzyma te reguły słabe: każda klasa bloku niżej w arkuszu je nadpisuje.
 */
body.single-product .uluna-opis :where(p, h2, h3, h4, ul, ol, li, figure, figcaption) {
	margin: 0;
	padding: 0;
}

body.single-product .uluna-opis :where(ul, ol, li) {
	list-style: none !important;
	background: none;
}

body.single-product .uluna-opis li::marker {
	content: "";
}

body.single-product .uluna-opis :where(h2, h3, h4) {
	color: var(--uluna-tekst);
	font-family: var(--uluna-font-naglowek);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

body.single-product .uluna-opis h2 em,
body.single-product .uluna-opis h3 em {
	font-family: inherit;
	font-style: italic;
	font-weight: 400;
}

body.single-product .uluna-opis :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	box-shadow: none;
}

body.single-product .uluna-opis :where(svg) {
	display: block;
	flex: none;
}

body.single-product .uluna-opis :where(b, strong) {
	color: inherit;
	font-family: inherit;
	font-weight: 700;
}

body.single-product .uluna-opis :where(a) {
	text-decoration: none;
}

/* Bloki "kod HTML" mają w motywie dolny margines - odstępy między blokami ustawiają same bloki. */
body.single-product .wpb_raw_html:has(> .wpb_wrapper > .uluna-opis),
body.single-product .wpb_raw_html:has(> .wpb_wrapper > .uluna-opis-zdjecie) {
	margin-bottom: 0;
}

/* Nadtytuł: mały napis wielkimi literami nad nagłówkiem. */
body.single-product .uluna-opis-nadtytul {
	display: block;
	margin-bottom: 12px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.3;
	text-transform: uppercase;
}

body.single-product .uluna-opis-gwiazdki {
	color: var(--uluna-tekst);
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1.2;
}

/* Wyróżnienie w zdaniu: pogrubienie z kreską w kolorze przycisku. */
body.single-product .uluna-opis-wyroznienie {
	border-bottom: 2px solid var(--uluna-przycisk);
	font-weight: 700;
}

/* Ciemna pigułka nad nagłówkiem (np. gwiazdki z oceną). */
body.single-product .uluna-opis-pigulka {
	display: inline-block;
	margin-bottom: 16px;
	padding: 8px 20px;
	border-radius: 20px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * Przycisk w opisie. Atrybut data-uluna-kup: skrypt modułu naciska za klientkę główny przycisk
 * "dodaj do koszyka" (ten sam formularz co u góry strony), więc koszyk działa tak samo jak zwykle.
 */
body.single-product .uluna-opis-cta {
	margin-top: 26px;
}

body.single-product .uluna-opis-cta--srodek {
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-cta__przycisk {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 8px;
	background: var(--uluna-przycisk);
	color: var(--uluna-przycisk-tekst);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-product .uluna-opis .uluna-opis-cta__przycisk:hover,
body.single-product .uluna-opis .uluna-opis-cta__przycisk:focus-visible {
	color: var(--uluna-przycisk-tekst);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--uluna-tekst) 22%, transparent);
	transform: translateY(-2px);
}

body.single-product .uluna-opis-cta__dopisek {
	display: block;
	margin-top: 10px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	line-height: 1.4;
}

/* Wersja sklejona: dopisek jest dolną częścią przycisku (pasek pod spodem). */
body.single-product .uluna-opis-cta--sklejony {
	display: block;
}

body.single-product .uluna-opis-cta--sklejony.uluna-opis-cta--srodek {
	display: table;
	margin-right: auto;
	margin-left: auto;
}

body.single-product .uluna-opis .uluna-opis-cta--sklejony .uluna-opis-cta__przycisk {
	display: block;
	padding-right: 40px;
	padding-left: 40px;
	border-radius: 8px 8px 0 0;
}

body.single-product .uluna-opis-cta--sklejony .uluna-opis-cta__dopisek {
	margin-top: 0;
	padding: 8px;
	border-radius: 0 0 8px 8px;
	background: color-mix(in srgb, var(--uluna-tekst) 10%, transparent);
	font-weight: 600;
	text-align: center;
}

body.single-product .uluna-opis-cta--jasny .uluna-opis-cta__dopisek {
	background: color-mix(in srgb, var(--uluna-tlo) 16%, transparent);
	color: var(--uluna-tlo);
}

/* Taśma: zestaw elementów jadący w lewo bez przerwy. Zestaw powiela i wprawia w ruch skrypt. */
body.single-product .uluna-opis-tasma {
	display: flex;
	width: max-content;
}

body.single-product .uluna-opis-tasma__zestaw {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

body.single-product .uluna-opis-tasma--jedzie {
	animation: uluna-opis-tasma var(--uluna-opis-tasma-czas, 25s) linear infinite;
}

body.single-product .uluna-opis-tasma--jedzie:hover {
	animation-play-state: paused;
}

@keyframes uluna-opis-tasma {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--uluna-opis-tasma-krok, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .uluna-opis-tasma--jedzie {
		animation: none;
	}
}

/* Zdjęcie w drugiej kolumnie wiersza (obok bloku tekstowego, "dlaczego" i kroków). */
body.single-product img.uluna-opis-zdjecie {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 15px;
}

/*
 * Kolumna-karta: jasne tło i zaokrąglenie dla kolumny z blokiem tekstowym, "dlaczego" i krokami.
 * We wzorze kolor był wpisany w wiersz; tu daje go klasa kolumny (albo sam blok w środku).
 */
body.single-product .wpb_column.uluna-opis-kolumna-karta > .vc_column-inner,
body.single-product .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_raw_html .uluna-opis-tekst) > .vc_column-inner,
body.single-product .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_raw_html .uluna-opis-kroki) > .vc_column-inner {
	padding: 4%;
	border-radius: 15px;
	background: var(--uluna-karta);
}

@media (max-width: 690px) {
	body.single-product .wpb_column.uluna-opis-kolumna-karta > .vc_column-inner,
	body.single-product .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_raw_html .uluna-opis-tekst) > .vc_column-inner,
	body.single-product .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .wpb_raw_html .uluna-opis-kroki) > .vc_column-inner {
		padding: 5%;
	}
}

/* =====================================================================
   0a. POZYCJE SNU (wzór Soya Paris, 14.10.2026): pierwszy blok długiego opisu, zaraz pod kolumną kupna.
       Wyśrodkowany nagłówek, pod nim cztery kwadratowe zdjęcia z zaokrąglonymi rogami,
       pod każdym wyśrodkowany, pogrubiony podpis. Komputer: cztery w rzędzie; telefon: dwa na dwa.
       Dolny odstęp daje wiersz (margines pierwszego wiersza w zloz-opis.py), dlatego blok nie ma dołu.
   ===================================================================== */

body.single-product .uluna-opis-pozycje {
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 0 0;
}

body.single-product .uluna-opis .uluna-opis-pozycje__tytul {
	margin-bottom: 34px;
	font-size: 34px !important;
	line-height: 1.2 !important;
	text-align: center;
}

body.single-product .uluna-opis-pozycje__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

body.single-product .uluna-opis .uluna-opis-pozycje__pozycja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	min-width: 0;
	text-align: center;
}

body.single-product .uluna-opis-pozycje__zdjecie {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-sekcja);
}

body.single-product .uluna-opis .uluna-opis-pozycje__zdjecie img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

body.single-product .uluna-opis .uluna-opis-pozycje__podpis {
	color: var(--uluna-tekst);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

/* Tablet: mniejszy nagłówek i odstępy, dalej cztery w rzędzie. */
@media (max-width: 1000px) {
	body.single-product .uluna-opis .uluna-opis-pozycje__tytul {
		margin-bottom: 26px;
		font-size: 28px !important;
	}
	body.single-product .uluna-opis-pozycje__lista {
		gap: 16px;
	}
	body.single-product .uluna-opis .uluna-opis-pozycje__podpis {
		font-size: 16px;
	}
}

/* Telefon: dwa na dwa. */
@media (max-width: 690px) {
	body.single-product .uluna-opis-pozycje {
		padding-top: 30px;
	}
	body.single-product .uluna-opis .uluna-opis-pozycje__tytul {
		margin-bottom: 22px;
		font-size: 26px !important;
	}
	body.single-product .uluna-opis-pozycje__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 12px;
	}
	body.single-product .uluna-opis .uluna-opis-pozycje__pozycja {
		gap: 10px;
	}
}

/* =====================================================================
   1. PASEK LOGOTYPÓW
   ===================================================================== */

body.single-product .uluna-opis-loga {
	padding: 30px 0;
	overflow: hidden;
}

body.single-product .uluna-opis-loga .uluna-opis-tasma__zestaw {
	gap: 60px;
	padding-right: 60px;
}

body.single-product .uluna-opis-loga img {
	width: auto;
	max-width: none;
	height: 50px;
	opacity: 0.7;
	filter: grayscale(100%);
}

/* =====================================================================
   2. KARTY "PRZED / PO" - sekcja na całą szerokość ekranu, karty przesuwane w bok
   ===================================================================== */

body.single-product .uluna-opis-przedpo {
	position: relative;
	left: 50%;
	width: 100vw;
	padding: 58px 0 46px;
	background: var(--uluna-sekcja);
	overflow: hidden;
	transform: translateX(-50%);
}

body.single-product .uluna-opis-przedpo__srodek {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 18px;
}

body.single-product .uluna-opis-przedpo__naglowek {
	max-width: 720px;
	margin: 0 auto 34px;
	text-align: center;
}

body.single-product .uluna-opis-przedpo__ocena {
	margin-bottom: 12px;
	color: var(--uluna-pomoc);
	font-size: 14px;
}

body.single-product .uluna-opis-przedpo__ocena b {
	color: var(--uluna-tekst);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 1px;
}

body.single-product .uluna-opis .uluna-opis-przedpo__tytul {
	margin-bottom: 14px;
	font-size: 38px !important;
	line-height: 1.15 !important;
}

body.single-product .uluna-opis-przedpo__podtytul {
	color: var(--uluna-pomoc);
	font-size: 16px;
	line-height: 1.55;
}

body.single-product .uluna-opis-przedpo__szyna {
	display: flex;
	gap: 20px;
	padding: 2px 0 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

body.single-product .uluna-opis-przedpo__szyna::-webkit-scrollbar {
	display: none;
}

body.single-product .uluna-opis-przedpo__karta {
	display: flex;
	flex: 0 0 calc((100% - 60px) / 4);
	flex-direction: column;
	scroll-snap-align: start;
}

body.single-product .uluna-opis-przedpo__para {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}

body.single-product .uluna-opis-przedpo__zdjecie {
	position: relative;
	aspect-ratio: 5 / 7;
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-linia);
	overflow: hidden;
}

body.single-product .uluna-opis .uluna-opis-przedpo__zdjecie img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

body.single-product .uluna-opis-przedpo__etykieta {
	position: absolute;
	bottom: 9px;
	left: 9px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--uluna-karta);
	color: var(--uluna-tekst);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 1px 4px color-mix(in srgb, var(--uluna-tekst) 22%, transparent);
}

body.single-product .uluna-opis-przedpo .uluna-opis-gwiazdki {
	margin: 15px 0 7px;
}

body.single-product .uluna-opis-przedpo__imie {
	margin-bottom: 9px;
	font-size: 15px;
	font-weight: 700;
}

body.single-product .uluna-opis-przedpo__tekst {
	margin-bottom: 15px;
	font-size: 15px;
	line-height: 1.55;
}

body.single-product .uluna-opis-przedpo__hasla {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: auto;
}

body.single-product .uluna-opis .uluna-opis-przedpo__hasla li {
	padding: 7px 11px;
	border-radius: 5px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

body.single-product .uluna-opis-przedpo__sterowanie {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 30px;
}

body.single-product .uluna-opis-przedpo__strzalka {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s;
}

body.single-product .uluna-opis-przedpo__strzalka[disabled] {
	background: color-mix(in srgb, var(--uluna-tekst) 25%, transparent);
	cursor: default;
}

body.single-product .uluna-opis-przedpo__kropki {
	display: flex;
	align-items: center;
	gap: 7px;
}

body.single-product .uluna-opis-przedpo__kropka {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--uluna-tekst) 25%, transparent);
	cursor: pointer;
	transition: width 0.2s, background 0.2s;
}

body.single-product .uluna-opis-przedpo__kropka--aktywna {
	width: 24px;
	background: var(--uluna-tekst);
}

@media (max-width: 1024px) {
	body.single-product .uluna-opis .uluna-opis-przedpo__tytul {
		font-size: 32px !important;
	}
	body.single-product .uluna-opis-przedpo__karta {
		flex-basis: calc((100% - 20px) / 2);
	}
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-przedpo {
		padding: 42px 0 34px;
	}
	body.single-product .uluna-opis-przedpo__srodek {
		padding: 0 16px;
	}
	body.single-product .uluna-opis-przedpo__naglowek {
		margin-bottom: 24px;
	}
	body.single-product .uluna-opis .uluna-opis-przedpo__tytul {
		font-size: 27px !important;
	}
	body.single-product .uluna-opis-przedpo__podtytul {
		font-size: 15px;
	}
	body.single-product .uluna-opis-przedpo__szyna {
		gap: 16px;
	}
	body.single-product .uluna-opis-przedpo__karta {
		flex-basis: 84%;
	}
	body.single-product .uluna-opis-przedpo__etykieta {
		bottom: 7px;
		left: 7px;
		padding: 5px 9px;
	}
	body.single-product .uluna-opis-przedpo__sterowanie {
		margin-top: 22px;
	}
}

/* =====================================================================
   3. BLOK TEKSTOWY (w kolumnie-karcie, obok zdjęcie)
   ===================================================================== */

body.single-product .uluna-opis .uluna-opis-tekst__tytul {
	margin-bottom: 16px;
	font-size: 28px !important;
	line-height: 1.3 !important;
}

body.single-product .uluna-opis-tekst p {
	margin-bottom: 14px;
	font-size: 16px;
	line-height: 1.65;
}

body.single-product .uluna-opis-tekst p.uluna-opis-tekst__mocny {
	font-weight: 600;
}

body.single-product .uluna-opis-tekst .uluna-opis-cta {
	margin-top: 20px;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis .uluna-opis-tekst__tytul {
		font-size: 24px !important;
	}
	body.single-product .uluna-opis.uluna-opis-tekst .uluna-opis-cta__przycisk {
		display: block;
	}
}

/* =====================================================================
   4 i 10. KARTY NA OSI: numer w kółku na pionowej linii, obok karta z ikoną, tytułem i opisem.
           --dlaczego: nagłówek na środku. --uzycie: etykieta "Krok N", pierwszy krok wyróżniony.
   ===================================================================== */

body.single-product .uluna-opis-kroki {
	max-width: 520px;
	padding: 50px 20px 40px;
}

body.single-product .uluna-opis-kroki__naglowek {
	margin-bottom: 36px;
}

body.single-product .uluna-opis-kroki__naglowek--srodek {
	margin-bottom: 40px;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-kroki__naglowek-tytul {
	margin-bottom: 12px;
	font-size: 30px !important;
	line-height: 1.25 !important;
}

body.single-product .uluna-opis-kroki__naglowek-opis {
	color: var(--uluna-pomoc);
	font-size: 16px;
	line-height: 1.6;
}

body.single-product .uluna-opis-kroki__naglowek-opis strong {
	color: var(--uluna-tekst);
}

body.single-product .uluna-opis-kroki__lista {
	position: relative;
	margin-bottom: 40px;
}

/* Pionowa linia łącząca kroki. */
body.single-product .uluna-opis-kroki__lista::before {
	content: "";
	position: absolute;
	top: 38px;
	bottom: 38px;
	left: 18px;
	width: 2px;
	background: var(--uluna-linia);
}

body.single-product .uluna-opis .uluna-opis-kroki__krok {
	position: relative;
	margin-bottom: 24px;
	padding-left: 56px;
}

body.single-product .uluna-opis .uluna-opis-kroki__krok:last-child {
	margin-bottom: 0;
}

body.single-product .uluna-opis-kroki__numer {
	position: absolute;
	top: 0;
	left: 5px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

body.single-product .uluna-opis-kroki--uzycie .uluna-opis-kroki__numer {
	border: 2px solid var(--uluna-linia);
	background: var(--uluna-tlo);
	color: var(--uluna-pomoc);
}

body.single-product .uluna-opis-kroki--uzycie .uluna-opis-kroki__krok--zrobiony .uluna-opis-kroki__numer {
	border-color: var(--uluna-przycisk);
	background: var(--uluna-przycisk);
	color: var(--uluna-przycisk-tekst);
}

body.single-product .uluna-opis-kroki__karta {
	padding: 22px 24px 24px;
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-tlo);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

body.single-product .uluna-opis-kroki__karta:hover {
	box-shadow: 0 4px 20px color-mix(in srgb, var(--uluna-tekst) 10%, transparent);
	transform: translateY(-2px);
}

body.single-product .uluna-opis-kroki--uzycie .uluna-opis-kroki__krok--zrobiony .uluna-opis-kroki__karta {
	border-left: 3px solid var(--uluna-przycisk);
}

body.single-product .uluna-opis-kroki__etykieta {
	margin-bottom: 8px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.3;
	text-transform: uppercase;
}

body.single-product .uluna-opis-kroki__wiersz {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

body.single-product .uluna-opis-kroki__ikona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--uluna-sekcja);
	color: var(--uluna-tekst);
}

body.single-product .uluna-opis .uluna-opis-kroki__tytul {
	font-size: 22px !important;
	line-height: 1.3 !important;
}

body.single-product .uluna-opis-kroki__opis {
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.65;
}

body.single-product .uluna-opis-kroki__opis strong {
	color: var(--uluna-tekst);
}

body.single-product .uluna-opis-kroki .uluna-opis-cta {
	margin-top: 0;
}

/* Duży przycisk pod krokami: napis i mniejszy dopisek z migającą kropką. */
body.single-product .uluna-opis a.uluna-opis-duzy-przycisk {
	display: block;
	width: 100%;
	padding: 18px 24px;
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-przycisk);
	color: var(--uluna-przycisk-tekst);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-product .uluna-opis a.uluna-opis-duzy-przycisk:hover,
body.single-product .uluna-opis a.uluna-opis-duzy-przycisk:focus-visible {
	box-shadow: 0 6px 24px color-mix(in srgb, var(--uluna-tekst) 22%, transparent);
	transform: translateY(-2px);
}

body.single-product .uluna-opis-duzy-przycisk__napis {
	display: block;
	margin-bottom: 4px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

body.single-product .uluna-opis-duzy-przycisk__dopisek {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

body.single-product .uluna-opis-duzy-przycisk__kropka {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--uluna-przycisk-tekst);
	animation: uluna-opis-puls 1.5s infinite;
}

@keyframes uluna-opis-puls {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .uluna-opis-duzy-przycisk__kropka {
		animation: none;
	}
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-kroki {
		max-width: 100%;
		padding: 35px 12px 30px;
	}
	body.single-product .uluna-opis .uluna-opis-kroki__naglowek-tytul {
		font-size: 24px !important;
	}
	body.single-product .uluna-opis .uluna-opis-kroki__tytul {
		font-size: 19px !important;
	}
	body.single-product .uluna-opis-kroki__karta {
		padding: 16px 14px 18px;
	}
	body.single-product .uluna-opis .uluna-opis-kroki__krok {
		margin-bottom: 18px;
		padding-left: 44px;
	}
	body.single-product .uluna-opis-kroki__lista::before {
		left: 14px;
	}
	body.single-product .uluna-opis-kroki__numer {
		left: 2px;
		width: 26px;
		height: 26px;
	}
	body.single-product .uluna-opis-kroki__ikona {
		width: 30px;
		height: 30px;
	}
	body.single-product .uluna-opis.uluna-opis-kroki .uluna-opis-cta__przycisk {
		display: block;
	}
}

/* =====================================================================
   5. TRZY KARTY OPINII: zdjęcie, gwiazdki i znaczek, tekst, wiersz z produktem
   ===================================================================== */

body.single-product .uluna-opis-opinie3 {
	max-width: 1100px;
	margin: 60px auto;
	padding: 0 20px;
}

body.single-product .uluna-opis-opinie3__naglowek {
	margin-bottom: 40px;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-opinie3__tytul {
	font-size: 36px !important;
	line-height: 1.2 !important;
}

body.single-product .uluna-opis-opinie3__siatka {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

body.single-product .uluna-opis-opinie3__karta {
	flex: 1;
	min-width: 280px;
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-karta);
	overflow: hidden;
}

body.single-product .uluna-opis img.uluna-opis-opinie3__zdjecie {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

body.single-product .uluna-opis-opinie3__tresc {
	padding: 18px 20px;
}

body.single-product .uluna-opis-opinie3__gora {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

body.single-product .uluna-opis-opinie3__znaczek {
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

body.single-product .uluna-opis-opinie3__tekst {
	margin-bottom: 16px;
	font-size: 15px;
	line-height: 1.6;
}

body.single-product .uluna-opis-opinie3__produkt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	background: var(--uluna-tlo);
}

body.single-product .uluna-opis .uluna-opis-opinie3__produkt img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	object-fit: cover;
}

body.single-product .uluna-opis-opinie3__produkt-nazwa {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

body.single-product .uluna-opis-opinie3__produkt-cena {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

body.single-product .uluna-opis-opinie3__produkt-data {
	color: var(--uluna-pomoc);
	font-size: 14px;
	line-height: 1.35;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-opinie3 {
		margin: 40px auto;
		padding: 0;
	}
	body.single-product .uluna-opis .uluna-opis-opinie3__tytul {
		font-size: 27px !important;
	}
}

/* =====================================================================
   6. CIEMNY PANEL: zdjęcie z lewej, nagłówek, akapity, hasła i przycisk z prawej
   ===================================================================== */

body.single-product .uluna-opis-panel {
	max-width: 1100px;
	margin: 60px auto;
	padding: 60px 40px;
	border-radius: 16px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
}

body.single-product .uluna-opis-panel__uklad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 50px;
}

body.single-product .uluna-opis-panel__kolumna {
	flex: 1;
	min-width: 300px;
}

body.single-product .uluna-opis img.uluna-opis-panel__zdjecie {
	width: 100%;
	border-radius: 12px;
}

body.single-product .uluna-opis .uluna-opis-panel__tytul {
	margin-bottom: 24px;
	color: var(--uluna-tlo);
	font-size: 34px !important;
	line-height: 1.2 !important;
}

body.single-product .uluna-opis .uluna-opis-panel__tytul em {
	color: var(--uluna-akcent);
}

body.single-product .uluna-opis-panel p {
	margin-bottom: 14px;
	color: color-mix(in srgb, var(--uluna-tlo) 90%, transparent);
	font-size: 16px;
	line-height: 1.7;
}

body.single-product .uluna-opis-panel p strong {
	color: var(--uluna-tlo);
}

body.single-product .uluna-opis-panel__hasla {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

body.single-product .uluna-opis-panel__haslo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 20px;
	background: var(--uluna-tlo);
	color: var(--uluna-tekst);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

body.single-product .uluna-opis-panel .uluna-opis-cta {
	margin-top: 28px;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-panel {
		margin: 40px auto;
		padding: 28px 18px 30px;
	}
	body.single-product .uluna-opis-panel__uklad {
		gap: 26px;
	}
	body.single-product .uluna-opis-panel__kolumna {
		min-width: 100%;
	}
	body.single-product .uluna-opis .uluna-opis-panel__tytul {
		font-size: 27px !important;
	}
}

/* =====================================================================
   7. OŚ CZASU: cztery etapy na pionowej linii z kropkami
   ===================================================================== */

body.single-product .uluna-opis-os {
	max-width: 800px;
	margin: 60px auto;
	padding: 40px 20px;
}

body.single-product .uluna-opis-os__naglowek {
	margin-bottom: 50px;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-os__naglowek-tytul {
	font-size: 36px !important;
	line-height: 1.2 !important;
}

body.single-product .uluna-opis-os__naglowek-opis {
	margin-top: 14px;
	color: var(--uluna-pomoc);
	font-size: 17px;
}

body.single-product .uluna-opis-os__lista {
	position: relative;
	padding-left: 50px;
	border-left: 2px solid var(--uluna-linia);
}

body.single-product .uluna-opis-os__etap {
	position: relative;
	padding-bottom: 44px;
}

body.single-product .uluna-opis-os__etap:last-child {
	padding-bottom: 0;
}

/* Kropka na linii. */
body.single-product .uluna-opis-os__etap::before {
	content: "";
	position: absolute;
	top: 4px;
	left: -60px;
	width: 18px;
	height: 18px;
	border: 3px solid var(--uluna-tlo);
	border-radius: 50%;
	background: var(--uluna-tekst);
}

body.single-product .uluna-opis-os__kiedy {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 12px;
	border-radius: 12px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

body.single-product .uluna-opis .uluna-opis-os__tytul {
	margin: 6px 0 8px;
	font-size: 22px !important;
	line-height: 1.3 !important;
}

body.single-product .uluna-opis-os__opis {
	color: var(--uluna-pomoc);
	font-size: 16px;
	line-height: 1.6;
}

body.single-product .uluna-opis-os .uluna-opis-cta {
	margin-top: 50px;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-os {
		margin: 30px auto;
		padding: 30px 6px;
	}
	body.single-product .uluna-opis-os__naglowek {
		margin-bottom: 34px;
	}
	body.single-product .uluna-opis .uluna-opis-os__naglowek-tytul {
		font-size: 27px !important;
	}
	body.single-product .uluna-opis-os__lista {
		margin-left: 10px;
		padding-left: 30px;
	}
	body.single-product .uluna-opis-os__etap::before {
		left: -40px;
	}
	body.single-product .uluna-opis-os .uluna-opis-cta--sklejony.uluna-opis-cta--srodek {
		display: block;
	}
}

/* =====================================================================
   8. OPINIE PRZEWIJANE W BOK: taśma kart ze zdjęciem; jedzie sama, da się ją ciągnąć
   ===================================================================== */

body.single-product .uluna-opis-przewijak {
	max-width: 100%;
	padding: 60px 0 50px;
	overflow: hidden;
}

body.single-product .uluna-opis-przewijak__naglowek {
	margin-bottom: 10px;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-przewijak__tytul {
	margin-bottom: 10px;
	font-size: 32px !important;
	font-style: italic;
	line-height: 1.2 !important;
}

body.single-product .uluna-opis-przewijak__podtytul {
	margin-bottom: 18px;
	color: var(--uluna-pomoc);
	font-size: 16px;
}

body.single-product .uluna-opis-przewijak__podpowiedz {
	margin-bottom: 25px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-align: center;
	text-transform: uppercase;
}

/* Bez skryptu: zwykłe przewijanie palcem. Ze skryptem (klasa --jedzie): taśma sterowana przesunięciem. */
body.single-product .uluna-opis-przewijak__okno {
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

body.single-product .uluna-opis-przewijak__okno::-webkit-scrollbar {
	display: none;
}

body.single-product .uluna-opis-przewijak__okno--jedzie {
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

body.single-product .uluna-opis-przewijak__okno--jedzie:active {
	cursor: grabbing;
}

body.single-product .uluna-opis-przewijak__tor {
	display: flex;
	gap: 20px;
	width: max-content;
	padding: 0 20px;
	will-change: transform;
}

body.single-product .uluna-opis-przewijak__karta {
	flex: 0 0 280px;
	width: 280px;
	border: 1px solid var(--uluna-linia);
	border-radius: 12px;
	background: var(--uluna-karta);
	overflow: hidden;
}

body.single-product .uluna-opis img.uluna-opis-przewijak__zdjecie {
	width: 100%;
	height: 300px;
	object-fit: cover;
	pointer-events: none;
}

body.single-product .uluna-opis-przewijak__tresc {
	padding: 18px 16px 20px;
}

body.single-product .uluna-opis-przewijak__imie {
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

body.single-product .uluna-opis-przewijak__znaczek {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 12px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
	line-height: 1.3;
	text-transform: uppercase;
}

body.single-product .uluna-opis-przewijak__znaczek svg {
	width: 16px;
	height: 16px;
}

body.single-product .uluna-opis-przewijak__tekst {
	font-size: 15px;
	line-height: 1.55;
}

@media (max-width: 768px) {
	body.single-product .uluna-opis-przewijak {
		padding: 40px 0 35px;
	}
	body.single-product .uluna-opis .uluna-opis-przewijak__tytul {
		padding: 0 20px;
		font-size: 24px !important;
	}
	body.single-product .uluna-opis-przewijak__podtytul {
		padding: 0 20px;
		font-size: 15px;
	}
	body.single-product .uluna-opis-przewijak__karta {
		flex-basis: 250px;
		width: 250px;
	}
	body.single-product .uluna-opis img.uluna-opis-przewijak__zdjecie {
		height: 260px;
	}
}

@media (max-width: 480px) {
	body.single-product .uluna-opis-przewijak__karta {
		flex-basis: 230px;
		width: 230px;
	}
	body.single-product .uluna-opis img.uluna-opis-przewijak__zdjecie {
		height: 240px;
	}
	body.single-product .uluna-opis-przewijak__tresc {
		padding: 14px 14px 16px;
	}
}

/* =====================================================================
   9. CIEMNA SEKCJA NA CAŁĄ SZEROKOŚĆ EKRANU: nagłówek i trzy karty (zdjęcie, tytuł, opis)
   ===================================================================== */

body.single-product .uluna-opis-trzy {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-top: 60px;
	padding: 50px 20px 80px;
	background: var(--uluna-tekst);
	transform: translateX(-50%);
}

body.single-product .uluna-opis .uluna-opis-trzy__naglowek {
	margin-bottom: 40px;
	color: var(--uluna-tlo);
	font-size: 34px !important;
	line-height: 1.2 !important;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-trzy__naglowek em {
	color: var(--uluna-akcent);
}

body.single-product .uluna-opis-trzy__siatka {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto;
}

body.single-product .uluna-opis-trzy__karta {
	flex: 1;
	min-width: 260px;
	max-width: 320px;
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-karta);
	overflow: hidden;
}

body.single-product .uluna-opis img.uluna-opis-trzy__zdjecie {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

body.single-product .uluna-opis-trzy__tresc {
	padding: 18px 20px 24px;
}

body.single-product .uluna-opis .uluna-opis-trzy__tytul {
	margin-bottom: 8px;
	font-size: 19px !important;
	line-height: 1.3 !important;
}

body.single-product .uluna-opis-trzy__opis {
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-trzy {
		padding: 40px 16px 50px;
	}
	body.single-product .uluna-opis .uluna-opis-trzy__naglowek {
		margin-bottom: 28px;
		font-size: 27px !important;
	}
	body.single-product .uluna-opis-trzy__karta {
		max-width: 100%;
	}
}

/* =====================================================================
   11. LICZBY: trzy wiersze - duża liczba z lewej, tytuł i opis z prawej; pod spodem źródło
   ===================================================================== */

body.single-product .uluna-opis-liczby {
	max-width: 700px;
	margin: 0 auto;
	padding: 60px 20px 50px;
}

body.single-product .uluna-opis-liczby__naglowek {
	margin-bottom: 45px;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-liczby__naglowek-tytul {
	margin-bottom: 10px;
	font-size: 34px !important;
	line-height: 1.2 !important;
}

body.single-product .uluna-opis-liczby__naglowek-opis {
	color: var(--uluna-pomoc);
	font-size: 16px;
}

body.single-product .uluna-opis-liczby__lista {
	margin-bottom: 40px;
}

body.single-product .uluna-opis .uluna-opis-liczby__wiersz {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--uluna-linia);
}

body.single-product .uluna-opis .uluna-opis-liczby__wiersz:last-child {
	border-bottom: 0;
}

body.single-product .uluna-opis-liczby__liczba {
	flex-shrink: 0;
	min-width: 120px;
	color: var(--uluna-tekst);
	font-family: var(--uluna-font-naglowek);
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

body.single-product .uluna-opis-liczby__tresc {
	flex: 1;
}

body.single-product .uluna-opis .uluna-opis-liczby__tytul {
	margin-bottom: 4px;
	font-size: 19px !important;
	line-height: 1.3 !important;
}

body.single-product .uluna-opis-liczby__opis {
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.5;
}

body.single-product .uluna-opis-liczby__zrodlo {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	border: 1px solid var(--uluna-linia);
	border-radius: 8px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 500;
}

body.single-product .uluna-opis-liczby__znak {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--uluna-pomoc);
	color: var(--uluna-tlo);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-liczby {
		padding: 40px 6px 35px;
	}
	body.single-product .uluna-opis .uluna-opis-liczby__naglowek-tytul {
		font-size: 26px !important;
	}
	body.single-product .uluna-opis .uluna-opis-liczby__wiersz {
		flex-direction: column;
		gap: 6px;
		padding: 18px 0;
	}
	body.single-product .uluna-opis-liczby__liczba {
		min-width: 0;
		font-size: 40px;
	}
	body.single-product .uluna-opis .uluna-opis-liczby__tytul {
		font-size: 17px !important;
	}
}

/* =====================================================================
   11b. PORÓWNANIE (wzór Soya Paris, 14.10.2026): z lewej jasna karta z nagłówkiem na środku i akapitami,
        z prawej tabela w dwóch kolumnach - jasna "ErgoLuna" z ptaszkami i granatowa "zwykła poduszka"
        z krzyżykami. Tabela to siatka 2 x 6 (nazwa ze zdjęciem + 4 wiersze), komórki stoją parami,
        więc wiersz 1 zawsze obok wiersza 1, nawet gdy tekst po jednej stronie jest dłuższy.
        Telefon: karta nad tabelą, tabela dalej w dwóch kolumnach (węższe, mniejszy tekst).
   ===================================================================== */

body.single-product .uluna-opis-porownanie {
	/* Krzyżyk: jedyny kolor spoza palety w tym bloku (czerwony X z wzoru, polecenie z 14.10.2026).
	   Jasny odcień, bo stoi tylko na granacie - kontrast z granatem ok. 4,9:1. */
	--uluna-opis-porownanie-krzyzyk: #F2705F;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: 30px;
	align-items: stretch;
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 0 50px;
}

/* Karta z lewej: piasek, nagłówek i akapity na środku, treść wyśrodkowana w pionie obok tabeli. */
body.single-product .uluna-opis-porownanie__karta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px 40px;
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-sekcja);
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-porownanie__tytul {
	margin-bottom: 18px;
	font-size: 32px !important;
	line-height: 1.2 !important;
}

body.single-product .uluna-opis-porownanie__akapit {
	font-size: 16px;
	line-height: 1.62;
}

body.single-product .uluna-opis .uluna-opis-porownanie__akapit + .uluna-opis-porownanie__akapit {
	margin-top: 14px;
}

/* Tabela: dwie równe kolumny; tło każdej kolumny dają jej komórki (bez przerw między nimi). */
body.single-product .uluna-opis-porownanie__tabela {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-karta);
}

body.single-product .uluna-opis-porownanie__gora,
body.single-product .uluna-opis-porownanie__wiersz {
	min-width: 0;
	background: var(--uluna-karta);
	color: var(--uluna-tekst);
}

body.single-product .uluna-opis-porownanie__gora--minus,
body.single-product .uluna-opis-porownanie__wiersz--minus {
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
}

/* Góra kolumny: nazwa (Fraunces) i zdjęcie produktu bez tła. */
body.single-product .uluna-opis-porownanie__gora {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 30px 22px 14px;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-porownanie__nazwa {
	color: inherit;
	font-size: 26px !important;
	line-height: 1.2 !important;
}

body.single-product .uluna-opis-porownanie__zdjecie {
	width: 100%;
	max-width: 240px;
	aspect-ratio: 4 / 3;
}

body.single-product .uluna-opis .uluna-opis-porownanie__zdjecie img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Wiersz: znaczek w kółku i tekst; nad każdym wierszem linia w kolorze swojej kolumny, odsunięta od krawędzi. */
body.single-product .uluna-opis-porownanie__wiersz {
	--uluna-opis-porownanie-linia: var(--uluna-linia);
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 22px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
}

body.single-product .uluna-opis-porownanie__wiersz::before {
	content: "";
	position: absolute;
	top: 0;
	right: 22px;
	left: 22px;
	border-top: 1px solid var(--uluna-opis-porownanie-linia);
}

body.single-product .uluna-opis-porownanie__wiersz--minus {
	--uluna-opis-porownanie-linia: color-mix(in srgb, var(--uluna-tlo) 18%, transparent);
}

body.single-product .uluna-opis-porownanie__wiersz--ostatni {
	padding-bottom: 26px;
}

body.single-product .uluna-opis-porownanie__znak {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: -1px;
	border-radius: 50%;
}

/* Ptaszek: granat na moreli - ta sama para co napis na przycisku kupna. */
body.single-product .uluna-opis-porownanie__wiersz--plus .uluna-opis-porownanie__znak {
	background: var(--uluna-przycisk);
	color: var(--uluna-przycisk-tekst);
}

body.single-product .uluna-opis-porownanie__wiersz--minus .uluna-opis-porownanie__znak {
	background: color-mix(in srgb, var(--uluna-opis-porownanie-krzyzyk) 16%, transparent);
	color: var(--uluna-opis-porownanie-krzyzyk);
}

body.single-product .uluna-opis-porownanie__tekst {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Tablet: karta węższa, tabela dalej obok. */
@media (max-width: 1000px) {
	body.single-product .uluna-opis-porownanie {
		gap: 20px;
	}
	body.single-product .uluna-opis-porownanie__karta {
		padding: 34px 26px;
	}
	body.single-product .uluna-opis .uluna-opis-porownanie__tytul {
		font-size: 28px !important;
	}
}

/* Telefon: karta nad tabelą; tabela w dwóch wąskich kolumnach, mniejszy tekst i znaczek. */
@media (max-width: 690px) {
	body.single-product .uluna-opis-porownanie {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 40px 0 35px;
	}
	body.single-product .uluna-opis-porownanie__karta {
		padding: 28px 20px;
	}
	body.single-product .uluna-opis .uluna-opis-porownanie__tytul {
		margin-bottom: 14px;
		font-size: 26px !important;
	}
	body.single-product .uluna-opis-porownanie__akapit {
		font-size: 15px;
	}
	body.single-product .uluna-opis-porownanie__gora {
		gap: 10px;
		padding: 20px 10px 8px;
	}
	body.single-product .uluna-opis .uluna-opis-porownanie__nazwa {
		font-size: 19px !important;
	}
	body.single-product .uluna-opis-porownanie__wiersz {
		gap: 7px;
		padding: 12px 10px;
		font-size: 14px;
		line-height: 1.4;
	}
	body.single-product .uluna-opis-porownanie__wiersz::before {
		right: 10px;
		left: 10px;
	}
	body.single-product .uluna-opis-porownanie__wiersz--ostatni {
		padding-bottom: 18px;
	}
	body.single-product .uluna-opis-porownanie__znak {
		width: 20px;
		height: 20px;
		margin-top: 0;
	}
	body.single-product .uluna-opis-porownanie__znak svg {
		width: 12px;
		height: 12px;
	}
}

/* =====================================================================
   12. PASEK HASEŁ: nagłówek i taśma pigułek na całą szerokość ekranu
   ===================================================================== */

body.single-product .uluna-opis-hasla {
	position: relative;
	left: 50%;
	width: 100vw;
	padding: 30px 0;
	overflow: hidden;
	transform: translateX(-50%);
}

body.single-product .uluna-opis .uluna-opis-hasla__tytul {
	margin-bottom: 20px;
	font-size: 24px !important;
	line-height: 1.3 !important;
	text-align: center;
}

body.single-product .uluna-opis-hasla .uluna-opis-tasma__zestaw {
	gap: 12px;
	padding-right: 12px;
}

body.single-product .uluna-opis-hasla__haslo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1.5px solid var(--uluna-tekst);
	border-radius: 50px;
	background: var(--uluna-karta);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

body.single-product .uluna-opis-hasla__znak {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--uluna-sekcja);
}

body.single-product .uluna-opis-hasla__znak svg {
	width: 11px;
	height: 11px;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-hasla {
		padding: 24px 0;
	}
	body.single-product .uluna-opis .uluna-opis-hasla__tytul {
		margin-bottom: 16px;
		padding: 0 16px;
		font-size: 21px !important;
	}
	body.single-product .uluna-opis-hasla__haslo {
		padding: 8px 16px;
		font-size: 14px;
	}
}

/* =====================================================================
   13. SZCZEGÓŁY PRODUKTU: nagłówek, trzy fakty, grupy (siatka kart, karta wyróżniona,
       lista wierszy, siatka krótkich pozycji), wątpliwość z kreską, ramka z pełną listą
   ===================================================================== */

body.single-product .uluna-opis-szczegoly {
	max-width: 660px;
	margin: 0 auto;
	padding: 56px 20px 48px;
}

body.single-product .uluna-opis-szczegoly__naglowek {
	margin-bottom: 30px;
	text-align: center;
}

body.single-product .uluna-opis .uluna-opis-szczegoly__tytul {
	font-size: 32px !important;
	line-height: 1.18 !important;
}

body.single-product .uluna-opis-szczegoly__wstep {
	margin-top: 14px;
	color: var(--uluna-pomoc);
	font-size: 16px;
	line-height: 1.62;
}

body.single-product .uluna-opis-szczegoly p strong {
	color: var(--uluna-tekst);
	font-weight: 600;
}

body.single-product .uluna-opis-szczegoly__fakty {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 44px;
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-karta);
	overflow: hidden;
}

body.single-product .uluna-opis-szczegoly__fakt {
	padding: 18px 10px;
	border-right: 1px solid var(--uluna-linia);
	text-align: center;
}

body.single-product .uluna-opis-szczegoly__fakt:last-child {
	border-right: 0;
}

body.single-product .uluna-opis-szczegoly__fakt-liczba {
	display: block;
	margin-bottom: 7px;
	font-family: var(--uluna-font-naglowek);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
}

body.single-product .uluna-opis-szczegoly__fakt-opis {
	display: block;
	color: var(--uluna-pomoc);
	font-size: 14px;
	line-height: 1.42;
}

body.single-product .uluna-opis-szczegoly__grupa {
	margin-bottom: 42px;
}

body.single-product .uluna-opis-szczegoly__grupa-naglowek {
	margin-bottom: 20px;
}

body.single-product .uluna-opis-szczegoly__etykieta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.8px;
	line-height: 1.3;
	text-transform: uppercase;
}

body.single-product .uluna-opis-szczegoly__etykieta::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--uluna-pomoc);
}

body.single-product .uluna-opis .uluna-opis-szczegoly__grupa-tytul {
	font-size: 23px !important;
	line-height: 1.28 !important;
}

body.single-product .uluna-opis-szczegoly__grupa-opis {
	margin-top: 9px;
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.6;
}

body.single-product .uluna-opis-szczegoly__siatka {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

body.single-product .uluna-opis-szczegoly__karta {
	padding: 20px 18px 19px;
	border: 1px solid var(--uluna-linia);
	border-radius: 16px;
	background: var(--uluna-karta);
}

body.single-product .uluna-opis-szczegoly__karta-gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}

body.single-product .uluna-opis-szczegoly__ikona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--uluna-sekcja);
	color: var(--uluna-tekst);
}

body.single-product .uluna-opis-szczegoly__dopisek {
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	white-space: nowrap;
}

body.single-product .uluna-opis.uluna-opis-szczegoly h4 {
	font-family: var(--uluna-font-tekst);
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.3 !important;
}

body.single-product .uluna-opis-szczegoly__mala-nazwa {
	display: block;
	margin-top: 3px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

body.single-product .uluna-opis-szczegoly__karta p {
	margin-top: 10px;
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.58;
}

body.single-product .uluna-opis-szczegoly__wyrozniona {
	padding: 26px 22px 24px;
	border: 1px solid var(--uluna-linia);
	border-radius: 18px;
	background: var(--uluna-sekcja);
}

body.single-product .uluna-opis-szczegoly__wyrozniona-gora {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 14px;
}

body.single-product .uluna-opis-szczegoly__wyrozniona .uluna-opis-szczegoly__ikona {
	width: 42px;
	height: 42px;
	background: var(--uluna-karta);
}

body.single-product .uluna-opis-szczegoly__wyrozniona p {
	font-size: 15px;
	line-height: 1.62;
}

body.single-product .uluna-opis-szczegoly__wyrozniona p + p {
	margin-top: 11px;
}

body.single-product .uluna-opis-szczegoly__rzedy {
	border: 1px solid var(--uluna-linia);
	border-radius: 16px;
	background: var(--uluna-karta);
	overflow: hidden;
}

body.single-product .uluna-opis .uluna-opis-szczegoly__rzedy li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--uluna-linia);
}

body.single-product .uluna-opis .uluna-opis-szczegoly__rzedy li:last-child {
	border-bottom: 0;
}

body.single-product .uluna-opis-szczegoly__nr {
	min-width: 22px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

body.single-product .uluna-opis-szczegoly__rzad-nazwa {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

body.single-product .uluna-opis-szczegoly__rzad-nazwa span {
	margin-left: 7px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
}

body.single-product .uluna-opis-szczegoly__rzad-opis {
	margin-top: 4px;
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.55;
}

body.single-product .uluna-opis-szczegoly__chipsy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
}

body.single-product .uluna-opis .uluna-opis-szczegoly__chipsy li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 13px;
	border: 1px solid var(--uluna-linia);
	border-radius: 11px;
	background: var(--uluna-karta);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

body.single-product .uluna-opis-szczegoly__uwaga {
	margin-top: 16px;
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.6;
}

body.single-product .uluna-opis-szczegoly__watpliwosc {
	margin-bottom: 40px;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--uluna-przycisk);
}

body.single-product .uluna-opis-szczegoly__watpliwosc p {
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.62;
}

body.single-product .uluna-opis-szczegoly__watpliwosc p.uluna-opis-szczegoly__watpliwosc-pytanie {
	margin-bottom: 8px;
	color: var(--uluna-tekst);
	font-size: 16px;
	font-weight: 700;
}

body.single-product .uluna-opis-szczegoly__ramka {
	padding: 22px 20px;
	border: 1px solid var(--uluna-linia);
	border-radius: 16px;
	background: var(--uluna-karta);
}

body.single-product .uluna-opis .uluna-opis-szczegoly__ramka h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--uluna-font-tekst);
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.3 !important;
}

body.single-product .uluna-opis-szczegoly__ramka-opis {
	margin-top: 7px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	line-height: 1.55;
}

body.single-product .uluna-opis-szczegoly__ramka-lista {
	margin-top: 14px;
	font-size: 14px;
	letter-spacing: 0.3px;
	line-height: 1.85;
	word-break: break-word;
}

@media (max-width: 560px) {
	body.single-product .uluna-opis-szczegoly {
		padding: 44px 6px 38px;
	}
	body.single-product .uluna-opis .uluna-opis-szczegoly__tytul {
		font-size: 27px !important;
	}
	body.single-product .uluna-opis-szczegoly__fakty {
		grid-template-columns: 1fr;
	}
	body.single-product .uluna-opis-szczegoly__fakt {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 18px;
		border-right: 0;
		border-bottom: 1px solid var(--uluna-linia);
		text-align: left;
	}
	body.single-product .uluna-opis-szczegoly__fakt:last-child {
		border-bottom: 0;
	}
	body.single-product .uluna-opis-szczegoly__fakt-liczba {
		min-width: 34px;
		margin-bottom: 0;
		font-size: 24px;
	}
	body.single-product .uluna-opis-szczegoly__siatka {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	body.single-product .uluna-opis .uluna-opis-szczegoly__grupa-tytul {
		font-size: 21px !important;
	}
	body.single-product .uluna-opis-szczegoly__chipsy {
		grid-template-columns: 1fr;
	}
	body.single-product .uluna-opis-szczegoly__wyrozniona {
		padding: 22px 18px;
	}
	body.single-product .uluna-opis .uluna-opis-szczegoly__rzedy li {
		gap: 11px;
		padding: 14px 15px;
	}
	body.single-product .uluna-opis-szczegoly__rzad-nazwa span {
		display: block;
		margin-top: 3px;
		margin-left: 0;
	}
}

/* =====================================================================
   14. PYTANIA I ODPOWIEDZI: jedna ramka, pozycje oddzielone liniami, plus obraca się w krzyżyk.
       Zbudowane na details / summary - działa bez skryptu.
   ===================================================================== */

body.single-product .uluna-opis-faq {
	max-width: 750px;
	margin: 0 auto;
	padding: 60px 20px 50px;
}

body.single-product .uluna-opis .uluna-opis-faq__tytul {
	margin-bottom: 30px;
	font-size: 34px !important;
	line-height: 1.2 !important;
	text-align: center;
}

body.single-product .uluna-opis-faq__lista {
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-opis-rog);
	background: var(--uluna-karta);
	overflow: hidden;
}

body.single-product .uluna-opis-faq__pozycja {
	border-bottom: 1px solid var(--uluna-linia);
}

body.single-product .uluna-opis-faq__pozycja:last-child {
	border-bottom: 0;
}

body.single-product .uluna-opis-faq__pytanie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
	transition: background 0.2s;
}

body.single-product .uluna-opis-faq__pytanie::-webkit-details-marker {
	display: none;
}

body.single-product .uluna-opis-faq__pytanie:hover {
	background: color-mix(in srgb, var(--uluna-tlo) 60%, transparent);
}

body.single-product .uluna-opis-faq__pytanie:focus-visible {
	outline: 2px solid var(--uluna-tekst);
	outline-offset: -2px;
}

body.single-product .uluna-opis-faq__plus {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--uluna-pomoc);
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	transition: transform 0.3s ease;
}

body.single-product .uluna-opis-faq__pozycja[open] .uluna-opis-faq__plus {
	transform: rotate(45deg);
}

body.single-product .uluna-opis-faq__odpowiedz {
	padding: 0 24px 22px;
	color: var(--uluna-pomoc);
	font-size: 16px;
	line-height: 1.65;
}

body.single-product .uluna-opis-faq__odpowiedz strong {
	color: var(--uluna-tekst);
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-faq {
		padding: 40px 0 35px;
	}
	body.single-product .uluna-opis .uluna-opis-faq__tytul {
		font-size: 26px !important;
	}
	body.single-product .uluna-opis-faq__pytanie {
		padding: 18px;
		font-size: 16px;
	}
	body.single-product .uluna-opis-faq__odpowiedz {
		padding: 0 18px 18px;
		font-size: 15px;
	}
}

/* =====================================================================
   15. GWARANCJA: ciemna ramka z ikoną tarczy, nagłówkiem, opisem, przyciskiem i trzema znaczkami
   ===================================================================== */

body.single-product .uluna-opis-gwar {
	max-width: 900px;
	margin: 0 auto;
	padding: 50px 30px 45px;
	border-radius: 16px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	text-align: center;
}

body.single-product .uluna-opis-gwar__ikona {
	width: 52px;
	height: 52px;
	margin: 0 auto 18px;
	color: var(--uluna-akcent);
}

body.single-product .uluna-opis .uluna-opis-gwar__tytul {
	margin-bottom: 16px;
	color: var(--uluna-tlo);
	font-size: 30px !important;
	line-height: 1.25 !important;
}

body.single-product .uluna-opis .uluna-opis-gwar__tytul em {
	color: var(--uluna-akcent);
}

body.single-product .uluna-opis-gwar__opis {
	max-width: 600px;
	margin: 0 auto 28px !important;
	color: color-mix(in srgb, var(--uluna-tlo) 90%, transparent);
	font-size: 16px;
	line-height: 1.65;
}

body.single-product .uluna-opis a.uluna-opis-gwar__przycisk {
	display: inline-block;
	padding: 18px 80px;
	border-radius: 50px;
	background: var(--uluna-przycisk);
	color: var(--uluna-przycisk-tekst);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-product .uluna-opis a.uluna-opis-gwar__przycisk:hover,
body.single-product .uluna-opis a.uluna-opis-gwar__przycisk:focus-visible {
	box-shadow: 0 6px 24px color-mix(in srgb, var(--uluna-tlo) 25%, transparent);
	transform: translateY(-2px);
}

body.single-product .uluna-opis-gwar__znaki {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 22px;
}

body.single-product .uluna-opis-gwar__znak {
	display: flex;
	align-items: center;
	gap: 6px;
	color: color-mix(in srgb, var(--uluna-tlo) 90%, transparent);
	font-size: 15px;
	font-weight: 600;
}

body.single-product .uluna-opis-gwar__znak svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 600px) {
	body.single-product .uluna-opis-gwar {
		padding: 40px 20px 35px;
		border-radius: 12px;
	}
	body.single-product .uluna-opis .uluna-opis-gwar__tytul {
		font-size: 24px !important;
	}
	body.single-product .uluna-opis-gwar__opis {
		font-size: 15px;
	}
	body.single-product .uluna-opis a.uluna-opis-gwar__przycisk {
		display: block;
		padding: 16px 20px;
		font-size: 17px;
	}
	body.single-product .uluna-opis-gwar__znaki {
		gap: 12px 16px;
	}
	body.single-product .uluna-opis-gwar__znak {
		font-size: 14px;
	}
}

/* =====================================================================
   16. METODY PŁATNOŚCI: jeden obrazek na środku
   ===================================================================== */

body.single-product .uluna-opis-platnosci {
	padding-top: 40px;
	text-align: center;
}

body.single-product .uluna-opis-platnosci img {
	margin: 0 auto;
}

/* =====================================================================
   K. KOLUMNA KUPNA - dopowiedzenia do bloków z uluna-produkt-bloki.php
   ===================================================================== */

/* Pogrubienia w krótkim opisie zostają w kroju tekstu (motyw podmienia krój pogrubień na szeryfowy). */
body.single-product .woocommerce-product-details__short-description b,
body.single-product .woocommerce-product-details__short-description strong {
	font-family: inherit;
}

/* Okładka filmu bez filmu: zwykły obrazek z przyciskiem odtwarzania, bez wskaźnika klikania. */
body.single-product .uluna-filmy__film--okladka {
	cursor: default;
}

/* Pasek ocen jako link do opinii: bez podkreślenia i zmiany koloru po najechaniu. */
body.single-product a.uluna-oceny,
body.single-product a.uluna-oceny:hover {
	color: var(--uluna-tekst);
	text-decoration: none;
}

/* Ikony w rozwijanej liście i w trzech ikonach rysowane kreską w kolorze tekstu. */
body.single-product .uluna-pytania__ikona svg,
body.single-product .uluna-ikony__pozycja svg,
body.single-product .uluna-gwarancja svg,
body.single-product .uluna-dostawa svg {
	display: block;
	color: var(--uluna-tekst);
}

body.single-product .uluna-dostawa svg {
	color: var(--uluna-pomoc);
}