/*
 * Uluna - strona produktu (moduł inc/produkt)
 *
 * Układ, odstępy i budowa bloków przeniesione ze wzoru wskazanego przez Pawła (12.10.2026).
 * Ze wzoru wzięta jest tylko metoda: kolory idą wyłącznie ze zmiennych --uluna-* (style.css, sekcja 1),
 * kroje ze zmiennych --uluna-font-*, a własne bloki mają neutralne klasy uluna-...
 * Arkusz ładuje się tylko na stronie produktu (uluna-produkt.php) i każdy selektor zaczyna się
 * od body.single-product - nic nie wycieka na koszyk, kasę ani strony informacyjne.
 *
 * Części:
 *   A. Szablon WooCommerce / Salient: 1 układ strony, 2 galeria, 3 tytuł i cena, 4 krótki opis,
 *      5 formularz kupna i przycisk, 6 zakładki i opinie, 7 rzeczy schowane.
 *   B. Własne bloki (czekają na HTML i treść - lista w strona/produkt-css-z-wzoru-2026-10-12.md):
 *      8 plakietka, 9 pasek ocen, 10 lista korzyści, 10a zestaw (kafelki "Co otrzymasz w zestawie"),
 *      11 stan magazynu, 12 dostawa i gwarancja,
 *      13 rozwijane pytania, 14 trzy ikony, 15 pasek filmów, 16 karta opinii.
 *   C. 17 przyklejony pasek kupna (HTML wypisuje uluna-produkt.php, zachowanie uluna-produkt.js).
 *
 * Najmniejszy rozmiar tekstu to 14 px (wzór schodził do 11,5 px) - klientka Uluny ma 45-64 lata.
 */

/* Ustawienia modułu w jednym miejscu. Poświata przycisku: granat, bo morela na kremie ginie. */
body.single-product {
	--uluna-produkt-poswiata: var(--uluna-tekst);
	--uluna-produkt-rog: 10px;        /* przycisk, ramki bloków */
	--uluna-produkt-rog-zdjecia: 20px; /* zdjęcie w galerii na komputerze */
}

/* =====================================================================
   A. SZABLON WOOCOMMERCE / SALIENT
   ===================================================================== */

/*
 * 1. UKŁAD STRONY. Na telefonie i tablecie treść zaczyna się od razu pod nagłówkiem.
 *    Margines boczny strony zostaje taki jak w całym sklepie (ustawia go własny CSS
 *    w opcjach motywu) - wzór miał tu inną liczbę, ale nagłówek i treść muszą trzymać jedną linię.
 */
@media only screen and (max-width: 1000px) {
	body.single-product .container-wrap {
		padding-top: 0 !important;
	}

	body.single-product.woocommerce div.product div.summary {
		margin-bottom: 0;
	}

	body.single-product .woocommerce-tabs[data-tab-style="fullwidth"] {
		margin-top: 0;
	}
}

/* Stopka nie chowa się pod przyklejonym paskiem kupna (część 17). */
body.single-product.uluna-produkt--z-paskiem #footer-outer {
	padding-bottom: 76px;
}

/*
 * 2. GALERIA: bez lupy i powiększania po najechaniu, zaokrąglone zdjęcie i miniatury.
 *    Na telefonie zdjęcie idzie od krawędzi do krawędzi ekranu, bez zaokrągleń.
 */
body.single-product .woocommerce-product-gallery__trigger,
body.single-product .product-slider .zoomImg,
body.single-product .pswp__caption {
	display: none !important;
}

body.single-product .product[data-gallery-style="left_thumb_sticky"] .product-slider .slide:not(.nectar-no-larger-img),
body.single-product .product[data-gallery-style="left_thumb_sticky"] .product-slider .slide:not(.nectar-no-larger-img) * {
	cursor: auto;
	border-radius: var(--uluna-produkt-rog-zdjecia);
}

body.single-product .thumb-inner img {
	border: 1px solid var(--uluna-linia) !important;
	border-radius: 10px;
}

@media only screen and (max-width: 1000px) {
	body.single-product .single-product-main-image {
		margin-bottom: 10px;
	}

	/* Selektor z atrybutami i !important, bo motyw ustawia szerokość galerii regułą z !important. */
	body.single-product .product[data-gallery-style] div.images[data-has-gallery-imgs] .product-slider {
		position: relative;
		float: none;
		width: 100vw !important;
		max-width: 100vw;
		margin-left: calc(50% - 50vw); /* od krawędzi do krawędzi, niezależnie od marginesu strony */
		margin-bottom: 3px;
		padding-left: 0;
	}

	body.single-product .product[data-gallery-style="left_thumb_sticky"] .product-slider .slide:not(.nectar-no-larger-img),
	body.single-product .product[data-gallery-style="left_thumb_sticky"] .product-slider .slide:not(.nectar-no-larger-img) * {
		border-radius: 0 !important;
	}
}

/*
 * 3. TYTUŁ I CENA. Cena stoi w pasie między dwiema liniami; stara cena przygaszona i przekreślona,
 *    nowa pogrubiona. Dopisek o podatku przy cenie schowany.
 */
@media only screen and (max-width: 690px) {
	body.single-product div.product h1.product_title {
		font-size: 28px;
		line-height: 1.12;
	}
}

body.single-product div.product .summary p.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 10px 0 0;
	padding-top: 10px;
	padding-bottom: 10px !important;
	border-top: 1px solid var(--uluna-linia);
	border-bottom: 1px solid var(--uluna-linia);
}

body.single-product div.product .summary p.price del,
body.single-product div.product .summary p.price del .amount {
	color: var(--uluna-pomoc);
	font-size: 1em;
	font-weight: 400;
	opacity: 1;
}

body.single-product div.product .summary p.price ins,
body.single-product div.product .summary p.price ins .amount {
	color: var(--uluna-tekst) !important;
	font-weight: 700 !important;
	text-decoration: none;
}

body.single-product .woocommerce-price-suffix {
	display: none;
}

/* 3a. PLAKIETKA OSZCZĘDNOŚCI pod ceną ("Oszczędzasz X zł"): stoi w pasie ceny, nad jego dolną linią. */
body.single-product div.product .summary:has(.uluna-oszczednosc) p.price {
	padding-bottom: 8px !important;
	border-bottom: 0;
}

body.single-product .uluna-oszczednosc {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--uluna-linia);
	font-family: var(--uluna-font-tekst);
	line-height: 1;
}

/* Wygląd przeniesiony na polecenie Pawła (13.10.2026) z plakietki rabatu w jego drugim sklepie: jasnozielone tło,
   ciemnozielony napis, róg 8 px. To jedyne miejsce w sklepie z zielenią - nie ma jej w palecie marki. */
body.single-product .uluna-oszczednosc__plakietka {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border-radius: 8px;
	background: #e3f5e5;
	color: #1e8a34;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
}

/* 3b. NAJNIŻSZA CENA Z 30 DNI (Omnibus): drobna linijka pod plakietką oszczędności, w tym samym pasie ceny. */
body.single-product .uluna-oszczednosc__najnizsza {
	display: block;
	margin-top: 8px;
	color: var(--uluna-pomoc);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

body.single-product .uluna-oszczednosc__najnizsza:first-child {
	margin-top: 0;
}

/* 4. KRÓTKI OPIS: oddech pod pasem ceny. */
body.single-product .woocommerce-product-details__short-description {
	padding-top: 10px;
}

/*
 * 5. FORMULARZ KUPNA I PRZYCISK. Przycisk zostaje zwykłym przyciskiem formularza form.cart
 *    (wysuwany koszyk sam przejmuje wysłanie). Kolory daje style.css (sekcja 5), tu rozmiar,
 *    zaokrąglenie, pełna szerokość i spokojny "oddech" poświaty. Długi selektor przycisku jest
 *    celowy: motyw ustawia jego odstępy regułą z !important i atrybutami na <body>.
 */
body.single-product div.product form.cart {
	margin-top: 10px;
}

body.single-product div.product form.cart:not(.variations_form),
body.single-product div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

body.single-product div.product form.cart .flex-break {
	display: none;
}

/* Odstęp marginesem, nie przez gap - formularz ma niewidoczne elementy porządkowe, które gap by odsunął. */
body.single-product div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0 10px 0 0;
}

/* Ilość schowana - tylko gdy włączy to filtr uluna_produkt_ukryj_ilosc (we wzorze ilość wybierało się zestawem). */
body.single-product.uluna-produkt--bez-ilosci div.product form.cart .quantity {
	display: none !important;
}

@keyframes uluna-produkt-oddech {
	0%, 100% {
		box-shadow:
			0 4px 14px color-mix(in srgb, var(--uluna-produkt-poswiata) 22%, transparent),
			0 0 0 0 color-mix(in srgb, var(--uluna-produkt-poswiata) 20%, transparent);
	}
	50% {
		box-shadow:
			0 4px 26px color-mix(in srgb, var(--uluna-produkt-poswiata) 34%, transparent),
			0 0 0 12px color-mix(in srgb, var(--uluna-produkt-poswiata) 0%, transparent);
	}
}

body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button {
	flex: 1 1 200px;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 15px 20px !important;
	border-radius: var(--uluna-produkt-rog) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.3px;
	animation: uluna-produkt-oddech 1.5s ease-in-out infinite;
}

/* Najechanie i fokus: puls gaśnie, żeby nie rozpraszać w chwili kliknięcia; zostaje granatowa obwódka ze style.css. */
body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button:hover,
body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button:focus {
	animation: none;
	box-shadow:
		inset 0 0 0 2px var(--uluna-tekst),
		0 4px 16px color-mix(in srgb, var(--uluna-produkt-poswiata) 26%, transparent);
}

body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button:disabled,
body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button.disabled {
	animation: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button {
		animation: none;
		box-shadow: 0 4px 14px color-mix(in srgb, var(--uluna-produkt-poswiata) 22%, transparent);
	}
}

/*
 * Dwie linie w przycisku (kwota nad napisem). Działa, gdy w przycisku pojawią się te dwa elementy;
 * bez nich przycisk jest zwykłym napisem w jednej linii.
 */
body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button .uluna-atc-kwota {
	display: block;
	font-size: 21px !important;
	font-weight: 800 !important;
	letter-spacing: 0;
}

body.single-product .container-wrap div.product form.cart button[type="submit"].single_add_to_cart_button .uluna-atc-napis {
	display: block;
	font-size: 15px !important;
	font-weight: 700 !important;
}

/* Warianty (rozmiar itp.), gdyby produkt je dostał: pole na całą szerokość, wyraźna etykieta. */
body.single-product div.product form.cart table.variations,
body.single-product div.product form.cart table.variations select,
body.single-product div.product form.cart table.variations .fancy-select-wrap,
body.single-product div.product form.cart table.variations .select2,
body.single-product div.product form.cart table.variations .selection {
	width: 100% !important;
}

body.single-product div.product form.cart table.variations .label label {
	display: block !important;
	margin: 0 !important;
	padding-left: 0 !important;
	color: var(--uluna-tekst) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
}

/* Komunikat "dodano do koszyka" zbędny - potwierdzeniem jest wysuwany koszyk. Błędy zostają widoczne. */
body.single-product .woocommerce-message {
	display: none;
}

/* 6. ZAKŁADKI I OPINIE: zakładki na środku; przy opiniach bez daty i myślnika. */
body.single-product div.product .woocommerce-tabs .full-width-content[data-tab-style*="fullwidth"] ul.tabs {
	margin: 0;
	text-align: center;
}

body.single-product .woocommerce-review__published-date,
body.single-product .woocommerce-review__dash {
	display: none !important;
}

/*
 * Jedna zakładka = pasek zakładek zbędny (decyzja Pawła z 12.10.2026: napis "Opis" nad opisem do wyrzucenia;
 * opinie stoją osobno pod stroną). Gdy dojdzie druga zakładka, pasek wraca sam.
 * Dwie osobne reguły celowo: starsza przeglądarka, która nie zna :has(), odrzuciłaby całą wspólną listę.
 */
body.single-product div.product .woocommerce-tabs ul.tabs > li:only-child {
	display: none !important;
}

body.single-product div.product .woocommerce-tabs > .full-width-content:has(ul.tabs > li:only-child) {
	display: none !important;
}

/*
 * 7. SCHOWANE jak we wzorze: okruszki, wiersz "SKU / Kategoria" i "Podobne produkty".
 *    Standardowe gwiazdki WooCommerce znikają tylko wtedy, gdy na stronie jest własny pasek ocen (część 9).
 */
body.single-product .woocommerce-breadcrumb,
body.single-product div.product .product_meta,
body.single-product .products.related {
	display: none;
}

body.single-product div.product .summary:has(.uluna-oceny) .woocommerce-product-rating {
	display: none !important;
}

/* =====================================================================
   B. WŁASNE BLOKI - sam wygląd; HTML i treść dojdą później
   ===================================================================== */

body.single-product .uluna-plakietka,
body.single-product .uluna-oceny,
body.single-product .uluna-korzysci,
body.single-product .uluna-zestaw,
body.single-product .uluna-stan,
body.single-product .uluna-dostawa,
body.single-product .uluna-gwarancja,
body.single-product .uluna-pytania,
body.single-product .uluna-ikony,
body.single-product .uluna-filmy,
body.single-product .uluna-opinia {
	font-family: var(--uluna-font-tekst);
	color: var(--uluna-tekst);
}

/* Pogrubienia w blokach zostają w kroju tekstu (motyw potrafi podmienić krój pogrubień). */
body.single-product [class^="uluna-"] b,
body.single-product [class^="uluna-"] strong,
body.single-product [class*=" uluna-"] b,
body.single-product [class*=" uluna-"] strong {
	font-family: inherit;
}

/* 8. PLAKIETKA nad tytułem: pigułka z ikoną i krótkim napisem. */
body.single-product .uluna-plakietka {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 6px 14px;
	border: 1px solid var(--uluna-linia);
	border-radius: 20px;
	background: var(--uluna-karta);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

body.single-product .uluna-plakietka__ikona {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
}

/* 9. PASEK OCEN pod tytułem: gwiazdki, cytat, ocena i liczba recenzji, opcjonalna ciemna etykieta. Może być linkiem do opinii.
      Zwykły tekst w wierszu (nie flex), żeby długi cytat łamał się jak zdanie; ocena z liczbą schodzą do nowego wiersza razem.
      Bez opinii na otwartym sklepie: samo hasło i dopisek (bez gwiazdek). */
body.single-product .uluna-oceny {
	display: block;
	margin-top: 6px;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.45;
	text-decoration: none;
}

/* Telefon: gwiazdki z oceną w pierwszym wierszu, cytat cały w drugim - zdanie nie rwie się na ostatnim słowie. */
@media (max-width: 690px) {
	body.single-product .uluna-oceny {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 6px;
		row-gap: 2px;
	}

	body.single-product .uluna-oceny__cytat {
		order: 3;
		flex: 0 0 100%;
	}

	/* Hasło i dopisek stoją na telefonie jeden pod drugim - kropka między nimi niepotrzebna. */
	body.single-product .uluna-oceny__haslo + .uluna-oceny__dopisek::before {
		content: none;
	}
}

body.single-product .uluna-oceny__gwiazdki {
	color: var(--uluna-przycisk);
	font-size: 17px;
	letter-spacing: 1px;
	white-space: nowrap;
}

body.single-product .uluna-oceny__cytat,
body.single-product .uluna-oceny__ocena,
body.single-product .uluna-oceny__haslo {
	color: var(--uluna-tekst);
	font-weight: 600;
}

body.single-product .uluna-oceny__wynik {
	display: inline-block;
	white-space: nowrap;
}

body.single-product .uluna-oceny__liczba,
body.single-product .uluna-oceny__dopisek {
	color: var(--uluna-pomoc);
}

body.single-product .uluna-oceny__ocena + .uluna-oceny__liczba::before {
	content: "|";
	margin: 0 6px;
}

body.single-product .uluna-oceny__haslo + .uluna-oceny__dopisek::before {
	content: "·";
	margin-right: 4px;
}

body.single-product .uluna-oceny__etykieta {
	display: inline-flex;
	align-items: center;
	margin-left: 2px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--uluna-tekst);
	color: var(--uluna-tlo);
	font-size: 14px;
	font-weight: 600;
}

/* 10. LISTA KORZYŚCI w krótkim opisie: jedna kolumna, przy każdej pozycji kółko ze znaczkiem. */
body.single-product .uluna-korzysci {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

body.single-product .uluna-korzysci__pozycja {
	position: relative;
	display: block;
	margin: 0;
	padding-left: 34px;
	list-style: none;
	font-size: 16px;
	line-height: 1.4;
}

body.single-product .uluna-korzysci__ikona {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--uluna-tekst);
	border-radius: 50%;
	color: var(--uluna-tekst);
	font-size: 12px;
	line-height: 1;
}

/* 10a. ZESTAW pod listą korzyści: nagłówek i kafelki (zdjęcie, nazwa, przekreślona wartość, znaczek "Gratis").
   Komputer i tablet: cztery w rzędzie, znaczek "Gratis" na rogu zdjęcia, wartość pod nazwą.
   Telefon: dwa na dwa z dużymi zdjęciami, wartość i "Gratis" w jednej plakietce na rogu (układ wskazany przez Pawła). */
body.single-product .uluna-zestaw {
	margin: 18px 0 6px;
	font-family: var(--uluna-font-tekst);
	color: var(--uluna-tekst);
}

body.single-product .uluna-zestaw__naglowek {
	margin: 0 0 10px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

body.single-product .uluna-zestaw__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .uluna-zestaw__pozycja {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-product .uluna-zestaw__zdjecie {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-produkt-rog);
	background: var(--uluna-sekcja);
}

body.single-product .uluna-zestaw__zdjecie img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

body.single-product .uluna-zestaw__opis {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body.single-product .uluna-zestaw__nazwa {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
	hyphens: auto;
}

body.single-product .uluna-zestaw__cena {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	font-size: 14px;
	line-height: 1.2;
}

body.single-product .uluna-zestaw__wartosc {
	color: var(--uluna-pomoc);
	text-decoration: line-through;
}

body.single-product .uluna-zestaw__gratis {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 20px;
	background: var(--uluna-przycisk);
	color: var(--uluna-przycisk-tekst);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

@media (min-width: 691px) {
	body.single-product .uluna-zestaw__pozycja--gratis .uluna-zestaw__gratis {
		position: absolute;
		top: 6px;
		right: 6px;
		box-shadow: 0 1px 4px rgba(30, 42, 68, 0.25);
	}
}

/* Telefon: dwa na dwa, duże zdjęcia; przekreślona wartość i "Gratis" razem w jednej plakietce na rogu zdjęcia. */
@media (max-width: 690px) {
	body.single-product .uluna-zestaw__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 10px;
	}

	body.single-product .uluna-zestaw__nazwa {
		font-size: 15px;
		hyphens: manual;
		overflow-wrap: break-word;
	}

	body.single-product .uluna-zestaw__pozycja--gratis .uluna-zestaw__cena {
		position: absolute;
		top: 8px;
		right: 8px;
		flex-wrap: nowrap;
		gap: 5px;
		padding: 4px 10px;
		border-radius: 20px;
		background: var(--uluna-przycisk);
		color: var(--uluna-przycisk-tekst);
		font-weight: 700;
		white-space: nowrap;
		box-shadow: 0 1px 4px rgba(30, 42, 68, 0.25);
	}

	body.single-product .uluna-zestaw__pozycja--gratis .uluna-zestaw__wartosc {
		color: inherit;
		font-weight: 600;
		opacity: 0.78;
	}

	body.single-product .uluna-zestaw__pozycja--gratis .uluna-zestaw__gratis {
		padding: 0;
		border-radius: 0;
		background: none;
	}
}

/*
 * 11. STAN MAGAZYNU nad przyciskiem: napis, pięć kropek (zapełnione migają), status.
 *     Blok mówi klientowi o stanie magazynu - wolno go pokazać tylko wtedy, gdy to prawda.
 */
body.single-product .uluna-stan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 16px;
	color: var(--uluna-pomoc);
	font-size: 15px;
}

body.single-product .uluna-stan__napis {
	font-weight: 600;
}

body.single-product .uluna-stan__kropki {
	display: flex;
	gap: 4px;
}

body.single-product .uluna-stan__kropka {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--uluna-linia);
}

body.single-product .uluna-stan__kropka--pelna {
	background: var(--uluna-przycisk);
	animation: uluna-produkt-mrugniecie 1.5s ease-in-out infinite;
}

@keyframes uluna-produkt-mrugniecie {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.2; }
}

body.single-product .uluna-stan__status {
	color: var(--uluna-tekst);
	font-weight: 700;
	letter-spacing: 0.5px;
}

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

/* 12. POD PRZYCISKIEM: wiersz o dostawie (dwie krótkie informacje obok siebie) i ramka z gwarancją. */
body.single-product .uluna-dostawa {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	margin: 16px 0 12px;
	color: var(--uluna-pomoc);
	font-size: 14px;
	line-height: 1.4;
}

body.single-product .uluna-dostawa > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

body.single-product .uluna-dostawa b,
body.single-product .uluna-dostawa strong {
	color: var(--uluna-tekst);
	font-weight: 700;
}

body.single-product .uluna-dostawa svg {
	flex: 0 0 auto;
}

body.single-product .uluna-dostawa__kropka {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--uluna-przycisk);
}

body.single-product .uluna-gwarancja {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 16px;
	padding: 15px 17px;
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-produkt-rog);
	background: var(--uluna-karta);
	font-size: 15px;
	line-height: 1.45;
}

body.single-product .uluna-gwarancja svg,
body.single-product .uluna-gwarancja img {
	flex: 0 0 auto;
}

body.single-product .uluna-gwarancja p {
	margin: 0;
	padding: 0;
}

/*
 * 13. ROZWIJANE PYTANIA pod przyciskiem (details / summary - działa bez skryptu):
 *     jedna ramka, pozycje oddzielone liniami, ikona z lewej, strzałka z prawej.
 */
body.single-product .uluna-pytania {
	margin-top: 16px;
	border: 1px solid var(--uluna-linia);
	border-radius: var(--uluna-produkt-rog);
	background: var(--uluna-karta);
	overflow: hidden;
}

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

body.single-product .uluna-pytania details:last-child {
	border-bottom: 0;
}

body.single-product .uluna-pytania summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

body.single-product .uluna-pytania summary::-webkit-details-marker {
	display: none;
}

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

body.single-product .uluna-pytania__ikona {
	flex: 0 0 auto;
	width: 24px;
	font-size: 18px;
	line-height: 1;
	text-align: center;
}

body.single-product .uluna-pytania__strzalka {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--uluna-pomoc);
	font-size: 12px;
	transition: transform 0.2s;
}

body.single-product .uluna-pytania details[open] .uluna-pytania__strzalka {
	transform: rotate(180deg);
}

body.single-product .uluna-pytania__tresc {
	padding: 0 16px 14px 50px;
	color: var(--uluna-pomoc);
	font-size: 15px;
	line-height: 1.5;
}

body.single-product .uluna-pytania__tresc h5 {
	margin: 0 0 5px;
	color: var(--uluna-tekst);
	font-family: var(--uluna-font-tekst);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.single-product .uluna-pytania__tresc p {
	margin: 0 0 13px;
	padding: 0;
}

body.single-product .uluna-pytania__tresc p:last-child {
	margin-bottom: 0;
}

/* 14. TRZY IKONY pod pytaniami: trzy kolumny, ikona nad krótkim podpisem. */
body.single-product .uluna-ikony {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 20px;
	padding-top: 4px;
}

body.single-product .uluna-ikony__pozycja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/* 15. PASEK FILMÓW: trzy pionowe filmy obok siebie, na telefonie przesuwane palcem. */
body.single-product .uluna-filmy {
	margin-top: 24px;
}

body.single-product .uluna-filmy__tytul {
	margin: 0 0 14px;
	font-size: 22px;
	line-height: 1.25;
}

body.single-product .uluna-filmy__pasek {
	display: flex;
	gap: 8px;
	padding-bottom: 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

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

body.single-product .uluna-filmy__film {
	position: relative;
	flex: 0 0 calc(33.33% - 6px);
	min-width: 0;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	background: var(--uluna-sekcja);
	overflow: hidden;
	scroll-snap-align: start;
	cursor: pointer;
}

body.single-product .uluna-filmy__film video,
body.single-product .uluna-filmy__film img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Znak "odtwórz" na środku; znika, gdy film dostanie klasę uluna-filmy__film--gra. */
body.single-product .uluna-filmy__graj {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--uluna-tekst) 60%, transparent);
	transform: translate(-50%, -50%);
	transition: opacity 0.2s;
	pointer-events: none;
}

body.single-product .uluna-filmy__graj::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent var(--uluna-tlo);
}

body.single-product .uluna-filmy__film--gra .uluna-filmy__graj {
	opacity: 0;
}

@media (max-width: 768px) {
	body.single-product .uluna-filmy__film {
		flex-basis: 42%;
	}
}

@media (max-width: 480px) {
	body.single-product .uluna-filmy__film {
		flex-basis: 48%;
	}
}

/* 16. KARTA OPINII: okrągłe zdjęcie z lewej, obok imię, gwiazdki i tekst. */
body.single-product .uluna-opinia {
	display: flex;
	gap: 14px;
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--uluna-linia);
	border-radius: 14px;
	background: var(--uluna-karta);
}

body.single-product .uluna-opinia__zdjecie {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--uluna-sekcja);
	font-size: 22px;
	overflow: hidden;
}

body.single-product .uluna-opinia__zdjecie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.single-product .uluna-opinia__srodek {
	flex: 1;
	min-width: 0;
}

body.single-product .uluna-opinia__naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}

body.single-product .uluna-opinia__imie {
	font-size: 15px;
	font-weight: 700;
}

body.single-product .uluna-opinia__znak {
	color: var(--uluna-pomoc);
	font-size: 14px;
}

body.single-product .uluna-opinia__gwiazdki {
	font-size: 14px;
	letter-spacing: 1px;
}

body.single-product .uluna-opinia__tekst {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.55;
}

/* =====================================================================
   C. PRZYKLEJONY PASEK KUPNA
   ===================================================================== */

/*
 * 17. Pasek u dołu ekranu: miniatura, nazwa, cena i przycisk. Wysuwa się, gdy główny przycisk
 *     zniknie u góry ekranu; chowa się, gdy otwarty jest wysuwany koszyk. Jego przycisk naciska
 *     główny przycisk formularza, więc dalej wszystko idzie zwykłą drogą. Bez "oddechu" - celowo.
 *     Warstwa 500: nad treścią, pod wysuwanym koszykiem.
 */
body.single-product #uluna-pasek-kupna {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 500;
	padding: 10px 0;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--uluna-linia);
	background: var(--uluna-karta);
	box-shadow: 0 -2px 14px color-mix(in srgb, var(--uluna-tekst) 10%, transparent);
	font-family: var(--uluna-font-tekst);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform 0.35s ease-out, visibility 0s linear 0.35s;
}

body.single-product #uluna-pasek-kupna.uluna-pasek-kupna--widoczny {
	transform: translateY(0);
	visibility: visible;
	transition: transform 0.35s ease-out, visibility 0s;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__srodek {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__zdjecie {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__opis {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__nazwa {
	max-width: 44vw;
	overflow: hidden;
	color: var(--uluna-tekst);
	font-size: 15px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena,
body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena .amount,
body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena ins {
	color: var(--uluna-tekst);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena del,
body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena del .amount {
	margin-right: 6px;
	color: var(--uluna-pomoc);
	font-weight: 400;
	text-decoration: line-through;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena del .amount {
	margin-right: 0;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena .screen-reader-text,
body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__cena .woocommerce-price-suffix {
	display: none;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__przycisk {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px !important; /* motyw zaokrągla wszystkie przyciski regułą z !important */
	background: var(--uluna-przycisk);
	color: var(--uluna-przycisk-tekst);
	font-family: var(--uluna-font-tekst);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__przycisk:hover,
body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__przycisk:focus-visible {
	box-shadow: inset 0 0 0 2px var(--uluna-tekst);
	outline: 0;
}

@media (max-width: 600px) {
	body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__srodek {
		gap: 10px;
	}

	body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__nazwa {
		display: none;
	}

	body.single-product #uluna-pasek-kupna .uluna-pasek-kupna__przycisk {
		padding: 12px 20px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-product #uluna-pasek-kupna,
	body.single-product #uluna-pasek-kupna.uluna-pasek-kupna--widoczny {
		transition: none;
	}
}

/*
 * 18. KROJE: zakładki i liczba w polu ilości brały krój z ustawień motywu (szeryfowy systemowy) -
 *     tu dostają krój tekstu marki, jak reszta strony. Dopisane przy wgraniu 12.10.2026.
 */
body.single-product div.product .woocommerce-tabs ul.tabs li a,
body.single-product div.product form.cart .quantity input.qty {
	font-family: var(--uluna-font-tekst) !important;
}