/* Telefon i tablet (do 991 px, tam, gdzie kopia zwija menu): pasek, menu, produkty i zdjęcia.
   Prośba klienta z 2026-10-13: „pozycjonowanie elementów fotek, produktów, wysokością, widocznością, lekki redesign
   pod mobile, topbar kompletnie mobilnie redesign”. Plik ładuje się ostatni (inc/szablon.php), komputer się nie zmienia. */

/* ---------- Pasek: pływająca wyspa ze szkła ----------
   Szkło (przezroczysta malina z rozmyciem) zostaje z prośby klienta z 2026-10-13, zmienia się kształt i zachowanie.
   Zamiast paska na całą szerokość z menu rozwijanym pod spodem: zaokrąglona wyspa przy górnej krawędzi (logo, koszyk,
   żółty przycisk „Menu”), która chowa się przy przewijaniu w dół i wraca przy przewijaniu w górę (strona.js). Logo stoi
   na marginesie bocznym treści (--fn-margines), więc wyspa jest o --fn-wyspa szersza z każdej strony. */
.fn .fn-mmenu { display: none; }
@media (max-width: 991px) {
	.fn { --fn-wyspa: 0.625rem; --fn-wyspa-gora: max(0.625rem, env(safe-area-inset-top)); --fn-wyspa-wysokosc: 3.75rem; }
	.fn .navbar5_component {
		top: 0; min-height: 0;
		padding: var(--fn-wyspa-gora) calc(var(--fn-margines) - var(--fn-wyspa)) 0;
		background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
		pointer-events: none; transition: translate 0.35s ease;
	}
	.fn .navbar5_container {
		pointer-events: auto; align-items: center; gap: 0.375rem;
		height: var(--fn-wyspa-wysokosc); padding: 0 0.4375rem 0 var(--fn-wyspa);
		border: 1px solid rgb(255 251 247 / 0.16); border-radius: 1.125rem;
		background: rgb(94 18 53 / 0.62); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
		box-shadow: 0 0.75rem 2rem rgb(22 8 14 / 0.22);
	}
	/* Schowana przy przewijaniu w dół; z fokusem z klawiatury w środku zostaje (fokus po dotknięciu jej nie trzyma). */
	.fn-pasek-schowany .fn .navbar5_component { translate: 0 calc(-100% - 1.5rem); }
	.fn-pasek-schowany .fn .navbar5_component:has(:focus-visible) { translate: none; }
	.fn .navbar5_component .navbar5_logo-link { padding: 0; }
	.fn .fn-logo { height: 2.4rem; }

	/* Koszyk: torba z licznikiem w żółtym kółku, pole dotyku 44 px. */
	.fn .fn-koszyk-mobile { justify-content: center; min-width: 2.75rem; height: 2.75rem; margin: 0 0 0 auto; padding: 0 0.5rem; border-radius: 0.875rem; }
	.fn .fn-koszyk-mobile svg { width: 1.6rem; height: 1.6rem; }

	/* „Menu”: żółta pigułka z napisem i dwiema kreskami, które przy otwartym menu składają się w krzyżyk. */
	.fn .navbar5_component .navbar5_menu-button {
		display: inline-flex; align-items: center; gap: 0.6rem; float: none;
		height: 2.75rem; padding: 0 0.95rem 0 1.05rem; border-radius: 0.875rem;
		background: var(--fn-zolty); color: var(--fn-malina-900);
		font: 700 1.0625rem/1 var(--fn-font-naglowki); letter-spacing: 0.01em;
		transition: background-color 0.2s ease;
	}
	.fn .navbar5_component .navbar5_menu-button.w--open { background: var(--fn-krem); color: var(--fn-malina-900); }
	.fn .navbar5_menu-button .menu-icon { position: relative; display: block; width: 1.125rem; height: 0.75rem; margin: 0; padding: 0; }
	.fn .navbar5_menu-button .menu-icon_line-top, .fn .navbar5_menu-button .menu-icon_line-bottom {
		position: absolute; left: 0; width: 100%; height: 2px; margin: 0; padding: 0; border-radius: 2px; background: currentColor;
		transition: top 0.25s ease, rotate 0.25s ease;
	}
	.fn .navbar5_menu-button .menu-icon_line-top { top: 0; }
	.fn .navbar5_menu-button .menu-icon_line-bottom { top: calc(100% - 2px); }
	.fn .navbar5_menu-button .menu-icon_line-middle { display: none; }
	.fn .navbar5_menu-button.w--open .menu-icon_line-top { top: calc(50% - 1px); rotate: 45deg; }
	.fn .navbar5_menu-button.w--open .menu-icon_line-bottom { top: calc(50% - 1px); rotate: -45deg; }

	/* ---------- Menu na cały ekran pod wyspą ----------
	   Duże linki w kroju nagłówków ze strzałką, pod nimi kafle linii w kolorach i tłach linii (jak karty w sklepie)
	   z saszetką w rogu, na dole koszyk i kontakt. Strona pod spodem nie przewija się (html.fn-menu-otwarte). */
	html.fn-menu-otwarte { overflow: hidden; }
	.fn .fn-mmenu:not([hidden]) {
		display: block; position: fixed; inset: 0; z-index: 99; overflow-y: auto; overscroll-behavior: contain;
		background: var(--fn-malina-800); color: var(--fn-krem);
		opacity: 0; transition: opacity 0.3s ease;
	}
	.fn .fn-mmenu.jest-otwarte { opacity: 1; }
	.fn .fn-mmenu-wnetrze {
		display: flex; flex-direction: column; min-height: 100%;
		padding: calc(var(--fn-wyspa-gora) + var(--fn-wyspa-wysokosc) + 1rem) var(--fn-margines) calc(1.5rem + env(safe-area-inset-bottom));
	}
	.fn .fn-mmenu-linki { margin: 0; padding: 0; list-style: none; }
	.fn .fn-mmenu-linki li, .fn .fn-mmenu-podpis, .fn .fn-mmenu-linie, .fn .fn-mmenu-dol {
		opacity: 0; translate: 0 0.75rem; transition: opacity 0.35s ease, translate 0.35s ease;
	}
	.fn .fn-mmenu-linki li { transition-delay: calc(var(--i, 0) * 40ms + 50ms); }
	.fn .fn-mmenu-podpis, .fn .fn-mmenu-linie { transition-delay: 220ms; }
	.fn .fn-mmenu-dol { transition-delay: 280ms; }
	.fn .fn-mmenu.jest-otwarte :is(.fn-mmenu-linki li, .fn-mmenu-podpis, .fn-mmenu-linie, .fn-mmenu-dol) { opacity: 1; translate: none; }
	.fn .fn-mmenu-link {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		padding: 0.65rem 0 0.75rem; border-bottom: 1px solid rgb(255 251 247 / 0.14);
		color: var(--fn-krem); font: 700 clamp(1.875rem, 7.6vw, 2.75rem)/1.05 var(--fn-font-naglowki); letter-spacing: -0.035em; text-decoration: none;
	}
	.fn .fn-mmenu-link svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--fn-zolty); transition: translate 0.2s ease; }
	.fn .fn-mmenu-link:active svg { translate: 0.25rem 0; }
	.fn .fn-mmenu-link[aria-current="page"] { color: var(--fn-zolty); }
	.fn .fn-mmenu-podpis { margin: 1.75rem 0 0.75rem; font: 700 0.8125rem/1 var(--fn-font-naglowki); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fn-roz-300); }
	.fn .fn-mmenu-linie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
	.fn .fn-mmenu-linia {
		position: relative; isolation: isolate; overflow: hidden;
		display: flex; flex-direction: column; gap: 0.35rem; height: 100%; min-height: 8.5rem; padding: 0.875rem 0.875rem 1rem;
		border-radius: 1rem; background: var(--fn-linia-kolor) var(--fn-linia-tlo) center / cover;
		color: var(--fn-linia-tekst, var(--fn-krem)); text-decoration: none;
	}
	/* Zestaw ma w sklepie tło w kolorze tła menu: tu róż przycisków zestawu, żeby kafel nie zlewał się z menu. */
	.fn .fn-mmenu-linia.fn-linia-zestaw { --fn-linia-kolor: var(--fn-malina-600); }
	.fn .fn-mmenu-linia-nazwa { max-width: 80%; font: 700 1.625rem/0.95 var(--fn-font-naglowki); letter-spacing: -0.035em; }
	.fn .fn-mmenu-linia-opis { max-width: 62%; font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
	.fn .fn-mmenu-linia-obraz { position: absolute; z-index: -1; right: -0.5rem; bottom: -2.5rem; line-height: 0; }
	.fn .fn-mmenu-linia-saszetka { display: block; width: auto; height: 8.5rem; rotate: 16deg; filter: drop-shadow(0 0.75rem 1rem rgb(22 8 14 / 0.3)); }
	.fn .fn-linia-zestaw .fn-mmenu-linia-obraz { right: -0.75rem; bottom: -0.75rem; }
	.fn .fn-linia-zestaw .fn-mmenu-linia-saszetka { height: 5rem; rotate: 8deg; }
	.fn .fn-mmenu-dol { display: grid; gap: 1rem; margin-top: auto; padding-top: 1.75rem; }
	.fn .fn-mmenu-koszyk {
		display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 1rem 1.25rem; border-radius: 0.875rem;
		background: var(--fn-zolty); color: var(--fn-malina-900); font: 700 1.3125rem/1 var(--fn-font-naglowki); text-decoration: none;
	}
	.fn .fn-mmenu-koszyk .fn-koszyk-liczba { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: 6.25rem; background: var(--fn-malina); color: var(--fn-krem); font-size: 1rem; }
	.fn .fn-mmenu-kontakt { margin: 0; font-size: 0.9375rem; color: rgb(255 251 247 / 0.85); }
	.fn .fn-mmenu-kontakt a { color: var(--fn-zolty); }
}
/* Niski ekran (np. iPhone SE): gęściej, żeby menu z koszykiem mieściło się bez przewijania. */
@media (max-width: 991px) and (max-height: 700px) {
	.fn .fn-mmenu-link { padding: 0.5rem 0 0.6rem; }
	.fn .fn-mmenu-podpis { margin-top: 1.25rem; }
	.fn .fn-mmenu-linia { min-height: 7.25rem; }
	.fn .fn-mmenu-dol { padding-top: 1.25rem; }
}
/* Tablet: kafle linii w jednym rzędzie. */
@media (min-width: 640px) and (max-width: 991px) {
	.fn .fn-mmenu-linie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
	.fn .navbar5_component, .fn .fn-mmenu:not([hidden]), .fn .fn-mmenu-linki li, .fn .fn-mmenu-podpis, .fn .fn-mmenu-linie, .fn .fn-mmenu-dol { transition: none; }
	.fn .fn-mmenu-linki li, .fn .fn-mmenu-podpis, .fn .fn-mmenu-linie, .fn .fn-mmenu-dol { translate: none; }
}

/* ---------- Sekcje linii (główna, strona produktu, „Dlaczego jelly i mus?”) ----------
   Na telefonie saszetka była pod tekstem i przyciskiem, więc przy nazwie linii nie było widać produktu, a na niskim
   ekranie (iPhone SE) wychodziła za dół. Teraz saszetka jest na górze, nad nazwą, a pole saszetki dostaje to, co zostaje
   z okna po tekście (ok. 28rem), od 15 do 30rem: saszetka, nazwa i „Kup teraz” mieszczą się na jednym ekranie.
   Saszetka stoi bliżej prawej krawędzi, a zdjęcie linii na karcie wystaje zza niej z lewej (jak na komputerze).
   Cztery okrągłe znaczki są w każdej sekcji takie same (i w sekcji nad nimi), więc na telefonie zostają tylko
   ilustracje formy i smaku linii; znaczki są dalej na stronie produktu przy zakupie. */
@media (max-width: 767px) {
	.fn .section_home_product .padding-section-large { padding-top: 2.5rem; padding-bottom: 2rem; }
	.fn .section_home_product .home_product_component { row-gap: 1.25rem; }
	.fn .section_home_product .home_product_image-wrapper {
		order: -1; align-self: stretch; justify-content: flex-end; max-height: none; padding: 0 9% 0 0;
		height: clamp(15rem, 100vh - 28rem, 30rem); height: clamp(15rem, 100svh - 28rem, 30rem);
	}
	/* Zestaw: nazwa w dwóch wierszach, więc pole niższe (szeroki packshot i tak wypełnia szerokość). */
	.fn .section_home_product.fn-linia-zestaw .home_product_image-wrapper {
		justify-content: center; padding: 0;
		height: clamp(12rem, 100vh - 33rem, 28rem); height: clamp(12rem, 100svh - 33rem, 28rem);
	}
	/* Na stronie produktu pierwsza sekcja ma u góry pasek z hasłem (ok. 3,5rem w sekcji): pole o tyle niższe. */
	.fn .section_home_product:has(.verticle_product_slider_banner_marquee) .home_product_image-wrapper {
		height: clamp(15rem, 100vh - 32rem, 26rem); height: clamp(15rem, 100svh - 32rem, 26rem);
	}
	.fn .section_home_product .home_product_image { width: auto; max-width: 100%; height: 100%; aspect-ratio: auto; }
	.fn .section_home_product.fn-linia-zestaw .home_product_image { width: 100%; height: auto; max-height: 100%; }
	.fn .section_home_product .fn-ikony { margin-bottom: 0; }
	.fn .section_home_product .fn-ikony .product-benefit-divider, .fn .section_home_product .fn-ikony .product-benefit-left-wrapper { display: none; }
	/* Zdjęcie linii na karcie za saszetką: w polu, przy lewym dolnym rogu saszetki (wcześniej wychodziło za ekran). */
	.fn .section_home_product .fn-linia-zdjecie { left: 0; bottom: 8%; width: 60%; }
	.fn .section_home_product.fn-linia-zestaw .fn-linia-zdjecie { left: 2%; bottom: 0; width: 72%; }
}
/* „Jak stosować” ma te same sekcje ze zdjęciem marki zamiast saszetki: zdjęcie też nad tytułem, ale pole na wysokość
   zdjęcia (4:5), które dostaje to, co zostaje z okna po tytule i tekście (ok. 21rem), od 14 do 26rem. */
@media (max-width: 767px) {
	.fn .section_home_product.fn-sposob .home_product_image-wrapper { justify-content: center; height: auto; padding: 0.5rem 0; }
	.fn .fn-sposob .fn-sposob-img { width: auto; max-width: 88%; height: clamp(14rem, 100vh - 21rem, 26rem); height: clamp(14rem, 100svh - 21rem, 26rem); }
}

/* ---------- Hero strony produktu ----------
   Saszetka ze zdjęciami i nazwa zajmowały ok. 550 px, a zakup zaczynał się dopiero w drugim ekranie. Niższe zdjęcia
   i saszetka, mniej miejsca pod nazwą: hero ok. 460 px, karty ze zdjęciami dalej wystają zza saszetki z obu stron. */
@media (max-width: 767px) {
	.fn .section_product_hero .product-hero_component { padding-top: 5.5rem; padding-bottom: 1.75rem; }
	.fn .section_product_hero .product-hero_image-wrapper { min-height: 14.5rem; }
	.fn .section_product_hero .product_hero_image { height: 14rem; }
	.fn .section_product_hero .product_hero_image[src*="zestaw-packshot"] { height: 10.5rem; }
	.fn .section_product_hero .fn-hero-fotka { height: 10.5rem; }
	.fn .section_product_hero .product_hero_content .margin-bottom { margin-bottom: 0.25rem; }
	.fn .section_product_hero .product_hero_content h3 { margin-top: 0.5rem; margin-bottom: 0; }
}

/* ---------- Karty linii w sklepie i w pustym koszyku ----------
   Na wąskim telefonie karta była pionowa (saszetka nad tekstem, ok. 480 px), więc na ekranie mieściła się jedna linia.
   Teraz jak na tablecie i komputerze: saszetka z lewej, tekst, cena i przycisk z prawej, ok. 250 px na kartę, więc
   na iPhonie SE widać prawie trzy linie naraz. Karty w suwaku „Nasze linie” zostają pionowe (tam saszetka jest pokazem). */
@media (max-width: 479px) {
	.fn .st-commerce ul.products, .fn .fn-karty-linii { gap: 0.875rem; }
	.fn .st-commerce ul.products li.product.fn-karta-linii, .fn .fn-karty-linii .fn-karta-linii {
		grid-template-columns: 7.25rem minmax(0, 1fr); align-items: center; gap: 1rem;
		padding: 1.25rem 1.25rem 1.25rem 0.75rem; text-align: left;
	}
	.fn .st-commerce ul.products li.product a img.fn-karta-linii-saszetka, .fn .fn-karty-linii .fn-karta-linii-saszetka { height: 11rem; }
	.fn .st-commerce ul.products li.product.fn-linia-zestaw a img.fn-karta-linii-saszetka, .fn .fn-karty-linii .fn-linia-zestaw .fn-karta-linii-saszetka { width: 100%; height: auto; }
	.fn .st-commerce .fn-karta-linii-nazwa, .fn .fn-karty-linii .fn-karta-linii-nazwa { font-size: 2.125rem; }
	.fn .st-commerce .fn-karta-linii-opis, .fn .fn-karty-linii .fn-karta-linii-opis { margin: 0.4rem 0 0.35rem; font-size: 1rem; }
	.fn .st-commerce .fn-karta-linii-smak, .fn .fn-karty-linii .fn-karta-linii-smak { margin: 0 0 0.75rem; font-size: 0.875rem; }
	.fn .st-commerce .fn-karta-linii-dol, .fn .fn-karty-linii .fn-karta-linii-dol { justify-content: flex-start; gap: 0.5rem 0.75rem; }
	.fn .st-commerce .fn-karta-linii-cena, .fn .fn-karty-linii .fn-karta-linii-cena { font-size: 1.0625rem; }
	.fn .st-commerce .fn-karta-linii .fn-przycisk-linii, .fn .fn-karty-linii .fn-przycisk-linii { padding: 0.6rem 1rem 0.7rem; font-size: 1.0625rem; }
}

/* ---------- Główna na telefonie (prośba klienta z 2026-10-14: „główną pod mobilkę dostosuj”) ----------
   Dopracowanie zaakceptowanego układu z 2026-10-13 bez zmian w strukturze strony; komputer i tablet bez zmian. */
@media (max-width: 767px) {
	/* Hero z oddechem (prośba klienta z 2026-10-14: „hero za bardzo zakleszczone”): przycisk stał 5 px nad paskiem haseł,
	   10 px pod opisem. Na pierwszym ekranie scena, hasło, opis i przycisk z odstępami, pasek z hasłami tuż pod ekranem.
	   Scena dostaje to, co zostaje z okna po menu, tekście i odstępach (ok. 30,5rem), najmniej 14rem. */
	.fn .fn-hero { row-gap: 0; align-content: start; }
	.fn .fn-hero-scena { height: max(14rem, 100vh - 30.5rem); height: max(14rem, 100svh - 30.5rem); margin-bottom: 1.5rem; }
	.fn .fn-hero-haslo { margin-bottom: 1rem; }
	.fn .fn-hero-opis { max-width: 21rem; margin: 0 auto 1.75rem; }
	.fn .fn-hero-tresc { padding-bottom: 2.5rem; }
	.fn .fn-hero-przycisk { display: inline-block; } /* jako inline jego padding nachodził na odstępy nad i pod nim */
	/* Pasek pod hero: dwa wiersze łamane po kropkach, mniejsze rozstrzelenie (było samotne „MUS” w osobnym wierszu). */
	.fn .fn-hero .hero-bottom-strip-wrapper { max-width: 21rem; margin-inline: auto; row-gap: 0.4rem; }
	.fn .fn-hero .hero-bottom-strip-wrapper h5 { font-size: 0.8125rem; letter-spacing: 0.05em; line-height: 1.35; text-wrap: balance; }
	/* Naklejki w sekcji korzyści: zwarta kępka zachodzących na siebie naklejek zamiast trzech pól po 140 px łamanych 2 + 1. */
	.fn .home_feature_content_left_benefit-wrapper { flex-wrap: nowrap; gap: 0; margin-block: 0.25rem 0.5rem; }
	.fn .home_feature_benefit-image { width: auto; }
	.fn .home_feature_benefit-image img { height: 3.75rem; }
	.fn .home_feature_benefit-image:nth-child(1) { rotate: -8deg; }
	.fn .home_feature_benefit-image:nth-child(2) { margin-left: -0.6rem; rotate: 7deg; translate: 0 0.4rem; position: relative; z-index: 1; }
	.fn .home_feature_benefit-image:nth-child(3) { margin-left: -0.6rem; rotate: -4deg; }
	/* „Nasze linie”: odstęp od góry był wysokością menu na wypadek skoku z „Poznaj linie” (#linie); to robi teraz
	   scroll-margin-top, a sekcja ma zwykły odstęp. */
	.fn .section_product_range .padding-section-large { padding-top: 3.5rem; }
	.fn #linie { scroll-margin-top: calc(var(--fn-wyspa-gora) + var(--fn-wyspa-wysokosc)); }
	/* Sekcje linii: zdjęcie linii i saszetka jako jedna kompozycja z Codex na środku (produkt.css, .fn-ze-scena). */

	/* Sekcja korzyści: zdjęcia jako dwa pasy na całą szerokość, przesuwające się powoli w przeciwne strony (było: dwie
	   kolumny w okienku, ucięte u góry), większy nagłówek krojem nagłówków jak na stronach o marce. */
	.fn .home_feature_content-right { height: auto; margin-inline: calc(-1 * var(--fn-margines)); padding: 0; overflow: hidden; }
	.fn .home_feature_images-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0.75rem; }
	.fn .home_feature_image-list-left, .fn .home_feature_image-list-right {
		display: flex; gap: 0.75rem; width: max-content; height: auto; margin: 0; padding-inline: 0.75rem;
		align-self: auto; align-items: stretch; transform: none; /* w kopii kolumny miały margin-top: -120% i przesunięcie w górę */
	}
	.fn .home_feature_image-list { display: flex; gap: 0.75rem; width: auto; height: auto; }
	.fn .home_feature_image-wrapper { flex: none; width: 8.75rem; padding-top: 0; aspect-ratio: 4 / 5; border-radius: 1.25rem; }
	.fn .home_feature_content-left h3 { font: 800 clamp(2.25rem, 10vw, 2.875rem)/0.98 var(--fn-font-naglowki); letter-spacing: -0.03em; text-wrap: balance; }

	/* Karty linii w sklepie na wąskim telefonie (poziome): kolumna otwartego kartonika szersza niż dawna saszetka. */
	.fn .st-commerce ul.products li.product.fn-karta-linii, .fn .fn-karty-linii .fn-karta-linii { grid-template-columns: 9.5rem minmax(0, 1fr); }

	/* Koszyk zjeżdża z góry (prośba klienta z 2026-10-14): panel na całą szerokość z zaokrąglonym dołem, najwyżej 88%
	   ekranu, lista przewija się w środku. */
	.fn-szuflada-panel {
		top: 0; right: 0; bottom: auto; left: 0; width: 100%; max-height: 88vh; max-height: 88svh;
		padding-top: env(safe-area-inset-top); border-left: 0; border-bottom: 1px solid rgb(255 251 247 / 0.2);
		border-radius: 0 0 1.75rem 1.75rem; box-shadow: 0 1.5rem 3rem rgb(22 8 14 / 0.45); transform: translateY(-100%);
	}
	.fn-szuflada.jest-otwarta .fn-szuflada-panel { transform: translateY(0); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.fn .home_feature_image-list-left, .fn .home_feature_image-list-right { animation: fn-pas-zdjec 45s ease-in-out infinite alternate; }
	.fn .home_feature_image-list-right { animation-direction: alternate-reverse; }
}
@keyframes fn-pas-zdjec { from { translate: 0 0; } to { translate: calc(100vw - 100%) 0; } }