/* ============================================================================
   fluid.css — SYSTEM PLYNNY (2026-07-28)  [wersja dla STATYKA KONCEPT_8]

   Ladowany jako OSTATNI arkusz (bezposrednio po assets/concept8.css we
   wszystkich 111 plikach *.html), wiec przy rownej specyficznosci wygrywa
   KOLEJNOSCIA KASKADY. `!important` uzywamy TYLKO tam, gdzie nadpisujemy
   istniejace `!important`.

   ZASADY (zamiast recznych breakpointow z lukami):
     1. SIATKI  — repeat(auto-fit, minmax(min(100%, X), 1fr)); liczba kolumn
                  wynika z dostepnej szerokosci, wiec KAZDA rozdzielczosc jest
                  obsluzona i nie ma zakresow bez pokrycia.
     2. WYSOKOSCI — min-height / min-height:fit-content zamiast sztywnego
                  height; kafel ROSNIE z trescia (dluzszy DE), nigdy nie ucina.
     3. TYPOGRAFIA — clamp() z OBNIZONYM minimum i NIEZMIENIONYM maksimum:
                  desktop 1280/1440/1920 wyglada identycznie.
     4. ZERO poziomego scrolla na kazdej szerokosci.

   ------------------------------------------------------------------------
   ROZNICE WOBEC WERSJI Z Next.js (services/strona-nextjs) — CO ZMIENIONO
   I DLACZEGO. Statyk dostal w miedzyczasie wlasne poprawki (fix8..fix12),
   ktorych port Next.js jeszcze nie ma, wiec czesc regul plynnych jest tu
   ZBEDNA albo COFALABY nowszy wyglad. Kazda taka regula jest ponizej opisana:

   [R1] Prog burgera 1040px — port Next.js musial go przesuwac (luka 981-1040
        dawala poziomy scroll 1268px przy oknie 1024). W statyku fix10 zrobil
        to juz w concept8.css:3669 (`html:not(.nav-open) header.nav nav.main
        {display:none}` + `.burger{display:flex}` w @media(max-width:1040px)).
        Pomiar 1041-1440px na 7 stronach PL/EN/DE: zero poziomego scrolla.
        => reguly `display` z sekcji 1 USUNIETE (duplikat, a `display:flex
        !important` na otwartym drawerze kolidowaloby z animacja fix11).
   [R2] Interpolacja paska nawigacji w pasmie 1041-1440px — w statyku pasmo
        jest juz czyste (concept8.css:3616 dla 1041-1150 + site-fixes.css dla
        1041-1500). Regula z Next.js ustawiala nav.main gap:14px i font 15px,
        co ZMIENILOBY desktop 1280/1440 (statyk ma tam gap ~28px).
        => USUNIETA.
   [R3] Megamenu (sekcja 9 w wersji Next) — statyk ma juz plynne megamenu po
        fix11 (concept8.css:3501 `width:min(1360px, calc(100vw - 32px))`
        + max-height + auto-fit kafli). Regula z Next uzywala 24px zamiast
        32px, czyli zmienialaby szerokosc panelu na 1280px.
        => USUNIETA w calosci.
   [R4] `#zastosowania .uses-grid` / `.mega-app .amega-grid` — statyk ma pelne
        pokrycie bez luk (6 kol / 3 kol <=1180 po fix10 / 2 kol <=900 / 1 kol
        <=520). Regula auto-fit z Next dawalaby na 1440px 4 kolumny zamiast 6
        (i 5 zamiast 3 w megamenu).
        => USUNIETE.
   [R5] Wszystkie reguly, ktore mogly zmienic uklad DESKTOPU (siatki kafli,
        `height:auto`, stopka, `.spec-card`, `.kgrid`, wyrownanie par
        przyciskow) zostaly zamkniete w `@media (max-width: 1180px)` — 1180px
        to wlasna granica statyka miedzy tabletem a desktopem (#rodziny,
        .ksplit, .uses-grid, megamenu). Dzieki temu >=1181px jest DOWODOWO
        nietkniete.
   [R6] `.c8-hero-specialties` — auto-fit tylko od 621px w gore. Ponizej
        concept8.css:2663 celowo ustawia 1 kolumne z separatorami poziomymi.
   [R7] Naglowek `.hero-split .panel h1` (<=600px) i `.category-page
        .lsplit__h1` (<=900px) — wersja z Next POWIEKSZALA je (np. lsplit 30px
        -> 39.6px @900). Statyk ma tam po fix8/fix12 wartosci monotoniczne
        i dopasowane do hero „na jeden ekran".
        => USUNIETE (powiekszanie naglowka na mobile dziala PRZECIW celowi,
        czyli brakowi ucinania).
   [R8] `.apphero2__title` — dip jest realny takze w statyku (27px @700 ->
        23px @768 -> 24.3px @900, pomiar Playwright), ale dolna granica jest
        podniesiona do 27px (a nie 26px jak w Next) i regula obowiazuje od
        701px w gore, zeby nie ruszac zwartego hero <=700px z fix8. Krzywa
        jest wtedy scisle rosnaca: 27px do ~1000px, potem do 33px.
        Desktop 1280/1440/1920 = 33px, czyli DOKLADNIE jak dotad.
   [R9] `.nav-cta .nav-spec` (<=1900px) i `.nav-cta .as` (<=1600px) —
        ZOSTAJA. Pomiar na statyku potwierdza realny poziomy scroll paska:
        turicoll-ns.html 1501/1560/1600px = 1612-1615px (PL), 1686-1689px
        (EN), 1654-1657px (DE) oraz 1800px = 1834px (EN) / 1802px (DE).
        Przy 1280/1440 statyk i tak chowa oba elementy (site-fixes.css
        1041-1500), a przy 1920 zadna z tych regul nie dziala — czyli
        kontrolne szerokosci desktopu sa nietkniete.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   0. BEZPIECZNIK POZIOMY
   `clip` (nie `hidden`) nie tworzy kontenera przewijania, wiec position:sticky
   naglowka i paskow sekcji dziala dalej. W statyku `overflow-x:hidden` jest
   ustawione tylko w inline <style> stron konceptowych — podstrony ladujace
   assets/styles.css go nie mialy.
   --------------------------------------------------------------------------- */
html {
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}


/* ---------------------------------------------------------------------------
   1. PASEK NAWIGACJI
   Patrz [R1] i [R2] — prog burgera i interpolacja 1041-1440 sa juz w statyku.
   Zostaje tylko to, czego statyk NIE ma.
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  /* pasek nie moze byc szerszy niz ekran, nawet gdy CTA jest dlugie (DE) */
  header.nav > .wrap,
  .topbar > .wrap {
    max-width: 100%;
    min-width: 0;
  }
  header.nav .nav-cta {
    min-width: 0;
    flex-wrap: nowrap;
  }
}

/* Otwarty drawer moze byc dluzszy niz ekran — musi sie przewijac wewnetrznie.
   concept8.css:3691 zdejmuje limit 85px, ale nie deklaruje przewijania. */
@media (max-width: 1040px) {
  html.nav-open header.nav nav.main {
    overflow-y: auto;
  }
}

/* [R9] Na stronach produktowych (PDP) pasek ma dodatkowy przycisk
   "Specyfikacja (PDF)" (.nav-spec, ~196px). site-fixes.css chowa go tylko do
   1500px, wiec od 1501px pasek wychodzil poza ekran (pomiar: 1612px @1501
   w PL, 1834px @1800 w EN). Ta sama akcja jest w tresci strony. */
@media (max-width: 1900px) {
  .nav-cta .nav-spec {
    display: none !important;
  }
}
/* [R9] Widget wyszukiwarki (.as, 161-201px) wracal od 1501px — wtedy pasek
   mial 1612-1689px przy oknie 1501px. Wraca dopiero, gdy naprawde jest miejsce. */
@media (max-width: 1600px) {
  .nav-cta .as,
  .nav-cta .navsearch,
  .navsearch {
    display: none !important;
  }
}


/* ---------------------------------------------------------------------------
   2. HERO STRONY GLOWNEJ
   2a. .caption (pigulka z podpisem slajdu). Inline <style id="hero-split-css">
       w index.html (linia 763) ustawia @media(max-width:900px){top:16px;
       bottom:auto}, a concept8.css w tym samym pasmie ustawia bottom:62px NIE
       resetujac top — a inline <style> jest w <head> PRZED <link>ami, wiec
       przegrywa tylko `bottom`, `top:16px` zostaje. Element absolutny
       z jednoczesnym top+bottom rozciaga sie miedzy nimi: stad "granatowy luk"
       na tablecie, ktory dodatkowo (z-index:5, concept8.css:578 > panel)
       przechwytywal klikniecia.
   --------------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 900px) {
  /* uklad tabletowy: karta panelu zaslania dol zdjecia, wiec pigulka wraca na
     gore kadru (tak jak zaklada inline <style>) — tylko domykamy `bottom` */
  .hero-split .caption,
  body:has(.hero-split) .hero-split .caption {
    top: 16px !important;
    bottom: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}
@media (max-width: 600px) {
  /* uklad telefonowy: pigulka na dolnym scrimie pasma zdjecia */
  .hero-split .caption,
  body:has(.hero-split) .hero-split .caption {
    top: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* 2b. Hero mobilny (<=600px) ma byc na 1 ekranie, ale NIE moze ucinac CTA.
       concept8.css:3427 daje height:max(470px, 100dvh - 120px) + overflow:hidden
       — na ekranie 320x568 tresc panelu byla wyzsza niz 470px, wiec przycisk
       "Zobacz rodziny produktow" lezal w calosci pod linia przyciecia (pomiar:
       scrollHeight 593 przy clientHeight 470).
       min-height:fit-content sprawia, ze pudlo ROSNIE do wysokosci tresci,
       gdy tresc jest wyzsza; przy normalnych ekranach nic sie nie zmienia
       (hero nadal ma dokladnie 100dvh - 120px).
       UWAGA [R7]: nie ruszamy tu font-size h1 — statyk ma po fix12 wlasna,
       zwarta skale clamp(23px, 6.6vw, 31px) (concept8.css:3204). */
@media (max-width: 600px) {
  body:has(.hero-split) .hero-split {
    min-height: fit-content !important;
  }
  body:has(.hero-split) .hero-split .hs-grid {
    height: auto !important;
    min-height: 100% !important;
  }
}

/* Na NISKICH telefonach (<=720px wysokosci, np. 320x568) sam naglowek + lead +
   lista specjalnosci + CTA nie mieszcza sie w 448px dostepnych pod naglowkiem.
   Lista specjalnosci to skroty do linii dostepne rowniez z menu i z sekcji
   "Cztery rodziny" nizej, wiec chowamy ja — CTA "Zobacz rodziny produktow"
   zostaje na pierwszym ekranie, a nic nie jest ucinane. */
@media (max-width: 600px) and (max-height: 720px) {
  /* podloga 470px byla wyzsza niz 448px dostepne na ekranie 568px — CTA
     wychodzilo pod fold. Na niskich ekranach hero = dokladnie tyle,
     ile zostaje pod naglowkiem (a min-height:fit-content nadal chroni
     przed przycieciem, gdy tresc jest wyzsza). */
  body:has(.hero-split) .hero-split {
    height: calc(100dvh - 120px) !important;
  }
  body:has(.hero-split) .hero-split .c8-hero-specialties {
    display: none !important;
  }
  body:has(.hero-split) .hero-split .panel .lead {
    margin-bottom: 12px !important;
  }
}

/* 2c. [R6] Pasek specjalnosci pod leadem — plynna liczba kolumn zamiast
       sztywnych 3. Ostatnia komorka w rzedzie nie moze miec wiszacej kreski
       po prawej. Ponizej 621px statyk celowo daje 1 kolumne z separatorami
       poziomymi (concept8.css:2663) — tego nie ruszamy. */
@media (min-width: 621px) {
  .c8-hero-specialties {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  }
}


/* ---------------------------------------------------------------------------
   3. HERO PODSTRON — rosnie z trescia zamiast ucinac (DE)
   Te sekcje maja sztywne height + overflow:hidden (concept8.css fix8), zeby
   zmiescic sie na pierwszym ekranie. min-height:fit-content zostawia to
   zachowanie, ale pozwala urosnac, gdy tlumaczenie jest dluzsze.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .application-page .apphero2,
  .category-page .lsplit {
    min-height: fit-content !important;
  }
}

/* 3b. HERO /keratyny (wariant `.ls-panel` z ukosnym clip-path) — TEKST BYL
   UCINANY PRZEZ SKOS w calym pasmie 901-1180px (pomiar: elementFromPoint na
   lewej krawedzi H1 zwracal IMG zamiast H1 przy 940/962/1024/1100/1180;
   przy 1280 juz H1). Blad jest STARSZY niz ten backport — wystepuje tak samo
   przy wylaczonym fluid.css.

   PRZYCZYNA: kolumna tekstu ma STALA szerokosc
   (`.ls-inner{width:min(560px,86%); margin-right:clamp(26px,5vw,74px)}`,
   panel `justify-content:flex-end`), a skos panelu jest PROCENTOWY
   (`clip-path:polygon(50% 0,100% 0,100% 100%,38% 100%)`).
   Lewa krawedz tekstu = W - margines - 560, czyli spada ponizej skosu, gdy
   0.498*W < 560 => W < ~1124px. Wtedy poczatek naglowka ("Kerat|yny TuriKer")
   jest po prostu wyciety razem z panelem i widac pod nim zdjecie.

   ROZWIAZANIE: szerokosc kolumny wiazemy z ta sama jednostka, w ktorej
   zdefiniowany jest skos (procent szerokosci hero), wiec lewa krawedz tekstu
   siada zawsze na ~49.8% — tuz za skosem (50% u gory, 38% u dolu) na KAZDEJ
   szerokosci pasma, bez progow.
   Gorna granica to 1279px: przy 1280px lewa krawedz tekstu wypada na 48.6%,
   czyli juz ZA skosem (pomiar: elementFromPoint zwraca H1), wiec kontrolna
   szerokosc desktopu 1280px zostaje nietknieta co do piksela. */
@media (min-width: 901px) and (max-width: 1279px) {
  .lsplit .ls-inner {
    width: min(560px, calc(46% - 8px));
  }
}

/* 3c. HERO /keratyny — ODSUNIECIE SKOSU OD TEKSTU (zadanie #25).
   Punkt 3b zdjal UCINANIE tekstu (lewa krawedz siada tuz ZA skosem), ale
   zapas byl symboliczny. Pomiar w Chromium (odleglosc lewej krawedzi tekstu
   od krawedzi clip-path liczonej na wysokosci gornej krawedzi elementu,
   PL/EN/DE, 15 szerokosci):

     szerokosc |  901   940  1024  1100  1180  1250 || 1440  1920
     nadtytul  | 18.5  21.3  25.3  27.9  29.3  30.6 || 49.6  62.1
     H1        | 23.1  28.1  33.1  37.0  38.9  40.7 || 61.0  76.4

   Czyli w calym pasmie 901-1300px tekst mial 2-3x mniejszy odstep od skosu
   niz na kontrolnym 1440px, a dodatkowo panel rzuca w lewo cien
   (`filter:drop-shadow(-12px 2px 24px)`, keratyny.html:209), ktory przy 19px
   zapasu wchodzi wprost pod nadtytul — stad zgloszenie "hero zaslania tekst".

   Zamiast przesuwac tekst w prawo (zjadlby prawy margines) przesuwamy SKOS
   w lewo, plynnie i tylko tam, gdzie jest ciasno: przesuniecie rosnie liniowo
   od 0px przy 1440px do 30px przy 901px. Przy 1440px wartosc wynosi 0, wiec
   kontrolna szerokosc desktopu i wszystko powyzej zostaja NIETKNIETE co do
   piksela, a przejscie przez granice media query jest ciagle (przy 1439px
   przesuniecie = 0.06px). Skos i jego cyjanowa nitka (.ls-seamline) dostaja
   to samo przesuniecie, wiec pozostaja rownolegle. */
@media (min-width: 901px) and (max-width: 1439px) {
  .lsplit .ls-panel,
  .lsplit .ls-seamline {
    --ls-skew-shift: clamp(0px, (1440px - 100vw) * 0.056, 30px);
    clip-path: polygon(
      calc(50% - var(--ls-skew-shift)) 0,
      100% 0,
      100% 100%,
      calc(38% - var(--ls-skew-shift)) 100%
    );
  }
}


/* ---------------------------------------------------------------------------
   4. SIATKI PLYNNE (auto-fit) — bez zakresow bez pokrycia
   min(100%, X) chroni przed przepelnieniem, gdy kontener jest wezszy niz X.
   --------------------------------------------------------------------------- */

/* 4a. #rodziny — 3 prostokatne kafle rodzin.
       concept8.css po fix10 ma tu auto-fit, ale auto-fit w GRIDZIE zostawia na
       tablecie (2 kolumny) pusta komorke ~344x520px obok osamotnionego TuriGel.
       Flex z flex-grow domyka rzad: ostatni kafel rozciaga sie na cala
       szerokosc zamiast zostawiac dziure.
       Desktop: kontener 1344px (wrap 1400 - 2x28), gap 24 => 3 x flex-basis
       330px rosna do 432px, czyli DOKLADNIE tyle, ile daly 3 rowne kolumny
       gridu — 1280/1440/1920 bez zmian. */
#rodziny .fam-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}
#rodziny .fam-grid > .fam {
  flex: 1 1 330px;
  min-width: min(100%, 330px);
  max-width: 100%;
}
/* .ksplit (sciete kafle TuriKer) jest RODZENSTWEM kafli .fam w tym samym
   kontenerze i w gridzie zajmowalo caly rzad (grid-column:1/-1, inline
   <style id="ksplit-css">). W ukladzie flex odpowiednikiem jest
   pelnoszerokosciowy element w nowym wierszu. */
#rodziny .fam-grid > .ksplit {
  flex: 1 1 100%;
  width: 100%;
  min-width: 100%;
}

/* 4b. TuriKer (.ksplit) w ukladzie plaskim — plynna liczba kolumn na CALYM
       pasmie <=1180px. concept8.css robi auto-fit tylko 821-1180, a ponizej
       821 siatka spada na sztywno do 1 kolumny, wiec tablet 768 mial 3 kafle
       pelnej szerokosci pod 2-kolumnowa siatka rodzin. */
@media (max-width: 1180px) {
  #rodziny .ksplit-clip {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: stretch;
  }
  #rodziny .ksplit .kp,
  #rodziny .ksplit .kp + .kp {
    display: flex;
    flex-direction: column;
    flex: 1 1 250px;
    min-width: min(100%, 250px);
  }
  #rodziny .ksplit .kp-in {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  #rodziny .ksplit .kp-body {
    flex: 1;
  }
}

/* 4c. Pozostale siatki kafli — jedna regula na kazda szerokosc.
       [R5] tylko <=1180px, zeby desktop pozostal bajt w bajt taki jak dotad.
       [R4] `.uses-grid` i `.amega-grid` swiadomie POMINIETE. */
@media (max-width: 1180px) {
  .apgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  }
  .pgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
  .apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  }
  .ben-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }
  .reglist {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
  .simple,
  .dual,
  .split,
  .kosz {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
  .kf2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
  .c8-evidence__grid,
  .help-steps__grid,
  .help-choice-grid,
  .help-route-grid,
  .about-c8 .about-process-grid,
  .about-c8 .about-ops-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
  /* 4 elementy => auto-fit nigdy nie da wiecej niz 4 kolumny (puste tory sa
     zwijane), wiec ta regula tylko ZMNIEJSZA liczbe kolumn, gdy brak miejsca. */
  .c8-cert-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }
  .abgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  }
}

/* 4d. Stopka. Strona glowna ma 4-kolumnowy `.cols` z wiodaca kolumna 1.5fr —
       na mobile inline <style> zwijal go do `1fr 1fr`, czyli dwoch kolumn po
       ~115px, w ktorych akapit lamal sie po 1-2 slowa. */
@media (max-width: 820px) {
  footer .cols {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  }
}
@media (max-width: 1180px) {
  footer .wrap.fgrid,
  footer .fcols {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
}


/* ---------------------------------------------------------------------------
   5. WYSOKOSCI — kafel rosnie z trescia, nie zostawia martwej przestrzeni
   [R5] calosc ograniczona do <=1180px.
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  /* Kafle "Kluczowe korzysci": sztywne min-height zostawialo 31-71px pustki
     pod krotkim tekstem. Siatka i tak wyrownuje wysokosci w rzedzie
     (align-items:stretch), wiec floor jest zbedny. */
  .category-benefits .ben-grid,
  .ben-grid {
    align-items: stretch;
  }
  .category-benefits .ben-card {
    min-height: 0;
  }

  /* Karty, ktore mialy sztywna wysokosc / obcinaly tekst przy dluzszym jezyku.
     `.use` celowo pominiety — concept8.css:3172 (`#zastosowania .use
     {height:100%}`) wyrownuje kafle zastosowan i ma wyzsza specyficznosc. */
  .pcard,
  .apc,
  .fam,
  .mcol,
  .acard,
  .ben-card {
    height: auto;
  }
  .msub {
    min-height: 0;
  }
}


/* ---------------------------------------------------------------------------
   6. PASKI SEKCJI (.category-jump / .application-jump)
   Dwa rozne mechanizmy dla tego samego wzorca UI: na /kolageny scrollerem byl
   `__links` (product-category-refresh.css:402), a na /zywnosc rodzic `.wrap`
   (application-refresh.css:408). Ujednolicamy na `__links` + dodajemy
   afordancje przewijania (maska zanikajaca przy prawej krawedzi), zeby bylo
   widac, ze pasek ma ciag dalszy.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .category-jump .wrap,
  .application-jump .wrap {
    display: flex;
    align-items: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
  .category-jump__links,
  .application-jump__links {
    flex: 1 1 auto;
    min-width: 0;
    gap: clamp(14px, 3.4vw, 28px);
    padding: 0 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .category-jump__links::-webkit-scrollbar,
  .application-jump__links::-webkit-scrollbar {
    display: none;
  }
  .category-jump a,
  .application-jump a {
    flex: 0 0 auto;
    font-size: clamp(12px, 3.6vw, 13px);
    white-space: nowrap;
  }
}
/* Etykieta linii/zastosowania zabierala ~159px z 320-430px paska — dopiero
   ponizej 700px chowamy ja, zeby wszystkie kotwice zmiescily sie bez scrolla. */
@media (max-width: 700px) {
  .category-jump strong,
  .application-jump strong {
    display: none;
  }
}

/* 6b. TELEFON — KOTWICE ZAWIJAJA SIE ZAMIAST CHOWAC SIE ZA MASKA (zadanie #25).
   Ukrycie etykiety (wyzej) nie wystarczylo. Pomiar w Chromium, 34 strony
   z paskiem x 12 szerokosci 320-900px: 56 kombinacji, w ktorych tresc paska
   byla szersza niz jego okno, czyli ostatnia kotwica byla urwana:

     rolnictwo-biotechnologia.html  @320  415px tresci w oknie 292px  (-123)
     de/{zywnosc,sport,stawy,uroda,pet-food}  @320  405 / 292        (-113)
     rolnictwo-biotechnologia.html  @390  445px tresci w oknie 359px  (-86)
     en/{zywnosc,sport,stawy,uroda,pet-food}  @360  387 / 331         (-56)

   Pasek BYL przewijalny i mial maske wygaszajaca, ale pasek przewijania jest
   ukryty (`scrollbar-width:none`), wiec dla czytelnika to nie wygladalo jak
   "jest wiecej", tylko jak "ucieto mi napis w polowie slowa" — dokladnie tak
   brzmi zgloszenie.

   Zamiast przewijania pozwalamy kotwicom przejsc do drugiego rzedu. Wysokosc
   paska trzyma `.wrap` (`min-height:60px` w product-category-refresh.css:474,
   `61px` w application-refresh.css:73), a NIE wysokosc samych linkow, wiec
   po zmniejszeniu `min-height` linku strony miesczace sie w jednym rzedzie
   maja pasek dokladnie tej samej wysokosci co dotad; rosnie on wylacznie tam,
   gdzie tekst i tak byl niewidoczny. Typografia, odstepy i kolejnosc kotwic
   bez zmian — nie ruszamy tresci etykiet. */
@media (max-width: 700px) {
  .category-jump__links,
  .application-jump__links {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 2px;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .category-jump a,
  .application-jump a,
  /* product-category-refresh.css:474 ma `.category-page .category-jump a
     {min-height:60px}` — wyzsza specyficznosc (0,3,0), wiec bez tego selektora
     kotwice na stronach LINII zostalyby przy 60px i drugi rzad podbilby pasek
     ze 64px do ~124px. Dzis zadna etykieta linii sie nie zawija, ale po
     dodaniu dluzszej kotwicy lub tlumaczenia zawinelaby sie — domykamy to
     teraz, a nie przy nastepnym zgloszeniu. */
  .category-page .category-jump a {
    min-height: 34px;
  }
}


/* ---------------------------------------------------------------------------
   7. TICKER W TOPBARZE
   Okno tickera to reszta paska po mailu i przelaczniku jezyka: ~190px @320,
   ~260px @390. Komunikaty (243-340px, nowrap) NIGDY nie mieszcza sie w calosci
   (site-fixes.css:3 daje `.topic-ticker{overflow:hidden}`), wiec na waskich
   ekranach zawsze widac urwany tekst w polowie slowa. Ponizej progu, na ktorym
   miesci sie najdluzszy komunikat (DE ~340px), ticker znika — te same sciezki
   sa dostepne z menu i z sekcji "Zastosowania".
   --------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .topbar .topic-ticker {
    display: none !important;
  }
}


/* ---------------------------------------------------------------------------
   8. TYPOGRAFIA PLYNNA
   Wszedzie ta sama metoda: zostawiamy nachylenie (vw) i GORNA granice clamp()
   bez zmian — desktop 1280/1440/1920 renderuje sie identycznie — a obnizamy
   DOLNA granice, ktora byla przyczyna naglowkow 38px na ekranie 320px
   i odwroconej hierarchii H1/H2 w pasmie 600-900px.
   --------------------------------------------------------------------------- */

/* 8a. H2 sekcyjne — TYLKO ponizej 1025px.
   Zachowujemy dokladnie to samo nachylenie (vw) co oryginal, wiec przy 1024px
   wartosc jest identyczna z desktopowa (np. 4vw = 40.96px) — nie ma skoku na
   granicy, a desktop 1280/1440/1920/2560 renderuje sie bajt w bajt jak dotad.
   Zmieniamy wylacznie DOLNA granice clamp(): 38px na ekranie 320px oznaczalo
   naglowek szerszy niz kolumna tekstu i H2 wieksze od H1. */
@media (max-width: 1024px) {
  .c8-evidence h2 {
    font-size: clamp(23px, 4vw, 58px);
  }
  .category-story h2 {
    font-size: clamp(23px, 4vw, 56px);
  }
  .category-story__copy h2 {
    font-size: clamp(23px, 4vw, 55px);
  }
  .category-products h2,
  .category-benefits h2 {
    font-size: clamp(23px, 4vw, 52px);
  }
  .application-products__head h2 {
    font-size: clamp(23px, 4vw, 54px) !important;
  }
  .application-contact h2 {
    font-size: clamp(22px, 3vw, 43px);
  }
  .help-section-head h2 {
    font-size: clamp(23px, 4vw, 54px);
  }
  .c8-agbio-brief h2 {
    font-size: clamp(22px, 3.5vw, 48px);
  }
  .preview-app-head h2 {
    font-size: clamp(23px, 4vw, 54px);
  }
  /* concept6-b2b.css @media(max-width:620px) daje tu clamp(36px,10vw,46px),
     czyli 36-46px na telefonie — wiecej niz H1 strony i niz sasiednie H2. */
  .c6-how__intro h2 {
    font-size: clamp(23px, 4vw, 46px);
  }
  .c6-heading h2,
  .c6-section h2 {
    font-size: clamp(22px, 4vw, 46px);
  }
}
/* Bloki CTA maja w statyku sztywne 32px ponizej 620px — na 320px to za duzo. */
@media (max-width: 620px) {
  .about-c8 .about-final-cta h2,
  .help-final-cta h2 {
    font-size: clamp(22px, 5.2vw, 32px);
  }
  .c8-agbio-heading h2 {
    font-size: clamp(22px, 5.4vw, 34px);
  }
}

/* Naglowki wielolinijkowe potrzebuja oddechu — line-height 1.02 sklejal linie
   na waskich ekranach. */
@media (max-width: 760px) {
  .section h2,
  .section > .wrap > h2,
  .band h2,
  .c8-evidence h2,
  .category-story h2,
  .category-products h2,
  .category-benefits h2,
  .category-contact h2,
  .application-products__head h2,
  .application-contact h2 {
    line-height: 1.16 !important;
    letter-spacing: -.02em;
  }
  /* 28px to wartosc bazowa powyzej 760px (index.html: clamp(28px,3.6vw,42px)) —
     clamp konczy sie dokladnie na niej, wiec skala rosnie monotonicznie
     i nie ma skoku na progu. */
  .section h2,
  .section > .wrap > h2 {
    font-size: clamp(21px, 4.4vw, 28px);
  }
  .band h2 {
    font-size: clamp(21px, 4.4vw, 28px);
  }
  /* nadpisuje product-category-refresh.css @media(max-width:700px)
     clamp(34px,10vw,44px) i application-refresh.css @media(max-width:640px)
     38px!important — 34-38px na ekranie 320px to naglowek szerszy niz kolumna
     tekstu I WIEKSZY OD H1 strony. Nachylenie 4vw = to samo, co w pasmie
     760-1024px, wiec skala jest ciagla. */
  .category-story h2 {
    font-size: clamp(23px, 4vw, 56px);
  }
  .category-products h2,
  .category-benefits h2 {
    font-size: clamp(23px, 4vw, 52px);
  }
  .application-products__head h2 {
    font-size: clamp(23px, 4vw, 54px) !important;
  }
}

/* 8b. [R8] `.apphero2__title` — H1 hero zastosowan MALAL wraz ze WZROSTEM
   ekranu: sztywne progi 400/600px w assets/styles.css (24px / 22px) leza NAD
   plynna regula bazowa clamp(23px, 2.7vw, 33px), wiec pomiar dawal
   27px @700 -> 23px @768 -> 24.3px @900 -> 27.6px @1024.
   Jedna krzywa, to samo nachylenie i to samo maksimum co oryginal
   (1280/1440/1920 = 33px, bez zmian), tylko dolna granica rowna wartosci
   z progu 700px, wiec przejscie jest ciagle i scisle rosnace.
   Od 701px w gore — ponizej zostaje zwarte hero "na jeden ekran" z fix8. */
@media (min-width: 701px) {
  body.application-page .apphero2 h1.apphero2__title,
  body.application-page .apphero2 h1,
  .application-page .apphero2 h1,
  .apphero2__title,
  .apphero2-title {
    font-size: clamp(27px, 2.7vw, 33px) !important;
    line-height: 1.14;
  }
}

/* 8c. Minimalny czytelny rozmiar tekstu na mobile i tablecie (bylo 10-11.5px).
       Prog 900px, bo w pasmie 621-900 te same etykiety byly nadal 10-10.5px. */
@media (max-width: 900px) {
  .c8-cert-panel__label,
  .c8-hero-specialties span,
  .c8-hero-specialties b,
  .c8-cert-row a span,
  .mkn {
    font-size: 12px;
  }
  #rodziny .ksplit .kp-new,
  .kp-new {
    font-size: 12px;
  }
  .topbar .topic-ticker__item {
    font-size: 12px;
  }
  .hero-split .chip,
  .btn-link,
  .apc .ln {
    font-size: 12.5px;
  }
}

/* 8d. Prawny disclaimer: justowanie (index.html:443 / styles.css:444
       `text-align:justify`) przy waskiej kolumnie tworzy "rzeki" bialych
       przerw (najgorzej w DE). Na desktopie kolumna jest szeroka, wiec
       zostawiamy justowanie bez zmian. */
@media (max-width: 1180px) {
  footer .legal,
  footer .disclaimer,
  footer .disclaimer p,
  .disclaimer p,
  footer small,
  footer p {
    text-align: start;
    text-wrap: pretty;
  }
}


/* ---------------------------------------------------------------------------
   9. (USUNIETE) MEGAMENU — patrz [R3]. Statyk ma plynne megamenu po fix11.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   10. DRABINA DROBIAZGOW
   --------------------------------------------------------------------------- */

/* Obrazy i media nigdy nie rozpychaja kolumny. `.logo` ma wlasne
   `max-width:none` o wyzszej specyficznosci, wiec nie jest tu ruszane. */
img,
svg,
video,
iframe,
table {
  max-width: 100%;
}

/* Dlugie, nielamliwe tokeny (adresy e-mail, nazwy DE) nie rozpychaja kart.
   Dziala WYLACZNIE wtedy, gdy token naprawde sie nie miesci. */
.fam .body,
.pcard,
.apc,
.use,
.ben-card,
.mcol,
.kp-body {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Siatki na /kontakt mialy tory sizowane min-content (334px przy kontenerze
   264px), wiec kolumna wychodzila poza ekran na 320px. */
@media (max-width: 1180px) {
  .kgrid,
  .kgrid2,
  .kteam,
  .kcards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }
}
.kgrid > *,
.kgrid2 > *,
.kteam > *,
.kleft,
.kright,
.kspoc {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Dlugie zlozenia DE ("Datenschutzerklaerung") w zgodach formularza wychodzily
   poza ekran przy 320px, bo linku nie da sie zlamac na granicy slowa. */
.kconsent,
.kconsent2,
.kconsent a,
.kconsent2 a,
label a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* TABELE (dokumenty, specyfikacje PDP) — na waskich ekranach min-content
   komorek byl szerszy niz kolumna tekstu i tabela wychodzila poza ekran
   (albo byla ucinana przez overflow:hidden karty .spec-card). */
@media (max-width: 560px) {
  table {
    font-size: 12.5px;
  }
  th,
  td {
    padding-left: 8px;
    padding-right: 8px;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
@media (max-width: 1180px) {
  .spec-card {
    overflow: visible;
  }
  .spec-card table {
    width: 100%;
    table-layout: auto;
  }

  /* Pary przyciskow wyrownane do lewej takze po zawinieciu. */
  .cta,
  .lsplit__cta,
  .apphero2__cta,
  .application-contact__actions,
  .pdp-cta {
    align-items: stretch;
  }
}

/* ============================================================================
   fix14 — PODSWIETLENIE AKTYWNEJ POZYCJI MENU  (wariant: cichy underline)
   ============================================================================
   PROBLEM (zgloszony po fix12): kreska pod aktywna pozycja menu byla na
   stronach linii produktowych (kolageny/keratyny/hydrolizaty/zelatyny/
   agroker/bioker) odsunieta ~30px w dol — az pod naglowek, na hero —
   a na wiedza/dokumenty wygladala poprawnie.

   PRZYCZYNA: fix12 rysowal kreske na `nav.main a::after {bottom:-3px}`,
   czyli wzgledem PUDELKA <a>. Od @media (min-width:981px) concept8.css
   ustawia `header.nav nav.main > .hasmega > a {display:flex; min-height:100%}`,
   wiec pozycje z megamenu ("Produkty", "Zastosowania") maja pudelko wysokie
   na cale 85px naglowka, a zwykle linki ("Wiedza", "Dokumenty") tylko ~39px.
   `bottom:-3px` dawal wiec dwa rozne miejsca.

   ROZWIAZANIE: site-fixes.js opakowuje etykiete kazdej pozycji w
   <span class="c8-navlabel">. Podswietlenie wisi na TYM spanie, ktory ma
   dokladnie wymiary tekstu — niezaleznie od tego, czy <a> jest rozciagniete.
   Klasa bledu zamknieta systemowo, nie punktowo: kazda przyszla pozycja menu
   dostaje ten sam span i te sama geometrie.

   WYBRANY WARIANT: "cichy underline marki".
   - AKTYWNA: tekst w granacie marki (#17156d) + kreska 2px w cyanie marki
     (#00aed9) tuz pod etykieta, wjezdzajaca od lewej w 180 ms ease-out.
   - HOVER / FOCUS: dokladnie ta sama kreska, ale w neutralnym granacie 26% —
     rozroznienie idzie kolorem (marka vs neutralnie), nie rozmiarem, wiec
     nic nie drga i nie zmienia wysokosci wiersza.
   - CZEGO NIE MA (swiadomie): tla/pigulki, obwodki, gradientu, cienia,
     poswiaty, zmiany wagi fontu (przesuwalaby sasiednie pozycje), animacji
     dluzszych niz 180 ms i takich, ktore skacza albo pulsuja.
   - DLACZEGO: naglowek B2B ma odpowiadac na pytanie "gdzie jestem", a nie
     zabierac uwage tresci. Underline to najcichszy nosnik tej informacji,
     ktory dziala identycznie w desktopie, na tablecie i w drawerze
     (tam wiersze sa juz granatowe/700, wiec cyanowa kreska jest jedynym,
     ale wystarczajacym sygnalem).
   ========================================================================== */

/* --- (0) etykieta: kotwica podswietlenia --- */
header.nav nav.main > a > .c8-navlabel,
header.nav nav.main > .hasdrop > a > .c8-navlabel,
header.nav nav.main > .hasmega > a > .c8-navlabel {
  position: relative;
  display: inline-block;
}

/* --- (1) wylaczamy stara kreske z pudelka <a> (styles.css + fix12) --- */
header.nav nav.main > a::after,
header.nav nav.main > .hasdrop > a::after,
header.nav nav.main > .hasmega > a::after {
  content: none;
}
/* ...ale drawer uzywa tego samego ::after jako SZEWRONU (concept8.css fix11),
   wiec tam musi wrocic. */
@media (max-width: 1040px) {
  html.nav-open header.nav nav.main > a::after,
  html.nav-open header.nav nav.main > .hasdrop > a::after,
  html.nav-open header.nav nav.main > .hasmega > a::after { content: "" !important; }
}

/* --- (2) kreska: JEDEN element dla hover i dla stanu aktywnego --- */
header.nav nav.main > a > .c8-navlabel::after,
header.nav nav.main > .hasdrop > a > .c8-navlabel::after,
header.nav nav.main > .hasmega > a > .c8-navlabel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.30em;
  height: 2px;
  background: rgba(23, 21, 109, .26);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .18s ease-out, background-color .18s ease-out;
  pointer-events: none;
}

/* hover / focus na dowolnej pozycji — neutralna kreska */
header.nav nav.main > a:hover > .c8-navlabel::after,
header.nav nav.main > a:focus-visible > .c8-navlabel::after,
header.nav nav.main > .hasdrop:hover > a > .c8-navlabel::after,
header.nav nav.main > .hasdrop > a:focus-visible > .c8-navlabel::after,
header.nav nav.main > .hasmega:hover > a > .c8-navlabel::after,
header.nav nav.main > .hasmega > a:focus-visible > .c8-navlabel::after {
  transform: scaleX(1);
}

/* --- (3) STAN AKTYWNY: granatowy tekst + cyanowa kreska --- */
header.nav nav.main > a.is-current,
header.nav nav.main > .hasdrop > a.is-current,
header.nav nav.main > .hasmega > a.is-current {
  color: #17156d;
}
header.nav nav.main > a.is-current > .c8-navlabel::after,
header.nav nav.main > .hasdrop > a.is-current > .c8-navlabel::after,
header.nav nav.main > .hasmega > a.is-current > .c8-navlabel::after {
  background: #00aed9;
  transform: scaleX(1);
  animation: c8NavUnderlineIn .18s ease-out both;
}
/* hover na pozycji juz aktywnej nie zmienia nic (zero migotania) */
header.nav nav.main > a.is-current:hover > .c8-navlabel::after,
header.nav nav.main > .hasdrop:hover > a.is-current > .c8-navlabel::after,
header.nav nav.main > .hasmega:hover > a.is-current > .c8-navlabel::after {
  background: #00aed9;
  transform: scaleX(1);
}

@keyframes c8NavUnderlineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- (4) DRAWER MOBILNY: ten sam underline pod etykieta wiersza --- */
@media (max-width: 1040px) {
  html.nav-open header.nav nav.main > a > .c8-navlabel::after,
  html.nav-open header.nav nav.main > .hasdrop > a > .c8-navlabel::after,
  html.nav-open header.nav nav.main > .hasmega > a > .c8-navlabel::after {
    bottom: -.26em;
  }
}

/* --- (5) dostepnosc: bez animacji przy prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  header.nav nav.main > a > .c8-navlabel::after,
  header.nav nav.main > .hasdrop > a > .c8-navlabel::after,
  header.nav nav.main > .hasmega > a > .c8-navlabel::after {
    animation: none !important;
    transition: none !important;
  }
  header.nav nav.main > a.is-current > .c8-navlabel::after,
  header.nav nav.main > .hasdrop > a.is-current > .c8-navlabel::after,
  header.nav nav.main > .hasmega > a.is-current > .c8-navlabel::after {
    transform: scaleX(1);
  }
}