/*
 * zielnik — makieta sklepu z kosmetykami naturalnymi.
 *
 * 1. **Miękko, nie słodko.** Owsiane tło, ciemna zieleń na tekst i wypełnienia, trzy pastelowe
 *    kafle (szałwia, masło, róża) i jeden chłodny (niebo) — każda kategoria ma swój kolor tła.
 *    Zaokrąglone karty i przyciski-pigułki; to odróżnia ten sklep od kanciastego NIDO i od salonu.
 * 2. **BEM.** Blok, element, modyfikator; stany jako modyfikatory (`szuflada--otwarta`).
 * 3. **Kolory tylko ze zmiennych.** Pastele to wyłącznie wypełnienia — tekst na nich jest zawsze
 *    grafitowy albo leśny (min. 5:1). `--ziemia` to tekst promocji (5,9:1 na owsie).
 * 4. **Treść widać bez JavaScriptu.** Stan początkowy animacji i schowane rutyny ustawia klasa `js`.
 */

/* ——— 01 · Zmienne i reset ———————————————————————————————————————————— */

:root {
	--owies: #F3F0E6;
	--papier: #FFFFFF;
	--szalwia: #DDE5D3;
	--maslo: #F1DE93;
	--maslo-jasne: #F8EFC9;
	--roza: #E9C9C1;
	--niebo: #D5E2E6;
	--grafit: #1E2620;
	--przygas: #55604F;
	--kreska: #DCD8CA;
	--las: #23452F;
	--las-ciemny: #1C2A21;
	--ziemia: #8A4B2E;
	--noc-przygas: #B9C4B3;

	--naglowki: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--kontener: 1280px;
	--margines: clamp(16px, 4vw, 40px);
	--naglowek-h: 72px;
	--promien: 20px;
	--promien-maly: 12px;
	--krzywa: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--naglowek-h) + 16px);
}

/* Safari na iOS ignoruje overflow-x:hidden przy przewijaniu palcem; clip nie psuje sticky. */
html, body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--owies);
	color: var(--grafit);
	font: 400 16px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.sr {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.przeskocz {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	padding: 10px 16px; border-radius: 999px;
	background: var(--las); color: var(--papier); text-decoration: none;
}

.przeskocz:focus { top: 12px; }

.ikona {
	width: 22px; height: 22px; flex-shrink: 0;
	fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ——— 02 · Typografia ————————————————————————————————————————————————— */

.tytul {
	font-family: var(--naglowki);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: normal;
	line-height: 1.08;
}

.tytul--hero { font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 700; letter-spacing: -0.035em; }
.tytul--strona { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.tytul--sekcja { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.tytul--produkt { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.tytul--pod { font-size: 1.35rem; }

/* Podkreślenie masłem pod fragmentem nagłówka — jedyna „ozdoba” w typografii. */
.tytul__wyroznienie {
	background: linear-gradient(transparent 62%, var(--maslo) 62%, var(--maslo) 92%, transparent 92%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.etykieta {
	display: inline-block;
	margin-bottom: 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--papier);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--las);
}

.lid { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; color: var(--przygas); max-width: 58ch; }

/* ——— 03 · Układ ——————————————————————————————————————————————————————— */

.kontener { width: 100%; max-width: var(--kontener); margin-inline: auto; padding-inline: var(--margines); }
.kontener--waski { max-width: 820px; }

.sekcja { padding-block: clamp(56px, 8vw, 104px); }
.sekcja--szalwia { background: var(--szalwia); }
.sekcja--maslo { background: var(--maslo-jasne); }
.sekcja--roza { background: var(--roza); }
.sekcja--ciemna { background: var(--las-ciemny); color: var(--owies); }
.sekcja--sklep, .sekcja--rutyna, .sekcja--koszyk, .sekcja--kasa { padding-top: clamp(24px, 4vw, 40px); }

.sekcja--szalwia .etykieta, .sekcja--maslo .etykieta, .sekcja--roza .etykieta { background: var(--owies); }

.naglowek-sekcji { margin-bottom: clamp(28px, 4vw, 44px); }
.naglowek-sekcji--miedzy { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.naglowek-sekcji--srodek { text-align: center; }

.naglowek-strony { padding-block: clamp(28px, 4vw, 48px); }
.naglowek-strony__lid { margin-top: 14px; }

.okruchy { margin-bottom: 16px; font-size: 13px; color: var(--przygas); }
.okruchy__link { color: var(--przygas); text-decoration: none; }
.okruchy__link:hover { color: var(--las); text-decoration: underline; }

/* ——— 04 · Przyciski i linki ————————————————————————————————————————————— */

.przycisk {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px;
	border: 1.5px solid transparent; border-radius: 999px;
	font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
	transition: background 0.25s var(--krzywa), color 0.25s var(--krzywa), transform 0.25s var(--krzywa);
}

.przycisk--pelny { background: var(--las); color: var(--papier); }
.przycisk--pelny:hover { background: var(--las-ciemny); transform: translateY(-1px); }
.przycisk--obrys { border-color: var(--las); color: var(--las); background: transparent; }
.przycisk--obrys:hover { background: var(--las); color: var(--papier); }
.przycisk--maly { min-height: 44px; padding: 0 20px; font-size: 14px; }
.przycisk--szeroki { width: 100%; }
.przycisk:disabled { background: var(--kreska); color: var(--przygas); border-color: var(--kreska); cursor: not-allowed; transform: none; }

.przycisk-okragly {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: var(--las); color: var(--papier);
	transition: transform 0.2s var(--krzywa), background 0.2s var(--krzywa);
}

.przycisk-okragly:hover { transform: scale(1.08); background: var(--las-ciemny); }

.link-strzalka {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 600; font-size: 15px; color: var(--las); text-decoration: none;
}

.link-strzalka__ikona { width: 18px; height: 18px; transition: transform 0.25s var(--krzywa); }
.link-strzalka:hover { text-decoration: underline; }
.link-strzalka:hover .link-strzalka__ikona { transform: translateX(4px); }

.link-akcja {
	display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: none;
	font-size: 14px; font-weight: 600; color: var(--las); text-decoration: underline; text-underline-offset: 3px;
}

/* ——— 05 · Pasek, nagłówek, menu, wyszukiwarka ——————————————————————————————— */

.pasek-info { background: var(--las); color: var(--owies); font-size: 13px; }
.pasek-info__tekst { min-height: 36px; display: flex; align-items: center; justify-content: center; text-align: center; }

.naglowek { position: sticky; top: 0; z-index: 40; background: var(--owies); border-bottom: 1px solid var(--kreska); }
.naglowek__wnetrze { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; min-height: var(--naglowek-h); }

.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--las); }
.logo__znak { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--maslo); color: var(--las); }
.logo__znak .ikona { width: 20px; height: 20px; }
.logo__nazwa { font-family: var(--naglowki); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.logo--jasne { color: var(--owies); }

.menu__lista { display: flex; justify-content: center; gap: 4px; }
.menu__link {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
	font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
	transition: background 0.2s var(--krzywa);
}
.menu__link:hover { background: var(--szalwia); }
.menu__link[aria-current] { background: var(--las); color: var(--papier); }

.naglowek__akcje { display: flex; gap: 4px; }
.naglowek__akcja { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--grafit); }
.naglowek__akcja:hover, .naglowek__akcja[aria-current], .naglowek__akcja[aria-expanded="true"] { background: var(--szalwia); }

.naglowek__licznik {
	position: absolute; top: 2px; right: 0;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
	background: var(--ziemia); color: var(--papier);
	font-size: 11px; font-weight: 600; line-height: 20px; text-align: center;
}
.naglowek__licznik[hidden] { display: none; }
.naglowek__licznik--puls { animation: puls 0.5s var(--krzywa); }
@keyframes puls { 50% { transform: scale(1.35); } }

.naglowek__burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; place-items: center; margin-left: -8px; }

.wyszukiwarka { border-top: 1px solid var(--kreska); }
.wyszukiwarka__wnetrze { display: flex; gap: 12px; padding-block: 14px; }
.wyszukiwarka__pole { flex: 1; min-width: 0; min-height: 44px; padding: 0 18px; border: 1px solid var(--kreska); border-radius: 999px; background: var(--papier); font-size: 16px; }
.js .wyszukiwarka:not(.wyszukiwarka--otwarta) { display: none; }

.menu-mobilne { display: none; }

@media (max-width: 960px) {
	:root { --naglowek-h: 64px; }
	.naglowek__wnetrze { gap: 8px; }
	.naglowek__burger { display: inline-grid; }
	.naglowek__menu { display: none; }
	.logo__nazwa { font-size: 22px; }

	/* Bez skryptu menu na telefonie to zwykła lista pod nagłówkiem. */
	.menu-mobilne { display: block; border-top: 1px solid var(--kreska); }
	.menu-mobilne__link {
		display: flex; align-items: center; min-height: 56px; padding-inline: var(--margines);
		font-family: var(--naglowki); font-size: 1.5rem; font-weight: 600; text-decoration: none;
		border-bottom: 1px solid var(--kreska);
	}
	.menu-mobilne__link[aria-current] { color: var(--las); text-decoration: underline; }

	/* Zamknięte menu ma visibility:hidden — inaczej Tab wchodził w niewidoczne linki. */
	.js .menu-mobilne {
		position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, var(--naglowek-h));
		background: var(--owies); overflow-y: auto;
		transform: translateY(-8px); opacity: 0; visibility: hidden;
		transition: transform 0.3s var(--krzywa), opacity 0.3s var(--krzywa), visibility 0s linear 0.3s;
	}
	.js .menu-mobilne--otwarte { transform: none; opacity: 1; visibility: visible; transition: transform 0.3s var(--krzywa), opacity 0.3s var(--krzywa); }
}

.blokada-przewijania { overflow: hidden; }

/* ——— 06 · Hero ———————————————————————————————————————————————————————— */

.hero { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 7vw, 96px); }
.hero__siatka { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__lid { margin-top: 22px; }
.hero__przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__atuty { display: grid; gap: 10px; margin-top: 34px; font-size: 14px; color: var(--przygas); }
.hero__atut { display: flex; align-items: center; gap: 10px; }
.hero__atut .ikona { width: 20px; height: 20px; color: var(--las); }

/* Kolaż: duże zdjęcie z zaokrągleniem „liścia” i małe nachodzące na nie. */
.hero__kolaz { position: relative; padding: 0 0 48px 48px; }
.hero__zdjecie { object-fit: cover; }
.hero__zdjecie--duze { width: 100%; aspect-ratio: 5 / 4; border-radius: 200px 24px 200px 24px; }
.hero__zdjecie--male {
	position: absolute; left: 0; bottom: 0; width: 38%; aspect-ratio: 4 / 5;
	border-radius: var(--promien); border: 6px solid var(--owies);
}
.hero__notka {
	position: absolute; right: 16px; bottom: 16px; max-width: 220px;
	padding: 14px 18px; border-radius: var(--promien); background: var(--maslo);
	font-size: 14px; line-height: 1.4; color: var(--grafit);
}
.hero__notka-liczba { display: block; font-family: var(--naglowki); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--las); }

@media (max-width: 900px) {
	.hero__siatka { grid-template-columns: 1fr; }
	.hero__kolaz { order: -1; padding: 0 0 36px 28px; }
	.hero__notka { right: 8px; bottom: 8px; max-width: 170px; font-size: 13px; }
}

/* ——— 07 · Kafle skóry, kategorie, zasady, składnik miesiąca ————————————————— */

.kafle-skory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kafel-skory {
	display: flex; flex-direction: column; gap: 10px;
	padding: 24px; border-radius: var(--promien); background: var(--owies); text-decoration: none;
	transition: transform 0.25s var(--krzywa), background 0.25s var(--krzywa);
}
.kafel-skory:hover { transform: translateY(-4px); background: var(--papier); }
.kafel-skory__nazwa { font-family: var(--naglowki); font-size: 1.4rem; font-weight: 600; }
.kafel-skory__opis { flex: 1; font-size: 14px; color: var(--przygas); }
.kafel-skory__dalej { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--las); }
.kafel-skory__dalej .ikona { width: 18px; height: 18px; }

.kategorie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kategoria {
	display: grid; padding: 16px 16px 20px; border-radius: var(--promien); text-decoration: none;
	transition: transform 0.25s var(--krzywa);
}
.kategoria:hover { transform: translateY(-4px); }
.kategoria--szalwia { background: var(--szalwia); }
.kategoria--maslo { background: var(--maslo-jasne); }
.kategoria--roza { background: var(--roza); }
.kategoria--niebo { background: var(--niebo); }
.kategoria__obraz { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--promien-maly); }
.kategoria__nazwa { margin-top: 14px; font-family: var(--naglowki); font-size: 1.35rem; font-weight: 600; }
.kategoria__ile { font-size: 13px; color: var(--przygas); }

.zasady { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.zasada__ikona { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--maslo); color: var(--las-ciemny); }
.zasada__tytul { margin-top: 16px; font-family: var(--naglowki); font-size: 1.3rem; font-weight: 600; }
.zasada__tekst { margin-top: 8px; color: var(--noc-przygas); font-size: 15px; }

.skladnik-dnia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.skladnik-dnia__obraz { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px 200px 24px 200px; }
.skladnik-dnia__inci { margin: 4px 0 14px; font-style: italic; color: var(--przygas); }
.skladnik-dnia__produkty { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.skladnik-dnia__link {
	display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px;
	background: var(--papier); font-size: 14px; font-weight: 500; text-decoration: none;
}
.skladnik-dnia__link img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.skladnik-dnia__link:hover { background: var(--maslo); }

@media (max-width: 1000px) {
	.kafle-skory, .kategorie, .zasady { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.skladnik-dnia { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.kafle-skory, .zasady { grid-template-columns: 1fr; }
}

/* ——— 08 · Karta produktu w siatce, cena ————————————————————————————————————— */

.siatka-produktow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px) clamp(14px, 2vw, 24px); }
.siatka-produktow--sklep { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.karta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-content: start; }
.karta__kadr { position: relative; grid-column: 1 / -1; display: block; overflow: hidden; border-radius: var(--promien); background: var(--szalwia); }
.karta--maslo .karta__kadr { background: var(--maslo-jasne); }
.karta--roza .karta__kadr { background: var(--roza); }
.karta--niebo .karta__kadr { background: var(--niebo); }
.karta__obraz { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s var(--krzywa); }
.karta:hover .karta__obraz { transform: scale(1.04); }

.karta__plakietka {
	position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px;
	background: var(--papier); font-size: 12px; font-weight: 600;
}
.karta__plakietka--promo { background: var(--ziemia); color: var(--papier); }

.karta__tresc { padding-top: 14px; }
.karta__kategoria { font-size: 12px; color: var(--przygas); }
.karta__nazwa { margin-top: 2px; font-family: var(--naglowki); font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.karta__link { text-decoration: none; }

/* Cała karta klikalna jednym linkiem z nazwy; zdjęcie ma tabindex -1, żeby Tab nie trafiał dwa razy. */
.karta__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--promien); }
.karta__link:focus-visible { outline: none; }
.karta__link:focus-visible::after { outline: 2px solid var(--las); outline-offset: 4px; }

.karta__krotko { margin-top: 4px; font-size: 14px; color: var(--przygas); line-height: 1.45; }
.karta__dodaj { grid-column: 2; grid-row: 2; align-self: start; margin-top: 14px; position: relative; z-index: 2; }

.cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; font-size: 15px; }
.cena__teraz { font-weight: 600; }
.cena__przed { color: var(--przygas); font-size: 14px; }
.cena--promocja .cena__teraz { color: var(--ziemia); }
.cena--duza { font-size: 1.6rem; margin-top: 14px; }
.cena--duza .cena__przed { font-size: 1.05rem; }

/* Omnibus: wymóg prawny przy każdej ogłaszanej obniżce. */
.omnibus { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--przygas); }

.dostepnosc { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 500; }
.dostepnosc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dostepnosc--tak { color: var(--las); }
.dostepnosc--malo { color: var(--ziemia); }
.dostepnosc--nie { color: var(--przygas); }

@media (max-width: 1100px) {
	.siatka-produktow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.siatka-produktow--sklep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.siatka-produktow, .siatka-produktow--sklep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.karta__krotko { display: none; }
	.karta__nazwa { font-size: 1.02rem; }
}

/* ——— 09 · Opinie, newsletter, formularze, zgody ————————————————————————————— */

.opinie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.opinia { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--promien); background: var(--owies); }
.opinia__gwiazdki { color: var(--ziemia); letter-spacing: 0.1em; }
.opinia__tresc { margin: 0; flex: 1; font-size: 1.05rem; line-height: 1.55; }
.opinia__podpis { font-size: 13px; color: var(--przygas); }

.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: var(--szalwia); }
.newsletter__lid { margin-top: 12px; }
.newsletter__wiersz { display: flex; gap: 10px; }
.newsletter__pole { flex: 1; }

.pole__wejscie {
	width: 100%; min-height: 52px; padding: 0 18px;
	border: 1px solid var(--kreska); border-radius: var(--promien-maly);
	background: var(--papier); font-size: 16px;
}
textarea.pole__wejscie { padding: 14px 18px; resize: vertical; }
.pole__wejscie:focus { outline: 2px solid var(--las); outline-offset: 1px; border-color: var(--las); }
.pole__wejscie[aria-invalid="true"] { border-color: var(--ziemia); background: #FBF2EC; }

.zgoda { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--przygas); cursor: pointer; }
.zgoda__pole { width: 22px; height: 22px; margin: 0; accent-color: var(--las); }
.zgoda a { color: var(--las); }

.komunikat { margin-top: 12px; padding: 12px 16px; border-radius: var(--promien-maly); background: var(--papier); font-size: 14px; font-weight: 500; color: var(--las); }
.komunikat:empty { display: none; }

@media (max-width: 900px) {
	.opinie, .newsletter { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	.newsletter__wiersz { flex-direction: column; }
}

/* ——— 10 · Sklep: chipy, filtry, wyniki ——————————————————————————————————————— */

.chipy { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 24px; }
.chipy::-webkit-scrollbar { display: none; }
.chip {
	flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
	border: 1px solid var(--kreska); border-radius: 999px; background: var(--papier);
	font-size: 14px; font-weight: 500; text-decoration: none;
}
.chip:hover { border-color: var(--las); }
.chip[aria-current], .chip[aria-pressed="true"] { background: var(--las); border-color: var(--las); color: var(--papier); }

.sklep { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: start; }

.filtry {
	position: sticky; top: calc(var(--naglowek-h) + 20px);
	display: grid; gap: 4px; padding: 20px; border-radius: var(--promien); background: var(--papier);
}
.filtry__glowa { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--kreska); }
.filtry__zamknij { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; place-items: center; }
.filtry__grupa { padding: 14px 0; border-bottom: 1px solid var(--kreska); }
.filtry__grupa:last-of-type { border-bottom: 0; }
.filtry__legenda { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.filtry__legenda + * { clear: both; }
.filtry__cena { display: flex; align-items: center; gap: 8px; }
.filtry__liczba { width: 80px; min-height: 40px; padding: 0 10px; border: 1px solid var(--kreska); border-radius: 10px; background: var(--owies); }
.filtry__pokaz { display: none; }

.wybor { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 15px; cursor: pointer; }
.wybor__pole { width: 20px; height: 20px; margin: 0; accent-color: var(--las); }
.wybor__ile { margin-left: auto; font-size: 13px; color: var(--przygas); }

.sklep__pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sklep__ile { font-size: 14px; color: var(--przygas); }
.sklep__filtry-przelacz { display: none; }
.sortuj { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.sortuj__pole { min-height: 44px; padding: 0 36px 0 16px; border: 1px solid var(--kreska); border-radius: 999px; background: var(--papier); font-size: 15px; }

.karta--ukryta { display: none; }
.pusto { display: none; margin-top: 24px; padding: 40px 20px; border-radius: var(--promien); background: var(--szalwia); text-align: center; }
.pusto--widoczne { display: block; }
.pusto__tekst { margin-bottom: 16px; }

@media (max-width: 900px) {
	.sklep { grid-template-columns: 1fr; }
	.sklep__filtry-przelacz { display: inline-flex; }
	.js .filtry {
		position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(360px, 88vw);
		border-radius: 0 var(--promien) var(--promien) 0; overflow-y: auto; align-content: start;
		transform: translateX(-105%); visibility: hidden;
		transition: transform 0.35s var(--krzywa), visibility 0s linear 0.35s;
	}
	.js .filtry--otwarte { transform: none; visibility: visible; transition: transform 0.35s var(--krzywa); box-shadow: 0 0 0 100vmax rgba(28, 42, 33, 0.4); }
	.js .filtry__pokaz { display: inline-flex; margin-top: 12px; }
	.js .filtry__zamknij { display: inline-grid; }
	.sklep__ile { order: 3; width: 100%; }
}

/* Bez skryptu przycisk stoi zawsze. */
html:not(.js) .filtry__pokaz { display: inline-flex; margin-top: 12px; }

/* ——— 11 · Strona produktu ——————————————————————————————————————————————— */

.produkt { padding-block: clamp(20px, 3vw, 32px) clamp(56px, 7vw, 96px); }
.produkt__siatka { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.produkt__kadr { position: sticky; top: calc(var(--naglowek-h) + 20px); overflow: hidden; border-radius: 32px; background: var(--szalwia); }
.produkt__kadr.karta--maslo { background: var(--maslo-jasne); }
.produkt__kadr.karta--roza { background: var(--roza); }
.produkt__kadr.karta--niebo { background: var(--niebo); }
.produkt__obraz { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.produkt__kadr .karta__plakietka { top: 18px; left: 18px; }
.produkt__kategoria { font-size: 13px; color: var(--przygas); margin-bottom: 6px; }
.produkt__krotko { margin-top: 10px; font-size: 1.1rem; color: var(--przygas); }
.produkt__skora { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.znacznik { padding: 5px 12px; border-radius: 999px; background: var(--szalwia); font-size: 13px; font-weight: 500; }
.znacznik::before { content: "Skóra "; }

.produkt__zakup { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--kreska); }
.warianty__legenda { margin-bottom: 10px; padding: 0; font-size: 14px; }
.warianty__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.wariant { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--kreska); border-radius: 999px; background: var(--papier); font-size: 14px; cursor: pointer; }
.wariant__pole { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wariant__nazwa small { color: var(--przygas); font-size: 12px; }
.wariant:has(.wariant__pole:checked) { border-color: var(--las); background: var(--szalwia); }
.wariant:has(.wariant__pole:focus-visible) { outline: 2px solid var(--las); outline-offset: 2px; }

.produkt__dodaj { display: flex; gap: 12px; margin-top: 20px; }
.produkt__przycisk { flex: 1; }
.ilosc { display: inline-flex; align-items: stretch; min-height: 52px; border: 1.5px solid var(--las); border-radius: 999px; overflow: hidden; }
.ilosc__przycisk { width: 44px; border: 0; background: none; font-size: 20px; }
.ilosc__przycisk:hover { background: var(--szalwia); }
.ilosc__pole { width: 44px; border: 0; background: none; text-align: center; font-size: 16px; -moz-appearance: textfield; }
.ilosc__pole::-webkit-outer-spin-button, .ilosc__pole::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.produkt__dost { margin-top: 12px; font-size: 14px; color: var(--przygas); }
.produkt__dost .dostepnosc { margin-top: 0; }

.produkt__kluczowe { margin-top: 28px; }
.produkt__podtytul { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.kluczowe { display: grid; gap: 10px; }
.skladnik-mini { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--promien-maly); background: var(--papier); }
.skladnik-mini__obraz { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.skladnik-mini__obraz--brak { display: grid; place-items: center; background: var(--szalwia); color: var(--las); }
.skladnik-mini__nazwa { font-weight: 600; }
.skladnik-mini__link { text-decoration: none; }
.skladnik-mini__link:hover { text-decoration: underline; }
.skladnik-mini__rola { font-size: 13px; color: var(--przygas); }

.szczegoly { margin-top: 28px; border-top: 1px solid var(--kreska); }
.szczegoly__element { border-bottom: 1px solid var(--kreska); }
.szczegoly__naglowek, .faq__pytanie {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px;
	cursor: pointer; font-weight: 600; list-style: none;
}
.szczegoly__naglowek::-webkit-details-marker, .faq__pytanie::-webkit-details-marker, .inci__nazwa::-webkit-details-marker { display: none; }
.szczegoly__naglowek::after, .faq__pytanie::after {
	content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--szalwia); color: var(--las); font-weight: 600; transition: transform 0.25s var(--krzywa);
}
.szczegoly__element[open] > .szczegoly__naglowek::after, .faq__element[open] > .faq__pytanie::after { transform: rotate(45deg); }
.szczegoly__tresc, .faq__odpowiedz { padding-bottom: 18px; color: var(--przygas); }

/* Skład INCI: każdy składnik rozwija się w jedno zdanie wyjaśnienia. */
.inci__podpowiedz { margin-bottom: 10px; font-size: 13px; }
.inci { display: flex; flex-wrap: wrap; gap: 8px; }
.inci__element { width: 100%; }
.inci__szczegoly { border-radius: var(--promien-maly); background: var(--papier); }
.inci__nazwa { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--grafit); }
.inci__nazwa::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--owies); font-size: 13px; color: var(--las); flex-shrink: 0; }
.inci__szczegoly[open] > .inci__nazwa::before { content: "−"; }
.inci__pl { font-weight: 400; color: var(--przygas); }
.inci__element--kluczowy .inci__szczegoly { background: var(--maslo-jasne); }
.inci__opis { padding: 0 14px 12px 40px; font-size: 14px; }
.inci__opis a { color: var(--las); }
.inci__wegan { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--las); }

.pasek-zakupu { display: none; }

@media (max-width: 900px) {
	.produkt__siatka { grid-template-columns: 1fr; }
	.produkt__kadr { position: static; }
	.js .pasek-zakupu {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		padding-block: 10px; background: var(--papier); border-top: 1px solid var(--kreska);
		transform: translateY(110%); visibility: hidden;
		transition: transform 0.3s var(--krzywa), visibility 0s linear 0.3s;
	}
	.js .pasek-zakupu--widoczny { transform: none; visibility: visible; transition: transform 0.3s var(--krzywa); }
	.pasek-zakupu__wnetrze { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
	.pasek-zakupu__nazwa { font-family: var(--naglowki); font-weight: 600; line-height: 1.2; }
	.pasek-zakupu__cena { font-weight: 600; font-size: 14px; }
}

@media (max-width: 420px) {
	.produkt__dodaj { flex-direction: column; }
	.ilosc { align-self: flex-start; }
}

/* ——— 12 · Dobór rutyny ——————————————————————————————————————————————————— */

.dobor { display: grid; gap: 28px; padding: clamp(20px, 3vw, 36px); border-radius: 32px; background: var(--papier); }
.dobor__pytanie { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0; font-family: var(--naglowki); font-size: 1.4rem; font-weight: 600; }
.dobor__nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--maslo); font-size: 1rem; color: var(--las); }
/* Ze skryptem dobór działa od razu po kliknięciu — przycisk jest tylko dla przeglądarki bez skryptu. */
.js .dobor__pokaz { display: none; }
.dobor__pokaz { justify-self: start; }

.typy-skory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.typ-skory { position: relative; display: flex; cursor: pointer; }
.typ-skory__pole { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.typ-skory__karta { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 18px; border: 2px solid var(--kreska); border-radius: var(--promien); transition: border-color 0.2s var(--krzywa), background 0.2s var(--krzywa); }
.typ-skory__nazwa { font-family: var(--naglowki); font-size: 1.15rem; font-weight: 600; }
.typ-skory__opis { font-size: 13px; color: var(--przygas); line-height: 1.45; }
.typ-skory__pole:checked + .typ-skory__karta { border-color: var(--las); background: var(--szalwia); }
.typ-skory__pole:focus-visible + .typ-skory__karta { outline: 2px solid var(--las); outline-offset: 3px; }

.przelacznik { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--owies); }
.przelacznik__opcja { position: relative; cursor: pointer; }
.przelacznik__pole { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.przelacznik__opcja span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.przelacznik__pole:checked + span { background: var(--las); color: var(--papier); }
.przelacznik__pole:focus-visible + span { outline: 2px solid var(--las); outline-offset: 2px; }

.rutyny { display: grid; gap: 28px; margin-top: 32px; }
.rutyny__para { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Bez skryptu stoją wszystkie rutyny (osiem, po kolei); skrypt zostawia tę, którą wybrano. */
.js .rutyny__para:not(.rutyny__para--wybrana) { display: none; }
.js .rutyny__para { grid-template-columns: 1fr; }
.js .rutyna:not(.rutyna--wybrana) { display: none; }

.rutyna { padding: clamp(20px, 3vw, 32px); border-radius: 32px; background: var(--szalwia); }
.rutyna[data-pora="wieczor"] { background: var(--niebo); }
.rutyna__glowa { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.rutyna__pora { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--papier); font-weight: 600; font-size: 14px; }
.rutyna__pora-ikona { width: 18px; height: 18px; color: var(--ziemia); }
.rutyna__tytul { font-family: var(--naglowki); font-size: 1.5rem; font-weight: 600; }
.rutyna__kroki { display: grid; gap: 10px; counter-reset: krok; }
.rutyna__ekstra { margin-top: 14px; font-size: 14px; }
.rutyna__ekstra a { color: var(--las); font-weight: 600; }
.rutyna__suma { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(28, 42, 33, 0.15); }
.rutyna__razem { display: flex; align-items: baseline; gap: 12px; }
.rutyna__razem strong { font-family: var(--naglowki); font-size: 1.8rem; }

.krok { display: grid; grid-template-columns: 32px 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--promien); background: var(--papier); }
.krok__nr { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--maslo); font-weight: 700; color: var(--las); }
.krok__obraz { width: 72px; height: 90px; border-radius: var(--promien-maly); object-fit: cover; }
.krok__etap { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--przygas); }
.krok__nazwa { font-family: var(--naglowki); font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.krok__link { text-decoration: none; }
.krok__link:hover { text-decoration: underline; }
.krok__dlaczego { font-size: 13px; color: var(--przygas); }
.krok__zamien { display: block; margin-top: 8px; }
.krok__wybor { max-width: 100%; min-height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--kreska); border-radius: 999px; background: var(--owies); font-size: 13px; }
.krok__cena { font-weight: 600; white-space: nowrap; }

.uwaga { margin-top: 28px; font-size: 13px; color: var(--przygas); max-width: 70ch; }

@media (max-width: 1000px) {
	.typy-skory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rutyny__para { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.typy-skory { grid-template-columns: 1fr; }
	.krok { grid-template-columns: 56px minmax(0, 1fr); }
	.krok__nr { display: none; }
	.krok__obraz { width: 56px; height: 70px; grid-row: span 2; }
	.krok__cena { grid-column: 2; }
}

/* ——— 13 · Słownik składników ——————————————————————————————————————————— */

.slownik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.skladnik {
	display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start;
	padding: 20px; border-radius: var(--promien); background: var(--papier);
	scroll-margin-top: calc(var(--naglowek-h) + 24px);
}
.skladnik:target { outline: 3px solid var(--maslo); }
.skladnik--ukryty { display: none; }
.skladnik__obraz { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.skladnik__obraz--brak { display: grid; place-items: center; background: var(--szalwia); color: var(--las); }
.skladnik__obraz--brak .ikona { width: 36px; height: 36px; }
.skladnik__rola { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--szalwia); font-size: 12px; font-weight: 600; }
.skladnik__nazwa { margin-top: 8px; font-family: var(--naglowki); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.skladnik__inci { font-style: italic; font-size: 14px; color: var(--przygas); }
.skladnik__opis { margin-top: 8px; }
.skladnik__uwaga { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--maslo-jasne); font-size: 13px; }
.skladnik__produkty { margin-top: 10px; font-size: 13px; color: var(--przygas); }
.skladnik__produkty a { color: var(--las); }

@media (max-width: 900px) {
	.slownik { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.skladnik { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
	.skladnik__obraz { width: 72px; height: 72px; }
}

/* ——— 14 · Koszyk, próbki, podsumowanie, szuflada ——————————————————————————— */

.koszyk, .kasa { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 48px); align-items: start; }

.do-darmowej { padding: 16px 20px; border-radius: var(--promien); background: var(--maslo-jasne); font-size: 14px; }
.do-darmowej__pasek { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--papier); overflow: hidden; }
.do-darmowej__wypelnienie { display: block; height: 100%; background: var(--las); transition: width 0.5s var(--krzywa); }

.pozycje { margin-top: 8px; }
.pozycja { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--kreska); }
.pozycja__obraz { width: 88px; height: 110px; border-radius: var(--promien-maly); object-fit: cover; }
.pozycja__nazwa { font-family: var(--naglowki); font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.pozycja__nazwa a { text-decoration: none; }
.pozycja__nazwa a:hover { text-decoration: underline; }
.pozycja__cena, .pozycja__wariant { font-size: 14px; color: var(--przygas); }
.pozycja__suma { min-width: 80px; text-align: right; font-weight: 600; }
.pozycja__usun { margin-top: 4px; }
.pozycje--male .pozycja { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; }
.pozycje--male .pozycja__obraz { width: 56px; height: 70px; }
.pozycje--male .pozycja__nazwa { font-size: 1rem; }

.probki { margin-top: 24px; padding: 20px; border-radius: var(--promien); background: var(--szalwia); }
.probki__tytul { float: left; width: 100%; padding: 0; font-family: var(--naglowki); font-size: 1.2rem; font-weight: 600; }
.probki__opis { clear: both; margin: 4px 0 12px; font-size: 14px; color: var(--przygas); }
.probki__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.probka { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: var(--promien-maly); background: var(--papier); font-size: 14px; cursor: pointer; }
.probka__pole { width: 20px; height: 20px; margin: 0; accent-color: var(--las); }
.probka__obraz { width: 32px; height: 40px; border-radius: 6px; object-fit: cover; }
.probka:has(.probka__pole:disabled:not(:checked)) { opacity: 0.6; cursor: not-allowed; }
.probki__stan { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--las); }

.koszyk__pusty { display: none; padding: 48px 32px; border-radius: var(--promien); background: var(--szalwia); text-align: center; }
.koszyk__pusty p { margin: 12px auto 0; max-width: 46ch; color: var(--przygas); }
.koszyk__przyciski { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.koszyk--pusty { grid-template-columns: 1fr; }
.koszyk--pusty .koszyk__pusty { display: block; }
.koszyk--pusty .do-darmowej, .koszyk--pusty .pozycje, .koszyk--pusty .probki, .koszyk--pusty .podsumowanie { display: none; }

.podsumowanie { position: sticky; top: calc(var(--naglowek-h) + 20px); padding: 24px; border-radius: var(--promien); background: var(--papier); }
.podsumowanie__lista { margin-top: 16px; font-size: 15px; }
.podsumowanie__lista > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.podsumowanie__lista dt { color: var(--przygas); }
.podsumowanie__rabat { color: var(--las); }
.podsumowanie__rabat dt { color: inherit; }
.podsumowanie__rabat:not(.podsumowanie__rabat--aktywny) { display: none !important; }
.podsumowanie__razem { margin-top: 6px; padding-top: 14px !important; border-top: 1px solid var(--kreska); }
.podsumowanie__razem dt { color: var(--grafit); font-weight: 600; }
.podsumowanie__razem dd { font-family: var(--naglowki); font-size: 1.6rem; font-weight: 700; }
.podsumowanie__vat { margin: 4px 0 18px; font-size: 12px; color: var(--przygas); text-align: right; }
.podsumowanie__probki { margin-top: 8px; font-size: 13px; color: var(--las); }
.podsumowanie__probki:empty { display: none; }

.kupon { margin-bottom: 18px; font-size: 14px; }
.kupon__etykieta { display: block; margin-bottom: 6px; font-weight: 500; }
.kupon__wiersz { display: flex; gap: 8px; }
.kupon__pole { min-height: 44px; text-transform: uppercase; }
.kupon__komunikat { margin-top: 8px; font-size: 13px; }
.kupon__komunikat:empty { display: none; }
.kupon__komunikat--ok { color: var(--las); }
.kupon__komunikat--blad { color: var(--ziemia); }

.szuflada__tlo { position: fixed; inset: 0; z-index: 80; background: rgba(28, 42, 33, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--krzywa), visibility 0s linear 0.3s; }
.szuflada__panel {
	position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: 81; width: min(420px, calc(100vw - 16px));
	display: flex; flex-direction: column; border-radius: 28px; background: var(--owies);
	transform: translateX(110%); visibility: hidden; transition: transform 0.4s var(--krzywa), visibility 0s linear 0.4s;
}
.szuflada--otwarta .szuflada__tlo { opacity: 1; visibility: visible; transition: opacity 0.3s var(--krzywa); }
.szuflada--otwarta .szuflada__panel { transform: none; visibility: visible; transition: transform 0.4s var(--krzywa); }
.szuflada__glowa { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--kreska); }
.szuflada__zamknij { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: none; }
.szuflada__zamknij:hover { background: var(--szalwia); }
.szuflada__tresc { flex: 1; overflow-y: auto; padding: 8px 24px; }
.szuflada__komunikat { margin-top: 14px; padding: 12px 14px; border-radius: var(--promien-maly); background: var(--szalwia); font-size: 14px; font-weight: 500; color: var(--las); }
.szuflada__stopa { display: grid; gap: 10px; padding: 18px 24px 24px; border-top: 1px solid var(--kreska); }
.szuflada__suma { display: flex; justify-content: space-between; align-items: baseline; }
.szuflada__suma strong { font-family: var(--naglowki); font-size: 1.4rem; }

@media (max-width: 1000px) {
	.koszyk, .kasa { grid-template-columns: 1fr; }
	.podsumowanie { position: static; }
	.podsumowanie--kasa { order: -1; }
}

@media (max-width: 600px) {
	.pozycja { grid-template-columns: 72px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
	.pozycja__obraz { width: 72px; height: 90px; grid-row: span 3; }
	.pozycja__suma { text-align: left; }
	.probki__lista { grid-template-columns: 1fr; }
}

/* ——— 15 · Kasa ————————————————————————————————————————————————————————— */

.kasa__krok { padding: 26px 0; border-bottom: 1px solid var(--kreska); }
.kasa__krok:first-child { padding-top: 0; }
.kasa__legenda { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0; font-family: var(--naglowki); font-size: 1.4rem; font-weight: 600; }
.kasa__legenda + * { clear: both; }
.kasa__nr { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--maslo); font-size: 15px; color: var(--las); }

.pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pole { display: grid; gap: 6px; align-content: start; }
.pole--szerokie { grid-column: 1 / -1; }
.pole__etykieta { font-size: 14px; font-weight: 500; }
.pole__opcjonalne { font-weight: 400; color: var(--przygas); }
.pole__blad { font-size: 13px; color: var(--ziemia); }
.pole__blad:empty { display: none; }

.opcje { display: grid; gap: 10px; }
.opcja { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1.5px solid var(--kreska); border-radius: var(--promien); background: var(--papier); cursor: pointer; }
.opcja:has(.opcja__pole:checked) { border-color: var(--las); background: var(--szalwia); }
.opcja__pole { width: 20px; height: 20px; margin: 0; accent-color: var(--las); }
.opcja__tresc { display: grid; }
.opcja__nazwa { font-weight: 600; }
.opcja__opis { font-size: 13px; color: var(--przygas); }
.opcja__cena { font-weight: 600; }

.kasa__zgody { padding: 22px 0; }
.kasa__info { margin-top: 12px; font-size: 13px; color: var(--przygas); text-align: center; }

.potwierdzenie { display: none; grid-column: 1 / -1; padding: 48px 32px; border-radius: 32px; background: var(--szalwia); text-align: center; }
.potwierdzenie p { margin-top: 12px; color: var(--przygas); }
.kasa--zlozona .kasa__formularz, .kasa--zlozona .podsumowanie { display: none; }
.kasa--zlozona .potwierdzenie { display: block; }

@media (max-width: 560px) {
	.pola { grid-template-columns: 1fr; }
}

/* ——— 16 · O nas ———————————————————————————————————————————————————————— */

.historia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.historia__obraz { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 24px 24px; }
.historia__tekst p:not(.etykieta) { margin-top: 14px; color: var(--przygas); }
.historia__tekst .tytul { margin-bottom: 6px; }

.proces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.proces__krok { padding: 24px; border-radius: var(--promien); background: var(--owies); }
.proces__nr { font-family: var(--naglowki); font-size: 2.2rem; font-weight: 700; color: var(--las); }
.proces__tytul { margin-top: 8px; font-family: var(--naglowki); font-size: 1.25rem; font-weight: 600; }
.proces__tekst { margin-top: 6px; font-size: 15px; color: var(--przygas); }

.faq__element { border-bottom: 1px solid var(--kreska); }
.faq__pytanie { font-family: var(--naglowki); font-size: 1.15rem; padding-block: 6px; }
.faq__odpowiedz a { color: var(--las); }

.kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.dane__wiersz { padding: 14px 0; border-bottom: 1px solid var(--kreska); }
.dane__etykieta { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--przygas); }
.dane__wartosc { margin-top: 4px; font-size: 1.05rem; }
.dane__wartosc a { color: var(--las); }
.formularz { padding: clamp(22px, 3vw, 32px); border-radius: var(--promien); background: var(--papier); }
.formularz__wyslij { margin-top: 18px; }

@media (max-width: 900px) {
	.historia, .kontakt { grid-template-columns: 1fr; }
	.proces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.proces { grid-template-columns: 1fr; }
}

/* ——— 17 · Stopka ———————————————————————————————————————————————————————— */

.stopka { margin-top: 0; padding-top: clamp(48px, 6vw, 80px); background: var(--las-ciemny); color: var(--noc-przygas); font-size: 15px; }
.stopka__gora { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; }
.stopka__opis { margin-top: 16px; max-width: 38ch; }
.stopka__tytul { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--owies); }
.stopka__lista { display: grid; gap: 4px; }
.stopka__link { display: inline-flex; align-items: center; min-height: 32px; color: var(--noc-przygas); text-decoration: none; }
.stopka__link:hover { color: var(--maslo); text-decoration: underline; }
.stopka__adres { font-style: normal; margin-bottom: 10px; }
.stopka__dol { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 20px 28px; border-top: 1px solid rgba(243, 240, 230, 0.14); font-size: 13px; }
.stopka__platnosci { display: flex; gap: 8px; }
.stopka__platnosci li { padding: 4px 12px; border: 1px solid rgba(243, 240, 230, 0.24); border-radius: 999px; font-size: 12px; }

@media (max-width: 900px) {
	.stopka__gora { grid-template-columns: 1fr 1fr; }
	.stopka__marka { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
	.stopka__gora { grid-template-columns: 1fr; }
}

/* ——— 18 · Ruch i dostępność ——————————————————————————————————————————— */

:focus-visible { outline: 2px solid var(--las); outline-offset: 3px; }
.sekcja--ciemna :focus-visible, .stopka :focus-visible, .pasek-info :focus-visible { outline-color: var(--maslo); }

.js [data-odslon]:not([data-odslon="dzieci"]),
.js [data-odslon="dzieci"] > * {
	opacity: 0; transform: translateY(20px);
	transition: opacity 0.7s var(--krzywa), transform 0.7s var(--krzywa);
}

.js [data-odslon][data-widoczne]:not([data-odslon="dzieci"]),
.js [data-odslon="dzieci"][data-widoczne] > * { opacity: 1; transform: none; }

.js [data-odslon="dzieci"][data-widoczne] > :nth-child(2) { transition-delay: 0.08s; }
.js [data-odslon="dzieci"][data-widoczne] > :nth-child(3) { transition-delay: 0.16s; }
.js [data-odslon="dzieci"][data-widoczne] > :nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.js [data-odslon]:not([data-odslon="dzieci"]), .js [data-odslon="dzieci"] > * { opacity: 1; transform: none; }
}

/* Pola poniżej 16 px włączają auto-przybliżenie w Safari na iOS. */
@media (max-width: 768px) {
	input, select, textarea { font-size: 16px !important; }
}