/* Bliźniak: kierunek B z DESIGN.md. Kolorowe bloki narzędzi, grube nagłówki, pigułki, naklejka z rabatem. */

:root {
  --tusz: #17151F;
  --bialy: #FFFFFF;
  --mgla: #F2F2F6;
  --limonka: #D3F45E;
  --roz: #FF3D9A;
  --niebo: #9BE6F7;
  --liliowy: #CDB8FF;
  --maslo: #FFE27A;
  --bursztyn: #955400;
  --druk: #4A4757;
  --zakres: rgb(255 61 154 / .55);
  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --font-druk: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  /* Kształty: bloki 36 px, karty 28 px, pola i przyciski 16 px, pigułki pełne. */
  --r-blok: 36px;
  --r-karta: 28px;
  --r-pole: 16px;
  --krawedz: max(16px, 4vw);
  --szer: 1120px;
  /* Ruch: mocny ease-out do UI, sprężyny jak elastic.out(1, .75) i (1, .4) z GSAP u Aardvarka. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-fala: cubic-bezier(0.37, 0, 0.63, 1);
  --sprezyna: linear(0 0%, 0.1476 2.08%, 0.296 4.17%, 0.4385 6.25%, 0.5701 8.33%, 0.6878 10.42%, 0.7898 12.5%, 0.8755 14.58%, 0.9453 16.67%, 1 18.75%, 1.041 20.83%, 1.0699 22.92%, 1.0884 25%, 1.0984 27.08%, 1.1014 29.17%, 1.0993 31.25%, 1.0932 33.33%, 1.0846 35.42%, 1.0743 37.5%, 1.0634 39.58%, 1.0523 41.67%, 1.0417 43.75%, 1.032 45.83%, 1.0232 47.92%, 1.0156 50%, 1.0093 52.08%, 1.0041 54.17%, 1 56.25%, 0.997 58.33%, 0.9948 60.42%, 0.9934 62.5%, 0.9927 64.58%, 0.9925 66.67%, 0.9926 68.75%, 0.9931 70.83%, 0.9937 72.92%, 0.9945 75%, 0.9953 77.08%, 0.9961 79.17%, 0.9969 81.25%, 0.9976 83.33%, 0.9983 85.42%, 0.9988 87.5%, 0.9993 89.58%, 0.9997 91.67%, 1 93.75%, 1.0002 95.83%, 1.0004 97.92%, 1 100%);
  --sprezyna-mocna: linear(0 0%, 0.1804 2.08%, 0.4057 4.17%, 0.6398 6.25%, 0.8547 8.33%, 1.0318 10.42%, 1.1609 12.5%, 1.2399 14.58%, 1.2728 16.67%, 1.2674 18.75%, 1.2339 20.83%, 1.1832 22.92%, 1.125 25%, 1.0677 27.08%, 1.0173 29.17%, 0.9776 31.25%, 0.9504 33.33%, 0.9354 35.42%, 0.9313 37.5%, 0.9358 39.58%, 0.9462 41.67%, 0.9599 43.75%, 0.9746 45.83%, 0.9884 47.92%, 1 50%, 1.0087 52.08%, 1.0143 54.17%, 1.0168 56.25%, 1.0169 58.33%, 1.0151 60.42%, 1.0121 62.5%, 1.0086 64.58%, 1.0049 66.67%, 1.0017 68.75%, 0.999 70.83%, 0.9972 72.92%, 0.9961 75%, 0.9957 77.08%, 0.9959 79.17%, 0.9965 81.25%, 0.9973 83.33%, 0.9982 85.42%, 0.9991 87.5%, 0.9999 89.58%, 1.0005 91.67%, 1.0008 93.75%, 1.001 95.83%, 1.0011 97.92%, 1 100%);
  --font-reka: "Caveat", "Segoe Print", cursive;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* clip: obrócone karty i naklejka przy animacji wejścia nie mogą poszerzać strony na telefonie. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bialy); color: var(--tusz);
  font: 500 17px/1.5 var(--font); font-optical-sizing: auto;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
main, .stopka-srodek { width: min(var(--szer), 100% - 2 * var(--krawedz)); margin-inline: auto; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-weight: 800; font-stretch: 78%; letter-spacing: -.035em; line-height: .95; }
h1 { font-size: clamp(42px, 10.5vw, 76px); }
h2 { font-size: clamp(30px, 7vw, 46px); }
h3 { font-weight: 700; font-size: 20px; line-height: 1.2; }
h4 { font-weight: 700; font-size: 17px; margin: 22px 0 8px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--tusz); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: 12px; top: -80px; background: var(--tusz); color: var(--bialy); padding: 12px 16px; border-radius: var(--r-pole); z-index: 20; font-weight: 700; }
.pomin:focus { top: 12px; }
.ikona { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* Nagłówek: limonkowy pasek marki na każdej stronie */
.naglowek {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 10px max(var(--krawedz), (100% - var(--szer)) / 2);
  background: var(--limonka);
}
.znak { font-weight: 800; font-stretch: 78%; font-size: 30px; letter-spacing: -.04em; line-height: 1; text-decoration: none; padding: 6px 0; }
.naglowek-szukaj {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  background: var(--tusz); color: var(--bialy); border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none;
}
.naglowek-szukaj .ikona { width: 18px; height: 18px; }
.naglowek :focus-visible { outline-color: var(--tusz); }

/* Bloki narzędzi */
.blok { position: relative; margin: 16px calc(8px - var(--krawedz)) 0; padding: 30px 20px 32px; border-radius: var(--r-blok); scroll-margin-top: 8px; }
.blok--limonka { background: var(--limonka); }
.blok--roz { background: var(--roz); }
.blok--niebo { background: var(--niebo); }
.blok--liliowy { background: var(--liliowy); }
.blok--maslo { background: var(--maslo); }
.blok-lead { margin-top: 12px; font-size: 18px; max-width: 40ch; }
.blok .przypis { color: var(--tusz); opacity: .82; }
@media (min-width: 760px) {
  .blok { margin: 20px 0 0; padding: 48px 56px 52px; }
}

/* Hero: nagłówek strony i blok wyszukiwarki tworzą jedną limonkową powierzchnię */
/* Na stronie głównej pasek nagłówka jest przezroczysty, a hero z falami wchodzi pod niego (jak u Aardvarka). */
.strona-glowna .naglowek { position: relative; z-index: 3; padding-bottom: 0; background: transparent; }
.strona-glowna .blok--hero { margin-top: -68px; padding-top: 86px; }
.blok--hero {
  margin: 0 calc(50% - 50vw); padding: 18px max(var(--krawedz), (100vw - var(--szer)) / 2) 96px;
  border-radius: 0 0 48px 48px;
}
.blok--hero { padding-bottom: 44px; }
.blok--hero h1 { max-width: 12ch; }
.hero-siatka { display: grid; gap: 40px; }
.hero-tekst { min-width: 0; }
@media (min-width: 760px) { .blok--hero { padding-top: 32px; padding-bottom: 64px; } .strona-glowna .blok--hero { padding-top: 100px; } .blok--hero h1 { max-width: 14ch; } }
@media (min-width: 1040px) {
  .hero-siatka { grid-template-columns: minmax(0, 1fr) 500px; gap: 64px; align-items: start; }
  .hero-przyklad { padding-top: 10px; }
  .hero-przyklad .przyklad-tytul { margin-top: 0; }
}

.skroty { display: flex; gap: 8px; margin: 22px calc(-1 * var(--krawedz)) 0; padding: 2px var(--krawedz) 4px; overflow-x: auto; scrollbar-width: none; }
.skroty::-webkit-scrollbar { display: none; }
.skrot {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--tusz); border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.skrot--roz { background: var(--roz); } .skrot--niebo { background: var(--niebo); } .skrot--liliowy { background: var(--liliowy); }
.skrot--maslo { background: var(--maslo); } .skrot--bialy { background: var(--bialy); }
@media (min-width: 760px) { .skroty { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } }

/* Wyszukiwarka */
.szukaj { position: relative; margin-top: 22px; max-width: 560px; }
.pole-etykieta, .szukaj-etykieta { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.szukaj-pole { position: relative; }
.szukaj input, .pola input, .pola select, textarea {
  width: 100%; font: 500 17px/1.3 var(--font); color: var(--tusz);
  background: var(--bialy); border: 2px solid var(--tusz); border-radius: var(--r-pole);
  -webkit-appearance: none; appearance: none;
}
.szukaj input { height: 60px; padding: 0 66px 0 18px; }
.szukaj--wybor input, .szukaj--dodaj input { height: 54px; padding: 0 16px; }
.szukaj input::placeholder, textarea::placeholder { color: #6E6A7C; }
.szukaj input::-webkit-search-cancel-button { display: none; }
.szukaj-przycisk {
  position: absolute; right: 6px; top: 6px; width: 48px; height: 48px;
  display: grid; place-items: center; border: 2px solid var(--tusz); border-radius: 12px;
  background: var(--roz); color: var(--tusz); cursor: pointer; transition: transform .12s ease-out;
}
.szukaj-przycisk:active { transform: scale(.96); }
.szukaj-przycisk .ikona { width: 22px; height: 22px; }
.podpowiedzi {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 6;
  background: var(--bialy); border: 2px solid var(--tusz); border-radius: 20px;
  padding: 6px; max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain;
}
.podpowiedzi li > a, .podpowiedzi li.brak, .podpowiedzi li[data-i] {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 54px; padding: 8px 12px; border-radius: 12px; text-decoration: none;
}
.podpowiedzi li[data-i] { cursor: pointer; }
.podpowiedzi li[aria-selected="true"] > a, .podpowiedzi li[data-i][aria-selected="true"] { background: var(--limonka); }
.pod-nazwa { font-weight: 700; line-height: 1.3; }
.pod-info { font-size: 14px; color: var(--druk); }
.podpowiedzi li.brak { color: var(--druk); font-size: 15px; }
.wyniki { margin-top: 20px; }
.wyniki > p { font-weight: 700; margin-bottom: 10px; }

/* Przyciski */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px; border: 2px solid var(--tusz); border-radius: var(--r-pole);
  font: 700 17px/1.1 var(--font); text-decoration: none; cursor: pointer; text-align: center;
  background: var(--bialy); color: var(--tusz); transition: transform 160ms var(--ease-out);
}
.przycisk:active { transform: scale(.97); }
.przycisk:disabled { opacity: .6; cursor: default; }
.przycisk .ikona { width: 20px; height: 20px; }
.przycisk--ciemny { background: var(--tusz); color: var(--bialy); }
.przycisk--obrys { background: transparent; }
.przycisk--glowny { background: var(--roz); padding: 0; justify-content: space-between; overflow: hidden; }
.przycisk--glowny > span:first-child { padding: 0 20px; }
.przycisk-strzalka { align-self: stretch; width: 58px; display: grid; place-items: center; border-left: 2px solid var(--tusz); }
.akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.akcje--pion { display: grid; grid-template-columns: 1fr; max-width: 460px; }
.link-strzalka { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }
.link-strzalka .ikona { transition: transform .2s cubic-bezier(.22,.8,.3,1); }

/* Pigułki, chipy, odznaki */
.chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 2px solid var(--tusz); border-radius: 999px; background: var(--bialy);
  font-weight: 600; font-size: 15px; line-height: 1.2;
}
a.chip { min-height: 44px; text-decoration: none; }
.chip--wspolny { background: var(--roz); font-weight: 700; }
.odznaka {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--roz); color: var(--tusz); border: 2px solid var(--tusz);
  font-weight: 800; font-stretch: 85%; font-size: 15px; line-height: 1; border-radius: 999px; padding: 6px 11px;
}
.pigulki-wspolne { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pw {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px;
  border: 2px solid var(--tusz); border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.2;
}
.pw .ikona { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--tusz); fill: var(--bialy); }
.pw--r { background: var(--roz); } .pw--l { background: var(--liliowy); }
.pw--plus { border-style: dashed; background: transparent; }
.pw-plus { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--tusz); border-radius: 50%; font-weight: 800; line-height: 1; }
.marka { display: block; font-weight: 700; font-size: 14px; opacity: .78; }

/* Para kart: oryginał i bliźniak, naklejka z rabatem */
.przyklad-tytul { font-size: clamp(24px, 6vw, 32px); max-width: 20ch; margin-bottom: 34px; }
.para-kart { position: relative; max-width: 520px; }
.kp {
  position: relative; display: block; padding: 18px 18px 20px; border-radius: var(--r-karta);
  text-decoration: none; transition: transform .2s cubic-bezier(.22,.8,.3,1);
}
.kp--oryginal { background: var(--tusz); color: var(--bialy); transform: rotate(-2.2deg); }
.kp--blizniak { background: var(--niebo); border: 2px solid var(--tusz); transform: rotate(1.6deg); margin-top: -8px; }
/* W błękitnym bloku porównania karta zamiennika na limonce, żeby nie zlała się z tłem. */
.blok--niebo .kp--blizniak { background: var(--limonka); }
.wyniki-narzedzia .para-kart { margin: 34px 0 8px; }
.kp-rola {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.kp--oryginal .kp-rola, .produkt-glowa .kp-rola { background: var(--bialy); color: var(--tusz); }
.kp--blizniak .kp-rola { background: var(--tusz); color: var(--bialy); }
.kp-marka { display: block; margin-top: 12px; font-weight: 700; font-size: 14px; opacity: .8; }
.kp-nazwa { display: block; margin-top: 3px; max-width: 13ch; font-weight: 800; font-stretch: 78%; letter-spacing: -.03em; font-size: 26px; line-height: 1; }
.kp-ceny { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 16px; }
.kp-ceny b { font-weight: 800; font-stretch: 78%; letter-spacing: -.03em; font-size: 36px; line-height: 1; white-space: nowrap; }
.kp-ceny > span { font-size: 14px; text-align: right; line-height: 1.3; opacity: .88; }
/* Naklejka przyklejona do prawej krawędzi karty bliźniaka, obok nazwy (nie zasłania cen). */
.naklejka {
  position: absolute; right: -12px; top: 18px; z-index: 2;
  width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--roz); color: var(--tusz); box-shadow: 0 0 0 3px var(--tusz); transform: rotate(11deg);
}
.naklejka b { font-weight: 800; font-stretch: 75%; font-size: 36px; line-height: .9; letter-spacing: -.03em; }
.naklejka small { font-weight: 800; font-size: 12px; line-height: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  [data-naklejka].czeka .naklejka { transform: scale(1.35) rotate(28deg); opacity: 0; }
  [data-naklejka].widoczne .naklejka { transform: rotate(11deg); opacity: 1; transition: transform 700ms var(--sprezyna-mocna) 520ms, opacity 120ms 520ms; }
}
.hero-przyklad .akcje { margin-top: 18px; }
.hero-przyklad .pw--plus { background: var(--bialy); }

/* Wyniki narzędzi w blokach */
.wyniki-narzedzia:not(:empty) { margin-top: 24px; }
.wyniki-narzedzia h2 { font-size: clamp(26px, 6vw, 36px); margin: 26px 0 12px; }
.wyniki-narzedzia h3 { margin: 20px 0 10px; }
.stan:not(:empty) { margin-top: 14px; padding: 12px 14px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: var(--r-pole); }
.zdjecie { margin-top: 22px; }
.zdjecie .przycisk { min-height: 58px; font-size: 18px; padding: 0 24px; }
.zdjecie .przycisk .ikona { width: 24px; height: 24px; }
.zdjecie:has(input:focus-visible) label { outline: 3px solid var(--tusz); outline-offset: 3px; }
.zdjecie .przypis { margin-top: 10px; }
textarea { padding: 12px 14px; font: 400 15px/1.5 var(--font-druk); resize: vertical; }
.pola { display: grid; gap: 12px; margin-top: 14px; }
.pola label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.pola input, .pola select { min-height: 52px; padding: 0 14px; }
.pola select { background-image: linear-gradient(45deg, transparent 50%, var(--tusz) 50%), linear-gradient(135deg, var(--tusz) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
@media (min-width: 760px) { .pola { grid-template-columns: 1fr 1fr; } }
.dwa { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 860px) { .dwa { grid-template-columns: 1fr 1fr; gap: 20px; } }
.wybrany:not(:empty) { margin-top: 10px; padding: 10px 14px; background: var(--bialy); border-radius: 12px; border: 2px solid var(--tusz); }

/* Rozwijane (details) */
.rozwin { margin-top: 20px; border-top: 2px solid var(--tusz); }
.rozwin > summary {
  padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  font-weight: 800; font-stretch: 85%; font-size: 19px; cursor: pointer; list-style: none;
}
.rozwin > summary::-webkit-details-marker { display: none; }
.rozwin > summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--tusz); border-radius: 50%; font-size: 22px; line-height: 1; }
.rozwin[open] > summary::after { content: "−"; }
.rozwin[open] > summary { margin-bottom: 8px; }
.rozwin > p + p, .rozwin > h3 + p { margin-top: 8px; }
.rozwin > h3 { margin-top: 20px; font-size: 18px; }
.rozwin--jasne { margin-top: 28px; }

/* Moja skóra: wybór jako pigułki */
fieldset { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
legend { font-weight: 800; font-size: 17px; padding: 0; margin-bottom: 10px; }
.wybory { display: flex; flex-wrap: wrap; gap: 8px; }
.wybor { position: relative; cursor: pointer; }
.wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wybor span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--tusz); border-radius: 999px; background: var(--bialy); font-weight: 700; font-size: 15px;
}
.wybor input:checked + span { background: var(--tusz); color: var(--bialy); }
.wybor input:checked + span::before { content: ""; width: 8px; height: 13px; margin: -3px 10px 0 0; border: solid var(--limonka); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.wybor input:focus-visible + span { outline: 3px solid var(--tusz); outline-offset: 2px; }

/* Moja pielęgnacja */
.pora { padding: 18px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: var(--r-karta); }
.pora h3 { font-weight: 800; font-stretch: 80%; font-size: 26px; margin-bottom: 12px; }
.pora-lista { counter-reset: krok; display: grid; gap: 10px; margin-bottom: 14px; }
.pora-lista li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pora-lista li:not(.pora-pusto)::before { counter-increment: krok; content: counter(krok); flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--maslo); border: 2px solid var(--tusz); font-weight: 800; font-size: 14px; }
.pora-pusto { color: var(--druk); }
.pora-produkt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pora-krok { font-size: 14px; color: var(--druk); }
.pora-usun { min-height: 44px; padding: 0 12px; border: 2px solid var(--tusz); border-radius: 12px; background: transparent; color: var(--tusz); font: 700 14px var(--font); cursor: pointer; }
.uwagi-pielegnacji { margin-top: 22px; }
.uwagi-pielegnacji h3 { margin-bottom: 10px; }
.zasady { display: grid; gap: 10px; margin-top: 12px; }
.zasada { display: flex; gap: 10px; padding: 12px 14px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: var(--r-pole); }
div.zasada { display: block; }
div.zasada + div.zasada { margin-top: 10px; }
.zasada p + p { margin-top: 6px; }
.zasada .ikona { flex: none; width: 20px; height: 20px; margin-top: 3px; }
/* Poziom zasady: jasny odcień koloru bloku zamiast paska z boku. */
.zasada--uwaga { background: #FFD3E7; }
.zasada--informacja { background: #DDF6FC; }
.zasada--dobrze { background: #EEFBC4; }
.kolejnosc { list-style: decimal; padding-left: 22px; }
.kolejnosc li + li { margin-top: 4px; }

/* Sekcje na białym */
.sekcja, main > section:not(.blok):not(.przyklad), .werdykt { margin-top: 64px; }
.sekcja > h2, main > section:not(.blok):not(.przyklad) > h2 { margin-bottom: 18px; }
.sekcja-podtytul { margin-top: 44px; font-size: clamp(26px, 6vw, 36px); }
.przypis { font-size: 15px; color: var(--druk); max-width: 65ch; margin-top: 12px; }
.lead { margin-top: 14px; font-size: 18px; max-width: 58ch; }

/* Popularne porównania: oryginał na białym, bliźniak na limonce */
/* Na telefonie pasek do przesuwania palcem, od 760 px siatka dwóch kolumn. */
.pary { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; margin-inline: calc(-1 * var(--krawedz)); padding: 4px var(--krawedz) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--krawedz); scrollbar-width: none; }
.pary::-webkit-scrollbar { display: none; }
.pary > li { scroll-snap-align: start; }
@media (min-width: 760px) { .pary { grid-auto-flow: row; grid-template-columns: 1fr 1fr; margin-inline: 0; padding: 0; overflow: visible; } }
.para-link {
  position: relative; display: grid; height: 100%; border: 2px solid var(--tusz); border-radius: 24px; overflow: hidden;
  text-decoration: none; background: var(--bialy); transition: transform .15s ease-out;
}
.para-link:active { transform: translateY(1px); }
.para-oryginal, .para-blizniak { display: block; padding: 14px 18px 16px; }
.para-blizniak { position: relative; padding-right: 96px !important; background: var(--limonka); border-top: 2px solid var(--tusz); }
.para-nazwa { display: block; font-size: 16px; line-height: 1.35; margin-top: 2px; }
.para-blizniak .para-nazwa { font-weight: 800; font-stretch: 80%; font-size: 21px; letter-spacing: -.02em; line-height: 1.05; }
.para-cena { display: block; margin-top: 6px; font: 400 14px/1.2 var(--font-druk); font-variant-numeric: tabular-nums; }
.para-blizniak .odznaka { position: absolute; top: 12px; right: 12px; transform: rotate(6deg); font-size: 20px; padding: 8px 12px; }

/* Kategorie: kolorowe kafle jak okładki na półce (inspiracja: karty książek Aardvark Book Club) */
.kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .kafle { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.kafel {
  display: flex; flex-direction: column; height: 100%; min-height: 172px; padding: 16px 14px 14px;
  border: 2px solid var(--tusz); border-radius: 24px; text-decoration: none; transition: transform .2s cubic-bezier(.22,.8,.3,1);
}
.kafel:active { transform: translateY(1px); }
.kafel--liliowy { background: var(--liliowy); } .kafel--limonka { background: var(--limonka); } .kafel--maslo { background: var(--maslo); }
.kafel--niebo { background: var(--niebo); } .kafel--roz { background: var(--roz); } .kafel--bialy { background: var(--bialy); }
.kafel--tusz { background: var(--tusz); color: var(--bialy); }
.kafel-nazwa { font-weight: 800; font-stretch: 78%; letter-spacing: -.03em; font-size: clamp(22px, 5.6vw, 28px); line-height: .95; }
.kafel-tagi { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tag { display: inline-block; padding: 3px 9px; border: 2px solid var(--tusz); border-radius: 999px; background: var(--bialy); color: var(--tusz); font-weight: 700; font-size: 13px; line-height: 1.3; }
.tag--ciemny { background: var(--tusz); color: var(--bialy); }
.kafel--tusz .tag { border-color: var(--bialy); }
.kafel--tusz .tag--ciemny { background: var(--limonka); color: var(--tusz); border-color: var(--limonka); }
.kafel-dol { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.kafel-strzalka { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--tusz); color: var(--bialy); }
.kafel-strzalka .ikona { width: 18px; height: 18px; }
.kafel--tusz .kafel-strzalka { background: var(--limonka); color: var(--tusz); }
.kafel--tusz :focus-visible, .kafel--tusz:focus-visible { outline-color: var(--tusz); }

/* Składniki: kolorowe pigułki z liczbą kosmetyków */
.sekcja-lead { margin: -4px 0 16px; color: var(--druk); max-width: 60ch; }
.skladniki { display: flex; flex-wrap: wrap; gap: 8px; }
.skl {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 7px 0 16px;
  border: 2px solid var(--tusz); border-radius: 999px; background: var(--bialy); text-decoration: none;
  font-weight: 700; font-size: 16px; line-height: 1.2;
}
.skl small { min-width: 32px; height: 32px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; background: var(--tusz); color: var(--bialy); font-weight: 800; font-size: 13px; }
.skl--roz { background: var(--roz); } .skl--niebo { background: var(--niebo); } .skl--limonka { background: var(--limonka); }
.skl--liliowy { background: var(--liliowy); } .skl--maslo { background: var(--maslo); }
.skladniki--male .skl { min-height: 44px; font-weight: 600; font-size: 15px; padding-left: 14px; }
.skladniki--male .skl small { min-width: 28px; height: 28px; font-size: 12px; background: var(--mgla); color: var(--tusz); }

/* Kroki */
.kroki-lista { display: grid; gap: 14px; counter-reset: krok; }
.kroki-lista li { counter-increment: krok; display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; padding: 16px 18px; border: 2px solid var(--tusz); border-radius: 24px; }
.kroki-lista li > * { grid-column: 2; }
.kroki-lista li::before { content: counter(krok); grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--limonka); border: 2px solid var(--tusz); font-weight: 800; font-size: 20px; }
.kroki-lista li:nth-child(2)::before { background: var(--niebo); }
.kroki-lista li:nth-child(3)::before { background: var(--roz); }
.kroki-lista p { margin-top: 6px; color: var(--druk); }
@media (min-width: 760px) { .kroki-lista { grid-template-columns: repeat(3, 1fr); } }

/* Karty kosmetyków na listach */
.blizniaki { display: grid; gap: 12px; }
@media (min-width: 760px) { .blizniaki { grid-template-columns: 1fr 1fr; } }
.karta-blizniak {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 16px 18px 18px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: 24px;
  text-decoration: none; transition: transform .15s ease-out, background-color .15s ease-out;
}
.karta-blizniak:active { transform: translateY(1px); }
.karta-gora { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.karta-nazwa { font-weight: 800; font-stretch: 80%; font-size: 22px; letter-spacing: -.02em; line-height: 1.05; }
.karta-wspolne { font-size: 15px; color: var(--druk); }
.karta-dol { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; font: 400 14px/1.3 var(--font-druk); font-variant-numeric: tabular-nums; }
.zgodnosc { font-weight: 600; }
.znaczek { display: inline-block; margin-top: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; width: fit-content; border: 2px solid var(--tusz); }
.znaczek--pasuje { background: var(--liliowy); }
.znaczek--ostroznie { background: var(--maslo); }
.pusto { padding: 20px; border: 2px dashed var(--tusz); border-radius: 24px; }
.pusto p + p { margin-top: 6px; }
.blok .karta-blizniak, .blok .pusto { background: var(--bialy); }

/* Karta kosmetyku */
.okruszki { margin-top: 14px; font-size: 14px; color: var(--druk); }
.okruszki ol { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.okruszki li { display: flex; align-items: center; min-width: 0; flex-shrink: 0; }
.okruszki li:not(:first-child):not(:last-child) { flex-shrink: 1; }
.okruszki li:last-child { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.okruszki li + li::before { content: "/"; margin: 0 8px; opacity: .5; flex-shrink: 0; }
.okruszki a { display: block; padding: 12px 0; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.produkt-glowa {
  position: relative; margin-top: 18px; padding: 22px 20px 22px; border-radius: var(--r-karta);
  background: var(--tusz); color: var(--bialy);
}
.produkt-glowa h1 { margin-top: 4px; font-size: clamp(34px, 8vw, 56px); max-width: 16ch; }
.produkt-glowa .kp-ceny { justify-content: flex-start; gap: 16px; margin-top: 18px; }
.produkt-glowa .kp-ceny b { font-size: 44px; }
.produkt-glowa .kp-ceny > span { text-align: left; }
.produkt-glowa .zrodlo { margin-top: 14px; font-size: 14px; color: #CFCBDA; }
.produkt-glowa :focus-visible, .stopka :focus-visible { outline-color: var(--bialy); }
.dla-skory { padding: 20px; background: var(--liliowy); border-radius: var(--r-karta); margin-top: 16px !important; }
.dla-skory h2 { font-size: 28px; margin-bottom: 8px !important; }
.dla-skory .zasady { margin-top: 12px; }
.aktywne { display: grid; gap: 12px; }
@media (min-width: 760px) { .aktywne { grid-template-columns: 1fr 1fr; } }
.aktywny-karta { padding: 16px 18px; border: 2px solid var(--tusz); border-radius: 24px; }
.aktywny-karta h3 { margin-bottom: 6px; }
.aktywny-karta h3 a { text-decoration: none; }
.dla-kogo { margin-top: 6px; font-size: 15px; color: var(--druk); }
.ostrzezenie { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 15px; color: var(--bursztyn); font-weight: 600; }
.ostrzezenie .ikona { margin-top: 2px; }
.blok .ostrzezenie { color: var(--tusz); }
.laczenie .akcje .przycisk { min-height: 48px; font-size: 16px; }
.flagi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Etykieta ze składem (głos opakowania) */
.etykieta { background: var(--bialy); border: 2px solid var(--tusz); border-radius: 20px; padding: 16px 16px 18px; margin-top: 8px; }
.etykieta-marka { font-weight: 700; font-size: 14px; opacity: .78; }
.etykieta-nazwa { font-weight: 800; font-stretch: 80%; font-size: 20px; line-height: 1.1; margin: 2px 0 10px; }
.etykieta-tytul { font: 600 13px/1.3 var(--font-druk); letter-spacing: .04em; color: var(--druk); border-top: 2px dashed var(--tusz); padding-top: 10px; margin-bottom: 4px; }
.etykieta-sklad { font: 400 15px/1.5 var(--font-druk); overflow-wrap: anywhere; }
.etykieta-rola { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--tusz); color: var(--bialy); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.sk--reszta { color: var(--druk); font-style: italic; }
.sk.aktywny { font-weight: 600; text-decoration: underline 1.5px; text-underline-offset: 2px; }
.sk.zakres {
  font-weight: 600; color: var(--tusz); text-decoration: underline 1.5px; text-underline-offset: 2px;
  background-image: linear-gradient(100deg, transparent .12em, var(--zakres) .28em, var(--zakres) calc(100% - .22em), transparent calc(100% - .08em));
  background-repeat: no-repeat; background-position: 0 70%; background-size: 100% 82%;
  padding: 0 .14em; margin: 0 -.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .czeka .sk.zakres { background-size: 0% 82%; transition: background-size 420ms cubic-bezier(.22,.8,.3,1) calc(var(--i, 0) * 90ms); }
  .czeka.widoczne .sk.zakres { background-size: 100% 82%; }
}
.para-etykiet { display: grid; gap: 18px; margin-top: 16px; }
@media (min-width: 760px) { .para-etykiet { grid-template-columns: 1fr 1fr; } }
.para-etykiet--pelna { grid-template-columns: 1fr; }
@media (min-width: 760px) { .para-etykiet--pelna { grid-template-columns: 1fr 1fr; } }
.cenowka { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 2px solid var(--tusz); border-radius: 12px; background: var(--bialy); }
.cenowka-kwota { font-weight: 800; font-stretch: 80%; font-size: 24px; line-height: 1; }
.cenowka-jedn { font: 400 13px/1.3 var(--font-druk); color: var(--druk); }

/* Porównanie pary */
.porownanie-glowa { margin: 18px 0 40px; }
.porownanie-glowa h1 { font-size: clamp(36px, 9vw, 64px); max-width: 15ch; }
.werdykt h3 { margin: 24px 0 10px; }
.dodatkowe li + li { margin-top: 12px; }
.zgodnosc-pasek { display: flex; align-items: center; gap: 12px; margin-top: 24px; max-width: 460px; }
.segmenty { display: flex; gap: 4px; flex: 1; }
.segmenty i { flex: 1; height: 16px; border-radius: 5px; background: var(--tusz); }
.segmenty i.pusty { background: #E2E0E8; }
.zgodnosc-pasek b { font-weight: 800; font-stretch: 78%; font-size: 26px; letter-spacing: -.02em; }

/* Porównanie pary: na komputerze dwie kolumny, po prawej przyklejony panel ze składami. */
.porownanie-uklad { display: grid; gap: 0 56px; }
.porownanie-lewa { min-width: 0; }
.sklady { margin-top: 56px; padding: 22px 18px 20px; background: var(--maslo); border: 2px solid var(--tusz); border-radius: var(--r-karta); }
.sklady h2 { font-size: clamp(26px, 6vw, 34px); }
.sklady-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 6px; font-size: 14px; line-height: 1.4; }
.sklady-legenda .sk { font: 600 14px/1.4 var(--font-druk); }
.sklady-legenda .sk + * { margin-right: 6px; }
.sklady .etykieta { margin-top: 6px; }
.sklady .etykieta-sklad { font-size: 14.5px; }
.sklady .link-strzalka { margin-top: 6px; }
.etykieta-rola--blizniak { background: var(--niebo); color: var(--tusz); box-shadow: inset 0 0 0 2px var(--tusz); }
@media (min-width: 1040px) {
  .porownanie-uklad { grid-template-columns: minmax(0, 1fr) 440px; align-items: start; }
  .sklady { position: sticky; top: 16px; margin-top: 24px; }
  .sklady--dlugie { position: static; }
  .para-etykiet--panel { grid-template-columns: 1fr; gap: 12px; }
}

/* Strony list: kategoria, składnik, 404 */
.lista-strona { margin-top: 18px !important; }
.lista-strona h1, .artykul h1 { font-size: clamp(38px, 9vw, 64px); }
.lista-strona h2 { margin: 36px 0 14px; font-size: clamp(26px, 6vw, 36px); }
.lista-strona .lead { margin: 12px 0 22px; }
.pusto--strona { margin-top: 28px; }
.pusto--strona h1 { font-size: 40px; margin-bottom: 10px; }

/* Stopka: ciemna, od krawędzi do krawędzi */
.stopka { margin-top: 88px; padding: 40px 0 56px; background: var(--tusz); color: var(--bialy); border-radius: var(--r-blok) var(--r-blok) 0 0; }
.stopka > * { width: min(var(--szer), 100% - 2 * var(--krawedz)); margin-inline: auto; }
.stopka-znak { font-weight: 800; font-stretch: 78%; font-size: 48px; letter-spacing: -.04em; line-height: 1; color: var(--limonka); }
.stopka p:not(.stopka-znak):not(.stopka-linki) { margin-top: 16px; max-width: 62ch; margin-inline: max(var(--krawedz), (100% - var(--szer)) / 2) auto; color: #D6D3E0; font-size: 15px; }
.stopka-linki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px !important; }
.stopka-linki a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid #5E5A6E; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; }

/* Najechanie tylko tam, gdzie jest kursor; na telefonie stan hover zostawał po dotknięciu. */
@media (hover: hover) and (pointer: fine) {
  .link-strzalka:hover .ikona { transform: translateX(3px); }
  .podpowiedzi li > a:hover, .podpowiedzi li[data-i]:hover { background: var(--mgla); }
  .karta-blizniak:hover { background: var(--mgla); }
  .blok .karta-blizniak:hover { background: var(--mgla); }
  .para-link:hover, .kafel:hover { transform: translateY(-3px); }
  .skladniki--male .skl:hover { background: var(--mgla); }
  .kp--oryginal:hover { transform: rotate(-2.2deg) translateY(-3px); }
  .kp--blizniak:hover { transform: rotate(1.6deg) translateY(-3px); }
  .przycisk:hover { filter: brightness(.96); }
  .stopka-linki a:hover { border-color: var(--bialy); }
  .skrot:hover, .chip:hover { background-color: var(--mgla); }
  .skrot--roz:hover { background: var(--roz); } .skrot--niebo:hover { background: var(--niebo); }
  .skrot--liliowy:hover { background: var(--liliowy); } .skrot--maslo:hover { background: var(--maslo); }
}

/* ===== Ruch inspirowany Aardvark Book Club (aardvarkbookclub.com) ===== */

/* Litery w przyciskach: rozbijane przez app.js tylko przy myszce. */
.litery { display: inline-block; }
.litera { display: inline-block; white-space: pre; }

/* Falujące tło nagłówka: dwie plamy limonki oddychają powoli (transform, bez przemalowań). */
.blok--hero { position: relative; isolation: isolate; }
.tlo-fale { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.tlo-fale svg { width: 100%; height: 100%; }
.fala--jasna { fill: #E2F98C; stroke: #E2F98C; }
.fala--srednia { fill: #CBEF55; stroke: #CBEF55; }
.fala--ciemna { fill: #C3E64A; stroke: #C3E64A; }
.fala { stroke-width: 0; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  /* Obrót plus „oddech” obrysu jak u Aardvarka (stroke-width, sine.inOut 3 s): krawędzie fal płyną. */
  .fala { transform-box: fill-box; transform-origin: 50% 50%; animation: fala 14s var(--ease-fala) infinite alternate, oddech 3.2s var(--ease-fala) infinite alternate; }
  .fala--ciemna { animation-duration: 11s, 3.8s; animation-delay: -4s, -1s; }
  .fala--srednia { animation-duration: 16s, 2.9s; animation-delay: -7s, -2s; }
  @keyframes oddech { to { stroke-width: 46; } }
  .blok--hero.poza .fala, .blok--hero.poza .plywak-ruch { animation-play-state: paused; }
  @keyframes fala { from { transform: rotate(-4deg) scale(1); } to { transform: rotate(5deg) scale(1.08); } }
}

/* Taśmy z przesuwanym napisem, skrzyżowane jak paski z kodem u Aardvarka. */
.tasmy { position: relative; height: 176px; margin: 10px calc(50% - 50vw) 0; overflow: clip; }
.tasma { position: absolute; left: -5%; width: 110%; padding: 10px 0; border-block: 2px solid var(--tusz); overflow: hidden; }
/* Na telefonie jedna nad drugą (przy wąskim ekranie skrzyżowane zasłaniały się), od 900 px krzyżują się na środku. */
.tasma--roz { top: 20px; background: var(--roz); transform: rotate(-4deg); z-index: 1; }
.tasma--niebo { top: 92px; background: var(--niebo); transform: rotate(3deg); }
@media (min-width: 900px) { .tasmy { height: 150px; } .tasma--roz { top: 46px; transform: rotate(-3deg); } .tasma--niebo { top: 46px; transform: rotate(2.4deg); } }
.tasma-tor { display: flex; width: max-content; }
.tasma-tor span { padding: 0 18px; font-weight: 800; font-stretch: 78%; letter-spacing: -.02em; font-size: clamp(22px, 5vw, 32px); line-height: 1.2; white-space: nowrap; }
.tasma-tor span::after { content: "•"; margin-left: 36px; }
@media (prefers-reduced-motion: no-preference) {
  .tasma-tor { animation: tasma 48s linear infinite; }
  .tasma-tor--wstecz { animation-direction: reverse; animation-duration: 56s; }
  @keyframes tasma { to { transform: translateX(-50%); } }
}

/* Odręczne podpisy (u Aardvarka: „Shipping to the USA & Canada”), litery wpadają po kolei. */
.odrecznie { width: fit-content; font-family: var(--font-reka); font-weight: 600; font-size: 27px; line-height: 1.05; color: var(--tusz); transform: rotate(-4deg); }
.odrecznie--hero { margin: 24px 0 -4px 6px; }
.odrecznie--hero::after { content: "\00a0↓"; font-family: var(--font); font-weight: 700; font-size: 20px; }
.odrecznie--zdjecie { margin: 12px 0 -4px 4px; transform: rotate(-3deg); }
.odrecznie--przesun { margin: -6px 4px 8px auto; transform: rotate(3deg); }
.odrecznie--przesun::after { content: "\00a0→"; font-family: var(--font); font-weight: 700; font-size: 20px; }
@media (min-width: 760px) { .odrecznie--przesun { display: none; } }
.odrecznie--kroki { margin: -6px 0 16px 4px; }
.odrecznie .litera { display: inline-block; }

/* Wstęga z napisem po krzywej, przesuwana przewijaniem. */
.wstega { margin: 72px calc(50% - 50vw) -36px; overflow: clip; }
.wstega svg { display: block; width: max(100%, 920px); height: auto; margin-left: 50%; transform: translateX(-50%); overflow: visible; }
.wstega-obrys { fill: none; stroke: var(--tusz); stroke-width: 80; }
.wstega-wypelnienie { fill: none; stroke: var(--limonka); stroke-width: 74; }
.wstega-tekst { fill: var(--tusz); font-family: var(--font); font-weight: 800; font-stretch: 78%; font-size: 40px; letter-spacing: -.01em; dominant-baseline: central; }

/* Wejścia przy przewijaniu: ukryte do chwili, gdy app.js je odpali; awaryjnie pokazują się same po 3 s. */
@keyframes pokaz-awaryjnie { to { opacity: 1; } }
.ruch [data-wejscie]:not(.weszlo) > *, .ruch [data-odrecznie]:not(.weszlo) { opacity: 0; animation: pokaz-awaryjnie 1ms 3s forwards; }

/* Stopka wysuwa się spod treści (u Aardvarka scrub na footer), tu CSS scroll-driven tam, gdzie jest wsparcie. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stopka { view-timeline: --stopka block; }
    .stopka > * { animation: stopka-wjazd linear both; animation-timeline: --stopka; animation-range: entry 0% entry 85%; }
    .stopka > .stopka-znak { animation-name: stopka-znak; }
    @keyframes stopka-wjazd { from { transform: translateY(-56px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes stopka-znak { from { transform: translateY(-56px) scale(.82) rotate(-5deg); opacity: 0; } to { transform: none; opacity: 1; } }
  }
}

/* Przejście między stronami: nowa strona odsłania się kołem od miejsca kliknięcia (u Aardvarka plama z logo). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: strona-wjazd 380ms var(--ease-out) both; }
@keyframes strona-wjazd {
  from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 30%)); }
  to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 30%)); }
}

/* Ekran powitalny (u Aardvarka fioletowy z logo, zwijany grubym pociągnięciem): tylko pierwsze wejście na główną w sesji. */
.intro { display: none; }
.intro-tak .intro { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; animation: intro-koniec 1ms 1500ms forwards; }
.intro-wstega { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-wstega path { fill: none; stroke: var(--tusz); stroke-width: 190; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: intro-zwin 820ms cubic-bezier(0.77, 0, 0.175, 1) 620ms forwards; }
.intro-znak { position: absolute; inset: 0; display: grid; place-items: center; color: var(--limonka); font-weight: 800; font-stretch: 78%; letter-spacing: -.04em; font-size: clamp(56px, 14vw, 120px); animation: intro-znak 600ms var(--sprezyna) both, intro-znak-wyjscie 220ms var(--ease-out) 560ms forwards; }
@keyframes intro-znak { from { transform: scale(.6) rotate(-8deg); opacity: 0; } }
@keyframes intro-znak-wyjscie { to { transform: scale(.9); opacity: 0; } }
@keyframes intro-zwin { to { stroke-dashoffset: -1; } }
@keyframes intro-koniec { to { visibility: hidden; } }

/* Słowa nagłówka wskakują po kolei (rozbija app.js). */
.slowo { display: inline-block; }
.ruch [data-slowa]:not(.weszlo), .ruch [data-hero-wejscie]:not(.weszlo) { opacity: 0; animation: pokaz-awaryjnie 1ms 3s forwards; }

/* Pływające kosmetyki: pod treścią, nigdy nie zasłaniają tekstu ani pól. */
.hero-siatka { position: relative; z-index: 1; }
.plywaki { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plywak { position: absolute; width: var(--w); will-change: transform; }
.plywak svg { display: block; width: 100%; height: auto; overflow: visible; }
.plywak-wejscie { transform: rotate(var(--obrot, 0deg)); }
/* Na telefonie obok końcówki nagłówka (krótsza ostatnia linia), z dala od opisu i pola. */
.plywak--pipeta { --w: 50px; --obrot: 18deg; top: 84px; right: 16px; }
.plywak--szeroki { display: none; }
.hero-przyklad { position: relative; }
.hero-przyklad > :not(.plywaki) { position: relative; z-index: 1; }
.plywaki--przyklad { inset: auto 0 auto auto; top: 0; width: 0; height: 0; }
.plywak--sloik { --w: 70px; --obrot: 10deg; top: 4px; right: -4px; }
@media (min-width: 1040px) {
  .plywak--pipeta { --w: 118px; top: 104px; right: 2%; }
  .plywak--szeroki { display: block; }
  .plywak--tubka { --w: 150px; --obrot: -24deg; left: 5%; bottom: 3%; }
  .plywak--pompka { --w: 112px; --obrot: -12deg; right: -1%; bottom: 9%; }
  .plywak--sloik { --w: 104px; top: -18px; right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .plywak-ruch { animation: kolys 6s var(--ease-fala) infinite alternate; }
  .plywak--tubka .plywak-ruch { animation-duration: 7.5s; animation-delay: -2s; }
  .plywak--pompka .plywak-ruch { animation-duration: 6.8s; animation-delay: -4s; }
  .plywak--sloik .plywak-ruch { animation-duration: 5.4s; animation-delay: -1s; }
  @keyframes kolys { from { transform: translateY(-8px) rotate(-3deg); } to { transform: translateY(10px) rotate(4deg); } }
}

/* Konto: przycisk w nagłówku, strona /konto/, półka, przycisk Google */
.naglowek-akcje { display: flex; align-items: center; gap: 8px; }
.naglowek-konto {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--tusz); border-radius: 999px; background: var(--bialy); color: var(--tusz);
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.naglowek-konto--zalogowana::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--roz); box-shadow: 0 0 0 2px var(--tusz); }
@media (max-width: 400px) { .naglowek-szukaj span { display: none; } .naglowek-szukaj { padding: 0 13px; } }
.przycisk--google { background: var(--bialy); gap: 12px; }
.google-znak { width: 22px; height: 22px; flex: none; }
.przycisk--nieaktywny { opacity: .6; cursor: default; }
.korzysci { display: grid; gap: 10px; margin-top: 18px; max-width: 60ch; }
.korzysci li { display: flex; gap: 10px; align-items: flex-start; }
.korzysci .ikona { width: 24px; height: 24px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--tusz); fill: var(--bialy); }
.blok--roz .korzysci li { padding-left: 2px; }
.konto-wejscie h1 { max-width: 16ch; }
.konto-ladowanie { margin: 48px 0; color: var(--druk); }
.konto-glowa { margin: 28px 0 8px; }
.konto-glowa h1 { margin-top: 10px; }
.konto-glowa .kp-rola { background: var(--tusz); color: var(--bialy); }
.konto-email { margin-top: 8px; color: var(--druk); }
.konto .blok { margin-top: 20px; }
.polka-suma { margin-top: 18px; padding: 14px 16px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: var(--r-pole); }
.polka-suma .odznaka { font-size: 14px; }
.polka-lista { display: grid; gap: 10px; margin: 18px 0 6px; }
.polka-pozycja { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 14px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: 22px; }
.polka-kosmetyk { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.polka-nazwa { font-weight: 800; font-stretch: 82%; font-size: 19px; line-height: 1.1; letter-spacing: -.01em; }
.polka-cena { font: 400 14px/1.3 var(--font-druk); color: var(--druk); }
.polka-blizniak { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; background: var(--niebo); border: 2px solid var(--tusz); border-radius: 16px; text-decoration: none; }
.polka-blizniak .marka { opacity: .85; }
.polka-blizniak .polka-nazwa { flex-basis: 100%; font-size: 17px; }
.polka-brak { grid-column: 1 / -1; font-size: 14px; color: var(--druk); }
.polka-pozycja .pora-usun { grid-column: 2; grid-row: 1; align-self: start; }
.akcje--polka { margin-top: 16px; }
.przycisk--polka { background: var(--bialy); }
.przycisk--polka .ikona { display: none; }
.przycisk--polka.na-polce { background: var(--limonka); }
.przycisk--polka.na-polce .ikona { display: block; }
.skany { display: grid; gap: 10px; }
.skan { padding: 14px 16px; border: 2px solid var(--tusz); border-radius: 20px; }
.skan-glowa span { color: var(--druk); font-size: 14px; }
.skan-wyniki { margin-top: 6px; font-size: 15px; }
.przycisk.potwierdz { background: var(--roz); }
.korzysci--kropki li::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--tusz); }
.zgoda { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 12px 14px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: var(--r-pole); font-size: 15px; line-height: 1.45; cursor: pointer; }
.zgoda input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--tusz); }
.zgoda[hidden] { display: none; }
.dokument { max-width: 760px; margin-top: 28px; }
.dokument h2 { font-size: clamp(24px, 5vw, 30px); margin: 34px 0 10px; }
.dokument ul, .dokument ol { list-style: revert; padding-left: 22px; display: grid; gap: 8px; }
.dokument p + p { margin-top: 10px; }
.plany { display: grid; gap: 10px; margin-top: 18px; max-width: 560px; }
@media (min-width: 560px) { .plany { grid-template-columns: 1fr 1fr; } }
.plan { position: relative; cursor: pointer; }
.plan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-karta { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: 20px; }
.plan input:checked + .plan-karta { background: var(--tusz); color: var(--bialy); }
.plan input:focus-visible + .plan-karta { outline: 3px solid var(--tusz); outline-offset: 3px; }
.plan-nazwa { font-weight: 700; font-size: 15px; }
.plan-cena { font-weight: 800; font-stretch: 78%; letter-spacing: -.02em; font-size: 34px; line-height: 1.05; }
.plan-opis { font-size: 14px; opacity: .85; }
.korzysci .tag { vertical-align: 2px; }
.audyt { display: grid; gap: 10px; margin-top: 18px; }
.audyt-pozycja { display: grid; gap: 8px; padding: 14px; background: var(--bialy); border: 2px solid var(--tusz); border-radius: 22px; }
.audyt-pozycja > p:first-child { display: flex; flex-direction: column; gap: 2px; }
.audyt-liczby { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 14px/1.3 var(--font-druk); color: var(--druk); }
[data-audyt-laczenie] h3 { margin: 24px 0 10px; }
.zgoda--premium { max-width: 560px; }
.przycisk:disabled { opacity: .45; cursor: not-allowed; }