/* ---------------------------------------------------------- tokeny */
:root{
  --navy:#0b2545; --navy-2:#13315c; --ink:#16202e; --muted:#5b6b7f;
  --line:#dfe5ec; --bg:#ffffff; --bg-2:#f5f8fb; --bg-3:#eef3f8;
  --teal:#0e8082; --teal-2:#0b6e70; --amber:#b26b00; --danger:#a8321f;
  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,32,52,.06),0 8px 24px rgba(16,32,52,.06);
  --wrap:1180px; --gap:clamp(16px,3vw,32px);
  /* `Inter` STAL TU ZA `Segoe UI`, wiec na Windowsie nie wlaczylby sie nigdy,
     nawet gdyby ktos go wgral — a nie jest wgrany: w calym arkuszu nie ma ani
     jednego `@font-face`. Wpis wygladal na decyzje typograficzna, a nia nie
     byl. Usuniety, zeby arkusz nie klamal o tym, czego uzywa. */
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
/* `hidden` ma ukrywac ZAWSZE. Domyslna regula przegladarki
   `[hidden]{display:none}` ma specyficznosc selektora atrybutu i przegrywa
   z kazda nasza klasa ustawiajaca `display`. Zmierzone na filtrze katalogu:
   po wpisaniu frazy licznik pokazywal „1 of 149 shown", a strona miala
   DOKLADNIE te sama wysokosc 59 898 px i 149 kafli o niezerowej wysokosci —
   `getComputedStyle` ukrytego kafla zwracal `display: flex`. JavaScript
   ustawial atrybut poprawnie; to arkusz go uniewazniał.
   Istniejaca `.mega[hidden]` zostaje: dotyczy mega-menu i nic nie psuje,
   a ta regula i tak ja obejmuje. */
[hidden]{display:none !important}
a{color:var(--teal-2);text-underline-offset:2px}
a:hover{color:var(--navy)}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .5em;color:var(--navy);letter-spacing:-.015em}
h1{font-size:clamp(30px,4.2vw,46px);font-weight:750}
h2{font-size:clamp(23px,2.6vw,31px);font-weight:700}
h3{font-size:clamp(19px,1.9vw,22px);font-weight:670}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;z-index:99;border-radius:8px}

/* ---------------------------------------------------------- naglowek */
.top{background:var(--navy);color:#cfe0f0;font-size:13.5px}
.top .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;min-height:38px;flex-wrap:wrap}
.top a{color:#fff;text-decoration:none}
/* Kontakt w menu — pokazuje sie dopiero tam, gdzie znika pasek gorny. */
.nav-kontakt{display:none}
@media(max-width:560px){
  .nav.open .nav-kontakt{display:inline-flex;align-items:center;min-height:32px;
    font-size:15px;color:var(--teal-2);font-weight:600}
}
/* ----------------------------------- naglowek na telefonie: samo logo
   ZMIERZONE przy 390x844: pasek gorny ma 97 px, naglowek 71 px, a pierwsza
   tresc zaczyna sie dopiero na 168 px — czyli DWADZIESCIA PROCENT ekranu
   telefonu zajmuje cos, po co nikt nie przyszedl. Serwis klienta nie ma tam
   nic poza logo i to jest widoczna przewaga jego strony, zglosozna wprost.

   Na telefonie zostaje wiec samo logo i przycisk menu. Znaczki zaufania
   („manufacturer since 2009", „ISO certified", „licensed for hazardous")
   nie znikaja z serwisu — powtarzaja sie w sekcji powitalnej, w stopce
   i na stronie o firmie. Adres i telefon przenosimy do menu, zeby nie zginely:
   to jedyne dwie rzeczy z tego paska, ktorych nie da sie odtworzyc z tresci. */
/* Regula bazowa MUSI stac PRZED media query ponizej. Media query nie
   podnosi swoistosci, wiec gdy `display:flex` stoi POZNIEJ w pliku, wygrywa
   z `display:none` przy tej samej swoistosci (0,2,0). Zmierzone renderem:
   przy 700 px pasek mial 69 px zamiast 38 px, bo trzy znaczki zostawaly
   i lamaly go na dwa wiersze. Ponizej 561 px defekt sie nie ujawnial,
   bo tam chowa sie caly `.top` — dlatego pomiar na telefonie go nie zlapal. */
.top .badges{display:flex;gap:16px;flex-wrap:wrap;opacity:.92}
@media(max-width:820px){
  .top .badges{display:none}
  .top{font-size:12.5px}
  .top .wrap{min-height:0;justify-content:center;padding-block:5px}
}
@media(max-width:560px){
  .top{display:none}
}
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:var(--gap);min-height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);font-weight:760;font-size:20px;letter-spacing:-.02em}
.brand .logo{height:40px;width:auto;display:block}
@media(max-width:520px){.brand .logo{height:32px}}
.brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--navy) 0%,var(--teal) 100%);
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800;flex:none}
.brand small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
/* ZMIERZONE przy 1500, 1280 i 1024 px: naglowek mial 93 px zamiast 70 px,
   bo „Request a quote" spadalo pod nawigacje. „About" konczylo sie na x=1189,
   prawa krawedz kontenera to 1320, zostawalo 131 px, a przycisk ma 150 px —
   deficyt 19 px. Wezsze wypelnienie pozycji (7 x 4 px) i przycisku (2 x 4 px)
   daje okolo 36 px zapasu zamiast minus 19. */
.nav a{padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:560;font-size:15.5px}
.nav a:hover{background:var(--bg-3);color:var(--navy)}
.nav a.cta{background:var(--teal);color:#fff;padding:10px 14px;white-space:nowrap}
.nav a.cta:hover{background:var(--teal-2);color:#fff}
/* ------------------------------------------ pozycja otwierajaca katalog
   ZGLOSZONE: „najechanie na PRODUCTS tworzy brzydka ramke, ktora znika".
   Byl to zwykly prostokat tla `:hover` wspolny dla calej nawigacji — na tej
   jednej pozycji wyglada inaczej niz na pozostalych, bo pod nia rozwija sie
   panel na cala szerokosc strony i szary prostokat zostaje nad nim zawieszony
   bez zwiazku. Zamiast tla dajemy podkreslenie w kolorze marki: wskazuje
   dokladnie te pozycje, z ktorej panel wyrasta, i nie tworzy ksztaltu,
   ktory po chwili znika. */
.nav a.ma-mega{position:relative}
.nav a.ma-mega:hover,
.nav a.ma-mega[aria-expanded="true"]{background:transparent;color:var(--navy)}
.nav a.ma-mega::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;
  height:2px;border-radius:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:center;
  transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.nav a.ma-mega:hover::after,
.nav a.ma-mega[aria-expanded="true"]::after{transform:scaleX(1)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;font-size:15px;align-items:center;gap:9px;
  color:var(--navy);font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.burger:hover,.burger:focus-visible{border-color:var(--teal);color:var(--teal)}
/* Trzy kreski o STALYM miejscu w ukladzie: srodkowa znika, skrajne obracaja sie
   do srodka. Ikona nie zmienia rozmiaru, wiec przycisk nie „skacze" przy
   przelaczeniu, a oko ma ciaglosc miedzy jednym ksztaltem a drugim. */
.burger-ikona{position:relative;width:18px;height:13px;flex:none;display:block}
.burger-ikona i{position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .22s cubic-bezier(.3,.8,.3,1),opacity .14s}
.burger-ikona i:nth-child(1){top:0}
.burger-ikona i:nth-child(2){top:50%;margin-top:-1px}
.burger-ikona i:nth-child(3){bottom:0}
.burger[aria-expanded="true"] .burger-ikona i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-ikona i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-ikona i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.burger[aria-expanded="true"]{border-color:var(--teal);color:var(--teal)}
@media(max-width:940px){
  .burger{display:inline-flex}
  .nav{display:none;width:100%;order:9;padding-bottom:12px}
  /* Lista ma wlasne przewijanie i nie rosnie ponad ekran. Bez tego dziesiec
     pozycji plus dwa kontakty wypychaly tresc strony tak daleko, ze po
     otwarciu menu nie bylo widac NICZEGO poza menu — a wtedy nie wiadomo,
     czy strona jeszcze istnieje pod spodem. `100dvh` zamiast `100vh`, bo na
     telefonie pasek adresu chowa sie i wraca, a `vh` tego nie zauwaza. */
  .nav.open{display:flex;flex-direction:column;align-items:stretch;
    max-height:calc(100dvh - 128px);overflow-y:auto;overscroll-behavior:contain;
    border-top:1px solid var(--line);padding-top:8px;margin-top:6px}
  .nav.open a{padding:12px 10px;border-radius:8px}
  .nav.open a+a{border-top:1px solid var(--bg-3)}
  .site-head .wrap{flex-wrap:wrap}
}

/* ---------------------------------------------------------- hero */
/* PIERWSZY EKRAN MA ZDJECIE. Do 2026-09-23 byl plaskim gradientem, a
   fotografia klienta stala 340 px NIZEJ, w osobnym pasie — czyli strona
   otwierala sie niczym, a materialu bylo pod dostatkiem. Strona klienta
   otwiera sie pelnoekranowa fotografia zakladu i to jest jej najmocniejsza
   przewaga nad nasza wersja.

   GRADIENT ZOSTAJE NAD ZDJECIEM i to on odpowiada za czytelnosc tekstu.
   Krycie rosnie od lewej (0,94) ku prawej (0,74): tekst siedzi po lewej,
   wiec tam kontrast musi byc pelny, a po prawej zdjecie moze byc widoczne.
   Kolejnosc w skrocie `background` ma znaczenie — gradient MUSI byc
   wymieniony PIERWSZY, inaczej lezy POD zdjeciem i nic nie przyciemnia. */
.hero{
  background:
    linear-gradient(100deg,
      rgba(11,37,69,.94) 0%,
      rgba(11,37,69,.90) 38%,
      rgba(19,49,92,.80) 68%,
      rgba(23,64,110,.74) 100%),
    url("hero-tlo.webp") center 38% / cover no-repeat,
    linear-gradient(170deg,var(--navy) 0%,var(--navy-2) 58%,#17406e 100%);
  color:#eaf2fa;padding:clamp(52px,7.5vw,96px) 0}
/* Trzecia warstwa to ten sam gradient co wczesniej — jest ZAPASEM na wypadek,
   gdyby zdjecie sie nie wczytalo. Bez niej nieudane pobranie zostawia tekst
   na bialym tle i sekcja znika. */
.hero h1{text-shadow:0 2px 24px rgba(4,16,32,.45)}
.hero .lead{text-shadow:0 1px 14px rgba(4,16,32,.35)}
.hero h1{color:#fff;max-width:17ch}
.hero .lead{font-size:clamp(17px,1.9vw,20px);color:#c3d6e8;max-width:60ch}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}}
.searchbox{background:#fff;border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow);color:var(--ink)}
.searchbox label{display:block;font-weight:650;color:var(--navy);margin-bottom:8px;font-size:15px}
form.row,.searchbox .row{display:flex;gap:8px;align-items:center}
/* ZMIERZONE przy 390 px: podpowiedz „CAS number or product name" ma 225 px,
   a pole obok przycisku zostawia na nia 185 px — kupujacy widzial „CAS number
   or produ..." i nie dowiadywal sie, ze mozna wpisac takze nazwe. Pozostale
   pola w serwisie sprawdzone tym samym pomiarem: wszystkie mieszcza swoja
   podpowiedz. W ukladzie pionowym pole ma 324 px, wiec tekst wchodzi caly,
   a przycisk dostaje przy okazji pelna szerokosc. */
@media(max-width:480px){
  form.row,.searchbox .row{flex-direction:column;align-items:stretch}
  form.row .btn,.searchbox .row .btn{width:100%}
}
.searchbox input[type=search]{flex:1;min-width:0}
.searchbox .hint{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.chip{background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13.5px;text-decoration:none;color:var(--navy-2)}
.chip:hover{background:#fff;border-color:var(--teal)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(28px,4vw,44px)}
/* Pas liczb siedzi w siatce sekcji powitalnej, zeby na telefonie dalo sie go
   ustawic miedzy tekstem a wyszukiwarka. Na duzym ekranie ta siatka ma dwie
   kolumny — bez tej linii pas zajmowalby jedna z nich i wypychal wyszukiwarke
   do nowego wiersza. Zmierzone: przy 1500 px prawa dolna cwiartka ekranu
   stala pusta, a podpisy liczb lamaly sie na dwie linie. */
.hero-grid > .hero-stats{grid-column:1 / -1}
@media(max-width:700px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
.hero-stats div{border-left:2px solid rgba(255,255,255,.25);padding-left:14px}
.hero-stats b{display:block;font-size:clamp(22px,2.6vw,30px);color:#fff;font-weight:740;letter-spacing:-.02em}
.hero-stats span{font-size:13.5px;color:#a9c3dc}

/* ------------------------------------- pierwszy ekran telefonu
   Zmierzone na zrzucie 390x844: przed zmiana pierwszy ekran mial nadtytul
   w dwoch liniach, naglowek w trzech, akapit w OSMIU i dwa przyciski —
   a pas liczb, jedyny element zatrzymujacy wzrok sam z siebie, lezal ponizej
   krawedzi. Czlowiek ocenia strone tym, co widzi bez przewijania. */
@media(max-width:700px){
  /* drugi akapit to szczegoly — na telefonie sa o jeden ekran za wczesnie */
  .hero .lead-2{display:none}
  .hero .eyebrow{font-size:11.5px;letter-spacing:.08em}
  /* liczby wchodza na pierwszy ekran, przed wyszukiwarke */
  .hero-grid{display:flex;flex-direction:column}
  .hero-grid > div:first-child{order:1}
  .hero-stats{order:2;margin-top:22px}
  .hero-grid .searchbox{order:3;margin-top:20px}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .hero-stats b{font-size:26px}
}
/* Drugi przycisk byl przezroczysty na granacie i czytal sie jak wylaczony. */
.btn.hero-2{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn.hero-2:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
/* Na telefonie oba przyciski mialy rozna szerokosc (206 i 181 px) i byly
   dosuniete do lewej — prawa krawedz wychodzila poszarpana. Jedna kolumna
   na pelna szerokosc daje rowny blok i wiekszy cel dotyku. */
@media(max-width:700px){
  .hero-cta{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-cta>.btn{width:100%}
}

/* ---------------------------------------------------------- elementy */
input,select,textarea,button{font:inherit}
input[type=text],input[type=search],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:var(--teal);color:#fff;
  border:0;border-radius:9px;padding:12px 20px;font-weight:640;text-decoration:none;cursor:pointer;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
/* Kafle i menu reagowaly miekko (`transition` na cieniu i przesunieciu),
   a PRZYCISKI — czyli to, w co sie faktycznie klika — zmienialy kolor jednym
   cieciem. Dwie rozne kultury reakcji w jednym serwisie. */
.btn:hover{background:var(--teal-2);color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(14,128,130,.28)}
.btn:active{transform:translateY(0);box-shadow:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--navy)}
.btn.ghost:hover{background:var(--bg-3)}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--navy-2)}
section{padding:clamp(44px,6vw,76px) 0}
section.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.sec-head{max-width:70ch;margin-bottom:clamp(22px,3vw,34px)}
.sec-head p{color:var(--muted);margin:0}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-2);margin-bottom:10px}

/* ---------------------------------------------------------- karty */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:9px;transition:box-shadow .15s,border-color .15s,transform .15s}
a.card:hover{border-color:#bcd0e2;box-shadow:var(--shadow);transform:translateY(-1px)}
.card h3{margin:0;font-size:18.5px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .meta{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--muted)}
.cas{font-family:var(--f-mono);font-size:13px;background:var(--bg-3);border-radius:6px;padding:2px 8px;color:var(--navy-2);white-space:nowrap}
.tag{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--muted)}
.tag.ok{border-color:#bfe3d0;background:#f0faf4;color:#186a3f}
.tag.warn{border-color:#f0d9b0;background:#fdf7ec;color:var(--amber)}

/* ---------------------------------------------------------- produkt */
.prod{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:clamp(24px,3.4vw,44px);align-items:start}
/* minmax(0,1fr), nie 1fr: kolumna gridu ma domyslnie min-width:auto, wiec
   szeroka tabela rozpycha CALA strone zamiast przewijac sie w swoim pudelku.
   To bylo zrodlo poziomego scrolla na 390px, nie sama tabela. */
@media(max-width:980px){.prod{grid-template-columns:minmax(0,1fr)}}
.prod > *{min-width:0}
.crumbs{font-size:13.5px;color:var(--muted);padding:16px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal-2);text-decoration:underline}
.prod-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}
.prod-head .ids{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
table.spec{width:100%;border-collapse:collapse;font-size:15.5px;background:#fff}
table.spec th,table.spec td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
table.spec th{background:var(--bg-2);color:var(--navy);font-weight:640;width:30%;white-space:nowrap}
/* Font maszynowy ma sens dla numeru CAS — kolumny cyfr, ktora porownuje sie
   wzrokiem, i tam zostaje (`.cas`). ADRES POCZTOWY i masa netto to zdania,
   nie dane tabelaryczne: w foncie maszynowym czytaly sie jak zrzut
   z terminala. `tabular-nums` zachowuje rowne kolumny cyfr, dla ktorych font
   maszynowy w ogole tu trafil. */
table.spec td{font-family:var(--f-sans);font-size:14px;font-variant-numeric:tabular-nums}
.pack{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pack div{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff}
.pack b{display:block;color:var(--navy);font-size:15px}
.pack span{color:var(--muted);font-size:14px;font-family:var(--f-mono)}
.quote{position:sticky;top:92px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.quote h2{font-size:20px;margin-bottom:6px}
.quote p.small{font-size:14px;color:var(--muted)}
.quote .field{margin-bottom:11px}
.quote label{display:block;font-size:13.5px;font-weight:600;color:var(--navy-2);margin-bottom:5px}
/* Pole-pulapka na roboty. Ukrywane BEZ WARUNKU O PRZODKU — poprzednia regula
   brzmiala `.quote .hp` i na /contact/ nie dzialala, bo tamtejszy formularz nie
   ma przodka o tej klasie. Skutek byl gorszy niz wizualny: `ep-core.php:641`
   przerywa obsluge zgloszenia bez komunikatu, gdy pole jest wypelnione, wiec
   widoczna pulapka zjadala prawdziwe zapytania. Cztery niezalezne warstwy. */
.hp{position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px !important;height:1px !important;opacity:0 !important;
  pointer-events:none !important}
.docs{list-style:none;padding:0;margin:14px 0 0;font-size:14.5px}
.docs li{padding:7px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
/* ------------------------------------------------- kolumna czytelnicza
   ZMIERZONE na /solution/: w oknie 1500 px tekst, tabela i pas dwoch zdjec
   stały w jednej kolumnie szerokiej na 684 px, z ponad czterystoma pikselami
   pustki po kazdej stronie. Zrodlem bylo ustawienie JEDNEJ szerokosci dla
   wszystkiego. Akapit i tabela maja sprzeczne potrzeby: wiersz tekstu czyta
   sie zle powyzej mniej wiecej siedemdziesieciu znakow, a tabela i pas zdjec
   chca calej szerokosci. Zmierzony sklad tych stron: 11-12 akapitow i 6-9
   naglowkow wobec 1-2 tabel i 1-2 pasow zdjec. */
.prose{max-width:74ch}
/* Na stronach tresci ograniczenie szerokosci przenosi sie z KONTENERA na
   POSZCZEGOLNE elementy. Kontener zajmuje cala szerokosc `.wrap`, wiec tabela
   i pas zdjec maja tyle miejsca, ile potrzebuja, a akapity i naglowki dostaja
   74ch i stoja przy TEJ SAMEJ lewej krawedzi co one.

   Pierwsza proba srodkowala kolumne tekstu i wypuszczala szerokie elementy
   przez `translateX(-50%)`. Dzialalo, ale wygladalo na blad: zdjecia zaczynaly
   sie 230 px na lewo od naglowka strony, wiec strona sprawiala wrazenie zle
   zlozonej, mimo ze byla zlozona dokladnie tak, jak zaplanowano. Wspolna lewa
   krawedz nie wymaga od patrzacego zadnego wyjasnienia. */
.wrap > .prose{max-width:none;margin-inline:0}
.wrap > .prose > h1,
.wrap > .prose > h2,
.wrap > .prose > h3,
.wrap > .prose > h4,
.wrap > .prose > p,
.wrap > .prose > ul,
.wrap > .prose > ol,
.wrap > .prose > blockquote,
.wrap > .prose > details,
.wrap > .prose > dl{max-width:74ch}
/* Spis produktow jest SIATKA, nie lista tekstowa — ograniczenie szerokosci
   zostawialo mu pusta prawa strone i lamalo nazwy na dwie linie. */
.wrap > .prose > ul.lista-produktow{max-width:none}
/* Obrazy w tresci pochodza z materialu KLIENTA, wiec ich rozmiar jest danymi,
   nie zalozeniem — zmierzone w uploads/legacy: 1349 plikow, mediana szerokosci
   600 px, 166 ponizej 300 px, najwiekszy 3764 px. Poprzednia regula miala
   `width:100%` i rozciagala kazdy z nich na cala szerokosc kolumny, wiec plik
   300-pikselowy byl powiekszany dwuipolkrotnie. Do tego `object-fit:cover`
   przycinal to, co nie zmiescilo sie w 520 px wysokosci.

   `width:auto` zatrzymuje obraz na jego naturalnej wielkosci, `max-width:100%`
   pilnuje, zeby nie wyszedl poza kolumne, a `max-height` z `height:auto`
   zmniejsza proporcjonalnie te kilka plikow, ktore sa bardzo wysokie.
   Zadna z tych trzech linii nie potrafi obrazu POWIEKSZYC. */
.prose img{width:auto;height:auto;max-width:100%;max-height:560px;
  border:1px solid var(--line);border-radius:12px;margin:20px auto;display:block}
.prose figure{margin:20px 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:18px 0}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--bg-2);color:var(--navy);font-weight:640}
.prose h2{margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin:.35em 0}
.notice{border-left:3px solid var(--amber);background:#fdf7ec;padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;font-size:15px}
.notice.teal{border-color:var(--teal);background:#f0f8f8}
.faq details{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;background:#fff;margin-bottom:10px}
.faq summary{font-weight:640;color:var(--navy);cursor:pointer}
.faq p{margin:10px 0 0;color:var(--muted)}

/* ---------------------------------------------------------- filtr katalogu */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.filters input[type=search]{max-width:320px}
/* Pole stoi teraz nad siatka, nie w pasku chipow — przyklejenie dziala tylko
   w obrebie rodzica, a pasek konczy sie u gory strony. */
.filtr-pole{max-width:320px;margin:0 0 18px}
/* Na telefonie katalog ma 59 823 px wysokosci — okolo siedemdziesieciu pieciu
   gestow przewijania. Pole filtra jedzie wiec razem z trescia, zeby zawezenie
   listy nie wymagalo powrotu na poczatek strony. Przyklejone jest SAMO POLE:
   siedem chipow kategorii lamie sie tu na dwa rzedy i razem z naglowkiem
   zajmowaloby ponad jedna piata ekranu. `top` odpowiada wysokosci
   przyklejonego naglowka, inaczej pole chowaloby sie pod nim. */
@media(max-width:660px){
  .filtr-pole{position:sticky;top:70px;z-index:30;max-width:none;
    background:var(--bg);padding:10px 0;margin:0 0 14px;
    box-shadow:0 6px 14px -8px rgba(11,37,69,.35)}
  .filtr-pole input[type=search]{max-width:none;width:100%}
}
.count{color:var(--muted);font-size:14.5px}

/* ---------------------------------------------------------- stopka */
.site-foot{background:var(--navy);color:#b9cde0;padding:clamp(40px,5vw,60px) 0 26px;font-size:15px}
.site-foot h4{color:#fff;font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.site-foot a{color:#d8e6f3;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--gap)}
@media(max-width:860px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------------------------------------- obszar dotyku na telefonie
   ZMIERZONE przy 390 px przez DevTools, na kazdej badanej stronie te same
   trzy grupy celow ponizej 32 px wysokosci:
     17 x odnosnik w stopce            h=20
      2 x e-mail i telefon w pasku gory h=18
      1 x okruszek nawigacji            h=16
   Dwa srodkowe to `mailto:` i `tel:` — na telefonie dotkniecie numeru
   nawiazuje polaczenie, wiec to najkrotsza sciezka kontaktu w calym serwisie
   i akurat ona miala najmniejszy cel. Siedemnascie odnosnikow stopki stoi
   jeden pod drugim, wiec maly cel oznacza tam trafianie w sasiada.

   `min-height` z wysrodkowaniem powieksza OBSZAR, nie tekst — rytm pionowy
   i wielkosc pisma zostaja te same. Margines pozycji stopki zmniejszony,
   bo odstep daje teraz sama wysokosc celu. */
@media(max-width:660px){
  .top a{display:inline-flex;align-items:center;min-height:32px}
  .site-foot .foot-grid li a{display:inline-flex;align-items:center;min-height:32px}
  .site-foot .foot-grid li{margin-bottom:2px}
  .crumbs a{display:inline-flex;align-items:center;min-height:32px}
  /* Podsumowanie akordeonu jest przyciskiem rozwijajacym, wiec podlega temu
     samemu progowi co pozostale cele — zmierzone 24 i 28 px na karcie
     produktu. Nasze <details>, nie wtyczki: te sa pomijane. */
  /* `display:list-item`, NIE `flex`. Powiekszenie celu dotyku przez `flex`
     kasowalo trojkat rozwijania — znacznik rysuje wlasnie `list-item`.
     Wysokosc celu daje teraz wypelnienie: zmierzone 24 i 28 px + 2x8 px
     to 40 i 44 px, powyzej progu 32 px, a znacznik zostaje na miejscu. */
  .faq summary,.faq-lista summary,.prose > details > summary,
  .ghs details.pstat > summary{min-height:38px;display:list-item;padding-block:8px}
  /* Naglowki kategorii i rodzin oraz odnosniki „See all" — wykryte dopiero
     pomiarem liczacym KAZDY odnosnik, a nie wybrane klasy. */
  .kat-head h3 a,.kat-head a.kat-all,article.rodz h3 a{
    display:inline-flex;align-items:center;min-height:32px}
}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:8px}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;font-size:13.5px;color:#93adc7;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pager{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap}
.pager a,.pager span{border:1px solid var(--line);border-radius:8px;padding:8px 14px;text-decoration:none;color:var(--navy)}
.pager .current{background:var(--navy);color:#fff;border-color:var(--navy)}
@media print{.site-head,.site-foot,.quote,.top{display:none}}

/* --------------------------------------------------- mobile: bez poziomego scrolla
   Zmierzone na 390px: tabela specyfikacji (th nowrap) rozpychala strone,
   przez co przycisk menu wyjezdzal poza ekran, a tekst byl ucinany.
   Tabela dostaje wlasny scroll, naglowki moga sie lamac. */
@media (max-width:660px){
  table.spec{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.spec th{white-space:normal;width:42%}
  table.spec td{word-break:break-word}
  .prose{overflow-wrap:anywhere}
  .prose img{max-height:320px}
  .pack{grid-template-columns:1fr}
  .top .wrap{gap:4px;padding-block:6px}
  .top .badges{gap:8px;font-size:12.5px}
  .quote{position:static}
  .crumbs{font-size:12.5px}
}

/* ------------------------------------------------ klasyfikacja GHS/CLP
   Dane autorytatywne z MolGod (zharmonizowany Zalacznik VI do CLP).
   Kolor NIE jest jedynym nosnikiem informacji — obok zawsze stoi slowo
   (Danger/Warning) i kod zwrotu, bo sam kolor lamie WCAG 1.4.1. */
.ghs{margin:34px 0;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;background:var(--bg-2)}
.ghs h2{margin-top:0}
.ghs-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.ghs-pics{display:flex;gap:10px;flex-wrap:wrap}
.ghs-pics img{width:72px;height:72px;border:0;border-radius:0;margin:0;background:#fff}
.ghs-meta{min-width:200px;flex:1}
.signal{display:inline-block;margin:0 0 6px;font-weight:760;letter-spacing:.06em;text-transform:uppercase;
  font-size:14px;padding:5px 14px;border-radius:7px}
.signal.danger{background:#fdecea;color:#8c2415;border:1px solid #f0c2ba}
.signal.warning{background:#fdf7ec;color:#7a4a00;border:1px solid #f0d9b0}
.ghs .src{margin:0;font-size:13.5px;color:var(--muted)}
.hlist{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:7px}
.hlist li{display:flex;gap:10px;align-items:baseline;font-size:15.5px}
.hcode{font-family:var(--f-mono);font-size:13px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:2px 8px;color:var(--navy);flex:none;min-width:58px;text-align:center}
.pstat{margin-bottom:14px}
.pstat summary{cursor:pointer;font-weight:620;color:var(--navy-2);font-size:15px}
.pstat[open] summary{margin-bottom:10px}
.ghs-links{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.ghs .cite{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tag.danger{border-color:#f0c2ba;background:#fdecea;color:#8c2415;font-weight:640}
.tag.warn{border-color:#f0d9b0;background:#fdf7ec;color:#7a4a00;font-weight:640}
a.tag{text-decoration:none}
a.tag:hover{border-color:var(--navy);color:var(--navy)}
@media(max-width:660px){.ghs{padding:16px}.ghs-pics img{width:56px;height:56px}}

/* ------------------------------------------------ strony firmowe */
.prose .lead{font-size:18.5px;color:var(--navy-2);line-height:1.55}
.prose figure{margin:22px 0}
.prose figure.wide img{width:100%;max-height:420px;object-fit:cover}
.prose .grid figure{margin:0}
.prose .grid figure img{margin:0;height:100%;max-height:300px;object-fit:cover}
.prose ol{padding-left:1.2em}
.prose ol li{margin:.4em 0}
.chip-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip span{opacity:.65;font-size:12px;margin-left:3px}
.card time{font-size:13px;color:var(--muted)}

/* ------------------------------------------------ karta ze zdjeciem */
/* UWAGA: ta regula miala WCZESNIEJ dwie deklaracje `background` — nowa biala
   i zostawiona po staremu `var(--bg-3)`. Wygrywala ta druga, wiec poprawka
   lezala w pliku i nie dzialala: etykieta nadal plywala w szarym polu.
   Zostaje JEDNA deklaracja. */
/* Etykieta ma WLASNA niebieska ramke przy samej krawedzi obrazu. Przy ciasnym
   odstepie dotykala krawedzi kafla i wygladala na ucieta po bokach. Odstep
   jest teraz wyrazny i JEDNAKOWY z czterech stron, a sam obraz nieco mniejszy —
   dzieki temu ramka etykiety jest widoczna w calosci. */
.card-foto .card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-foto .card-body h3{font-size:17.5px}
@media(max-width:620px){.card-foto > img{height:178px;padding:14px 16px}}

/* ------------------------------------------------ zdjecia produktu klienta
   Poprzednia wersja tej sekcji robila dwie szkody naraz. Kadrowala etykiete
   przez `object-fit:cover` z limitem 440 px, przez co ramka etykiety urywala
   sie w polowie; i sciskala fotografie klienta do paska 120 px wysokosci,
   czyli do rozmiaru, w ktorym nie widac na nich nic.

   Teraz: dwie kolumny zamiast czterech, kafel o stalej proporcji 4:3 i obraz
   WPISANY w kafel (`contain`), nigdy przyciety. Kafel jest bialy, bo zdjecia
   klienta maja biale tlo i kazdy inny kolor obrysowywalby je prostokatem.

   `--nat` to naturalna szerokosc pliku, wpisywana przez szablon z odczytu
   naglowka. `max-width:min(100%, var(--nat))` zatrzymuje obraz na jego wlasnej
   wielkosci — 600-pikselowa fotografia nie zostanie rozciagnieta do 570 px
   kolumny i dalej, cokolwiek zrobi sie z szerokoscia tresci. Bez tej linii
   ten sam plik na szerokim ekranie rozjezdza sie w plame. */
.galeria{margin:30px 0}
.galeria-reszta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.galeria-reszta.jedna{grid-template-columns:minmax(0,620px)}
.galeria-reszta.trzy{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.galeria-reszta figure{--nat:100%;margin:0;background:#fff;border-radius:14px;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,37,69,.07),0 6px 20px rgba(11,37,69,.10);
  transition:box-shadow .2s ease,transform .2s ease}
.galeria-reszta figure:hover{box-shadow:0 2px 4px rgba(11,37,69,.09),0 12px 30px rgba(11,37,69,.14);
  transform:translateY(-2px)}
.galeria-reszta img{width:auto;height:auto;max-width:min(100%,var(--nat));max-height:100%;
  object-fit:contain;margin:0;border:0;border-radius:6px;display:block}
@media(max-width:980px){.galeria-reszta.trzy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.galeria-reszta,.galeria-reszta.jedna,.galeria-reszta.trzy{grid-template-columns:minmax(0,1fr);gap:14px}}


/* ------------------------------------------------ pas certyfikatow */
.pas-cert{padding:26px 0 30px;border-bottom:1px solid var(--line);background:#fff}
.cert-nagl{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:center}
.cert-owijka{position:relative}
/* Gradient mowi, ze tresc biegnie dalej. Bez niego poziome przewijanie na
   telefonie jest niewidoczne i siedem z jedenastu dokumentow po prostu
   nie istnieje dla ogladajacego. */
.cert-owijka::after{content:"";position:absolute;top:0;right:0;bottom:0;width:52px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 88%);pointer-events:none}
.cert-band{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cert-band img{width:100%;min-width:900px;height:auto;display:block;border:0;margin:0}
.cert-stopka{margin:12px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.cert-akcja{margin:10px 0 0;text-align:center;font-size:13.5px}
@media(min-width:1100px){.cert-owijka::after{display:none}}
@media(max-width:660px){.cert-band img{min-width:1200px}}

/* ------------------------------------------------ baner marki klienta */
.pas-baner{padding:0;line-height:0;background:#0b2545}
.pas-baner img{width:100%;height:auto;max-height:340px;object-fit:cover;object-position:center;
  display:block;border:0;margin:0}
/* Baner klienta ma 1910x700 (2,73:1). Przy 390 px szerokosci skaluje sie do
   143 px wysokosci, wiec `max-height` nie robi NIC — obraz jest mniejszy niz
   limit — a wtopiony w niego napis schodzi do kilku pikseli i jest nieczytelny.
   Potrzebna jest WYSOKOSC JAWNA: dopiero wtedy `object-fit:cover` przycina boki
   i powieksza lewa czesc, w ktorej siedzi tekst. */
@media(max-width:880px){.pas-baner img{height:230px;max-height:none;object-position:16% center}}
@media(max-width:520px){.pas-baner img{height:210px;object-position:10% center}}

/* ------------------------------------------------------------- mega menu */
/* UWAGA: .site-head ma juz position:sticky (linia ~35) — sticky JEST elementem
   pozycjonowanym, wiec sluzy za kontener dla .mega. Ustawienie tu
   position:relative ZABIERALO naglowkowi przyklejanie sie do gory. */
/* PANEL JEST KARTA O SZEROKOSCI TRESCI, nie pasem na cale okno.
   Wczesniej `.mega` szlo `left:0;right:0`, a kolumny mialy 1560 px na srodku —
   przy oknie 2560 px zostawalo po okolo 500 px BIALEJ PLACHTY z kazdej strony.
   Bialy prostokat bez tresci niczego nie niesie, a zaslania strone pod spodem
   i sprawia, ze panel czyta sie jak usterka, a nie jak rozwiniete menu.
   Teraz szerokosc panelu to szerokosc jego tresci, z zaokraglonym dolem
   i cieniem — czyli ksztalt, ktory czyta sie jak karta nad strona. */
.mega{position:absolute;left:50%;transform:translateX(-50%);top:100%;
  width:min(1560px,94vw);z-index:60;background:var(--bg);
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 26px 54px rgba(12,24,40,.18);overflow:hidden}
.mega[hidden]{display:none}

/* Panel miesci 149 pozycji i konczy sie w polowie wiersza — dolna krawedz
   czytala sie jak urwana tresc, nie jak zapowiedz dalszego ciagu. Rozmycie
   u dolu mowi „jest tego wiecej". `pointer-events:none`, zeby nie przejmowalo
   kliniec ani przeciagania paska przewijania. */
/* Wygaszenie dolnej krawedzi — jedyny sygnal, ze tresci jest wiecej, odkad
   pasek przewijania jest ukryty. Siega wyzej niz pigulka, wiec pozycje nie
   wjezdzaja pod nia ostra krawedzia. */
.mega::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74px;
  pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.80) 42%,var(--bg) 100%)}

/* Selektor MUSI byc .site-head .mega-in: .site-head .wrap{display:flex}
   z linii ~37 ma specyficznosc 0,2,0 i wygrywalo z samym .mega-in.
   Panel renderowal sie wtedy jako flex z align-items:center — kolumny
   schodkowe, naglowki kategorii poza widocznym obszarem. */
/* Panel szerszy niz reszta strony. `.mega-in` ma klase `wrap` (1180 px),
   przez co kazda z szesciu kolumn dostawala okolo 180 px i nazwy w rodzaju
   „Diethylene glycol monomethyl ether" lamaly sie na trzy wiersze. Panel
   rozwija sie nad trescia, wiec nie musi trzymac szerokosci tekstu strony. */
/* Panel otwiera sie NISKI i rozwija na zadanie. Pelna lista 149 pozycji
   zajmowala 620 px i zaslaniala wszystko pod naglowkiem — a menu ma pokazac,
   co jest w katalogu, nie zastapic strony. Wysokosc domyslna miesci okolo
   osmiu pozycji w kolumnie; reszta po klinieciu w pigulke na dole. */
.site-head .mega-in{max-width:none;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  align-items:start;padding:0 18px 52px;max-height:min(44vh,400px);overflow:auto;
  overscroll-behavior:contain;transition:max-height .28s cubic-bezier(.2,.8,.3,1)}
.mega.rozwiniete .mega-in{max-height:min(78vh,700px)}

/* Pigulka „pokaz wszystko". Lezy NAD lista, nie w niej — w srodku odjechalaby
   przy pierwszym obrocie kolka i nie byloby wiadomo, ze panel da sie rozwinac.
   Strzalka obraca sie o 180 stopni, wiec ten sam przycisk mowi „rozwin"
   i „zwin" bez zmiany ksztaltu. */
.mega-wiecej{position:absolute;left:50%;transform:translateX(-50%);bottom:11px;z-index:4;
  display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 17px;
  font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;
  box-shadow:0 2px 12px rgba(12,24,40,.12);transition:border-color .15s,color .15s}
.mega-wiecej:hover,.mega-wiecej:focus-visible{border-color:var(--teal);color:var(--teal)}
.mega-wiecej svg{transition:transform .25s}
.mega.rozwiniete .mega-wiecej svg{transform:rotate(180deg)}

/* PASEK PRZEWIJANIA UKRYTY CALKIEM. Najpierw byl systemowy (17 px szarej
   sztaby tuz przy tresci), potem wlasny, wezszy — i dalej bylo go widac.
   W rozwijanym panelu nawigacji pasek nie niesie zadnej informacji, ktorej
   nie niesie sama tresc: ze jest jej wiecej, widac po wygaszonej dolnej
   krawedzi (`.mega::after`), a przewijanie kolkiem, gladzikiem i palcem
   dziala tak samo bez niego.
   `scrollbar-width:none` obsluguje Firefoksa, `-ms-overflow-style` starsza
   Edge, pseudoelement `::-webkit-scrollbar` Chrome i Safari — trzy zapisy,
   bo zaden nie pokrywa wszystkich silnikow. */
.site-head .mega-in{scrollbar-width:none;-ms-overflow-style:none}
.site-head .mega-in::-webkit-scrollbar{width:0;height:0;display:none}

.mega-col{min-width:0;padding-inline:16px}
/* Pionowa linia miedzy kolumnami. Bez niej szesc list o roznej dlugosci zlewa
   sie w jedna sciane tekstu i nie widac, gdzie konczy sie kategoria. */
.mega-col + .mega-col{border-inline-start:1px solid var(--line)}

/* Naglowek kategorii PRZYKLEJONY do gory przewijanego panelu. Przy 29 pozycjach
   w kolumnie nazwa kategorii wyjezdzala poza widok po kilku obrotach kolka
   i nie bylo wiadomo, czego sie oglada liste. Sticky dziala w obrebie WLASNEJ
   kolumny, wiec kazda kategoria trzyma swoj naglowek nad swoja lista.
   Tlo jest nieprzezroczyste — inaczej pozycje przesuwaja sie widocznie pod
   napisem. Odstep do listy daje `ul{margin-top}`, nie `margin-bottom` naglowka:
   margines naglowka bylby przezroczysta szczelina, przez ktora przy przewijaniu
   przeswitywalyby nazwy produktow. */
.mega-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:7px;
  font-weight:700;font-size:.95rem;color:var(--navy);text-decoration:none;
  background:var(--bg);padding:18px 0 9px;border-bottom:2px solid var(--teal);
  /* Cien w kolorze TLA przedluza nieprzezroczyste tlo naglowka o 7 px pod
     obramowanie. Bez tego przez odstep miedzy kreska a pierwsza pozycja
     (`ul{margin-top:7px}`) przeswituja przy przewijaniu nazwy produktow —
     widoczne na zrzucie jako urwany pasek tekstu tuz pod nazwa kategorii.
     Marginesu nie da sie zamalowac tlem elementu, bo lezy poza jego obszarem. */
  box-shadow:0 7px 0 var(--bg)}
.mega-h:hover,.mega-h:focus-visible{color:var(--teal)}
.mega-h span{font-weight:600;font-size:.68rem;color:var(--teal-2);background:#e4f1f1;
  padding:2px 8px;border-radius:99px;line-height:1.55}

.mega-col ul{list-style:none;margin:7px 0 0;padding:0}
.mega-col li+li{margin-top:1px}
/* Pozycja jako pole do kliniecia, nie jako slowo w tekscie: podkreslenie
   w liscie 149 nazw dodaje szumu, a wypelnienie pokazuje zasieg celu.
   Ujemny margines wyrownuje tekst do krawedzi kolumny mimo wypelnienia. */
/* `overflow-wrap:anywhere` — nazwy typu „PPG (400/700/1000/2000/3000/4000)"
   nie maja ani jednej spacji po otwarciu nawiasu, wiec nie mialy gdzie sie
   zlamac i wychodzily poza kolumne NA SASIEDNIA, nachodzac na jej pozycje.
   `break-word` tu nie wystarcza: dziala dopiero, gdy slowo nie miesci sie
   w calej linii, a tu linia jest waska kolumna. */
.mega-col a{display:block;font-size:.845rem;line-height:1.38;color:var(--muted);
  text-decoration:none;padding:5px 9px;margin-inline:-9px;border-radius:7px;
  overflow-wrap:anywhere;transition:background .12s,color .12s}
.mega-col a:hover,.mega-col a:focus-visible{color:var(--navy);background:var(--bg-3);
  text-decoration:none}

@media (max-width:1100px){
  .site-head .mega-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Pierwsza kolumna KAZDEGO wiersza bez linii — inaczej separator wisi
     przy lewej krawedzi panelu w drugim i trzecim wierszu. */
  .mega-col:nth-child(3n+1){border-inline-start:0}
}
/* TELEFON: menu pokazuje KATEGORIE, nie 149 produktow.
   Zmierzone przed zmiana: panel wysokosci 460 px z 4237 px do przewiniecia.
   Zeby dojsc do szostej kategorii trzeba bylo minac ponad 120 nazw produktow,
   a przy jednej kolumnie nie widac nawet, ze kategorii jest szesc. Sam wybor
   kategorii miesci sie na jednym ekranie i otwiera strone kategorii, gdzie
   produkty maja zdjecia i numer CAS — czyli wiecej niz sama nazwa w liscie.
   PRZYWROCENIE pelnych list: usun regule `.mega-col ul{display:none}`. */
@media (max-width:760px){
  /* Na telefonie panel jest czescia naglowka, nie karta nad strona — nie ma
     po czym plywac, bo zajmuje cala szerokosc ekranu. */
  .mega{position:static;transform:none;width:auto;border:0;border-radius:0;
    box-shadow:none;overflow:visible}
  .mega::after{display:none}
  /* Lista ma tu szesc pozycji, wiec nie ma czego rozwijac. */
  .mega-wiecej{display:none}
  .site-head .mega-in{max-width:none;grid-template-columns:minmax(0,1fr);
    max-height:none;padding:4px 0 10px}
  .mega-col{padding-inline:0;border-inline-start:0}
  .mega-col + .mega-col{border-inline-start:0}
  .mega-col ul{display:none}
  /* Wiersz kategorii: nazwa z lewej, licznik z prawej, wysokosc celu dotyku
     powyzej progu 44 px. `position:static`, bo przy jednym ekranie nie ma
     czego przyklejac, a sticky bez przewijania tylko komplikuje uklad. */
  .mega-h{position:static;justify-content:space-between;box-shadow:none;
    padding:15px 2px;border-bottom:1px solid var(--line);font-size:1rem}
  .mega-col:last-child .mega-h{border-bottom:0}
}

/* ------------------------------------------------------- zespol i cytat */
.zespol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.osoba{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column}
.osoba img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:#eef2f6}
.osoba h3{margin:14px 14px 2px;font-size:1rem}
.osoba p{margin:0 14px 10px;font-size:.84rem;color:var(--muted);line-height:1.45}
.osoba .rola{margin-bottom:2px;color:var(--teal);font-weight:600}
.osoba .jezyk{margin-bottom:8px;font-size:.78rem}
@media (max-width:1000px){.zespol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.zespol{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cytat{margin:0;padding:26px 28px;border-left:4px solid var(--teal);background:var(--bg-2);
  border-radius:0 var(--radius) var(--radius) 0}
.cytat blockquote{margin:0;font-size:1.12rem;line-height:1.6;color:var(--ink)}
.cytat figcaption{margin-top:12px;font-size:.85rem;color:var(--muted)}

/* -------------------------------------------- katalog wedlug kategorii */
.kat-blok+.kat-blok{margin-top:34px}
.kat-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.kat-head h3{margin:0;font-size:1.22rem}
.kat-head h3 a{color:var(--ink);text-decoration:none}
.kat-head h3 a:hover{color:var(--teal)}
.kat-head span{font-size:.82rem;color:var(--muted)}
.kat-all{margin-left:auto;font-size:.85rem;color:var(--teal);text-decoration:none;font-weight:600}
.kat-all:hover{text-decoration:underline}
.grid.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.kat-karta{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .16s,transform .16s}
.kat-karta:hover{box-shadow:0 12px 26px rgba(12,24,40,.12);transform:translateY(-2px)}
.kat-karta h4{margin:12px 13px 5px;font-size:.93rem;line-height:1.3}
.kat-karta .cas{margin:0 13px;font-size:.76rem;color:var(--teal);font-weight:600}
.kat-karta p{margin:7px 13px 13px;font-size:.8rem;line-height:1.45;color:var(--muted)}
@media (max-width:1050px){.grid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.grid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.kat-all{margin-left:0;width:100%}}

/* ------------------------------------------ zdjecia klienta na stronach */
.foto-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px 0}
.foto-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0}
.foto-4 figure,.foto-2 figure{margin:0}
/* `border:0;margin:0` MUSI byc jawne: te siatki wstrzykuje sie do tresci
   strony, wiec obowiazuje je `.prose img{border:1px solid;margin:20px auto}`
   o tej samej swoistosci. Odstep miedzy rzedami daje `gap` siatki. */
.foto-4 img,.foto-2 img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  border:0;margin:0;
  border-radius:var(--radius);background:#eef2f6}
.foto-4 figcaption,.foto-2 figcaption{margin-top:7px;font-size:.78rem;color:var(--muted)}
@media (max-width:820px){.foto-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foto-2{grid-template-columns:minmax(0,1fr)}}

.liczby-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 8px;
  padding:20px 0;border-block:1px solid var(--line)}
.liczby-band div{display:flex;flex-direction:column;gap:3px}
.liczby-band strong{font-size:1.72rem;line-height:1;color:var(--ink);font-weight:800}
.liczby-band span{font-size:.79rem;color:var(--muted)}
@media (max-width:640px){.liczby-band{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* -------------------------------------- lista produktow w branzach */
.lista-produktow{list-style:none;margin:10px 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
.lista-produktow li{font-size:.88rem;line-height:1.45;padding:3px 0;border-bottom:1px solid var(--line)}
.lista-produktow a{color:var(--ink);text-decoration:none}
.lista-produktow a:hover{color:var(--teal);text-decoration:underline}
/* 0,74rem to 11,8 px — ponizej progu, przy ktorym numer CAS da sie odczytac
   na telefonie bez powiekszania. Zmierzone na /applications/: 174 takie chipy
   na jednej stronie, czyli caly spis produktow. 0,8rem daje 12,8 px. */
.lista-produktow .cas{font-size:.8rem;color:var(--muted);white-space:nowrap}
@media (max-width:860px){.lista-produktow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.lista-produktow{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------- widoki WooCommerce
   Motyw nie mial szablonu WooCommerce, wiec tresc produktu ladowala POZA
   ukladem: pusty ekran nad tytulem i naglowek scisniety do krawedzi.
   Szablon woocommerce.php to naprawia, a ponizsze reguly nadaja mu wyglad
   reszty serwisu. Widget mol-god rysuje sie na max-width:100% rodzica,
   wiec karta produktu dostaje szerszy kontener — w waskiej kolumnie
   wtyczka lamie swoje wlasne punkty rozdzialu. */
.wc-tresc{padding-block:30px 60px}
.wc-tresc.wc-szeroki{max-width:1280px}
.wc-tresc .product_title{font-size:2rem;line-height:1.2;margin:0 0 10px}
.wc-tresc .woocommerce-breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.wc-tresc .woocommerce-breadcrumb a{color:var(--muted)}
.wc-tresc .woocommerce-product-gallery{margin-bottom:22px}
.wc-tresc .woocommerce-product-gallery img{border-radius:var(--radius)}
.wc-tresc .product .summary{margin-bottom:18px}
.wc-tresc .products{list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.wc-tresc .products li{margin:0}
.wc-tresc .products li a{text-decoration:none;color:inherit}
.wc-tresc .products li h2,.wc-tresc .products li .woocommerce-loop-product__title{
  font-size:.95rem;line-height:1.35;margin:10px 0 0}
@media (max-width:1000px){.wc-tresc .products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.wc-tresc .products{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pusta galeria: gdy produkt nie ma zdjecia, WooCommerce zostawia placeholder
   o pelnej wysokosci. Zwijamy go, zamiast pokazywac szara plame. */
.wc-tresc .woocommerce-product-gallery__wrapper:empty,
.wc-tresc .woocommerce-product-gallery:has(img[src*="woocommerce-placeholder"]){display:none}

/* Poprzedni uklad karty produktu zostal USUNIETY, nie nadpisany. Jego selektor
   `> *:not(.woocommerce-product-gallery):not(.summary)` ma swoistosc (0,4,1)
   i wygrywalby z nowym `> .molgod-label-download` (0,3,1) — nowa regula
   lezalaby w pliku i nie dzialala. Aktualny uklad: nizej, sekcja z jawnymi
   wierszami siatki. */

/* --------------------------------------- karta produktu: siatka bez rozjazdu
   Poprzednia wersja ustawiala tylko kolumny. Wtyczka mol-god wstawia wlasny
   blok (przycisk pobrania etykiety) POMIEDZY galerie a podsumowanie, a blok
   na pelna szerokosc zajmowal caly drugi wiersz i spychal podsumowanie pod
   galerie. Efekt: prawa kolumna pusta na wysokosc zdjecia, nazwa produktu
   dopiero pod spodem. Dlatego wiersze sa teraz PRZYPISANE JAWNIE — obcy blok
   wstawiony w srodek nie ma jak przestawic ukladu. */
.wc-tresc div.product{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);
  column-gap:36px;row-gap:14px;align-items:start}
.wc-tresc div.product > *{grid-column:1 / -1}
.wc-tresc div.product > .woocommerce-product-gallery{grid-column:1;grid-row:1;margin:0}
.wc-tresc div.product > .molgod-label-download{grid-column:1;grid-row:2;margin:0}
.wc-tresc div.product > .summary{grid-column:2;grid-row:1 / span 2;margin:0}

/* Galeria startuje z `opacity:0` wpisanym w szablon WooCommerce, a na 1
   przestawia ja dopiero JavaScript. Bez niego obraz jest pobrany i niewidoczny
   — zmierzone: `opacity: 0`, obraz 600x600 zaladowany, powierzchnia pusta.
   Wymuszamy widocznosc, zeby zdjecie nie zalezalo od skryptu. */
.wc-tresc .woocommerce-product-gallery{opacity:1 !important}
.wc-tresc .woocommerce-product-gallery__wrapper{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
/* Glowne zdjecie karty to etykieta w proporcji ok. 16:10. Wczesniej ramka
   byla KWADRATOWA, wiec etykieta zostawiala szerokie szare pasy u gory
   i u dolu. Proporcja ramki jest teraz taka jak etykiety, tlo biale,
   odstep rowny — dokladnie jak w kaflach katalogu. Miniatury zostaja
   kwadratowe, bo bywaja wsrod nich zdjecia opakowan. */
.wc-tresc .woocommerce-product-gallery__image img{width:100%;height:auto;
  display:block;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.wc-tresc .woocommerce-product-gallery__wrapper > *:first-child img{
  aspect-ratio:1.598;object-fit:contain;padding:8px;border:0;background:#fff;
  filter:drop-shadow(0 1px 1px rgba(11,37,69,.10)) drop-shadow(0 5px 12px rgba(11,37,69,.13))}
.wc-tresc .woocommerce-product-gallery__wrapper > *:not(:first-child) img{
  aspect-ratio:1;object-fit:contain;padding:6px}
/* Numerowana nawigacja flexslidera nie ma juz czego obslugiwac. */
.wc-tresc .flex-control-nav,.wc-tresc .woocommerce-product-gallery__trigger{display:none}

.wc-tresc .molgod-label-download a{width:100%;text-align:center}

@media (max-width:900px){
  .wc-tresc div.product{grid-template-columns:minmax(0,1fr)}
  .wc-tresc div.product > .woocommerce-product-gallery{grid-row:auto;max-width:420px}
  .wc-tresc div.product > .molgod-label-download,
  .wc-tresc div.product > .summary{grid-column:1;grid-row:auto}
}

/* ------------------------------------------------ lokalizacje na kontakcie
   Klient pokazuje dwie osadzone mapy Google; my dajemy wlasne obrazy zlozone
   z kafli OpenStreetMap. Powod w ep_mapy: CSP `default-src 'self'` i to, ze
   osadzona mapa wysyla IP odwiedzajacego do podmiotu trzeciego, zanim ten
   cokolwiek kliknie. */
.lokacje{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;margin:20px 0 10px}
.lokacja{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff}
.lokacja img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.lokacja figcaption{padding:14px 16px;font-size:15px;line-height:1.55}
.lokacja figcaption strong{display:block;margin-bottom:4px}
.lokacja .wsp{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px}
.zrodlo-map{font-size:13px;color:var(--muted);margin-top:4px}

/* ------------------------------------------- kafel bez etykiety (6 pozycji)
   Te produkty nie maja numeru CAS, wiec wtyczka nie ma z czego zrobic
   etykiety. Zastepnik zajmuje dokladnie tyle samo miejsca co obraz, dzieki
   czemu siatka nie ma dziur, ale NIE UDAJE etykiety — pokazuje nazwe i wzor
   na czystym tle. */
/* PROPORCJA, nie wysokosc. Sztywne `height` zgadza sie z obrazem tylko przy
   jednej szerokosci okna; przy kazdej innej siatka robi sie schodkowa.
   `aspect-ratio:1.598` to ta sama wartosc co przy obrazie kafla — oba pasy
   licza sie wiec z tej samej szerokosci kolumny i zawsze sa rowne. */
.card-zastepnik{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;aspect-ratio:1.598;height:auto;padding:18px 22px;background:#fff;text-align:center;
  border-bottom:1px solid var(--line)}
.card-zastepnik .cz-znak{width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;border:2px solid #c9d8e8;
  font-weight:800;font-size:1.15rem;letter-spacing:.04em;color:#8ba6c2}
.card-zastepnik .cz-wzor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85rem;color:var(--muted)}
/* Sama ciasniejsza ramka na waskim ekranie. Wysokosc ZOSTAJE pochodna
   proporcji — nadpisanie jej tutaj przywrociloby rozjazd. */
@media(max-width:620px){.card-zastepnik{padding:14px 16px}}

/* ---------------------------------------------- ETYKIETA W KAFLU
   Zdjeciem produktu jest etykieta: bialy prostokat z wlasna niebieska ramka,
   proporcja 788x493 czyli 1,598 (praktycznie 16:10).

   Ramka obrazu ma DOKLADNIE te proporcje, wiec etykieta wypelnia ja bez
   letterboxu — zadnych pasow u gory ani po bokach. Odstep jest minimalny
   (8 px) i sluzy wylacznie temu, zeby cien mial gdzie padac.

   CIEN jest dwuwarstwowy, jak w dobrych interfejsach: pierwsza warstwa
   ciasna i ciemniejsza daje krawedz (etykieta „przylega" do karty), druga
   szeroka i rozmyta daje glebie. Rzucamy go przez `drop-shadow`, a nie
   `box-shadow`, bo `drop-shadow` obrysowuje KSZTALT obrazu, wiec cien
   klada sie po krawedzi etykiety, nie po prostokacie kontenera.
   Kolor cienia to granat marki z niska alfa — szary cien na bialym tle
   wyglada brudno, granatowy czysto.

   Przy najezdzie na kafel cien lekko rosnie: etykieta unosi sie o wlos,
   co daje wrazenie fizycznego obiektu, a nie obrazka wklejonego w tlo. */
.card-foto > img,
.kat-karta img,
.wc-tresc .products li img{width:100%;height:auto;aspect-ratio:1.598;
  object-fit:contain;display:block;background:#fff;padding:10px;margin:0;
  border:0;border-radius:0;
  filter:drop-shadow(0 1px 1px rgba(11,37,69,.10)) drop-shadow(0 5px 12px rgba(11,37,69,.13));
  transition:filter .2s ease,transform .2s ease}
a.card-foto:hover > img,
.kat-karta:hover img,
.wc-tresc .products li:hover img{filter:drop-shadow(0 2px 3px rgba(11,37,69,.13)) drop-shadow(0 10px 22px rgba(11,37,69,.17));transform:translateY(-1px)}
/* Kafel ze zdjeciem nie potrzebuje juz kreski oddzielajacej — robi to cien.
   `overflow:hidden` zostaje, zeby gorne rogi obrazu przyjely zaokraglenie
   karty; odstep 10 px daje cieniowi miejsce, a to, co wychodzi poza kafel,
   i tak jest niewidoczne. */
.card-foto{padding:0;overflow:hidden}

/* ------------------------------------------- rodziny produktowe i FAQ
   Dwie sekcje dolozone na strone glowna, zeby domknac jedyna metryke,
   w ktorej przegrywalismy z oryginalem: glebie tresci. */
.rodziny .rodz{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 26px}
.rodziny .rodz h3{margin:0 0 10px;font-size:1.12rem}
.rodziny .rodz h3 a{color:var(--navy);text-decoration:none}
.rodziny .rodz h3 a:hover{text-decoration:underline}
.rodziny .rodz p{margin:0 0 12px;line-height:1.62}
.rodziny .rodz .ustal{margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-size:.93rem;color:var(--muted)}
.rodziny .rodz .ustal strong{color:var(--ink)}

.faq-glowna .faq-lista{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.faq-glowna details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:0;overflow:hidden;transition:border-color .15s}
.faq-glowna details[open]{border-color:#bcd0e2}
.faq-glowna summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--navy);
  list-style:none;position:relative;padding-right:48px;line-height:1.45}
.faq-glowna summary::-webkit-details-marker{display:none}
.faq-glowna summary::after{content:"+";position:absolute;right:20px;top:50%;
  transform:translateY(-50%);font-size:1.3rem;font-weight:400;color:var(--muted);
  transition:transform .18s}
.faq-glowna details[open] summary::after{content:"\2212";transform:translateY(-50%)}
.faq-glowna details p{margin:0;padding:0 20px 18px;line-height:1.62;color:var(--ink)}
@media(max-width:760px){.rodziny .rodz{padding:20px}}

/* =========================================================== KARTA PRODUKTU
   Trzy rzeczy naraz: diagnostyka wtyczki znika, jej przyciski dostaja nasz
   styl, a galeria przestaje marnowac miejsce na dodatkowe zdjecia. */

/* 1. IDENTYFIKATORY AKORDEONOW — precz.
   Zmierzone na karcie acetonu: 35 widocznych ciagow `MolGod_*` plus zielona
   plakietka przy karcie SDS. To narzedzie dewelopera („ID akordeonu — zaznacz
   i skopiuj"), pomocne przy budowie wtyczki i zupelnie bezuzyteczne dla
   kupujacego, ktory widzi w zamian kod techniczny obok nazwy produktu. */
.wc-tresc .molgod-id,
.wc-tresc .molgod-acc-id,
.wc-tresc .nat-acc-id{display:none !important}

/* 2. PRZYCISKI WTYCZKI pod nasz uklad.
   Wtyczka rysuje je wlasnymi stylami inline, wiec potrzebna jest wysoka
   swoistosc. Zamiast walczyc o kazda wlasciwosc, nadpisujemy komplet:
   ksztalt, kolor, odstepy i zachowanie przy najezdzie — tak, zeby przycisk
   „Download SDS Card" wygladal jak reszta serwisu, a nie jak wtyczka. */
.wc-tresc a.molgod-sds-btn,
.wc-tresc a.molgod-download-btn,
.wc-tresc a.molgod-cite-btn{display:inline-flex !important;align-items:center;gap:9px;
  padding:11px 18px !important;background:var(--teal) !important;color:#fff !important;
  border:0 !important;border-radius:10px !important;text-decoration:none !important;
  font-weight:600 !important;font-size:15px !important;line-height:1.2 !important;
  box-shadow:0 1px 2px rgba(11,37,69,.12),0 4px 10px rgba(11,37,69,.10) !important;
  transition:background .15s,box-shadow .15s,transform .15s !important}
.wc-tresc a.molgod-sds-btn:hover,
.wc-tresc a.molgod-download-btn:hover,
.wc-tresc a.molgod-cite-btn:hover{background:var(--teal-2) !important;
  box-shadow:0 2px 4px rgba(11,37,69,.16),0 8px 18px rgba(11,37,69,.14) !important;
  transform:translateY(-1px)}
.wc-tresc .molgod-sds-icon{font-size:16px;line-height:1}
.wc-tresc .molgod-sds-download{margin:16px 0 !important}

/* 3. GALERIA — dodatkowe zdjecia w rozmiarze, ktory da sie obejrzec.
   Wczesniej siatka miala na sztywno cztery kolumny, wiec przy DWOCH obrazach
   etykieta szla na pelna szerokosc, a zdjecie produktu ladowalo w komorce
   o szerokosci jednej czwartej — wielkosci znaczka. Liczba kolumn zalezy
   teraz od liczby zdjec:
     1 zdjecie  — pelna szerokosc
     2 zdjecia  — dwa rowne pola obok siebie
     3 zdjecia  — pierwsze pelne, dwa ponizej po polowie
     4 i wiecej — pierwsze pelne, reszta po cwiartce
   Selektory `:nth-last-child` licza rodzenstwo, wiec nie trzeba ani jednej
   linii JavaScriptu ani zmiany w szablonie wtyczki. */
.wc-tresc .woocommerce-product-gallery__wrapper{display:flex;flex-direction:column;
  gap:14px;margin:0}
/* Kazde zdjecie na PELNA szerokosc kolumny, jedno pod drugim.
   Poprzednia wersja ustawiala je obok siebie i przy kolumnie 400 px dawala
   po 190 px na zdjecie — wielkosc znaczka. Etykieta i fotografia produktu
   to dwa rowne zrodla informacji, wiec obie dostaja cala dostepna
   szerokosc. Kolumna poszerzona z 400 do 470 px. */
/* Kotwica wokol obrazu jest domyslnie elementem liniowym i kurczyla sie do
   naturalnej szerokosci miniatury — stad drugie zdjecie wielkosci znaczka
   mimo `width:100%` na samym obrazie. Pelna szerokosc trzeba wymusic na
   KAZDYM ogniwie: komorce galerii, kotwicy i obrazie. */
.wc-tresc .woocommerce-product-gallery__wrapper > *,
.wc-tresc .woocommerce-product-gallery__image,
.wc-tresc .woocommerce-product-gallery__image > a{width:100%;display:block}
.wc-tresc .woocommerce-product-gallery__image img{width:100%;max-width:none}
.wc-tresc .woocommerce-product-gallery__wrapper > *:not(:first-child) img{
  aspect-ratio:4/3;object-fit:contain;padding:12px;background:#fff;border:0;
  border-radius:var(--radius);
  filter:drop-shadow(0 1px 1px rgba(11,37,69,.10)) drop-shadow(0 5px 12px rgba(11,37,69,.13))}

/* Skrypt wtyczki owija KAZDY obraz galerii w `<span class="molgod-thumb-wrap">`
   ze stylem inline `display:inline-block`. Taki element kurczy sie do szerokosci
   zawartosci, wiec `width:100%` na samym obrazie liczylo sie wzgledem juz
   zwezonego pudelka i drugie zdjecie zostawalo wielkosci miniatury, mimo ze
   plik zrodlowy mial 800 px. Styl jest inline, wiec potrzebne `!important` —
   to jedyny sposob, zeby nadpisac go bez ruszania wtyczki.
   Owijka istnieje po to, zeby pozycjonowac odznake 3D w rogu miniatury; dlatego
   zostaje `position:relative`, a zmienia sie tylko sposob wypelniania szerokosci. */
.wc-tresc .molgod-thumb-wrap{display:block !important;width:100% !important;
  line-height:0 !important}
.wc-tresc .molgod-thumb-wrap > img{width:100% !important;height:auto !important}

/* ---------------------------- sygnal przewijania w tabelach wtyczki
   Patrz komentarz w commicie: dwie biale zaslony przyczepione do tresci
   i dwa cienie przyczepione do ramki. Gdy nie ma czego przewijac, zaslony
   przykrywaja cienie i sygnal znika sam. */
.wc-tresc .properties-table,
.wc-tresc .molgod-comparison-table,
.wc-tresc .molgod-cost-table,
.wc-tresc .molgod-sol-tabs,
.wc-tresc [class*="molgod"][class*="table"]{
  background-image:
    linear-gradient(90deg,#fff 40%,rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(255,255,255,0),#fff 60%),
    radial-gradient(farthest-side at 0 50%,rgba(11,37,69,.16),rgba(11,37,69,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(11,37,69,.16),rgba(11,37,69,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:34px 100%,34px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll}

/* ------------------------------- animacja czasteczki: zoom poza kadr
   ZMIERZONE: wtyczka rysuje model na canvasie lezacym dokladnie na zdjeciu
   (470x294 px na karcie acetonu). Przy najechaniu robi fade-in i skaluje
   0,94 -> 1,0 — i na tym konczy. Zapowiadany „progresywny zoom do 1,30"
   zmienia skale RYSOWANIA wewnatrz canvasa, wiec model rosnie w ramce,
   ale ramka zostaje ta sama: przez szesc sekund przytrzymania zmierzona
   szerokosc canvasa nie drgnela ani o piksel.

   Zeby model NAPRAWDE sie powiekszal i wychodzil poza kadr, trzeba skalowac
   sam canvas i puscic go poza obrys. Robimy oba:
     - `transform: scale()` na canvasie, z opoznieniem 0,45 s, zeby nie
       zderzalo sie z wejsciowa animacja wtyczki (0,94 -> 1,0 trwa 0,65 s);
     - `overflow: visible` na kaflu przy najechaniu, bo `overflow:hidden`
       przycinal wszystko do obrysu; zaokraglenie gornych rogow przenosi sie
       wtedy na sam obraz, zeby kafel nie stracil ksztaltu.
   `!important` jest konieczne: wtyczka ustawia `transform` stylem wpisanym
   w element, a taki wygrywa z arkuszem bez tego znacznika.

   Krzywa (.22,.61,.36,1) jest ta sama, ktorej wtyczka uzywa do wejscia —
   dzieki temu powiekszenie czyta sie jako ciag dalszy tego samego ruchu,
   a nie jako druga, osobna animacja. */

@keyframes ep-model-rosnie{
  from{transform:scale(1) rotate(0deg)}
  60% {transform:scale(1.72) rotate(2deg)}
  to  {transform:scale(2.05) rotate(3deg)}
}
.wc-tresc .woocommerce-product-gallery__wrapper{overflow:visible}
/* Kafel przepuszcza model poza obrys ZAWSZE — warunek o najechaniu nie
   dziala przy dotknieciu. Zaokraglenie gornych rogow przenosi sie na sam
   obraz, wiec ksztalt kafla zostaje ten sam. */
.card-foto,.kat-karta{position:relative;overflow:visible}
.card-foto > img,.kat-karta > img{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.wc-tresc .woocommerce-product-gallery canvas,
.card-foto canvas,.kat-karta canvas{
  transform-origin:center center;
  position:relative;z-index:6;
  will-change:transform;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
/* Klase `ep-akt` dodaje app.js, gdy ktos najedzie, dotknie albo wejdzie
   klawiatura — jedna sciezka dla wszystkich trzech.
   Skala 1,34 zamiast 1,26: przy malych czasteczkach model zajmuje niewielka
   czesc plotna i powiekszenie o cwierc bylo ledwie widoczne. */
.ep-akt canvas{
  animation:ep-model-rosnie .9s cubic-bezier(.17,.89,.32,1.06) .05s forwards;
  z-index:8}
.ep-akt{z-index:7}
/* Siatka kafli tez musi przepuszczac model poza swoje granice — bez tego
   powiekszenie obcinaloby sie na krawedzi kolumny, a nie kafla. */
#epgrid,.grid.g3,.grid.g4,.kat-siatka,.kat-blok,.kat-lista{overflow:visible}
/* Model wychodzi poza kafel — ale nie ma prawa rozpychac dokumentu.
   Zmierzone przed ta regula: +173 px przewijania poziomego na telefonie
   w trakcie animacji, przy zerowym rozjezdzie w spoczynku.
   `clip` zamiast `hidden`, bo `hidden` utworzyloby kontener przewijania
   i zepsulo przyklejone pole filtra oraz przyklejony naglowek. */
@media(max-width:1024px){
  /* Obie warstwy, bo przewijanie poziome dzieje sie na `body`, a nie na
     elemencie glownym — zmierzone: z samym `html` strona przesuwala sie
     nadal o 173 px na listach katalogu. `clip` nie tworzy kontenera
     przewijania, wiec przyklejone pole filtra i przyklejony naglowek
     dzialaja dalej; `hidden` by je zepsulo. */
  html,body{overflow-x:clip}
}
/* Kto woli mniej ruchu na ekranie, dostaje sam model bez powiekszania. */
@media(prefers-reduced-motion:reduce){
  .ep-akt canvas{animation:none}
}


/* --------------------------------------------------- liczniki skali (hero) */
/* Kreske rysuje skrypt (`stat-kreska`), wiec bez JavaScriptu nie ma jej wcale
   i pas wyglada dokladnie tak, jak wczesniej — liczby stoja w HTML i one sa
   trescia, a animacja jest tylko sposobem ich pokazania. */
.hero-stats .stat-kreska{display:block;height:2px;margin:7px 0 2px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal) 0%,#5fdccf 100%);
  transform:scaleX(0);transform-origin:left center;max-width:86px}

/* „Dobicie" na koniec liczenia. Moment zatrzymania jest inaczej
   niezauwazalny i licznik wyglada, jakby zamarl, zamiast skonczyc. */
@keyframes ep-licznik-dobija{
  0%{transform:scale(1)} 42%{transform:scale(1.06)} 100%{transform:scale(1)}
}
.hero-stats b{display:inline-block}
.hero-stats b.doliczony{animation:ep-licznik-dobija .42s cubic-bezier(.34,1.56,.64,1) both}

/* Przy wlaczonym ograniczeniu animacji skrypt w ogole nie startuje, ale gdyby
   kiedys wystartowal — kreska ma byc od razu pelna, a nie pusta. */
@media(prefers-reduced-motion:reduce){
  .hero-stats .stat-kreska{transform:scaleX(1)}
  .hero-stats b.doliczony{animation:none}
}


/* ------------------------------------------- powrot modelu czasteczki */
/* Model NIE znika razem ze zdjeciem klasy `ep-akt` — dostaje wlasna animacje
   powrotu, odpalana klasa `ep-zanika`. Samo zdjecie `ep-akt` kasuje animacje
   powiekszenia, a przegladarka wraca do stanu poczatkowego w JEDNEJ KLATCE:
   model „strzelal" z powrotem do rozmiaru i przy szybkim przesuwaniu myszy
   po siatce caly efekt migal.
   Wartosci koncowe musza byc DOKLADNIE takie same jak w `ep-model-rosnie`
   (2.05 i 3 stopnie), inaczej powrot zaczyna sie od innego miejsca niz to,
   w ktorym model faktycznie stoi, i widac przeskok w pierwszej klatce. */
@keyframes ep-model-maleje{
  from{transform:scale(2.05) rotate(3deg)}
  to{transform:scale(1) rotate(0deg)}
}
.ep-zanika canvas{animation:ep-model-maleje 1.1s cubic-bezier(.33,0,.2,1) forwards;z-index:8}

/* PLYNNOSC. Plotno wizualizatora rysuje sie w podwojonej gestosci pikseli
   (ustawiamy ja w `ep-molgod-integracja.php`, zeby model byl ostry), wiec
   przy skali 2 przegladarka przelicza duzo pikseli na klatke. `will-change`
   mowi jej, zeby przygotowala osobna warstwe ZANIM animacja ruszy — bez tego
   pierwsze klatki powstaja w trakcie tworzenia warstwy i widac zacinanie.
   `backface-visibility` wymusza sciezke sprzetowa takze tam, gdzie sama
   `transform` jej nie wlacza. */
.ep-akt canvas,.ep-zanika canvas{will-change:transform;backface-visibility:hidden}

@media(prefers-reduced-motion:reduce){
  .ep-zanika canvas{animation:none}
}


/* ------------------------------------------- zamkniecie strony glownej */
/* Wezwanie na koncu strony w kolorze marki, nie na bieli. Trzy biale sekcje
   z rzedu na koncu strony glownej dawaly okolo 380 px, w ktorych nic nie
   odroznialo jednej od drugiej, a potem od razu zaczynala sie granatowa
   stopka — wezwanie zlewalo sie z nia w jedno. */
.sec-final{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 72%,#17406e 100%);
  color:#c3d6e8;padding-block:clamp(48px,6vw,72px)}
.sec-final h2{color:#fff;margin-bottom:.45em}
.sec-final p{color:#c3d6e8}
/* Przycisk na granacie: turkus jest jedynym kolorem akcentu palety, ktory na
   tym tle widac. Cien w kolorze turkusu, nie czarny — czarny na granacie
   robi brudna plame zamiast uniesienia. */
.sec-final .btn{background:var(--teal);color:#fff}
.sec-final .btn:hover{background:var(--teal-2);box-shadow:0 8px 20px rgba(14,128,130,.38)}

/* ---------------------------------- sieroty w rzedach kategorii (`.g5`) */
/* Kazdy z szesciu rzedow na stronie glownej ma DOKLADNIE piec kafli.
   Przy trzech kolumnach zostaje 5 % 3 = 2 (rzad 2 z 3), przy dwoch
   5 % 2 = 1 (samotny kafel, polowa rzedu pusta). Czysto wychodzi wylacznie
   powyzej 1050 px, gdzie kolumn jest piec.
   Chowamy nadmiarowe kafle zamiast dokladac puste: odnosnik „See all …"
   obok naglowka kategorii i tak prowadzi do pelnej listy, wiec nic nie ginie
   z nawigacji — znika tylko poszarpana krawedz. */
@media(max-width:1050px) and (min-width:641px){
  .grid.g5 > :nth-child(4),.grid.g5 > :nth-child(5){display:none}
}
@media(max-width:640px){
  .grid.g5 > :nth-child(5){display:none}
}