/* KONCEPT_8 — spójny system wizualny i nawigacyjny Atlantis Ingredients. */

:root {
  --c8-navy: #17156d;
  --c8-cyan: #00aed9;
  --c8-ink: #101642;
  --c8-line: #dce3f0;
  --c8-soft: #f4f7fb;
  --c8-shadow: 0 18px 46px rgba(20, 27, 76, .14);
}

/*
   Jeden kontrakt wymiarów dla nagłówka na wszystkich podstronach.
   Starsze pliki stron zawierają własne reguły menu; dlatego wymiary
   wspólnej powłoki są ustalane tutaj, w ostatnim arkuszu serwisu.
*/
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Typografia nagłówka nie może dziedziczyć kroju z treści danej strony. */
body > .topbar,
body > header.nav {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
  font-style: normal;
  font-synthesis: none;
}

body > header.nav nav.main > a,
body > header.nav nav.main > .hasmega > a,
body > header.nav nav.main > .hasdrop > a {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

body > header.nav .nav-cta,
body > header.nav .nav-cta input,
body > header.nav .nav-cta button,
body > header.nav .nav-cta a {
  font-family: inherit !important;
}

@media (min-width: 821px) {
  body > .topbar,
  body > .topbar > .wrap {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  body > header.nav,
  body > header.nav > .wrap,
  body > header.nav nav.main,
  body > header.nav .nav-cta {
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
  }

  body > header.nav > .wrap {
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body > header.nav .nav-cta,
  body > header.nav .nav-cta > * {
    flex-shrink: 0;
  }
}

/* Nie interpolujemy rozmiaru menu pomiędzy dokumentami. */
@view-transition { navigation: none; }

/* Kontakt jest osobnym, wyraźnym działaniem obok wyszukiwarki. */
.nav-cta {
  gap: 10px !important;
}
.nav-cta .as { order: 1; }
.nav-cta .contact-cta {
  order: 2;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 13px;
  background: linear-gradient(135deg, #dff7fc, #bdeef8);
  border: 1px solid rgba(0, 174, 217, .32);
  color: var(--c8-navy);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 174, 217, .12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav-cta .contact-cta::after { content: "→"; color: #0088ad; font-size: 17px; }
.nav-cta .contact-cta:hover,
.nav-cta .contact-cta:focus-visible {
  background: linear-gradient(135deg, #c9f2fb, #a7e7f5);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 174, 217, .2);
}
.nav-cta .cartbtn { order: 3; }
.nav-cta .burger { order: 4; }
/* fix18a / uwaga 3.1: "Pomoc w doborze" NIE MA juz stalego wyroznienia.
   Byly tu `nav.main > a.c8-help-link{color:#087eaa}` i badge `::before{content:"?"}`
   — link wygladal na aktywna podstrone niezaleznie od tego, gdzie user jest.
   fix12 zerowal to nadpisaniem na koncu pliku; fix18a usuwa zrodlo, wiec
   "Pomoc w doborze" dziedziczy kolor z `nav.main a` jak kazda inna pozycja.
   Wyroznienie aktywnej pozycji robi .is-current (site-fixes.js + fluid.css).
   Klasa .c8-help-link zostaje w markupie — uzywa jej drawer mobilny. */

/* Duże logo osadzone czysto w jednej wysokości menu. */
@media (min-width: 981px) {
  .topbar,
  .topbar > .wrap {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  .topbar { overflow: hidden; }

  header.nav {
    top: 34px !important;
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
    overflow: visible;
  }

  header.nav > .wrap,
  header.nav nav.main,
  header.nav .nav-cta {
    height: 85px !important;
    min-height: 85px !important;
    max-height: 85px !important;
  }

  header.nav > .wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  header.nav nav.main {
    margin-left: 0 !important;
    gap: clamp(22px, 2vw, 40px) !important;
  }

  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a {
    font-size: 18.5px !important;
    line-height: 1.2 !important;
  }

  header.nav .nav-cta { align-items: center; }
}

@media (min-width: 1181px) {
  /* Logo i jego dolna plakietka tworzą jedną warstwę nad menu kontekstowym. */
  header.nav {
    z-index: 52;
  }

  header.nav .wrap > a:first-child {
    position: relative;
    z-index: 205;
    isolation: isolate;
    align-self: stretch;
    flex: 0 0 clamp(244px, 14vw, 272px);
    width: clamp(244px, 14vw, 272px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px 0 0;
    background: transparent;
    overflow: visible;
  }

  header.nav .wrap > a:first-child::before {
    content: "";
    position: absolute;
    inset: 0 -7px -26px;
    z-index: 1;
    pointer-events: none;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 90% 100%, 10% 100%, 0 72%);
    filter: drop-shadow(0 9px 11px rgba(18, 23, 70, .11));
  }

  header.nav .wrap > a:first-child::after {
    content: "TurEssence\00AE";
    position: absolute;
    left: -28px;
    right: -28px;
    bottom: -52px;
    height: 52px;
    z-index: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 84px 7px;
    pointer-events: none;
    /* Na stronach rodzin korzysta z ich palety; poza nimi pozostaje granat Atlantis. */
    background: linear-gradient(
      135deg,
      var(--category-navy, #0d0c47) 0%,
      var(--category-deep, var(--c8-navy)) 100%
    );
    color: #fff;
    /* 44 px przy 52 px wysokości daje ten sam kąt co białe skosy nad nim. */
    clip-path: polygon(0 0, 100% 0, calc(100% - 44px) 100%, 44px 100%);
    filter: drop-shadow(0 10px 13px rgba(13, 12, 71, .22));
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: none;
  }

  header.nav .wrap > a:first-child .logo {
    position: relative;
    z-index: 2;
    width: auto;
    height: clamp(66px, 4vw, 72px);
    transform: translateY(14px);
    filter: drop-shadow(0 7px 9px rgba(19, 23, 74, .08));
    transition: transform .18s ease, opacity .18s ease;
  }

  header.nav .wrap > a:first-child:hover .logo,
  header.nav .wrap > a:first-child:focus-visible .logo {
    transform: translateY(12px) scale(1.012);
    opacity: .94;
  }

  /* Pasek sekcji zaczyna się za znakiem i optycznie wpina w granatowy trapez. */
  body.category-page .category-jump .wrap,
  body.application-page .application-jump .wrap {
    max-width: none !important;
    min-height: 64px;
    padding-left: calc(clamp(24px, 3vw, 52px) + clamp(244px, 14vw, 272px) + 110px) !important;
    padding-right: clamp(24px, 3vw, 52px) !important;
  }

  body.category-page .category-jump strong,
  body.application-page .application-jump strong {
    position: relative;
    padding-left: 13px;
  }

  body.category-page .category-jump strong::before,
  body.application-page .application-jump strong::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: var(--category-accent, var(--application-accent, var(--c8-cyan)));
    transform: translateY(-50%);
  }
}

/* Pośrednia szerokość pulpitu: cały zestaw mieści się przy powiększeniu 100%,
   a koszyk zachowuje bezpieczny prawy margines. */
@media (min-width: 1501px) and (max-width: 2140px) {
  header.nav .wrap > a:first-child {
    flex-basis: 250px;
    width: 250px;
    padding-right: 14px;
  }

  header.nav nav.main {
    gap: clamp(24px, 1.4vw, 30px) !important;
  }

  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a {
    font-size: 18px !important;
  }

  header.nav .nav-cta .as-input {
    width: 150px;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  header.nav .wrap > a:first-child {
    flex-basis: 230px;
    width: 230px;
    padding-left: 0;
    padding-right: 14px;
  }

  header.nav .wrap > a:first-child .logo { height: 65px; width: auto; }
  header.nav nav.main { gap: 22px !important; }
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a { font-size: 17px !important; }
}

@media (min-width: 981px) and (max-width: 1180px) {
  header.nav .logo { height: 49px; width: auto; }
}

@media (max-width: 980px) {
  header.nav .logo { height: 42px; width: auto; }
}

/* Mega menu ma zawsze pierwszeństwo przed paskiem linii/zastosowania. */
@media (min-width: 981px) {
  .topbar { z-index: 201 !important; }
  header.nav { z-index: 200 !important; }
  header.nav nav.main { align-self: stretch; }
  header.nav nav.main > .hasmega {
    display: flex;
    align-items: center;
    align-self: stretch;
  }
  header.nav nav.main > .hasmega > a {
    display: flex;
    align-items: center;
    min-height: 100%;
  }
  header.nav nav.main .mega {
    z-index: 220 !important;
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Home hero: pełne zdjęcie, czytelna karta i kierunkowe przejście slajdów. */
body:has(.hero-split) .hero-split {
  position: relative;
  min-height: max(590px, calc(100svh - 138px));
  overflow: hidden;
  isolation: isolate;
  background: #11194b;
  border-bottom: 0 !important;
}
@media (min-width: 901px) {
  body:has(.hero-split) .hero-split {
    height: calc(100vh - 119px);
    height: calc(100dvh - 119px);
    min-height: 640px;
  }

  body:has(.hero-split) .hero-split .hs-grid,
  body:has(.hero-split) .hero-split .photo,
  body:has(.hero-split) .hero-split .hero-slides,
  body:has(.hero-split) .hero-split .panel {
    height: 100% !important;
    min-height: 100% !important;
  }

  body:has(.hero-split) .hero-split .hero-slides,
  body:has(.hero-split) .hero-split .hero-slide {
    position: absolute;
    inset: 0;
  }

  body:has(.hero-split) .hero-split .panel-inner {
    /* min-height zamiast height: przy dluzszych tlumaczeniach (DE) karta hero
       ROSNIE zamiast wypuszczac tekst poza swoje tlo. Gdy tresc miesci sie w
       550-600px wyglad jest identyczny jak wczesniej. */
    min-height: clamp(550px, calc(100dvh - 210px), 600px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
body:has(.hero-split) .hero-split .hs-grid {
  position: relative;
  display: block !important;
  min-height: inherit;
  max-width: none !important;
}
body:has(.hero-split) .hero-split .photo {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit;
  z-index: 0;
}
body:has(.hero-split) .hero-split .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* 2026-07-29: zaslona mocno scieniona i skrocona.
     Wczesniej biel miala .92 krycia rozlana do 64% szerokosci kadru — powstala
     dla hero ZE ZDJECIEM, gdzie tekst lezal wprost na obrazie i potrzebowal tla.
     Dzis tekst siedzi na wlasnym panelu (tlo .94 + backdrop-filter blur 18px),
     wiec zaslona niczego nie chronila, a wyplukiwala film.
     Zostaje delikatne rozjasnienie pod samym panelem i lekkie przyciemnienie po
     prawej, ktore utrzymuje czytelnosc pigulki z podpisem sceny. */
  /* 2026-07-29 (druga iteracja): rozjasnienie po lewej USUNIETE z tej warstwy.
     Zostaje wylacznie lekkie przyciemnienie prawej krawedzi, ktore utrzymuje
     kontrast podpisu sceny na jasnym proszku.
     2026-07-30: rozjasnienie dla ZDJEC wrocilo, ale NIE tutaj — siedzi teraz
     na samych slajdach ze zdjeciem (`.c8-hero-scene--foto::after`, ok. linii
     4720). Powod jest zmierzony: ta warstwa nalezy do kontenera, wiec
     przelaczala sie skokowo w chwili zmiany slajdu, a slajdy przenikaja 0,55 s.
     Skutek: przez pol sekundy biel lezala na jeszcze w pelni widocznym filmie —
     dokladnie to wypranie, ktore mielismy usunac. Proba wygaszenia tego przez
     `transition: background` nie dziala: przegladarka nie animuje gradientu
     miedzy stanami (zmierzone — krycie skakalo 0 -> 0,92 w jednej klatce).
     Warstwa na slajdzie dziedziczy jego krycie, wiec synchronizacja jest
     z definicji, bez zadnego dodatkowego licznika ani przejscia. */
  background:
    linear-gradient(90deg, transparent 0%, transparent 42%, rgba(9, 16, 48, .12) 100%),
    linear-gradient(180deg, rgba(10, 19, 58, .02), rgba(8, 15, 46, .12));
}
body:has(.hero-split) .hero-split .panel {
  position: relative !important;
  z-index: 4;
  min-height: inherit;
  width: min(1640px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(44px, 6vh, 72px) 0;
  display: flex !important;
  align-items: center;
  background: transparent !important;
  pointer-events: none;
}
body:has(.hero-split) .hero-split .panel-inner {
  width: min(852px, 59.5vw);
  margin: 0 0 0 clamp(24px, 2.5vw, 44px) !important;
  padding: clamp(31px, 2.9vw, 42px) clamp(42px, 4vw, 64px) !important;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  background:
    radial-gradient(circle at 0 0, rgba(187, 239, 250, .56), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(241, 248, 253, .82));
  box-shadow: 0 28px 70px rgba(15, 22, 72, .2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
/* Główne hero — kompaktowa etykieta osadzona w obrębie karty informacyjnej. */
body:has(.hero-split) .hero-split .panel-inner > .badge {
  width: fit-content !important;
  max-width: calc(100% - 12px);
  min-height: 36px;
  margin-top: 12px;
  align-self: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 15px 9px 12px !important;
  border: 1px solid rgba(0, 174, 217, .28) !important;
  border-left-width: 1px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(241, 250, 253, .94)) !important;
  color: #087fa4 !important;
  box-shadow: 0 9px 24px rgba(20, 39, 92, .10) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.25;
  letter-spacing: .005em !important;
  white-space: normal;
}
body:has(.hero-split) .hero-split .panel-inner > .badge .dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 174, 217, .11) !important;
}
body:has(.hero-split) .hero-split .panel h1 {
  max-width: 730px;
  font-size: clamp(42px, 3.4vw, 58px) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}
body:has(.hero-split) .hero-split .lead { max-width: 710px; margin-bottom: 20px; }
.c8-hero-specialties {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 24px;
  border-top: 1px solid rgba(21, 20, 95, .12);
  border-bottom: 1px solid rgba(21, 20, 95, .12);
}
.c8-hero-specialties a {
  position: relative;
  min-width: 0;
  padding: 13px 16px 13px 18px;
  border-right: 1px solid rgba(21, 20, 95, .12);
  color: var(--c8-navy);
  text-decoration: none;
  transition: background .18s ease;
}
.c8-hero-specialties a:last-child { border-right: 0; }
.c8-hero-specialties a::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 19px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c8-cyan);
}
.c8-hero-specialties a:hover { background: rgba(0, 174, 217, .06); }
.c8-hero-specialties b,
.c8-hero-specialties span { display: block; }
.c8-hero-specialties b { font-size: 12px; line-height: 1.25; }
.c8-hero-specialties span { margin-top: 3px; color: #687188; font-size: 10.5px; line-height: 1.25; }
body:has(.hero-split) .hero-split .hero-slide {
  opacity: 0 !important;
  clip-path: inset(0 0 0 100%);
  transform: translate3d(12%, 0, 0) scale(1.045);
  transition:
    clip-path 1.23s cubic-bezier(.68, 0, .22, 1),
    opacity .55s ease,
    transform 1.23s cubic-bezier(.22, .61, .36, 1) !important;
  will-change: clip-path, opacity, transform;
}
body:has(.hero-split) .hero-split .hero-slide.is-active {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0) scale(1.01);
}
body:has(.hero-split) .hero-split .hero-slide.is-leaving {
  z-index: 0;
  opacity: .68 !important;
  clip-path: inset(0 0 0 0);
  transform: translate3d(-9%, 0, 0) scale(1.02);
}

/* Wyrazna granica zmiany obrazu: krotki swietlny pas przesuwa sie z prawej do lewej. */
body:has(.hero-split) .hero-split .photo::after {
  background:
    linear-gradient(90deg, transparent 0, rgba(0, 174, 217, .12) 25%, rgba(255, 255, 255, .72) 50%, rgba(0, 174, 217, .16) 72%, transparent 100%) 120% 0 / clamp(90px, 10vw, 180px) 100% no-repeat,
    linear-gradient(180deg, rgba(23, 21, 109, 0) 56%, rgba(23, 21, 109, .36) 100%);
}
body:has(.hero-split) .hero-split .photo.is-transitioning::after {
  animation: c8-hero-light-sweep 1.23s cubic-bezier(.68, 0, .22, 1) both;
}
@keyframes c8-hero-light-sweep {
  0% { background-position: 118% 0, 0 0; }
  100% { background-position: -18% 0, 0 0; }
}
body:has(.hero-split) .hero-split .hero-slide:nth-child(1) {
  --c8-hero-image: url("hero-lifestyle.jpg");
}
body:has(.hero-split) .hero-split .hero-slide:nth-child(2) {
  --c8-hero-image: url("hero-lifestyle-joints.jpg");
}
body:has(.hero-split) .hero-split .hero-slide:nth-child(3) {
  --c8-hero-image: url("hero-lifestyle-sport.jpg");
}
body:has(.hero-split) .hero-split .hero-slide::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 0;
  background-image: var(--c8-hero-image);
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(.82);
  opacity: .72;
}
body:has(.hero-split) .hero-split .hero-slide img {
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto !important;
  z-index: 1;
  width: 72% !important;
  max-width: none !important;
  height: 100% !important;
  /* 2026-07-30: POWROT do `cover`. Powod, dla ktorego 29.07 dalem `contain`,
     przestal istniec: chodzilo o ujecie menzurki, ktore traci gore i dol —
     ten klip zostal usuniety z karuzeli.
     Za to `contain` mial wade, ktora widac dopiero na szerokim ekranie.
     Ramka hero jest DUZO szersza niz kadr filmu (1560x1080 = 1,444):
        1280 px  ramka 1,64  ->  film zajmuje 1128 px, puste 152 px  (12%)
        1440 px  ramka 1,84  ->  film zajmuje 1128 px, puste 312 px  (22%)
        1920 px  ramka 2,46  ->  film zajmuje 1128 px, puste 792 px  (41%)
        2560 px  ramka 3,28  ->  film zajmuje 1128 px, puste 1432 px (56%)
     Czyli im szerszy monitor, tym bardziej film kurczyl sie w srodku hero —
     wlasciciel zglosil to jako „filmiki sa uciete, nie sa na cale hero".
     Zdjecia lifestyle maja proporcje 1,5, prawie taka sama jak film, i od
     poczatku sa na `cover`. Jednolity tryb = jednolity kadr na obu typach scen. */
  object-fit: cover !important;
  object-position: center center !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  transform: none !important;
  animation: none !important;
}
body:has(.hero-split) .hero-split .caption { z-index: 5; left: auto; right: 32px; bottom: 64px; }
body:has(.hero-split) .hero-split .hero-controls { z-index: 5; right: 32px; bottom: 22px; }

/* Strona główna — zastosowania i dowody B2B. */
.c8-applications {
  position: relative;
  background:
    radial-gradient(circle at 8% 0, rgba(0, 174, 217, .12), transparent 30%),
    linear-gradient(180deg, #fff, #f4f8fc);
}
.c8-applications .uses-grid { gap: 16px; }
.c8-applications .use {
  min-height: 300px;
  cursor: default;
}
.c8-applications .use .c8-use-number {
  position: absolute;
  top: 17px;
  left: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 29px;
  border: 1px solid rgba(255, 255, 255, .48);
  background: rgba(11, 17, 61, .34);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
/* Tekst kafla zastosowan dopasowuje sie do SZEROKOSCI KAFLA, a nie do sztywnych
   190/210px. Na desktopie (6 kolumn ~210px) kafel i tak jest wezszy niz dawny
   limit, wiec nic sie nie zmienia; na tablecie (3 kolumny ~290px) tekst
   przestaje sie niepotrzebnie lamac i wychodzic poza kafel. */
.c8-applications .use h4 { max-width: 100%; font-size: 18px !important; }
.c8-applications .use p { max-width: 100%; }
.c8-use-links {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 17px;
}
.c8-use-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(8, 7, 35, .55);
}
.c8-use-links a span { color: var(--c8-cyan); font-size: 15px; transition: transform .18s ease; }
.c8-use-links a:hover span,
.c8-use-links a:focus-visible span { transform: translateX(3px); }
.c8-use-links a:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 5px; }
.c8-applications .use:not(.c8-use--dual) .c8-use-links a::after {
  content: "";
  position: absolute;
  inset: -260px -18px -20px;
}
.c8-applications .use:has(.c8-use-links a:hover),
.c8-applications .use:has(.c8-use-links a:focus-visible) {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Zastosowania mega menu — ten sam podział co na stronie głównej. */
.mega-app.c8-app-menu { padding: 24px 28px 28px; }
.c8-app-menu__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.c8-app-menu-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 238px;
  display: flex;
  align-items: flex-end;
  padding: 18px 15px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 13px;
  background: var(--c8-navy);
  box-shadow: 0 10px 26px rgba(16, 22, 62, .1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.c8-app-menu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--am);
  background-position: center;
  background-size: cover;
  transition: transform .5s ease;
}
.c8-app-menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Ten sam mocny ciemny scrim co kafle hero na stronie glownej (index #zastosowania .use::after)
     — lekko podbity od gory + mocno przyciemniony od dolu, gdzie siedzi tytul/opis/CTA. */
  background:
    linear-gradient(180deg,
      rgba(23, 21, 109, .06) 0%,
      rgba(23, 21, 109, .18) 30%,
      rgba(12, 11, 54, .66) 64%,
      rgba(8, 7, 35, .94) 100%),
    linear-gradient(180deg, rgba(8, 7, 35, .30) 0%, rgba(8, 7, 35, 0) 22%);
}
.c8-app-menu-card:hover,
.c8-app-menu-card:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(16, 22, 62, .18); }
.c8-app-menu-card:hover::before,
.c8-app-menu-card:focus-visible::before { transform: scale(1.055); }
.c8-app-menu-card:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 3px; }
.c8-app-menu-card__copy { min-width: 0; color: #fff; }
.c8-app-menu-card__copy > b { display: block; color: #fff; font-size: 16px; line-height: 1.15; text-shadow: 0 1px 9px rgba(0, 0, 0, .48); }
.c8-app-menu-card__copy > small { display: block; min-height: 48px; margin-top: 8px; color: rgba(255, 255, 255, .79); font-size: 11.5px; line-height: 1.4; }
.c8-app-menu-card__cta,
.c8-app-menu-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.c8-app-menu-card__links a { color: #fff; border-bottom: 1px solid rgba(0, 174, 217, .72); padding-bottom: 2px; }
.c8-app-menu-card__links a:hover,
.c8-app-menu-card__links a:focus-visible { color: #68daf3; }

/* O firmie: zwarte centrum informacji i dowodów B2B. */
.mega.mega-about.c8-about-menu {
  width: min(1120px, calc(100vw - 32px));
  max-height: none !important;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  padding: 0;
  overflow: hidden !important;
  border: 1px solid rgba(17, 24, 79, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 78px rgba(15, 21, 67, .22);
}
.c8-about-menu__intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 26px 26px;
  color: #fff;
  background:
    radial-gradient(circle at 14% 6%, rgba(56, 212, 241, .34), transparent 34%),
    linear-gradient(145deg, #10165b 0%, #19136f 62%, #222d8c 100%);
}
.c8-about-menu__intro::before {
  content: "";
  position: absolute;
  right: -76px;
  bottom: -86px;
  z-index: -1;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(105, 223, 246, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(105, 223, 246, .055), 0 0 0 68px rgba(105, 223, 246, .035);
}
.c8-about-menu__intro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  width: 58px;
  height: 4px;
  background: var(--c8-cyan);
}
.c8-about-menu__eyebrow {
  display: block;
  margin-bottom: 18px;
  color: #6fe0f7;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.c8-about-menu__intro > strong {
  display: block;
  max-width: 210px;
  color: #fff;
  font-size: 24px;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.c8-about-menu__intro > p {
  margin: 16px 0 22px;
  color: rgba(255, 255, 255, .73);
  font-size: 12.5px;
  line-height: 1.55;
}
.c8-about-menu__overview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
nav.main .c8-about-menu__overview,
nav.main .c8-about-menu__overview:hover,
nav.main .c8-about-menu__overview:focus-visible {
  color: #fff !important;
  white-space: normal !important;
}
.c8-about-menu__overview span { color: #6fe0f7; font-size: 16px; transition: transform .18s ease; }
.c8-about-menu__overview:hover span,
.c8-about-menu__overview:focus-visible span { transform: translateX(4px); }
.c8-about-menu__overview:focus-visible { outline: 2px solid #6fe0f7; outline-offset: 5px; }
.c8-about-menu__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: stretch;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(145deg, #eef4f8 0%, #f7f9fc 100%);
}
.c8-about-menu__card {
  position: relative;
  min-width: 0;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 48px 20px;
  overflow: hidden;
  white-space: normal !important;
  text-align: center;
  border: 1px solid rgba(17, 24, 79, .1);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(0, 174, 217, .075), transparent 52%),
    #fff;
  box-shadow: 0 7px 18px rgba(20, 31, 81, .045);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.c8-about-menu__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 58px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--c8-cyan);
  transform: translateX(-50%) scaleX(.38);
  opacity: .48;
  transition: width .2s ease, transform .2s ease, opacity .2s ease;
}
.c8-about-menu__card:hover,
.c8-about-menu__card:focus-visible {
  z-index: 1;
  border-color: rgba(0, 174, 217, .42);
  background:
    radial-gradient(circle at 50% 0, rgba(0, 174, 217, .13), transparent 54%),
    #fff;
  box-shadow: 0 16px 30px rgba(18, 35, 86, .13), 0 0 0 1px rgba(0, 174, 217, .08);
  transform: translateY(-3px);
}
.c8-about-menu__card:hover::before,
.c8-about-menu__card:focus-visible::before { width: 92px; opacity: 1; transform: translateX(-50%) scaleX(1); }
.c8-about-menu__card:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: -3px; }
/* fix18a / uwaga 3.2 + S7: piktogramy w megamenu "O firmie" usuniete.
   Byl tu komplet regul .c8-about-menu__icon (kwadrat 42px z gradientem,
   obramowaniem i cieniem) + stan hover + .c8-about-menu__icon svg.
   Markup <span class="c8-about-menu__icon"> zniknal z kart w fix12,
   wiec reguly nie mialy juz czego dopasowac. Karta to flex-column
   (align-items:center), nie grid — po ikonie nie zostaje zadna kolumna. */
.c8-about-menu__copy {
  min-width: 0;
  max-width: 310px;
  /* bez overflow:hidden — to jest blok TEKSTOWY (nie kadrowane zdjecie),
     wiec ucinanie liter przy dluzszym tlumaczeniu bylo bledem. */
  white-space: normal !important;
}
.c8-about-menu__copy b {
  display: block;
  color: var(--c8-navy);
  font-size: 15.5px;
  font-weight: 850;
  line-height: 1.2;
  white-space: normal !important;
  overflow-wrap: break-word;
}
.c8-about-menu__copy small {
  display: block;
  margin-top: 6px;
  color: #697288;
  font-size: 11px;
  line-height: 1.4;
  white-space: normal !important;
  overflow-wrap: break-word;
}
.c8-about-menu__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 11px;
  pointer-events: none;
  color: #9aa4b7;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .1em;
  white-space: nowrap;
}
.c8-about-menu__step i {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c8-navy);
  border: 1px solid rgba(17, 24, 79, .1);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.c8-about-menu__card:hover .c8-about-menu__step i,
.c8-about-menu__card:focus-visible .c8-about-menu__step i {
  color: #fff;
  border-color: var(--c8-cyan);
  background: var(--c8-cyan);
  transform: translateX(2px);
}
.c8-about-menu__proof {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px 22px;
  min-height: 48px;
  padding: 11px 18px;
  border-top: 1px solid rgba(17, 24, 79, .08);
  background: #f6f8fb;
}
.c8-about-menu__proof > span {
  position: relative;
  padding-left: 12px;
  color: #4f596f;
  font-size: 10.5px;
  font-weight: 800;
}
.c8-about-menu__proof > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c8-cyan);
  transform: translateY(-50%);
}
/* fix18a / uwaga S7: link "Dokumenty →" w prawym dolnym rogu megamenu
   "O firmie" usuniety (pozycja jest w menu glownym). Byly tu reguly
   .c8-about-menu__proof > a (+ span, hover, focus-visible) — po fix12
   w .c8-about-menu__proof zostaly wylacznie dwa <span> z dowodami,
   zero <a>, wiec reguly nie mialy czego dopasowac. */

/* Rodziny produktowe: mocniejszy stan wyboru po najechaniu i z klawiatury. */
#rodziny .fam {
  will-change: transform, box-shadow;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
#rodziny .fam:hover,
#rodziny .fam:focus-visible {
  z-index: 3;
  border-color: var(--fc);
  outline: 0;
  transform: translateY(-9px);
  box-shadow:
    0 30px 68px rgba(15, 20, 66, .23),
    0 10px 24px rgba(15, 20, 66, .1),
    0 0 0 2px color-mix(in srgb, var(--fc) 22%, transparent);
}
#rodziny .fam:focus-visible {
  box-shadow:
    0 30px 68px rgba(15, 20, 66, .23),
    0 10px 24px rgba(15, 20, 66, .1),
    0 0 0 3px color-mix(in srgb, var(--fc) 42%, #fff);
}
#rodziny .fam:focus-visible .fam-edge rect { stroke-dashoffset: 0; }
#rodziny .fam:focus-visible .pic img { transform: scale(1.07); }
#rodziny .fam:focus-visible .go svg { transform: translateX(4px); }

/* Ukośne kafle TuriKer: cień zaznaczonego segmentu wychodzi poza wspólną maskę. */
#rodziny .ksplit {
  isolation: isolate;
  transition: filter .24s ease;
}
#rodziny .ksplit::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: rgba(17, 21, 76, .56);
  filter: blur(22px);
  transform: translateY(20px) scale(.97);
  transition: opacity .24s ease, transform .24s ease;
}
#rodziny .ksplit:has(.kp1:hover)::after,
#rodziny .ksplit:has(.kp1:focus-visible)::after {
  clip-path: polygon(0 0, 35% 0, 29% 100%, 0 100%);
  opacity: .46;
  transform: translateY(18px) scale(.985);
}
#rodziny .ksplit:has(.kp2:hover)::after,
#rodziny .ksplit:has(.kp2:focus-visible)::after {
  clip-path: polygon(37% 0, 68% 0, 62% 100%, 31% 100%);
  opacity: .46;
  transform: translateY(18px) scale(.985);
}
#rodziny .ksplit:has(.kp3:hover)::after,
#rodziny .ksplit:has(.kp3:focus-visible)::after {
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 64% 100%);
  opacity: .46;
  transform: translateY(18px) scale(.985);
}
#rodziny .ksplit .kp:hover,
#rodziny .ksplit .kp:focus-visible {
  z-index: 3;
  outline: 0;
  filter:
    drop-shadow(0 18px 30px rgba(15, 20, 66, .34))
    drop-shadow(0 6px 13px rgba(15, 20, 66, .2))
    brightness(1.045);
}
#rodziny .ksplit .kp:focus-visible .kp-edge line { stroke-dashoffset: 0; }
#rodziny .ksplit .kp:focus-visible .kp-go svg { transform: translateX(6px); }
#rodziny .ksplit .kp:focus-visible .kp-pic::before { transform: scale(1.07); }

/* Cien TuriKer jest rysowany na osobnej kopii ksztaltu.
   Dzieki temu maska trapezu nie ucina efektu jak przy filtrze na samym kaflu. */
#rodziny .ksplit::after {
  display: block !important;
  inset: 0;
  z-index: 0;
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  background: #fff;
  filter:
    drop-shadow(0 30px 68px rgba(15, 20, 66, .23))
    drop-shadow(0 10px 24px rgba(15, 20, 66, .1));
  transform: translateY(0);
  transition: opacity 0s linear, transform .24s ease;
}
#rodziny .ksplit:has(.kp1:hover)::after,
#rodziny .ksplit:has(.kp1:focus-visible)::after {
  clip-path: polygon(0 0, 35% 0, 29% 100%, 0 100%);
  opacity: 1;
  transform: translateY(-9px);
  transition: opacity .12s ease, transform .24s ease;
}
#rodziny .ksplit:has(.kp2:hover)::after,
#rodziny .ksplit:has(.kp2:focus-visible)::after {
  clip-path: polygon(37% 0, 68% 0, 62% 100%, 31% 100%);
  opacity: 1;
  transform: translateY(-9px);
  transition: opacity .12s ease, transform .24s ease;
}
#rodziny .ksplit:has(.kp3:hover)::after,
#rodziny .ksplit:has(.kp3:focus-visible)::after {
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 64% 100%);
  opacity: 1;
  transform: translateY(-9px);
  transition: opacity .12s ease, transform .24s ease;
}
/* ============================================================
   Obwodka hover scietych kafli TuriKer (fix7) — RUWNA na WSZYSTKICH krawedziach.

   Co bylo zle:
   1) border/outline/box-shadow na .kp sa bezuzyteczne — clip-path (trapez) tnie
      je razem z elementem; to samo dotyczy filter:drop-shadow zalozonego na TYM
      SAMYM elemencie (maska jest aplikowana po filtrze), wiec obwodki nie da sie
      narysowac srodkami "pudelkowymi" na samym kaflu.
   2) Proba z commita 67a4c60 (wypelniony ksztalt-podklad na .ksplit::before z
      polygonem powiekszonym o 2.5px) NIE MOGLA zadzialac: pseudo mialo inset:0,
      wiec jego pudlo malowania bylo dokladnie pudlem .ksplit. Punkty polygonu
      lezace POZA pudlem — calc(0% - 2.5px), calc(100% + 2.5px) — nie maluja
      niczego, bo clip-path wylacznie PRZYCINA, nie powieksza obszaru malowania.
      Rant pojawial sie wiec tylko tam, gdzie krawedz lezala WEWNATRZ pudla, czyli
      na ukosnych paskach — dokladnie to zglosil user ("boczne paski maja dodatkowa
      kreske a reszta tak samo"). Podklad zostal usuniety w calosci.

   Jak jest teraz:
   Obwodke rysuje juz istniejacy <svg class="kp-edge"> wewnatrz kazdego .kp
   (4 odcinki e1..e4 po obwodzie trapezu, z animacja stroke-dashoffset). Stroke
   jest wysrodkowany na krawedzi, wiec maska trapezu obcina jego zewnetrzna
   polowe — widoczna grubosc = stroke-width / 2, identycznie na gorze, dole i na
   obu skosach. Bazowe stroke-width:3 dawalo raptem 1.5px (na zdjeciu i na bieli
   praktycznie niewidoczne), stad wrazenie "obrys tylko na bokach" — dlugie ukosy
   czytaly sie mocno, krotkie gora/dol ginely.
   stroke-width:5 => 2.5px pelnego koloru na kazdej krawedzi, czyli tyle samo, co
   na prostokatnych .fam (2px stroke .fam-edge + 1px podbarwionego bordera).
   Kafel na hover ma z-index 3 (kp-edge z-index 4), wiec obwodka jest widoczna
   takze na wspolnej, ukosnej krawedzi z sasiadem (z-index 1). */
#rodziny .ksplit .kp-edge line { stroke-width: 5; }
#rodziny .ksplit .kp {
  z-index: 1;
  will-change: transform, filter;
  transition: transform .24s ease, filter .24s ease;
}
/* PROG UKOSNEGO UKLADU: 1181px (bylo 821px).
   Skos .ksplit to trzy trapezy o STALYCH procentach (kp-in ma 23-24% szerokosci
   sekcji) w kontenerze o STALEJ wysokosci. Ponizej ~1180px kolumna tekstu robila
   sie wezsza niz 260px, wiec opis wychodzil poza pasek zdjecia i poza sam kafel
   — dokladnie to, co user widzial na tablecie (a w DE juz przy 1101px).
   Od 1181px w gore uklad jest ten sam co dotad. */
@media (min-width: 1181px) {
  /* Bylo clamp(408px, 46vh, 432px) w index.html: przy oknie nizszym niz 940px
     (czyli praktycznie na kazdym laptopie) sekcja kurczyla sie do 408-414px,
     a wtedy .kp-head (flex-item o height:224px) SIE SCISKAL do ~200px i tekst
     wchodzil na zdjecie — bialy prog tla jest na sztywno na 224px.
     Stala 432px = dokladnie ta sama wysokosc, co dotad na wysokich ekranach. */
  #rodziny .ksplit { height: 432px; }
  #rodziny .ksplit-clip {
    overflow: visible;
    clip-path: none;
  }
  #rodziny .ksplit .kp:hover,
  #rodziny .ksplit .kp:focus-visible {
    z-index: 3;
    outline: 0;
    transform: translateY(-9px);
    filter: brightness(1.045);
  }
}
@media (max-width: 1180px) {
  #rodziny .ksplit::after,
  #rodziny .ksplit::before { display: none !important; }
  #rodziny .ksplit .kp:hover,
  #rodziny .ksplit .kp:focus-visible {
    z-index: 3;
    outline: 0;
    transform: translateY(-9px);
    box-shadow:
      0 30px 68px rgba(15, 20, 66, .23),
      0 10px 24px rgba(15, 20, 66, .1),
      0 0 0 2px color-mix(in srgb, var(--ka) 22%, transparent);
  }
}

/* PLYNNA SIATKA RODZIN — bez luk w breakpointach.
   Liczba kolumn wynika z dostepnej szerokosci (auto-fit), nie z listy
   zakresow @media, wiec KAZDA szerokosc jest obsluzona:
     wrap = min(1400px, 100vw) - 56px, gap 24px
     >=1096px -> 3 kolumny (desktop 1440/1920 bez zmian)
      721-1095 -> 2 kolumny
      <=720    -> 1 kolumna
   min() chroni przed przepelnieniem, gdy kontener jest wezszy niz 330px. */
#rodziny .fam-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
@media (max-width: 720px) {
  #rodziny .fam-grid { grid-template-columns: 1fr; }
}

/* Rodziny mają ten sam rytm w PL, EN i DE. Dłuższy język nie może
   samodzielnie zmieniać wysokości całego pierwszego rzędu.
   min-height (NIE height): gdy tlumaczenie nie miesci sie w 456/498px,
   kafel ROSNIE zamiast wypuszczac tekst poza swoja ramke. Siatka i tak
   wyrownuje wysokosci w rzedzie (align-items:stretch). */
@media (min-width: 981px) {
  #rodziny .fam-grid > .fam {
    min-height: 456px;
  }
  #rodziny .fam-grid > .fam .pic { flex: 0 0 258px; }
  #rodziny .fam-grid > .fam .body { min-height: 0; }
}

@media (min-width: 721px) and (max-width: 980px) {
  #rodziny .fam-grid > .fam {
    min-height: 498px;
  }
  #rodziny .fam-grid > .fam .pic { flex: 0 0 258px; }
  #rodziny .fam-grid > .fam .body { min-height: 0; }
}

/* Mobilne i tabletowe TuriKer są pełnymi kartami, a nie luźnym zdjęciem
   i tekstem. Kontur jest widoczny również bez hovera, co jest kluczowe
   na dotyku. Zakres podniesiony z 820px do 1180px — patrz komentarz przy
   @media (min-width: 1181px) powyzej.
   Liczba kolumn jest PLYNNA (auto-fit): 3 karty obok siebie od ~900px,
   2 przy 821-899px, 1 na mobile. */
@media (max-width: 1180px) {
  #rodziny .ksplit {
    height: auto;
    filter: none;
  }
  #rodziny .ksplit-clip {
    position: static;
    display: grid;
    gap: 22px;
    overflow: visible;
    clip-path: none;
  }
  #rodziny .ksplit .kp-name { font-size: clamp(22px, 2.5vw, 30px); }
  #rodziny .ksplit .kp,
  #rodziny .ksplit .kp + .kp {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    clip-path: none !important;
    border: 1px solid color-mix(in srgb, var(--ka) 68%, #dce2ed);
    border-radius: 14px;
    background: #fff !important;
    box-shadow:
      0 16px 34px rgba(17, 21, 76, .11),
      0 3px 10px rgba(17, 21, 76, .06);
    filter: none;
    transform: none;
  }
  #rodziny .ksplit .kp-in {
    position: static;
    width: 100% !important;
    padding: 0 !important;
  }
  #rodziny .ksplit .kp-head {
    /* min-height bez height: dluzsza nazwa (DE) rozpycha pasek zdjecia
       zamiast wychodzic poza niego. */
    min-height: 176px;
    padding: 20px 22px;
    border-radius: 0;
    background: var(--kp-overlay), var(--kp-img) center / cover no-repeat;
  }
  /* These URLs are resolved from assets/concept8.css. Using the page-level
     custom property here would otherwise produce assets/assets/... on mobile. */
  #rodziny .ksplit .kp1 .kp-head {
    background-image: var(--kp-overlay), url("card-turiker.jpg");
  }
  #rodziny .ksplit .kp2 .kp-head {
    background-image: var(--kp-overlay), url("card-agroker.jpg");
  }
  #rodziny .ksplit .kp3 .kp-head {
    background-image: var(--kp-overlay), url("card-bioker-v3.webp");
  }
  #rodziny .ksplit .kp-body {
    min-height: 190px;
    padding: 20px 22px 24px;
    background: #fff;
  }
  #rodziny .ksplit .kp-desc { min-height: 0; }
  #rodziny .ksplit .kp-edge { display: none; }
  /* .kp-pic to DESKTOPOWA warstwa zdjecia (absolutna, kadr 36-38% szerokosci
     CALEJ sekcji, wysokosc 224px), wlaczana w index.html przez
     @media(min-width:821px). W ukladzie plaskim zdjecie jest tlem .kp-head,
     wiec ta warstwa musi zniknac — inaczej naklada sie na tytul kafla
     i przecina zdjecie w polowie. */
  #rodziny .ksplit .kp-pic { display: none !important; }
  #rodziny .ksplit .kp:hover,
  #rodziny .ksplit .kp:focus-visible {
    transform: none;
    filter: none;
    border-color: var(--ka);
    box-shadow:
      0 20px 42px rgba(17, 21, 76, .16),
      0 0 0 2px color-mix(in srgb, var(--ka) 16%, transparent);
  }
  #rodziny .ksplit .kp:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ka) 45%, #fff);
    outline-offset: 3px;
  }
}

/* Plaskie karty TuriKer na tablecie ustawiaja sie obok siebie tak samo
   plynnie jak siatka rodzin — bez dodatkowych progow posrednich. */
@media (min-width: 821px) and (max-width: 1180px) {
  #rodziny .ksplit-clip {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    align-items: stretch;
  }
  #rodziny .ksplit .kp,
  #rodziny .ksplit .kp + .kp { display: flex; flex-direction: column; }
  #rodziny .ksplit .kp-in { display: flex; flex-direction: column; flex: 1; }
  #rodziny .ksplit .kp-body { flex: 1; }
}

@media (min-width: 1041px) and (max-width: 1180px) {
  .mega.mega-about.c8-about-menu { grid-template-columns: 260px minmax(0, 1fr); }
  .c8-about-menu__intro { padding: 26px 22px 24px; }
  .c8-about-menu__intro > strong { font-size: 22px; }
  .c8-about-menu__card { padding: 16px 42px 18px; gap: 7px; }
}

@media (min-width: 981px) and (max-width: 1040px) {
  .mega.mega-about.c8-about-menu {
    width: min(960px, calc(100vw - 24px));
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .c8-about-menu__intro { padding: 24px 20px; }
  .c8-about-menu__intro > strong { font-size: 21px; }
  .c8-about-menu__card {
    min-height: 148px;
    padding: 14px 38px 17px;
    gap: 7px;
  }
  /* fix18a: .c8-about-menu__icon usuniete razem z piktogramami (patrz ~:860) */
  .c8-about-menu__copy b { font-size: 14px; }
  .c8-about-menu__copy small { font-size: 10.5px; }
}

/* Linie produktowe — każda karta zachowuje ten sam wymiar.
   Niepełne rzędy są centrowane zamiast rozciągania ostatnich elementów. */
.category-page .category-products .pgrid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px !important;
  width: 100%;
  max-width: 1060px !important;
  margin-left: auto;
  margin-right: auto;
}
.category-page .category-products .pcard,
.category-page--turiker .category-products .pcard,
.category-page--turiker .category-products .pcard:nth-last-child(-n + 2) {
  flex: 0 1 340px;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  grid-column: auto;
}

@media (max-width: 760px) {
  .category-page .category-products .pgrid { max-width: 700px !important; gap: 16px !important; }
  .category-page .category-products .pcard,
  .category-page--turiker .category-products .pcard,
  .category-page--turiker .category-products .pcard:nth-last-child(-n + 2) {
    flex-basis: min(100%, 420px);
    max-width: 420px;
  }
}
.c8-evidence {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 7vw, 108px) 0;
  color: var(--c8-navy);
  border-top: 1px solid rgba(17, 24, 79, .08);
  border-bottom: 1px solid rgba(17, 24, 79, .08);
  background:
    radial-gradient(circle at 8% 0, rgba(0, 174, 217, .12), transparent 28%),
    radial-gradient(circle at 94% 100%, rgba(31, 48, 151, .08), transparent 30%),
    linear-gradient(135deg, #eef9fc 0%, #ffffff 52%, #f4f6fb 100%);
}
.c8-evidence::after {
  content: "TurEssence®";
  position: absolute;
  right: -18px;
  bottom: -32px;
  color: var(--c8-navy);
  font-size: clamp(82px, 10vw, 160px);
  font-weight: 850;
  letter-spacing: -.07em;
  line-height: 1;
  opacity: .025;
  pointer-events: none;
  white-space: nowrap;
}
.c8-evidence .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(46px, 7vw, 96px);
  align-items: center;
}
.c8-evidence__head { max-width: 480px; }
.c8-evidence__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #087f9f;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.c8-evidence__eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--c8-cyan);
}
.c8-evidence h2 { color: var(--c8-navy); margin: 0; font-size: clamp(38px, 4vw, 58px); line-height: 1.02; }
.c8-evidence .c8-evidence__head p { margin: 22px 0 0; color: #606a82; font-size: 16px; line-height: 1.72; }
.c8-evidence__link { display: inline-block; margin-top: 26px; color: var(--c8-navy); font-weight: 850; border-bottom: 2px solid var(--c8-cyan); padding-bottom: 5px; }
.c8-evidence__content { min-width: 0; }
.c8-evidence__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 34px;
}
.c8-evidence__item {
  position: relative;
  min-height: 88px;
  padding: 0 0 0 22px;
  border-left: 3px solid rgba(0, 174, 217, .42);
}
.c8-evidence__item b { display: block; color: var(--c8-navy); font-size: 17px; margin-bottom: 7px; }
.c8-evidence__item span { color: #687188; font-size: 14px; line-height: 1.55; }
.c8-cert-panel {
  margin-top: 34px;
  padding: 18px 22px 16px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(21, 20, 95, .1);
  box-shadow: 0 20px 50px rgba(22, 31, 84, .09);
}
.c8-cert-panel__label { display: block; margin-bottom: 12px; color: #7a8298; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.c8-cert-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.c8-cert-row a {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 14px;
  border-right: 1px solid rgba(21, 20, 95, .1);
  color: var(--c8-navy);
  font-size: 11px;
  font-weight: 800;
  transition: background .18s ease;
}
.c8-cert-row a:last-child { border-right: 0; }
.c8-cert-row a:hover { background: rgba(0, 174, 217, .055); }
.c8-cert-row img { width: auto; max-height: 42px; max-width: 82px; object-fit: contain; }

/* Sticky nawigacja: widoczna, ale nie konkuruje z głównym menu. */
.category-jump,
.application-jump {
  position: sticky !important;
  top: var(--sticky-nav-offset, 0) !important;
  z-index: 48 !important;
  min-height: 62px;
  background: rgba(255, 255, 255, .98) !important;
  border-top: 3px solid var(--category-accent, var(--app-accent, var(--c8-cyan))) !important;
  border-bottom: 1px solid #d6deed !important;
  box-shadow: 0 10px 28px rgba(17, 25, 75, .13) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.category-jump strong,
.application-jump strong {
  color: var(--category-deep, var(--app-deep, var(--c8-navy))) !important;
  font-size: 14px !important;
}
.category-jump a,
.application-jump a {
  color: #303956 !important;
  font-weight: 750 !important;
  padding: 8px 11px !important;
  border-radius: 9px;
}
.category-jump a:hover,
.category-jump a:focus-visible,
.application-jump a:hover,
.application-jump a:focus-visible,
.category-jump a.is-current,
.application-jump a.is-current {
  color: var(--category-deep, var(--app-deep, var(--c8-navy))) !important;
  background: color-mix(in srgb, var(--category-accent, var(--app-accent, var(--c8-cyan))) 12%, #fff);
}

/* Kolory rodzin obejmują całą stronę, w tym korzyści i końcowe CTA.
   ---------------------------------------------------------------------------
   `--fam-accent` DUBLUJE tu `--category-accent` i to jest celowe. Serwis ma dwa
   rodzaje stron rodziny: strony PRODUKTU (`body.pdp--turiker`) ustawiają
   `--fam-accent`, a strony LINII (`body.category-page--turiker`) ustawiały
   wyłącznie `--category-accent`. Wartości są identyczne, ale nazwy różne, więc
   każdy element odwołujący się do koloru rodziny działał na jednych stronach,
   a na drugich cicho spadał na kolor domyślny — tak właśnie zachował się nowy
   kursor: zmieniał barwę na /turiker-ns, ale już nie na /keratyny.

   Alternatywą było dopisanie w każdym takim miejscu łańcucha
   `var(--fam-accent, var(--category-accent, ...))`, ale to przenosi wiedzę
   o dwóch nazwach do każdego komponentu z osobna. Lepiej jedno źródło prawdy
   tutaj, przy definicji rodziny. */
.category-page--turicoll {
  --fam-accent: #2b3a9e;
  --category-deep: #202c87;
  --category-navy: #11195d;
  --category-accent: #2b3a9e;
  --category-accent-dark: #1f2c84;
  --category-mist: #eef1ff;
  --category-glow: rgba(43, 58, 158, .18);
}
.category-page--turiker {
  --fam-accent: #8e2f6d;
  --category-deep: #6d2054;
  --category-navy: #3b1232;
  --category-accent: #8e2f6d;
  --category-accent-dark: #6d2054;
  --category-mist: #fbf0f7;
  --category-glow: rgba(142, 47, 109, .2);
}
.category-page--turipro {
  --fam-accent: #0f855f;
  --category-deep: #0b694c;
  --category-navy: #073d31;
  --category-accent: #0f855f;
  --category-accent-dark: #0b694c;
  --category-mist: #edf8f3;
  --category-glow: rgba(15, 133, 95, .2);
}
.category-page--turigel {
  --fam-accent: #d9821c;
  --category-deep: #9b530a;
  --category-navy: #663807;
  --category-accent: #d9821c;
  --category-accent-dark: #a95d0c;
  --category-mist: #fff4e5;
  --category-glow: rgba(217, 130, 28, .22);
}
.category-page--turiker .lsplit .ls-panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .88), transparent 32%),
    radial-gradient(circle at 15% 88%, rgba(142, 47, 109, .18), transparent 38%),
    linear-gradient(135deg, #fffafd 0%, #f8e7f2 38%, #efd5e7 70%, #e7c3db 100%) !important;
}
.category-page--turiker .lsplit .ls-panel::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .42), transparent 43%),
    radial-gradient(circle at 60% 48%, rgba(111, 36, 85, .13), transparent 58%) !important;
}
.category-page--turiker .lsplit .ls-chip { display: none !important; }

/* Nazwy rodzin produktowych w tle sekcji: +20% widocznosci. */
.category-story::after { opacity: .042; }
.category-page .category-benefits {
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--category-accent) 38%, transparent), transparent 30%),
    linear-gradient(135deg, var(--category-navy), var(--category-deep)) !important;
}
.category-page .category-benefits .ben-ic {
  background: color-mix(in srgb, var(--category-accent) 64%, transparent) !important;
  border-color: color-mix(in srgb, var(--category-accent) 82%, #fff) !important;
}
.category-page .category-contact {
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--category-accent) 42%, transparent), transparent 27%),
    linear-gradient(120deg, var(--category-navy), var(--category-deep)) !important;
}
.category-page .category-story::before {
  border-color: color-mix(in srgb, var(--category-accent) 34%, transparent) !important;
  box-shadow:
    0 0 0 46px color-mix(in srgb, var(--category-accent) 7%, transparent),
    0 0 0 92px color-mix(in srgb, var(--category-accent) 4%, transparent) !important;
}

/*
 * Strony zastosowań nie są dodatkowymi markami. Wszystkie korzystają ze
 * wspólnej, neutralnej bazy Atlantis, a kontekst zastosowania zaznaczamy
 * tylko jednym kontrolowanym akcentem.
 */
.application-page {
  --app-accent: #00a9cf;
  --app-deep: #17156d;
  --app-mist: #eef9fc;
  --app-glow: rgba(0, 169, 207, .14);
  --application-accent: var(--app-accent);
  --application-deep: var(--app-deep);
  --application-mist: #f4f7fb;
  --application-glow: rgba(23, 21, 109, .07);
  background: #fff;
}
.application-page--joints {
  --app-accent: #00a9cf;
  --app-mist: #eaf9fc;
  --app-glow: rgba(0, 169, 207, .14);
}
.application-page--sport {
  --app-accent: #2c6fc9;
  --app-mist: #eef5fd;
  --app-glow: rgba(44, 111, 201, .14);
}
.application-page--beauty {
  --app-accent: #9a3d79;
  --app-mist: #fbf0f7;
  --app-glow: rgba(154, 61, 121, .13);
}
.application-page--pet {
  --app-accent: #2f8d73;
  --app-mist: #eef8f4;
  --app-glow: rgba(47, 141, 115, .13);
}
.application-page--food {
  --app-accent: #c88716;
  --app-mist: #fff6e8;
  --app-glow: rgba(200, 135, 22, .14);
}
.application-page .apphero2__card {
  top: auto !important;
  bottom: clamp(34px, 7vh, 76px) !important;
  border-top-color: var(--app-accent) !important;
  box-shadow: 0 26px 64px rgba(12, 21, 67, .18) !important;
}
.application-page .apphero2-card {
  border-top-color: var(--app-accent) !important;
  box-shadow: 0 26px 64px rgba(12, 21, 67, .18) !important;
}
.application-page .apphero2__card::before,
.application-page .apphero2-card::before {
  background: var(--app-accent) !important;
}
.application-page .apphero2__scrim,
.application-page .apphero2-scrim {
  background:
    radial-gradient(95% 80% at 10% 34%, var(--app-glow), transparent 53%),
    linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .58) 31%, rgba(255, 255, 255, .1) 57%, transparent 73%),
    linear-gradient(180deg, transparent 66%, rgba(17, 25, 93, .1) 100%) !important;
}
.application-page .apphero2__accent,
.application-page .apphero2-em,
.application-page .apphero2-accent {
  color: var(--app-accent) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--app-accent) !important;
}
.application-page .apphero2__eyebrow,
.application-page .apphero2-eyebrow {
  color: var(--app-accent) !important;
  background: color-mix(in srgb, var(--app-accent) 10%, #fff) !important;
}
.application-page .apphero2__dot,
.application-page .apphero2-dot {
  background: var(--app-accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent) 15%, transparent) !important;
}
.application-page .apphero2 .btn-outline {
  color: var(--c8-navy) !important;
  background: #fff !important;
  border-color: #cbd4e5 !important;
}
.application-page .apphero2 .btn-outline:hover,
.application-page .apphero2 .btn-outline:focus-visible {
  color: var(--c8-navy) !important;
  background: #f2f8fc !important;
  border-color: var(--c8-cyan) !important;
}
.application-page .application-products {
  background:
    radial-gradient(circle at 8% 0, rgba(0, 174, 217, .075), transparent 27%),
    radial-gradient(circle at 94% 8%, rgba(23, 21, 109, .055), transparent 25%),
    linear-gradient(180deg, #fff, #f5f7fb) !important;
}
.application-page .application-products__kicker { color: var(--app-accent) !important; }
.application-page .application-products__head h2 { color: var(--c8-navy) !important; }

/* Karty zachowują prawdziwy kolor rodziny produktowej. */
.application-page .application-products .apc {
  --product-accent: #00aed9;
  --product-accent-2: #2b3a9e;
  --product-deep: #17156d;
  --product-mist: #edf9fc;
  border-color: color-mix(in srgb, var(--product-deep) 14%, transparent) !important;
}
.application-page .application-products .apc:has(h3 a[href*="turicoll"]) {
  --product-accent: #2b3a9e;
  --product-accent-2: #00aed9;
  --product-deep: #202c87;
  --product-mist: #eef1ff;
}
.application-page .application-products .apc:has(h3 a[href*="turiker"]) {
  --product-accent: #8e2f6d;
  --product-accent-2: #c0568a;
  --product-deep: #6d2054;
  --product-mist: #fbf0f7;
}
.application-page .application-products .apc:has(h3 a[href*="turipro"]) {
  --product-accent: #0f855f;
  --product-accent-2: #51ad8c;
  --product-deep: #0b694c;
  --product-mist: #edf8f3;
}
.application-page .application-products .apc:has(h3 a[href*="turigel"]) {
  --product-accent: #d9821c;
  --product-accent-2: #efad4f;
  --product-deep: #9b530a;
  --product-mist: #fff4e5;
}
.application-page .application-products .apc::after {
  background: linear-gradient(90deg, var(--product-accent), var(--product-accent-2)) !important;
}
.application-page .application-products .apc::before {
  color: var(--product-deep) !important;
  background: var(--product-mist) !important;
}
.application-page .application-products .apc:hover {
  border-color: color-mix(in srgb, var(--product-accent) 48%, transparent) !important;
}
.application-page .application-products .apc .ln,
.application-page .application-products .apc h3 a {
  color: var(--product-deep) !important;
}
.application-page .application-products .apc h3 a:hover { color: var(--product-accent) !important; }
.application-page .application-products .apc .pm {
  color: var(--product-deep) !important;
  background: var(--product-mist) !important;
}
.application-page .application-products .apc .a a.add {
  color: var(--product-deep) !important;
}
.application-page .application-products .apc .a a.add:hover,
.application-page .application-products .apc .a a.add:focus-visible {
  color: var(--product-deep) !important;
  background: var(--product-mist) !important;
  border-color: var(--product-accent) !important;
}

/* Wspólny gradient recepturowy Atlantis na końcu każdego zastosowania. */
.application-page .application-contact {
  background:
    radial-gradient(circle at 86% 8%, rgba(0, 174, 217, .34), transparent 27%),
    radial-gradient(circle at 66% 116%, rgba(255, 255, 255, .1), transparent 33%),
    linear-gradient(125deg, #0e1558 0%, #17156d 58%, #105b83 100%) !important;
}
.application-page .application-contact__kicker { color: #68daf3 !important; }
.application-page .application-contact .btn-primary { color: var(--c8-navy) !important; }

/* Zastosowanie: Rolnictwo i biotechnologia. Jedna neutralna strona wejściowa, dwa kierunki produktu. */
.application-page--agbio {
  --app-accent: #168875;
  --app-mist: #edf8f5;
  --app-glow: rgba(22, 136, 117, .14);
}
.c8-agbio {
  overflow: clip;
  color: var(--c8-ink);
  background: #fff;
}
.c8-agbio h1,
.c8-agbio h2,
.c8-agbio h3 { color: var(--c8-navy); }
.c8-agbio-hero {
  position: relative;
  padding: clamp(58px, 6vw, 88px) 0 clamp(68px, 7vw, 104px);
  background:
    radial-gradient(circle at 4% 12%, rgba(0, 174, 217, .15), transparent 31%),
    radial-gradient(circle at 92% 88%, rgba(22, 136, 117, .12), transparent 28%),
    linear-gradient(135deg, #f8fbfd 0%, #fff 48%, #eff7f5 100%);
}
.c8-agbio-hero::after {
  content: "";
  position: absolute;
  right: -190px;
  bottom: -240px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(0, 174, 217, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 62px rgba(0, 174, 217, .035), 0 0 0 124px rgba(22, 136, 117, .025);
  pointer-events: none;
}
.c8-agbio-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: center;
}
.c8-agbio-hero__copy { max-width: 650px; }
.c8-agbio-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  color: #087e99;
  border: 1px solid rgba(0, 174, 217, .3);
  border-radius: 7px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 24px rgba(16, 27, 75, .07);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.c8-agbio-hero h1 {
  max-width: 650px;
  margin: 22px 0 20px;
  font-size: clamp(48px, 5vw, 74px);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.c8-agbio-hero h1 span { color: #116e64; }
.c8-agbio-hero__copy > p {
  max-width: 610px;
  margin: 0;
  color: #566079;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.68;
}
.c8-agbio-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.c8-agbio-facts span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  color: #253050;
  border: 1px solid rgba(23, 21, 109, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .76);
  font-size: 12px;
  font-weight: 800;
}
.c8-agbio-facts span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c8-cyan);
}
.c8-agbio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.c8-agbio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
  padding: 13px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.c8-agbio-btn span { font-size: 17px; transition: transform .18s ease; }
.c8-agbio-btn--primary {
  color: #fff;
  border: 1px solid var(--c8-navy);
  background: var(--c8-navy);
  box-shadow: 0 12px 28px rgba(23, 21, 109, .18);
}
.c8-agbio-btn--secondary {
  color: var(--c8-navy);
  border: 1px solid rgba(23, 21, 109, .18);
  background: rgba(255, 255, 255, .78);
}
.c8-agbio-btn:hover,
.c8-agbio-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(16, 25, 76, .16); }
.c8-agbio-btn:hover span,
.c8-agbio-btn:focus-visible span { transform: translateX(3px); }
.c8-agbio-btn:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 3px; }
.c8-agbio-hero__visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 580px;
}
.c8-agbio-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid rgba(23, 21, 109, .12);
  border-radius: 20px;
  background: #10204b;
  box-shadow: 0 24px 56px rgba(15, 27, 70, .16);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.c8-agbio-visual--agro { align-self: start; margin-bottom: 48px; }
.c8-agbio-visual--bio { align-self: end; margin-top: 48px; }
.c8-agbio-visual img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.c8-agbio-visual--agro img { object-position: 56% center; }
.c8-agbio-visual--bio img { object-position: center center; }
.c8-agbio-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 16, 42, .04) 24%, rgba(8, 23, 48, .88) 100%);
}
.c8-agbio-status {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 10px;
  color: #105e55;
  border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(7, 17, 44, .16);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.c8-agbio-visual__copy {
  position: absolute;
  right: 20px;
  bottom: 22px;
  left: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 5px 16px;
  color: #fff;
}
.c8-agbio-visual__copy small {
  grid-column: 1;
  color: #85e1d3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.c8-agbio-visual__copy strong { grid-column: 1; color: #fff; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.05; }
.c8-agbio-visual__copy i { grid-column: 2; grid-row: 1 / span 2; color: #75def1; font-size: 24px; font-style: normal; transition: transform .18s ease; }
.c8-agbio-visual:hover,
.c8-agbio-visual:focus-visible { transform: translateY(-5px); border-color: rgba(0, 174, 217, .55); box-shadow: 0 30px 70px rgba(11, 27, 67, .23); }
.c8-agbio-visual:hover img,
.c8-agbio-visual:focus-visible img { transform: scale(1.035); }
.c8-agbio-visual:hover i,
.c8-agbio-visual:focus-visible i { transform: translateX(4px); }
.c8-agbio-visual:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 4px; }
.c8-agbio-jump {
  border-top: 1px solid rgba(23, 21, 109, .08);
  border-bottom: 1px solid rgba(23, 21, 109, .1);
  background: #fff;
}
.c8-agbio-jump .wrap { display: flex; justify-content: center; gap: 8px 36px; min-height: 62px; }
.c8-agbio-jump a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #27304f;
  font-size: 12px;
  font-weight: 850;
}
.c8-agbio-jump a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  height: 2px;
  background: var(--c8-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.c8-agbio-jump a:hover::after,
.c8-agbio-jump a:focus-visible::after { transform: scaleX(1); }
.c8-agbio-paths { padding: clamp(78px, 8vw, 118px) 0; background: #fff; }
.c8-agbio-heading { max-width: 850px; }
.c8-agbio-heading > span {
  display: block;
  margin-bottom: 13px;
  color: #0d806f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.c8-agbio-heading h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.c8-agbio-heading p { max-width: 760px; margin: 19px 0 0; color: #5d667d; font-size: 16px; line-height: 1.7; }
.c8-agbio-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.c8-agbio-path {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, .84fr) minmax(0, 1.16fr);
  min-height: 420px;
  border: 1px solid rgba(23, 21, 109, .12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(17, 27, 74, .1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.c8-agbio-path:hover { transform: translateY(-4px); border-color: rgba(22, 136, 117, .32); box-shadow: 0 26px 58px rgba(17, 27, 74, .15); }
.c8-agbio-path__media { position: relative; min-height: 100%; overflow: hidden; background: #12204b; }
.c8-agbio-path__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(9, 26, 45, .65)); }
.c8-agbio-path__media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.c8-agbio-path--agro .c8-agbio-path__media img { object-position: 57% center; }
.c8-agbio-path__media > span {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 7px 9px;
  color: #0c6459;
  border-radius: 6px;
  background: rgba(255, 255, 255, .92);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.c8-agbio-path__body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3vw, 38px); }
.c8-agbio-path__body > small { color: #0c806e; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.c8-agbio-path__body h3 { margin: 9px 0 14px; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.05; }
.c8-agbio-path__body p { margin: 0; color: #5b6479; font-size: 14px; line-height: 1.65; }
.c8-agbio-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 21px 0 24px; }
.c8-agbio-tags span { padding: 7px 9px; color: #275047; border: 1px solid #d9e7e3; border-radius: 7px; background: #f4f9f7; font-size: 11px; font-weight: 800; }
.c8-agbio-path__body > a { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; color: #126f63; font-size: 13px; font-weight: 900; }
.c8-agbio-path__body > a span { color: var(--c8-cyan); font-size: 18px; transition: transform .18s ease; }
.c8-agbio-path__body > a:hover span,
.c8-agbio-path__body > a:focus-visible span { transform: translateX(4px); }
.c8-agbio-path__body > a:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 4px; }
.c8-agbio-note { max-width: 920px; margin: 28px 0 0; padding-left: 17px; color: #6c7486; border-left: 3px solid var(--c8-cyan); font-size: 13px; line-height: 1.6; }
.c8-agbio-process {
  position: relative;
  padding: clamp(82px, 8vw, 120px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 92% 8%, rgba(0, 174, 217, .24), transparent 30%),
    linear-gradient(135deg, #0e1558 0%, #17156d 60%, #124f69 100%);
}
.c8-agbio-process__layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(560px, 1.22fr); gap: clamp(46px, 7vw, 98px); align-items: start; }
.c8-agbio-process .c8-agbio-heading > span { color: #76dff3; }
.c8-agbio-process .c8-agbio-heading h2 { color: #fff; }
.c8-agbio-process .c8-agbio-heading p { color: rgba(255, 255, 255, .72); }
.c8-agbio-steps { display: grid; gap: 12px; }
.c8-agbio-step {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 15px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 14px 34px rgba(4, 8, 40, .12);
}
.c8-agbio-step > span { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #fff; border: 1px solid rgba(116, 224, 244, .42); border-radius: 12px; background: rgba(0, 174, 217, .17); font-size: 11px; font-weight: 900; }
.c8-agbio-step h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.c8-agbio-step p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.6; }
.c8-agbio-brief { padding: clamp(72px, 7vw, 108px) 0; background: #f3f7fb; }
.c8-agbio-brief__panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  gap: clamp(42px, 7vw, 94px);
  align-items: center;
  padding: clamp(38px, 5vw, 68px);
  border: 1px solid rgba(23, 21, 109, .1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 0%, rgba(0, 174, 217, .14), transparent 35%),
    linear-gradient(135deg, #fff 0%, #fbfdfe 62%, #eaf6f3 100%);
  box-shadow: 0 24px 62px rgba(16, 25, 76, .12);
}
.c8-agbio-brief h2 { margin: 18px 0 14px; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.c8-agbio-brief p { margin: 0; color: #5d667d; font-size: 15px; line-height: 1.65; }
.c8-agbio-brief ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.c8-agbio-brief li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 64px; padding: 11px 13px; color: #253050; border: 1px solid rgba(23, 21, 109, .1); border-radius: 11px; background: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 800; }
.c8-agbio-brief li span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #087e99; border-radius: 9px; background: #e9f8fb; font-size: 10px; font-weight: 900; }
.c8-agbio-brief li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.c8-agbio-contact .wrap { align-items: center; }

@media (max-width: 1120px) {
  .c8-agbio-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); gap: 42px; }
  .c8-agbio-hero__visual { min-height: 520px; }
  .c8-agbio-visual { min-height: 470px; }
  .c8-agbio-path { grid-template-columns: 1fr; }
  .c8-agbio-path__media { min-height: 250px; }
  .c8-agbio-process__layout { grid-template-columns: minmax(0, .78fr) minmax(480px, 1.22fr); gap: 44px; }
}

@media (max-width: 900px) {
  .c8-agbio-hero { padding-top: 46px; }
  .c8-agbio-hero__grid,
  .c8-agbio-process__layout,
  .c8-agbio-brief__panel { grid-template-columns: 1fr; }
  .c8-agbio-hero__copy { max-width: 720px; }
  .c8-agbio-hero h1 { max-width: 760px; }
  .c8-agbio-hero__visual { min-height: 520px; }
  .c8-agbio-visual { min-height: 470px; }
  .c8-agbio-path-grid { grid-template-columns: 1fr; }
  .c8-agbio-path { grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); }
  .c8-agbio-brief__panel { gap: 30px; }
}

@media (max-width: 620px) {
  .c8-agbio-hero { padding: 36px 0 58px; }
  .c8-agbio-hero h1 { font-size: clamp(39px, 12vw, 54px); }
  .c8-agbio-hero__copy > p { font-size: 15px; }
  .c8-agbio-actions { display: grid; }
  .c8-agbio-btn { width: 100%; }
  .c8-agbio-hero__visual { grid-template-columns: 1fr; min-height: 0; }
  .c8-agbio-visual,
  .c8-agbio-visual--agro,
  .c8-agbio-visual--bio { min-height: 310px; margin: 0; }
  .c8-agbio-visual { border-radius: 14px; }
  .c8-agbio-jump .wrap { justify-content: flex-start; gap: 20px; overflow-x: auto; }
  .c8-agbio-jump a { flex: 0 0 auto; }
  .c8-agbio-paths { padding: 66px 0; }
  .c8-agbio-heading h2 { font-size: 34px; }
  .c8-agbio-path { grid-template-columns: 1fr; border-radius: 14px; }
  .c8-agbio-path__media { min-height: 240px; }
  .c8-agbio-path__body { padding: 25px 22px; }
  .c8-agbio-process { padding: 66px 0; }
  .c8-agbio-step { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 18px 16px; }
  .c8-agbio-step > span { width: 40px; height: 40px; }
  .c8-agbio-brief { padding: 56px 0; }
  .c8-agbio-brief__panel { padding: 30px 22px; border-radius: 14px; }
  .c8-agbio-brief ol { grid-template-columns: 1fr; }
  .c8-agbio-brief li:last-child:nth-child(odd) { grid-column: auto; }
}

/* Centrum Pomoc / Help. */
.help-c8 { color: var(--c8-ink); }
.help-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  color: #fff;
  background: #11175d;
}
.help-hero__photo {
  position: absolute;
  inset: 0 0 0 43%;
}
.help-hero__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.help-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #11175d 0%, rgba(17, 23, 93, .96) 9%, rgba(17, 23, 93, .68) 35%, rgba(17, 23, 93, .12) 76%),
    linear-gradient(180deg, rgba(10, 16, 67, .04), rgba(10, 16, 67, .34));
}
.help-hero .wrap {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(46px, 7vw, 100px);
  align-items: center;
  padding-top: clamp(70px, 7vw, 104px);
  padding-bottom: clamp(70px, 7vw, 104px);
}
.help-hero__copy { max-width: 700px; }
.help-hero .eyebrow { color: #7de5fb; }
.help-hero h1 { max-width: 680px; margin: 14px 0 22px; color: #fff; font-size: clamp(46px, 5vw, 72px); line-height: .98; }
.help-hero__copy > p { max-width: 640px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 18px; line-height: 1.72; }
.help-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.help-hero__actions .btn { min-height: 50px; }
.help-btn-primary { background: #fff; color: var(--c8-navy); border-color: #fff; }
.help-btn-primary:hover { background: #dff8ff; border-color: #dff8ff; }
.help-btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .04); }
.help-btn-secondary:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); }
.help-brief {
  justify-self: end;
  width: min(100%, 420px);
  padding: 30px;
  color: var(--c8-ink);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 80px rgba(5, 11, 48, .32);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.help-brief__label { color: #087f9f; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.help-brief h2 { margin: 10px 0 22px; font-size: 24px; line-height: 1.18; }
.help-brief ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #dbe2ee; border-left: 1px solid #dbe2ee; }
.help-brief li { min-height: 82px; padding: 14px; border-right: 1px solid #dbe2ee; border-bottom: 1px solid #dbe2ee; color: #3d465e; font-size: 13px; font-weight: 750; }
.help-brief li span { display: block; margin-bottom: 7px; color: var(--c8-cyan); font-size: 10px; font-weight: 900; }

.help-choices,
.help-routes { padding: clamp(82px, 8vw, 118px) 0; }
.help-section-head { max-width: 760px; }
.help-section-head--wide { max-width: 900px; }
.help-section-head h2 { margin: 8px 0 14px; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; }
.help-section-head p { max-width: 720px; margin: 0; color: #647087; font-size: 16px; line-height: 1.7; }
.help-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.help-choice {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  min-height: 230px;
  padding: 26px 24px;
  border: 1px solid var(--c8-line);
  border-top: 3px solid var(--c8-cyan);
  background: #fff;
  box-shadow: 0 18px 44px rgba(20, 27, 76, .09);
  transition: transform .18s ease, box-shadow .18s ease;
}
.help-choice:hover { transform: translateY(-4px); box-shadow: 0 26px 58px rgba(20, 27, 76, .15); }
.help-choice .help-no { color: var(--c8-cyan); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.help-choice__body { display: flex; flex-direction: column; min-width: 0; }
.help-choice h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.15; }
.help-choice p { margin: 0; color: #616a80; line-height: 1.62; font-size: 14px; }
.help-choice strong { margin-top: auto; padding-top: 22px; color: var(--c8-navy); font-size: 13px; }

.help-steps { padding: clamp(82px, 8vw, 118px) 0; background: #f3f7fb; border-top: 1px solid #e0e6f0; border-bottom: 1px solid #e0e6f0; }
.help-process-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(50px, 8vw, 110px); align-items: start; }
.help-steps__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid #cfd8e7; }
.help-step { display: grid; grid-template-columns: 42px 1fr; gap: 16px; min-height: 150px; padding: 26px 24px 26px 0; border-bottom: 1px solid #cfd8e7; }
.help-step:nth-child(odd) { border-right: 1px solid #cfd8e7; }
.help-step:nth-child(even) { padding-left: 24px; }
.help-step .help-no { color: var(--c8-cyan); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.help-step b { display: block; color: var(--c8-navy); margin: 0 0 8px; font-size: 18px; }
.help-step p { margin: 0; color: #60697f; line-height: 1.58; font-size: 14px; }

.help-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.help-route { position: relative; min-height: 164px; padding: 24px 52px 22px 22px; overflow: hidden; border: 1px solid var(--c8-line); border-top: 3px solid var(--route-accent, var(--c8-cyan)); background: #fff; transition: transform .18s ease, border-color .18s ease; }
.help-route:nth-child(1) { --route-accent: #242088; }
.help-route:nth-child(2) { --route-accent: #9c2f72; }
.help-route:nth-child(3) { --route-accent: #13826f; }
.help-route:nth-child(4) { --route-accent: #d88a16; }
.help-route:nth-child(5), .help-route:nth-child(6) { --route-accent: #00aed9; }
.help-route:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--route-accent) 42%, #d8dfeb); }
.help-route b { display: block; color: var(--c8-navy); font-size: 18px; line-height: 1.2; }
.help-route small { display: block; color: #6a748b; margin-top: 10px; line-height: 1.55; }
.help-route > span { position: absolute; right: 20px; bottom: 18px; color: var(--route-accent); font-size: 22px; }

.help-faq { padding: clamp(82px, 8vw, 118px) 0; background: #f3f7fb; }
.help-faq-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(50px, 8vw, 110px); align-items: start; }
.help-faq__list { border-top: 1px solid #cfd8e7; }
.help-faq details { border-bottom: 1px solid #cfd8e7; background: transparent; }
.help-faq summary { cursor: pointer; padding: 21px 42px 21px 0; color: var(--c8-navy); font-weight: 800; line-height: 1.4; }
.help-faq details p { padding: 0 42px 22px 0; margin: 0; color: #60697f; line-height: 1.68; }

.help-final-cta {
  position: relative;
  padding: 0 0 clamp(72px, 7vw, 104px);
  background: #f3f7fb;
}
.help-final-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 270px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: clamp(44px, 7vw, 100px);
  padding: clamp(42px, 5vw, 64px);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(31, 190, 225, .28), transparent 28%),
    linear-gradient(135deg, #111550 0%, #17156c 58%, #243994 100%);
  box-shadow: 0 30px 70px rgba(14, 20, 66, .2);
}
.help-final-cta__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(42px, 5vw, 64px);
  z-index: -1;
  width: 78px;
  height: 4px;
  background: #35cce9;
}
.help-final-cta__panel::after {
  content: "";
  position: absolute;
  right: -105px;
  bottom: -145px;
  z-index: -1;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(100, 220, 243, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(100, 220, 243, .045), 0 0 0 92px rgba(100, 220, 243, .025);
}
.help-final-cta__copy { max-width: 730px; }
.help-final-cta__kicker {
  display: block;
  margin-bottom: 14px;
  color: #71e2f7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}
.help-final-cta h2 {
  max-width: 690px;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.help-final-cta p {
  max-width: 670px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15.5px;
  line-height: 1.65;
}
.help-final-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
}
.help-final-cta__primary,
.help-final-cta__secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.help-final-cta__primary {
  color: var(--c8-navy);
  border: 1px solid #fff;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 12, 45, .2);
}
.help-final-cta__secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
}
.help-final-cta__primary span,
.help-final-cta__secondary span { color: #0b99bc; font-size: 17px; transition: transform .18s ease; }
.help-final-cta__secondary span { color: #71e2f7; }
.help-final-cta__primary:hover,
.help-final-cta__primary:focus-visible { background: #e9faff; border-color: #e9faff; transform: translateY(-2px); }
.help-final-cta__secondary:hover,
.help-final-cta__secondary:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); transform: translateY(-2px); }
.help-final-cta__primary:hover span,
.help-final-cta__primary:focus-visible span,
.help-final-cta__secondary:hover span,
.help-final-cta__secondary:focus-visible span { transform: translateX(4px); }
.help-final-cta__primary:focus-visible,
.help-final-cta__secondary:focus-visible { outline: 2px solid #71e2f7; outline-offset: 3px; }

@media (max-width: 900px) {
  .help-hero { min-height: auto; }
  .help-hero__photo { inset: 0; }
  .help-hero__photo::after { background: linear-gradient(180deg, rgba(17, 23, 93, .92), rgba(17, 23, 93, .82)); }
  .help-hero .wrap { grid-template-columns: 1fr; gap: 36px; padding-top: 72px; padding-bottom: 72px; }
  .help-brief { justify-self: start; }
  .help-process-layout,
  .help-faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .help-final-cta__panel { grid-template-columns: 1fr; gap: 32px; }
  .help-final-cta__actions { width: min(100%, 420px); }
}
@media (max-width: 620px) {
  .help-hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .help-hero__actions { flex-direction: column; align-items: stretch; }
  .help-hero__actions .btn { justify-content: center; }
  .help-brief { padding: 22px; }
  .help-brief ol { grid-template-columns: 1fr; }
  .help-brief li { min-height: 60px; }
  .help-choice { grid-template-columns: 36px 1fr; min-height: 0; padding: 22px 18px; }
  .help-step,
  .help-step:nth-child(even) { grid-template-columns: 36px 1fr; min-height: 0; padding: 22px 0; border-right: 0; }
  .help-route { min-height: 145px; }
  .help-final-cta { padding-bottom: 52px; }
  .help-final-cta__panel { padding: 34px 24px; border-radius: 14px; }
  .help-final-cta__panel::before { left: 24px; }
  .help-final-cta h2 { font-size: 32px; }
}

/* O firmie — narracja oparta na realnym łańcuchu i dowodach. */
.about-c8 { color: var(--c8-ink); }
.about-c8 .about-hero {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #11184f;
}
.about-c8 .about-hero__media,
.about-c8 .about-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-c8 .about-hero__media img { object-fit: cover; }
.about-c8 .about-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 18, 66, .92), rgba(12, 18, 66, .66) 48%, rgba(12, 18, 66, .14));
}
.about-c8 .about-hero .wrap { position: relative; z-index: 2; width: 100%; }
.about-c8 .about-hero__card { max-width: 700px; color: #fff; }
.about-c8 .about-hero h1 { color: #fff; margin: 12px 0 20px; max-width: 680px; }
.about-c8 .about-hero p { color: rgba(255, 255, 255, .84); font-size: 18px; line-height: 1.7; max-width: 650px; }
.about-c8 .about-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about-c8 .about-hero__facts span { padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .09); font-size: 13px; font-weight: 750; }
.about-c8 .about-section { padding: clamp(76px, 8vw, 116px) 0; }
.about-c8 .about-intro-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 58px; align-items: center; }
.about-c8 .about-copy p { color: #5e677f; font-size: 17px; line-height: 1.75; }
.about-c8 .supply-figure { margin: 0; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--c8-line); box-shadow: var(--c8-shadow); }
.about-c8 .supply-figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
.about-c8 .supply-figure figcaption { margin: 13px 5px 0; color: #6e768d; font-size: 13px; }
.about-c8 .about-process { background: #f4f7fb; }
.about-c8 .about-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.about-c8 .about-process-card { overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--c8-line); }
.about-c8 .about-process-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.about-c8 .about-process-card div { padding: 20px; }
.about-c8 .about-process-card b { color: var(--c8-navy); }
.about-c8 .about-process-card p { color: #626b82; font-size: 14px; line-height: 1.55; }
.about-c8 .about-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.about-c8 .about-lab-grid img { width: 100%; min-height: 440px; object-fit: cover; border-radius: 24px; box-shadow: var(--c8-shadow); }
.about-c8 .about-points { display: grid; gap: 12px; margin-top: 25px; }
.about-c8 .about-point { padding: 17px 18px; border-left: 4px solid var(--c8-cyan); border-radius: 0 13px 13px 0; background: #f3f8fc; }
.about-c8 .about-ops { background: linear-gradient(135deg, #141268, #263894); color: #fff; }
.about-c8 .about-ops h2 { color: #fff; }
.about-c8 .about-ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.about-c8 .about-op { padding: 25px; border-radius: 17px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.about-c8 .about-op b { display: block; color: #fff; font-size: 18px; margin-bottom: 8px; }
.about-c8 .about-op p { color: rgba(255, 255, 255, .76); margin: 0; line-height: 1.6; }

/* O firmie: dopracowane przejscie od ciemnej sekcji do stopki. */
.about-c8 .about-final-cta {
  position: relative;
  padding: 0 0 clamp(68px, 7vw, 96px);
  background: #f3f7fb;
}
.about-c8 .about-final-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 248px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  align-items: center;
  gap: clamp(38px, 5vw, 76px);
  padding: clamp(42px, 5vw, 64px);
  border: 1px solid rgba(16, 24, 80, .1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 6% 5%, rgba(42, 201, 232, .2), transparent 32%),
    linear-gradient(135deg, #fff 0%, #f7fbfd 62%, #e9f7fb 100%);
  box-shadow: 0 28px 72px rgba(14, 22, 70, .18);
  transform: translateY(-54px);
  margin-bottom: -54px;
}
.about-c8 .about-final-cta__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(42px, 5vw, 64px);
  width: 76px;
  height: 4px;
  background: var(--c8-cyan);
}
.about-c8 .about-final-cta__panel::after {
  content: "";
  position: absolute;
  right: -125px;
  bottom: -190px;
  z-index: -1;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(0, 174, 217, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(0, 174, 217, .045), 0 0 0 96px rgba(0, 174, 217, .025);
}
.about-c8 .about-final-cta__copy { max-width: 760px; }
.about-c8 .about-final-cta__kicker {
  display: block;
  margin-bottom: 13px;
  color: #087f9f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.about-c8 .about-final-cta h2 {
  max-width: 700px;
  margin: 0;
  color: var(--c8-navy);
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.about-c8 .about-final-cta p {
  max-width: 680px;
  margin: 18px 0 0;
  color: #5f687d;
  font-size: 15.5px;
  line-height: 1.65;
}
.about-c8 .about-final-cta__actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
}
.about-c8 .about-final-cta__primary,
.about-c8 .about-final-cta__secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 850;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.about-c8 .about-final-cta__primary {
  color: #fff;
  border: 1px solid var(--c8-navy);
  background: var(--c8-navy);
  box-shadow: 0 12px 26px rgba(18, 20, 91, .2);
}
.about-c8 .about-final-cta__secondary {
  color: var(--c8-navy);
  border: 1px solid rgba(23, 21, 109, .18);
  background: rgba(255, 255, 255, .72);
}
.about-c8 .about-final-cta__primary span { color: #70e1f7; font-size: 17px; transition: transform .18s ease; }
.about-c8 .about-final-cta__secondary span { color: #0b95b7; font-size: 17px; transition: transform .18s ease; }
.about-c8 .about-final-cta__primary:hover,
.about-c8 .about-final-cta__primary:focus-visible {
  background: #24228a;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(18, 20, 91, .25);
}
.about-c8 .about-final-cta__secondary:hover,
.about-c8 .about-final-cta__secondary:focus-visible {
  border-color: rgba(0, 174, 217, .48);
  background: #fff;
  transform: translateY(-2px);
}
.about-c8 .about-final-cta__primary:hover span,
.about-c8 .about-final-cta__primary:focus-visible span,
.about-c8 .about-final-cta__secondary:hover span,
.about-c8 .about-final-cta__secondary:focus-visible span { transform: translateX(4px); }
.about-c8 .about-final-cta__primary:focus-visible,
.about-c8 .about-final-cta__secondary:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 3px; }

@media (max-width: 900px) {
  .about-c8 .about-final-cta__panel {
    grid-template-columns: 1fr;
    gap: 30px;
    transform: translateY(-36px);
    margin-bottom: -36px;
  }
  .about-c8 .about-final-cta__actions { width: min(100%, 420px); }
}

@media (max-width: 620px) {
  .about-c8 .about-final-cta { padding-bottom: 52px; }
  .about-c8 .about-final-cta__panel { padding: 34px 24px; border-radius: 14px; }
  .about-c8 .about-final-cta__panel::before { left: 24px; }
  .about-c8 .about-final-cta h2 { font-size: 32px; }
}

/* Kontakt: krótsze role i spokojniejszy blok danych rejestrowych. */
.kteam .kspoc .scope { line-height: 1.65; }
.kteam .av.c8-initials { color: #fff; font-weight: 900; letter-spacing: .04em; }
.ktrust.c8-register-only { max-width: 920px; margin: 0 auto; }
.ktrust.c8-register-only .kreg { margin-top: 26px; }

@media (max-width: 1180px) {
  .nav-cta .contact-cta { padding: 0 12px; }
  .c8-app-menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c8-app-menu-card { min-height: 190px; }
  .mega-app.c8-app-menu { max-height: calc(100vh - 150px); overflow-y: auto; }
  body:has(.hero-split) .hero-split .panel-inner { width: min(768px, 68vw); margin-left: clamp(20px, 2.3vw, 28px) !important; }
  .c8-evidence__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-cta .as { display: none; }
  .nav-cta .contact-cta { min-height: 40px; font-size: 12px; border-radius: 11px; }
  .c8-applications .use { min-height: 260px; }
  body:has(.hero-split) .hero-split { min-height: 720px; }
  body:has(.hero-split) .hero-split .panel { width: min(100% - 28px, 720px); align-items: flex-end; padding: 40px 0 78px; }
  body:has(.hero-split) .hero-split .panel-inner { width: 100%; margin-left: 0 !important; padding: 28px !important; border-radius: 0; }
  body:has(.hero-split) .hero-split .photo::before { background: linear-gradient(180deg, rgba(10, 18, 55, .08), rgba(12, 19, 60, .18) 45%, rgba(232, 245, 251, .9) 78%, rgba(240, 248, 252, .96)); }
  body:has(.hero-split) .hero-split .hero-slide img {
    width: 100% !important;
    object-position: center center !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body:has(.hero-split) .hero-split .hero-slide::before { display: none; }
  body:has(.hero-split) .hero-split .caption { right: 16px; bottom: 62px; }
  body:has(.hero-split) .hero-split .hero-controls { right: 16px; bottom: 18px; }
  .c8-evidence .c8-evidence__head,
  .about-c8 .about-intro-grid,
  .about-c8 .about-lab-grid { grid-template-columns: 1fr; gap: 32px; }
  .c8-evidence .wrap { grid-template-columns: 1fr; gap: 42px; }
  .c8-evidence__head { max-width: 680px; }
  .help-choice-grid,
  .help-route-grid { grid-template-columns: 1fr; }
  .help-steps__grid,
  .about-c8 .about-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-c8 .about-ops-grid { grid-template-columns: 1fr; }
  .application-page .apphero2__card { bottom: 28px !important; }
}

@media (max-width: 620px) {
  /* Kompaktowa pigulka Kontakt: font-size:0 zwija niewidoczny tekst "Kontakt"
     (inaczej rozpycha pigulke i "@" wypada poza overflow:hidden — bylo puste). */
  .nav-cta .contact-cta { width: 42px; padding: 0; overflow: hidden; gap: 0; font-size: 0; }
  .nav-cta .contact-cta::before { content: ""; width: 22px; height: 18px; background-color: var(--c8-navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat; display: inline-block; }
  .nav-cta .contact-cta::after { display: none; }
  body:has(.hero-split) .hero-split { min-height: 700px; }
  body:has(.hero-split) .hero-split .panel h1 { font-size: clamp(36px, 10vw, 48px) !important; }
  .c8-hero-specialties { grid-template-columns: 1fr; }
  .c8-hero-specialties a { min-height: 48px; padding: 9px 14px 9px 20px; border-right: 0; border-bottom: 1px solid rgba(21, 20, 95, .1); }
  .c8-hero-specialties a:last-child { border-bottom: 0; }
  .c8-hero-specialties a::before { left: 8px; top: 15px; }
  body:has(.hero-split) .hero-split .caption { right: 14px; bottom: 14px; }
  body:has(.hero-split) .hero-split .hero-controls { top: 14px; right: 14px; bottom: auto; }
  .c8-evidence__grid,
  .help-steps__grid,
  .about-c8 .about-process-grid { grid-template-columns: 1fr; }
  .c8-cert-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c8-cert-row a:nth-child(2) { border-right: 0; }
  .c8-cert-row a:nth-child(-n+2) { border-bottom: 1px solid rgba(21, 20, 95, .1); }
  .category-jump .wrap,
  .application-jump .wrap { gap: 12px !important; }
  .about-c8 .about-hero { min-height: 680px; align-items: flex-end; padding-bottom: 52px; }
  .about-c8 .about-hero__media::after { background: linear-gradient(180deg, rgba(10, 17, 57, .18), rgba(10, 17, 57, .9) 62%); }
  .about-c8 .about-lab-grid img { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.hero-split) .hero-split .hero-slide { clip-path: none !important; transition: opacity .15s linear !important; transform: none !important; }
  body:has(.hero-split) .hero-split .photo.is-transitioning::after { animation: none !important; }
}

/* ============================================================
   ZADANIE: kafelki LINII PRODUKTOWYCH (.pcard) w tym samym stylu,
   co kafelki ZASTOSOWAN (.apc) — kolorowy pasek rodziny u gory,
   spojne obramowanie, etykieta i przyciski w kolorze rodziny.
   Kolor bierze sie z rodziny strony (--category-accent* juz istnieja).
   ============================================================ */
/* Jasniejszy, towarzyszacy kolor do gradientu paska — per rodzina
   (dokladnie jak drugi kolor akcentu w kafelkach .apc). */
.category-page--turicoll { --category-accent-2: #00aed9; }
.category-page--turiker  { --category-accent-2: #c0568a; }
.category-page--turipro  { --category-accent-2: #51ad8c; }
.category-page--turigel  { --category-accent-2: #efad4f; }
.category-page--agro     { --category-accent-2: #8fd6a6; }
.category-page--bio      { --category-accent-2: #c7d47a; }

.category-products .pcard {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--category-deep) 14%, transparent) !important;
}
/* Kolorowy pasek rodziny — przyciety do zaokraglenia karty przez overflow. */
.category-products .pcard::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--category-accent),
    var(--category-accent-2, var(--category-accent)));
}
.category-products .pcard:hover {
  border-color: color-mix(in srgb, var(--category-accent) 48%, transparent) !important;
}
/* Etykieta kategorii i nazwa produktu w kolorze rodziny (zamiast stalego wina). */
.category-products .pcard .ln { color: var(--category-deep) !important; }
.category-products .pcard h3 a { color: var(--category-deep) !important; }
.category-products .pcard h3 a:hover { color: var(--category-accent) !important; }
/* Przyciski w kolorze rodziny — glowny wypelniony, pozostale z obrysem. */
.category-products .pcard .acts a:first-child {
  background: var(--category-deep) !important;
  border-color: var(--category-deep) !important;
}
.category-products .pcard .acts a:first-child:hover {
  background: var(--category-accent-dark) !important;
  border-color: var(--category-accent-dark) !important;
}
.category-products .pcard .acts a:hover { border-color: var(--category-accent) !important; }

/* ============================================================
   NAPRAWA: JEDNOLITY pasek akcentu 4px na KAZDEJ karcie hero
   zastosowan. Wczesniej byl niespojny: strony z inline ::before
   (zywnosc, stawy) mialy podwojny pasek + „uszy" w rogach, a
   strony bez ::before (sport, uroda, pet-food, rolnictwo) mialy
   akcent tylko z grubej border-top:4px. Uzywamy inset box-shadow
   — respektuje border-radius (bez „uszu"), nie zalezy od pseudo-
   elementu ani pozycjonowania, wiec WSZYSTKIE 6 stron wyglada tak
   samo. Stary ::before wylaczamy, gruba ramke scieramy do 1px.
   ============================================================ */
.application-page .apphero2__card,
.application-page .apphero2-card {
  border-top-width: 0 !important;     /* pasek siega samej gory; bez „uszu" od grubej ramki */
  background-image: linear-gradient(var(--app-accent), var(--app-accent)) !important;
  background-repeat: no-repeat !important;
  background-position: top !important;
  background-size: 100% 4px !important;   /* rowny 4px pasek, przyciety DOKLADNIE do zaokraglenia karty */
  box-shadow: 0 26px 64px rgba(12, 21, 67, .18) !important;
}
.application-page .apphero2__card::before,
.application-page .apphero2-card::before {
  display: none !important;           /* stary, niespojny pasek — pasek robi teraz gradient tla */
}

/* ============================================================
   NAPRAWA: spojne podswietlenie kafli rodzin (#rodziny).
   Prostokatne .fam dawaly na hover TWARDY pierscien 2px, a skosne
   segmenty .ksplit tylko uniesienie + miekki cien — stad „inaczej
   sie podswietlaly". Hover MYSZA ujednolicamy do wspolnego jezyka:
   uniesienie (transform zostaje z reguly bazowej) + miekki cien +
   delikatny akcent ramki, BEZ twardego pierscienia.
   Fokus z KLAWIATURY zachowuje wyrazny pierscien (dostepnosc).
   ============================================================ */
#rodziny .fam:hover {
  border-color: color-mix(in srgb, var(--fc) 40%, transparent);
  box-shadow:
    0 30px 68px rgba(15, 20, 66, .23),
    0 10px 24px rgba(15, 20, 66, .1);
}

/* ============================================================
   Dopisek (eyebrow) w hero glownej — byl brzydki: biala pigulka
   z cienka ramka „plywala" na jasnej karcie, niski kontrast tekstu.
   Robimy ugruntowany, markowy chip: miekkie tlo w kolorze marki,
   GRANATOWY tekst (mocny kontrast), subtelna ramka, bez plywajacego
   cienia. Zmiana tylko w CSS -> identycznie w PL/EN/DE.
   ============================================================ */
.panel-inner .badge {
  background: linear-gradient(180deg, rgba(0, 174, 217, .12), rgba(0, 174, 217, .06)) !important;
  border: 1px solid rgba(0, 174, 217, .22) !important;
  color: #17156d !important;                 /* granat marki — mocny kontrast zamiast bladego cyjanu */
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .012em !important;
  padding: 8px 16px 8px 13px !important;
  box-shadow: none !important;               /* koniec z „plywaniem" */
}
.panel-inner .badge .dot {
  background: var(--cyan, #00aed9) !important;
  box-shadow: 0 0 0 3px rgba(0, 174, 217, .16) !important;   /* delikatna aureola zamiast pulsu */
}

/* ============================================================
   TEST (24.07): karta informacyjna hero glownej „zlewa sie" z tlem
   na BOKACH. Tlo/ramka/cien/rozmycie przeniesione na warstwe ::before
   i wyplowione maska gradientowa (lewy + prawy brzeg -> przezroczyste,
   srodek pelny). Tekst (dzieci .panel-inner) NIE jest maskowany, wiec
   nie blednie. Latwe do cofniecia (usun ten blok).
   ============================================================ */
.panel-inner {
  position: relative;
  z-index: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.panel-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 0 0, rgba(187, 239, 250, .56), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(241, 248, 253, .82));
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 28px 70px rgba(15, 22, 72, .2);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
}

/* ============================================================
   TEST 4K/5K: caly uklad ograniczony do 2560px i wycentrowany.
   Powyzej 2560px pojawiaja sie neutralne marginesy zamiast
   rozjezdzania sie tresci na wysepki. Latwe do cofniecia.
   ============================================================ */
@media (min-width: 2561px) {
  html { background: #e9edf4; }
  body { max-width: 2560px; margin-inline: auto; box-shadow: 0 0 0 1px rgba(20,25,60,.06); }
}

/* ============================================================
   NAPRAWA przepelnienia nawigacji (ucinany Kontakt/koszyk).
   W ciasnych pasmach szerokosci (m.in. 4K przy skalowaniu Windows
   ~250%% => ~1536px CSS, oraz laptopy 1100-1500px) 6 pozycji menu
   + wyszukiwarka + Kontakt sie nie miescily. Tu delikatnie malej
   czcionke, zwezamy wyszukiwarke i odstepy, zeby ZAWSZE sie miescilo.
   Na szerokich ekranach menu zostaje duze (18px).
   ============================================================ */
@media (min-width: 1041px) and (max-width: 1500px) {
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a { font-size: 15px !important; }
  header.nav nav.main { gap: 14px !important; }
  header.nav .nav-cta .as-input { width: 64px !important; min-width: 0 !important; }
}
@media (min-width: 1501px) and (max-width: 1720px) {
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a { font-size: 16px !important; }
  header.nav nav.main { gap: 20px !important; }
  header.nav .nav-cta .as-input { width: 110px !important; min-width: 0 !important; }
}

/* ============================================================
   Strony pojedynczych produktow (.pdp) dziedzicza kolor RODZINY
   (jak strony linii): przyciski, eyebrow, naglowek specyfikacji,
   chipy i dolne CTA w kolorze rodziny zamiast generycznego granatu.
   Stopka pozostaje wspolna (granat). Klasa rodziny na <body>.
   ============================================================ */
/* --category-navy/-deep: aby wstega TurEssence (logo ::after) na PRODUKTACH dziedziczyla
   kolor swojej linii — te same wartosci co strony linii (concept8.css ~1433-1460),
   inaczej produkt spada do domyslnego granatu. */
.pdp--turicoll { --fam-accent:#2b3a9e; --fam-deep:#202c87; --fam-dark:#1a2570; --fam-mist:#eef1ff; --category-navy:#11195d; --category-deep:#202c87; }
.pdp--turiker  { --fam-accent:#8e2f6d; --fam-deep:#6d2054; --fam-dark:#571842; --fam-mist:#fbf0f7; --category-navy:#3b1232; --category-deep:#6d2054; }
.pdp--turipro  { --fam-accent:#0f855f; --fam-deep:#0b694c; --fam-dark:#08543c; --fam-mist:#edf8f3; --category-navy:#073d31; --category-deep:#0b694c; }
.pdp--turigel  { --fam-accent:#d9821c; --fam-deep:#9b530a; --fam-dark:#7d4308; --fam-mist:#fff4e5; --category-navy:#663807; --category-deep:#9b530a; }

/* Eyebrow nad nazwa produktu */
.pdp .phero .cat { color: var(--fam-accent) !important; }
/* Przyciski glowne w kolorze rodziny */
.pdp .btn-primary {
  background: var(--fam-deep) !important;
  border-color: var(--fam-deep) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fam-deep) 28%, transparent) !important;
}
.pdp .btn-primary:hover { background: var(--fam-dark) !important; }
/* Naglowek karty specyfikacji */
.pdp .spec-card .h { background: var(--fam-deep) !important; }
/* Chipy zastosowan w hero */
.pdp .uses span { color: var(--fam-deep) !important; }
.pdp .uses span svg { color: var(--fam-accent) !important; }
/* Dolna sekcja CTA (band) */
.pdp .band { background: var(--fam-deep) !important; }
.pdp .band .btn-primary {
  background: #fff !important;
  color: var(--fam-deep) !important;
  border-color: #fff !important;
  box-shadow: 0 6px 18px rgba(8, 20, 60, .22) !important;
}
.pdp .band .btn-primary:hover { background: var(--fam-mist) !important; }

/* 2026-07-27 ZADANIA/STRONA: ukryj numeracje 01-06 w kafelkach hero Dobor wedlug zastosowania. */
.c8-applications .use .c8-use-number{display:none !important;}

/* 2026-07-27 FIX megamenu zastosowan: 3x2 grid + realne tlo (inline background-image zamiast buggy var(--am)/::before). */
.mega-app.c8-app-menu .c8-app-menu__grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.mega-app.c8-app-menu .c8-app-menu-card{background-size:cover !important;background-position:center !important}
.mega-app.c8-app-menu .c8-app-menu-card::before{display:none !important}

/* 2026-07-27 ZADANIA/STRONA: koszyk - info o wielkosci probek + CTA kontakt. */
.koszinfo{margin:10px 0 2px;padding:12px 14px;border:1px solid var(--line,#e6e7ef);border-radius:10px;background:var(--soft,#f6f7fb);font-size:13px;line-height:1.55;color:var(--text-muted,#5a5f73)}
.koszinfo p{margin:0}
.koszinfo p+p{margin-top:7px}
.koszinfo strong{color:var(--navy,#17156d)}
.koszinfo a{color:var(--wine,#b23a48);font-weight:700}

/* ============================================================
   2026-07-27 ZADANIA/STRONA — MOBILE (<=600px) hero-split:
   stack pionowy — widoczne pasmo zdjecia (z animacja slajdow) na
   gorze + zwarta karta tekstowa pod spodem; hero miesci sie na
   jednym ekranie. Nadpisuje overlay (.photo position:absolute).
   ============================================================ */
@media (max-width: 600px) {
  body:has(.hero-split) .hero-split { height: auto !important; min-height: 0 !important; }
  body:has(.hero-split) .hero-split .hs-grid { display: flex !important; flex-direction: column !important; }

  /* pasmo zdjecia — realny, w pelni widoczny obraz z animacja pan/zoom */
  body:has(.hero-split) .hero-split .photo {
    position: relative !important;
    inset: auto !important;
    order: -1;
    width: 100% !important;
    height: clamp(206px, 40vh, 258px) !important;
    min-height: 0 !important;
    z-index: 0;
  }
  body:has(.hero-split) .hero-split .hero-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 32% !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* zdjecie zostaje widoczne: brak wybielajacego fade, tylko delikatny scrim u dolu pod caption */
  body:has(.hero-split) .hero-split .photo::before {
    background: linear-gradient(180deg, rgba(8, 15, 46, 0) 50%, rgba(8, 15, 46, .5) 100%) !important;
  }

  /* karta tekstowa pod zdjeciem — na bialym, zwarta */
  body:has(.hero-split) .hero-split .panel {
    position: relative !important;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 20px 26px !important;
    display: block !important;
    background: #fff !important;
    pointer-events: auto !important;
    min-height: 0 !important;
  }
  body:has(.hero-split) .hero-split .panel-inner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body:has(.hero-split) .hero-split .panel h1 {
    font-size: clamp(26px, 7.2vw, 32px) !important;
    line-height: 1.14 !important;
    margin: 0 0 13px !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  body:has(.hero-split) .hero-split .panel .lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
  }
  body:has(.hero-split) .hero-split .c8-hero-specialties { margin: 0 0 16px !important; }
  body:has(.hero-split) .hero-split .cta { margin: 0 !important; }
  body:has(.hero-split) .hero-split .cta .btn { width: 100%; justify-content: center; }

  /* caption + kropki nawigacji na dolnym scrimie pasma zdjecia */
  body:has(.hero-split) .hero-split .caption { left: 14px !important; right: auto !important; top: auto !important; bottom: 12px !important; }
  body:has(.hero-split) .hero-split .hero-controls { right: 14px !important; left: auto !important; top: auto !important; bottom: 12px !important; }
}

/* ============================================================
   2026-07-27 ZADANIA/STRONA — plynne wysuwanie menu z burgera.
   Drawer (html.nav-open nav.main) pojawial sie skokowo (display:flex).
   Dodajemy slide-down + fade przy kazdym otwarciu (animacja startuje
   gdy element staje sie display:flex), z lekkim stagger na pozycjach.
   ============================================================ */
/* fix9 / FAZA C1 (a): plynniejsze, bardziej "aplikacyjne" wejscie drawera —
   wsuniecie z prawej + fade + mikro-skala, easing typu ease-out-expo
   (szybki start, miekkie dojscie), pozycje wchodza kaskadowo. */
html.nav-open nav.main {
  animation: navDrawerIn .42s cubic-bezier(.16, .84, .24, 1) both;
  transform-origin: top right;
  will-change: transform, opacity;
  backface-visibility: hidden;
  box-shadow: 0 28px 56px rgba(13, 17, 58, .28) !important;
}
html.nav-open nav.main > a,
html.nav-open nav.main > .hasdrop,
html.nav-open nav.main > .hasmega,
html.nav-open nav.main > .c8-help-link,
html.nav-open nav.main > .as {
  animation: navDrawerItemIn .38s cubic-bezier(.16, .84, .24, 1) both;
}
html.nav-open nav.main > *:nth-child(1) { animation-delay: .06s; }
html.nav-open nav.main > *:nth-child(2) { animation-delay: .095s; }
html.nav-open nav.main > *:nth-child(3) { animation-delay: .13s; }
html.nav-open nav.main > *:nth-child(4) { animation-delay: .165s; }
html.nav-open nav.main > *:nth-child(5) { animation-delay: .20s; }
html.nav-open nav.main > *:nth-child(6) { animation-delay: .235s; }
html.nav-open nav.main > *:nth-child(7) { animation-delay: .27s; }
html.nav-open nav.main > *:nth-child(8) { animation-delay: .30s; }
@keyframes navDrawerIn {
  from { opacity: 0; transform: translate3d(34px, -6px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes navDrawerItemIn {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes navScrimIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.nav-open nav.main,
  html.nav-open nav.main > * { animation: none !important; }
  html.nav-open body::after { animation: none !important; }
}

/* ============================================================
   2026-07-27 fix9 / FAZA C1 (b) — drawer POD doczepianym menu (BUG).
   Przyczyna: nav.main jest DZIECKIEM header.nav, ktory ma
   position:sticky + z-index:40, czyli wlasny stacking context.
   Zaden z-index drawera (styles.css: 39) nie przebije sticky paska
   .category-jump / .application-jump (z-index:48 !important), bo caly
   header stoi nizej w drzewie warstw. Dlatego na czas otwarcia drawera
   podnosimy CALY header + topbar i dodatkowo zbijamy doczepiane menu.
   Wartosci < 200, zeby nie przykryc .carttoast (200) ani .modal (100)
   przy zamknietym menu — reguly dzialaja tylko z klasa html.nav-open.
   ============================================================ */
@media (max-width: 1040px) {
  html.nav-open .topbar { z-index: 141 !important; }
  html.nav-open header.nav { z-index: 140 !important; }
  html.nav-open nav.main { z-index: 5 !important; }

  /* doczepiane menu linii/zastosowan schodzi pod drawer */
  html.nav-open .category-jump,
  html.nav-open .application-jump,
  html.nav-open .c8-sticky-cta,
  html.nav-open .pdp-sticky { z-index: 1 !important; }

  /* drawer domyka sie dokladnie pod naglowkiem (topbar 34 + nav 86) */
  html.nav-open nav.main {
    top: 120px !important;
    max-height: calc(100dvh - 120px) !important;
    overscroll-behavior: contain;
  }

  /* przyciemnienie tresci pod drawerem — czytelniejsze menu, glebia.
     pointer-events:none => nie zmienia zachowania klikniec. */
  html.nav-open body::after {
    content: "";
    position: fixed;
    inset: 120px 0 0;
    z-index: 60;
    background: rgba(9, 13, 44, .46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: none;
    animation: navScrimIn .3s ease both;
  }
}

/* ============================================================
   2026-07-27 fix9 / FAZA C2 — TOPBAR: jednolita typografia na KAZDEJ
   stronie. Przyczyna roznic: index.html (i pozostale strony "konceptowe")
   maja wlasny, wbudowany <style> z fontem 'Plus Jakarta Sans' oraz
   .topbar .lang a{font-size:12px}, a podstrony (kontakt, o-firmie, ...)
   ladują assets/styles.css, gdzie body ma font 'Inter', a .lang a nie ma
   font-size (dziedziczy 13.5px). Efekt: PL/EN/DE i mail mialy inny kroj
   ORAZ inna wielkosc. Ustalamy jeden wzorzec (wersja ze strony glownej)
   w pliku ladowanym jako OSTATNI.
   ============================================================ */
.topbar,
.topbar .wrap,
.topbar .l,
.topbar .r,
.topbar .lang,
.topbar .topic-ticker {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}
.topbar .r {
  display: flex;
  align-items: center;
  gap: 22px;
}
.topbar .r > a {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: .9;
}
.topbar .r > a:hover,
.topbar .r > a:focus-visible { opacity: 1; }
.topbar .lang {
  display: flex;
  align-items: center;
  gap: 3px;
}
.topbar .lang a {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  padding: 1px 7px;
  border-radius: 5px;
  opacity: .85;
}
.topbar .lang a:hover,
.topbar .lang a:focus-visible { opacity: 1; }
.topbar .lang a.on {
  background: #fff;
  color: var(--navy, #17156d);
  font-weight: 700;
  opacity: 1;
}
/* mobile: zachowujemy dotychczasowe zmniejszenie z assets/styles.css */
@media (max-width: 600px) {
  .topbar .r { gap: 12px; }
  .topbar .r > a { font-size: 12px; }
  .topbar .lang a { font-size: 11.5px; padding: 1px 6px; }
}

/* ============================================================
   2026-07-27 ZADANIA/STRONA — i18n reflow (bezpieczne fixy).
   Dlugie zlozenia niemieckie (Nahrungsergaenzung, Proteinanreicherung,
   Tiergesundheit...) nie moga wychodzic poza karty/naglowki.
   overflow-wrap:break-word = twardy fallback, hyphens:auto = ladny
   podzial gdy html[lang] to obsluguje. NIE ruszamy szerokosci (--maxw).
   ============================================================ */
.c8-applications .use h4,
.c8-applications .use p,
#zastosowania .use h4,
#zastosowania .use p,
.c8-app-menu-card__copy > b,
.c8-app-menu-card__copy > small,
.hero-split h1,
.hero-split .lead,
.help-hero h1,
.apphero2__title,
.category-page .lsplit__h1,
.phero h1 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Rowne wysokosci kart w gridach zastosowan (grid stretch-uje domyslnie,
   ustawiamy jawnie + rowny floor, zeby karty nie byly nierowne/stubby). */
.c8-applications .uses-grid,
#zastosowania .uses-grid { align-items: stretch; }
.c8-applications .use,
#zastosowania .use { height: 100%; }

/* 2026-07-27 scrim megamenu MOCNIEJSZY - czytelnosc bialego tekstu na jasnych zdjeciach (Sport/Wlosy/Zywnosc) */
.mega-app.c8-app-menu .c8-app-menu-card::after{background:linear-gradient(180deg,rgba(8,7,35,0) 0%,rgba(8,7,35,0) 24%,rgba(8,7,35,.52) 46%,rgba(8,7,35,.86) 74%,rgba(8,7,35,.96) 100%) !important}
.mega-app.c8-app-menu .c8-app-menu-card__copy>b{text-shadow:0 1px 10px rgba(0,0,0,.6) !important}
.mega-app.c8-app-menu .c8-app-menu-card__copy>small{color:rgba(255,255,255,.92) !important}

/* 2026-07-27 fix4: TYTUL HERO nie moze lamac slow w srodku.
   i18n reflow (e974962) dodal overflow-wrap:break-word na .hero-split h1 itp.,
   przez co dlugie tokeny (np. "dla&nbsp;producentow" spiete nbsp) lamaly sie
   po srodku slowa ("producento" / "w"). Tytul hero zawija sie WYLACZNIE na
   granicach slow — zero lamania w srodku. Karty zastosowan zachowuja break-word. */
body:has(.hero-split) .hero-split .panel h1,
.hero-split h1,
.help-hero h1,
.apphero2__title,
.category-page .lsplit__h1,
.phero h1 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* 2026-07-27 mobile hero: caly hero (pasmo zdjec + kafel info) na 1 ekranie bez scrolla (100dvh) */
@media (max-width:600px){
  body:has(.hero-split) .hero-split{height:100dvh !important;min-height:100dvh !important;max-height:100dvh !important;overflow:hidden !important}
  body:has(.hero-split) .hero-split .hs-grid{height:100% !important}
  body:has(.hero-split) .hero-split .photo{height:39dvh !important;min-height:200px !important;max-height:360px !important;flex:0 0 auto !important}
  body:has(.hero-split) .hero-split .panel{flex:1 1 auto !important;min-height:0 !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;overflow:hidden !important;padding:12px 0 0 !important}
  body:has(.hero-split) .hero-split .panel-inner{height:auto !important;min-height:0 !important;padding:0 20px !important}
  body:has(.hero-split) .hero-split .panel h1{font-size:clamp(23px,6.6vw,31px) !important;line-height:1.12 !important;margin-bottom:8px !important}
  body:has(.hero-split) .hero-split .panel .lead{font-size:13.5px !important;line-height:1.42 !important;margin-bottom:9px !important}
  body:has(.hero-split) .hero-split .c8-hero-specialties{margin:0 0 11px !important;gap:4px !important}
  body:has(.hero-split) .hero-split .cta .btn{width:100% !important}
}

/* ============================================================
   2026-07-27 fix7 — MEGAMENU "Zastosowania": SCRIM + CIENIE kafli.

   ROOT CAUSE scrimu (user: "ten cien od dolu kafelka ktory ma przyciemnic dol
   gdzie sa napisy WCIAZ NIE ISTNIEJE"): kafel .c8-app-menu-card jest znacznikiem
   <a> lezacym wewnatrz .mega, a mega-fix-highlight-v1 w index.html ubija winna
   kreske nawigacji regula
       nav.main :is(.mega,.drop,.flyout) a::after { content: none }
   Ta regula (0,2,3) zabija content CALEGO pseudoelementu ::after w kazdym <a>
   w megamenu — a wlasnie na ::after siedzi scrim kafla. Wczesniejsze proby
   "wzmocnienia scrimu" podbijaly tylko background (linia 3006), wiec nie mialy
   szansy zadzialac: pseudoelement W OGOLE nie byl generowany
   (getComputedStyle(card,'::after').content === 'none').
   FIX: jawnie przywracamy content oraz geometrie (odziedziczone bottom:-3px po
   kresce nav) i kladziemy scrim NAD zdjeciem (z-index:1 zamiast -1 — nie zalezy
   juz od isolation/ujemnego z-index), a tresc kafla podnosimy na z-index:2. */
.mega-app.c8-app-menu .c8-app-menu-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit;
  background: linear-gradient(180deg,
      rgba(8, 7, 35, 0) 0%,
      rgba(8, 7, 35, 0) 28%,
      rgba(8, 7, 35, .55) 52%,
      rgba(8, 7, 35, .88) 100%) !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  transform: none !important;
}
.mega-app.c8-app-menu .c8-app-menu-card__copy,
.mega-app.c8-app-menu .c8-app-menu-card__cta,
.mega-app.c8-app-menu .c8-app-menu-card__links {
  position: relative;
  z-index: 2;
}

/* CIENIE (user: "kiedy dodasz do tego megamenu te cienie?") — kafle czytaly sie
   plasko, bo spoczynkowy cien mial raptem 10% alfy. Dwuwarstwowy cien (szeroki
   + kontaktowy) daje glebie zblizona do kafli hero; hover unosi kafel mocniej. */
.mega-app.c8-app-menu .c8-app-menu-card {
  box-shadow:
    0 12px 30px rgba(12, 16, 50, .28),
    0 3px 9px rgba(12, 16, 50, .18);
}
.mega-app.c8-app-menu .c8-app-menu-card:hover,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible {
  box-shadow:
    0 22px 46px rgba(12, 16, 50, .38),
    0 6px 14px rgba(12, 16, 50, .24);
}
/* caly panel megamenu tez mocniej odklejony od strony */
nav.main .mega.mega-app.c8-app-menu {
  box-shadow:
    0 32px 80px rgba(20, 18, 70, .26),
    0 10px 26px rgba(20, 18, 70, .14);
}

/* ============================================================
   2026-07-27 fix8 / FAZA B1 — MOBILE: strony ZASTOSOWAN, pierwszy ekran.
   Wzor (zdjecie od usera): [zdjecie hero] -> [kafel z tytulem/opisem/CTA,
   delikatnie nachodzacy na zdjecie] -> [delikatny gradient pod zdjeciem
   i za kaflem] -> [doczepiane menu .application-jump MAKSYMALNIE na dole
   pierwszego ekranu, bez bialej luki].

   Naglowek (topbar 34px + header.nav 86px) = 120px, .application-jump = 62px,
   wiec hero dostaje dokladnie calc(100dvh - 182px). Zdjecie jest flex:1
   (dobiera cala reszte), kafel flex:0 0 auto — dzieki temu NIGDY nie ma
   bialej luki, niezaleznie od dlugosci tekstu na danej stronie.

   Ujednolica OBIE konwencje nazw uzywane na 6 stronach:
   BEM  (.apphero2__photo/__img/__wrap/__card) — stawy, uroda, zywnosc
   flat (.apphero2-bg/-wrap/-card)             — sport, pet-food, rolnictwo
   ============================================================ */
@media (max-width: 700px) {
  body.application-page .apphero2 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: max(430px, calc(100dvh - 120px - 66px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    isolation: isolate;
    background-color: #f3f8fb !important;
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--app-accent, #00a9cf) 15%, #ffffff) 0%,
        color-mix(in srgb, var(--app-accent, #00a9cf) 8%, #fbfdfe) 44%,
        color-mix(in srgb, var(--app-accent, #00a9cf) 3%, #ffffff) 100%) !important;
  }

  /* zdjecie: pasmo u gory, dobiera cala wolna przestrzen */
  body.application-page .apphero2 > .apphero2__photo,
  body.application-page .apphero2 > .apphero2__img,
  body.application-page .apphero2 > .apphero2-bg {
    position: relative !important;
    inset: auto !important;
    order: 0 !important;
    flex: 1 1 0% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 128px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
    z-index: 0 !important;
  }

  /* scrim desktopowy (rozjasnienie lewej strony) nie ma sensu w ukladzie stack */
  body.application-page .apphero2__scrim,
  body.application-page .apphero2-scrim { display: none !important; }

  /* gutter kafla — ujemny margines = delikatne nachodzenie na zdjecie */
  body.application-page .apphero2__wrap,
  body.application-page .apphero2-wrap,
  body.application-page .apphero2 .apphero2-wrap {
    order: 1 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: -26px 0 0 !important;
    padding: 0 13px 15px !important;
    display: block !important;
  }

  /* kafel tekstowy (pasek akcentu robi background-image z bloku wyzej — NIE
     nadpisujemy `background`, tylko `background-color`) */
  body.application-page .apphero2__card,
  body.application-page .apphero2-card,
  body.application-page .apphero2 .apphero2-card {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 19px 20px 21px !important;
    border-radius: 18px !important;
    border: 0 !important;
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow:
      0 20px 44px -18px rgba(14, 22, 70, .38),
      0 3px 12px rgba(14, 22, 70, .09) !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* zwarta typografia — kafel + CTA MUSZA zmiescic sie na 1 ekranie */
  body.application-page .apphero2__eyebrow,
  body.application-page .apphero2-eyebrow { display: none !important; }
  body.application-page .apphero2__title,
  body.application-page .apphero2 h1,
  body.application-page .apphero2 h2 {
    margin: 0 0 9px !important;
    font-size: clamp(21px, 5.9vw, 27px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }
  body.application-page .apphero2__intro,
  body.application-page .apphero2-intro {
    margin: 0 0 15px !important;
    max-width: none !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }
  body.application-page .apphero2__cta,
  body.application-page .apphero2-cta {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
  }
  body.application-page .apphero2 .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  /* doczepiane menu startuje DOKLADNIE na dole pierwszego ekranu */
  body.application-page .application-jump {
    margin-top: 0 !important;
    min-height: 62px !important;
  }
  body.application-page .application-jump .wrap {
    min-height: 62px !important;
    padding-left: clamp(14px, 4vw, 22px) !important;
    padding-right: clamp(14px, 4vw, 22px) !important;
  }
}

/* ============================================================
   2026-07-27 fix8 / FAZA B2 — MOBILE hero strony glownej.
   Bylo: .hero-split height:100dvh, ale hero zaczyna sie 120px ponizej
   gory dokumentu (topbar 34 + header.nav 86) => CTA "Zobacz rodziny
   produktow" wypadalo POD pierwszym ekranem. Teraz hero = dokladnie
   calc(100dvh - 120px), .photo jest flex:1 (dobiera reszte), a .panel
   flex:0 0 auto — CTA zawsze widoczne. Domykamy tez biala mini-luke
   miedzy pasmem slajdow a kaflem tekstu (padding 0 + gradient startowy).
   ============================================================ */
@media (max-width: 600px) {
  body:has(.hero-split) .hero-split {
    height: max(470px, calc(100dvh - 120px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body:has(.hero-split) .hero-split .hs-grid {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body:has(.hero-split) .hero-split .photo {
    flex: 1 1 0% !important;
    height: auto !important;
    min-height: 130px !important;
    max-height: none !important;
  }
  body:has(.hero-split) .hero-split .panel {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    background: linear-gradient(180deg, #e9f4f9 0%, #f7fbfd 26%, #ffffff 62%) !important;
  }
  body:has(.hero-split) .hero-split .panel-inner {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 20px 0 !important;
  }
  body:has(.hero-split) .hero-split .panel h1 {
    font-size: clamp(22px, 6.3vw, 30px) !important;
    line-height: 1.12 !important;
    margin: 0 0 7px !important;
  }
  body:has(.hero-split) .hero-split .panel .lead {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin: 0 0 9px !important;
  }
  body:has(.hero-split) .hero-split .c8-hero-specialties { margin: 0 0 10px !important; gap: 4px !important; }
  body:has(.hero-split) .hero-split .cta { margin: 0 !important; }
  body:has(.hero-split) .hero-split .cta .btn { width: 100% !important; justify-content: center !important; }
}

/* --- fix8 / B1 c.d.: rolnictwo-biotechnologia ma wlasny, rozbudowany hero
   desktopowy (.c8-agbio-hero: copy + 2 kafle Agro/Bio). Na telefonie
   podmieniamy go na TEN SAM uklad co pozostale 5 stron zastosowan
   (zdjecie + kafel + doczepiane menu), zeby wszystkie 6 wygladalo tak samo. */
.apphero2--mobile-only { display: none !important; }
@media (max-width: 700px) {
  body.application-page--agbio .apphero2--mobile-only { display: flex !important; }
  body.application-page--agbio .c8-agbio-hero { display: none !important; }
  body.application-page--agbio .apphero2--mobile-only .apphero2__title {
    color: var(--c8-navy, #17156d) !important;
    font-weight: 800 !important;
  }
}

/* ============================================================
   2026-07-27 fix10 — TABLET (~960-1180px) + SYSTEMOWE OBCINANIE TEKSTU
   ------------------------------------------------------------
   ZADANIE 1 (tablet 10,5" / CSS ~960-1280px)
   ZADANIE 2 (za duzo tekstu = kafel ROSNIE, nie ucina)
   ============================================================ */

/* ---------- 1a. MEGAMENU: szerokosc panelu ----------
   Bylo: @media(max-width:1100px){.mega{width:min(780px,100vw-40px)}} — panel
   zwezal sie do 780px, ale siatka .mega-cols byla nadal WYMUSZONA na 6 rownych
   kolumn (regula bez @media, wyzsza specyficznosc), czyli 108px na kolumne.
   Nazwy linii (TuriColl(TM), TuriKer(R)...) sa nielamliwe i wychodzily na
   sasiednie kolumny — to jest zglaszane "megamenu pokazuje sie za duzo".
   Teraz panel ma jedna, plynna szerokosc na kazdym ekranie. */
nav.main .mega {
  width: min(1360px, calc(100vw - 32px));
}
/* Panel nigdy nie jest wyzszy niz ekran (topbar 34 + nav 85 = 119px).
   Na desktopie 1440/1920 panel ma ~585px, wiec limit nie dziala. */
nav.main .mega:not(.mega-about) {
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- 1b. MEGAMENU Produkty: plynna liczba kolumn ----------
   auto-fit zamiast repeat(6): 6 kolumn dopoki naprawde sie mieszcza
   (>=~1215px, wiec desktop 1440/1920 bez zmian), nizej 5, a przy ~1041px 4.
   min() pilnuje, zeby pojedyncza kolumna nigdy nie byla szersza niz panel. */
.mega:not(.mega-app):not(.mega-about) .mega-cols {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 182px), 1fr));
  gap: 14px;
  align-items: stretch;
}
/* Gdy szesc kolumn przestaje sie miescic (ponizej ~1274px), zamiast
   rozjezdzajacego sie 5+1 pokazujemy rowne 3 + 3. Nadal auto-fit, wiec
   jeszcze wezszy kontener sam zejdzie do 2 i 1 kolumny. */
@media (max-width: 1273px) {
  .mega:not(.mega-app):not(.mega-about) .mega-cols {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
}

/* Wnetrze kolumny skaluje sie plynnie z szerokoscia okna. Gorne wartosci
   clamp() sa osiagane juz przy ~1430px, wiec 1440/1920 wyglada identycznie.
   Selektor musi powtarzac :not(...) — inaczej przegrywa ze styles.css. */
.mega:not(.mega-app):not(.mega-about) .mhead { gap: clamp(7px, .7vw, 10px); }
.mega:not(.mega-app):not(.mega-about) .mthumb {
  width: clamp(44px, 3.77vw, 54px);
  height: clamp(44px, 3.77vw, 54px);
}
.mega:not(.mega-app):not(.mega-about) .mtt b { font-size: clamp(15px, 1.33vw, 19px); }
.mega:not(.mega-app):not(.mega-about) .msub { font-size: clamp(12px, .95vw, 13.5px); }

/* ---------- 1c. MEGAMENU: tekst ma sie ZAWIJAC ----------
   nav.main a{white-space:nowrap} (0,1,2) bilo .mega a{white-space:normal}
   (0,1,1), wiec KAZDY link w megamenu byl jednolinijkowy. Kafle Zastosowan
   (.c8-app-menu-card to <a> z overflow:hidden) ucinaly przez to opis
   — takze na desktopie 1440. */
nav.main :is(.mega, .drop, .flyout) a,
nav.main :is(.mega, .drop, .flyout) a * {
  white-space: normal;
}

/* ---------- 1d. MEGAMENU Zastosowania: kafel rosnie z trescia ---------- */
.mega-app.c8-app-menu .c8-app-menu-card__copy > small {
  min-height: 48px;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Kafel = kolumna: opis na pelnej szerokosci, CTA w osobnym wierszu po prawej.
   Wczesniej kafel byl flexem POZIOMYM, co przy jednolinijkowym (nowrap) opisie
   udawalo uklad pionowy; po wlaczeniu zawijania opis i CTA zaczely walczyc
   o te sama linie. */
.mega-app.c8-app-menu .c8-app-menu-card {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}
.mega-app.c8-app-menu .c8-app-menu-card__cta {
  justify-content: flex-end;
  white-space: nowrap;
}

/* ---------- 2. SYSTEMOWE: karta ROSNIE z trescia ----------
   Wszedzie tam, gdzie kafel mial sztywna wysokosc albo twardy limit
   szerokosci tekstu, zamieniamy to na minimum. Gdy tresc miesci sie
   w dotychczasowej wysokosci — wyglad jest bit-w-bit ten sam. */
#rodziny .fam,
#rodziny .ksplit .kp,
.c8-applications .use,
#zastosowania .use,
.category-products .pcard,
.pgrid .pcard,
.about-c8 .about-op,
.help-route {
  height: auto;
}
/* wyjatek: rowne wysokosci w rzedzie zalatwia grid stretch, nie height */
.c8-applications .use,
#zastosowania .use { align-self: stretch; }

/* Dlugie zlozenia (DE) lamia sie wewnatrz kafla zamiast go rozpychac. */
#rodziny .fam .one,
#rodziny .fam .chips span,
#rodziny .ksplit .kp-desc,
#rodziny .ksplit .kp-chips span,
.c8-evidence__item b,
.c8-evidence__item span,
.c8-about-menu__copy b,
.c8-about-menu__copy small,
.mcol .mprod small,
.mcol .msub {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Nazwy handlowe: tylko awaryjne lamanie, BEZ dzielenia na sylaby
   (nie chcemy "Turi-Coll(TM)"). */
.mcol .mtt b,
.mcol .mprod b,
#rodziny .ksplit .kp-name {
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ---------- 3. PASEK NAWIGACJI tuz nad progiem burgera (1041-1150px) ----------
   Przy 1041-1084px logo + 6 pozycji menu + CTA mialy razem 1082px, wiec strona
   dostawala ~41px poziomego scrolla. Interpolacja calc() domyka odstepy i
   czcionke dokladnie w tym zakresie; od 1150px w gore wartosci sa te same,
   co dotad (font 15px, gap 14px, padding 18px). */
@media (min-width: 1041px) and (max-width: 1150px) {
  header.nav nav.main > a,
  header.nav nav.main > .hasmega > a,
  header.nav nav.main > .hasdrop > a {
    font-size: clamp(13.5px, calc(13.5px + (100vw - 1041px) * .01376), 15px) !important;
  }
  header.nav nav.main {
    gap: clamp(8px, calc(8px + (100vw - 1041px) * .055), 14px) !important;
  }
  header.nav nav.main > a {
    padding-right: clamp(5px, calc(5px + (100vw - 1041px) * .1193), 18px);
  }
}

/* ---------- 4. DLUGIE NAGLOWKI (DE) NIE WYCHODZA POZA SWOJA KOLUMNE ----------
   Na /de/kolageny.html naglowek "Kollagen fuer Nahrungsergaenzungsmittel,
   Lebensmittel und Kosmetik" (clamp(38px,4vw,55px)) mial slowo szersze niz
   kolumna i wjezdzal na kafle po prawej — takze na 1440px.
   overflow-wrap:break-word dziala WYLACZNIE wtedy, gdy slowo naprawde sie nie
   miesci, wiec dla krotszych jezykow (PL/EN) nic sie nie zmienia. */
.category-story h2,
.category-story__copy h2,
.category-story__copy .intro,
.category-benefits h2,
.category-products h2,
.application-products__head h2,
.application-products__head p,
.c8-agbio-hero h1,
.c8-evidence h2,
.about-c8 .about-hero h1,
.help-c8 h2,
.section > .wrap > h2,
.kteam h2 {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- 5. PASEK CERTYFIKATOW: podpis nie wchodzi na sasiedni kafelek ----
   4 stale kolumny x (logo 82px + gap 9 + podpis) nie mieszcza sie przy ~960px.
   Logo i odstepy skaluja sie plynnie; przy 1440px wartosci sa te same. */
.c8-cert-row a {
  min-width: 0;
  padding: 9px clamp(6px, .95vw, 14px);
  gap: clamp(5px, .62vw, 9px);
}
.c8-cert-row img { max-width: min(82px, 58%); }

/* ---------- 6. PODSTRONY: burger juz od 1040px, tak jak na stronie glownej ----
   assets/styles.css chowalo nav.main dopiero ponizej 981px, ale drawer
   (html.nav-open ...) jest zdefiniowany dla <=1040px. Skutek: na PODSTRONACH
   przy 981-1040px pokazywalo sie pelne menu desktopowe + wyszukiwarka, przez co
   pasek mial 1268px zamiast 1024px i cala strona dostawala poziomy scroll.
   index.html mial to juz poprawione inline (@media(max-width:1040px)),
   tu domykamy to samo dla wszystkich podstron. */
@media (max-width: 1040px) {
  html:not(.nav-open) header.nav nav.main { display: none; }
  header.nav .burger { display: flex; }
  header.nav .navsearch,
  header.nav .nav-cta .as { display: none; }
}

/* ---------- 7. DRAWER MOBILNY NIE MOZE BYC PRZYCIETY DO 85px ----------
   concept8.css @media(min-width:821px) przybija cala belke naglowka
   (w tym nav.main) do height/max-height:85px !important. Gdy przy 821-1040px
   uzytkownik otwiera burgera, nav.main jest juz drawerem (position:fixed),
   ale ten sam !important obcinal go do 85px + overflow-y:auto — widac bylo
   TYLKO wyszukiwarke, bez ani jednej pozycji menu.
   Tu zdejmujemy limit wylacznie dla OTWARTEGO drawera. */
@media (max-width: 1040px) {
  html.nav-open body > header.nav nav.main,
  html.nav-open header.nav nav.main {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 120px) !important;
  }
}
/* w drawerze nie chcemy desktopowej kreski pod pozycja menu (nav.main a::after) */
@media (max-width: 1040px) {
  html.nav-open header.nav nav.main a::after { content: none !important; }
}
/* ...oraz desktopowego uklad flex pozycji z megamenu (@media min-width:981px):
   w drawerze kazda pozycja jest pelnowymiarowym wierszem. */
@media (min-width: 981px) and (max-width: 1040px) {
  html.nav-open header.nav nav.main > .hasmega,
  html.nav-open header.nav nav.main > .hasdrop {
    display: block;
    align-self: auto;
  }
  html.nav-open header.nav nav.main > .hasmega > a,
  html.nav-open header.nav nav.main > .hasdrop > a {
    display: block;
    min-height: 0;
  }
}

/* ---------- 8. KAFLE ZASTOSOWAN: luka 1121-1180px ----------
   index.html mial @media(max-width:1120px){#zastosowania .uses-grid{repeat(3,1fr)}},
   wiec przy 1121-1180px szescioelementowa siatka zostawala na 6 kolumnach po
   ~175px — tytul lamal sie na 3 linie, a CTA na 2. Przesuwamy prog do 1180px,
   czyli tam, gdzie caly tablet ma juz uklad 3-kolumnowy (#rodziny, megamenu).
   Desktop >=1181px bez zmian. */
@media (min-width: 901px) and (max-width: 1180px) {
  #zastosowania .uses-grid,
  .c8-applications .uses-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   2026-07-27 fix11 / ZADANIE 1 — MEGAMENU "ZASTOSOWANIA": kafle.

   (a) ROOT CAUSE jasnego rantu na krawedziach zdjec (widoczny w
   powiekszeniu 6x): .c8-app-menu-card mial
       border: 1px solid rgba(255,255,255,.22)
   a scrim kafla (::after, position:absolute; inset:0) rozpina sie na
   PADDING BOX — czyli NIE obejmuje pasa ramki. Do tego background-clip
   ma domyslnie wartosc border-box, wiec zdjecie bylo malowane takze POD
   polprzezroczysta ramka i przebijalo przez nia surowe, nieprzyciemnione
   piksele. Efekt: rozmyty jasny/zielonkawy pasek 1px dookola kazdego
   kafla. Pomiar przed fixem (MM_before.png, dsf=2): przy lewej krawedzi
   kafla "Stawy" x=86..87 mialo (116,127,89), a wnetrze x>=88 juz
   (25,28,36) — dokladnie 1 CSS px surowego zdjecia.
   FIX: ramka znika calkowicie + background-clip:padding-box jako pas
   bezpieczenstwa. Zdjecie dochodzi czysto do zaokraglonej krawedzi.

   (b) KOMPOZYCJA (user: "napisy sa takie za proste", "wyglada fatalnie").
   Jeden spojny wariant, ta sama logika co reszta serwisu:
     - warstwa zdjecia wrocila na ::before (background-image:inherit
       dziedziczy inline'owy url z atrybutu style) — dzieki temu zdjecie
       moze delikatnie najechac (scale) niezaleznie od tresci,
     - glebszy scrim z akcentem marki (granat + cyan) zamiast czystej
       czerni,
     - cienka linia-akcent cyan->turkus nad tytulem, rozciagajaca sie na
       hover,
     - mocniejsza hierarchia: tytul 18px/850, opis stonowany 12.2px,
     - CTA jako pigulka (glass) ze strzalka przesuwajaca sie na hover,
     - hover: uniesienie kafla + zoom zdjecia + wypelnienie pigulki.
   ============================================================ */

/* --- (a) krawedzie + bryla kafla --- */
.mega-app.c8-app-menu .c8-app-menu-card {
  /* kolor kategorii (nadpisywany per kafel nizej) */
  --amc-a: #00aed9;
  --amc-b: #38d4f1;
  --amc-glow: rgba(56, 212, 241, .55);
  --amc-scrim: rgba(0, 120, 160, .34);
  border: 0 !important;
  outline: 0;
  background-clip: padding-box !important;
  background-color: #0b0e2c !important;
  border-radius: 16px !important;
  padding: 22px 20px 20px !important;
  min-height: 258px;
  overflow: hidden !important;
  isolation: isolate;
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1);
}

/* --- warstwa zdjecia (wraca ::before, bo 2026-07-27 fix wylaczyl ja przez
       display:none; background-image:inherit bierze url z inline style) --- */
.mega-app.c8-app-menu .c8-app-menu-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: inherit;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  transform: scale(1.002);
  transform-origin: 50% 45%;
  transition: transform .68s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  border-radius: inherit;
}

/* --- scrim: glebszy, z kolorem marki zamiast czystej czerni --- */
.mega-app.c8-app-menu .c8-app-menu-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(7, 8, 34, 0) 0%,
      rgba(7, 8, 34, 0) 24%,
      rgba(10, 11, 48, .40) 46%,
      rgba(9, 10, 46, .80) 70%,
      rgba(5, 6, 28, .955) 100%),
    radial-gradient(118% 78% at 4% 104%, rgba(23, 21, 109, .60) 0%, rgba(23, 21, 109, 0) 60%),
    radial-gradient(96% 68% at 100% 104%, var(--amc-scrim) 0%, rgba(0, 92, 128, 0) 64%),
    linear-gradient(165deg, rgba(9, 10, 44, .16) 0%, rgba(9, 10, 44, 0) 38%) !important;
}

/* --- kolor kategorii: linia-akcent + poswiata + ciepla/zimna nuta scrimu.
       Uklad 3x2 — kolumny 1 i 2 trzymaja rodzine (cyan / indygo), kolumna 3
       robi kontrast (wino / zielen). Zaden wiersz nie powtarza koloru. --- */
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(1) {
  --amc-a: #00aed9; --amc-b: #38d4f1;
  --amc-glow: rgba(56, 212, 241, .55); --amc-scrim: rgba(0, 120, 160, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(2) {
  --amc-a: #4b48e8; --amc-b: #9b98ff;
  --amc-glow: rgba(140, 137, 255, .50); --amc-scrim: rgba(48, 45, 170, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(3) {
  --amc-a: #c02f60; --amc-b: #f78bab;
  --amc-glow: rgba(240, 124, 160, .50); --amc-scrim: rgba(122, 31, 61, .46);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(4) {
  --amc-a: #0fa3c6; --amc-b: #7fe4f8;
  --amc-glow: rgba(127, 228, 248, .50); --amc-scrim: rgba(0, 108, 148, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(5) {
  --amc-a: #6462f0; --amc-b: #b0aeff;
  --amc-glow: rgba(160, 158, 255, .50); --amc-scrim: rgba(56, 53, 168, .40);
}
.mega-app.c8-app-menu .c8-app-menu-card:nth-child(6) {
  --amc-a: #1e8a55; --amc-b: #63dc9e;
  --amc-glow: rgba(99, 220, 158, .48); --amc-scrim: rgba(28, 107, 67, .46);
}

/* --- tresc: hierarchia + linia-akcent --- */
.mega-app.c8-app-menu .c8-app-menu-card__copy,
.mega-app.c8-app-menu .c8-app-menu-card__cta {
  position: relative;
  z-index: 2;
}
.mega-app.c8-app-menu .c8-app-menu-card__copy::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 0 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amc-a) 0%, var(--amc-b) 100%);
  box-shadow: 0 0 16px var(--amc-glow);
  transition:
    width .46s cubic-bezier(.22, 1, .36, 1),
    box-shadow .46s ease;
}
.mega-app.c8-app-menu .c8-app-menu-card__copy > b {
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.16 !important;
  letter-spacing: -.012em;
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(3, 5, 24, .82) !important;
}
/* min-height = 2 wiersze (12.2 x 1.5) — wyrownuje linie-akcent i tytuly
   w calym rzedzie, takze gdy opis ma tylko jedna linijke (Pet food). */
.mega-app.c8-app-menu .c8-app-menu-card__copy > small {
  min-height: 37px !important;
  margin-top: 9px !important;
  font-size: 12.2px !important;
  line-height: 1.5 !important;
  color: rgba(228, 237, 252, .86) !important;
  text-shadow: 0 1px 12px rgba(3, 5, 24, .7);
}

/* --- CTA jako pigulka (glass) ze strzalka --- */
.mega-app.c8-app-menu .c8-app-menu-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  gap: 9px !important;
  margin-top: 15px !important;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(10, 14, 46, .40);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .085em;
  text-transform: uppercase;
  line-height: 1.1;
  transition:
    background .32s ease,
    border-color .32s ease,
    color .32s ease,
    box-shadow .32s ease;
}
.c8-am-arrow {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  transform: translateX(0);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

/* --- hover / focus: jeden spojny ruch --- */
.mega-app.c8-app-menu .c8-app-menu-card:hover,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 26px 52px rgba(10, 14, 48, .42),
    0 7px 16px rgba(10, 14, 48, .26);
}
.mega-app.c8-app-menu .c8-app-menu-card:hover::before,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible::before { transform: scale(1.075); }
.mega-app.c8-app-menu .c8-app-menu-card:hover .c8-app-menu-card__copy::before,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible .c8-app-menu-card__copy::before {
  width: 74px;
  box-shadow: 0 0 24px var(--amc-glow);
}
/* pigulka wypelnia sie na bialo (czytelne przy KAZDYM kolorze kategorii),
   a poswiate pod nia bierze juz z koloru kafla */
.mega-app.c8-app-menu .c8-app-menu-card:hover .c8-app-menu-card__cta,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible .c8-app-menu-card__cta {
  background: #fff;
  border-color: #fff;
  color: #0d1240 !important;
  box-shadow: 0 12px 26px rgba(4, 8, 34, .42), 0 0 0 4px var(--amc-glow);
}
.mega-app.c8-app-menu .c8-app-menu-card:hover .c8-am-arrow,
.mega-app.c8-app-menu .c8-app-menu-card:focus-visible .c8-am-arrow { transform: translateX(5px); }

.mega-app.c8-app-menu .c8-app-menu__grid { gap: 14px !important; }

/* --- tablet / waskie okna: te same proporcje, mniejsza skala --- */
@media (max-width: 1180px) {
  .mega-app.c8-app-menu .c8-app-menu-card {
    min-height: 208px;
    padding: 16px 14px 15px !important;
    border-radius: 14px !important;
  }
  .mega-app.c8-app-menu .c8-app-menu-card__copy::before { width: 34px; margin-bottom: 11px; }
  .mega-app.c8-app-menu .c8-app-menu-card__copy > b { font-size: 16px !important; }
  .mega-app.c8-app-menu .c8-app-menu-card__copy > small {
    font-size: 11.6px !important;
    margin-top: 7px !important;
    min-height: 35px !important;
  }
  .mega-app.c8-app-menu .c8-app-menu-card__cta {
    margin-top: 12px !important;
    padding: 7px 11px;
    gap: 7px !important;
    font-size: 9.6px !important;
    letter-spacing: .06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-app.c8-app-menu .c8-app-menu-card,
  .mega-app.c8-app-menu .c8-app-menu-card::before,
  .mega-app.c8-app-menu .c8-app-menu-card__copy::before,
  .mega-app.c8-app-menu .c8-app-menu-card__cta,
  .c8-am-arrow { transition: none !important; }
  .mega-app.c8-app-menu .c8-app-menu-card:hover { transform: none; }
  .mega-app.c8-app-menu .c8-app-menu-card:hover::before { transform: scale(1.002); }
}

/* ============================================================
   2026-07-27 fix11 / ZADANIE 2 — MENU MOBILNE (drawer z burgera).

   (2a) ANIMACJA. Jedno, spojne "aplikacyjne" wejscie:
        easing cubic-bezier(.22,1,.36,1) na WSZYSTKIM (panel, pozycje,
        scrim, burger), scrim wchodzi fade + blur, burger zamienia sie
        w X, pozycje wjezdzaja kaskadowo z prawej i lekko z gory,
        zamkniecie jest rownie plynne (klasa html.nav-closing dokladana
        przez assets/site-fixes.js).
   (2b) STOPKA DRAWERA. Dwa przyciski ("Pomoc w doborze" / "Kontakt")
        w osobnej sekcji na GRADIENCIE marki (granat -> cyan), pelna
        szerokosc drawera, position:sticky bottom:0 — zawsze widoczne,
        takze przy przewijaniu listy. Pozycja "Pomoc w doborze" z listy
        jest w drawerze ukryta, zeby nie dublowac przycisku.
   ============================================================ */

/* --- (2a) panel + pozycje: wspolny easing --- */
html.nav-open nav.main {
  animation: navDrawerIn .46s cubic-bezier(.22, 1, .36, 1) both;
  transform-origin: top right;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 30px 64px rgba(11, 15, 52, .32) !important;
}
html.nav-open nav.main > a,
html.nav-open nav.main > .hasdrop,
html.nav-open nav.main > .hasmega,
html.nav-open nav.main > .c8-help-link,
html.nav-open nav.main > .c8-drawer-cta,
html.nav-open nav.main > .as {
  animation: navDrawerItemIn .44s cubic-bezier(.22, 1, .36, 1) both;
}
html.nav-open nav.main > *:nth-child(1) { animation-delay: .05s; }
html.nav-open nav.main > *:nth-child(2) { animation-delay: .095s; }
html.nav-open nav.main > *:nth-child(3) { animation-delay: .14s; }
html.nav-open nav.main > *:nth-child(4) { animation-delay: .185s; }
html.nav-open nav.main > *:nth-child(5) { animation-delay: .23s; }
html.nav-open nav.main > *:nth-child(6) { animation-delay: .275s; }
html.nav-open nav.main > *:nth-child(7) { animation-delay: .32s; }
html.nav-open nav.main > *:nth-child(8) { animation-delay: .365s; }
html.nav-open nav.main > .c8-drawer-cta { animation-delay: .30s !important; }

@keyframes navDrawerIn {
  from { opacity: 0; transform: translate3d(30px, -10px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes navDrawerItemIn {
  from { opacity: 0; transform: translate3d(22px, 6px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes navDrawerOut {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(24px, -8px, 0) scale(.985); }
}
@keyframes navScrimOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- zamykanie (klasa dokladana przez site-fixes.js na czas animacji) --- */
html.nav-closing nav.main {
  animation: navDrawerOut .28s cubic-bezier(.4, 0, .2, 1) both !important;
  pointer-events: none !important;
}
html.nav-closing nav.main > * { animation: none !important; opacity: 1 !important; transform: none !important; }
html.nav-closing body::after { animation: navScrimOut .28s ease both !important; }
html.nav-closing .burger span { transition-duration: .26s !important; }

/* --- scrim: glebszy, z blurem i fade --- */
@media (max-width: 1040px) {
  html.nav-open body::after {
    background:
      radial-gradient(120% 86% at 50% 0%, rgba(23, 21, 109, .34) 0%, rgba(23, 21, 109, 0) 62%),
      rgba(6, 9, 34, .56) !important;
    -webkit-backdrop-filter: blur(4px) saturate(.92) !important;
    backdrop-filter: blur(4px) saturate(.92) !important;
  }
  /* :not(.nav-closing) — inaczej ta regula (pozniejsza w pliku) bilaby
     navScrimOut z sekcji "zamykanie" i scrim znikalby skokowo. */
  html.nav-open:not(.nav-closing) body::after {
    animation: navScrimIn .46s cubic-bezier(.22, 1, .36, 1) both !important;
  }
}

/* --- burger -> X --- */
header.nav .burger {
  align-items: center;
  justify-content: center;
}
header.nav .burger span {
  display: block;
  transform-origin: center;
  border-radius: 2px;
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease,
    background .3s ease;
}
html.nav-open header.nav .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open header.nav .burger span:nth-child(2) { opacity: 0; transform: scaleX(.25); }
html.nav-open header.nav .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html.nav-closing header.nav .burger span:nth-child(1),
html.nav-closing header.nav .burger span:nth-child(3) { transform: none; }
html.nav-closing header.nav .burger span:nth-child(2) { opacity: 1; transform: none; }

/* --- (2b) lista drawera: zwarta, z szewronem; stopka CTA na gradiencie --- */
.c8-drawer-cta { display: none; }

@media (max-width: 1040px) {
  html.nav-open nav.main {
    gap: 0 !important;
    /* margin-left:2px z ukladu desktopowego zostawial pasek scrimu przy
       lewej krawedzi wysunietego menu (widoczne na kolageny.html) */
    margin: 0 !important;
    padding: 6px 24px 0 !important;
  }
  /* "Pomoc w doborze" jest juz przyciskiem w stopce drawera — bez duplikatu */
  html.nav-open nav.main > .c8-help-link { display: none !important; }

  html.nav-open nav.main > a,
  html.nav-open nav.main > .hasdrop > a,
  html.nav-open nav.main > .hasmega > a {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 2px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -.005em;
    color: var(--navy, #17156d) !important;
    transition: color .2s ease, padding-left .28s cubic-bezier(.22, 1, .36, 1);
  }
  html.nav-open nav.main > a:active,
  html.nav-open nav.main > .hasdrop > a:active,
  html.nav-open nav.main > .hasmega > a:active { color: #0b7fa8 !important; padding-left: 6px !important; }

  /* szewron po prawej — sygnalizuje, ze wiersz prowadzi dalej */
  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;
    position: static !important;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border: 0 !important;
    border-top: 2px solid rgba(23, 21, 109, .34) !important;
    border-right: 2px solid rgba(23, 21, 109, .34) !important;
    background: none !important;
    transform: rotate(45deg) !important;
    opacity: 1 !important;
    transition: border-color .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
  }
  html.nav-open header.nav nav.main > a:active::after,
  html.nav-open header.nav nav.main > .hasdrop > a:active::after,
  html.nav-open header.nav nav.main > .hasmega > a:active::after {
    border-color: #00aed9 !important;
    transform: rotate(45deg) translateX(2px) !important;
  }

  /* stopka drawera: gradient marki + 2 przyciski */
  html.nav-open nav.main > .c8-drawer-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: auto -24px 0;
    padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0 0 18px 18px;
    background:
      radial-gradient(120% 165% at 4% 6%, rgba(56, 212, 241, .34) 0%, rgba(56, 212, 241, 0) 58%),
      linear-gradient(116deg, #17156d 0%, #1d2b96 42%, #0a7fb0 76%, #00aed9 100%);
    box-shadow: 0 -6px 16px rgba(9, 13, 44, .10);
  }
  html.nav-open nav.main > .c8-drawer-cta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  }
  html.nav-open nav.main > .c8-drawer-cta > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    padding: 12px 8px !important;
    border-bottom: 0 !important;
    border-radius: 12px;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.15;
    letter-spacing: .005em;
    text-align: center;
    white-space: normal;
    transition:
      transform .22s cubic-bezier(.22, 1, .36, 1),
      box-shadow .26s ease,
      background .26s ease;
  }
  html.nav-open header.nav nav.main > .c8-drawer-cta > a::after {
    content: "→" !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: none !important;
    transform: none !important;
    opacity: .9;
    font-weight: 700;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  }
  html.nav-open header.nav nav.main > .c8-drawer-cta > a:active::after { transform: translateX(3px) !important; }
  html.nav-open nav.main > .c8-drawer-cta > a:active { transform: translateY(1px); }
  html.nav-open nav.main .c8-drawer-cta__btn--primary {
    background: #fff;
    color: #17156d !important;
    box-shadow: 0 10px 22px rgba(4, 10, 40, .30);
  }
  /* ciemna, polprzezroczysta plomka — biale litery musza byc czytelne takze
     nad jasnym, cyanowym koncem gradientu */
  html.nav-open nav.main .c8-drawer-cta__btn--ghost {
    background: rgba(7, 14, 58, .34);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .58);
    box-shadow: 0 6px 16px rgba(4, 10, 40, .22);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  /* wyszukiwarka w drawerze: troche wiecej powietrza nad lista */
  html.nav-open nav.main .as--drawer { padding: 10px 0 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.nav-open nav.main,
  html.nav-open nav.main > *,
  html.nav-closing nav.main,
  html.nav-closing body::after { animation: none !important; }
  html.nav-open body::after { animation: none !important; }
  header.nav .burger span { transition: none !important; }
}

/* ---------- fix11 / 2c. DRAWER MUSI ZACZYNAC SIE POD NAGLOWKIEM ----------
   BUG (widoczny tylko na stronach "konceptowych", np. index.html, a na
   podstronach typu kolageny.html juz nie): miedzy paskiem naglowka a
   wysunietym drawerem byl 34-pikselowy pas przyciemnionej strony.
   Przyczyna: header.nav ma tam backdrop-filter: saturate(1.4) blur(10px),
   a element z backdrop-filter staje sie BLOKIEM ZAWIERAJACYM dla
   potomkow position:fixed. Drawer (nav.main, fixed, top:120px) liczyl
   wiec swoje 120px nie od gory okna, tylko od gory naglowka (y=34) —
   stad 34px przesuniecia. Na kolageny.html header nie ma backdrop-filter,
   wiec drawer siadal poprawnie. Zdejmujemy filtr wylacznie na czas
   otwartego menu (naglowek i tak jest wtedy w pelni bialy). */
@media (max-width: 1040px) {
  html.nav-open header.nav,
  html.nav-closing header.nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
  }
}

/* najwezsze telefony (<=360px): "Pomoc w doborze" ma zostac w jednej linii */
@media (max-width: 360px) {
  html.nav-open nav.main > .c8-drawer-cta { gap: 8px; padding-left: 16px; padding-right: 16px; }
  html.nav-open nav.main > .c8-drawer-cta > a {
    gap: 5px;
    padding: 12px 6px !important;
    font-size: 13px !important;
  }
}

/* stopka drawera na tabletach (600-1040px): przyciski nie rozjezdzaja sie
   na cala szerokosc, tylko trzymaja czytelna kolumne na srodku */
@media (min-width: 600px) and (max-width: 1040px) {
  html.nav-open nav.main > .c8-drawer-cta {
    padding-left: max(24px, calc((100% - 620px) / 2)) !important;
    padding-right: max(24px, calc((100% - 620px) / 2)) !important;
  }
}

/* ============================================================
   2026-07-28 fix12 / UWAGI HANDLOWCOW
   ============================================================ */

/* ---------- fix12 / pkt 2 — HERO: trzy kafle portfolio ----------
   WYCOFANE 2026-07-28 fix15. Kafle-bable (gradient + radius 14 + cien +
   pasek 4px + translateY na hover, nazwa 19px w komorce 137px) byly zrodlem
   uwagi "brzydkie i za bardzo AI" oraz lamania tekstu. Zastapione wariantem
   A "rejestr wierszowy" — blok na koncu pliku (szukaj: c8-hs--a). */

/* ---------- fix12 / pkt 3 — podpisy w rogu zdjec hero ----------
   .caption mial 12px i gubil sie na zdjeciu. */
body:has(.hero-split) .hero-split .caption,
.hero-split .caption {
  gap: 9px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  background: rgba(15, 14, 76, .8);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 24px rgba(8, 16, 54, .3);
}
.hero-split .caption .cap-dot { width: 9px; height: 9px; }
.hero-split .caption svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 900px) {
  body:has(.hero-split) .hero-split .caption,
  .hero-split .caption { font-size: 14px; padding: 9px 14px; }
}
@media (max-width: 560px) {
  body:has(.hero-split) .hero-split .caption,
  .hero-split .caption { font-size: 13.5px; }
}

/* ---------- fix12 / pkt 6 — PODSWIETLANIE AKTYWNEJ POZYCJI MENU ----------
   "Pomoc w doborze" byla na stale w kolorze + z badgem "?" i sugerowala,
   ze user jest na tej podstronie. Zrownujemy ja z reszta linkow, a kolorem
   wyroznia sie pozycja odpowiadajaca aktualnie otwartej stronie
   (klase .is-current nadaje site-fixes.js).
   fix18a: nadpisania `color:inherit` i `::before{content:none}` juz nie ma —
   usuniete zostalo samo zrodlo, czyli reguly przy `.nav-cta .burger` (~:109). */

/* UWAGA (fix14): wyglad .is-current (kolor + pigulka + animowany akcent)
   przeniesiony do assets/fluid.css -> sekcja
   "fix14 — ANIMOWANE PODSWIETLENIE AKTYWNEJ POZYCJI MENU".
   Kreska z fix12 (`a::after {bottom:-3px}`) byla kotwiczona do pudelka <a>,
   a od @media (min-width:981px) pozycje z megamenu maja
   `nav.main > .hasmega > a {display:flex; min-height:100%}` — pudelko
   rozciaga sie na cale 85px naglowka, wiec na stronach linii produktowych
   (aktywne "Produkty") kreska wypadala ~30px za nisko, pod naglowkiem.
   fix14 kotwiczy podswietlenie do <span class="c8-navlabel"> (site-fixes.js),
   czyli do samego tekstu — identycznie na kazdym typie strony. */

/* ---------- fix12 / pkt 12 + 11 — MEGAMENU "O FIRMIE" bez ikon i numeracji ----
   Z kart znikly <span class="c8-about-menu__icon"> (piktogramy AI) oraz numery
   01-04 (zostala sama strzalka), wiec karta moze byc nizsza, a strzalka musi
   wrocic do prawego DOLNEGO rogu (space-between z jednym dzieckiem wypychal ja
   na gore).
   fix18a: usuniete `padding:20px 44px 22px` — deklaracja byla MARTWA, bo
   `nav.main a{padding:6px 3px}` (styles.css) ma wyzsza specyficznosc
   (0,1,2 vs 0,1,0) i wygrywa. Realne "swiatlo" karty daje
   `.c8-about-menu__copy{max-width:310px}` przy karcie 391px, czyli ~40px
   z kazdej strony. To samo dotyczy `padding` w @media(max-width:1180px). */
.c8-about-menu__card { min-height: 118px; }
.c8-about-menu__step { justify-content: flex-end; }
@media (max-width: 1180px) {
  .c8-about-menu__card { min-height: 110px; }
}

/* ---------- fix12 / pkt 11 — trzy klocki na stronie linii bez numeracji ----
   Po usunieciu <span>01..03</span> kolumna 48px zostawialaby pusta luke. */
.category-story__fact { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }
@media (max-width: 640px) {
  .category-story__fact { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- fix12 / pkt 10 — TLO SEKCJI "KLUCZOWE KORZYSCI" ----------
   Bylo ciemnogranatowe (linear-gradient navy->#202b88) i czytalo sie jak koniec
   strony. Teraz jasne, stonowane tlo w tincie rodziny + ciemny tekst. */
.category-benefits,
.category-page .category-benefits {
  color: var(--c8-ink, #101642);
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--category-accent, #00aed9) 14%, transparent), transparent 36%),
    linear-gradient(160deg, #fff 0%, var(--category-mist, #eaf8fc) 100%) !important;
  border-top: 1px solid rgba(21, 20, 95, .07);
  border-bottom: 1px solid rgba(21, 20, 95, .07);
}
.category-benefits::before {
  border: 1px solid color-mix(in srgb, var(--category-deep, #15145f) 9%, transparent) !important;
  box-shadow:
    0 0 0 58px color-mix(in srgb, var(--category-deep, #15145f) 3%, transparent),
    0 0 0 116px color-mix(in srgb, var(--category-deep, #15145f) 2%, transparent) !important;
}
.category-benefits h2 { color: var(--category-deep, #15145f) !important; }
.category-benefits .ben-card {
  color: var(--c8-ink, #101642);
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(21, 20, 95, .1) !important;
  box-shadow: 0 10px 26px rgba(22, 31, 78, .06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.category-benefits .ben-card b { color: var(--category-deep, #15145f) !important; }
.category-benefits .ben-card p,
.category-benefits .ben-card .ben-t { color: #5a6379 !important; }
.category-benefits .ben-ic,
.category-page .category-benefits .ben-ic {
  color: var(--category-accent-dark, #087eaa) !important;
  background: color-mix(in srgb, var(--category-accent, #00aed9) 17%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--category-accent, #00aed9) 36%, #fff) !important;
}

/* ============================================================
   2026-07-28 fix15 — HERO / portfolio: WARIANT A "rejestr wierszowy"
   Zastepuje kafle-bable z fix12/pkt 2 (blok wyciety wyzej).
   Powod: panel hero jest sztywno ograniczony do 560px (inline CSS w
   index.html), wiec pas kafli ma 432px = 137px na kafel. Nazwa 19px w
   137px lamala sie ("drobiowy z / indyka") i sprawiala wrazenie ciasnoty.
   Rejestr wierszowy daje kazdej rodzinie pelne 432px, wiec nic sie nie
   lamie od 390px w gore, i usuwa cala dekoracje (gradient, radius, cien,
   kolorowy pasek, translateY), ktora czytala sie jako "za bardzo AI".
   Kolagen TYPU II dostaje wlasny znacznik w ramce — jest to pierwsza
   rzecz pod leadem.
   UWAGA KASKADY: nie skracac selektorow body:has(.hero-split) — fluid.css
   laduje sie PO concept8.css i nadpisalby grid (fluid.css:215-220) oraz
   font-size 12px (fluid.css:615-625).
   ============================================================ */
body:has(.hero-split) .hero-split .c8-hs--a,
.c8-hs--a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 2px 0 22px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(21, 20, 95, .15);
  background: none;
}
body:has(.hero-split) .hero-split .c8-hs--a a,
.c8-hs--a a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  padding: 10px 24px 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(21, 20, 95, .12);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--c8-navy);
  text-decoration: none;
  transform: none;
  transition: none;
}
/* kasuje kropke/pasek akcentu z bazowego CSS (concept8.css:492) */
.c8-hs--a a::before { display: none; }
/* szewron zbudowany z dwoch krawedzi — bez ikony, bez SVG */
.c8-hs--a a::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid rgba(23, 21, 109, .38);
  border-bottom: 1.5px solid rgba(23, 21, 109, .38);
  transform: rotate(-45deg);
  transition: border-color .18s ease;
}
body:has(.hero-split) .hero-split .c8-hs--a b,
.c8-hs--a b {
  flex: 0 0 auto;
  display: block;
  color: var(--c8-navy);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.012em;
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease;
}
/* znacznik TYPU II — wyroznik handlowy, ma byc widoczny */
body:has(.hero-split) .hero-split .c8-hs--a i,
.c8-hs--a i {
  flex: 0 0 auto;
  margin-left: -2px;
  padding: 2px 6px 3px;
  border: 1px solid rgba(23, 21, 109, .38);
  border-radius: 2px;
  background: rgba(23, 21, 109, .04);
  color: var(--c8-navy);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .18s ease;
}
body:has(.hero-split) .hero-split .c8-hs--a span,
.c8-hs--a span {
  display: block;
  min-width: 0;
  margin: 0;
  color: #5c6580;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
}
/* UWAGA: stany hover MUSZA miec ten sam prefiks body:has(...) co reguly bazowe.
   Bez niego `.c8-hs--a a:hover b` (0,2,2) przegrywa z
   `body:has(.hero-split) .hero-split .c8-hs--a b` (0,3,2) i podkreslenie
   nigdy sie nie pojawia (zweryfikowane w Chromium). */
body:has(.hero-split) .hero-split .c8-hs--a a:hover,
.c8-hs--a a:hover { background: none; box-shadow: none; }
body:has(.hero-split) .hero-split .c8-hs--a a:hover b,
.c8-hs--a a:hover b { text-decoration-color: var(--c8-cyan); }
body:has(.hero-split) .hero-split .c8-hs--a a:hover i,
.c8-hs--a a:hover i { border-color: rgba(23, 21, 109, .55); }
body:has(.hero-split) .hero-split .c8-hs--a a:hover::after,
.c8-hs--a a:hover::after { border-color: var(--c8-navy); }
body:has(.hero-split) .hero-split .c8-hs--a a:focus-visible,
.c8-hs--a a:focus-visible { outline: 2px solid var(--c8-cyan); outline-offset: 2px; }
@media (max-width: 400px) {
  body:has(.hero-split) .hero-split .c8-hs--a a,
  .c8-hs--a a { flex-wrap: wrap; row-gap: 2px; }
  body:has(.hero-split) .hero-split .c8-hs--a span,
  .c8-hs--a span { flex: 1 0 100%; }
}


/* ============================================================
   2026-07-28 fix20 / KOSMETYKA INTERFEJSU (QA sekcja 3.6 / 3.8)
   ============================================================ */

/* ---------- fix20 / 3.6 — PUSTY PAS NA STRONACH ZASTOSOWAN @<=700px ----------
   OBJAW: na 6 stronach zastosowan (x3 jezyki) pod kaflem tekstowym hero
   zostawal ~180 px pustego, kremowego tla, zanim zaczelo sie doczepiane
   menu `.application-jump`. Zmierzone na zywnosc.html @390x844: sekcja
   `.apphero2` 120->778 px, tresc konczyla sie na 599 px.

   PRZYCZYNA (regresja fix17, NIE blad ukladu fix12): uklad mobilny z bloku
   "fix12 / KAFEL ZASTOSOWAN" powyzej (concept8.css:3276-3288) opiera sie na
   selektorach z kombinatorem dziecka —
   `body.application-page .apphero2 > .apphero2__photo | > .apphero2__img |
   > .apphero2-bg` — i nadaje zdjeciu `flex:1 1 0%`, zeby dobralo cala wolna
   przestrzen. fix17 opakowal kazdy <img> w <picture> z zapasem WebP
   (`<picture><source ...><img class="apphero2__img"></picture>`), wiec
   BEZPOSREDNIM dzieckiem sekcji jest teraz <picture>, a nie <img>. Selektory
   z ">" przestaly trafiac, <picture> dostalo domyslne `flex:0 1 auto`
   i zdjecie przestalo rosnac — stad pusty pas.

   ROZWIAZANIE: rola elementu rozciagliwego przechodzi na <picture> (to on
   jest teraz dzieckiem flexa), a <img> w srodku wypelnia go bezwzglednie.
   Stare selektory zostaja nietkniete — strona, ktora kiedykolwiek wroci do
   golego <img>, dalej bedzie dzialac.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body.application-page .apphero2 > picture {
    order: 0 !important;
    flex: 1 1 0% !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 128px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  body.application-page .apphero2 > picture > .apphero2__photo,
  body.application-page .apphero2 > picture > .apphero2__img,
  body.application-page .apphero2 > picture > .apphero2-bg,
  body.application-page .apphero2 > picture > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block !important;
  }
}

/* ---------- fix20 / 3.6b — PASEK KOTWIC MUSI ZMIESCIC SIE NA 1. EKRANIE ----------
   Blok fix12 rezerwuje pod paskiem `.application-jump` sztywne 66 px
   (concept8.css:3260 `height: max(430px, calc(100dvh - 120px - 66px))`).
   66 px to wysokosc paska z kotwicami w JEDNYM rzedzie — tak jest tylko na
   pieciu stronach PL. Od zadania #25 kotwice, ktore nie mieszcza sie w oknie,
   zawijaja sie do drugiego rzedu (fluid.css:531-546) i wtedy pasek ma 79.6 px.
   Zmierzone @390x844: PL zywnosc/stawy/sport/uroda/pet-food = 66 px, natomiast
   PL rolnictwo-biotechnologia oraz WSZYSTKIE strony EN i DE = 79.6 px, czyli
   dolne 13.6 px paska (druga kotwica) bylo ucinane krawedzia ekranu.

   Rezerwujemy 80 px, czyli tyle, ile potrzebuje wariant dwurzedowy. Na pieciu
   stronach PL pasek konczy sie wtedy 14 px nad krawedzia ekranu — widac waski
   pasek nastepnej sekcji, co jest poprawna afordancja przewijania, a nie luka.
   Zdjecie ma `flex:1`, wiec samo oddaje te 14 px; kafel tekstowy bez zmian. */
@media (max-width: 700px) {
  body.application-page .apphero2 {
    height: max(430px, calc(100dvh - 120px - 80px)) !important;
  }
}


/* ---------- fix20 / 3.8 — SZEW MIEDZY PANELEM DRAWERA A STOPKA CTA ----------
   ZGLOSZENIE: "na 390 px dolna krawedz bialego panelu konczy sie ~y=490,
   a gradientowy pasek CTA zaczyna sie na y=499 - widac ~9 px szczeliny,
   przez ktora przebija przyciemniona strona".

   POMIAR: szczeliny NIE MA. Prostokaty stykaja sie co do piksela — ostatnia
   pozycja menu ma bottom 498.6 px, `.c8-drawer-cta` ma top 498.6 px, a dolna
   krawedz panelu i stopki to ta sama wartosc 582.6 px (Chromium, 390x844,
   index.html, po zakonczeniu animacji wejscia).

   CO WIDAC NAPRAWDE: `box-shadow: 0 -6px 16px rgba(9,13,44,.10)` ze stopki
   maluje rozmyty szary cien DO GORY, po bieli panelu. Odczyt pikseli kolumny
   x=200 (zrzut 2x): y=480 -> #FEFEFE, y=490 -> #F6F6F7, y=497 -> #EDEDEF.
   Osiemnascie pikseli brudnej szarosci tuz nad kolorowa stopka czyta sie
   dokladnie jak "przebija przyciemniona strona" — i tak zostalo zgloszone.

   POPRAWKA, dwie rzeczy:
   1) zamiast rozmytego cienia jedna ostra kreska 1 px — biel styka sie
      z gradientem czysto, jak w dobrze zlozonej karcie technicznej;
   2) prawdziwy odstep 14 px zamiast pozornego. `margin: auto -24px 0` bylo
      martwe: `nav.main` ma `height:auto !important` (concept8.css:3660),
      wiec w kolumnie flex NIGDY nie ma wolnej przestrzeni, ktora `auto`
      moglaby rozdzielic — stopka i tak stykala sie z ostatnim wierszem.
      Wpisujemy tam konkretne 14 px; sticky bottom:0 przy dlugiej liscie
      dziala bez zmian, bo margines gorny nie wplywa na przyklejanie. */
@media (max-width: 1040px) {
  html.nav-open nav.main > .c8-drawer-cta {
    margin: 14px -24px 0 !important;
    border-top: 1px solid rgba(9, 13, 44, .10) !important;
    box-shadow: none !important;
  }
  /* wewnetrzny rozjasniony wlos zostaje, ale slabszy — nad ostra kreska
     wystarczy delikatne podswietlenie gornej krawedzi gradientu */
  html.nav-open nav.main > .c8-drawer-cta::before {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, .34),
      rgba(255, 255, 255, 0)) !important;
  }
}

/* Atrybucja pod naglowkiem tabeli w zakladce Dokumenty.
   Certyfikaty naleza do zakladow produkcyjnych grupy (PMiW Lukosz), a nie
   do ATLANTIS - INVESTMENT. Bez tego podpisu klient pobieral PDF z inna
   nazwa spolki niz ta w stopce serwisu. */
.docnote{margin:-6px 0 14px;font-size:13.5px;line-height:1.5;color:var(--gray,#5a5f73);max-width:78ch}

/* ============================================================
   HERO strony glownej — SCENA WIDEO (pioro indycze -> beta-keratyna).
   ------------------------------------------------------------
   Wideo NIE zastepuje karuzeli: jest jej pierwsza, dodatkowa scena.
   Trzy zdjecia zastosowan (uroda / stawy / sport) zostaja bez zmian,
   bo kazde z nich jest odnosnikiem do strony zastosowania — usuniecie
   ich skasowaloby trzy wejscia w nawigacji.
   Kolejnosc scen: [wideo: surowiec] -> [skora] -> [stawy] -> [sport],
   czyli "surowiec -> zastosowanie".

   Plik wideo dociaga skrypt w index.html i tylko wtedy, gdy:
   szerokosc >= 901px, brak prefers-reduced-motion, brak Save-Data.
   Do tego czasu (i zawsze ponizej 901px) widac obraz zastepczy WebP,
   ktory jest zwyklym <img> sceny — nigdy nie ma pustego prostokata.
   ============================================================ */

/* Mapa rozmytych teł przesuwa sie o jedna pozycje — scena 1 to teraz wideo. */
body:has(.hero-split) .hero-split .hero-slide:nth-child(2) { --c8-hero-image: url("hero-lifestyle.jpg"); }
body:has(.hero-split) .hero-split .hero-slide:nth-child(3) { --c8-hero-image: url("hero-lifestyle-joints.jpg"); }
body:has(.hero-split) .hero-split .hero-slide:nth-child(4) { --c8-hero-image: url("hero-lifestyle-sport.jpg"); }

/* Scena wideo: plaskie, ciemne pole zamiast rozmytej kopii zdjecia.
   Material jest nakrecony na czerni, wiec rozmyta kopia nic nie wnosi. */
body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video::before {
  inset: 0;
  background: #05070f;
  background-image: none;
  filter: none;
  opacity: 1;
}

/* Wideo lezy dokladnie w tej samej ramce co zdjecia pozostalych scen
   (72% szerokosci, dosuniete do prawej, ta sama maska lewej krawedzi),
   dzieki czemu przejscie obraz -> film jest niewidoczne. */
body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 1;
  width: 72%;
  height: 100%;
  /* 2026-07-30: POWROT do `cover` — patrz uzasadnienie przy regule obrazu
     zastepczego (ok. linii 584). Skrocone: klip z menzurka, dla ktorego
     wprowadzono `contain`, juz nie istnieje, a `contain` na szerokim ekranie
     zostawial do 56% pustego miejsca obok filmu (2560 px).
     UWAGA: obie reguly — ta i ta dla obrazu zastepczego — MUSZA miec ten sam
     tryb, inaczej przy podmianie obraz na film kadr skacze. */
  object-fit: cover;
  object-position: center center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .42) 10%, #000 24%, #000 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
/* Klase nadaje skrypt dopiero po zdarzeniu canplay — obraz zastepczy
   znika wylacznie wtedy, gdy jest juz czym go zastapic. */
body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video.is-ready { opacity: 1; }

/* 2026-08-10: telefon TEZ dostaje film (wczesniej byl odcinany progiem 901px).
   Hero na waskim ekranie to jedno pasmo obrazu na cala szerokosc, a nie kolumna
   z prawej - wiec kadr musi isc od krawedzi do krawedzi, a maska lewej krawedzi,
   potrzebna wylacznie w ukladzie dwukolumnowym, musi zniknac. Bez tego film
   bylby uciety i przejscie obraz -> film skakaloby. */
@media (max-width: 900px) {
  body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Ograniczony ruch: zawsze obraz zastepczy, nigdy film. */
@media (prefers-reduced-motion: reduce) {
  body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--video video { display: none !important; }
}

/* Wideo jest nakrecone na czerni, wiec przez pol-przezroczysta karte tekstu
   przebija ciemniejsze tlo niz przez zdjecia zastosowan. Pomiar na najjasniejszej
   klatce (t=4,30 s): kontrast akapitu lead spadal 7,13:1 -> 6,88:1, czyli tuz
   ponizej progu WCAG AAA. Dla samej sceny wideo dokladamy wiec kilka procent
   krycia w lewej czesci przyciemnienia — obszar i tak w calosci lezy pod karta. */
@media (min-width: 901px) {
  /* WYLACZNIE uklad dwukolumnowy. Ponizej 901px karta lezy pod pasmem obrazu
     i obowiazuje pionowe przyciemnienie z bloku max-width:900px — ta regula
     ma wyzsza specyficznosc (:has), wiec bez media query zepsulaby telefon. */
  body:has(.hero-split) .hero-split .photo:has(.c8-hero-scene--video.is-active)::before {
    background:
      /* 2026-07-29: rozjasnienie po lewej USUNIETE na prosbe wlasciciela.
         Scena wideo dostawala tu MOCNIEJSZA biel (.99 zamiast .92 w regule
         bazowej), zeby podbic kontrast naglowka — efekt byl taki, ze film
         robil sie wyprany dokladnie wtedy, gdy mial byc widoczny.
         Naglowek tej warstwy nie potrzebuje: lezy na panelu z wlasnym tlem
         (.94) i backdrop-filter blur(18px). FILM ZOSTAJE BEZ BIELI.

         Zapis czteropunktowy zamiast trzypunktowego wyglada identycznie:
         punkt na 71% lezy dokladnie na tej samej prostej
         (.12 * (71-42)/(100-42) = .06). */
      linear-gradient(90deg, rgba(238, 247, 253, 0) 0%, rgba(238, 247, 253, 0) 42%, rgba(9, 16, 48, .06) 71%, rgba(9, 16, 48, .12) 100%),
      linear-gradient(180deg, rgba(10, 19, 58, .02), rgba(8, 15, 46, .12));
  }

  /* ---------- Rozjasnienie pod kaflem — TYLKO sceny ze zdjeciem ----------
     2026-07-30, prosba wlasciciela: „dla zdjec musi wrocic to rozjasnienie
     za tym naszym kafelkiem".
     Wartosci sa 1:1 z ery zdjec (commit 478c616, sprzed fix26), bo o tamten
     wyglad chodzi. Ta zaslona wlasnie dla zdjec powstala: wtapia kafel
     tekstowy w obraz, zamiast stawiac go na ostrej krawedzi.

     KLUCZOWE — warstwa siedzi na SLAJDZIE, nie na kontenerze.
     Wersja na kontenerze (`.photo::before` + `:has(...is-active)`) przelacza
     sie w jednej klatce, podczas gdy slajdy przenikaja 0,55 s. Zmierzone:
     w chwili 0 ms przejscia film -> zdjecie film byl jeszcze w pelnym kryciu,
     a biel juz wlaczona — czyli przez pol sekundy film byl wyprany, dokladnie
     to, co mielismy usunac, i to trzy razy na cykl.
     `transition: background` tego nie ratuje — przegladarka nie animuje
     gradientu miedzy stanami (zmierzone: krycie skakalo 0 -> 0,92 od razu).
     Na slajdzie warstwa dziedziczy jego krycie, wiec przenika razem z obrazem
     bez zadnego dodatkowego mechanizmu.

     Tylko desktop: ponizej 901px kafel lezy POD pasmem obrazu, wiec zdjecie
     ma zostac czyste (patrz @media max-width:900px — „brak wybielajacego fade"). */
  body:has(.hero-split) .hero-split .hero-slide.c8-hero-scene--foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* TYLKO rozjasnienie, zero przyciemnienia — i to jest poprawka do pierwszej
       wersji. Oryginalna zaslona z ery zdjec robila dwie rzeczy naraz:
       rozjasniala lewa strone pod kaflem i przyciemniala prawa oraz dol.
       Wtedy byla JEDYNA warstwa. Dzis przyciemnienie prawej krawedzi daje juz
       `.photo::before` na kontenerze, wiec przeniesienie calego oryginalu tutaj
       nalozylo je drugi raz i zdjecia zrobily sie ciemniejsze niz przedtem.
       Zmierzone na trzech slajdach ze zdjeciem, prawa czesc kadru:
         z ciemnymi punktami   98,3
         bez nich             124,6
         przed cala zmiana    122,1
       Wersja bez ciemnych punktow oddaje wiec zdjecie takie, jakie bylo,
       a rozjasnienie pod kaflem zostaje nietkniete (lewa 208,6 w obu). */
    background:
      linear-gradient(90deg, rgba(238, 247, 253, .92) 0%, rgba(238, 247, 253, .67) 36%, rgba(238, 247, 253, 0) 64%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   WIEDZA — WSTRZYMANA DO PRZEGLĄDU MERYTORYCZNEGO (2026-08-05)

   Technolog poprosił o zablokowanie bazy wiedzy do czasu przejrzenia treści.
   Powód jest konkretny: artykuły nadal mówią o kolagenie „typu I i III" oraz
   o keratynie bez „β-", czyli dokładnie to, co poprawiliśmy na stronach
   produktowych. Zostawienie ich widocznymi oznaczałoby, że serwis sam sobie
   zaprzecza — karta produktu mówi jedno, artykuł obok drugie.

   DLACZEGO STYLEM, A NIE USUNIĘCIEM ZNACZNIKÓW: to stan TYMCZASOWY. Wycinanie
   markupu ze 130 plików byłoby nieodwracalne bez kolejnej dużej operacji,
   a tutaj chodzi o przełącznik. Odblokowanie = skasowanie tego bloku.

   CO ZNIKA: pozycja „Wiedza" w menu głównym wraz z całym megamenu (karuzela
   polecanych, lista artykułów, odnośnik do huba) oraz „Baza wiedzy" w stopce.
   Same pliki artykułów zostają na dysku — nie ma do nich żadnego przejścia
   z interfejsu, ale nic nie ginie.

   PO PRZEJRZENIU TREŚCI: usunąć cały ten blok i poprawić artykuły
   (typ II, β-keratyna) tak samo jak strony produktowe.
   ══════════════════════════════════════════════════════════════════════════ */
/* ODBLOKOWANE NA PROTOTYPIE 2026-08-10 — i to NIE jest wypuszczenie Wiedzy.
   ------------------------------------------------------------------------
   Reguly, ktore chowaly pozycje „Wiedza" w menu glownym, jej megamenu oraz
   odnosnik w stopce, zostaly USUNIETE. Wygladalo to jak poluzowanie zakazu
   technologa, wiec trzeba powiedziec wprost, dlaczego nim nie jest:

   Ten arkusz jest WSPOLNY dla obu srodowisk, wiec ukrycie stylem dzialalo
   wszedzie — takze na strona.atlantis-ingredients.com, ktora jest naszym
   prototypem i ma pokazywac komplet przed wypuszczeniem. Rozdzial srodowisk
   robi natomiast paczka na hosting: `tools/paczka_hosting.py` USUWA z niej
   strony Wiedzy oraz wszystkie prowadzace do nich znaczniki, lacznie z ta
   pozycja menu. Sprawdzone po zmianie: w paczce jest 0 plikow zawierajacych
   `c8-kb` i 0 odnosnikow `href="wiedza`, przy 126 plikach w zrodlach.

   Czyli: prototyp pokazuje Wiedze, produkcja jej NIE MA — nie dlatego, ze
   cos ja tam chowa, tylko dlatego, ze jej tam fizycznie nie ma. To mocniejsze
   zabezpieczenie niz regula CSS, ktora wystarczy wylaczyc w przegladarce.

   Wypuszczenie Wiedzy na produkcje wymaga swiadomej decyzji: zbudowania
   paczki z flaga `--z-wiedza`, po poprawieniu 15 potwierdzonych zastrzezen
   z przegladu merytorycznego (RAPORT_wiedza_brutal_review_2026-08-07.md). */

/* Pasek tematów: pozycje wiodące do wstrzymanych artykułów Wiedzy.
   Ukrywamy WYBIÓRCZO — ten sam pasek na stronach produktów wiezie linki do
   produktów i te mają zostać. */
.topic-ticker__item[href$="audyt-dostawcy-surowca-checklista.html"],
.topic-ticker__item[href$="claimy-kolagen-suplement-1924-2006.html"],
.topic-ticker__item[href$="hydrolizat-bialka-do-zup-i-sosow.html"],
.topic-ticker__item[href$="hydrolizat-drobiowy-petfood-czego-wymagac.html"],
.topic-ticker__item[href$="keratyna-do-szamponu-odzywki-maski-dozowanie.html"],
.topic-ticker__item[href$="keratyna-piora-welna-weganska-roznice.html"],
.topic-ticker__item[href$="kolagen-ha-chondroityna-glukozamina-jeden-skladnik.html"],
.topic-ticker__item[href$="kolagen-rybi-wolowy-indyczy-porownanie.html"],
.topic-ticker__item[href$="kolagen-typu-ii-a-typu-i-stawy.html"],
.topic-ticker__item[href$="masa-czasteczkowa-hydrolizatu-da.html"],
.topic-ticker__item[href$="mikrobiologia-surowca-iso-17516-kosmetyki.html"],
.topic-ticker__item[href$="pioro-indycze-beta-keratyna-circular-economy.html"],
.topic-ticker__item[href$="rozpuszczalnosc-bialka-napoje-shoty-saszetki.html"],
.topic-ticker__item[href$="wolne-aminokwasy-keratyna-microp-suplementy.html"],
.topic-ticker__item[href$="zelatyna-a-peptydy-kolagenowe-roznice.html"] {
  display: none !important;
}

/* Mail i przelacznik jezyka przy PRAWEJ krawedzi, takze bez paska tematow.
   ------------------------------------------------------------------------
   Gorny pasek to `display:flex; justify-content:space-between` z dwoma
   dziecmi: paskiem tematow po lewej i grupa `.r` (mail + PL/EN/DE) po prawej.
   Paczka na hosting USUWA pasek tematow (linkuje do artykulow Wiedzy, ktorych
   na produkcji nie ma), przez co `.r` zostaje jedynym dzieckiem, a
   `space-between` dosuwa je do LEWEJ krawedzi.

   `styles.css` ma juz `.topbar .r{margin-left:auto}`, ale tego arkusza NIE
   wczytuje strona glowna ani pozostale strony z blokiem stylow wpisanym
   w dokument — regula do nich nie dociera. Zmierzone na produkcji 2026-08-10
   przy szerokosci 1440 px: `.r` na 43 px od lewej, `margin-left` wyliczony
   na 0px. Dlatego regula siedzi tutaj, w arkuszu wczytywanym przez WSZYSTKIE
   strony. Dziala tak samo, gdy pasek tematow jest obecny (na prototypie). */
.topbar > .wrap > .r { margin-left: auto; }

/* Nazwa produktu w tabeli Dokumentow prowadzi na strone produktu.
   ---------------------------------------------------------------
   Domyslnie ma wygladac jak zwykly tekst — tabela z kilkunastoma wierszami
   podkreslonych, niebieskich odnosnikow robi sie nieczytelna. Ze jest klikalna,
   pokazuje sie dopiero po najechaniu: nazwa przybiera kolor marki i dostaje
   blekitna kreske pod spodem. `:focus-visible` obslugujemy razem z `:hover`,
   zeby dalo sie po tym chodzic klawiatura. */
.doctable .docprod {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.doctable .docprod:hover,
.doctable .docprod:focus-visible {
  color: var(--navy, #17156D);
  border-bottom-color: var(--cyan, #00AED9);
}

/* Opis wariantu opakowaniowego pod nazwa (TuriColl NS ma dwie karty:
   15 kg i 8 kg, roznia sie numerem ID i gestoscia nasypowa). Ma czytac sie
   jako dopisek do nazwy, nie jako druga nazwa — stad mniejszy stopien pisma
   i szary kolor. */
.doctable .docwar {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--gray, #54536B);
  opacity: .9;
}

/* Naglowek grupy w tabeli Dokumentow prowadzi na strone LINII produktowej.
   ------------------------------------------------------------------------
   Ta sama zasada co przy `.docprod`: naglowek ma dalej WYGLADAC jak naglowek,
   a to, ze jest klikalny, pokazuje sie dopiero po najechaniu. Gdyby cztery
   naglowki byly na stale niebieskie i podkreslone, przestalyby dzielic tabele
   na sekcje — zaczelyby konkurowac z wierszami o uwage.

   Wygladem rzadzi `styles.css` (`.doctable .docgroup td`): tlo #f3f0f6, wersaliki
   12 px, grubosc 700, kolor `--wine`. Odnosnik ma sie w to wtopic, dlatego
   `color: inherit` — reszta (stopien pisma, wersaliki, odstepy miedzy literami)
   dziedziczy sie po komorce sama, bo to wlasciwosci dziedziczone i przegladarka
   nie nadpisuje ich dla `<a>`. Nadpisuje tylko kolor i podkreslenie i tylko te
   dwie rzeczy tu prostujemy.

   Kreska pod tekstem jest `border-bottom`, nie `text-decoration`, zeby dalo sie
   ja animowac (`text-decoration-color` nie przechodzi plynnie w czesci silnikow)
   i zeby w stanie spoczynku zajmowala miejsce jako przezroczysta — inaczej
   najechanie przesuwaloby wiersz o piksel. `:focus-visible` obslugujemy razem
   z `:hover`, zeby dalo sie po tym chodzic klawiatura. */
.doctable .docgrouplink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.doctable .docgrouplink:hover,
.doctable .docgrouplink:focus-visible {
  color: var(--navy, #17156D);
  border-bottom-color: var(--cyan, #00AED9);
}

/* Dane techniczne TuriColl NS: parametry wspolne + osobna czesc porownawcza.
   -------------------------------------------------------------------------
   NS to jedyny produkt w dwoch workach — i nie jest to ten sam towar
   w dwoch rozmiarach: rozni sie numer indeksu i GESTOSC NASYPOWA
   (0,20–0,50 vs 0,10–0,30 g/ml), a to parametr, ktory realnie obchodzi
   technologa przy dozowaniu i napelnianiu.

   DLACZEGO DWIE TABELE, A NIE JEDNA Z NAGLOWKAMI NA GORZE.
   Poprzedni uklad stawial naglowki `worek 15 kg / 8 kg` nad CALA tabela,
   a wiersze wspolne rozciagal przez `colspan=2`. Komentarz obiecywal, ze
   colspan zapobiega mylnemu odczytowi. Na ekranie bylo odwrotnie: colspan
   rozciaga komorke, ale tekst i tak stoi przy jej LEWEJ krawedzi, czyli
   dokladnie pod naglowkiem „WOREK 15 KG". „Typ II (hydrolizat)" wygladalo
   jak parametr wiekszego worka. To wada merytoryczna, nie estetyczna —
   klient zamawia na podstawie tej tabeli. Naglowek opakowania stoi teraz
   WYLACZNIE nad dwoma wierszami, ktore faktycznie sie roznia; parametry
   wspolne sa wyzej, w zwyklej tabeli etykieta/wartosc, bez naglowkow.

   DLACZEGO TABELA NIE JEST JUZ `display:block`.
   Byla, zeby przy braku miejsca przewijala sie sama tabela, a nie cala
   strona — cel sluszny i zostaje. Zmienia sie mechanizm. `display:block`
   odbiera elementowi `table` ukladanie tabelaryczne: `width:100%` dostawal
   blok, a wiersze w srodku ukladaly sie do szerokosci TRESCI. Zmierzone przy
   1440px: blok 537,6 px, wiersze 442,8 px — 95 px martwego pasa po prawej,
   przez ktory naglowek karty szedl na cala szerokosc, a kreski wierszy
   urywaly sie wczesniej. Przewijanie przejmuje teraz OTOCZKA
   `.spec-por__ramka`; tabela zostaje tabela i wypelnia karte co do piksela. */

/* JEDEN odstep od krawedzi dla obu tabel karty. Musi byc wspolny, bo o niego
   opiera sie pionowa linia, w ktorej zaczynaja sie wartosci — gdy tabela
   wspolna ma 18 px, a porownawcza 8 px, liczby stoja o 10 px obok siebie
   i karta wyglada na sklejona z dwoch kawalkow. Na waskim telefonie ten sam
   odstep sie zweza: przy 320 px etykieta „Rozpuszczalnosc" razem z wartoscia
   potrzebowaly 277 px przy karcie szerokiej na 262 px, wiec tabela wychodzila
   poza zaokraglona ramke karty.
   `:has(table.spec-2kol)` trzyma to przy jedynej takiej karcie w serwisie
   (NS) — pozostale 11 produktow zostaje na 18 px w kazdych warunkach. */
.spec-card:has(table.spec-2kol) { --spec-pad: 18px; }
@media (max-width: 420px) {
  .spec-card:has(table.spec-2kol) { --spec-pad: 12px; }
}
.pdp .spec-card table.spec-wspolne td {
  padding-left: var(--spec-pad, 18px);
  padding-right: var(--spec-pad, 18px);
}

/* Czesc porownawcza to osobny pas na dole karty — ma sie odcinac od
   parametrow wspolnych, zeby granica „co to jest / czym sie roznia
   opakowania" byla widoczna bez czytania. Do kresek i tekstu bierzemy
   `--fam-deep`, nie `--fam-accent`: pomaranczowy TuriGel (#d9821c) na
   jasnym tle daje 2,9:1, a `--fam-deep` (#9b530a) 5,8:1. */
.spec-card .spec-por {
  border-top: 2px solid var(--fam-deep, var(--navy, #17156D));
  background: var(--fam-mist, var(--soft-2, #EEF0F7));
}
.spec-card .spec-por__t {
  margin: 0;
  padding: 12px var(--spec-pad, 18px) 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fam-deep, var(--navy, #17156D));
}
/* Gdyby zabraklo miejsca, przewija sie SAM pas porownawczy — nie cala strona
   i nie cala karta. To ta sama ochrona co dawniej, tylko przeniesiona
   z elementu `table` na otoczke, zeby tabela mogla zostac tabela. */
.spec-card .spec-por__ramka { overflow-x: auto; }

.spec-card table.spec-2kol {
  width: 100%;
  border-collapse: collapse;
}
/* Tlo daje pas, nie komorki — bez tego biale `td` z reguly bazowej
   zamalowaloby wyroznienie i pas przestalby istniec wizualnie. */
.spec-card table.spec-2kol td { background: transparent; }
.spec-card table.spec-2kol tr:first-child > td,
.spec-card table.spec-2kol tr:first-child > th { border-top: 0; }
/* Kreska pod naglowkami idzie takze pod PUSTA komorka naroznika. Gdy szla
   tylko pod dwiema kolumnami liczb, urywala sie w polowie karty i wracalo
   wrazenie niedokonczonej tabeli — ten sam blad, tylko mniejszy. */
.spec-card table.spec-2kol tr:first-child > td,
.spec-card table.spec-2kol th {
  border-bottom: 1px solid color-mix(in srgb, var(--fam-deep, var(--navy, #17156D)) 30%, transparent);
}
.spec-card table.spec-2kol th {
  padding-top: 2px;
  padding-bottom: 7px;
  padding-left: var(--spec-pad, 18px);
  padding-right: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fam-deep, var(--navy, #17156D));
  text-align: left;
  white-space: nowrap;
}
/* Kreski wewnatrz pasa musza byc ciemniejsze niz `--line`, bo `--line` na tle
   rodziny (`--fam-mist`) praktycznie znika. */
.spec-card table.spec-2kol td {
  border-top-color: color-mix(in srgb, var(--fam-deep, var(--navy, #17156D)) 16%, transparent);
}
/* Wartosci w kolumnach porownania NIE MOGA sie lamac. Karta danych jest waska
   (kolumna boczna), wiec bez tego „0,10–0,30 g/ml" rozpadalo sie na trzy linie
   i tabela robila sie najmniej czytelna dokladnie tam, gdzie ma byc najlatwiej
   porownac. */
.spec-card table.spec-2kol td + td {
  white-space: nowrap;
  padding-left: var(--spec-pad, 18px);  /* rowno z kolumna wartosci tabeli wspolnej */
  padding-right: 8px;
  font-weight: 700;
  color: var(--fam-deep, var(--navy, #17156D));
}
/* Kolumna etykiet trzyma te same 44% co tabela wspolna wyzej (styles.css:96),
   wiec wartosci w obu czesciach karty zaczynaja sie w jednej pionowej linii —
   karta czyta sie jak jeden obiekt, a nie dwie doklejone tabelki. Reszta
   dzieli sie po rowno, zeby „15 kg" i „0,20–0,50 g/ml" stały pod soba. */
.spec-card table.spec-2kol td:first-child { width: 44%; }
.spec-card table.spec-2kol th { width: 28%; }


/* ============================================================================
   PDP "RYTM" — hierarchia i tempo strony produktu            (2026-08-10)
   ============================================================================
   SKAD SIE TO WZIELO
   Zgloszenie wlasciciela, doslownie: „jak wejde w np TuriColl NS albo
   TuriKer NS to jest juz potem strasznie basicowo, postaraj sie to poprawic,
   ulepszyc, poprawic wizualnie, ale tak zeby te informacje co tam sa zostaly".
   To NIE jest prosba o wiecej tresci — to prosba o lepsza PREZENTACJE tej,
   ktora juz jest. Dlatego caly blok jest wylacznie warstwa wizualna.

   PROBLEM
   Ponizej hero strona produktu to cztery identyczne plyty: ten sam padding
   72px, ta sama kreska `border-top`, ten sam naglowek 30px i dwa naprzemienne
   tla (bialy / --soft). Oko nie ma sie o co zaczepic i wszystko wyglada tak
   samo wazne. Do tego w sekcji „Zastosowania" polowa szerokosci ekranu jest
   pusta: siatka `.dual` ma w CSS dwa tory, a HTML dostarcza jedna kolumne —
   drugi tor to ~572px czystej pustki przy 1440px.

   ROZWIAZANIE
   Piec roznych „uderzen" zamiast czterech identycznych pasow:
     hero (gradient rodziny) -> 01 tlo w kolorze rodziny -> 02 biale, uklad
     asymetryczny dwukolumnowy -> 03 szare, tabela jako karta -> band.
   Kazda sekcja dostaje numer i kreske w kolorze linii produktowej, a
   najwazniejszy parametr techniczny zostaje podswietlony w karcie danych.

   ZERO ZMIAN W HTML — zaden z 72 plikow produktowych nie jest dotykany, wiec
   powiazania mini-CMS (dopasowanie tresci po jej hashu) pozostaja nienaruszone.
   ZERO NOWYCH NAPISOW — jedyna tresc generowana z CSS to cyfry 01/02/03 oraz
   numery punktow zastosowan; sa neutralne jezykowo, wiec PL/EN/DE dostaja
   dokladnie to samo i nie trzeba niczego tlumaczyc.
   ZERO OBRAZOW, WEBFONTOW I BIBLIOTEK — glebia powstaje z gradientow i cieni,
   transfer rosnie o 0 bajtow poza samym arkuszem.

   KOLOR bierzemy wylacznie ze zmiennych rodziny ustawionych na <body>
   (`.pdp--turicoll` / `--turiker` / `--turipro` / `--turigel`, ok. linii 2878).
   Do TEKSTU I KRESEK uzywamy `--fam-deep`, nie `--fam-accent`: pomaranczowy
   `--fam-accent` TuriGel (#d9821c) na bieli daje 2,9:1 — ponizej progu 4.5:1 —
   a `--fam-deep` (#9b530a) daje 5,8:1. `--fam-accent` zostaje wylacznie do
   wypelnien i domieszek przez `color-mix`, nigdy pod tekst.

   PODSTAWA FAKTYCZNA SELEKTOROW POZYCYJNYCH
   Selektory `:has()` / `:nth-of-type()` / `:only-child` sa tu bezpieczne, bo
   struktura zostala przeliczona na WSZYSTKICH 72 plikach (12 produktow x 3
   jezyki x 2 drzewa): kazda strona ma dokladnie trzy `section.section`
   (`.simple`, `.dual`, `.reltable`), h2 zawsze jest bezposrednim dzieckiem
   `div.wrap`, `.simple` ma zawsze 3 kafle `.s`, `.dual` zawsze 1 `.col`,
   karta danych ma zawsze dokladnie jedna tabele i zaden `<thead>` w niej nie
   wystepuje (wiec `nth-of-type` liczy to samo, co widac w zrodle).
   ============================================================================ */

/* ---------- 0. LICZNIK SEKCJI ----------------------------------------------
   Licznik siedzi na `.pdp`, wiec nie zlicza niczego spoza strony produktu
   (`section.band`, stopka i naglowek nie maja klasy `.section`). Zawsze
   konczy sie na 03. */
.pdp { counter-reset: atlpdp; }
.pdp .section { counter-increment: atlpdp; }

/* ---------- 1. NAGLOWEK SEKCJI: numer + kreska rodziny ---------------------
   Numer stoi NAD naglowkiem, nie obok — dzieki temu dziala tak samo przy
   dlugim niemieckim naglowku („Weitere Kollagene") i na 320px, gdzie uklad
   obok skrocilby tytul. Kreska 40x3 to jedyny element ozdobny; powtarza sie
   trzy razy i to ona buduje rytm pionowy. */
.pdp .section > .wrap > h2::before {
  content: counter(atlpdp, decimal-leading-zero);
  display: block;
  width: 40px;
  margin-bottom: 13px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--fam-deep, var(--navy));
  color: var(--fam-deep, var(--navy));
  font: 700 12.5px/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
}
/* Kreski rodziny wystarcza — poziome linie miedzysekcyjne przy zmieniajacym
   sie tle robily z tego stos identycznych plyt. */
.pdp .section { border-top: 0; }

/* ---------- 2. RYTM TLA I ODDECHU ------------------------------------------
   Trzy rozne podloza zamiast dwoch naprzemiennych. `!important` jest konieczne
   TYLKO przy sekcji 01, bo HTML ma tam inline `style="background:var(--soft)"`,
   ktorego nie wolno nam ruszac (mini-CMS dopasowuje tresc po hashu).
   Sekcja 03 ma ten sam inline `--soft` i celowo go zostawiamy — to ona ma byc
   szara. */
.pdp .section:has(.simple) {
  background: var(--fam-mist, var(--soft)) !important;
  padding: 66px 0 70px;
}
.pdp .section:has(.dual)     { padding: 84px 0; }      /* najwiecej powietrza */
.pdp .section:has(.reltable) { padding: 62px 0 78px; } /* tlo --soft z inline */

/* ---------- 3. HERO: glebia bez ani jednego obrazu -------------------------
   Plaskie #f6f7fb zamieniamy na gradient rodziny gasnacy do bieli plus miekka
   poswiate w prawym gornym rogu — to czyste gradienty CSS, 0 bajtow transferu.
   `align-items:start` zamyka pustke nad eyebrow (karta danych jest wyzsza od
   kolumny tekstu, wiec `center` spychal h1 w dol): h1 startuje w tej samej
   linii co naglowek karty obok. */
.pdp .phero {
  background:
    radial-gradient(1100px 460px at 88% -12%,
      color-mix(in srgb, var(--fam-accent, var(--navy)) 13%, transparent), transparent 68%),
    linear-gradient(180deg, var(--fam-mist, var(--soft)) 0%, var(--soft) 58%, #fff 100%);
  border-bottom-color: var(--line-d);
}
.pdp .phero .wrap {
  align-items: start;
  padding-top: 52px;
  padding-bottom: 58px;
}
/* Eyebrow: istniejaca regula wyzej daje `--fam-accent`, co na TuriGel schodzi
   do 2,9:1. `--fam-deep` to ten sam kolor rodziny, tylko czytelny. */
.pdp .phero .cat { color: var(--fam-deep, var(--wine)) !important; }
/* Kreska pod h1 — ta sama sygnatura co przy naglowkach sekcji, wiec hero
   nalezy do tego samego systemu, a nie jest osobna wyspa. */
.pdp .phero h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--fam-deep, var(--navy));
}
.pdp .phero .uses span { box-shadow: 0 1px 2px rgba(20, 20, 60, .05); }

/* ---------- 4. KARTA DANYCH: najwazniejszy obiekt strony -------------------
   Karta dostaje wreszcie `--shadow` (zmienna czekala nieuzyta od styles.css:8).
   `small` w naglowku mial na sztywno #c7c8ea — granatowy odcien na bordowym,
   zielonym i pomaranczowym pasku rodziny wygladal jak pomylka, a przy okazji
   spadal do 3,54:1 na TuriGel i 4,10:1 na TuriPro. Biel z przezroczystoscia
   trzyma odcien paska rodziny i daje minimum 4,86:1 (TuriGel) — sprawdzone
   dla wszystkich czterech rodzin. Slabsze krycie (.74 z pierwszego szkicu)
   dawaloby 3,93:1, wiec zostaje .88. */
.pdp .spec-card {
  border-radius: 14px;
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.pdp .spec-card .h       { padding: 16px 20px; }
.pdp .spec-card .h small { color: rgba(255, 255, 255, .88); }
.pdp .spec-card td:last-child { font-variant-numeric: tabular-nums; }

/* WYROZNIONY BLOK Z NAJWAZNIEJSZA LICZBA.
   We wszystkich 12 produktach drugi wiersz tabeli to parametr rozstrzygajacy
   (masa czasteczkowa / struktura / Bloom / cecha) — zweryfikowane wiersz po
   wierszu na wszystkich kartach we wszystkich trzech jezykach. TuriColl NS
   mial tu kiedys wyjatek, bo naglowki `worek 15 kg / 8 kg` zajmowaly pierwszy
   wiersz i parametr wypadal trzeci. Po rozbiciu karty na tabele wspolna
   i osobny pas porownawczy wyjatek znika: tabela wspolna zaczyna sie od
   „Typ kolagenu", wiec „Masa czasteczkowa" jest znow druga.
   `:not(.spec-2kol)` zostaje SWIADOMIE — chroni pas porownawczy przed tym
   wyroznieniem (bez tego trafiloby w „Gestosc nasypowa" i zamalowaloby pas). */
.pdp .spec-card table:not(.spec-2kol) tr:nth-of-type(2) > td {
  background: var(--fam-mist, var(--soft-2));
  border-top-color: color-mix(in srgb, var(--fam-accent, var(--navy)) 20%, transparent);
  padding-top: 13px;
  padding-bottom: 13px;
}
.pdp .spec-card table:not(.spec-2kol) tr:nth-of-type(2) > td:first-child {
  box-shadow: inset 3px 0 0 var(--fam-deep, var(--navy));
}
.pdp .spec-card table:not(.spec-2kol) tr:nth-of-type(2) > td:last-child {
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--fam-deep, var(--navy));
}

/* Stopka karty: przy jednym przycisku (8 produktow z 12) po prawej zostawal
   ~40% pustego pasa. `:only-child` rozciaga go na cala szerokosc — para
   przyciskow (TuriColl NS: 15 kg + 8 kg) nadal dzieli miejsce po polowie. */
.pdp .spec-card .f { padding: 14px 18px 16px; }
.pdp .spec-card .f > :only-child {
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
}

/* ---------- 5. „PROSTO O PRODUKCIE": kafle z glebia i kolorem rodziny ------
   Ikona siedziala w szarym kwadracie na bialym kaflu — jedyne miejsce na
   stronie, gdzie kolor linii znikal. Gorna krawedz o malejacym nasyceniu
   (100/60/35%) daje rytm poziomy w obrebie jednego rzedu. */
.pdp .simple .s {
  border-radius: 14px;
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pdp .simple .s:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 20, 60, .06), 0 16px 40px rgba(20, 20, 60, .10);
}
.pdp .simple .s:nth-child(1) { border-top: 3px solid var(--fam-deep, var(--navy)); }
.pdp .simple .s:nth-child(2) { border-top: 3px solid color-mix(in srgb, var(--fam-deep, var(--navy)) 60%, var(--line-d)); }
.pdp .simple .s:nth-child(3) { border-top: 3px solid color-mix(in srgb, var(--fam-deep, var(--navy)) 35%, var(--line-d)); }
.pdp .simple .s .ic {
  background: var(--fam-mist, var(--soft));
  color: var(--fam-deep, var(--navy));
}
.pdp .simple .s h3 {
  color: var(--fam-deep, var(--navy));
  margin-bottom: 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

/* ---------- 6. „ZASTOSOWANIA": koniec pustego toru 572px -------------------
   `.dual` ma w CSS dwie kolumny, a w HTML jedna — drugi tor to 48% kontenera
   czystej pustki. Zamiast dokladac kolumne w markupie (a wiec zrywac hashe
   mini-CMS) przebudowujemy SIATKE SEKCJI: `.wrap` staje sie ukladem
   1,45fr / 0,55fr, lista zastosowan siedzi w szerszej kolumnie jako karta,
   a zastrzezenie prawne przenosi sie z pasa pod spodem do wezszej kolumny
   obok. Zero utraty tresci — te same wezly, inne miejsce w siatce.
   Rownoczesnie jest to jedyna sekcja o innych proporcjach kolumn niz reszta
   strony, czyli druga os rytmu.

   Regula zyje tylko >=1181px, bo ponizej fluid.css:381 przelacza `.dual` na
   `auto-fit` i pusty tor zwija sie sam — tam nic nie zmieniamy. */
@media (min-width: 1181px) {
  .pdp .section:has(.dual) > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
    column-gap: 44px;
    align-items: start;
  }
  .pdp .section:has(.dual) > .wrap > h2 { grid-column: 1 / -1; }
  .pdp .section:has(.dual) .dual        { grid-template-columns: minmax(0, 1fr); }
  /* `.dual` ma margin-top:34px; 12 + inline margin-top:22px na `.note` = 34,
     wiec obie kolumny startuja w tej samej linii. Marginesy nie sklejaja sie,
     bo `.prose` jest tu elementem siatki (wlasny kontekst formatowania). */
  .pdp .section:has(.dual) .prose { margin-top: 12px; }
}
/* Karta listy zastosowan — dziala takze mobilnie, wiec poza media query. */
.pdp .dual .col {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--fam-deep, var(--navy));
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 26px 30px 14px;
}
/* Naglowek karty w kolorze rodziny — inaczej byloby to jedyne miejsce na
   calej stronie, gdzie po tej zmianie zostaje generyczny granat (styles.css:237)
   obok wisniowej/zielonej/pomaranczowej krawedzi karty i takich samych numerow.
   Kontrast --fam-deep na bieli: min. 5,78:1 (TuriGel). */
.pdp .dual .col h3 { color: var(--fam-deep, var(--navy)); }
/* Punktory zamieniamy na numery: cyfra jest neutralna jezykowo (nic do
   przetlumaczenia w EN/DE), a lista przestaje byc trzema myslnikami i staje
   sie uporzadkowanym wyborem. */
.pdp .dual .col ul { counter-reset: atluse; }
.pdp .dual .col li {
  counter-increment: atluse;
  padding: 13px 0 13px 44px;
  min-height: 30px;
}
.pdp .dual .col li:before {
  content: counter(atluse, decimal-leading-zero);
  left: 0;
  top: 11px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--fam-mist, var(--soft));
  color: var(--fam-deep, var(--navy));
  font: 700 12px/30px var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-align: center;
}
/* Przypis prawny mial na kazdym produkcie bordowa krawedz `--wine` — takze na
   zielonym TuriPro i pomaranczowym TuriGel. */
.pdp .prose .note {
  border-left-color: var(--fam-deep, var(--wine));
  border-radius: 0 10px 10px 0;
  padding: 16px 18px;
}

/* ---------- 7. „POZOSTALE …": cross-sell jako karta, nie goly tekst --------
   Tryb kartowy `<=700px` (styles.css:296) zostaje nietkniety — stad dolny
   prog media query. */
@media (min-width: 701px) {
  .pdp .section:has(.reltable) .reltable {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--shadow);
  }
  .pdp .section:has(.reltable) .reltable th {
    padding: 14px 18px;
    background: var(--fam-mist, var(--soft));
    color: var(--fam-deep, var(--navy));
    border-bottom: 1px solid color-mix(in srgb, var(--fam-accent, var(--navy)) 22%, var(--line-d));
  }
  .pdp .section:has(.reltable) .reltable thead tr th:first-child { border-top-left-radius: 14px; }
  .pdp .section:has(.reltable) .reltable thead tr th:last-child  { border-top-right-radius: 14px; }
  .pdp .section:has(.reltable) .reltable td { padding: 16px 18px; font-variant-numeric: tabular-nums; }
  .pdp .section:has(.reltable) .reltable tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--fam-mist, var(--soft)) 55%, #fff);
  }
  .pdp .section:has(.reltable) .reltable tbody tr:hover td {
    background: var(--fam-mist, var(--soft));
  }
  .pdp .section:has(.reltable) .reltable tbody tr:last-child td { border-bottom: 0; }
  .pdp .section:has(.reltable) .reltable tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
  .pdp .section:has(.reltable) .reltable tbody tr:last-child td:last-child  { border-bottom-right-radius: 14px; }
}
/* „Zobacz →" przestaje byc gola linia tekstu i staje sie celem do klikniecia.
   Tresc linku bez zmian — to nadal ten sam wezel i ten sam href. */
.pdp .reltable a.rl {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--line-d);
  border-radius: 999px;
  color: var(--fam-deep, var(--navy));
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.pdp .reltable a.rl:hover,
.pdp .reltable a.rl:focus-visible {
  background: var(--fam-mist, var(--soft));
  border-color: var(--fam-deep, var(--navy));
  text-decoration: none;
}

/* ---------- 8. DOLNY PAS CTA: inne proporcje niz reszta strony -------------
   1,35/0,65 zamiast 1,2/1 — ostatnia zmiana szerokosci kolumny w rytmie.
   Prog 821px, bo styles.css:186 przelacza `.band` na jedna kolumne <=820px. */
@media (min-width: 821px) {
  .pdp .band .wrap { grid-template-columns: 1.35fr .65fr; }
}
.pdp .band .contact a { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.pdp .band .contact a:hover { border-bottom-color: #fff; }

/* ---------- 9. TELEFON: etykiety spec-2kol lamane WEWNATRZ SLOW ------------
   OBJAW: na 390px „Gestosc nasypowa" w karcie TuriColl NS pekalo na
   „Gesto/sc nasyp/owa".
   PRZYCZYNA: fluid.css:806 daje `td { overflow-wrap: anywhere }` ponizej
   560px. `anywhere` — w odroznieniu od `break-word` — zmniejsza takze
   MIN-CONTENT kolumny, wiec przy `white-space:nowrap` na kolumnach liczb
   (concept8, blok spec-2kol) pierwsza kolumna zostawala scisnieta do
   szerokosci jednej litery i lamala etykiety w srodku slow.
   LEK: pierwsza kolumna dostaje wlasny prog szerokosci i wraca do zawijania
   po granicach slow. Tabela robi sie wtedy szersza od karty i przewija sie
   SAMA — dokladnie tak, jak zaprojektowano wyzej (`display:block` +
   `overflow-x:auto`, dzis na otoczce `.spec-por__ramka`).

   UWAGA — dwa swiadome odejscia od pierwotnego szkicu, oba potwierdzone
   pomiarem w przegladarce:

   (a) Szkic dodawal tabeli `width: max-content; min-width: 100%`. Tego NIE
       robimy. Ponizej 1180px fluid.css:815 ustawia `.spec-card {overflow:
       visible}`, wiec tabela szersza niz karta nie zostalaby przewinieta
       wewnatrz karty, tylko wypchnelaby CALA STRONE w poziomie. Zostawiamy
       `width:100%` z bloku spec-2kol — przewija sie sama tabela, a dokument
       zostaje na szerokosci ekranu.

   (b) Samo przywrocenie zawijania po slowach nie wystarcza: `.spec-card` jest
       ELEMENTEM SIATKI hero, a element siatki ma domyslnie `min-width:auto`,
       czyli podloge rowna szerokosci minimalnej TRESCI. Gdy etykiety przestaja
       sie lamac w srodku slow, ta podloga rosnie do 408px i rozpycha kolumne
       hero ponad ekran (zmierzone: body.scrollWidth 436px przy oknie 390px).
       Dlatego karta z tabela przewijalna dostaje `min-width: 0` — kolumna
       moze sie zwezic, a nadmiar bierze na siebie pasek przewijania SAMEJ
       tabeli (dokladnie to, po co `overflow-x:auto` tam jest).
       `:has(table.spec-2kol)` zaweza regule do jedynej karty, ktora ma
       przewijalna tabele; pozostale 11 produktow ma zwykle tabele i nie wolno
       im pozwolic zwezic sie pod `overflow:hidden` karty na desktopie.
       Efekt uboczny: znika tez wczesniejsze przepelnienie przy 320px
       (body.scrollWidth 327px przy oknie 320px). */
.pdp .phero .spec-card:has(table.spec-2kol) { min-width: 0; }
@media (max-width: 560px) {
  /* Ta sama ochrona obejmuje teraz obie tabele karty: dlugie etykiety
     („Rozpuszczalnosc", „Masa czasteczkowa") przeniosly sie do tabeli
     wspolnej i tam tez nie moga sie lamac w srodku slowa. */
  .pdp .spec-card table.spec-wspolne td,
  .pdp .spec-card table.spec-2kol td:first-child {
    white-space: normal;
    overflow-wrap: break-word;  /* nie `anywhere`: `anywhere` zbija min-content
                                   kolumny do jednej litery i to on byl zrodlem
                                   lamania „Gesto/sc nasyp/owa" */
    word-break: normal;
    hyphens: none;
  }

  /* PAS POROWNAWCZY NA TELEFONIE: etykieta NAD para wartosci, nie obok.
     Zmierzone przy 390 px: trzy kolumny obok siebie potrzebuja 354 px przy
     karcie szerokiej na 332 px, wiec „0,10–0,30 g/ml" wychodzilo poza
     krawedz i zostawalo schowane za przewijaniem, o ktorym czytelnik nie
     wie — a to najgorszy mozliwy los dla liczby, ktora ma sluzyc do
     porownania. Etykieta nad wartosciami daje kazdemu workowi polowe
     szerokosci karty (166 px przy 390 px): wszystko widoczne, bez
     przewijania, az do ~280 px. */
  .pdp .spec-card table.spec-2kol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Odstep od krawedzi daja KOMORKI, nie siatka. Gdyby dawala go siatka,
       kreski rozdzielajace konczylyby sie 18 px przed brzegiem karty, a
       kreski tabeli wspolnej biegna od krawedzi do krawedzi — dwie dlugosci
       linii w jednej karcie to znowu „nierowne krawedzie". */
    padding: 0 0 10px;
  }
  /* `tbody` tez, i to nie jest ozdobnik: parser HTML wstawia go sam miedzy
     `table` a `tr`, wiec bez tego jedynym dzieckiem siatki bylby `tbody`
     i cala tabela ustawilaby sie w jednej komorce. */
  .pdp .spec-card table.spec-2kol tbody,
  .pdp .spec-card table.spec-2kol tr { display: contents; }
  .pdp .spec-card table.spec-2kol td:empty { display: none; }
  /* Naglowek workow moze sie tu zlamac po spacji („WOREK / 15 KG"). To nie
     ustepstwo estetyczne, tylko zawor: przy 320 px dwa naglowki trzymane
     w jednej linii zadaja 267 px przy karcie na 262 px. Wartosci pod spodem
     nadal sie NIE lamia. */
  .pdp .spec-card table.spec-2kol th {
    width: auto;
    padding: 0 8px 7px var(--spec-pad, 18px);
    border-bottom: 0;
    white-space: normal;
  }
  /* Etykieta na calej szerokosci; jej gorna kreska jest jedynym separatorem
     miedzy parametrami, bo w siatce nie ma juz wierszy tabeli. */
  .pdp .spec-card table.spec-2kol td:first-child {
    grid-column: 1 / -1;
    width: auto;
    padding: 9px var(--spec-pad, 18px) 1px;
    border-top: 1px solid color-mix(in srgb, var(--fam-deep, var(--navy, #17156D)) 22%, transparent);
  }
  /* Wartosci gubia kreske z reguly bazowej `.spec-card td` — w siatce nie
     lezy juz ona miedzy wierszami, tylko wisi urwana nad pojedyncza liczba. */
  .pdp .spec-card table.spec-2kol td + td {
    padding: 0 8px 2px var(--spec-pad, 18px);
    border-top: 0;
  }
}

/* ---------- 10. OGRANICZONY RUCH -------------------------------------------
   Jedyne animacje w calym bloku to unoszenie kafla `.simple .s` i tlo
   przycisku „Zobacz"; przy `prefers-reduced-motion` gasimy oba. Stany hover
   nadal dzialaja, tylko bez przejscia i bez przesuniecia. */
@media (prefers-reduced-motion: reduce) {
  .pdp .simple .s,
  .pdp .reltable a.rl { transition: none; }
  .pdp .simple .s:hover { transform: none; }
}
/* ======================= KONIEC BLOKU PDP "RYTM" ========================== */

/* ###########################################################################
   ###  2026-08-10  MENU MOBILNE — PELNY EKRAN + DRUGI POZIOM W SZUFLADZIE  ###
   ###  (blok wlasny; NIE mieszac z blokiem PDP "RYTM" powyzej)             ###
   ###########################################################################

   CO ZGLOSIL WLASCICIEL
   1. Szuflada z burgera zajmowala tylko gorne ~478 px ekranu (start 120 px,
      max-height calc(100dvh - 120px)) — pod spodem widac bylo przyciemniona
      strone. Ma zajmowac CALY ekran telefonu.
   2. Dotkniecie "Produkty" przenosilo na sekcje z kaflami (#rodziny). Kafle na
      telefonie sa wysokie, wiec zeby zobaczyc szesc linii trzeba bylo przewijac
      pol ekranu na kazda. Linie maja sie pokazac OD RAZU, w menu.
   3. To samo dla "Zastosowania".

   JAK TO JEST ZROBIONE (i dlaczego tak)
   * ZERO ZMIAN W HTML. Szuflada jest na 126 stronach x 3 jezyki; kazda edycja
     znacznikow to ryzyko rozjazdu miedzy drzewem statycznym a Next.js. Drugi
     poziom buduje w locie assets/site-fixes.js z MEGAMENU, ktore i tak siedzi
     juz w kodzie kazdej strony (.mega .mcol / .c8-app-menu-card). Dzieki temu
     kazdy jezyk dostaje SWOJE teksty za darmo — bo megamenu jest tlumaczone.
   * Panel drugiego poziomu (.c8mm-panel) i gorna belka (.c8mm-bar) sa doczepiane
     do <body>, a nie do nav.main. Powod: nav.main ma overflow-y:auto, wiec
     dziecko position:absolute przewijaloby sie razem z lista, a position:fixed
     w srodku nav.main jest kotwiczone do nav.main (element ma will-change:
     transform, co czyni go blokiem zawierajacym). Z <body> geometria jest
     jednoznaczna: inset:0 = caly ekran.

   CZEGO TU CELOWO NIE RUSZAMY
   * Blokada przewijania tla siedzi na `html.nav-open{overflow:hidden}`
     (styles.css:378) — NIE na body. Ustawienie overflow na body robi z niego
     kontener przewijania i psuje position:sticky. Nie dotykamy.
   * Animacja wjazdu szuflady (navDrawerIn), stopka z "Pomoc w doborze" /
     "Kontakt" na gradiencie i podnoszenie naglowka nad przyklejone podmenu
     (z-index 140/141 w bloku fix9 C1b) zostaja bez zmian.
   =========================================================================== */

:root {
  --c8mm-belka: 58px;                 /* wysokosc gornej belki szuflady */
  --c8mm-granat: #17156d;
  --c8mm-kreska: rgba(23, 21, 109, .10);
  --c8mm-szary: #5b6080;
}

/* ---------------------------------------------------------------------------
   1. SZUFLADA NA CALY EKRAN
   Nadpisujemy trzy wczesniejsze deklaracje z tego samego pliku:
     - fix9 C1b (3068): top:120px + max-height:calc(100dvh - 120px)
     - punkt 7  (3697): max-height:calc(100dvh - 120px)
     - fix11 2b (4103): padding:6px 24px 0
   Selektory sa identyczne albo mocniejsze, a blok jest PÓŹNIEJ w pliku, wiec
   wygrywa. Poziomy padding zostaje 24 px, bo stopka CTA wychodzi poza szuflade
   przez `margin: auto -24px 0` i kazda inna wartosc zostawilaby biale marginesy.
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  html.nav-open header.nav nav.main,
  html.nav-open body > header.nav nav.main {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding: calc(var(--c8mm-belka) + env(safe-area-inset-top, 0px)) 24px 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* Topbar mial z-index 141 (fix9 C1b), czyli NAD naglowkiem 140 — przy
     szufladzie zaczynajacej sie od y=0 malowalby sie na jej pierwszych 34 px.
     Schodzi pod naglowek, ale nadal zostaje wysoko nad przyklejonymi
     podmenu (te dostaja z-index 1), wiec kolejnosc warstw z fix9 stoi. */
  html.nav-open .topbar { z-index: 100 !important; }

  /* przyciemnienie tresci: pod szuflada nic juz nie widac, ale scrim pracuje
     przy ZAMYKANIU (szuflada gasnie, scrim gasnie za nia) — ma objac caly ekran */
  html.nav-open body::after { inset: 0 !important; }

  /* Stopka CTA: pelnoekranowa szuflada nie ma zaokraglonych rogow, a odstep
     14 px z linii 4629 przestaje byc potrzebny — teraz to przelacznik jezyka
     (nizej) niesie `margin-top:auto` i spycha oba elementy na dol ekranu.
     `position:sticky; bottom:0` przy dlugiej liscie dziala jak wczesniej. */
  html.nav-open nav.main > .c8-drawer-cta {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }

  /* Przelacznik jezyka (kopia z topbara, doklejany przez site-fixes.js).
     Topbar z przelacznikiem PL/EN/DE jest teraz zakryty przez szuflade, wiec
     bez tej kopii jezyka nie dalo by sie zmienic przy otwartym menu. */
  html.nav-open nav.main > .c8mm-lang {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin: auto 0 0 !important;
    padding: 16px 0 18px !important;
    animation: navDrawerItemIn .44s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .27s;
  }

  /* Pelny ekran daje ~300 px zapasu — pozycje moga oddychac i lepiej
     trafiac palcem (wysokosc wiersza rosnie z 60 do ~68 px). */
  html.nav-open header.nav nav.main > a,
  html.nav-open header.nav nav.main > .hasdrop > a,
  html.nav-open header.nav nav.main > .hasmega > a { padding: 19px 2px !important; }
}

/* na niskich ekranach (telefon trzymany poziomo) wracamy do ciasnego wiersza */
@media (max-width: 1040px) and (max-height: 700px) {
  html.nav-open header.nav nav.main > a,
  html.nav-open header.nav nav.main > .hasdrop > a,
  html.nav-open header.nav nav.main > .hasmega > a { padding: 13px 2px !important; }
  html.nav-open nav.main > .c8mm-lang { padding: 10px 0 12px !important; }
}

.c8mm-lang { display: none; }
.c8mm-lang__a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(23, 21, 109, .16);
  border-radius: 11px;
  background: #fff;
  color: var(--c8mm-szary, #5b6080);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.c8mm-lang__a.is-on {
  background: var(--c8mm-granat, #17156d);
  border-color: var(--c8mm-granat, #17156d);
  color: #fff;
}
.c8mm-lang__a:active { background: #eef0f9; }
.c8mm-lang__a.is-on:active { background: #0f0e52; }

/* ---------------------------------------------------------------------------
   2. GORNA BELKA SZUFLADY (logo + zamkniecie)
   Szuflada zaslania teraz naglowek razem z burgerem, wiec zamkniecie musi byc
   w niej samej. Belka jest osobnym elementem <body>, dzieki czemu nie zmienia
   kolejnosci dzieci nav.main (na `nth-child` wisza opoznienia animacji pozycji).
   --------------------------------------------------------------------------- */
.c8mm-bar,
.c8mm-panel { display: none; }

@media (max-width: 1040px) {
  html.nav-open .c8mm-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 146;                      /* naglowek ma 140 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: calc(var(--c8mm-belka) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0 18px;
    background: #fff;
    border-bottom: 1px solid var(--c8mm-kreska);
    animation: c8mmBelkaIn .42s cubic-bezier(.22, 1, .36, 1) both;
  }
  html.nav-closing .c8mm-bar { animation: c8mmBelkaOut .26s ease both !important; }
}

.c8mm-bar__logo { display: flex; align-items: center; }
.c8mm-bar__logo img { display: block; width: auto; height: 30px; }

.c8mm-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: #f1f3fa;
  color: var(--c8mm-granat);
  cursor: pointer;
  transition: background .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.c8mm-close:active { background: #e3e7f5; transform: scale(.94); }
.c8mm-close svg { width: 20px; height: 20px; }

@keyframes c8mmBelkaIn  { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
@keyframes c8mmBelkaOut { from { opacity: 1; } to { opacity: 0; } }

/* ---------------------------------------------------------------------------
   3. DRUGI POZIOM — panel wsuwany z prawej
   Wiersz zamiast kafla: 4-pikselowy znacznik w kolorze rodziny (te same
   wartosci co --category-accent / --app-accent na stronach linii i zastosowan),
   nazwa, jedno zdanie, strzalka. Szesc pozycji miesci sie na ekranie 360x640.
   --------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  html.nav-open .c8mm-panel {
    position: fixed;
    inset: 0;
    z-index: 147;                      /* nad belka (146) — klasyczny "push" */
    display: flex;
    flex-direction: column;
    background: #fff;
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    transition:
      transform .32s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear .32s;
  }
  html.nav-open .c8mm-panel.is-open {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition:
      transform .32s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0s;
  }
}
/* przy zamknietym menu panel nie ma prawa wisiec nad trescia */
html:not(.nav-open) .c8mm-panel,
html:not(.nav-open) .c8mm-bar { display: none !important; }

/* --- pasek panelu: powrot + zamkniecie --- */
.c8mm-panel__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: calc(var(--c8mm-belka) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 12px 0 8px;
  border-bottom: 1px solid var(--c8mm-kreska);
}
.c8mm-back {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--c8mm-granat);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .2s ease;
}
.c8mm-back:active { background: #f1f3fa; }
.c8mm-back::before {
  content: "";
  width: 9px;
  height: 9px;
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* --- naglowek panelu --- */
.c8mm-panel__title {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 20px 6px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--c8mm-granat);
}

/* --- lista wierszy --- */
.c8mm-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 12px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.c8mm-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px 11px 6px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}
.c8mm-row + .c8mm-row::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 8px;
  top: 0;
  height: 1px;
  background: var(--c8mm-kreska);
}
.c8mm-row:active { background: color-mix(in srgb, var(--c8mm-c, #17156d) 9%, #fff); }
.c8mm-row:active::before,
.c8mm-row:active + .c8mm-row::before { opacity: 0; }

.c8mm-row__znak {
  flex: 0 0 auto;
  align-self: stretch;
  width: 4px;
  min-height: 36px;
  margin: 2px 0;
  border-radius: 99px;
  background: var(--c8mm-c, var(--c8mm-granat));
}
.c8mm-row__txt { flex: 1 1 auto; min-width: 0; }
.c8mm-row__t {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--c8mm-granat);
}
.c8mm-row__d {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 12.6px;
  line-height: 1.34;
  color: var(--c8mm-szary);
}
/* nazwa handlowa: GLEBSZY odcien rodziny (--c8mm-t), nie akcent — akcenty
   TuriGel/Agro/Bio daja na bieli 2,0-2,9:1 i byly ponizej progu czytelnosci */
.c8mm-row__d em {
  font-style: normal;
  font-weight: 700;
  color: var(--c8mm-t, var(--c8mm-granat));
}
.c8mm-row__nowe {
  padding: 3px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c8mm-c, #17156d) 15%, #fff);
  color: var(--c8mm-t, var(--c8mm-granat));
  font-size: 9.6px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.c8mm-row__ar {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-top: 2px solid rgba(23, 21, 109, .32);
  border-right: 2px solid rgba(23, 21, 109, .32);
  transform: rotate(45deg);
  transition: border-color .2s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}
.c8mm-row:active .c8mm-row__ar {
  border-color: var(--c8mm-c, #00aed9);
  transform: rotate(45deg) translate(2px, -2px);
}

/* --- stopka panelu: wyjscie na pelna strone --- */
.c8mm-panel__foot {
  flex: 0 0 auto;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c8mm-kreska);
  background: #fff;
}
.c8mm-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 13px;
  background:
    radial-gradient(120% 165% at 4% 6%, rgba(56, 212, 241, .34) 0%, rgba(56, 212, 241, 0) 58%),
    linear-gradient(116deg, #17156d 0%, #1d2b96 42%, #0a7fb0 76%, #00aed9 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(9, 13, 44, .22);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.c8mm-all:active { transform: translateY(1px); }
.c8mm-all i { font-style: normal; font-weight: 700; }

/* --- kaskadowe wejscie wierszy (spojne z wejsciem szuflady) --- */
.c8mm-panel.is-open .c8mm-row,
.c8mm-panel.is-open .c8mm-panel__title {
  animation: c8mmWierszIn .38s cubic-bezier(.22, 1, .36, 1) both;
}
.c8mm-panel.is-open .c8mm-panel__title { animation-delay: .04s; }
.c8mm-panel.is-open .c8mm-row:nth-child(1) { animation-delay: .08s; }
.c8mm-panel.is-open .c8mm-row:nth-child(2) { animation-delay: .115s; }
.c8mm-panel.is-open .c8mm-row:nth-child(3) { animation-delay: .15s; }
.c8mm-panel.is-open .c8mm-row:nth-child(4) { animation-delay: .185s; }
.c8mm-panel.is-open .c8mm-row:nth-child(5) { animation-delay: .22s; }
.c8mm-panel.is-open .c8mm-row:nth-child(6) { animation-delay: .255s; }
.c8mm-panel.is-open .c8mm-row:nth-child(7) { animation-delay: .29s; }
@keyframes c8mmWierszIn {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- najwezsze telefony --- */
@media (max-width: 360px) {
  .c8mm-panel__title { padding: 12px 16px 4px; font-size: 19px; }
  .c8mm-panel__body { padding: 2px 8px 6px; }
  .c8mm-row { gap: 10px; padding: 10px 6px 10px 4px; }
  .c8mm-row__t { font-size: 15px; }
  .c8mm-row__d { font-size: 12.2px; }
  .c8mm-back { padding: 0 10px 0 8px; font-size: 14.5px; }
}

/* --- wysokie ekrany: szesc wierszy ma zapas, wiec moga oddychac --- */
@media (min-height: 740px) and (max-width: 1040px) {
  .c8mm-panel__title { padding-top: 18px; padding-bottom: 8px; }
  .c8mm-row { padding-top: 15px; padding-bottom: 15px; }
}

/* --- niskie ekrany: lista ma sie zmiescic, wiec wiersze sa ciasniejsze --- */
@media (max-height: 700px) and (max-width: 1040px) {
  .c8mm-panel__title { padding-top: 10px; padding-bottom: 4px; font-size: 19px; }
  .c8mm-row { padding-top: 9px; padding-bottom: 9px; }
  .c8mm-row__d { -webkit-line-clamp: 2; }
  .c8mm-panel__foot { padding-top: 8px; }
  .c8mm-all { min-height: 44px; }
}

/* --- tablety: lista nie rozjezdza sie na cala szerokosc --- */
@media (min-width: 600px) and (max-width: 1040px) {
  .c8mm-panel__title,
  .c8mm-panel__body,
  .c8mm-panel__foot {
    padding-left: max(16px, calc((100% - 620px) / 2)) !important;
    padding-right: max(16px, calc((100% - 620px) / 2)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.nav-open .c8mm-bar,
  html.nav-closing .c8mm-bar,
  .c8mm-panel.is-open .c8mm-row,
  .c8mm-panel.is-open .c8mm-panel__title { animation: none !important; }
  html.nav-open .c8mm-panel { transition: none !important; }
  .c8mm-close, .c8mm-back, .c8mm-row, .c8mm-all, .c8mm-row__ar { transition: none !important; }
}
/* ################## KONIEC BLOKU "MENU MOBILNE 2026-08-10" ################# */

/* ============================================================================
   PDP RYTM - poprawki po kontroli wizualnej (2026-08-10)
   ----------------------------------------------------------------------------
   Dwie uwagi z niezaleznego ogladu. Blok stoi na koncu celowo: ma nadpisywac
   reguly PDP RYTM, a nie byc przez nie nadpisywany.
   ============================================================================ */

/* UWAGA 1: wstega z logo (zwisa spod naglowka, pozycjonowana absolutnie) po
   podciagnieciu lewej kolumny hero do gory zaczela dotykac nadtytulu produktu -
   szpara 6-8 px zamiast 57-85 px. Odsuwamy TYLKO pierwsza kolumne, zeby karta
   danych po prawej nie drgnela. Ponizej 1181 px hero jest jednokolumnowe
   i wstega nie koliduje, wiec regula obowiazuje wylacznie na szerokich. */
@media (min-width: 1181px) {
  .pdp .phero .wrap > :first-child { padding-top: 26px; }
}

/* UWAGA 3: przy 1024 px kolumna z przyciskami zwezona do .65fr lamala DWA
   przyciski (TuriGel, TuriPro) na dwa wiersze. Nowa proporcja zostaje, ale
   dopiero od 1181 px; przedzial 821-1180 px wraca na proporcje sprzed zmiany. */
@media (min-width: 821px) and (max-width: 1180px) {
  .pdp .band .wrap { grid-template-columns: 1.2fr 1fr; }
}

/* ============================================================================
   DOKUMENTY NA TELEFONIE - tabela zamienia sie w karty        (2026-08-11)
   ----------------------------------------------------------------------------
   Tabela specyfikacji ma 4 kolumny. Na 390 px kolumna z nazwa produktu dostawala
   kilkadziesiat pikseli i nazwy lamaly sie w srodku wyrazow. Ponizej 700 px
   przechodzimy na uklad kartowy: nazwa, pod nia dane, pod nimi przycisk.
   Reguly celuja w PIERWSZA, SRODKOWE i OSTATNIA komorke, wiec dzialaja tak samo
   dla tabeli specyfikacji (4 kolumny) i certyfikatow (3 kolumny).
   ============================================================================ */
@media (max-width: 700px) {
  /* Naglowek tabeli nie ma czego opisywac w ukladzie kartowym. */
  .doctable thead { display: none; }

  .doctable,
  .doctable tbody { display: block; width: 100%; }
  .doctable tr { display: block; }

  /* Karta jednego produktu albo certyfikatu. */
  .doctable tbody tr:not(.docgroup) {
    padding: 14px 4px 16px;
    border-bottom: 1px solid var(--line, #E1E4EF);
  }
  .doctable tbody tr:not(.docgroup) td {
    display: inline;
    border: 0;
    padding: 0;
  }

  /* Nazwa produktu - cala szerokosc, wiec juz sie nie lamie w srodku wyrazu. */
  .doctable tbody tr:not(.docgroup) td:first-child {
    display: block;
    margin-bottom: 5px;
    font-size: 15.5px;
    line-height: 1.3;
  }
  .doctable tbody tr:not(.docgroup) td:first-child .docprod { font-weight: 700; }
  /* Wariant opakowania (worek 15 kg) tuz przy nazwie, na szaro. */
  .doctable .docwar { display: inline; margin-left: 6px; }

  /* Srodkowe komorki: typ i forma w jednej przygaszonej linii. */
  .doctable tbody tr:not(.docgroup) td:not(:first-child):not(:last-child) {
    font-size: 13.5px;
    color: var(--muted, #5B6076);
  }
  /* Kropka rozdzielajaca pojawia sie TYLKO miedzy dwiema srodkowymi komorkami,
     wiec tabela certyfikatow (jedna srodkowa) jej nie dostaje. */
  .doctable tbody tr:not(.docgroup) td:not(:first-child):not(:last-child)
    ~ td:not(:first-child):not(:last-child)::before {
    content: " · ";
    color: var(--line-d, #C9CEE0);
  }

  /* Przycisk: osobna linia, cala szerokosc - wygodny do kciuka. */
  .doctable tbody tr:not(.docgroup) td:last-child {
    display: block;
    margin-top: 11px;
    text-align: left;
  }
  .doctable tbody tr:not(.docgroup) td:last-child .docdl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
  }

  /* Pasek grupy produktowej zostaje - to on dzieli liste na sekcje. */
  .doctable .docgroup td { display: block; }
}