/*
 * Strony tresciowe skladane z widzetow: baner strony, trzy fakty, tekst
 * z kadrem, manifest.
 *
 * Wchodzi tylko tam, gdzie te widzety faktycznie stoja (alpha_current_views
 * w inc/assets.php). Wyglad przeniesiony z zatwierdzonej makiety
 * docs/makiety/o-alphascience.html - przy zmianie poprawiamy OBA miejsca
 * albo zadne.
 *
 * Czego tu nie ma, bo jest gdzie indziej: liczby "Dowodow" i pas B2B rysuje
 * arkusz strony glownej (home.css), a powloka - style.css.
 */

/* =====================================================================
   O MARCE - baner
   =====================================================================
   Uklad ten sam co w banerze strony glownej: tresc trzyma linie kolumny
   serwisu, kadr wychodzi do krawedzi okna. Na telefonie zdjecie idzie NAD
   tekstem (order:-1) - pierwszy ekran ma pokazac twarz, a nie sam naglowek. */
.omarce{background:var(--porcelain);overflow:hidden}
.omarce__grid{display:grid}
.omarce__foto{order:-1;aspect-ratio:4/3;background:#e9e6e1;overflow:hidden;margin:0}
.omarce__foto img{width:100%;height:100%;object-fit:cover;object-position:58% 12%}
.omarce__tresc{
  padding:var(--s5) var(--pad);display:flex;flex-direction:column;
  justify-content:center;gap:var(--s3);
}
.omarce__tresc h1{text-wrap:balance}
.omarce__tresc .lead{max-width:52ch}
.omarce__tresc .btn-row{margin-top:var(--s2)}
@media(min-width:900px){
  .omarce__grid{grid-template-columns:1.05fr .95fr;align-items:stretch}
  .omarce__foto{order:2;aspect-ratio:auto;min-height:min(78vh,700px)}
  .omarce__tresc{
    order:1;gap:var(--s4);padding-block:var(--s6);
    padding-right:clamp(2rem,5vw,4rem);
    padding-left:max(var(--pad), calc((100vw - var(--maxw))/2 + var(--pad)));
  }
}

/* --- trzy fakty ---
   Ciasniej niz zwykla sekcja: to pasek wejsciowy pod banerem, a nie osobny
   rozdzial strony. */
.section--fakty{padding-block:var(--s5)}
.fakty{
  display:grid;gap:var(--s4);padding-left:0;list-style:none;
  border-top:1px solid var(--line-strong);padding-top:var(--s4);
}
.fakty > * + *{border-top:1px solid var(--line);padding-top:var(--s4)}
@media(min-width:760px){
  .fakty{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
  .fakty > * + *{border-top:0;padding-top:0}
}
.fakt b{
  display:block;font-family:var(--font-display);font-size:.68rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
.fakt span{
  display:block;margin-top:.6rem;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.3;color:var(--ink);text-wrap:pretty;
}
.fakt sup{font-size:.55em;vertical-align:super;line-height:0}

#technologia .sec-head{margin-bottom:var(--s5)}
/* Sekcja bez kadru: jedna kolumna na calej szerokosci. */
/* WAGA SELEKTORA, nie kolejnosc: regula ".tech" z dwiema kolumnami stoi
   w arkuszu NIZEJ, wiec przy rownej wadze wygrywala i sekcja bez kadru i tak
   dzielila sie na dwie kolumny - lista skladnikow siedziala w lewej polowie,
   a prawa zostawala pusta. Podwojna klasa przewaza. */
.tech.tech--solo{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.tech.tech--solo{grid-template-columns:minmax(0,1fr)}}
/* Sekcja bez kadru ma cala szerokosc, wiec lista moze isc w dwoch kolumnach -
   ale dopiero od tabletu. Bez progu regula ".tech--solo .aktywa" (waga 0,2,0)
   bila regule ".aktywa" i na telefonie zostawaly dwie kolumny po 157 px. */
.tech--solo .aktywa{grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.tech--solo .aktywa{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- technologia: tekst obok kadru ---
   Zdjecie po prawej i wezsze od tekstu: to ilustracja akapitu, a nie druga
   polowa sekcji. */
.tech{display:grid;gap:var(--s4);align-items:start}
@media(min-width:900px){.tech{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s6)}}
.tech__tresc > * + *{margin-top:var(--s3)}
.tech__tresc p{color:var(--ink-soft);text-wrap:pretty}
.tech__tresc .lead{color:var(--ink)}
.tech__tresc sup{font-size:.6em;vertical-align:super;line-height:0}
.tech__foto{aspect-ratio:1;overflow:hidden;background:#fff;border:1px solid var(--line);margin:0}
.tech__foto img{width:100%;height:100%;object-fit:cover}

/* --- ustabilizowane aktywa ---
   TYPOGRAFIA, NIE PACKSHOTY. Cztery skladniki z akapitu Klientki wyjete
   osobno, zeby nie ginely w zdaniu. Bez zdjec z dwoch powodow: packshoty
   producenta maja rozne tla (bialе, bursztynowe, sceny z grafika po
   angielsku) i w rzedzie czterech kafelkow wygladaja jak zbieranina,
   a przypisanie skladnika do konkretnego preparatu byloby naszym
   twierdzeniem - tresc tej strony nalezy do Klientki. */
.aktywa__tytul{
  margin-top:var(--s5);font-family:var(--font-display);font-size:.68rem;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);font-weight:400;
}
/* Dwie kolumny w kolumnie tekstu, a nie cztery na calej szerokosci sekcji:
   skladniki naleza do akapitu obok, ktory je wymienia, i wypelniaja pustke,
   ktora zostawala pod nim przy wysokim kadrze.

   ZDJECIA TO SZALKI, NIE PACKSHOTY. Producent ma je w jednym ukladzie na
   wszystkich preparatach (cztery szalki w siatce, podpisy po angielsku),
   wiec wystarczylo wyciac pojedyncza szalke: to samo tlo, to samo swiatlo
   i ten sam kadr w kazdym kafelku. Packshoty preparatow mialy rozne tla,
   a przy okazji przypisywalyby skladnik do konkretnego produktu - czego
   tresc Klientki nie robi. */
.aktywa{
  display:grid;gap:var(--s3);margin-top:var(--s3);padding-left:0;list-style:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Do gory, nie do srodka: przy opisie na cztery wiersze kadr wisial w polowie
   tekstu zamiast stac przy nazwie, ktorej dotyczy. */
.aktyw{display:flex;gap:var(--s3);align-items:flex-start;min-width:0}
.aktyw__tresc{min-width:0}
/* Opis przy nazwie: drobniejszy i jasniejszy, zeby nazwa zostala pierwsza
   rzecza, ktora widac. */
.aktyw__opis{display:block;margin-top:.25rem;font-size:.85rem;color:var(--muted);text-wrap:pretty}
.aktyw__foto{
  flex:0 0 auto;width:clamp(52px,7vw,68px);aspect-ratio:1;overflow:hidden;
  border-radius:50%;background:var(--porcelain);
}
.aktyw__foto img{width:100%;height:100%;object-fit:cover}
.aktyw b{
  display:block;font-family:var(--font-display);font-weight:300;
  font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.25;letter-spacing:.02em;
  color:var(--ink);text-wrap:balance;
}

/* --- manifest ---
   Zdanie zamykajace strone. Duze pismo i wlasny pas, bo to jedyny akapit,
   ktory mowi wprost DO czytelnika - w ciagu tekstu ginal. */
.manifest{background:var(--porcelain)}
.manifest__grid{display:grid;gap:var(--s4)}
@media(min-width:900px){
  .manifest__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s6);align-items:end}
}
.manifest__tekst{
  font-family:var(--font-display);font-weight:300;letter-spacing:.01em;
  font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.3;text-wrap:pretty;
}
.manifest__bok > * + *{margin-top:var(--s3)}
.manifest__bok p{color:var(--ink-soft);text-wrap:pretty}
/* =====================================================================
   DLA PROFESJONALISTOW
   =====================================================================
   Baner na granacie, bo tej strony nie ma czym otworzyc zdjeciem: nie mamy
   ani jednego kadru gabinetu, a packshot mowilby "sklep" tam, gdzie chodzi
   o wspolprace. Granat czytelnik zna juz z pasa B2B na stronie glownej. */
.pro-hero{padding-block:var(--s6)}
.pro-hero__grid{display:grid;gap:var(--s5)}
@media(min-width:900px){
  .pro-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s6);align-items:center}
}
.pro-hero__tresc > * + *{margin-top:var(--s3)}
.pro-hero__tresc .lead{max-width:52ch;color:rgba(255,255,255,.78)}
/* Wiekszy odstep niz domyslny: bialy przycisk i podkreslony odnosnik stoja
   obok siebie na granacie i przy 12 px podkreslenie dotykalo krawedzi
   przycisku. */
.pro-hero__tresc .btn-row{margin-top:var(--s4);gap:var(--s3)}
/* Trzy fakty w banerze, a nie pod nim: to sa odpowiedzi na pierwsze trzy
   pytania gabinetu ("ile to trwa", "co musze wyslac", "jakie ceny") i maja
   stac tam, gdzie decyduje sie, czy ktos w ogole czyta dalej. */
.pro-hero__fakty{
  display:grid;gap:var(--s3);padding-left:0;list-style:none;
  border-top:1px solid rgba(255,255,255,.22);padding-top:var(--s3);
}
.pro-hero__fakty > * + *{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s3)}
.pro-hero__fakty b{
  display:block;font-family:var(--font-display);font-size:.68rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--blush);font-weight:400;
}
.pro-hero__fakty span{display:block;margin-top:.4rem;font-size:.9rem;color:rgba(255,255,255,.8);text-wrap:pretty}

/* Uwaga przy "Dla kogo": stoi po prawej stronie naglowka, bo dotyczy listy
   pod spodem, a nie jest osobnym akapitem. W makiecie jest tu PYTANIE DO
   KLIENTKI - warunki, komu konto przysluguje, sa decyzja handlowa. */
.dla-kogo__uwaga{font-size:.85rem;color:var(--muted);max-width:38ch;text-wrap:pretty}

/* --- co daje konto --- */
.korzysci{display:grid;gap:var(--s5);padding-left:0;list-style:none}
@media(min-width:820px){.korzysci{grid-template-columns:repeat(3,minmax(0,1fr))}}
.korzysc{border-top:1px solid var(--line-strong);padding-top:var(--s3)}
.korzysc__nr{
  display:block;font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;color:var(--muted);
}
.korzysc h3{
  margin-top:var(--s2);font-family:var(--font-display);font-size:1.05rem;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.35;
}
.korzysc p{margin-top:var(--s2);font-size:.9rem;color:var(--ink-soft);text-wrap:pretty}

/* --- dwie sciezki rejestracji --- */
.sciezki{display:grid;gap:var(--s4)}
@media(min-width:820px){.sciezki{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}}
.sciezka{background:#fff;border:1px solid var(--line);padding:var(--s4)}
/* Sciezka z NIP-em jest ta, ktora chcemy pokazac pierwsza - stad mocniejsza
   krawedz u gory zamiast plakietki "polecane". */
.sciezka--auto{border-top:2px solid var(--navy)}
.sciezka .eyebrow{color:var(--muted)}
.sciezka h3{margin-top:var(--s1)}
.kroki{margin-top:var(--s3);padding-left:0;list-style:none;counter-reset:krok}
.kroki li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s3);
  align-items:start;padding-block:var(--s2);border-top:1px solid var(--line);
}
.kroki li::before{
  counter-increment:krok;content:counter(krok);
  grid-row:span 2;width:32px;height:32px;border-radius:99px;border:1px solid var(--navy);
  color:var(--navy);display:grid;place-items:center;
  font-family:var(--font-display);font-size:.75rem;
}
.kroki b{font-weight:400;font-family:var(--font-display);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.kroki span{grid-column:2;font-size:.88rem;color:var(--muted);text-wrap:pretty;margin-top:-.35rem}
/* Przycisk pod sciezkami na srodku - klasa z powloki strony glownej,
   w tej makiecie nie ma jej w arkuszu, wiec stoi tutaj. */
.sekcja-wiecej{margin-top:var(--s5);display:flex;justify-content:center}

/* --- pas artykulow w ukladzie siatki ---
   Widzet "Pas artykulow" umie stanac jako siatka, gdy wskazane sa dwa-trzy
   wpisy. Siatka bazy wiedzy trzyma trzy kolumny i przy dwoch kafelkach
   zostawialaby pusta trzecia. */
.posts:not(.rail--zawsze){grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){
  .posts:not(.rail--zawsze){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =====================================================================
   DOSTAWA I PŁATNOŚĆ
   ===================================================================== */

/* --- cennik ---
   Cena w osobnej kolumnie po prawej, bo tego szuka wzrok; opis zostaje przy
   nazwie. LINIE TYLKO POZIOME: pionowa kreska miedzy nazwa a cena robi
   z kilku krotkich pozycji tabelke z pustymi polami. */
/* Cennik idzie na cala szerokosc kolumny tresci - tak jak kazda inna sekcja
   na stronie. Wezszy stal krotszy od naglowka nad soba i wygladal, jakby sie
   nie doladowal. Miare czytania trzyma za to OPIS pozycji. */
.metody{display:grid;padding-left:0;list-style:none;border-top:1px solid var(--line-strong)}
.metoda{display:grid;gap:.35rem var(--s4);padding-block:var(--s3);border-bottom:1px solid var(--line)}
@media(min-width:720px){.metoda{grid-template-columns:minmax(0,1fr) auto;align-items:start}}
.metoda b{
  font-family:var(--font-display);font-weight:400;font-size:.92rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
.metoda__opis{display:block;margin-top:.3rem;font-size:.88rem;color:var(--muted);text-wrap:pretty;max-width:62ch}
/* Na telefonie ceny ida w jednym wierszu pod nazwa, na szerokim ekranie pod
   soba przy prawej krawedzi - inaczej przy krotkich kwotach powstaje dziura
   miedzy nazwa a cena. */
.metoda__ceny{display:flex;flex-wrap:wrap;gap:.1rem var(--s3);align-items:baseline}
@media(min-width:720px){.metoda__ceny{display:grid;justify-items:end;text-align:right}}
.metoda__cena{font-family:var(--font-display);font-weight:300;font-size:1.1rem;color:var(--ink);white-space:nowrap}
.metoda__pobranie{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* --- trzy wagi przypisu ---
   Trzy jednakowe ramki pod soba czytaly sie jak trzy rownowazne komunikaty,
   a to sa: liczba do zapamietania, warunek i notatka. */
.uwaga-box{
  margin-top:var(--s4);padding:var(--s3);background:var(--porcelain);
  font-size:.88rem;line-height:1.6;color:var(--ink-soft);max-width:62ch;text-wrap:pretty;
}
.section--soft .uwaga-box{background:#fff}
.uwaga-box b,.uwaga-box strong{font-family:var(--font-display);font-weight:400;color:var(--ink)}
.uwaga-box + .uwaga-box{margin-top:var(--s2)}
.uwaga-box--mocna{border-left:3px solid var(--navy);font-size:.95rem}
.przypis{margin-top:var(--s3);font-size:.82rem;line-height:1.6;color:var(--muted);max-width:62ch;text-wrap:pretty}

/* Kolumny bez numerow sa rownorzedne, wiec bywa ich wiecej niz trzy -
   siatka schodzi do dwoch kolumn juz na tablecie. */
@media(min-width:620px){.korzysci--bez-numerow{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5)}}
@media(min-width:960px){.korzysci--bez-numerow{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Sciezka opisana zdaniem zamiast krokow (zwrot, reklamacja). */
.sciezka__opis{margin-top:var(--s2);font-size:.9rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}

/* Jedna droga: kreski ida przez cala szerokosc, jak w cenniku, ale wyjasnienie
   kroku lamie sie na miarze czytania - inaczej wiersz mialby ponad sto znakow. */
.kroki--waskie span{max-width:62ch}

/* --- naglowek strony ---
   Sekcja z tytulem strony nie jest rozdzialem w srodku: gorne swiatlo sekcji
   (clamp do 8 rem) odsuwaloby H1 od okruszkow o 178 px, czyli o pol ekranu
   telefonu. Dol zostaje sekcyjny, bo pod spodem zaczyna sie tresc. */
.section--naglowek{padding-block-start:var(--s4)}
.section--naglowek .sec-head{margin-bottom:var(--s4)}

/* Uwaga przy naglowku sekcji ma szerokosc kolumny pomocniczej - bez tego
   "minmax(0,auto)" rozciaga akapit i tytul traci pierwszenstwo. Przegladarka
   bez :has() pokaze go szerzej, i tyle. */
@media(min-width:900px){
  .sec-head:has(.dla-kogo__uwaga){grid-template-columns:minmax(0,1fr) minmax(0,26rem)}
}

/* =====================================================================
   ZWROTY I REKLAMACJE
   ===================================================================== */

/* --- formularz ---
   NAZWY KLAS SA ZAGNIEZDZONE (.formularz__pole, .formularz__grupa): krotkie
   ".pole" i ".wybor" nalezaly juz do innych komponentow - formularza opinii
   pod wpisem i wyboru sortowania w katalogu. Ta sama pulapka, co przy .kroki
   (MOTYW.md par. 3), tyle ze zlapana zanim wyszla na strone.

   TE SAME WARTOSCI, CO WE WNIOSKU B2B: pole 54 px, promien 2 px, obramowanie
   --line-control, pole wyboru 22 px, blad przy polu a nie zbiorczy na gorze.
   Nazwy sa jednak neutralne (.formularz, .formularz__grupa, .formularz__pole), bo to jeden komponent
   uzyty w dwoch miejscach sklepu - a nie "formularz B2B" postawiony na stronie
   o zwrotach. Przy budowie zmieniamy nazwy w tamtym formularzu na te, zamiast
   dokladac trzeci zestaw regul o tym samym wygladzie. */
.formularz{display:flex;flex-direction:column;gap:var(--s4);max-width:44rem}
.formularz fieldset{border:0;padding:0;margin:0}
.formularz legend{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:var(--s2);
}
.formularz__grupa{
  padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s3);
}
.formularz__grupa:first-of-type{border-top:0;padding-top:0}
/* [hidden] to w arkuszu przegladarki zwykle display:none - kazda regula autora
   z display je bije, a .formularz__grupa i .formularz__pole maja display:flex. */
.formularz__grupa[hidden],.formularz__pole[hidden]{display:none !important}

.formularz__pole{display:flex;flex-direction:column;gap:.35rem}
.formularz__pole > label:not(.consent){font-family:var(--font-display);font-size:.82rem;letter-spacing:.03em}
.formularz__pole input[type="text"],.formularz__pole input[type="email"],.formularz__pole input[type="tel"]{
  font-family:var(--text);font-size:.95rem;padding:0 1rem;min-height:54px;width:100%;
  border:1px solid var(--line-control);border-radius:var(--radius);background:#fff;
  transition:border-color .2s;
}
/* LISTA ROZWIJANA BEZ WYGLADU SYSTEMOWEGO. Natywny <select> rysowal sie
   systemowa strzalka i systemowym krojem posrod pol, ktore maja wyglad
   marki - w formularzu kontaktowym bylo to jedyne pole odstajace od reszty.
   Zdejmujemy wyglad systemowy i rysujemy strzalke tlem; element zostaje
   prawdziwym <select>, wiec klawiatura i czytnik ekranu dzialaja bez zmian.
   Ta sama zasada, co przy sortowaniu w katalogu (shop.css, .wybor). */
.formularz__pole select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--text);font-size:.95rem;padding:0 2.8rem 0 1rem;min-height:54px;width:100%;
  border:1px solid var(--line-control);border-radius:var(--radius);background:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:13px 13px;
  color:var(--ink);cursor:pointer;
  transition:border-color .2s;
}
/* Pole bez wyboru czyta sie jak podpowiedz, a nie jak wartosc. */
.formularz__pole select:invalid{color:var(--muted)}
.formularz__pole textarea{
  font-family:var(--text);font-size:.95rem;padding:.85rem 1rem;width:100%;
  border:1px solid var(--line-control);border-radius:var(--radius);background:#fff;
  transition:border-color .2s;resize:vertical;min-height:88px;
}
.formularz__pole input::placeholder,.formularz__pole textarea::placeholder{color:var(--muted)}
.formularz__pole input:hover,.formularz__pole textarea:hover,.formularz__pole select:hover{border-color:var(--ink)}
.formularz__pole input:focus-visible,.formularz__pole textarea:focus-visible,.formularz__pole select:focus-visible{
  outline:2px solid var(--navy);outline-offset:1px;
}
.formularz__hint{font-size:.78rem;color:var(--muted)}
.formularz__blad{display:flex;align-items:flex-start;gap:.4rem;font-size:.82rem;color:#b3261e}
.formularz__blad:empty{display:none}
.formularz__pole--blad input,.formularz__pole--blad textarea,.formularz__pole--blad select{border-color:#b3261e}

/* --- wybor rodzaju zgloszenia ---
   Dwa kafle zamiast listy rozwijanej: ten wybor decyduje o reszcie formularza
   (i o tym, jakie prawa przysluguja), wiec obie mozliwosci maja byc widoczne
   naraz, z jednym zdaniem wyjasnienia. */
.formularz__wybory{display:grid;gap:.6rem}
@media(min-width:560px){.formularz__wybory{grid-template-columns:1fr 1fr}}
.formularz__wybor{
  display:flex;align-items:flex-start;gap:.7rem;padding:var(--s2) var(--s3);
  border:1px solid var(--line-control);cursor:pointer;min-height:44px;
  transition:border-color .2s,background .2s;
}
.formularz__wybor:hover{border-color:var(--ink)}
.formularz__wybor:has(input:checked){border-color:var(--ink);background:var(--porcelain)}
.formularz__wybor:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.formularz__wybor input{width:22px;height:22px;margin-top:.15rem;flex:0 0 auto;accent-color:var(--ink)}
.formularz__wybor b{display:block;font-family:var(--font-display);font-size:.9rem;font-weight:400;letter-spacing:.02em}
.formularz__wybor span{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* --- zalacznik ---
   Samo pole pliku ma 1x1 px i jest odciete, wiec obwodka ogniskowej rysowalaby
   sie na niewidocznym punkcie. Przenosimy ja na etykiete, czyli na to, co widac. */
.formularz__plik{
  display:flex;align-items:center;gap:.7rem;min-height:48px;padding:0 1rem;
  border:1px dashed var(--line-control);cursor:pointer;font-size:.88rem;color:var(--ink-soft);
}
.formularz__plik:hover{border-color:var(--ink);color:var(--ink)}
.formularz__plik:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px;border-color:var(--ink);color:var(--ink)}
.formularz__plik input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.formularz__plik svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex:0 0 auto}

.zgoda:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:3px}
.formularz__stopka{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.formularz__stopka .btn{min-width:14rem}
/* Zdanie obok przycisku: droga zapasowa, gdy ktos woli poczte. */
/* ZDANIE JEST ZDANIEM, NIE UKLADEM.
   Bylo tu "display:inline-flex" - po to, zeby wiersz mial 44 px wysokosci celu
   dotyku. Skutek uboczny: napis i odnosnik staly sie DWOMA elementami ukladu,
   a odstep miedzy elementami ukladu przepada. Na stronie stalo wiec
   "Napisz nasklep@alphascience.com.pl".
   Cel dotyku dotyczy ODNOSNIKA, a nie calego zdania - i tam go stawiamy.
   Wypelnienie w pionie powieksza pole klikniecia, a nie wysokosc wiersza. */
.formularz__uwaga{font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.formularz__uwaga a{
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding-block:.75rem;
}
.formularz__opcjonalne{font-size:.78rem;color:var(--muted);text-transform:none;letter-spacing:0}

/* Dwa pola w rzedzie tam, gdzie razem tworza jedna informacje (imie i adres,
   telefon i sprawa). Ponizej 600 px schodza pod siebie - dwie kolumny po
   150 px to nie formularz, tylko lamiglowka. */
.formularz__para{display:grid;gap:var(--s3)}
@media(min-width:600px){.formularz__para{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4)}}

/* PULAPKA NA ROBOTY. Pole musi byc w kodzie strony i puste dla czlowieka:
   chowamy je poza ekran, a nie przez display:none - czesc automatow pomija
   pola, ktorych przegladarka nie rysuje. */
.formularz__pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Formularz stoi obok tego, co trzeba wiedziec PRZED wyslaniem - na waskim
   ekranie karta schodzi pod formularz, bo najpierw sie zglasza, a warunki
   czyta sie po drodze. */
.zgloszenie{display:grid;gap:var(--s5)}
@media(min-width:960px){.zgloszenie{grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:start}}
.zgloszenie__bok{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);background:var(--porcelain)}
.section--soft .zgloszenie__bok{background:#fff}
.zgloszenie__bok h3{font-family:var(--font-display);font-size:.95rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.zgloszenie__bok p,.zgloszenie__bok li{font-size:.85rem;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.zgloszenie__bok ul{list-style:none;padding-left:0;display:grid;gap:.6rem}
.zgloszenie__bok li{padding-left:1.1rem;position:relative}
.zgloszenie__bok li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:1px;background:var(--ink)}


/* Komunikat po wyslaniu formularza. tabindex="-1" na znaczniku, focus ze
   skryptu - bez tego osoba na klawiaturze zostaje przy przycisku i nie wie,
   ze cokolwiek sie stalo. */
.formularz__status{margin-top:var(--s3);font-size:.9rem;line-height:1.6;max-width:62ch;text-wrap:pretty}
.formularz__status:empty{display:none}
.formularz__status:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.formularz__status--ok{
  padding:var(--s3);background:var(--porcelain);border-left:3px solid var(--navy);color:var(--ink);
}
.section--soft .formularz__status--ok{background:#fff}
.formularz__status--blad{color:#b3261e}


/* =====================================================================
   LISTA Z LICZBĄ (stężenia, wyniki, wartości)
   ===================================================================== */

/* Liczba po lewej, nazwa i zdanie opisu po prawej. Bez ramek - tylko kreski
   miedzy wierszami, tak jak w cenniku dostawy. */
.liczby{display:grid;gap:0;padding-left:0;list-style:none;border-top:1px solid var(--line-strong);max-width:46rem}
/* Etykieta nad lista nie moze siedziec na jej gornej kresce. */
.aktywa__tytul + .liczby{margin-top:var(--s2)}
.liczba{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.2rem var(--s3);
  padding-block:var(--s3);border-bottom:1px solid var(--line);align-items:baseline;
}
.liczba > b{font-family:var(--font-display);font-weight:300;font-size:1.35rem;color:var(--navy);white-space:nowrap}
.liczba span{font-size:.9rem;color:var(--ink-soft);text-wrap:pretty}
.liczba span b{
  font-family:var(--font-display);font-weight:400;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
}

/* SEKCJA DOKLEJONA ZDEJMUJE ODSTEP Z OBU STRON. Klasa .section--sklejona
   kasuje gorne swiatlo doklejanej sekcji, ale dolne swiatlo poprzedniej
   zostawalo - miedzy kolumnami a lista stezen robilo sie 115 px zamiast 48.
   Regula dziala na kazda pare widzetow zlozonych w jedna calosc; przegladarka
   bez :has() pokaze wiekszy odstep i nic wiecej.

   DWA WARIANTY, bo w Elementorze sekcje NIE sa rodzenstwem: kazdy widzet
   siedzi we wlasnym pojemniku (.e-con > .elementor-widget > section). Pierwsza
   regula dziala w makiecie i wszedzie, gdzie sekcje stoja obok siebie, druga
   w ukladzie Elementora. */
.section:has(+ .section--sklejona){padding-block-end:0}
.e-con:has(+ .e-con .section--sklejona) .section{padding-block-end:0}

/* LISTA Z OPISAMI RZADZI SIE INACZEJ NIZ LISTA SAMYCH NAZW. Na stronie
   o marce stoja przy aktywach same nazwy i dwie kolumny sa tam wlasciwe takze
   na telefonie. Gdy pozycje maja zdanie opisu (strona technologii), dwie
   kolumny po 157 px lamia nazwe na dwa wiersze, a opis co trzy slowa - wiec
   do 620 px lista idzie jedna kolumna i dostaje wiecej powietrza.
   Regula z :has waza tyle samo co ".tech--solo .aktywa", ale stoi nizej. */
.aktywa:has(.aktyw__opis){grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--s5)}
@media(min-width:620px){.aktywa:has(.aktyw__opis){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =====================================================================
   DOKUMENT (regulamin, polityka prywatnosci, zwroty)
   ===================================================================== */

/* Spis tresci obok tekstu, nie nad nim. Regulamin ma kilkanascie rozdzialow;
   spis nad trescia znika po pierwszym przewinieciu i wtedy jedyna nawigacja
   zostaje pasek przewijania. Przy waskim ekranie spis idzie nad tekst
   i zwija sie do <details> - tam sticky nie ma gdzie stanac. */
/* Sekcja dokumentu jest ciagiem dalszym naglowka: sklejona zdejmuje gorne
   swiatlo, a regula ponizej - dolne swiatlo naglowka. */
.section:has(+ .section--sklejona){padding-block-end:0}
.dokument{display:grid;gap:var(--s4);margin-top:var(--s5)}
/* Pojemniki siatki musza moc sie zwezic ponizej swojej najwezszej tresci -
   inaczej jeden dlugi ciag znakow rozpycha cala kolumne. */
.dokument > *{min-width:0}
@media(min-width:1000px){
  .dokument{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--s6);align-items:start}
}

.spis{font-size:.88rem}
.spis > summary{
  list-style:none;cursor:pointer;padding:var(--s2) 0;min-height:44px;display:flex;
  align-items:center;justify-content:space-between;gap:var(--s3);
  font-family:var(--font-display);font-size:.8rem;letter-spacing:var(--track);text-transform:uppercase;
  border-block:1px solid var(--line-strong);
}
/* KOLEJNOSC MA ZNACZENIE: regula chowajaca zwijacz musi stac PO regule, ktora
   go rysuje - inaczej na szerokim ekranie widac i zwijacz, i tytul spisu. */
@media(min-width:1000px){
  .spis{position:sticky;top:calc(var(--head-h) + var(--s3));max-height:calc(100vh - var(--head-h) - var(--s5));overflow:auto}
  .spis > summary{display:none}
}
.spis > summary::-webkit-details-marker{display:none}
.spis > summary::after{content:"+";color:var(--navy);font-size:1.2rem;line-height:1}
.spis[open] > summary::after{content:"–"}
.spis__tytul{
  display:none;font-family:var(--font-display);font-size:.7rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);
}
@media(min-width:1000px){.spis__tytul{display:block}}
.spis ol{list-style:none;padding-left:0;display:grid;gap:.1rem;counter-reset:rozdzial}
.spis a{
  display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.4rem;
  padding:.45rem 0;color:var(--ink-soft);line-height:1.35;text-wrap:pretty;
}
/* Numer bierze sie z atrybutu, a nie z licznika: dokument moze byc numerowany
   paragrafami albo liczbami, a spis ma pokazywac to samo co tytuly. */
.spis a::before{content:attr(data-numer);color:var(--muted);font-family:var(--font-display);font-size:.78rem}
.spis a:hover{color:var(--ink)}
.spis a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* --- tresc dokumentu --- */
.dok{max-width:70ch}
.dok__sekcja + .dok__sekcja{margin-top:var(--s5)}
/* Kotwica pod przyklejonym naglowkiem: bez tego klikniecie w spis chowa
   tytul rozdzialu za belka. */
.dok__sekcja{scroll-margin-top:calc(var(--head-h) + var(--s3))}
.dok__sekcja h2{
  font-family:var(--font-display);font-size:clamp(1.05rem,1.8vw,1.25rem);font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.3;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line-strong);
}
.dok__sekcja > p{margin-top:var(--s3);font-size:.92rem;line-height:1.7;color:var(--ink-soft);text-wrap:pretty}
/* Podtytul w paragrafie dokumentu - mniejszy od tytulu rozdzialu i bez
   obramowania, ktore nalezy do h2. Bez tej reguly bralby skale globalna. */
.dok__sekcja h3{
  font-family:var(--font-display);font-size:1rem;font-weight:400;letter-spacing:.04em;
  text-transform:none;border-bottom:0;padding-bottom:0;
  margin-top:var(--s4);margin-bottom:var(--s1);
}

/* Punkty numerowane 1., 1.1. - tak czyta sie regulamin i tak sie go cytuje
   w reklamacji. Numeruje arkusz, wiec dopisanie punktu w srodku nie wymaga
   przepisywania reszty. */
/* TRESC ROZDZIALU POCHODZI Z EDYTORA, wiec regula musi lapac zwykla liste
   numerowana, a nie klase, ktorej Klientka nigdy nie wpisze. */
.dok__sekcja > ol,.dok__punkty{list-style:none;padding-left:0;margin-top:var(--s3);counter-reset:punkt}
/* NUMER USTAWIONY BEZWZGLEDNIE, NIE SIATKA. Przy display:grid kazdy znacznik
   w punkcie - <em>, <b>, odnosnik - stawal sie osobnym polem siatki i wpadal
   do kolumny numeru szerokiej na 2,4 rem: zdanie schodzilo w pionowy slupek
   po jednym slowie. Ta sama pulapka co przy pytaniach w FAQ. */
.dok__sekcja > ol > li,.dok__punkty > li{
  position:relative;padding-left:2.4rem;padding-block:.5rem;
  font-size:.92rem;line-height:1.7;color:var(--ink-soft);text-wrap:pretty;
}
.dok__sekcja > ol > li::before,.dok__punkty > li::before{
  counter-increment:punkt;content:counter(punkt) ".";
  position:absolute;left:0;top:.5rem;
  font-family:var(--font-display);font-size:.85rem;color:var(--muted);
}
.dok__sekcja ol ul,.dok__punkty ul{list-style:none;padding-left:0;margin-top:.4rem;display:grid;gap:.35rem}
.dok__sekcja ol ul li,.dok__punkty ul li{padding-left:1.1rem;position:relative}
.dok__sekcja ol ul li::before,.dok__punkty ul li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:1px;background:var(--ink)}
.dok b,.dok strong{color:var(--ink);font-weight:500}

/* Podpunkty a), b), c) - tak sa numerowane w tresci Klientki i tak sie je
   cytuje. Numeruje arkusz, znaczniki zostaja czyste. */
.dok__sekcja ol ol,.dok__lit{list-style:lower-alpha;padding-left:1.2rem;margin-top:.5rem;display:grid;gap:.3rem}
.dok__sekcja ol ol li,.dok__lit li{padding-left:.2rem}
.dok__sekcja ol ol li::marker,.dok__lit li::marker{color:var(--muted);font-family:var(--font-display);font-size:.85em}

/* Slownik pojec: haslo krojem naglowkowym, definicja pod nim. Tabela byla
   pierwsza mysla, ale przy dwudziestu hasłach i dlugich definicjach nie ma
   szans zmiescic sie na telefonie. */
.dok__slownik{margin-top:var(--s3);display:grid;gap:var(--s3)}
.dok__slownik dt{
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);
}
.dok__slownik dd{margin:.3rem 0 0;font-size:.9rem;line-height:1.7;color:var(--ink-soft);text-wrap:pretty}

/* Linia do wpisania odreczne - obramowanie, a nie ciag kropek: kropki sa
   jednym dlugim "slowem" i rozpychaly strone w poziomie. */
.zalacznik__linia{border-bottom:1px solid var(--line-control);height:1.6em}

/* Zalacznik: wyglada jak dokument w dokumencie, bo nim jest. */
.zalacznik{margin-top:var(--s5);border:1px solid var(--line-strong);padding:var(--s4);background:#fff}
.zalacznik h2{border-bottom:0;padding-bottom:0}
/* KROPKI DO WPISANIA TRESCI TO JEDNO DLUGIE "SLOWO". Bez lamania rozpychaly
   pojemnik do 508 px i CALA strona przewijala sie w poziomie na telefonie -
   a wina wygladala na uklad dokumentu, nie na wzor formularza. */
.zalacznik__wzor{
  margin-top:var(--s3);padding:var(--s3);background:var(--porcelain);
  font-size:.88rem;line-height:1.8;color:var(--ink-soft);overflow-wrap:anywhere;
}
.zalacznik__wzor p + p{margin-top:var(--s2)}

/* Wersja dokumentu pod trescia - regulamin bez daty jest bezuzyteczny przy
   sporze, bo nie wiadomo, ktora wersja obowiazywala przy zamowieniu. */
.dok__wersja{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}

/* --- druk ---
   Regulamin sie drukuje i zapisuje do PDF - to jedyny dokument w tym sklepie,
   ktory ktos moze chciec miec na papierze przy reklamacji. */
@media print{
  .topbar,.header,.footer,.spis,.okruszki,.makieta-znak,.section--navy{display:none !important}
  .section{padding-block:var(--s3) !important;background:#fff !important}
  .dokument{display:block}
  .dok{max-width:none}
  .dok__sekcja{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}



/* =====================================================================
   KONTAKT: FORMULARZ, DANE I MAPA
   =====================================================================
   Znacznik wypisuje widzet Docketa - tutaj sam wyglad. Uklad ten sam co
   przy zgloszeniu zwrotu (formularz + karta obok), zeby dwa formularze
   sklepu wygladaly jak jedna rzecz, a nie dwie. */
/* Odstep od naglowka sekcji daje sam naglowek (.sec-head ma margines dolny) -
   drugi margines tutaj tylko dublowalby zrodlo tej samej odleglosci. */
.kontakt-siatka{display:grid;gap:var(--s5)}
@media(min-width:900px){
  .kontakt-siatka{grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:var(--s6);align-items:start}
}

.kontakt-dane{background:#fff;border:1px solid var(--line);padding:var(--s4);display:grid;gap:var(--s3)}
.section--soft .kontakt-dane{background:#fff}
.kontakt-dane__tytul{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted);font-weight:400;margin:0;
}
.kontakt-dane__firma{margin:0;font-size:.9rem;line-height:1.7;color:var(--ink)}
/* Adres i telefon to ODNOSNIKI, nie ozdoba przy ikonie: na telefonie klika
   sie w nie, zeby zadzwonic albo napisac. Stad pole dotyku 44 px, a nie sama
   wysokosc wiersza tekstu. */
.kontakt-dane__lista{list-style:none;margin:0;padding:0;display:grid;font-size:.9rem}
.kontakt-dane__lista a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
}
.kontakt-dane__godziny{margin:0;font-size:.84rem;color:var(--ink-soft);line-height:1.6}

/* MAPA WCZYTUJE SIE PO KLIKNIECIU - do tego czasu stoi tu zaslepka
   z adresem. Wysokosc trzymamy z gory, zeby wczytanie mapy nie przesunelo
   tresci pod spodem (CLS). */
/* Mapa: pas pod formularzem i karta, na cala szerokosc tresci. */
.mapa{margin-top:var(--s5);min-height:230px}
.mapa__zaslepka{
  display:grid;gap:var(--s2);align-content:start;
  background:var(--porcelain);padding:var(--s3);min-height:200px;
}
.mapa__adres{margin:0;font-size:.9rem;color:var(--ink)}
.mapa__akcje{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.mapa__uwaga{margin:0;font-size:.76rem;line-height:1.6;color:var(--muted)}
.mapa--wczytana{display:grid;gap:var(--s3)}
.mapa iframe{display:block;width:100%;height:clamp(240px,32vw,380px);border:0;background:var(--porcelain)}
.mapa__stopka{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between}
.mapa__stopka .mapa__uwaga{max-width:52ch}
.mapa__stopka .link-u{display:inline-flex;align-items:center;min-height:44px}