/* Feel Nice nad układem kopii Slight Twist (uklad.css). Kształty, rozmiary i odstępy zostają z kopii;
   tu są tylko fonty, logo, koszyk w nawigacji, menu na telefonie, znacznik linii w miejscu znacznika
   alkoholu, naklejki w roli ikon i poprawki kontrastu tam, gdzie kolory linii tego wymagają. */

/* Duże teksty (nagłówki, przyciski, menu): Nunito (OFL, Google Fonts), zmienny, wagi 200–1000 z kursywą (decyzja klienta
   z 2026-10-14: „wymiana fontów nagłówków itp. na Nunito”; wcześniej Bricolage Grotesque w miejscu NaN Jaune z kopii). */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: italic; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--fn-malina: #801247;
	--fn-roz: #ef458f;
	--fn-zolty: #fff87e;
	--fn-czern: #16080e;
	--fn-biel: #faf8fb;
	--fn-krem: #fffbf7;
	--fn-malina-900: #431026;
	--fn-malina-800: #5e1235;
	--fn-malina-600: #b02966;
	--fn-roz-300: #feb7ce;
	--fn-roz-200: #fdd7e5;
	--fn-szary-700: #514349;
	--fn-szary-300: #beb5bc;
	--fn-font-naglowki: 'Nunito', system-ui, sans-serif;
	--fn-font-tekst: 'Figtree', system-ui, sans-serif;
}

/* ---------- Skala sklepu: jedno pokrętło dla fontów, odstępów, grafik w rem i promieni ----------
   Wszystkie rozmiary układu kopii (uklad.css), marki i sklepu są w rem, więc idą za tą wartością. 90% to 1rem = 14,4 px:
   decyzja z 2026-10-13, sklep ma wyglądać jak przy zoomie 90% (te same liczby co kopia ST wyglądały w fontach Feel Nice
   za duże). Nie zmienia się to, co liczone od okna (vw, vh: wysokość hero, saszetka w hero), ramki i progi @media. */
html { font-size: 90%; }
/* Wyjątek od skali: iOS przybliża stronę po kliknięciu w pole z tekstem mniejszym niż 16 px. Minimum ma wygrać z regułami
   WooCommerce i formularzy sklepu, stąd !important. */
.fn input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), .fn select, .fn textarea { font-size: max(16px, 1em) !important; }

/* ---------- fonty: tekst Figtree w wagach z kopii, duże teksty Nunito (patrz wyżej) ---------- */
.fn h1, .fn h2, .fn h3, .fn h4, .fn h5, .fn .heading-style-h1, .fn .product-page-display-title, .fn .product-title, .fn .range-titile {
	font-family: var(--fn-font-naglowki);
}
.fn .fn-zolty { color: var(--fn-zolty); display: block; }
.fn a { color: inherit; }
/* Przyciski, menu i znaczniki: w kopii ten sam krój co nagłówki, więc tu też krój dużych tekstów. */
.fn .button, .fn .navbar5_link, .fn .fn-koszyk-link, .fn .fn-znacznik, .fn .text-size-tiny { font-family: var(--fn-font-naglowki); }

.fn-pomin { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--fn-zolty); color: var(--fn-czern); font-weight: 700; }
.fn-pomin:focus { top: 1rem; }
.fn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fn :focus-visible { outline: 3px solid var(--fn-zolty); outline-offset: 3px; }
.fn .section_home_feature :focus-visible { outline-color: var(--fn-malina); }

/* Osadzony CSS kopii (global-styles): pętle przewijania zdjęć i paska, klasy ukrywania. */
.hide { display: none !important; }
@media (max-width: 991px) { .hide-tablet { display: none !important; } }
@media (max-width: 767px) { .hide-mobile-landscape { display: none !important; } }
@media (max-width: 479px) { .hide-mobile { display: none !important; } }
.home_feature_image-list-left { animation: marquee-vertical 40s linear infinite; }
.home_feature_image-list-right { animation: marquee-vertical-reverse 40s linear infinite; }
.banner_marquee, .verticle_product_slider_banner_marquee-strip { animation: marquee-horizontal 80s linear infinite; }
@keyframes marquee-vertical { 100% { transform: translateY(-50%); } }
@keyframes marquee-vertical-reverse { 100% { transform: translateY(0%); } }
@keyframes marquee-horizontal { 100% { transform: translateX(-50%); } }

/* ---------- nawigacja: logo Feel Nice zamiast obrazka, koszyk jak „Cart (0)” w kopii ---------- */
.fn .navbar5_component { z-index: 100; }
.fn .navbar5_logo-link { color: var(--fn-krem); }
/* Wysokość jak logo kopii (162 px szerokości przy proporcjach 3:1), żeby pasek nawigacji miał tę samą wysokość. */
.fn .fn-logo { display: block; width: auto; height: 3.4rem; }
.fn .navbar5_menu-right { display: flex; justify-content: flex-end; }
.fn .fn-koszyk-link { font-size: 1.375rem; white-space: nowrap; padding-right: 0; }
.fn .fn-koszyk-mobile { display: none; }
.fn .navbar5_menu-button { background: none; border: 0; }
@media (max-width: 991px) {
	.fn .fn-logo { height: 3rem; }
	.fn .fn-koszyk-mobile { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; margin-right: 0.5rem; color: var(--fn-krem); font-weight: 700; text-decoration: none; }
	.fn .fn-koszyk-mobile .fn-koszyk-liczba { min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border-radius: 6.25rem; background: var(--fn-zolty); color: var(--fn-czern); font-size: 0.8rem; }
}
/* Nad jasnymi sekcjami (data-fn-jasne, strona.js) logo, linki i koszyk w ciemnej malinie, pigułki linków jaśniejsze
   (kremowe znikały na kremie i żółtym). Na telefonie i tablecie menu to wyspa z własnym tłem, więc bez zmian. */
@media (min-width: 992px) {
	.fn .navbar5_logo-link, .fn .navbar5_link { transition: color 0.2s ease; }
	html.fn-pasek-na-jasnym .fn .navbar5_logo-link, html.fn-pasek-na-jasnym .fn .navbar5_link { color: var(--fn-malina-900); }
	html.fn-pasek-na-jasnym .fn .navbar5_button-background { background-color: rgb(67 16 38 / 0.08); }
}
/* Pasek i menu na telefonie i tablecie (wyspa, menu na cały ekran): telefon.css. */

/* ---------- hero strony produktu: packshot zamiast puszki ---------- */
.fn .product_hero_image { object-fit: contain; filter: drop-shadow(0 30px 40px rgb(22 8 14 / 0.3)); }

/* ---------- Hero głównej (redesign na prośbę klienta z 2026-10-14: „hero wygląda najgorzej ze wszystkiego”) ----------
   Hasło na malinie ze wzorem botanicznym ton w ton z Brand Booka (str. 1; prośba klienta z 2026-10-14: „zamiast
   jednolitego koloru coś”), a obok jedyny mocny element: żółte koło, słońce dobrego dnia i to samo koło co na stronie
   produktu, z trzema liniami wachlarzem. Luna z przodu, Hydro i Flora za nią, wszystkie duże (prośba z 2026-10-13:
   „za mała grafika”). Pod spodem pasek z hasłami wersalikami z kopii (spis linii, który na chwilę go zastąpił, wycofany
   na prośbę klienta z 2026-10-14). Jeden ekran wysokości, menu leży na górze hero, marginesy jak w innych sekcjach.
   Scena jest kontenerem (container-type: size), więc koło i saszetki skalują się z jej mniejszym wymiarem (--fn-j). */
.fn .fn-hero {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 5rem;
	min-height: 100vh; min-height: 100svh; padding: 7.5rem var(--fn-margines) 0;
	background: var(--fn-malina) url('../img/wzory/wzor-botaniczny-1920.webp') center / cover; color: var(--fn-krem); overflow: clip;
}
/* Telefon: wzór i tak jest powiększony do wysokości hero, więc wystarcza mniejszy plik. */
@media (max-width: 767px) { .fn .fn-hero { background-image: url('../img/wzory/wzor-botaniczny-1200.webp'); } }
.fn .fn-hero-tresc { align-self: center; padding-block: 1.5rem; }
/* Krój dużych tekstów w najgrubszej wadze, żeby hasło było duże w połowie ekranu. */
.fn .fn-hero-haslo {
	margin: 0 0 1.75rem; font-family: var(--fn-font-naglowki); font-weight: 800;
	font-size: clamp(2.75rem, 5vw, 5.75rem); line-height: 1; letter-spacing: -0.015em; color: var(--fn-krem); text-wrap: balance;
}
.fn .fn-hero-opis { max-width: 30rem; margin: 0 0 2.25rem; font-size: 1.375rem; font-weight: 400; line-height: 1.45; }
.fn .fn-hero-przycisk { padding: 1rem 2rem; font-size: 1.25rem; }
.fn .fn-hero-scena { --fn-j: min(1cqh, 1.06cqw); position: relative; container-type: size; min-height: 24rem; }
.fn .fn-hero-kolo { position: absolute; inset: 0; margin: auto; width: calc(90 * var(--fn-j)); height: calc(90 * var(--fn-j)); border-radius: 50%; background: var(--fn-zolty); }
/* Saszetki stoją od środka sceny: Luna (szerokość 0,505 wysokości) na środku, boczne o 30 jednostek w bok i niżej. */
.fn .fn-hero-saszetka { position: absolute; left: 50%; width: auto; filter: drop-shadow(0 1.5rem 2rem rgb(67 16 38 / 0.35)); }
.fn .fn-hero-saszetka--luna { z-index: 2; height: calc(78 * var(--fn-j)); bottom: calc(50% - 41 * var(--fn-j)); margin-left: calc(-19.7 * var(--fn-j)); rotate: -4deg; }
.fn .fn-hero-saszetka--hydro { z-index: 1; height: calc(62 * var(--fn-j)); bottom: calc(50% - 37 * var(--fn-j)); margin-left: calc(-46 * var(--fn-j)); rotate: -15deg; }
.fn .fn-hero-saszetka--flora { z-index: 1; height: calc(62 * var(--fn-j)); bottom: calc(50% - 37 * var(--fn-j)); margin-left: calc(14.7 * var(--fn-j)); rotate: 13deg; }
/* Saszetki bujają się jak w sekcjach linii, ale każda w swoim rytmie (bez JavaScriptu; przy ograniczonym ruchu stoją). */
@media (prefers-reduced-motion: no-preference) {
	.fn .fn-hero-saszetka { animation: fn-hero-buja 2.6s ease-in-out infinite alternate; }
	.fn .fn-hero-saszetka--hydro { animation-delay: -0.9s; }
	.fn .fn-hero-saszetka--flora { animation-delay: -1.8s; }
}
@keyframes fn-hero-buja { from { translate: 0 0; } to { translate: 0 -0.75rem; } }
/* Naklejka-akcent na krawędzi koła u góry z prawej, nad Florą (nie na saszetce ani haśle). */
.fn .fn-akcent--hero-glowna { width: clamp(5rem, 7vw, 8rem); left: calc(50% + 24 * var(--fn-j)); top: calc(50% - 46 * var(--fn-j)); rotate: 10deg; }
/* Pasek z hasłami (hero_bottom_strip z kopii): na całą szerokość pod hasłem i sceną, z kreską u góry, bo tło jest to samo
   co hero; marginesy boczne daje już hero, więc padding-global paska bez własnych. */
.fn .fn-hero > .hero_bottom_strip_component { grid-column: 1 / -1; background: none; border-top: 1px solid rgb(255 251 247 / 0.2); }
.fn .fn-hero > .hero_bottom_strip_component .padding-global { padding-inline: 0; }
/* Telefon i tablet (menu jako wyspa u góry): jedna kolumna, scena nad hasłem dostaje wysokość, która zostaje po tekście
   i pasku z hasłami (ok. 34rem z odstępami), najmniej 14rem; tekst na środku jak w innych sekcjach. Wysokość sceny wprost od okna, nie z wiersza siatki 1fr: gdy treść była wyższa niż okno (mały
   telefon), Chrome liczył cqh sceny jako 0 i koło z saszetkami znikały. */
@media (max-width: 991px) {
	.fn .fn-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: center; row-gap: 1.25rem; padding-top: 5.5rem; text-align: center; }
	.fn .fn-hero-scena { order: -1; min-height: 0; height: max(14rem, 100vh - 34rem); height: max(14rem, 100svh - 34rem); }
	.fn .fn-hero-tresc { padding-block: 0; }
	.fn .fn-hero-haslo { margin-bottom: 1.25rem; }
	.fn .fn-hero-opis { margin: 0 auto 1.75rem; font-size: 1.125rem; }
	.fn .fn-hero > .hero_bottom_strip_component { grid-column: auto; }
}

/* ---------- naklejki marki w rolach ikon z kopii ---------- */
.fn .fn-ikona { width: 3rem; height: auto; }
.fn .fn-ikona-duza { width: 5rem; height: auto; }
/* Rozmiary jak obrazki w tych miejscach w kopii: znaki korzyści 50 px wysokości, odznaki ok. 150 px. */
.fn .home_feature_benefit-image img { width: auto; height: 3.125rem; }
.fn .product_feature_item-image { width: auto; height: 9.5rem; max-width: 100%; }
.fn .product-overview_item { justify-self: start; }

/* ---------- znacznik linii w miejscu znacznika alkoholu (obrys w kolorze smaku, kształt z kopii) ---------- */
.fn .fn-znacznik { display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0.4rem 1.25rem; border: 3px solid currentColor; border-radius: 6.25rem; font-weight: 600; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; transform: none; }

/* ---------- kontrast na kolorach linii ---------- */
/* Flora: pomarańcz linii z jasnym tekstem ma za mały kontrast; jak na saszetce (str. 17) tekst idzie czernią. */
.fn .fn-linia-flora, .fn .fn-linia-flora .text-color-blue { color: var(--fn-czern); }
.fn .fn-linia-flora .button.is-solid-blue { background: var(--fn-czern); color: var(--fn-krem); }
.fn .product-hero_component.is-citrus-sprits-bg .text-color-blue { color: var(--fn-czern); }
.fn .section_product-overview.is-citrus-spritz-bg:not(:has(.is-green100-bg)),
.fn .section_product-overview.is-citrus-spritz-bg:not(:has(.is-green100-bg)) .text-color-yellow200,
.fn .section_product-overview.is-citrus-spritz-bg:not(:has(.is-green100-bg)) .text-color-blue { color: var(--fn-czern); }
.fn .fn-karta-cena { color: var(--fn-zolty); font-weight: 700; }

/* ---------- stopka: zgoda pod formularzem (nowe pole, kopia jej nie miała) ---------- */
.fn .fn-zgoda { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.45; max-width: 30rem; }
.fn .fn-zgoda input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--fn-zolty); }
.fn .fn-zgoda a { color: var(--fn-zolty); }
.fn .fn-stopka-kontakt { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	.home_feature_image-list-left, .home_feature_image-list-right, .banner_marquee, .verticle_product_slider_banner_marquee-strip { animation: none; }
}

/* Jak w motywie kopii (style.css): elementy dekoracyjne szersze niż ekran nie przewijają strony w poziomie. */
html, body { overflow-x: clip; }
/* Przycisk Luny (is-solid-light-pink): w kopii czerwony tekst na jasnym różu, u nas głęboki kolor Luny (str. 16). */
.fn .button.is-solid-light-pink { color: #9a1456; }
/* Nagłówek suwaka: polskie „Przesuń, żeby zobaczyć” jest dłuższe niż w kopii, na telefonie schodzi pod tytuł. */
.fn .productrange_heading-wrapper { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
/* Duża naklejka w sekcji „Feel Nice to”: w kopii koło wychodzi poza ekran, naklejki nie ucinamy. */
@media (max-width: 767px) { .fn .product_ecommerce-product-header-1_image { max-width: 80vw; height: auto; margin-inline: auto; transform: none; } }
/* Telefon: packshot w hero ma wysokość puszki z kopii (340 px); packshot Luny (385 px szerokości) nie jest wtedy
   powiększany ponad rozdzielczość źródła. Odznaki i cechy produktu jak w kopii. */
@media (max-width: 767px) {
	.fn .product_hero_image, .fn .section_product_hero .product_hero_image { width: auto; max-width: 100%; height: 27rem; margin-inline: auto; padding-bottom: 0; }
	.fn .product_feature_item-image { height: 7rem; }
	.fn .product-overview_item { justify-self: center; }
}
/* Logo Feel Nice jest węższe niż logo kopii (162 px + odstępy): pole logo ma tę samą szerokość, menu zaczyna się w tym samym miejscu. */
/* Pole logo (z rozmytym tłem) tylko tak szerokie jak logo z odstępami (prośba klienta z 2026-10-14: tło za logo było
   o połowę szersze od logo, bo pole miało 12,125rem jak logo kopii). Menu zaczyna się w tym samym miejscu co wcześniej:
   brakującą szerokość pola (12,125rem minus logo 3,4rem × 1,6 i dwa odstępy po 1rem) dostaje lewy margines menu. */
@media (min-width: 992px) {
	.fn .navbar5_logo-link { min-width: 0; }
	.fn .navbar5_menu-left { margin-left: calc(2rem + 12.125rem - 3.4rem * 1.598 - 2rem); }
}
/* Packshot jest smuklejszy od puszki: w hero produktu ma wysokość puszki z kopii (ok. 606 px przy 1280 px). */
@media (min-width: 768px) { .fn .section_product_hero .product_hero_image { width: auto; height: min(46rem, 86vh); max-width: 100%; } }
/* Saszetki jak puszki w kopii (pomiar bin/pozycje.mjs): w hero przechylone ok. 20° i dosunięte do prawej krawędzi,
   w sekcjach linii duże i prawie pionowe (obrót od -45° do -5° przy przewijaniu w strona.js), w kaflach prosto.
   rotate, scale i translate to osobne właściwości, więc składają się z animacjami GSAP. */
.fn .product_hero_image { rotate: 20deg; }
.fn .product_hero_image[src*="zestaw-packshot"] { rotate: 8deg; } /* zestaw jest szeroki: mniejszy skos */
/* W kopii pole obrazka w hero zajmuje resztę wiersza obok tekstu, a produkt stoi na jego środku, więc przy każdej
   szerokości okna jest w tym samym miejscu względem ekranu (ok. 85% na głównej, 77% na stronie produktu).
   Tak samo tutaj: pole rośnie, saszetka na środku, rozmiar rośnie z oknem. */
@media (min-width: 992px) {
	.fn .product-hero_component > .product-hero_image-wrapper { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: center; }
	.fn .section_product_hero .product_hero_image { height: min(80vh, 46vw); width: auto; max-width: 100%; padding-bottom: 0; }
	/* Duża saszetka zaczyna się pod menu i może wyjść dołem poza hero, jak puszka w kopii (nie wchodzi pod „Koszyk”). */
	.fn .product-hero_component > .product-hero_image-wrapper { align-items: flex-start; padding-top: 7rem; }
	.fn .product-hero_component .product_hero_image { margin-bottom: -7rem; } /* wysokość hero bez zmian */
}
/* Za logiem jak w kopii: czworokąt ze skośną dolną krawędzią i rozmyciem tła, żeby logo było czytelne na każdym tle. */
.fn .navbar5_logo-link { position: relative; }
.fn .fn-logo-tlo { position: absolute; inset: 0; z-index: -1; clip-path: polygon(0.55% 0, 98.5% 0, 99.6% 89.7%, 0 99.3%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgb(22 8 14 / 0.06); }
/* „Przesuń, żeby zobaczyć” i strzałka: w kopii ciemne na ciemnym, tu czytelne (krem, większe) i żółta strzałka. */
.fn .productrange_button-row { gap: 0.75rem; }
.fn .productrange_button-row .text-size-tiny { font-size: 1rem; color: var(--fn-krem); letter-spacing: 0.02em; }
.fn .productrange_arrow-icon { color: var(--fn-zolty); }
/* Naklejki-akcenty (Brand Book str. 36): obrócone, na krawędzi, pod tekstem i produktem nie wchodzą. */
.fn .fn-akcent { position: absolute; z-index: 2; pointer-events: none; display: block; line-height: 0; }
.fn .fn-akcent img { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgb(22 8 14 / 0.25)); }
.fn .product-hero_image-wrapper, .fn .home_product_image-wrapper { position: relative; }
.fn .fn-akcent--hero { width: clamp(5.5rem, 9vw, 9rem); left: 4%; bottom: 14%; rotate: -12deg; }
.fn .fn-akcent--sekcja { width: clamp(5rem, 8vw, 8rem); left: 2%; top: 18%; rotate: -10deg; }
.fn .range-titile { position: relative; display: inline-block; }
/* „jelly” za tytułem „Nasze linie”, nie na ostatniej literze (prośba klienta z 2026-10-13: bardziej w prawo). */
.fn .fn-akcent--tytul { width: clamp(4rem, 6vw, 6rem); right: -7rem; top: -1.75rem; rotate: 10deg; }
@media (max-width: 767px) {
	.fn .fn-akcent--hero { left: auto; right: 6%; bottom: 4%; }
	.fn .fn-akcent--sekcja { top: 4%; left: 6%; }
	.fn .fn-akcent--tytul { right: -5rem; top: -1.25rem; }
}
/* Saszetki w sekcjach linii duże jak puszki w kopii, które wychodzą prawie na całą wysokość sekcji (prośba klienta
   z 2026-10-13: „wielkie saszety”; wcześniej były pomniejszone do 82%). W kopii wysokość daje atrybut height="670"
   (px, poza skalą sklepu), tu wartość w rem, a na niskich ekranach mniej, żeby sekcja mieściła się w oknie
   (10rem to odstępy sekcji nad i pod saszetką). Na telefonie pole kopii (28,125rem) jest wyższe, saszetka wypełnia je w 100%. */
@media (min-width: 768px) { .fn .home_product_image { height: min(48rem, 100vh - 10rem); height: min(48rem, 100svh - 10rem); } }
/* Na stronie produktu pierwsza sekcja linii ma u góry pasek z hasłem (5rem w układzie): saszetka o tyle niższa. */
@media (min-width: 768px) {
	.fn .section_home_product:has(.verticle_product_slider_banner_marquee) .home_product_image { height: min(48rem, 100vh - 15rem); height: min(48rem, 100svh - 15rem); }
}
@media (max-width: 767px) { .fn .section_home_product .home_product_image-wrapper { max-height: 34rem; } }
.fn .fn-z-akcentem { position: relative; display: inline-block; }
.fn .fn-akcent--naglowek { width: clamp(5rem, 8vw, 7.5rem); right: -7.5rem; top: -2.5rem; rotate: 8deg; }
.fn .fn-akcent--stopka { width: clamp(4.5rem, 6vw, 6rem); right: -6.5rem; top: -1.5rem; rotate: -8deg; }
@media (max-width: 767px) { .fn .fn-akcent--naglowek { right: -4.5rem; top: -0.5rem; } .fn .fn-akcent--stopka { right: auto; left: 10.5rem; top: -1rem; } }
/* Naklejki z fizyką: można je złapać i rzucić, wracają sprężyście (strona.js). */
.fn .fn-akcent { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.fn .fn-akcent img { pointer-events: none; -webkit-user-drag: none; }
.fn .fn-akcent.jest-zlapana { cursor: grabbing; z-index: 5; }
/* Lewa kolumna sekcji linii: ciepłe nagłówki jak żółte nagłówki w kopii (na pomarańczowej Florze krem, żółty nie ma tam kontrastu). */
.fn .section_home_product h2, .fn .section_home_product h3 { color: var(--fn-zolty); }
.fn .fn-linia-flora h2 { color: var(--fn-krem); text-shadow: 0 2px 0 rgb(22 8 14 / 0.12); }
/* Owoce-naklejki przy produktach (Brand Book str. 29: owoc obok produktu, w tej samej skali opowieści). */
.fn .fn-akcent--tytul-sekcji { width: clamp(4.5rem, 7vw, 7rem); right: -6.5rem; top: -2rem; rotate: 12deg; }
.fn .fn-akcent--hero-2 { width: clamp(5rem, 8vw, 8.5rem); right: 6%; top: 10%; rotate: 14deg; }
@media (max-width: 767px) {
	.fn .fn-akcent--tytul-sekcji { right: -4rem; top: -1.25rem; }
	.fn .fn-akcent--hero-2 { right: 4%; top: 2%; }
}
/* Naklejki na produktach (decyzja z 2026-10-13): zachodzą na krawędzie saszetek jak naklejki na opakowaniu.
   Saszetka stoi na środku swojego pola, więc pozycje są w procentach pola. */
.fn .fn-akcent--hero { left: 20%; right: auto; top: auto; bottom: 12%; rotate: -14deg; }
.fn .section_product_hero .fn-akcent--hero { left: 22%; bottom: 10%; }
.fn .fn-akcent--hero-2 { right: 20%; left: auto; top: 10%; bottom: auto; rotate: 16deg; }
.fn .fn-akcent--sekcja { left: 21%; top: auto; bottom: 24%; rotate: -12deg; }
@media (max-width: 991px) {
	.fn .fn-akcent--hero, .fn .section_product_hero .fn-akcent--hero { left: 14%; bottom: 6%; }
	.fn .fn-akcent--hero-2 { right: 14%; top: 4%; }
	.fn .fn-akcent--sekcja { left: 12%; bottom: 12%; }
}
/* Zestaw w hero jest szeroki: niższy, żeby po obrocie mieścił się w oknie. */
@media (min-width: 992px) {
	.fn .section_product_hero .product_hero_image[src*="zestaw-packshot"] { height: min(50vh, 30vw); }
}
@media (max-width: 991px) { .fn .product_hero_image[src*="zestaw-packshot"] { max-width: 92%; height: auto; } }
@media (min-width: 992px) and (max-width: 1199px) { .fn .section_product_hero .product_hero_image[src*="zestaw-packshot"] { height: min(50vh, 26vw); } }

/* ---------- etap 3: strony „Dlaczego jelly i mus?”, „Jak stosować”, Kontakt, strony prawne ---------- */
/* Zdjęcie w ramce zawieszonej na sznurku, jak zdjęcie założycieli na stronie About w kopii. */
.fn .fn-ramka-grupa { position: relative; justify-content: center; }
.fn .fn-ramka { position: relative; margin: 2.5rem 10% 0; padding: 0.9rem; background: var(--fn-roz); border: 0.35rem solid var(--fn-roz-300); rotate: 3deg; box-shadow: 0 18px 30px rgb(22 8 14 / 0.3); }
.fn .fn-ramka::before { content: ''; position: absolute; left: 50%; top: -2.6rem; width: 9rem; height: 2.6rem; translate: -50% 0; background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--fn-roz-300) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), var(--fn-roz-300) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; }
.fn .fn-ramka::after { content: ''; position: absolute; left: 50%; top: -2.9rem; width: 0.7rem; height: 0.7rem; translate: -50% 0; border-radius: 50%; background: var(--fn-roz-300); }
.fn .fn-ramka img { display: block; aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; }
.fn .fn-podpis { position: absolute; display: flex; align-items: center; gap: 0.25rem; color: var(--fn-zolty); font-family: var(--fn-font-naglowki); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; pointer-events: none; }
.fn .fn-podpis svg { width: 3.5rem; height: auto; }
.fn .fn-podpis--luna { left: -2%; top: 55%; }
.fn .fn-podpis--hydro { left: 38%; bottom: -3.25rem; flex-direction: column-reverse; }
.fn .fn-podpis--hydro svg { rotate: -100deg; }
.fn .fn-podpis--flora { right: -2%; top: 18%; flex-direction: row-reverse; }
.fn .fn-podpis--flora svg { scale: -1 1; rotate: 15deg; }
.fn .fn-akcent--ramka { width: clamp(6rem, 10vw, 9rem); left: 2%; bottom: 4%; rotate: -12deg; }
.fn .fn-akcent--ramka-2 { width: clamp(5rem, 8vw, 7.5rem); right: 4%; top: 6%; rotate: 10deg; }

/* Karty opowieści: w kopii karty z tłem-ilustracją, tu malina 800 z naklejką-postacią. */
.fn .fn-karta-opowiesci { position: relative; max-width: 46rem; margin: 0 auto; padding: 3.5rem 2.5rem 2.5rem; border-radius: 22px; background: var(--fn-malina-800); text-align: center; }
.fn .fn-karta-opowiesci .fn-postac { position: absolute; left: 50%; top: -4.25rem; translate: -50% 0; width: 7.5rem; height: auto; rotate: -6deg; }
.fn .fn-karta-opowiesci h3 { margin: 0; color: var(--fn-zolty); }
.fn .about-problem-card.fn-karta-opowiesci { max-width: 30rem; padding-top: 4rem; }
.fn .fn-ozdoba-lewa, .fn .fn-ozdoba-prawa { align-items: center; justify-content: center; }
.fn .fn-ozdoba { width: clamp(7rem, 14vw, 13rem); height: auto; }
.fn .fn-ozdoba-lewa .fn-ozdoba { rotate: -10deg; }
.fn .fn-ozdoba-prawa .fn-ozdoba { rotate: 9deg; }
.fn .fn-ozdoby-wizji { position: absolute; inset: 0; pointer-events: none; }
.fn .about-vision-title { color: var(--fn-zolty); }
/* Rozstrzelenie z kopii (-0.1em) jest dobrane do NaN Jaune; w Figtree i Nunito zlewa litery. */
.fn .about-vision-title { letter-spacing: -0.03em; }
.fn .about-vision-description { letter-spacing: -0.01em; }
.fn .person-image { width: clamp(5rem, 11vw, 10rem); height: auto; }
.fn .fn-zestaw-o-nas { width: min(46rem, 60%); height: auto; aspect-ratio: auto; object-fit: contain; filter: drop-shadow(0 30px 40px rgb(22 8 14 / 0.3)); }

/* „Jak stosować”: zdjęcia marki w miejscu produktu, zaokrąglone i lekko obrócone jak naklejka. */
.fn .fn-sposob-zdjecie { justify-content: center; }
.fn .fn-sposob-img { width: min(30rem, 90%); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; border: 0.4rem solid var(--fn-krem); rotate: 4deg; box-shadow: 0 24px 36px rgb(22 8 14 / 0.3); }
.fn .fn-sposob:nth-of-type(even) .fn-sposob-img { rotate: -4deg; }
.fn .fn-sposob h2 { color: var(--fn-zolty); }
.fn .fn-linia-flora h2, .fn .is-citrus-sprits.fn-sposob h2 { color: var(--fn-krem); }
.fn .fn-porcja { background: var(--fn-malina-900); }
.fn .fn-porcja h2 { color: var(--fn-zolty); margin-top: 0; }
.fn .fn-ostrzezenia { margin-top: 2rem; padding: 1.5rem 1.75rem; border-radius: 16px; background: rgb(255 251 247 / 0.08); border: 1px solid rgb(255 251 247 / 0.2); font-size: 1rem; line-height: 1.55; }
.fn .fn-ostrzezenia p { margin: 0; }

/* Kontakt */
.fn .fn-kontakt-tytul { margin-top: 0; }
.fn .form_input-4 { font-family: var(--fn-font-tekst); }
.fn .fn-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fn .fn-kontakt-info { margin: 0.75rem 0 0; opacity: 0.85; }
.fn .fn-kontakt-info a { color: var(--fn-zolty); }
.fn .fn-kontakt-wynik { min-height: 1.5rem; margin: 0.75rem 0 0; font-weight: 600; color: var(--fn-zolty); }
.fn .fn-dane-firmy { align-self: stretch; margin-top: 2.5rem; font-style: normal; line-height: 1.6; opacity: 0.9; }
.fn .fn-dane-firmy a { color: var(--fn-zolty); }
.fn .fn-kontakt-produkt { rotate: 18deg; width: auto; height: min(32rem, 60vh); max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgb(22 8 14 / 0.3)); }
.fn .contact-header_image-wrapper { position: relative; display: flex; justify-content: center; }
.fn .fn-akcent--kontakt { width: clamp(6rem, 10vw, 9rem); left: 8%; bottom: 10%; rotate: -10deg; }

/* Strony prawne: treść czytelna, nagłówki w kroju dużych tekstów. */
.fn .privacy-rich-text { font-size: 1.0625rem; line-height: 1.6; }
.fn .privacy-rich-text h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--fn-zolty); margin: 2.25rem 0 0.75rem; letter-spacing: -0.01em; }
.fn .privacy-rich-text ol, .fn .privacy-rich-text ul { padding-left: 1.4rem; margin: 0 0 1rem; }
.fn .privacy-rich-text li { margin-bottom: 0.5rem; }
.fn .privacy-rich-text a { color: var(--fn-zolty); }
@media (max-width: 767px) {
	.fn .fn-ramka { margin: 2.5rem 6% 3.5rem; }
	.fn .fn-podpis--luna { left: 0; top: auto; bottom: -2.75rem; }
	.fn .fn-podpis--flora { right: 0; top: -1rem; }
	.fn .fn-karta-opowiesci { padding: 3.5rem 1.5rem 2rem; }
	.fn .fn-kontakt-produkt { height: 22rem; }
	/* Kopia chowa zdjęcie kontaktu na telefonie, więc naklejka przy nim też znika (inaczej leży na adresie). */
	.fn .fn-akcent--kontakt { display: none; }
}
/* Postać nad kartą, nie na tekście; tekst karty w rozmiarze jak w kopii. */
.fn .about-problem-card.fn-karta-opowiesci { padding-top: 5.5rem; }
.fn .about-problem-card .fn-postac { width: 6.5rem; top: -3.75rem; }
.fn .about-problem-card .text-size-medium { font-size: 1.375rem; line-height: 1.35; }
/* Ozdoby wizji przy krawędziach ekranu, z dala od tekstu. */
.fn .section_about_vision .about_vision_background-image-wrapper { margin-top: 0; }
.fn .fn-ozdoba--1, .fn .fn-ozdoba--2, .fn .fn-ozdoba--3 { position: absolute; }
.fn .fn-ozdoba--1 { left: 6vw; top: 18%; width: clamp(5rem, 8vw, 7rem); rotate: -8deg; }
.fn .fn-ozdoba--2 { right: 4vw; bottom: 10%; }
.fn .fn-ozdoba--3 { right: 8vw; top: 16%; width: clamp(5rem, 9vw, 8rem); }
@media (max-width: 767px) { .fn .fn-ozdoba--1, .fn .fn-ozdoba--3 { display: none; } .fn .fn-ozdoba--2 { width: 5rem; bottom: 2%; } }
/* Karta problemu przyklejona w środku ekranu, nie pod nawigacją (w kopii top: 0 przy innym nagłówku). */
.fn .scrollstory-2_content { top: 28vh; }

/* ---------- Sekcje linii na głównej (2026-10-13: „zrób ciekawiej”; naklejki tylko jako akcent) ---------- */
/* Punkty: pigułki jak w menu kopii (czarne 20% z rozmyciem, pełne zaokrąglenie, krój dużych tekstów). */
.fn .fn-punkty { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.fn .fn-punkt { padding: 0.5rem 1rem 0.7rem; border-radius: 6.25rem; background: rgb(0 0 0 / 0.2); -webkit-backdrop-filter: blur(56px); backdrop-filter: blur(56px); font-family: var(--fn-font-naglowki); font-size: 1.125rem; line-height: 1.2; letter-spacing: 0.0625rem; }
@media (max-width: 767px) { .fn .fn-punkty { justify-content: center; } }
/* Zdjęcie linii z Brand Booka jako odbitka za saszetką (prośba klienta z 2026-10-14: „zrób to jakoś fajniej”).
   Kremowy brzeg jak u naklejek marki, cień w kolorze linii zamiast szarego, przechył 5–6° (str. 36: 4–8°) na kolejnych
   ekranach na zmianę w prawo i w lewo. Wcześniej karta była szeroka i saszetka zasłaniała jej środek (w zestawie
   twarze trzech osób): teraz jest mniejsza, a zza saszetki wystaje ok. 80% zdjęcia.
   Przy przewijaniu wysuwa się zza saszetki i obraca (strona.js), ale ten układ jest stanem końcowym. */
.fn .section_home_product .home_product_image-wrapper { isolation: isolate; }
.fn .fn-linia-zdjecie {
	--fn-cien-linii: 67 16 38;
	position: absolute; z-index: -1; left: -30%; bottom: -5%; width: 64%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
	box-sizing: border-box; border: 0.5rem solid var(--fn-krem); border-radius: 1.125rem; rotate: 5deg;
	box-shadow: 0 0.375rem 0.75rem rgb(var(--fn-cien-linii) / 0.25), 0 1.75rem 3.5rem -0.5rem rgb(var(--fn-cien-linii) / 0.5);
}
.fn .fn-linia-luna .fn-linia-zdjecie { --fn-cien-linii: 74 10 40; }
.fn .fn-linia-hydro .fn-linia-zdjecie { --fn-cien-linii: 4 54 40; rotate: -5deg; }
.fn .fn-linia-flora .fn-linia-zdjecie { --fn-cien-linii: 112 40 4; }
/* Zestaw: szeroki packshot zasłania prawą część karty, więc odbitka kwadratowa z prawej części zdjęcia: trzy twarze
   są w jej lewych 60%, które wystają zza zielonej saszetki. Dłuższy tytuł i rząd ikon: bliżej saszetek. Na telefonie
   saszetki zajmują całą szerokość i kwadrat by się za nimi schował, więc tam zostaje karta 3:2 (telefon.css). */
.fn .fn-linia-zestaw .fn-linia-zdjecie { rotate: -6deg; }
@media (min-width: 768px) { .fn .fn-linia-zestaw .fn-linia-zdjecie { left: -10%; width: 54%; aspect-ratio: 1; object-position: 100% 50%; } }
/* Na środku sekcji w pionie (prośba klienta z 2026-10-14: „w środku pionowo sekcji, idealnie”). Zdjęcie jest wtedy
   na wysokości tekstu, więc szerokość wynika z miejsca między tekstem a saszetką, a nie z szerokości pola:
   saszetka stoi na środku pola, ma wysokość pola i szerokość 0,505 wysokości, więc jej lewa krawędź jest
   o 0,2525 wysokości od środka. Kolumna tekstu jest szeroka jak pole, tekst zajmuje z niej ok. 32rem (rząd ikon),
   a między kolumnami jest 5rem, więc wolne miejsce to 150% pola - 0,2525 wysokości - 27rem (z odstępem od tekstu
   ok. 3rem: 30,4rem). Za saszetką chowa się 22% szerokości zdjęcia. Węższe ekrany (poniżej 1280 px) zostają przy
   lewym dolnym rogu saszetki pod tekstem, bo w pasie tekstu zostałoby na zdjęcie mniej niż 14rem. */
@media (min-width: 1280px) {
	.fn .section_home_product:not(.fn-linia-zestaw) .fn-linia-zdjecie {
		--fn-wys-saszetki: min(48rem, 100vh - 10rem);
		--fn-szer-zdjecia: min(30rem, (150% - 0.2525 * var(--fn-wys-saszetki) - 30.4rem) / 0.78);
		top: 0; bottom: 0; left: auto; margin-block: auto; width: var(--fn-szer-zdjecia);
		right: calc(50% + 0.2525 * var(--fn-wys-saszetki) - 0.22 * var(--fn-szer-zdjecia));
	}
	/* Strona produktu: pierwsza sekcja ma pasek z hasłem i niższą saszetkę (wyżej). */
	.fn .section_home_product:has(.verticle_product_slider_banner_marquee) .fn-linia-zdjecie { --fn-wys-saszetki: min(48rem, 100vh - 15rem); }
	/* Zestaw wypełnia pole na szerokość (zielona saszetka zaczyna się przy lewej krawędzi pola), a tytuł jest dłuższy
	   (ok. 33rem), więc odbitka mniejsza i schowana za saszetką w 30%. Przechył w prawo odsuwa jej górny róg od tytułu. */
	.fn .section_home_product.fn-linia-zestaw .fn-linia-zdjecie {
		--fn-szer-zdjecia: clamp(11rem, (100% - 31rem) / 0.7, 22rem);
		top: 0; bottom: 0; left: auto; margin-block: auto; width: var(--fn-szer-zdjecia);
		right: calc(100% - 0.3 * var(--fn-szer-zdjecia)); rotate: 6deg;
	}
}
/* W kopii .text-color-yellow300 ustawia też font-size: 1rem i przykrywa text-size-large: podtytuł Hydro jak w innych liniach. */
.fn .text-size-large.text-color-yellow300 { font-size: 1.75rem; }
@media (max-width: 479px) { .fn .text-size-large.text-color-yellow300 { font-size: 1.25rem; } }

/* ---------- Strona produktu (2026-10-13: pod stronę produktu kopii; naklejki tylko jako akcenty) ---------- */
/* Pas ze zdjęciem: trzy hasła wersalikami w miejscu obrazków z napisami z kopii (heading-style-h4: 2rem, 300, światło 3,5 px). */
.fn .fn-haslo { margin: 0; font-family: var(--fn-font-naglowki); font-size: 2rem; font-weight: 300; line-height: 1.1; letter-spacing: 0.2188rem; text-transform: uppercase; text-align: center; text-wrap: balance; color: var(--fn-krem); }
.fn .fn-haslo-podpis { display: block; margin-bottom: 0.5rem; font-size: 1rem; letter-spacing: 0.15rem; opacity: 0.85; }
@media (max-width: 767px) { .fn .fn-haslo { font-size: 1.5rem; } }
/* „Feel Nice to suplement…”: żółte koło z logo w miejscu koła z logo kopii; obraca się przy przewijaniu (strona.js). */
.fn .fn-kolo-logo { display: grid; place-items: center; width: 100%; aspect-ratio: 1; height: auto; border-radius: 50%; background: var(--fn-zolty); color: var(--fn-malina); }
/* Naklejka „moje zasady” przy końcu nagłówka, nie za krawędzią ekranu: blok nagłówka jest elementem flex i rozciągał się na całą kolumnę. */
.fn .product_ecommerce-product-header-1_content .fn-z-akcentem { width: fit-content; }
/* Opis i zakup: przycisk w kolorach przycisku „Kup teraz” linii (nie różowy na każdym tle), zdjęcie na całą wysokość
   kolumny, pigułki bez światła liter, uwaga o suplemencie przy lewej krawędzi jak reszta kolumny. */
.fn .fn-linia-luna { --fn-przycisk-tlo: #fdd7e5; --fn-przycisk-tekst: #9a1456; }
.fn .fn-linia-hydro { --fn-przycisk-tlo: var(--fn-zolty); --fn-przycisk-tekst: #0e8154; }
.fn .fn-linia-flora { --fn-przycisk-tlo: var(--fn-czern); --fn-przycisk-tekst: var(--fn-krem); }
.fn .fn-linia-zestaw { --fn-przycisk-tlo: var(--fn-roz); --fn-przycisk-tekst: var(--fn-krem); }
.fn .section_product-overview .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 .section_product-overview .product-overview_image-wrapper { align-self: stretch; }
.fn .section_product-overview .product-overview_image { width: 100%; height: 100%; object-fit: cover; }
.fn .fn-punkt { letter-spacing: 0; }
/* Na pomarańczowej Florze tekst jest czarny: pigułki jasne zamiast czarnych 20% (na pomarańczu wychodził brąz). */
.fn .fn-linia-flora .fn-punkt { background: rgb(255 251 247 / 0.3); }
.fn .fn-uwaga { margin: 1rem 0 0; opacity: 0.85; }
.fn .fn-kolo-logo svg { width: 62%; height: auto; }


/* ---------- Etap 4 ---------- */
/* Zapis po kod na start w stopce: błędy pod polem, potwierdzenie w miejscu formularza. */
.fn .fn-zapis-blad { margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--fn-zolty); }
.fn .fn-zapis-sukces { max-width: 30rem; margin: 0; padding: 1rem 1.25rem; border-radius: 0.75rem; background: rgb(255 251 247 / 0.1); font-weight: 600; color: var(--fn-zolty); }
.fn .fn-zapis-sukces:focus { outline: 2px solid var(--fn-zolty); outline-offset: 2px; }
.fn .footer_form [aria-invalid="true"] { outline: 2px solid var(--fn-zolty); outline-offset: 2px; }

/* ---------- Ikony (inc/ikony.php) ---------- */
/* Rząd ikon pod opisem: jak w kopii dwie ilustracje z podpisem kursywą, kreska i cztery okrągłe znaczki. */
.fn .fn-ikony { justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.5rem; color: var(--fn-roz-200); }
.fn .fn-ikona-ilustrowana { display: flex; flex-direction: column; align-items: center; width: 6rem; }
/* Rysunek to maska: kolor bierze się z color, więc pasuje do każdej linii. */
.fn .fn-ilustracja { display: block; width: 5rem; aspect-ratio: 1; background-color: currentColor; -webkit-mask: var(--ikona) center / contain no-repeat; mask: var(--ikona) center / contain no-repeat; }
.fn .fn-ikona-podpis { margin: 0.3rem 0 0; font: italic 700 1.0625rem/1.05 var(--fn-font-naglowki); text-align: center; color: currentColor; }
.fn .fn-ikony .product-benefit-divider { align-self: stretch; height: auto; min-height: 4.5rem; background-color: currentColor; opacity: 0.45; }
.fn .fn-ikony .product-benefit-left-wrapper { align-self: center; color: var(--fn-krem); }
/* Na pomarańczowej Florze jasny róż ginie: ilustracje w kremie. */
.fn .fn-linia-flora .fn-ikony { color: var(--fn-krem); }
.fn .fn-znaczek { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 3.75rem; }
.fn .fn-znaczek-kolo { display: grid; place-items: center; width: 2.85rem; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; }
.fn .fn-znaczek-kolo .fn-glif { width: 1.55rem; height: 1.55rem; }
.fn .fn-znaczek-litery { font: 700 1.15rem/1 var(--fn-font-naglowki); letter-spacing: -0.02em; }
.fn .fn-znaczek-podpis { font: 700 0.6875rem/1.1 var(--fn-font-naglowki); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }

/* Pas z liczbami pod zakupem (jak kalorie i cukier w kopii): opakowania do wyboru i link do składu.
   W kopii blok ma inline-block z marginesami auto, które go nie wyśrodkowują; tu flex w kolumnie. */
.fn .product-bottom-content { display: flex; flex-direction: column; align-items: center; }
.fn .fn-liczby { margin-top: 2.5rem; color: var(--fn-krem); }
.fn .fn-liczba { display: flex; flex-direction: column; align-items: center; min-width: 5rem; }
.fn .fn-liczba-wartosc { font: 700 2.25rem/1 var(--fn-font-naglowki); letter-spacing: -0.01em; white-space: nowrap; }
.fn .fn-liczba-podpis { margin-top: 0.2rem; font: 700 0.75rem/1.1 var(--fn-font-naglowki); letter-spacing: 0.08em; text-transform: uppercase; }
.fn .fn-liczby .product-benefit-divider { background-color: currentColor; opacity: 0.45; }
.fn .fn-liczby-pas { display: flex; margin-top: 1rem; }
.fn .fn-liczby-pas p { display: flex; margin: 0; font: 500 1rem/1 var(--fn-font-tekst); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fn-krem); }
/* Skład i informacje: w tym miejscu podkreślony link jak „See the full nutritional information panel”. */
.fn .product-bottom-content .fn-suplement { width: 100%; margin-top: 0.25rem; border: 0; text-align: left; }
.fn .product-bottom-content .fn-suplement-tytul { justify-content: center; padding: 0.5rem 0; font: 500 1.125rem/1.3 var(--fn-font-tekst); text-decoration: underline; text-underline-offset: 0.2em; color: var(--fn-krem); }
.fn .product-bottom-content .fn-suplement-tytul::after { content: none; }
.fn .product-bottom-content .fn-suplement[open] .fn-suplement-lista { margin-top: 1rem; }

/* Pas haseł na tle zdjęcia: wersaliki z rozstrzeleniem; w środku łuk nad smakiem i rysunek między słowami. */
.fn .fn-pas-tekst { margin: 0; font: 700 clamp(1.25rem, 0.6rem + 1.5vw, 2.125rem)/1.2 var(--fn-font-naglowki); letter-spacing: 0.12em; text-align: center; text-transform: uppercase; color: var(--fn-krem); }
.fn .fn-pas-srodek .fn-pas-tekst { display: flex; flex-direction: column; align-items: center; }
.fn .fn-pas-luk { display: block; width: min(17rem, 100%); height: auto; margin-bottom: -0.2rem; overflow: visible; }
.fn .fn-pas-luk text { fill: currentColor; font: 700 30px var(--fn-font-naglowki); letter-spacing: 0.14em; }
.fn .fn-pas-wiersz { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.fn .fn-pas-ilustracja { width: 3.25rem; color: var(--fn-zolty); }
.fn .fn-pas-spojnik { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--fn-zolty); }
@media (max-width: 767px) {
	.fn .fn-ikony { justify-content: center; }
	.fn .fn-liczba-wartosc { font-size: 1.75rem; }
}
@media (max-width: 479px) {
	.fn .fn-ikony .product-benefit-left-wrapper { flex-wrap: wrap; justify-content: center; }
}
/* Ilustracje przy punktach „Feel Nice to suplement w przyjemnej formie” i znaczki w sekcji korzyści na głównej. */
.fn .fn-ilustracja-punkt { width: 4.25rem; color: var(--fn-roz-200); }
.fn .fn-znaczki-glowna { color: var(--fn-malina); }
.fn .fn-znaczki-glowna .fn-znaczek { width: 4rem; }
@media (max-width: 479px) { .fn .fn-ikony .product-benefit-left-wrapper { border-top-color: rgb(255 251 247 / 0.35); } }
/* Rząd ikon w sekcjach linii na głównej: odstęp od znacznika smaku. */
.fn .home_product_content .fn-ikony { margin-top: 0.5rem; }

/* ---------- Jednakowe marginesy boczne (prośba klienta z 2026-10-13: „wszystkie sekcje marginesy i paddingi od lewej
   i prawej takie same”) ---------- */
/* Kopia miała dwa poziomy: menu, hero, sekcja korzyści i stopka przy 5% od krawędzi, sekcje z container-large (80rem
   na środku) dalej, np. 72 i 144 px przy 1440 px. Teraz każda sekcja ma ten sam margines z obu stron: 5% szerokości,
   a na szerokich ekranach tyle, żeby treść miała najwyżej 100rem (1440 px przy skali 0,9). Procenty liczą się
   od szerokości bloku zawierającego, więc margines stoi tylko na elementach na całą szerokość okna, a ich dzieci tracą
   własne marginesy z kopii. Czytelne kolumny tekstu na środku (strony prawne, wizja) zostają węższe; do krawędzi okna
   wychodzi tylko suwak linii, który pokazuje, że jest co przesunąć.
   W sekcjach dwukolumnowych druga kolumna zaczyna się wszędzie w tym samym miejscu (pół szerokości + 2,5rem). */
:root { --fn-margines: max(5%, (100% - 100rem) / 2); }
.fn .padding-global, .fn .padding-global-4, .fn .navbar5_component,
.fn .product-hero_component, .fn .home_feature_component {
	padding-left: var(--fn-margines);
	padding-right: var(--fn-margines);
}
.fn .container-large { max-width: none; }
/* padding-global jest flexem: dziecko bez szerokości (padding-section-large) zwężało się do treści. */
.fn .padding-global > .padding-section-large { width: 100%; }
.fn .product_hero_content { margin-left: 0; }
.fn .home_feature_content-right { padding-left: 0; }
.fn .home_feature_content-left { max-width: none; margin-right: 0; }
/* Odstęp kolumn 5rem jak w sekcjach linii, więc tekst zaczyna się tam, gdzie ich prawa kolumna (w kopii 2 × 5vw). */
@media (min-width: 992px) {
	.fn .home_feature_content-right { padding-right: 2.5rem; }
	.fn .home_feature_content-left { margin-left: 2.5rem; }
}
/* Strona produktu (prośba klienta z 2026-10-13: „produktów też”): opis i zakup przy lewym marginesie, zdjęcie obok
   w marginesie jako karta z zaokrąglonymi rogami (w kopii szło do krawędzi okna), koło z logo w marginesie
   (w kopii 120% kolumny, wychodziło za lewą krawędź). */
.fn .product-overview_grid { padding-left: var(--fn-margines); padding-right: var(--fn-margines); }
.fn .product-description-content-wrapper { margin-left: 0; margin-right: 0; }
.fn .section_product-overview .product-overview_image { border-radius: 1.5rem; }
@media (min-width: 992px) {
	.fn .product-description-content-wrapper { align-items: flex-start; }
	/* Druga kolumna zaczyna się w tym samym miejscu co w kole z logo i sekcjach linii: pół szerokości + 2,5rem. */
	.fn .product-overview_grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; }
	.fn .section_product_hero .product_hero_content { width: calc(50% - 2.5rem); margin-right: 5rem; }
	.fn .product-header5_product-details { align-self: flex-start; } /* w kopii od 1280 px na środku kolumny */
	.fn .section_product-overview .product-overview_image-wrapper { padding-top: 4rem; padding-bottom: 4rem; }
	.fn .product_ecommerce-product-header-1_component { padding-left: var(--fn-margines); padding-right: var(--fn-margines); }
	.fn .product_ecommerce-product-header-1_content { margin-right: 0; }
	.fn .product_ecommerce-product-header-1_image { max-width: 100%; }
}
@media (max-width: 991px) { .fn .section_product-overview .product-overview_image-wrapper { padding-bottom: 3rem; } }
@media (max-width: 991px) {
	.fn .product_hero_content, .fn .home_feature_content-left { margin-left: 0; margin-right: 0; }
	.fn .product-hero_image-wrapper, .fn .home_feature_content-right { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
	.fn .home_product_content { margin-right: 0; }
	.fn .home_product_image-wrapper { padding-right: 0; }
}

/* ---------- Sekcje na wysokość ekranu (prośba klienta z 2026-10-13: „sekcje do 100vh”) ---------- */
/* Sekcja korzyści, „Nasze linie”, sekcje linii i hero podstron mają co najmniej wysokość okna (hero głównej: własny blok fn-hero), treść na środku
   (hero strony produktu jest niższe, osobny blok niżej).
   svh to wysokość okna przy widocznym pasku adresu na telefonie (vh przed nim dla starszych przeglądarek). Paski z hasłem
   i stopka zostają niskie. Treść wyższa niż okno (np. na małym telefonie) wydłuża sekcję, nic nie jest ucinane. */
.fn .section_product_hero, .fn .section_about_hero, .fn .section_product_range, .fn .section_home_product {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
}
/* Hero strony produktu: pole z treścią i saszetką wypełnia ekran. */
.fn .section_product_hero > .product-hero_component { flex: 1 0 auto; }
.fn .section_about_hero > .padding-global, .fn .section_product_range > .padding-global { width: 100%; }
/* Na stronie produktu pierwsza sekcja linii ma u góry przekrzywiony pasek z hasłem: treść na środku pod nim. */
.fn .section_home_product > .padding-global { width: 100%; margin-top: auto; margin-bottom: auto; }
/* Pasek środkiem dokładnie na granicy z sekcją wyżej (prośba klienta z 2026-10-13), na każdym ekranie: w górę o połowę
   własnej wysokości (translate w % liczy się od niej), obrót -2° z kopii wokół środka. Sam robi skośne przejście,
   więc malinowy pas kopii pod nim (wystawał spod paska) jest schowany. */
.fn .section_home_product > .verticle_product_slider_banner_marquee { z-index: 2; margin-top: 0; translate: 0 -50%; }
/* W kopii kontener sekcji linii ma overflow: hidden i ucinał górną połowę paska; przycinamy tylko w poziomie. */
.fn .vertical-product-slider_content { overflow: visible; overflow-x: clip; }
.fn .section_home_product > .background-strip { display: none; }
@media (min-width: 768px) { .fn .section_home_product .padding-section-large { padding-top: 5rem; padding-bottom: 5rem; } }
.fn .home_feature_content-right { height: 100vh; height: 100svh; }
/* Telefon i tablet: kolumna zdjęć w sekcji korzyści dostaje tyle wysokości, ile zostaje po tekście (ok. 41rem
   z odstępami), ale nie mniej niż 14rem. */
@media (max-width: 991px) {
	.fn .home_feature_component { row-gap: 2rem; padding-bottom: 3rem; }
	.fn .home_feature_content-right { height: max(14rem, 100vh - 41rem); height: max(14rem, 100svh - 41rem); }
	.fn .product-hero_component { justify-content: center; }
	.fn .section_home_feature { min-height: 100vh; min-height: 100svh; }
}
/* Na tablecie tekst sekcji korzyści jest niższy (szerszy wiersz), więc zdjęcia dostają więcej. */
@media (min-width: 768px) and (max-width: 991px) {
	.fn .home_feature_content-right { height: max(14rem, 100vh - 33.5rem); height: max(14rem, 100svh - 33.5rem); }
}

/* ---------- „Nasze linie”: suwak z kartami linii ze sklepu (prośby klienta z 2026-10-13) ---------- */
/* Karty z sklep-widoki.css w slajdach Swipera. Odstęp między kartami daje Swiper (spaceBetween w strona.js), nie gap
   z kopii, bo Swiper go nie liczy i ostatnia karta nie dojeżdżała do krawędzi. Karta zajmuje ok. 40% szerokości treści,
   więc widać, że jest co przesunąć; na telefonie prawie cały ekran. */
.fn .swiper-wrapper.is-slider-main { gap: 0; }
.fn .swiper-slide.is-slider-main { width: min(40rem, 82vw); height: auto; }
.fn .swiper-slide.is-slider-main > .fn-karta-linii { height: 100%; }
/* „Przesuń, żeby zobaczyć” jest przyciskiem: bez tła i ramki, strzałka odjeżdża w prawo po najechaniu. */
.fn .fn-suwak-dalej { padding: 0.5rem 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.fn .fn-suwak-dalej .productrange_arrow-icon { transition: translate 0.2s ease; }
.fn .fn-suwak-dalej:hover .productrange_arrow-icon { translate: 0.35rem 0; }
.fn .fn-suwak-dalej:hover .text-size-tiny { text-decoration: underline; text-underline-offset: 0.2em; }
/* Nagłówek pod menu, które stoi nad stroną (np. po „Poznaj linie” → #linie): odstęp od góry większy niż wysokość menu.
   Karta i saszetka rosną z wysokością okna, żeby suwak wypełniał ekran: karta do 34rem, saszetka do 26rem
   (w sklepie 24 i 19rem). */
@media (min-width: 992px) {
	.fn .section_product_range .padding-section-large { padding-top: 7rem; padding-bottom: 3rem; }
	.fn .section_product_range .fn-karta-linii { min-height: clamp(24rem, 100vh - 22rem, 34rem); min-height: clamp(24rem, 100svh - 22rem, 34rem); }
	.fn .section_product_range .fn-karta-linii-saszetka { height: clamp(16rem, 100vh - 30rem, 26rem); height: clamp(16rem, 100svh - 30rem, 26rem); }
}
@media (max-width: 767px) { .fn .section_product_range .padding-section-large { padding-top: 6rem; } }

/* ---------- Hero strony produktu: pół ekranu, saszetka ze zdjęciami (prośba klienta z 2026-10-13: „niższe o połowę + fotki”) ---------- */
/* Wysokość: połowa okna, nie mniej niż 26rem (--fn-hero). Z lewej nazwa i smak, z prawej saszetka, a za nią dwie
   przechylone karty ze zdjęciami jak karta za saszetką w sekcjach linii. Panel zakupu wchodzi wyżej na ekran. */
.fn .section_product_hero { --fn-hero: max(26rem, 50vh); --fn-hero: max(26rem, 50svh); min-height: var(--fn-hero); }
.fn .section_product_hero .product-hero_image-wrapper { position: relative; isolation: isolate; }
.fn .fn-hero-fotki { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fn .fn-hero-fotka {
	position: absolute; top: 50%; left: 50%; width: auto; aspect-ratio: 4 / 5; object-fit: cover;
	border: 0.3rem solid var(--fn-krem); border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgb(22 8 14 / 0.3);
}
.fn .fn-hero-fotka--1 { translate: -105% -46%; rotate: -7deg; }
.fn .fn-hero-fotka--2 { translate: 5% -54%; rotate: 6deg; }
@media (min-width: 992px) {
	.fn .section_product_hero .product-hero_component { align-items: center; padding-top: 7rem; padding-bottom: 2rem; }
	.fn .section_product_hero .product_hero_content { margin-bottom: 0; }
	.fn .section_product_hero .product-hero_component > .product-hero_image-wrapper { align-self: stretch; align-items: center; padding-top: 0; }
	.fn .section_product_hero .product_hero_image { height: calc(var(--fn-hero) - 8rem); margin-bottom: 0; }
	.fn .section_product_hero .product_hero_image[src*="zestaw-packshot"] { height: calc(var(--fn-hero) - 13rem); }
	.fn .fn-hero-fotka { height: calc(var(--fn-hero) - 11rem); }
}
/* Telefon i tablet: zdjęcia z saszetką nad nazwą (na tablecie pod nią, jak w kopii), hero ok. 60% ekranu. */
@media (max-width: 991px) {
	.fn .section_product_hero { min-height: 0; }
	.fn .section_product_hero .product-hero_component { padding-bottom: 2.5rem; }
	.fn .section_product_hero .product-hero_image-wrapper { justify-content: center; align-items: center; min-height: 17rem; }
	.fn .section_product_hero .product_hero_image { height: 16rem; margin-top: 0; }
	.fn .section_product_hero .product_hero_image[src*="zestaw-packshot"] { width: auto; height: 12rem; }
	.fn .fn-hero-fotka { height: 12rem; }
}

/* Strony WooCommerce mają na body klasę woocommerce, a jej .woocommerce a.button (szary, mały) przykrywał „Kup teraz”
   w sekcjach linii na stronie produktu. Ten sam wygląd co na głównej, kolory przycisków linii z --fn-przycisk-*. */
.fn.woocommerce .section_home_product a.button.w-button {
	padding: 0.75rem 1.5rem 1rem; border-radius: 0.5rem; font-size: 1.5rem; font-weight: 500; line-height: 1.2;
	background-color: var(--fn-przycisk-tlo); color: var(--fn-przycisk-tekst);
}

/* Smak i linia na stronie produktu (prośba klienta z 2026-10-13: „fajniej”): pigułki jak w menu (czerń 20% z rozmyciem,
   pełne zaokrąglenie), podpis wersalikami jak w pasie z liczbami. Na pomarańczowej Florze jasne, jak .fn-punkt. */
.fn .fn-cechy { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.fn .fn-cecha { display: inline-flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 1.1rem 0.65rem; border-radius: 6.25rem; background: rgb(0 0 0 / 0.2); -webkit-backdrop-filter: blur(56px); backdrop-filter: blur(56px); }
.fn .fn-cecha dt { font: 700 0.75rem/1 var(--fn-font-naglowki); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.fn .fn-cecha dd { margin: 0; font: 600 1.125rem/1.2 var(--fn-font-naglowki); }
.fn .fn-linia-flora .fn-cecha { background: rgb(255 251 247 / 0.3); }
@media (max-width: 767px) { .fn .fn-cechy { justify-content: center; } }

/* Pasek przewijania w stylu strony (prośba klienta z 2026-10-13: „glassy”): półprzezroczysty kremowy suwak-pigułka
   z jasnym obrysem na przezroczystym torze, jak szklane pigułki menu; dotyczy strony, szuflady koszyka i menu.
   Chrome i Safari biorą ::-webkit-scrollbar (zaokrąglenie i odstęp od krawędzi przez przezroczystą ramkę), Firefox,
   który nie zna tych pseudo-elementów, scrollbar-color. Chrome ignorowałby ::-webkit-scrollbar przy scrollbar-color. */
::-webkit-scrollbar { width: 0.8rem; height: 0.8rem; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
	border: 0.2rem solid transparent; border-radius: 6.25rem;
	background: rgb(255 251 247 / 0.32) padding-box; box-shadow: inset 0 0 0 1px rgb(255 251 247 / 0.28);
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(255 251 247 / 0.5); }
::-webkit-scrollbar-thumb:active { background-color: rgb(255 251 247 / 0.62); }
@supports not selector(::-webkit-scrollbar) {
	* { scrollbar-color: rgb(255 251 247 / 0.4) transparent; scrollbar-width: thin; }
}