/* Strona produktu w układzie strony produktu Olipop i kartoniki linii (prośba klienta z 2026-10-14: „produkty będą
   te saszety w pakietach sprzedawane, więc zrób w kartonikach”, „strona produktu podobna”, wzór kartonika od klienta).
   Szablon: woocommerce/single-product.php, kartoniki: fn_karton() w inc/linie.php, pasek zakupu: strona.js.
   Ładowany po sklep-widoki.css (kolory linii --fn-linia-*), przed telefon.css. */

/* ---------- Jasne i ciemne odcienie linii: jasne pola pod kartonikami, ciemny tekst na jasnej sekcji opisu ---------- */
.fn .fn-linia-luna { --fn-linia-jasny: #fdd7e5; --fn-linia-ciemny: #5e1235; }
.fn .fn-linia-hydro { --fn-linia-jasny: #d6efe4; --fn-linia-ciemny: #0b4a36; }
.fn .fn-linia-flora { --fn-linia-jasny: #ffe2c2; --fn-linia-ciemny: #6b2a04; }
.fn .fn-linia-zestaw { --fn-linia-jasny: #fdd7e5; --fn-linia-ciemny: #431026; }

/* ---------- Galeria i panel zakupu ----------
   Gładki kolor linii (jak jasne tło Olipop, ale w kolorach marki, więc menu i logo w kremie zostają czytelne).
   Z lewej duże jasne pole z otwartym kartonikiem i kafle 2 × 2, z prawej panel przyklejony pod menu. */
.fn .fn-produkt {
	padding: 7.5rem var(--fn-margines) 5rem;
	background: var(--fn-linia-kolor); color: var(--fn-linia-tekst, var(--fn-krem));
}
.fn .fn-produkt-siatka { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 5rem; align-items: start; }
.fn .fn-galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.fn .fn-galeria figure { margin: 0; }
.fn .fn-galeria-glowne {
	position: relative; display: block; aspect-ratio: 6 / 5; padding: 6%;
	border-radius: 2rem; background: var(--fn-linia-jasny);
}
.fn .fn-galeria-karton { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1.75rem 1.75rem rgb(22 8 14 / 0.22)); }
.fn .fn-akcent--galeria { width: clamp(5.5rem, 8vw, 8.5rem); left: 1rem; top: 1rem; rotate: -10deg; }
.fn .fn-galeria-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fn .fn-galeria-kafel { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: 1.5rem; background: var(--fn-linia-jasny); }
.fn .fn-galeria-zdjecie { width: 100%; height: 100%; object-fit: cover; }
/* Kafel smaku: naklejki owoców (te same co na kartoniku) na wzorze linii, pod nimi smak. */
.fn .fn-galeria-kafel--smak {
	align-content: center; gap: 1rem; padding: 1.5rem; text-align: center;
	background: var(--fn-linia-kolor) var(--fn-linia-tlo, none) center / cover; color: var(--fn-krem);
}
.fn .fn-galeria-owoce { display: flex; justify-content: center; }
.fn .fn-galeria-owoc { width: 46%; max-width: 11rem; height: auto; filter: drop-shadow(0 0.75rem 1rem rgb(22 8 14 / 0.25)); }
.fn .fn-galeria-owoc + .fn-galeria-owoc { margin-left: -9%; rotate: 9deg; }
.fn .fn-galeria-owoc:first-child { rotate: -7deg; }
/* Zestaw ma trzy naklejki (po jednej z linii): mniejsze, żeby skrajne nie wychodziły za kafel. */
.fn .fn-galeria-owoc:first-child:nth-last-child(3), .fn .fn-galeria-owoc:first-child:nth-last-child(3) ~ .fn-galeria-owoc { width: 35%; }
.fn .fn-galeria-owoc:first-child:nth-last-child(3) ~ .fn-galeria-owoc { margin-left: -5%; }
.fn .fn-galeria-smak { margin: 0; font: 800 clamp(1.375rem, 2.1vw, 2rem)/1.05 var(--fn-font-naglowki); letter-spacing: -0.02em; text-wrap: balance; }
.fn .fn-galeria-smak-podpis { display: block; margin-bottom: 0.35rem; font: 700 0.75rem/1 var(--fn-font-naglowki); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }

.fn .fn-panel { position: sticky; top: 6.5rem; display: grid; gap: 1.25rem; }
/* Na jeden ekran jak u Olipop (prośba klienta z 2026-10-14: „skala taka, że 100vh zmieści się”): główne pole galerii
   ma wysokość okna bez menu, a panel zakupu jest zwarty (rząd ikon przeszedł do sekcji opisu), więc oba mieszczą się
   na pierwszym ekranie także na laptopie 1280 × 800. Kafle galerii są niżej, panel zostaje przyklejony. */
@media (min-width: 992px) {
	/* Galeria jak siatka 4 × 3: kartonik w środku na 2 × 2, wokół niego mniejsze kafle (prośba klienta z 2026-10-14:
	   „nie podoba mi się, że jeden jest wielki, niech jest otoczony mniejszymi i sam mniejszy”). Kafle stają się elementami
	   siatki galerii (display: contents), miejsca nadają im nazwy obszarów w kolejności z szablonu. */
	.fn .fn-galeria {
		grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem;
		grid-template-areas: "a m m b" "c m m d" "e s s f";
	}
	.fn .fn-galeria-glowne { grid-area: m; aspect-ratio: auto; height: auto; padding: 6%; border-radius: 1.5rem; }
	.fn .fn-akcent--galeria { width: clamp(3.5rem, 4.5vw, 4.5rem); left: -0.85rem; right: auto; top: -1rem; rotate: -10deg; } /* postać linii na rogu, nie na logo kartonika */
	.fn .fn-galeria-kafle { display: contents; }
	.fn .fn-galeria-kafel { border-radius: 1.1rem; }
	.fn .fn-galeria-kafel:nth-child(1) { grid-area: a; }
	.fn .fn-galeria-kafel:nth-child(2) { grid-area: s; aspect-ratio: auto; grid-auto-flow: column; justify-content: center; align-items: center; gap: 1.25rem; padding: 1rem 1.5rem; text-align: left; }
	.fn .fn-galeria-kafel:nth-child(3) { grid-area: b; }
	.fn .fn-galeria-kafel:nth-child(4) { grid-area: d; }
	.fn .fn-galeria-kafel:nth-child(5) { grid-area: c; }
	.fn .fn-galeria-kafel:nth-child(6) { grid-area: e; }
	.fn .fn-galeria-kafel:nth-child(7) { grid-area: f; }
	/* Smak w szerokim kaflu: naklejki obok podpisu, nie nad nim. */
	.fn .fn-galeria-kafel--smak .fn-galeria-owoce { width: 9rem; }
	.fn .fn-galeria-kafel--smak .fn-galeria-owoc { width: 58%; }
	.fn .fn-galeria-kafel--smak .fn-galeria-smak { font-size: clamp(1.25rem, 1.6vw, 1.625rem); }
}
.fn .fn-panel-naglowek > * { margin: 0; }
.fn .fn-panel-nadtytul { margin-bottom: 0.75rem !important; font: 700 0.8125rem/1 var(--fn-font-naglowki); letter-spacing: 0.12em; text-transform: uppercase; }
.fn .fn-panel-nadtytul a { color: inherit; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.fn .fn-panel-nadtytul a:hover { text-decoration-thickness: 2px; }
.fn .fn-panel-tytul { font: 800 clamp(2.5rem, 4.2vw, 4.25rem)/1 var(--fn-font-naglowki); letter-spacing: -0.02em; color: inherit; }
.fn .fn-panel-opis { margin-top: 0.6rem !important; font-size: 1.25rem; line-height: 1.35; }
.fn .fn-panel-zakup { display: grid; gap: 0; }
.fn .fn-panel-etykieta { margin: 0 0 0.6rem; font: 700 0.8125rem/1.1 var(--fn-font-naglowki); letter-spacing: 0.08em; text-transform: uppercase; }
.fn .fn-panel-etykieta span { margin-left: 0.25rem; font: 500 1rem/1.1 var(--fn-font-tekst); letter-spacing: 0; text-transform: none; }

/* Wybór linii jak wybór smaku u Olipop: kafelki z zamkniętym kartonikiem, bieżąca linia z pełnym obrysem. */
.fn .fn-wybor-linii { margin-bottom: 1.25rem; }
.fn .fn-wybor-linii-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.fn .fn-wybor-linii-link {
	display: grid; justify-items: center; min-width: 0; gap: 0.4rem; padding: 0.45rem 0.45rem 0.6rem; border-radius: 1rem;
	color: inherit; text-decoration: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
	transition: box-shadow 0.2s ease, translate 0.15s ease;
}
.fn .fn-wybor-linii-link:hover { box-shadow: inset 0 0 0 2px currentColor; translate: 0 -1px; }
.fn .fn-wybor-linii-link[aria-current] { box-shadow: inset 0 0 0 3px currentColor; translate: none; }
.fn .fn-wybor-linii-link:focus-visible { outline: 3px solid var(--fn-zolty); outline-offset: 3px; }
.fn .fn-wybor-linii-obraz { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0.35rem; border-radius: 0.7rem; background: var(--fn-linia-jasny); }
.fn .fn-wybor-linii-obraz img { width: 100%; height: 100%; object-fit: contain; }
.fn .fn-wybor-linii-nazwa { font: 700 0.9375rem/1.1 var(--fn-font-naglowki); }
/* Link ma klasę swojej linii (kolory miniatury), ale tekst bierze z panelu, także na Florze. */
.fn .fn-panel .fn-wybor-linii-link { color: var(--fn-panel-tekst); }
.fn .fn-produkt { --fn-panel-tekst: var(--fn-linia-tekst, var(--fn-krem)); }

.fn .fn-produkt .st-buy-panel { margin: 0; }
.fn .fn-produkt .st-buy-panel form.cart .button.single_add_to_cart_button { background: var(--fn-przycisk-tlo, var(--fn-roz)); color: var(--fn-przycisk-tekst, var(--fn-krem)); }
.fn .fn-produkt .fn-uwaga { margin: 0.75rem 0 0; font-size: 0.9375rem; }
/* Rząd ikon w jasnej sekcji opisu: w kolorze tekstu sekcji (domyślnie jasny róż, na kremie niewidoczny). */
.fn .fn-opis .fn-ikony { justify-content: flex-start; margin: 2rem 0 0; color: inherit; }
.fn .fn-opis .fn-ikony .product-benefit-left-wrapper { color: inherit; }

/* ---------- Pływający pasek zakupu (jak przyklejony pasek Olipop), wyspa ze szkła jak menu na telefonie ---------- */
.fn-pasek-zakupu {
	position: fixed; left: 50%; bottom: 1.25rem; z-index: 60; display: flex; align-items: center; gap: 1rem;
	width: min(46rem, 100% - 2 * var(--fn-margines)); padding: 0.55rem 0.55rem 0.55rem 0.75rem; border-radius: 1.25rem;
	background: color-mix(in srgb, var(--fn-linia-kolor) 82%, transparent); color: var(--fn-linia-tekst, var(--fn-krem));
	-webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
	box-shadow: 0 1rem 2.5rem rgb(22 8 14 / 0.3), inset 0 0 0 1px rgb(255 251 247 / 0.25);
	translate: -50% calc(100% + 2rem); opacity: 0; visibility: hidden;
	transition: translate 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}
.fn-pasek-zakupu[hidden] { display: none; } /* bez skryptu paska nie ma */
.fn-pasek-zakupu.jest-widoczny { translate: -50% 0; opacity: 1; visibility: visible; transition: translate 0.3s ease, opacity 0.3s ease; }
.fn-pasek-zakupu-obraz { flex: none; display: block; width: 4.5rem; aspect-ratio: 4 / 3; padding: 0.25rem; border-radius: 0.75rem; background: var(--fn-linia-jasny); }
.fn-pasek-zakupu-obraz img { width: 100%; height: 100%; object-fit: contain; }
.fn-pasek-zakupu-tekst { display: grid; flex: 1; min-width: 0; }
.fn-pasek-zakupu-nazwa { overflow: hidden; font: 800 1.375rem/1.1 var(--fn-font-naglowki); white-space: nowrap; text-overflow: ellipsis; }
.fn-pasek-zakupu-wybor { overflow: hidden; font-size: 0.9375rem; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; opacity: 0.9; }
.fn .fn-pasek-zakupu-przycisk { flex: none; min-height: 3.25rem; padding-inline: 1.75rem; }
@media (prefers-reduced-motion: reduce) { .fn-pasek-zakupu, .fn-pasek-zakupu.jest-widoczny { transition: none; } }

/* ---------- Opis: jasna sekcja jak opis pod falą u Olipop, z prawej informacje o suplemencie jak etykieta ---------- */
.fn .fn-opis { padding: 6.5rem var(--fn-margines); background: var(--fn-linia-jasny); color: var(--fn-linia-ciemny); }
.fn .fn-opis-siatka { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 5rem; align-items: start; }
/* .fn-opis przed klasą: na Florze reguła nagłówków sekcji linii (krem z cieniem, marka.css) była mocniejsza. */
.fn .fn-opis .fn-opis-tytul { margin: 0; font: 800 clamp(3rem, 5vw, 5rem)/0.95 var(--fn-font-naglowki); letter-spacing: -0.03em; color: inherit; text-shadow: none; }
.fn .fn-akcent--opis { width: clamp(5.5rem, 7vw, 7rem); left: calc(100% + 1rem); top: 0.75rem; rotate: -6deg; } /* „smacznie” */
.fn .fn-opis-tytul.fn-z-akcentem { display: inline-block; position: relative; }
.fn .fn-opis-smak { margin: 0.75rem 0 2rem; font: 600 1.5rem/1.2 var(--fn-font-naglowki); }
.fn .fn-opis-tekst { max-width: 38rem; font-size: 1.25rem; line-height: 1.6; }
.fn .fn-opis-tekst p { margin: 0 0 1rem; }
/* Kompozycja linii pod tekstem (zdjęcie i saszetka z Codex). */
.fn .fn-opis-scena { display: block; width: 100%; max-width: 40rem; height: auto; margin-top: 2.5rem; }
.fn .fn-opis-etykieta { padding: 1.75rem 2rem 1.5rem; border: 3px solid currentColor; border-radius: 1.5rem; background: var(--fn-krem); }
.fn .fn-opis-etykieta .fn-suplement { margin: 0; border: 0; }
.fn .fn-opis-etykieta .fn-suplement-tytul { padding: 0 0 0.85rem; border-bottom: 0.5rem solid currentColor; font: 800 1.75rem/1.1 var(--fn-font-naglowki); letter-spacing: -0.01em; }
.fn .fn-opis-etykieta .fn-suplement-lista { margin-top: 1rem; }
.fn .fn-opis-etykieta .fn-suplement-pole { padding-bottom: 0.85rem; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.fn .fn-opis-etykieta .fn-suplement-tabela th, .fn .fn-opis-etykieta .fn-suplement-tabela td { border-bottom-color: color-mix(in srgb, currentColor 20%, transparent); }
.fn .fn-opis-etykieta .fn-suplement-tytul:focus-visible { outline-color: currentColor; }

/* ---------- Telefon i tablet ----------
   Jak u Olipop: nazwa nad galerią, zakup pod nią. Panel się rozpada (display: contents), więc jego nagłówek i zakup są
   osobnymi wierszami siatki. Kafle galerii to przewijany rząd. Pasek zakupu na całą szerokość przy dolnej krawędzi. */
@media (max-width: 991px) {
	.fn .fn-produkt { padding-top: 6.25rem; padding-bottom: 3.5rem; }
	.fn .fn-produkt-siatka { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
	.fn .fn-panel { display: contents; }
	.fn .fn-panel-naglowek { order: -1; text-align: center; }
	.fn .fn-panel-tytul { font-size: clamp(2.5rem, 11vw, 3rem); }
	.fn .fn-panel-opis { font-size: 1.125rem; }
	.fn .fn-panel-zakup { order: 1; }
	.fn .fn-galeria-glowne { aspect-ratio: 5 / 4; border-radius: 1.5rem; }
	.fn .fn-akcent--galeria { width: 3.5rem; left: 0.6rem; right: auto; top: 0.6rem; }
	.fn .fn-galeria-kafle {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62%, 17rem); gap: 0.75rem;
		overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
		margin-inline: calc(-1 * var(--fn-margines)); padding-inline: var(--fn-margines); scroll-padding-inline: var(--fn-margines);
	}
	.fn .fn-galeria-kafle::-webkit-scrollbar { display: none; }
	.fn .fn-galeria-kafel { scroll-snap-align: start; border-radius: 1.25rem; }
	.fn .fn-produkt .fn-uwaga { text-align: center; }
	.fn .fn-opis { padding-block: 4rem; }
	.fn .fn-opis-siatka { grid-template-columns: minmax(0, 1fr); row-gap: 4rem; }
	.fn-pasek-zakupu { bottom: 0.75rem; gap: 0.75rem; width: calc(100% - 1.5rem); padding: 0.45rem 0.45rem 0.45rem 0.5rem; }
	.fn-pasek-zakupu-obraz { width: 3.5rem; }
	.fn-pasek-zakupu-nazwa { font-size: 1.125rem; }
	.fn-pasek-zakupu-wybor { font-size: 0.8125rem; }
	.fn .fn-pasek-zakupu-przycisk { min-height: 3rem; padding-inline: 1.1rem; font-size: 1.0625rem; }
}
@media (max-width: 479px) {
	.fn .fn-wybor-linii-lista { gap: 0.4rem; }
	.fn .fn-wybor-linii-link { padding: 0.3rem 0.3rem 0.45rem; }
	.fn .fn-wybor-linii-nazwa { font-size: 0.8125rem; }
	.fn .fn-opis-etykieta { padding: 1.25rem 1.25rem 1rem; }
	.fn .fn-akcent--opis { display: none; }
}


/* Karty linii (sklep, „Nasze linie”, „Pokochasz też”, pusty koszyk): otwarty kartonik z saszetkami (prośba klienta
   z 2026-10-14). Jest prawie kwadratowy, więc szersza kolumna obrazu i cała jej szerokość, bez przechylenia saszetki. */
@media (min-width: 480px) { .fn .fn-karta-linii { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.fn .fn-karta-linii-karton, .fn .st-commerce ul.products li.product a img.fn-karta-linii-karton {
	width: 100%; height: auto; max-height: 19rem; object-fit: contain; border-radius: 0;
	filter: drop-shadow(0 1.25rem 1.5rem rgb(22 8 14 / 0.35)); transition: rotate 0.4s ease, scale 0.4s ease;
}
.fn .fn-karta-linii:hover .fn-karta-linii-karton { rotate: -2deg; scale: 1.04; }
@media (min-width: 992px) {
	.fn .section_product_range .fn-karta-linii-karton { max-height: clamp(16rem, 100vh - 30rem, 26rem); max-height: clamp(16rem, 100svh - 30rem, 26rem); }
}
@media (max-width: 479px) { .fn .fn-karta-linii-karton, .fn .st-commerce ul.products li.product a img.fn-karta-linii-karton { max-height: 14rem; } }
@media (prefers-reduced-motion: reduce) { .fn .fn-karta-linii-karton { transition: none; } }

/* ---------- Sekcje linii na głównej: jedna kompozycja z Codex (zdjęcie linii po lewej, saszetka po prawej) ----------
   (prośba klienta z 2026-10-14: „produkt + foto nie są w poziomie wyśrodkowane”, „lewo foto, a po prawej saszeta”).
   Obraz na środku pola, na całą jego szerokość, wysokość ograniczona oknem. Zastępuje saszetkę i zdjęcie na karcie,
   których położenie liczyły marka.css i telefon.css (stąd dłuższe selektory). */
.fn .section_home_product .home_product_component > .home_product_image-wrapper.fn-ze-scena {
	display: flex; justify-content: center; align-items: center; height: auto; max-height: none; padding: 0;
}
.fn .section_home_product .fn-ze-scena .fn-linia-scena {
	display: block; width: 100%; height: auto; max-height: calc(100vh - 9rem); max-height: calc(100svh - 9rem); object-fit: contain;
}
/* Większe (prośba klienta z 2026-10-14: „niech są większe foto i saszeta, bo dziwne za małe”): na komputerze kolumna
   obrazu szersza od tekstu (1,25 : 0,75 zamiast pół na pół), a obraz dochodzi do prawej krawędzi okna; na telefonie
   na całą szerokość ekranu. Kolumna tekstu zaczyna się tam, gdzie wcześniej. */
@media (min-width: 768px) {
	.fn .section_home_product .home_product_component:has(> .fn-ze-scena) { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); column-gap: 3rem; }
	.fn .section_home_product .fn-ze-scena .fn-linia-scena { width: calc(100% + var(--fn-margines)); max-width: none; margin-right: calc(-1 * var(--fn-margines)); }
}
@media (max-width: 767px) {
	.fn .section_home_product .fn-ze-scena .fn-linia-scena { width: calc(100% + 2 * var(--fn-margines)); max-width: none; max-height: none; margin-inline: calc(-1 * var(--fn-margines)); }
}

/* ---------- Nagłówek suwaka „Nasze linie” / „Pokochasz też” (prośba klienta z 2026-10-14: „ten element zrób lepszy”) ----------
   Duży tytuł krojem nagłówków jak na stronach o marce, z prawej dwie okrągłe strzałki (na końcach przygaszone), pod kartami
   cienki pasek postępu przewijania (strona.js). */
.fn .fn-suwak-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.fn .fn-suwak-tytul { margin: 0; font: 800 clamp(2.75rem, 5vw, 5.25rem)/0.95 var(--fn-font-naglowki); letter-spacing: -0.03em; color: var(--fn-krem); }
.fn .fn-akcent--suwak { width: clamp(3.5rem, 4.5vw, 4.75rem); left: calc(100% + 0.75rem); right: auto; top: -1.25rem; rotate: 10deg; }
.fn .fn-suwak-strzalki { display: flex; gap: 0.75rem; flex: none; }
.fn .fn-suwak-strzalka {
	display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--fn-zolty); color: var(--fn-malina-900); transition: translate 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.fn .fn-suwak-strzalka svg { width: 1.5rem; height: 1.5rem; }
.fn .fn-suwak-strzalka:hover:not(:disabled) { translate: 0 -2px; }
.fn .fn-suwak-strzalka:disabled { background: rgb(255 251 247 / 0.14); color: rgb(255 251 247 / 0.45); cursor: default; }
.fn .fn-suwak-strzalka:focus-visible { outline: 3px solid var(--fn-krem); outline-offset: 3px; }
.fn .fn-suwak-postep { height: 0.25rem; margin-top: 2rem; overflow: hidden; border-radius: 6.25rem; background: rgb(255 251 247 / 0.16); }
.fn .fn-suwak-postep span { display: block; height: 100%; border-radius: inherit; background: var(--fn-zolty); transform: scaleX(0.08); transform-origin: left; transition: transform 0.2s ease-out; }
@media (max-width: 767px) {
	.fn .fn-suwak-naglowek { margin-bottom: 1.75rem; }
	.fn .fn-suwak-strzalka { width: 3rem; height: 3rem; }
	.fn .fn-akcent--suwak { width: 3.75rem; left: auto; right: -0.75rem; top: -2.75rem; } /* nad końcem tytułu, nie na strzałkach */
	.fn .fn-suwak-postep { margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .fn .fn-suwak-strzalka, .fn .fn-suwak-postep span { transition: none; } }

/* ---------- Nagłówki stron (h1) mniejsze (prośba klienta z 2026-10-14: „hero napisy może trochę mniejsze wszędzie”,
   wzór: bannery w Nunito) ----------
   Kontakt, strony prawne, sklep, koszyk, zamówienie, konto i 404: 4,5rem zamiast 5,5rem, na telefonie 2,5rem zamiast 3rem.
   Hero głównej, stron o marce i nazwa na stronie produktu mają własne, też zmniejszone rozmiary. */
.fn h1:not([class*="fn-"]), .fn .st-commerce h1, .fn .fn-kontakt-tytul { font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: 1.02; }
@media (max-width: 767px) { .fn h1:not([class*="fn-"]), .fn .st-commerce h1, .fn .fn-kontakt-tytul { font-size: 2.5rem; } }

/* ---------- Naklejki z zestawu Codex (prośba klienta z 2026-10-14: „masz dużo naklejek, rozmieść kreatywnie”) ----------
   brand/wygenerowane/naklejki, wybór w bin/naklejki.py. Akcenty na krawędziach (Brand Book str. 36: naklejka jest
   przyprawą, nigdy na logo, haśle ani produkcie), z fizyką ze strona.js: można je złapać i rzucić. Postacie linii
   (księżyc, kropla, kwiat, trzy saszetki) stoją przy nazwach linii i przy kartonikach ($linia['postac']). */
.fn .fn-akcent--hero-slonce { width: clamp(3.5rem, 4.5vw, 5rem); left: calc(50% - 47 * var(--fn-j)); top: calc(50% - 46 * var(--fn-j)); rotate: -10deg; }
.fn .fn-onas-tablica-pole { position: relative; }
.fn .fn-akcent--onas-tablica { z-index: 6; width: clamp(5rem, 7vw, 7rem); right: -4%; bottom: -6%; rotate: 8deg; }
.fn .fn-akcent--onas-pieczec { z-index: 6; width: clamp(4rem, 5vw, 5.5rem); left: -9%; bottom: 30%; rotate: -12deg; }
.fn .fn-akcent--onas-forma { width: clamp(5rem, 6.5vw, 6.5rem); left: calc(100% + 0.75rem); top: 0.5rem; rotate: -8deg; }
.fn .fn-akcent--onas-linia { width: clamp(3.5rem, 4.5vw, 4.5rem); left: 0.75rem; top: 0.75rem; rotate: -10deg; }
.fn .fn-akcent--jak-schemat { width: clamp(3.75rem, 5vw, 5rem); left: 50%; bottom: 0; translate: -50% 0; rotate: 8deg; }
.fn .fn-akcent--jak-wybor { width: clamp(2.25rem, 2.75vw, 3rem); left: calc(100% + 0.75rem); top: -1.25rem; rotate: 14deg; }
.fn .fn-akcent--jak-budzik { width: clamp(4rem, 5.5vw, 6rem); left: calc(100% + 1rem); top: 0.25rem; rotate: 10deg; }
.fn .fn-jak-etykieta { position: relative; }
.fn .fn-akcent--jak-etykieta { width: clamp(4.25rem, 5.5vw, 5.75rem); right: -1.75rem; top: -2.75rem; rotate: 12deg; }
@media (max-width: 767px) {
	.fn .fn-akcent--onas-tablica { width: 4.75rem; right: -2%; bottom: -1.75rem; }
	.fn .fn-akcent--onas-pieczec { width: 3.75rem; left: -3%; bottom: auto; top: -1.75rem; }
	.fn .fn-akcent--onas-forma, .fn .fn-akcent--jak-budzik { width: 3.75rem; left: auto; right: -0.25rem; top: -3.5rem; }
	.fn .fn-akcent--jak-wybor { left: auto; right: -2.75rem; }
	.fn .fn-akcent--jak-etykieta { width: 3.75rem; right: -0.5rem; top: -2.25rem; }
}
/* Sekcje linii na głównej: naklejka z nazwą linii („luna”, „hydro”, „flora”, w zestawie trzy saszetki) na lewym górnym
   rogu odbitki zdjęcia w kompozycji (prośba klienta z 2026-10-14: „na krawędzi fotki te hydro, luna”). */
.fn .fn-akcent--scena { z-index: 3; width: clamp(5rem, 7vw, 7.5rem); left: 1%; top: 8%; rotate: -12deg; }
@media (max-width: 767px) { .fn .fn-akcent--scena { width: 4.5rem; left: 3%; top: 11%; } }
/* „Bądź sobą” przy tytule na stronie o marce: mniejsza niż naklejki z Brand Booka, bo jest bardziej szczegółowa. */
.fn .fn-akcent--onas { width: clamp(4rem, 5.5vw, 6rem); }

/* ---------- Panel zakupu od nowa (prośba klienta z 2026-10-14: „ten element jest po prostu brzydki”) ----------
   Było: obrysowane pudełka jedno pod drugim (linie, opakowania), etykiety wersalikami, cena dwa razy, kanciasty licznik.
   Teraz jeden system zaokrągleń: linie jako pigułki z miniaturą kartonika, opakowania jako jeden przełącznik
   segmentowy, cena z ceną za saszetkę (strona.js), ilość i przycisk jako pigułki tej samej wysokości. */
.fn .fn-produkt .fn-panel { gap: 1.5rem; }
.fn .fn-panel-nadtytul { font: 600 0.9375rem/1.2 var(--fn-font-tekst); letter-spacing: 0; text-transform: none; }
.fn .fn-panel-smak { margin: 0.4rem 0 0 !important; font-size: 1rem; line-height: 1.35; opacity: 0.85; }
.fn .fn-produkt .fn-panel-etykieta, .fn .fn-produkt .st-buy-panel .variations th label {
	margin: 0 0 0.6rem; font: 700 0.9375rem/1.2 var(--fn-font-naglowki); letter-spacing: 0; text-transform: none;
}
/* Linie: pigułki z okrągłą miniaturą kartonika; bieżąca w kremie. */
.fn .fn-produkt .fn-wybor-linii { margin-bottom: 1.25rem; }
.fn .fn-produkt .fn-wybor-linii-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fn .fn-produkt .fn-wybor-linii-link {
	display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 1.05rem 0.3rem 0.3rem; border-radius: 6.25rem;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 32%, transparent); translate: none;
}
.fn .fn-produkt .fn-wybor-linii-link:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.fn .fn-produkt .fn-wybor-linii-link[aria-current] { background: var(--fn-krem); color: var(--fn-malina-900); box-shadow: none; }
.fn .fn-produkt .fn-wybor-linii-obraz { flex: none; width: 2.5rem; height: 2.5rem; aspect-ratio: 1; padding: 0.2rem; border-radius: 50%; background: var(--fn-linia-jasny); }
.fn .fn-produkt .fn-wybor-linii-nazwa { font: 700 1rem/1 var(--fn-font-naglowki); }
/* Opakowania: jeden przełącznik segmentowy; liczba i słowo w wierszu, cena pod spodem; wybrane w kremie. */
.fn .fn-produkt .st-buy-panel .variations { margin-bottom: 1.25rem; }
.fn .fn-produkt .fn-opakowania { gap: 0.3rem; padding: 0.3rem; border-radius: 1.25rem; background: rgb(22 8 14 / 0.16); }
.fn .fn-produkt .fn-opakowanie {
	flex-flow: row wrap; justify-content: center; align-items: baseline; column-gap: 0.3rem; row-gap: 0.15rem;
	padding: 0.7rem 0.4rem 0.75rem; border-radius: 1rem; box-shadow: none;
}
.fn .fn-produkt .fn-opakowanie:hover { box-shadow: none; background: rgb(255 251 247 / 0.12); translate: none; }
.fn .fn-produkt .fn-opakowanie:has(input:checked) { background: var(--fn-krem); color: var(--fn-linia-ciemny, var(--fn-malina-900)); }
.fn .fn-produkt .fn-opakowanie-liczba { font: 800 1.25rem/1 var(--fn-font-naglowki); letter-spacing: 0; }
.fn .fn-produkt .fn-opakowanie-slowo { font: 600 0.9375rem/1 var(--fn-font-naglowki); letter-spacing: 0; text-transform: none; }
.fn .fn-produkt .fn-opakowanie-cena { flex-basis: 100%; margin-top: 0.15rem; font-size: 0.875rem; opacity: 0.8; text-align: center; }
/* Cena: jedna, duża, obok cena za saszetkę. */
.fn .fn-produkt .st-buy-panel .woocommerce-variation-price { margin: 0; font: 800 2rem/1.1 var(--fn-font-naglowki); letter-spacing: -0.01em; }
.fn .fn-produkt .fn-cena-saszetki { margin: 0.2rem 0 1rem; font-size: 0.9375rem; opacity: 0.8; }
.fn .fn-produkt .fn-cena-saszetki:empty { display: none; }
/* Ilość i przycisk: pigułki tej samej wysokości. */
.fn .fn-produkt .st-buy-panel .woocommerce-variation-add-to-cart { gap: 0.6rem; }
.fn .fn-produkt .st-buy-panel .quantity.fn-ilosc { min-height: 3.5rem; padding: 0 0.3rem; border-radius: 6.25rem; }
.fn .fn-produkt .st-buy-panel .fn-ilosc-krok { align-self: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.fn .fn-produkt .st-buy-panel .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
	min-height: 3.5rem; border-radius: 6.25rem; font: 800 1.125rem/1.2 var(--fn-font-naglowki); letter-spacing: 0.01em;
}
.fn .fn-produkt .fn-uwaga { margin-top: 0.9rem; font-size: 0.875rem; opacity: 0.8; }
/* Telefon: panel na środku jak nagłówek nad galerią (etykiety, linie, cena za saszetkę). */
@media (max-width: 991px) {
	.fn .fn-produkt .fn-panel-etykieta, .fn .fn-produkt .st-buy-panel .variations th, .fn .fn-produkt .woocommerce-variation-price, .fn .fn-produkt .fn-cena-saszetki { text-align: center; }
	.fn .fn-produkt .fn-wybor-linii-lista { justify-content: center; }
}