/* Strona główna serwisu. Klasy z przedrostkiem hp-, żeby nie zderzyć się
   z regułami w styl.css. Zmienne kolorów i fonty biorą się z :root
   zdefiniowanego w styl.css (ten plik ładuje się zawsze razem z nim). */

/* main ma w styl.css max-width:1240px i padding: tutaj sekcje same
   rozciągają się na całą szerokość okna, więc nadpisujemy to regułą
   o wyższej specyficzności zamiast ruszać styl.css. */
main.hp-main{max-width:none;margin:0;padding:0}

.hp-sect{max-width:1180px;margin:0 auto;padding:0 34px}
.hp-sect h2{font-size:clamp(1.5rem,2.7vw,2.1rem);margin-bottom:10px}
.hp-sect .lede{color:var(--cichy);max-width:58ch;margin-bottom:26px;font-size:1rem}

/* ---- hero: dwa wejścia i panel dowodu (zdjęciowa karuzela usunięta 23.09,
   patrz komentarz w glowna.html przy sekcji 1) ---- */
.hp-hero{position:relative;overflow:hidden}
.hp-hero-media{position:absolute;inset:0;overflow:hidden}
.hp-hero-karuzela{position:absolute;inset:0}
/* Takt jednego kadru: dwie sekundy pojawiania, szesc spokoju, dwie i pol
   gasniecia, sekunda ciszy, razem 11,5 s. Cztery kadry daja cykl 46 s.
   Poprzednia wersja (cykl 32 s) gasila kadr w niecale dwie sekundy i robila
   to W TRAKCIE pojawiania sie nastepnego, wiec przez chwile widac bylo dwa
   polprzezroczyste zdjecia naraz i przejscie czytalo sie jak szarpniecie.
   Kadr gasnie niemal do konca, ale NIE do zera: przy pelnym wygaszeniu przez
   sekunde hero pokazywalo samo jasne tlo, a karta z liczbami wisiala na
   pustym polu, co czytalo sie jak niedoladowana strona. Zostaje 12 procent,
   czyli slad kadru zamiast bieli, i dopiero pod nowym kadrem schodzi do zera.
   Zmierzone sekunda po sekundzie: w zadnym momencie nie ma dwoch kadrow
   widocznych naraz, bo drugi z nich jest wtedy najwyzej na 12 procentach. */
.hp-hero-karuzela div{position:absolute;inset:0;background-size:cover;background-position:74% 48%;
  opacity:0;animation:hpHeroPrzejscie 46s infinite}
.hp-hero-karuzela div:nth-child(1){opacity:1;animation-delay:0s}
.hp-hero-karuzela div:nth-child(2){animation-delay:11.5s}
.hp-hero-karuzela div:nth-child(3){animation-delay:23s}
.hp-hero-karuzela div:nth-child(4){animation-delay:34.5s}
@keyframes hpHeroPrzejscie{
  0%{opacity:0}
  4.35%{opacity:1}
  17.4%{opacity:1}
  22.83%{opacity:.12}
  25%{opacity:.12}
  27.2%{opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .hp-hero-karuzela div{animation:none;opacity:0}
  .hp-hero-karuzela div:nth-child(1){opacity:1}
}
/* Scrim gesty po lewej, gdzie stoi tekst, i przejrzysty w srodku, gdzie widac
   sloiki. Po prawej NIE musi bronic czytelnosci, bo tam lezy panel dowodu na
   wlasnym, nieprzezroczystym tle karty. */
.hp-hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(241,245,248,.98) 0%,rgba(241,245,248,.92) 36%,rgba(241,245,248,.42) 62%,rgba(241,245,248,.12) 100%)}
.hp-hero-in{position:relative;display:flex;gap:40px;align-items:flex-start;
  max-width:1180px;margin:0 auto;padding:60px 34px;width:100%}
.hp-hero-tresc{flex:1;min-width:0}
/* Jedyny h1 w serwisie z wlasnym rozmiarem zamiast globalnej reguly w
   styl.css: to hero sekcji otwierajacej strone glowna, z zalozenia wiekszy
   niz naglowki na stronach podrzednych. */
.hp-hero-in h1{font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:26ch;margin:14px 0 0}
.hp-hero-in .lead{font-size:1.05rem;color:var(--atrament-2);max-width:52ch;margin:16px 0 0;line-height:1.6}
.hp-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;
  margin-top:26px;max-width:700px}

/* Panel hero: gesty, tabelaryczny, bez cienia. Szerokosc stala, bo tresc
   w foncie mono ma sens tylko przy przewidywalnej szerokosci kolumny.
   Wysokosc (min-height) jest dopisywana z JS na najwyzszym bloku z puli
   (renderBlokiWiedzy), zeby rotacja nie przesuwala tresci pod spodem. */
.hp-hero-panel{flex:0 0 320px;background:var(--karta);border:1px solid var(--kreska);
  border-radius:var(--r);padding:20px 22px 18px;display:flex;flex-direction:column}
.hp-hero-panel:focus-visible{outline:2px solid var(--lazur);outline-offset:2px}
/* Wrapper jedynego widocznego bloku: cel przejscia opacity przy rotacji,
   zeby podmiana tekstu nie byla ciecien, tylko lagodnym zanikiem. */
.hp-blok{display:flex;flex-direction:column;gap:10px;transition:opacity .6s ease}
.hp-blok-znika{opacity:0}
/* Tytul bloku, nie nadtytul: przy rotujacej tresci to jedyna rzecz, ktora
   mowi, o czym jest to, co wlasnie czytasz, wiec musi byc widoczny z
   odleglosci reki. Szare wersaliki 0,66 rem gubily sie przy zdjeciu w tle. */
.hp-hero-panel-naglowek{display:block;font-size:1.02rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.25;color:var(--atrament)}
/* Kazde zdanie bloku jako osobny akapit z kreska u gory, poza pierwszym
   (nadtytul juz odgranicza go wizualnie). Ten sam rozmiar i kolor co dawny
   .hp-hero-panel-przyklad, ktory ten uklad zastepuje. */
.hp-hero-panel-tresc{display:flex;flex-direction:column;gap:8px}
.hp-hero-panel-tresc p{margin:0;padding-top:8px;border-top:1px solid var(--kreska);
  font-size:.83rem;color:var(--atrament-2);line-height:1.5}
.hp-hero-panel-tresc p:first-child{border-top:none;padding-top:0}
/* Liczby wewnatrz zdania (podkreslone regexem w hpPodkresliLiczby) w foncie
   mono, jak kazda inna liczba na tej stronie. */
.hp-blok-liczba{font-family:var(--dane)}
.hp-blok-liczba.dziesietna{font-family:inherit;font-weight:600;font-variant-numeric:tabular-nums}
.hp-hero-panel-stopka{margin:0;font-size:.71rem;color:var(--cichy);line-height:1.4}
/* Cala karta jest odnosnikiem, wiec bez tego wylaczenia przegladarka
   podkreslala takze naglowek i caly akapit w srodku: trzy linie tekstu z
   kreska pod spodem wygladaly jak blad renderowania, nie jak zaproszenie do
   klikniecia. Podkreslenie zostaje tylko tam, gdzie cos znaczy, czyli pod
   samym wezwaniem, i dopiero po najechaniu. */
.hp-door{padding:24px;text-align:left;display:flex;flex-direction:column;gap:12px;min-height:170px;
  background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);font:inherit;color:inherit;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(12,27,38,.04);
  transition:border-color .16s,transform .16s,box-shadow .16s}
.hp-door:hover{border-color:var(--lazur);transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,27,38,.10)}
.hp-door:focus-visible{outline:2px solid var(--lazur);outline-offset:2px}
.hp-door h2{font-size:1.3rem;text-decoration:none}
.hp-door p{color:var(--atrament-2);font-size:.89rem;margin:0;text-decoration:none}
.hp-door .hp-go{margin-top:auto;color:var(--lazur);font-weight:600;font-size:.85rem}
.hp-door:hover .hp-go{text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){
  /* Panel dowodu schodzi POD dwa wejścia, nie nad nie: kolumna flex zamienia
     się w wiersz, a kolejność w DOM (tresc przed panelem) robi resztę. */
  /* align-items:stretch jest tu konieczne, nie kosmetyczne: reguła wyżej ma
     flex-start, a w kolumnie to ustawienie steruje szerokoscia, wiec
     dzieci brały szerokosc wlasnej tresci. Siatka dwoch wejsc
     (minmax 290px) rozpychala wtedy strone do 592 px przy ekranie 390
     i cala strona przewijala sie w poziomie. */
  /* Na telefonie zdjecie jest pasem u gory, nie tlem calego hero: przy
     szerokosci 390 px i kadrze 2200 na 933 "cover" skaluje po wysokosci,
     wiec z calego zdjecia widac waski pionowy wycinek rozmytego tla, a
     sloiki zostaja poza kadrem. Pas odwraca proporcje i przedmiot wraca. */
  .hp-hero{padding-top:172px}
  .hp-hero-media,.hp-hero-scrim{height:172px;bottom:auto}
  .hp-hero-scrim{background:linear-gradient(180deg,rgba(241,245,248,0) 0%,
    rgba(241,245,248,0) 58%,rgba(241,245,248,.76) 84%,rgba(241,245,248,1) 100%)}
  .hp-hero-karuzela div{background-position:68% 78%}
  .hp-hero-in{flex-direction:column;align-items:stretch;padding:14px 20px 32px;gap:24px}
  .hp-hero-in h1{font-size:clamp(1.75rem,7.4vw,2.2rem)}
  .hp-doors{gap:12px;margin-top:20px}
  .hp-door{min-height:0;padding:20px}
  .hp-hero-panel{flex-basis:auto}
}

/* ---- dzisiejsza propozycja: material sponsorowany, jedna karta wyśrodkowana
   węziej niż reszta sekcji (860px), żeby oko czytało ją jako coś innego niż
   siatkę katalogu poniżej. Przeniesione z makieta/strefy-promowane.html,
   ekran 2: klasy .promo-* i .hp-promo tam żyły w <style> makiety, tu są
   jedynym źródłem prawdy. ---- */
.hp-promo{background:var(--papier-2);padding:52px 0;border-bottom:1px solid var(--kreska)}
.hp-promo .promo-pas{max-width:860px}
.promo-pas{border:1px solid var(--uwaga);border-radius:var(--r);background:var(--karta);overflow:hidden}
.promo-glowa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 16px;
  background:var(--uwaga-tlo);border-bottom:1px solid var(--uwaga)}
.promo-etykieta{font-family:var(--dane);font-size:.64rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--uwaga);background:var(--karta);border:1px solid var(--uwaga);
  border-radius:var(--r);padding:2px 8px}
.promo-marka{font-size:.79rem;color:var(--atrament-2)}
.promo-marka b{color:var(--atrament)}
.promo-cialo{padding:16px 18px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.promo-obraz{flex:0 0 96px;width:96px;height:96px;border:1px solid var(--kreska);border-radius:var(--r);
  display:grid;place-items:center;background:var(--karta);overflow:hidden}
.promo-obraz img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.promo-obraz-duzy{flex:0 0 150px;width:150px;height:150px}
.promo-tresc{flex:1;min-width:220px;display:flex;flex-direction:column;gap:4px}
.promo-tresc .marka-p{font-family:var(--dane);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--cichy)}
.promo-tresc .nazwa{font-size:.98rem;font-weight:600;font-stretch:104%;letter-spacing:-.01em}
.promo-stat-rz{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px}
.promo-stat .v{display:block;font-family:var(--dane);font-size:1.15rem;font-weight:600;letter-spacing:-.03em}
.promo-stat .l{display:block;font-size:.68rem;color:var(--cichy);margin-top:2px;max-width:22ch;line-height:1.3}
.promo-dawka{font-size:.83rem;color:var(--atrament-2);margin-top:6px}
.promo-dawka b{color:var(--atrament)}
.promo-cta{align-self:center;font-size:.82rem;font-weight:600;color:var(--lazur);text-decoration:none;
  white-space:nowrap}
.promo-sklad{padding:4px 18px 18px;border-top:1px solid var(--kreska)}
.promo-sklad h4{font-size:.82rem;margin:14px 0 10px;color:var(--atrament-2);font-weight:600}
.promo-sklad-lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:5px 16px}
.promo-sklad-lista li{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;
  padding:4px 0;border-bottom:1px solid var(--papier-2)}
.promo-sklad-lista li span:last-child{font-family:var(--dane);font-size:.74rem;color:var(--cichy);
  white-space:nowrap}
.promo-sklad-reszta{margin:10px 0 0;font-size:.78rem;color:var(--cichy);line-height:1.5}
.promo-zielony{margin:0 18px 18px;padding:14px 16px;background:var(--zielen-tlo);border-radius:var(--r)}
.promo-zielony h4{margin:0 0 10px;font-size:.82rem;color:var(--zielen);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
.promo-zielony ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.promo-zielony li{font-size:.85rem;color:var(--atrament);padding-left:16px;position:relative}
.promo-zielony li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--zielen)}
.promo-zrodlo{margin:12px 0 0;font-size:.72rem;color:var(--cichy)}
.promo-cta-wrap{padding:0 18px 18px;text-align:right}
@media (max-width:560px){
  .promo-cialo{padding:14px}
  .promo-obraz-duzy{flex-basis:110px;width:110px;height:110px}
  .promo-sklad,.promo-zielony{margin-left:0;margin-right:0}
}

/* ---- dowód liczbowy pod hero ---- */
.hp-dowod{background:var(--karta);border-bottom:1px solid var(--kreska)}
.hp-dowod-in{max-width:1180px;margin:0 auto;padding:40px 34px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--kreska-mocna)}
.hp-dowod-item{padding:22px 26px 0 0;border-right:1px solid var(--kreska)}
.hp-dowod-item:first-child{padding-left:0}
.hp-dowod-item:last-child{border-right:0;padding-right:0}
.hp-dowod-item:not(:first-child){padding-left:26px}
.hp-dowod-item .v{display:block;font-family:var(--dane);font-size:2.1rem;font-weight:600;letter-spacing:-.05em;color:var(--lazur)}
.hp-dowod-item .v .u{font-size:.55em;color:var(--cichy)}
.hp-dowod-item .l{display:block;font-size:.82rem;color:var(--cichy);margin-top:8px;line-height:1.4;max-width:28ch}
@media (max-width:860px){
  .hp-dowod-in{grid-template-columns:1fr;padding:30px 20px;gap:0}
  .hp-dowod-item{border-right:0;padding:18px 0!important;border-bottom:1px solid var(--kreska)}
  .hp-dowod-item:first-child{padding-top:0!important}
  .hp-dowod-item:last-child{border-bottom:0;padding-bottom:0!important}
}

/* ---- para: najtaniej kontra najdrożej, ciemne tło, własna paleta kontrastu ---- */
.hp-spread{background:var(--atrament);color:var(--karta);border-bottom:1px solid var(--kreska)}
.hp-spread .hp-sect{padding-top:56px;padding-bottom:52px}
.hp-spread .eyebrow{color:var(--noc-cichy)}
.hp-spread h2{color:var(--karta);max-width:25ch;font-size:clamp(1.45rem,2.5vw,1.95rem)}
.hp-spread h2 i{font-style:normal;color:var(--noc-lazur-2)}
.hp-spread .lede{color:var(--noc-cichy);max-width:56ch;margin:12px 0 40px;font-size:.97rem}
.hp-para{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.hp-para-karta{background:var(--noc);border:1px solid var(--noc-kreska);border-radius:var(--r);padding:24px 26px;
  display:flex;flex-direction:column;gap:4px}
.hp-para-etykieta{font-family:var(--dane);font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--noc-cichy)}
.hp-para-nazwa{margin-top:6px;font-size:1.05rem;line-height:1.35;color:var(--karta)}
.hp-para-producent{font-size:.8rem;color:var(--noc-cichy)}
.hp-para-koszt{display:block;font-family:var(--dane);font-size:1.9rem;font-weight:600;letter-spacing:-.03em;
  margin-top:14px;color:var(--noc-lazur-2)}
.hp-para-koszt small{display:block;font-family:var(--font);font-size:.46em;font-weight:400;letter-spacing:0;
  color:var(--noc-cichy);margin-top:4px}
.hp-para-droga .hp-para-koszt{color:var(--noc-stop)}
.hp-para-szczegoly{margin-top:12px;font-size:.79rem;color:var(--noc-cichy);line-height:1.45}
.hp-para-vs{align-self:center;font-family:var(--dane);font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--noc-cichy)}
.hp-skala-cta{display:inline-block;margin-top:22px;color:var(--karta);font-weight:600;font-size:.85rem}
.hp-skala-cta:hover{text-decoration:underline;text-underline-offset:3px}
.hp-brak-danych{color:var(--noc-cichy);font-size:.9rem;padding:20px 0}
@media (max-width:860px){
  .hp-spread .hp-sect{padding-left:20px;padding-right:20px}
  .hp-para{grid-template-columns:1fr}
  .hp-para-vs{padding:2px 0}
}

/* ---- od czego zacząć: kafle celów. Zdjęcie zdjęte z kafla 23.09: liczby i
   nazwy składników z oświadczeniem mówią o celu więcej niż nastrojowa
   fotografia. Bez zdjęcia kafel jest niższy, więc w tej samej szerokości
   kolumny (min. 212px) mieści się więcej w rzędzie -- dziesięć celów stoi
   w dwóch rzędach przy 1440px, tak jak na kroku 1 wywiadu (ten sam kafel,
   serwer/statyczne/cele.html::kafelCeluWybor). ---- */
.hp-cele{background:var(--karta);padding:58px 0;border-bottom:1px solid var(--kreska)}
.hp-goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px;margin-top:8px}
/* Gestsze wnetrze i mniejszy odstep miedzy wierszami niz do 23.09 (14/16/15,
   gap 6): miniatura w rzedzie z nazwa podnosi ten rzad z 19 do 36 px, a te
   cztery piksele padding i dwa gap oddaja czesc tego z powrotem. */
.hp-goal{padding:12px 14px 13px;display:flex;flex-direction:column;gap:5px;text-align:left;font:inherit;color:inherit;
  background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);text-decoration:none;
  transition:border-color .16s,transform .16s}
.hp-goal:hover{border-color:var(--lazur);transform:translateY(-2px);box-shadow:0 8px 18px rgba(12,27,38,.08)}
.hp-goal-glowa{display:flex;align-items:center;gap:11px;min-width:0}
.hp-goal-nazwa{font-size:.94rem;font-weight:600;font-stretch:104%;letter-spacing:-.01em;line-height:1.25;
  color:var(--atrament)}
/* Miniatura celu: TYLKO desktop (od 900px), zlecenie 23.09. Ponizej tego progu
   kafel zostaje dokladnie taki, jaki byl, bo na telefonie dwie kolumny po ~170px
   nie maja z czego oddac 36px na obraz. Obraz jest tlem, nie <img>: element
   ukryty display:none nie pobiera swojego tla, a <img loading="lazy"> ukryty
   tak samo pobiera sie mimo to (zmierzone: 10 z 10 plikow przy oknie 390px).
   Obraz stoi w rzedzie z nazwa, nie w osobnej kolumnie obok calego kafla:
   zmierzone przy 1440px, kolumna tekstu zwezona z 181 do 131px lamie wiersz
   liczb na trzy linie i kafel rosnie o 46px zamiast o nic. */
.hp-goal-obraz{display:none;width:56px;height:56px;flex:0 0 56px;border-radius:var(--r);
  background-color:var(--tlo);background-size:cover;background-position:center}
@media (min-width:900px){
  .hp-goal-obraz{display:block}
}
@media (max-width:560px){
  .hp-goals{grid-template-columns:repeat(2,1fr);gap:8px}
  .hp-goal{padding:11px 12px 12px}
  .hp-goal-nazwa{font-size:.86rem}
}

/* ---- substancje w bazie: dwanascie kafli, plaska siatka bez grupowania ---- */
.hp-substancje{background:var(--papier);padding:58px 0;border-bottom:1px solid var(--kreska)}
.hp-sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px}
.hp-sub{padding:0;overflow:hidden;display:flex;flex-direction:row;align-items:center;gap:11px;
  text-align:left;font:inherit;color:inherit;
  background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);text-decoration:none;
  transition:border-color .16s,transform .16s}
.hp-sub:hover{border-color:var(--lazur);transform:translateY(-2px);box-shadow:0 8px 18px rgba(12,27,38,.08)}
.hp-sub-obraz{display:block;width:44px;height:44px;flex-shrink:0;margin:8px 0 8px 8px;border-radius:6px;
  object-fit:cover;object-position:center;
  background-color:var(--papier-2)}
/* Kafel bez zdjecia: stonowane tlo grupy plus inicjal substancji (litera
   wstawiana w glowna.html). Wczesniej byl tu sam mocny gradient, ktory w
   siatce czytal sie jako obrazek, ktory sie nie wczytal. Kolory zeszly do
   poziomu tla, bo przy pelnym nasyceniu cztery takie kafle przeciagaly na
   siebie cala uwage sekcji. */
.hp-sub-bg{display:grid;place-items:center;font-family:var(--dane);font-size:1.05rem;
  font-weight:600;letter-spacing:-.02em}
.hp-sub-bg--witamina{background:var(--uwaga-tlo);color:var(--uwaga)}
.hp-sub-bg--mineral{background:var(--lazur-tlo);color:var(--lazur)}
.hp-sub-bg--aminokwas{background:var(--zielen-tlo);color:var(--zielen)}
.hp-sub-bg--roslinny{background:var(--zielen-tlo);color:var(--zielen)}
.hp-sub-bg--kwas-tluszczowy{background:var(--stop-tlo);color:var(--stop)}
.hp-sub-bg--inne{background:var(--papier-2);color:var(--atrament-2)}
.hp-sub-tresc{padding:9px 12px 9px 0;display:flex;flex-direction:column;flex:1;min-width:0}
.hp-sub-tresc b{overflow-wrap:anywhere}
.hp-sub-tresc b{font-size:.88rem;color:var(--atrament)}
.hp-sub-tresc span{font-size:.74rem;color:var(--cichy);margin-top:3px}
.hp-sub-flag{display:block;margin-top:6px;font-size:.63rem;color:var(--lazur);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em}
.hp-sub-cta{display:inline-block;margin-top:18px;color:var(--lazur);font-weight:600;font-size:.85rem;
  text-decoration:none}
.hp-sub-cta:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.hp-sub-grid{grid-template-columns:1fr;gap:6px}}

/* ---- czego nie pokazuje etykieta ---- */
/* Jedyna ciemna sekcja na stronie i to jest cala jej robota: siedem sekcji
   na trzech odcieniach bladego blekitu zlewalo sie w jedno dlugie tlo, po
   ktorym oko zjezdzalo bez zatrzymania. Ciemne pole daje stronie oddech i
   pada akurat na zdanie, ktore niesie teze serwisu: nazwa na pudelku to nie
   caly sklad. Liczby zostaja bursztynowe, bo bursztyn znaczy u nas
   "uwaga, sprawdz" i tu znaczy dokladnie to samo. */
.hp-etykieta{background:var(--noc);padding:64px 0;color:var(--noc-tekst)}
.hp-etykieta .eyebrow{color:var(--noc-cichy)}
.hp-etykieta h2{max-width:26ch;margin-top:6px;color:var(--karta)}
.hp-etykieta h2 i{color:var(--noc-lazur)}
.hp-fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;
  margin-top:30px;padding-top:26px;border-top:1px solid rgba(234,241,246,.28)}
.hp-fakt .v{display:block;font-family:var(--dane);font-size:2.1rem;font-weight:600;color:var(--noc-uwaga);letter-spacing:-.04em}
.hp-fakt .l{display:block;font-size:.85rem;color:var(--noc-tekst-2);margin-top:8px;line-height:1.4;max-width:30ch}
.hp-src{font-family:var(--dane);font-size:.62rem;color:var(--noc-lazur);vertical-align:super;cursor:help}
.hp-fakt-przyklad{display:flex;align-items:center}
.hp-fakt-przyklad .l{font-size:.92rem;max-width:none;margin-top:0;color:var(--noc-tekst-2)}
.hp-fakt-przyklad b{color:var(--karta)}
.hp-etykieta-wniosek{margin-top:26px;font-size:.98rem;color:var(--karta);font-weight:600}

/* ---- obsada: pięć osób, jeden magnez ---- */
.hp-cast{background:var(--papier);padding:64px 0;border-bottom:1px solid var(--kreska)}
.hp-cast .hp-sect h2{max-width:22ch}
/* Szesc kafli, nie piec: przy pieciu ostatni rzad zostawal niepelny na kazdej
   szerokosci poza dokladnie pieciokolumnowa, a siatka wygladala na uciety
   ogon. Szesc dzieli sie rowno na trzy i na dwie kolumny, wiec zaden uklad
   nie ma dziury (zlecenie Bartosza 19.09). */
/* Szesc osob w jednym rzedzie zamiast trzech w dwoch rzedach: kafel przy
   proporcji 47/72 mial na desktopie 556 px wysokosci, czyli caly rzad
   zjadal ekran, a sekcja 1563 px. Zdjecie niesie tu kontekst (kabina
   ciezarowki, biurko przy nauce) i przy nizszym kadrze niesie go tak
   samo, bo to nie jest zdjecie, ktoremu trzeba sie przygladac. */
.hp-cast-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.hp-face{position:relative;overflow:hidden;border:1px solid var(--kreska);background:var(--karta);border-radius:var(--r);
  display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:47/82;text-align:left;
  padding:0;font:inherit;cursor:pointer;transition:transform .24s,border-color .24s}
.hp-face{text-decoration:none;color:inherit}
.hp-face:hover{transform:translateY(-5px);border-color:var(--lazur);box-shadow:0 12px 26px rgba(12,27,38,.12)}
.hp-face:focus-visible{outline:2px solid var(--lazur);outline-offset:2px}
.hp-face-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;
  background-color:var(--papier-2);z-index:0}
.hp-face .cap{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;padding:12px 13px 13px;
  background:var(--karta);min-height:104px;border-top:1px solid var(--kreska)}
.hp-face[aria-pressed="true"] .cap{background:var(--lazur-tlo)}
.hp-face .kto{display:block;font-stretch:108%;font-weight:700;font-size:.98rem;letter-spacing:-.02em;line-height:1.2;color:var(--atrament)}
.hp-face .co{display:block;font-size:.72rem;color:var(--cichy);margin-top:3px;line-height:1.3}
.hp-face .flag{align-self:flex-start;margin-top:auto;padding:3px 7px;font-size:.65rem;border-radius:var(--r);
  font-weight:600;font-stretch:100%;background:var(--stop-tlo);color:var(--stop)}
.hp-face .flag.w{background:var(--uwaga-tlo);color:var(--uwaga)}
@media (max-width:1180px){.hp-cast-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.hp-cast-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .hp-cast-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  /* Proporcja 47:72 przy dwoch kolumnach dawala ~275px na kafel (notes/
     MOBILE-PRZEBUDOWA.md); stala wysokosc zamiast aspect-ratio, .hp-face-img
     jest position:absolute wiec wypelnia nowa wysokosc bez zmian. */
  .hp-face{aspect-ratio:auto;height:211px}
}

/* ---- kontrola danych i metoda: przeniesione na /metoda, style zostaja tam
   (serwer/statyczne/metoda.html laduje ten sam plik glowna.css) ---- */

/* ---- zdanie o metodzie z odnosnikiem na /metoda ---- */
.hp-metoda-skrot{background:var(--karta);border-bottom:1px solid var(--kreska)}
.hp-metoda-skrot .hp-sect{padding:38px 34px 34px}
.hp-metoda-skrot h2{max-width:24ch;margin-top:6px}
/* U6: cztery liczby kontroli danych, dotad wylacznie w zwinietym FAQ. Wezsze
   kolumny niz w .hp-fakty, bo liczby sa krotkie, a podpisy jednozdaniowe. */
/* Liczba wpleciona w zdanie, nie licznik nad podpisem. Font tekstowy z
   tabular-nums, nie mono: w IBM Plex Mono spacja tysiecy zajmuje pelna
   szerokosc znaku i "16 133" czyta sie jak dwie liczby (ta sama pulapka co
   przy przecinku dziesietnym, zapis 61 i 63). */
.hp-kontrola-zdanie{font-size:1.02rem;color:var(--atrament-2);max-width:74ch;line-height:1.6;
  margin:0 0 14px}
.hp-kontrola-zdanie .v{font-weight:700;color:var(--atrament);font-variant-numeric:tabular-nums}
.hp-metoda-zdanie{font-size:.97rem;color:var(--atrament-2);max-width:74ch}
.hp-metoda-zdanie a{color:var(--lazur);font-weight:600;text-decoration:none}
.hp-metoda-zdanie a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- popularne marki ---- */
.hp-marki{background:var(--papier);padding:52px 0;border-bottom:1px solid var(--kreska)}
/* Piec stalych kolumn od 900 px pod dziesiec znakow (HP_MAREK w glowna.html):
   auto-fill dawal przy szerszym oknie piec, a przy weszym cztery, wiec liczba
   kafli w ostatnim rzedzie zalezala od przypadku. Ponizej 900 px auto-fill
   zostaje, tam dziesiec dzieli sie rowno na dwie i na piec kolumn. */
.hp-marki-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:8px}
@media (min-width:900px){
  .hp-marki-grid{grid-template-columns:repeat(5,1fr)}
}
.hp-marka{padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;
  color:inherit;background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);
  text-decoration:none;transition:border-color .16s,transform .16s}
.hp-marka:hover{border-color:var(--lazur);transform:translateY(-2px)}
/* Bez cienia: paleta serwisu ma zero cieni wszedzie indziej, a ten jeden
   kafel wypadal z systemu. Podniesienie o 2 px i lazurowa ramka niosa te
   sama informacje o najechaniu. */
/* Kafel marki: znak albo napis, zawsze tej samej wysokosci. Znaki producentow
   maja skrajnie rozne proporcje (od kwadratowej tarczy Aflofarmu po bardzo
   szeroki napis ALLNUTRITION), wiec pole o stalej wysokosci i obraz wpisany w
   nie przez object-fit:contain to jedyny sposob, zeby rzad wygladal rowno.
   Marka bez znaku dostaje swoja nazwe w foncie serwisu i to samo pole, wiec
   siatka nie ma dziur. */
/* Bez licznika pod znakiem (23.09) kafel jest juz tylko ramka na logo, wiec
   znak stoi w pionowym srodku, a wysokosc schodzi ze 118 do 92 px. */
.hp-marka{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:92px}
.hp-marka img{display:block;width:100%;height:56px;object-fit:contain;object-position:left center;
  mix-blend-mode:multiply}
/* Marka bez znaku dostaje napis w tym SAMYM polu 56 px, wysrodkowany w pionie
   jak obraz obok. Bez tego napis siedzial przy gornej krawedzi, a logotypy w
   srodku, i rzad wygladal na niedokonczony w miejscach bez znaku. */
.hp-marka b{display:flex;align-items:center;min-height:56px;font-size:1rem;line-height:1.25}
.hp-marka-znak b{display:none}
.hp-marka b{font-size:.98rem;font-weight:600;letter-spacing:-.01em;color:var(--atrament)}
/* Jedyna siatka na stronie bez wlasnej reguly dla telefonu: minmax 180 px
   przy 322 px tresci dawal JEDNA kolumne, czyli osiem kafli po 118 px w
   pionie na sekcji o najmniejszej wadze decyzyjnej. Dwie kolumny i nizszy
   kafel skracaja ja z okolo 1100 px do okolo 400 px. */
@media (max-width:560px){
  .hp-marki{padding:34px 0}
  .hp-marki-grid{grid-template-columns:1fr 1fr;gap:8px}
  .hp-marka{padding:12px;min-height:66px;gap:6px}
  .hp-marka img{height:38px}
  .hp-marka b{min-height:38px;font-size:.88rem}
}

/* ---- popularne produkty ---- */
.hp-produkty-top{background:var(--karta);padding:58px 0;border-bottom:1px solid var(--kreska)}
/* Stala liczba kolumn zamiast auto-fill i tyle kafli, ile wypelnia pelne rzedy
   (zgloszenie Bartosza 23.09: siatka zostawiala puste pola w drugim rzedzie).
   API oddaje POPULARNE_PRODUKTOW = 12 pozycji, a CSS obcina nadmiar:
   od 1100 px szesc kolumn i cale dwanascie, 900-1099 piec kolumn i dziesiec,
   561-899 cztery kolumny i osiem, ponizej dwie kolumny i osiem (cztery rzedy,
   bo szesc rzedow na telefonie to juz osobna lista, nie sekcja). */
.hp-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:8px}
@media (min-width:1100px){
  .hp-prod-grid{grid-template-columns:repeat(6,1fr)}
}
@media (min-width:900px) and (max-width:1099px){
  .hp-prod-grid{grid-template-columns:repeat(5,1fr)}
  .hp-prod-grid .hp-prod:nth-child(n+11){display:none}
}
@media (max-width:899px){
  .hp-prod-grid .hp-prod:nth-child(n+9){display:none}
}
@media (min-width:561px) and (max-width:899px){
  .hp-prod-grid{grid-template-columns:repeat(4,1fr)}
}
.hp-prod{padding:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-align:left;font:inherit;color:inherit;
  background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);text-decoration:none;
  transition:border-color .16s,transform .16s}
.hp-prod:hover{border-color:var(--lazur);transform:translateY(-2px);box-shadow:0 8px 18px rgba(12,27,38,.08)}
/* Tlo bialе, nie blekitne: zdjecia opakowan sa pionowe, wiec przy
   object-fit:contain tlo widac po obu stronach kazdego kafla jako dwa pasy.
   Blekit czytal sie jako czesc zdjecia. mix-blend-mode zostaje, bo wtapia
   biale tlo zdjec sklepowych w kafel. */
/* Kadr nizszy niz do 23.09 (bylo 4:3): przy szesciu kolumnach zdjecie 4:3
   zajmowalo polowe wysokosci kafla, a opakowanie i tak stoi w srodku z dwoma
   pustymi pasami po bokach. 16:10 skraca kafel o jedna czwarta i nie zmniejsza
   samego opakowania, bo to ono, nie kadr, wyznacza wysokosc przy contain. */
.hp-prod-obraz{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;object-position:center;
  background-color:var(--karta);mix-blend-mode:multiply}
.hp-prod-obraz-brak{background:var(--papier-2)}
/* Trzy wiersze o ustalonej wysokosci, nie trzy elementy plynace jeden za
   drugim. Nazwa produktu ma od jednego do trzech wierszy ("Felvital +
   lecytyna, karma uzupelniajaca dla kotow" obok "Spirulina"), wiec przy
   ukladzie plynnym marka i cena stały w kazdym kaflu na innej wysokosci i
   siatka czytala sie jak rozsypana. Teraz nazwa ma zawsze miejsce na dwa
   wiersze (dluzsza przycina sie wielokropkiem, pelna zostaje w title), marka
   jeden, a cena stoi na samym dole kafla. Dzieki temu w kazdym wierszu
   siatki nazwy, marki i ceny leza w jednej linii. */
.hp-prod-tresc{padding:10px 12px 12px;display:grid;grid-template-rows:auto auto 1fr;gap:3px;height:100%}
.hp-prod-tresc b{font-size:.84rem;font-weight:600;line-height:1.3;color:var(--atrament);
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.6em}
.hp-prod-producent{font-size:.76rem;color:var(--cichy);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hp-prod-cena{align-self:end;margin-top:8px;font-family:var(--dane);font-size:.9rem;
  font-weight:600;color:var(--lazur)}
@media (max-width:560px){
  .hp-prod-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  /* Kwadrat zamiast 4:3 i margines wokol zdjecia: opakowania sa pionowe, wiec
     w niskim kadrze butelka schodzila do paska wysokosci kciuka, a po bokach
     zostawaly dwa szerokie puste pasy. W kwadracie ten sam plik jest wiekszy
     i siatka wyglada rowno niezaleznie od proporcji zdjecia sklepu. */
  .hp-prod-obraz{aspect-ratio:1/1;padding:10px}
  .hp-prod-tresc{padding:10px 11px 12px}
  .hp-prod-tresc b{font-size:.84rem}
}

/* ---- najczestsze pytania: rozwijane pozycje, przedostatnia sekcja nad stopka ---- */
.hp-faq{background:var(--papier-2);padding:58px 0;border-bottom:1px solid var(--kreska)}
.hp-faq-lista{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.hp-faq-item{background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);padding:0 20px}
.hp-faq-item summary{padding:16px 34px 16px 0;position:relative;font-weight:600;color:var(--atrament);
  cursor:pointer;list-style:none}
.hp-faq-item summary::-webkit-details-marker{display:none}
.hp-faq-item summary::after{content:"+";position:absolute;right:0;top:16px;color:var(--lazur);font-weight:400}
.hp-faq-item[open] summary::after{content:"×"}
.hp-faq-item p{margin:0 0 18px;color:var(--atrament-2);font-size:.92rem;line-height:1.55;max-width:74ch}