/* Arkusz satelity. Samodzielny - nie wciaga cdn.min.css ani Bootstrapa.
   Zalozony 07.09.2026 przy odcieciu od legacy.
   Wartosci z zasady\DESIGN.md: siatka 8 px, paleta dhit, przejscia 150 ms. */

:root{
  --primary:#0066FF; --primary-hover:#0052CC; --accent:#F97316;
  --canvas:#F9FAFB; --surface:#FFFFFF; --surface-2:#F3F4F6;
  --ink:#111827; --body:#374151; --muted:#6B7280; --hairline:#E5E7EB;
  --max:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--body);
  font:400 16px/1.6 Cairo,system-ui,-apple-system,sans-serif}
img{max-width:100%;height:auto}
a{color:var(--primary)}

/* Drabina naglowkow zjechala o jeden stopien 07.09.2026 - H1 44 px nad
   siatka kart wygladal jak plakat, nie jak tytul sekcji. Skalowane calosciowo,
   nie sam H1: gdyby zszedl sam, zrownalby sie z H2 i hierarchia by znikla. */
h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.25;margin:0 0 16px}
h1{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.01em}
h2{font-size:clamp(20px,2.6vw,26px);font-weight:600}
h3{font-size:18px;font-weight:600}
p{margin:0 0 16px}

.kontener{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
/* 32, nie 48. Zmierzone 08.09.2026: nad stopka stalo 48 px marginesu stopki
   PLUS 48 px dolnego paddingu sekcji, czyli 96 px pustki na kazdej stronie,
   a nad H1 - 32 px paddingu sekcji plus 32 px wlasnego marginesu tytulu.
   Zostaje siatka 8 px, tylko o krok nizej. */
.sekcja{padding-top:32px;padding-bottom:32px}
.sekcja--tlo{background:var(--surface-2)}
/* 40, nie 64 - to jest wartosc, ktora realnie dziala na desktopie.
   Zmiana samego .sekcja wyzej dotykala tylko telefonow. 08.09.2026. */
@media(min-width:768px){.sekcja{padding-top:40px;padding-bottom:40px}}

/* ── nawigacja ───────────────────────────────────────────────── */
.nav-sat-pas{position:sticky;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--hairline)}
.nav-sat{display:flex;align-items:center;gap:4px;
  width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
.nav-sat a{text-decoration:none}
.nav-sat__marka{display:flex;align-items:center;margin-right:auto;padding:8px 0}
.nav-sat__marka img{display:block;height:40px;width:auto}
.nav-sat__start,.nav-sat__kontakt,.nav-sat__tytul{
  display:flex;align-items:center;height:56px;padding:0 14px;
  font-size:15px;font-weight:600;color:var(--body);white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s}
.nav-sat__start:hover,.nav-sat__kontakt:hover,.nav-sat__tytul:hover{
  color:var(--primary);border-bottom-color:var(--primary)}
.nav-sat__start:focus-visible,.nav-sat__kontakt:focus-visible,
.nav-sat__tytul:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.nav-sat__grupa{position:relative}
.nav-sat__tytul{cursor:pointer;list-style:none}
.nav-sat__tytul::-webkit-details-marker{display:none}
.nav-sat__tytul::after{content:"";width:6px;height:6px;margin-left:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.nav-sat__grupa[open]>.nav-sat__tytul{color:var(--primary);border-bottom-color:var(--primary)}
.nav-sat__grupa[open]>.nav-sat__tytul::after{transform:rotate(-135deg) translateY(-2px)}
.nav-sat__lista{position:absolute;left:0;top:100%;z-index:60;
  min-width:300px;max-height:min(70vh,520px);overflow-y:auto;
  margin:0;padding:8px;list-style:none;background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px;
  box-shadow:0 8px 24px rgba(17,24,39,.12)}
.nav-sat__lista a{display:flex;justify-content:space-between;align-items:center;
  gap:16px;min-height:40px;padding:8px 12px;border-radius:6px;
  font-size:14px;color:var(--body);transition:background .15s,color .15s}
.nav-sat__lista a:hover{background:var(--canvas);color:var(--primary)}
.nav-sat__lista a[aria-current]{background:var(--canvas);color:var(--primary);font-weight:600}
.nav-sat__ile{flex:none;min-width:28px;padding:2px 8px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;
  text-align:center}

/* Zwijak mobilny na checkboxie. Na desktopie etykieta jest ukryta, a
   .nav-sat__pozycje ma display:contents - dzieci wchodza do flexa paska tak,
   jakby opakowania nie bylo. Zadna regula nie chowa ich powyzej 900 px, wiec
   powtorka blednu z rana (menu znikajace na desktopie) jest niemozliwa. */
.nav-sat__hamburger{display:none}
.nav-sat__pozycje{display:contents}

@media(max-width:900px){
  .nav-sat{flex-wrap:wrap;padding:0}
  .nav-sat__marka{padding:12px 16px}

  /* Etykieta przelacznika - tu zaczyna sie zwijak. */
  .nav-sat__hamburger{display:flex;align-items:center;gap:10px;
    margin-left:auto;height:56px;padding:0 16px;cursor:pointer;
    font-size:15px;font-weight:600;color:var(--body);user-select:none}
  .nav-sat__hamburger-napis{letter-spacing:.01em}
  .nav-sat__kreski{display:flex;flex-direction:column;justify-content:center;
    gap:5px;width:22px;height:22px}
  .nav-sat__kreski span{display:block;height:2px;border-radius:2px;
    background:var(--ink);transition:transform .2s,opacity .2s}
  .nav-sat__przelacznik:checked ~ .nav-sat__hamburger .nav-sat__kreski span:nth-child(1){
    transform:translateY(7px) rotate(45deg)}
  .nav-sat__przelacznik:checked ~ .nav-sat__hamburger .nav-sat__kreski span:nth-child(2){opacity:0}
  .nav-sat__przelacznik:checked ~ .nav-sat__hamburger .nav-sat__kreski span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg)}
  .nav-sat__przelacznik:focus-visible ~ .nav-sat__hamburger{
    outline:2px solid var(--primary);outline-offset:-2px}

  /* Pozycje: schowane, dopoki przelacznik nie jest zaznaczony. */
  .nav-sat__pozycje{display:none;flex-basis:100%;
    border-top:1px solid var(--hairline)}
  .nav-sat__przelacznik:checked ~ .nav-sat__pozycje{display:block;
    max-height:70vh;overflow-y:auto;overscroll-behavior:contain}

  .nav-sat__start,.nav-sat__kontakt,.nav-sat__tytul{
    height:52px;padding:0 16px;border-bottom:1px solid var(--hairline);
    border-bottom-color:var(--hairline)}
  .nav-sat__start:hover,.nav-sat__kontakt:hover,.nav-sat__tytul:hover{
    border-bottom-color:var(--hairline);background:var(--canvas)}
  .nav-sat__tytul::after{margin-left:auto}
  .nav-sat__lista{position:static;min-width:0;max-height:none;
    border:0;border-radius:0;box-shadow:none;background:var(--canvas);padding:8px 8px 16px}
  .nav-sat-pas{position:sticky;top:0}
}

/* ── baner ───────────────────────────────────────────────────────
   Pas ze zdjeciem wiatrakow. Byl w ukladzie legacy na kazdej stronie
   i zostaje. Wysokosc na stalo, zeby nie bylo przeskoku ukladu przy
   doladowaniu obrazka - CLS ponizej 0,1 z SPEC par. 6.               */
.baner{position:relative;background:var(--surface-2);overflow:hidden}
.baner img{display:block;width:100%;height:180px;object-fit:cover;object-position:center 60%}
@media(min-width:768px){.baner img{height:260px}}
/* Napis na banerze. Przepisane 08.09.2026: bylo 15 px i jedno slowo mala
   litera (okruszek), jest nadtytul dzialu plus tytul strony z dane/banery.php.
   Gradient ciemniejszy o 8 punktow, bo pismo uroslo trzykrotnie i musi sie
   obronic takze na jasnym fragmencie zdjecia. */
.baner__napis{position:absolute;left:0;right:0;bottom:0;
  max-width:var(--max);margin:0 auto;padding:56px 16px 18px;
  background:linear-gradient(180deg,rgba(17,24,39,0) 0%,rgba(17,24,39,.8) 100%)}
.baner__nad{margin:0 0 4px;color:#93C5FD;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.baner__tytul{margin:0;color:#fff;font-weight:900;line-height:1.1;
  letter-spacing:-.01em;font-size:clamp(21px,3.4vw,32px);
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
@media(max-width:600px){
  .baner__napis{padding:40px 16px 14px}
  .baner__nad{font-size:10px;letter-spacing:.1em}
}

/* ── strona glowna ───────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,#fff 0%,var(--canvas) 100%);
  border-bottom:1px solid var(--hairline);padding-top:48px;padding-bottom:48px}
@media(min-width:768px){.hero{padding-top:72px;padding-bottom:72px}}
.hero__nad{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary);margin:0 0 12px}
.hero h1{max-width:16ch}
.hero__lead{max-width:60ch;font-size:18px;color:var(--body)}
.hero__akcje{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.przycisk{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:6px;border:1px solid transparent;
  font:600 15px/1 Cairo,system-ui,sans-serif;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.przycisk--glowny{background:var(--primary);color:#fff}
.przycisk--glowny:hover{background:var(--primary-hover)}
.przycisk--obrys{border-color:var(--hairline);color:var(--ink);background:var(--surface)}
.przycisk--obrys:hover{border-color:var(--primary);color:var(--primary)}
.przycisk:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.kroki{display:grid;gap:16px;padding:0;margin:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.krok{background:var(--surface);border:1px solid var(--hairline);border-radius:8px;
  padding:24px;transition:border-color .15s,box-shadow .15s}
.krok:hover{border-color:var(--primary);box-shadow:0 2px 4px rgba(17,24,39,.06)}
.krok__nr{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;background:var(--surface-2);
  color:var(--primary);font-weight:700;font-size:14px;margin-bottom:16px}
.krok h3{margin-bottom:8px}
.krok h3 a{color:var(--ink);text-decoration:none}
.krok:hover h3 a{color:var(--primary)}
.krok p{margin:0;font-size:14px;color:var(--muted)}

.fakty{display:grid;gap:24px;padding:0;margin:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fakt__liczba{display:block;font-size:32px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.fakt__opis{font-size:14px;color:var(--muted)}

/* ── kategoria i produkt ─────────────────────────────────────── */
.kategoria__ile,.produkt__symbol{color:var(--muted);font-size:14px;margin:-8px 0 24px}
.kategoria__lista{display:grid;gap:16px;padding:0;margin:0;list-style:none;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.karta__link{display:block;height:100%;padding:16px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px;text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.karta__link:hover{border-color:var(--primary);box-shadow:0 2px 4px rgba(17,24,39,.06)}
.karta__nazwa{display:block;font-weight:600;color:var(--ink);font-size:15px}
.karta__pelna{display:block;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}

.produkt__opis{max-width:70ch}
.produkt__cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;
  border-radius:6px;background:var(--accent);color:#fff;font-weight:600;
  text-decoration:none;transition:background .15s}
.produkt__cta:hover{background:#ea6a0c}
.produkt__wroc a{font-size:14px}

/* Okruszki. Do 07.09.2026 byly szarym tekstem 13 px na tle strony, bez
   zadnego oddzielenia - stad wrazenie plaskiej strony zaraz pod menu.
   Teraz siedza na wlasnym pasku z krawedzia i tlem, a biezaca pozycja
   jest ciemna i pogrubiona, wiec widac, gdzie sie jest.               */
.okruszki-pas{background:var(--surface);border-bottom:1px solid var(--hairline)}
.okruszki{display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  width:100%;max-width:var(--max);margin:0 auto;padding:12px 16px;
  list-style:none;font-size:13px}
.okruszki li{display:flex;align-items:center;gap:4px}
.okruszki a{display:inline-flex;align-items:center;padding:2px 8px;
  border-radius:6px;color:var(--muted);text-decoration:none;
  transition:background .15s,color .15s}
.okruszki a:hover{background:var(--surface-2);color:var(--primary)}
.okruszki li+li::before{content:"";flex:none;width:5px;height:5px;
  border-right:1.5px solid var(--hairline);border-bottom:1.5px solid var(--hairline);
  transform:rotate(-45deg)}
.okruszki li:last-child span{padding:2px 8px;color:var(--ink);font-weight:600}

/* ── notka ───────────────────────────────────────────────────────
   Ramka z uwaga, lewa krawedz 3 px - klasa z DESIGN.md par. 5.       */
.notka{margin:0 0 32px;padding:16px 24px;background:var(--surface);
  border:1px solid var(--hairline);border-left:3px solid var(--muted);
  border-radius:0 8px 8px 0;font-size:15px}
.notka p:last-child{margin-bottom:0}
.notka strong{color:var(--ink)}
.notka--ostrzezenie{border-left-color:var(--accent);background:#FFF7ED}
.notka--info{border-left-color:var(--primary);background:#F0F6FF}

/* ── stopka ──────────────────────────────────────────────────── */
/* ── stopka ───────────────────────────────────────────────────────
   Przebudowana 08.09.2026 z pieciu blokow jeden pod drugim na trzy kolumny.
   Odnosniki serwisowe i prawne staly wczesniej jako dwa poziome ciagi, ktore
   przy 1140 px lamaly sie w przypadkowych miejscach - dziesiec pozycji bez
   ani jednej nazwy grupy czytalo sie jak jedna plama.

   margin-top ZDJETY. Zmierzone przed zmiana: przerwa od ostatniego akapitu
   do stopki wynosila 64 px - 40 px dolnego paddingu sekcji PLUS 24 px
   marginesu stopki. Sam padding wystarcza, bo stopke i tak odcina wlasna
   ramka i inne tlo; dwa odstepy jeden na drugim to byla pustka bez zadania. */
.stopka{padding-top:36px;padding-bottom:28px;background:var(--surface);
  border-top:1px solid var(--hairline);color:var(--body);font-size:14px}
.stopka__siatka{display:grid;gap:32px;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.stopka__zakup{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--body)}
.stopka__zakup a{color:var(--ink);font-weight:600;text-decoration:none}
.stopka__zakup a:hover{color:var(--primary)}
.stopka__szukaj{margin:0}
.stopka__szukaj a{display:inline-flex;align-items:center;gap:8px;
  color:var(--primary);font-weight:600;text-decoration:none}
.stopka__szukaj a:hover{text-decoration:underline}
.stopka__szukaj .ikona{width:1.1em;height:1.1em}

/* Nazwa grupy: mala, wersalikami, w kolorze wyciszonym - ma porzadkowac
   liste, nie konkurowac z nia o uwage. */
.stopka__tytul{margin:0 0 12px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stopka__lista{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px}
.stopka__lista a{color:var(--body);text-decoration:none;font-size:14px;
  font-weight:400;transition:color .15s}
.stopka__lista a:hover{color:var(--primary)}

.stopka__stopa{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:8px 24px;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline)}
.stopka__rejestr{margin:0;font-size:12px;line-height:1.7;color:var(--muted);
  max-width:72ch}
.stopka__prawa{margin:0;color:var(--muted);font-size:12px;white-space:nowrap}

/* Na wezszych ekranach akapit o sklepie idzie na pelna szerokosc, a obie
   listy zostaja OBOK SIEBIE - takze przy 375 px.
   Pierwsza wersja zwijala je do jednej kolumny i stopka urosla z 473 do
   827 px, czyli na telefonie zajmowala niemal caly ekran. Dwie kolumny
   linkow to 11 pozycji w dwoch slupkach zamiast jedenastu wierszy. */
/* Dwa uklady, jeden prog. Powyzej 700 px trzy kolumny z pionowymi listami;
   ponizej jedna kolumna, a listy wracaja do ukladu poziomego.

   Bez tego progu bylo pasmo 520-700 px, w ktorym akapit szedl na pelna
   szerokosc, a listy zostawaly pionowe - stopka rosla tam z 341 do 542 px,
   najgorzej z wszystkich szerokosci. Posrednie uklady kosztowaly wiecej,
   niz dawaly.

   Nazwy grup ZOSTAJA na kazdej szerokosci - to one byly brakiem, nie uklad.
   Pozioma lista z naglowkiem "Serwis" nad soba czyta sie inaczej niz ta
   sama lista bez niego. */
@media(max-width:700px){
  .stopka__siatka{grid-template-columns:minmax(0,1fr);gap:20px}
  .stopka__lista{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  .stopka__tytul{margin-bottom:8px}
  .stopka__stopa{margin-top:20px}
}
@media(max-width:520px){
  .stopka__lista a{font-size:13px}
}

/* Ostatni element tresci nie potrzebuje wlasnego marginesu dolnego - pod nim
   jest juz padding sekcji i ramka stopki. Zdjecie go skraca przerwe o 16 px
   na kazdej stronie serwisu. */
.tresc > *:last-child,
.tresc > *:last-child > *:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── siatka stron tresci ─────────────────────────────────────────
   29 stron o energetyce jest napisanych w klasach Bootstrapa: row,
   col-lg-*, space, img-fluid. Satelita nie wciaga Bootstrapa, wiec
   odtwarzamy TYLKO te klasy, ktore w tych stronach faktycznie wystepuja
   - policzone, nie zgadniete. Dzieki temu uklad tekst obok rysunku
   zostaje taki, jak byl, a strona nie ciagnie 200 kB cudzego CSS-u.  */

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;align-items:start}
[class*="col-"]{grid-column:span 12;min-width:0}
.space{margin-bottom:24px}
.text-center,.center{text-align:center}

/* Rysunki techniczne rownaja sie do lewej, tak jak tekst obok nich.
   Strony tresci maja na kolumnach z obrazkami klase text-center z legacy -
   wysrodkowanie robilo z rysunku plamke w srodku pustej kolumny.
   07.09.2026, na zgloszenie przy /generatory. */
[class*="col-"].text-center img{margin-left:0;margin-right:auto}
.tresc [class*="col-"].text-center{text-align:left}
.text-left{text-align:left}
.img-fluid{max-width:100%;height:auto;border-radius:8px}
.podpis{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

@media(min-width:992px){
  .col-lg-4{grid-column:span 4}
  .col-lg-5{grid-column:span 5}
  .col-lg-6{grid-column:span 6}
  .col-lg-7{grid-column:span 7}
  .col-lg-8{grid-column:span 8}
  .col-lg-12{grid-column:span 12}
}
@media(min-width:768px) and (max-width:991.98px){
  .col-md-4{grid-column:span 4}
  .col-md-6{grid-column:span 6}
  .col-md-8{grid-column:span 8}
}

/* Tresc czytana: 29 stron uzywa h4 jako naglowka sekcji i h2 sporadycznie.
   Nie zmieniamy znacznikow w tresci - nadajemy im wlasciwa wage wizualna. */
.tresc h2{font-size:clamp(20px,2.6vw,25px);margin-top:32px}
.tresc h4{font-size:18px;font-weight:600;color:var(--ink);margin:32px 0 16px}
.tresc p{max-width:72ch}
.tresc ul,.tresc ol{max-width:72ch;padding-left:24px;margin:0 0 16px}
.tresc li{margin-bottom:8px}
.tresc img{background:var(--surface);border:1px solid var(--hairline);padding:8px}
.tresc b,.tresc strong{color:var(--ink)}

.tresc table,.uni-table{width:auto;max-width:100%;margin:24px 0;border-collapse:collapse;
  background:var(--surface);border:1px solid var(--hairline);border-radius:8px;
  overflow:hidden;font-size:15px}
.tresc th,.tresc td{padding:12px 16px;border-bottom:1px solid var(--hairline);text-align:left}
.tresc th{background:var(--surface-2);font-weight:600;color:var(--ink)}
.tresc tr:last-child td{border-bottom:0}
.wzor{display:block;margin:16px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;color:var(--ink);background:var(--surface-2);padding:12px 16px;
  border-radius:6px;overflow-x:auto}
.no-after::after{content:none}

/* ── rysunek bryly ───────────────────────────────────────────────
   Inline SVG liczony z wymiarow w products.json. Na liscie skala jest
   WSPOLNA dla kategorii, wiec magnes 10 mm jest maly, a 100 mm duzy.  */
.rysunek{margin:0 0 12px;padding:16px;background:var(--surface-2);
  border-radius:8px}
.rysunek--mini{padding:12px;margin-bottom:12px}
.rys-mini{display:block;width:100%;height:208px}
.rys-duzy{display:block;width:100%;max-width:400px;height:auto}

.rys-plaszcz{fill:#fff;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.rys-gora{fill:#fff;stroke:var(--ink);stroke-width:1.8}
.rys-bok{fill:#F3F4F6;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.rys-otwor{fill:var(--surface-2);stroke:var(--ink);stroke-width:1.4}

/* ── osie ────────────────────────────────────────────────────────
   Groty na obu koncach, kreski pomocnicze do krawedzi bryly.       */
.os{stroke:var(--primary);stroke-width:1.6;stroke-linecap:round}
.os-grot{fill:var(--primary)}
.os-pomoc{stroke:var(--primary);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.os-opis{font:700 13px Cairo,system-ui,sans-serif;fill:var(--primary);
  text-anchor:middle;letter-spacing:.02em}

/* ── bieguny ─────────────────────────────────────────────────────
   Kolorowe pola na bryle plus krazek z litera. Krazek ma pelne tlo,
   wiec litera czyta sie tak samo na kazdym ksztalcie - napis na samym
   polprzezroczystym polu gubil sie przy ciemniejszych bryłach.      */
.biegun{stroke:none;pointer-events:none}
.biegun--n{fill:#DC2626;fill-opacity:.28}
.biegun--s{fill:#2563EB;fill-opacity:.28}
.biegun__podzial{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 3;opacity:.45}
/* Klasa bazowa krazka - obwodka odcinajaca go od pola bieguna pod spodem.
   Do 07.09.2026 istnialy tylko warianty --n i --s, wiec krazek na jasnym
   polu zlewal sie z nim krawedzia. Znalezione przy przegladzie klas. */
.krazek{stroke:#fff;stroke-width:1.5}
.krazek--n{fill:#DC2626}
.krazek--s{fill:#2563EB}
.krazek__opis{font-family:Cairo,system-ui,sans-serif;font-weight:700;
  fill:#fff;text-anchor:middle;pointer-events:none}

/* ── parametry pod rysunkiem ─────────────────────────────────────
   Nazwa produktu podaje wymiary bez opisu - tu jest, ktory jest ktory. */
.parametry{display:grid;gap:0;margin:16px 0 0}
.param{display:flex;justify-content:space-between;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--hairline)}
.param:last-child{border-bottom:0}
.param dt{margin:0;color:var(--muted);font-size:14px}
.param dd{margin:0;color:var(--ink);font-weight:600;font-size:15px;
  font-variant-numeric:tabular-nums}

.parametry--mini{margin-top:8px}
.parametry--mini .param{padding:3px 0;border-bottom:0}
.parametry--mini dt{font-size:12px}
.parametry--mini dd{font-size:13px}

/* ── stan sprzedazy ──────────────────────────────────────────────
   Z pola saleState w products.json, slownik w shop.json[availability].
   Na liscie pokazujemy tylko stany inne niz 1 - "dostepny" przy kazdej
   z 525 pozycji to szum, a nie informacja. Na karcie pokazujemy zawsze.
   Dopisane 07.09.2026.                                              */
.stan{display:inline-block;margin-top:8px;padding:2px 10px;border-radius:999px;
  font-size:12px;font-weight:600;line-height:1.6}
.stan--1{background:#ECFDF5;color:#15803D}
.stan--2{background:#FFF7ED;color:#C2410C}
.stan--3{background:var(--surface-2);color:var(--muted)}
.produkt__symbol .stan{margin-top:0;margin-left:8px}



/* Tabliczka znamionowa na karcie produktu: cztery grupy, kazda z naglowkiem. */
.parametry__grupa{font-size:17px;font-weight:600;color:var(--ink);
  margin:32px 0 8px;padding-bottom:8px;border-bottom:2px solid var(--hairline)}
.parametry__grupa:first-of-type{margin-top:24px}
.produkt .parametry{max-width:520px}

/* ── komunikat o ciasteczkach ─────────────────────────────────────
   Pasek u dolu, nie modal zaslaniajacy strone. Satelita nie ma analityki,
   wiec to informacja, a nie bramka - blokowanie tresci do czasu klikniecia
   byloby udawaniem zgody, ktorej nie ma o co prosic. Dopisane 07.09.2026. */
/* Regula ponizej MUSI stac przed .cookies{display:flex}. Bez niej atrybut
   hidden nie dziala: [hidden]{display:none} pochodzi z arkusza przegladarki,
   a KAZDA regula autora wygrywa z arkuszem przegladarki niezaleznie od
   specyficznosci. Efekt byl taki, ze pasek pokazywal sie od razu, a klikniecie
   Rozumiem ustawialo hidden=true i nie zmienialo nic - wygladalo na przycisk,
   ktorego nie da sie kliknac. Znalezione 07.09.2026 po zgloszeniu. */
.cookies[hidden]{display:none}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  max-width:var(--max);margin:0 auto;padding:16px 24px;
  background:var(--surface);color:var(--body);
  border:1px solid var(--hairline);border-radius:8px;
  box-shadow:0 8px 24px rgba(17,24,39,.16)}
.cookies__tekst{flex:1 1 320px;margin:0;font-size:14px;line-height:1.5}
.cookies__ok{flex:none;min-height:40px;padding:0 24px;border:0;border-radius:6px;
  background:var(--primary);color:#fff;cursor:pointer;
  font:600 14px/1 Cairo,system-ui,sans-serif;transition:background .15s}
.cookies__ok:hover{background:var(--primary-hover)}
.cookies__ok:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* Odmowa ma te sama wielkosc, ten sam krok pisma i ten sam obszar klikalny
   co zgoda - rozni sie tylko tym, ze nie jest wypelniona kolorem. Odmowa
   schowana pod szarym napisem drobnym drukiem daje zgode wymuszona ukladem,
   a taka zgoda nie jest dobrowolna. 08.09.2026, razem z wejsciem GA4. */
.cookies__nie{flex:none;min-height:40px;padding:0 24px;border:1px solid var(--hairline);
  border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;
  font:600 14px/1 Cairo,system-ui,sans-serif;transition:background .15s,border-color .15s}
.cookies__nie:hover{background:var(--canvas);border-color:var(--muted)}
.cookies__nie:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(max-width:600px){
  .cookies{left:8px;right:8px;bottom:8px;padding:16px}
  .cookies__ok,.cookies__nie{width:100%}
}

/* ── tabele danych i lista dokumentow ─────────────────────────────
   Doszly ze strona kontaktu 07.09.2026. Agent uzyl tam klas .col-12
   i .tabela-dane, ktorych w tym arkuszu nie ma - Bootstrap zostal
   po legacy i strona rozjechala sie bez slowa ostrzezenia. */
.tabela-przewijana{overflow-x:auto;margin:0 0 24px}

ul.dokumenty{display:grid;gap:8px;padding:0;margin:0 0 24px;list-style:none}
.dokumenty li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  padding:16px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:8px;transition:border-color .15s}
.dokumenty li:hover{border-color:var(--primary)}
.dokumenty a{font-weight:600;text-decoration:none}
.dokumenty a:hover{text-decoration:underline}
.dokumenty__typ{grid-column:2;grid-row:1;align-self:start;padding:2px 8px;
  border-radius:999px;background:var(--surface-2);color:var(--muted);
  font-size:12px;font-weight:600}
.dokumenty__opis{grid-column:1/-1;font-size:14px;color:var(--muted)}

/* Ramka ostrzegawcza w tresci. Doszla z magnetyzery-dzialanie 07.09.2026. */
.uwaga{padding:16px 24px;margin:0 0 24px;border-left:4px solid var(--accent);
  border-radius:0 6px 6px 0;background:#FFF7ED;color:var(--ink);font-size:15px}
.uwaga p:last-child{margin-bottom:0}

/* ── przeliczniki ────────────────────────────────────────────────
   Trzy strony narzedziowe: kalkulator-jednostek, przelicznik-jednostek
   i kalkulator-materialu. Wlasny JS, zero jQuery.
   Dopisane 07.09.2026, zadania P5-003 i P5-004.                      */

.przelicznik{display:grid;gap:24px;margin:0 0 32px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.przelicznik__grupa{padding:24px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px}
.przelicznik__grupa h2{font-size:19px;font-weight:600;margin:0 0 16px;
  padding-bottom:8px;border-bottom:1px solid var(--hairline)}
.przelicznik__symbol{color:var(--muted);font-weight:400}
.przelicznik__wejscie{display:grid;gap:16px;margin:0 0 16px;
  grid-template-columns:1fr 1fr;align-items:end}
@media(max-width:400px){.przelicznik__wejscie{grid-template-columns:1fr}}
.przelicznik__uwaga{margin:16px 0 0;font-size:13px;color:var(--muted)}

/* Kalkulator materialu ma trzy pola wymiarow w jednym rzedzie - przy
   plytce i pierscieniu. Ten sam kontener obsluguje dwa i trzy pola. */
#km-pola-plytka,#km-pola-pierscien{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}

.pole{display:flex;flex-direction:column;gap:8px;min-width:0}
.pole__etykieta{font-size:13px;font-weight:600;color:var(--body)}
.pole__input{width:100%;min-height:48px;padding:0 14px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--hairline);border-radius:6px;
  font:400 16px/1 Cairo,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s,box-shadow .15s}
.pole__input:hover{border-color:var(--muted)}
.pole__input:focus-visible{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(0,102,255,.2)}
select.pole__input{cursor:pointer;-webkit-appearance:none;appearance:none;
  padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* Tabela wynikow przelicznika. Dwie usterki naraz, obie zmierzone
   08.09.2026 na /przelicznik-jednostek przy oknie 1140 px:
   1. tresc dotykala ramki - pierwsza kolumna zaczynala sie na 41 px,
      a wewnetrzna krawedz ramki tez byla na 41 (0 px odstepu); prawa
      strona tak samo;
   2. naglowek "Wartosc" byl dosuniety do prawej (koniec na 338), a sama
      wartosc "176" stala przy lewej krawedzi swojej kolumny (koniec na
      281) - 57 px rozjazdu miedzy etykieta a liczba, ktora opisuje.
   Powod drugiej: `.tabela-wynik__liczba` ma szczegolowosc (0,1,0)
   i przegrywala z `.tabela-przewijana td` (0,1,1) z linii 475. Selektor
   objety teraz tabela ma (0,2,1) i wygrywa. */
.tabela-wynik{width:100%;border-collapse:collapse;font-size:15px}
.tabela-wynik thead th{padding:8px 16px;text-align:left;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--hairline)}
.tabela-wynik thead th:last-child{text-align:right}
.tabela-wynik tbody th{padding:8px 16px;text-align:left;font-weight:400;
  border-bottom:1px solid var(--hairline)}
.tabela-wynik tbody td{padding:8px 16px;border-bottom:1px solid var(--hairline)}
.tabela-wynik td.tabela-wynik__liczba{text-align:right}
.tabela-wynik tbody tr:last-child th,
.tabela-wynik tbody tr:last-child td{border-bottom:0}
.tabela-wynik__symbol{font-weight:600;color:var(--ink)}
.tabela-wynik__nazwa{color:var(--muted);font-size:13px}
.tabela-wynik__liczba{text-align:right;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── tabele w tresci, ktore nie miesza sie na telefonie ───────────
   Uklad okresowy ma tabele czterokolumnowe - przy 375 px rozpychaly
   cala strone w poziomie. Przewija sie tabela, nie dokument.
   Dopisane 07.09.2026, zadanie P5-005.                              */
.tabela-przewijana table{min-width:min(480px,100%);border-collapse:collapse;
  width:auto;max-width:100%;
  margin:0;background:var(--surface);border:1px solid var(--hairline);
  border-radius:8px;overflow:hidden;font-size:15px}
.tabela-przewijana th,.tabela-przewijana td{padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--hairline);vertical-align:top}
.tabela-przewijana th{background:var(--surface-2);font-weight:600;color:var(--ink);
  white-space:nowrap}
.tabela-przewijana td{color:var(--body)}
.tabela-przewijana tbody tr:last-child th,
.tabela-przewijana tbody tr:last-child td{border-bottom:0}

/* ── strona kontaktu ─────────────────────────────────
   Trzecia wersja, 07.09.2026. Pierwsza: trzy karty rownej wysokosci, dwie
   w polowie puste. Druga: dwie kolumny, ale ramka z danymi rejestrowymi
   zabierala trzecia czesc ekranu na numery, ktorych nikt nie czyta - poszly
   do stopki, gdzie i tak sa potrzebne na kazdej stronie.
   Teraz: trzy kanaly kontaktu jako karty klikalne w calosci, kazda z pasem
   koloru na gorze. Telefon i e-mail sa odnosnikami - na telefonie klikniecie
   dzwoni. Adres nie jest, wiec to <div>, nie <a>.                        */
.kontakt{display:grid;gap:16px;margin:0 0 32px;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kontakt__wstep{max-width:72ch}

.kanal{position:relative;display:flex;flex-direction:column;gap:4px;
  padding:24px;overflow:hidden;text-decoration:none;
  background:var(--surface);border:1px solid var(--hairline);border-radius:8px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.kanal::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--hairline);transition:background .15s}
a.kanal:hover{border-color:var(--primary);transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(17,24,39,.08)}
a.kanal:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.kanal--tel::before{background:var(--primary)}
.kanal--mail::before{background:var(--accent)}
.kanal--adres::before{background:var(--muted)}
.kanal__etykieta{font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.kanal__wartosc{font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--ink);
  line-height:1.35;word-break:break-word}
a.kanal:hover .kanal__wartosc{color:var(--primary)}
.kanal__wartosc--maly{font-size:16px;font-weight:600;line-height:1.6}
.kanal__opis{margin-top:4px;font-size:13px;color:var(--muted)}

p.kontakt__nisza{max-width:none;margin:0 0 48px;padding:16px 24px;
  background:var(--surface-2);border-left:3px solid var(--primary);
  border-radius:0 8px 8px 0;font-size:15px}
p.kontakt__nisza strong{color:var(--ink)}

/* Formularz w karcie. Wczesniej pola sterczące na tle strony wygladaly
   jak zalacznik do tekstu, a nie jak miejsce, w ktorym cos sie robi.
   Karta na bialym tle z krawedzia daje im ramy. 07.09.2026. */
.formularz-karta{max-width:760px;margin:0 0 48px;padding:32px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:8px}
@media(max-width:600px){.formularz-karta{padding:24px 16px}}
.formularz-karta__tytul{margin:0 0 8px;font-size:24px}
.formularz-karta__lead{max-width:56ch;margin:0 0 24px;font-size:15px;color:var(--muted)}
.formularz{max-width:none;margin:0}
.formularz__rzad{display:grid;gap:16px;margin:0 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.formularz .pole{margin:0 0 16px}
.pole__opc{font-weight:400;color:var(--muted)}
.pole__input--tekst{min-height:160px;padding:12px;line-height:1.6;resize:vertical}
p.formularz__stopka{margin:16px 0 0;font-size:13px;color:var(--muted)}

/* Mapa Google. loading=lazy, wiec ramka nie startuje, dopoki nikt do niej
   nie doscrolluje - inaczej zjadalaby LCP na kazdym wejsciu. */
.mapa{overflow:hidden;border:1px solid var(--hairline);border-radius:8px;
  background:var(--surface-2)}
.mapa iframe{display:block;width:100%;height:400px;border:0}
@media(max-width:600px){.mapa iframe{height:300px}}

/* Dwie ostatnie klasy Bootstrapa w 29 stronach tresci, wylapane 07.09.2026
   przy przegladzie po P5. .table stoi na szesciu stronach, .dimension-color
   na jednej. Odtwarzamy je zamiast przepisywac tresc - to sa strony, ktore
   dzialaly, a nie material na przebudowe. */
.table{width:100%;margin:24px 0;border-collapse:collapse;font-size:15px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:8px;
  overflow:hidden}
.table th,.table td{padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--hairline)}
.table th{background:var(--surface-2);font-weight:600;color:var(--ink)}
.table tr:last-child td{border-bottom:0}
.dimension-color{color:var(--primary);font-weight:600}

/* H1 skladany przez naglowek.php dla 23 stron tresci, ktore go nie mialy.
   Odstep od dolu wiekszy niz zwykly, bo pod nim zaczyna sie od razu tresc
   w siatce Bootstrapa, bez wlasnego marginesu. Dopisane 07.09.2026. */
/* Odstep pod tytulem mniejszy, a pierwszy naglowek w tresci nie dokłada
   swojego marginesu gornego - razem bylo 104 px pustki pod H1. */
.tytul-strony{margin:24px 0 16px}
.tresc > .row:first-child h4:first-child,
.tresc > *:first-child h2:first-child,
.tresc > *:first-child h4:first-child{margin-top:0}

/* Naglowek w rysunku: ksztalt, material i kierunek namagnesowania.
   Doszedl 07.09.2026 - rysunek pokazywal proporcje i bieguny, ale nie mowil,
   czego dotyczy ani z czego to jest. Wymiary zostaja przy osiach, zeby ta
   sama liczba nie stala na obrazku dwa razy. */
.rys-tytul{font:700 14px Cairo,system-ui,sans-serif;fill:var(--ink)}
.rys-material{font:600 11px Cairo,system-ui,sans-serif;fill:var(--muted);
  letter-spacing:.03em}
.rys-kierunek{font:600 10px Cairo,system-ui,sans-serif;fill:var(--muted)}

/* Miniatura ma 200 px wysokosci przy polu 270 jednostek, czyli wszystko
   kurczy sie o jedna czwarta. Czcionki dostaja tu wieksze wartosci, zeby
   PO przeskalowaniu wyszly tej samej wielkosci co na duzym rysunku.
   Kierunek namagnesowania na miniaturze znika - nie miesci sie obok tytulu. */
.rys-mini .rys-tytul{font-size:20px}
.rys-mini .rys-material{font-size:16px}
.rys-mini .rys-kierunek{display:none}

/* ── naglowek kategorii ──────────────────────────────────────────
   H1 kategorii byl tej samej wielkosci co naglowek strony tresci i ginal
   nad siatka 120 kart. Tu jest jedyna rzecz, ktora nazywa cala liste,
   wiec dostaje wlasna wage. Dopisane 07.09.2026. */
.kat-naglowek{margin:0 0 32px;padding-bottom:24px;
  border-bottom:1px solid var(--hairline)}
.kat-naglowek__ile{max-width:64ch;margin:0;font-size:16px;color:var(--muted)}

/* Przycisk wysylki na pelna szerokosc telefonu - kciuk trafia w cokolwiek. */
@media(max-width:600px){.formularz .przycisk{width:100%}}

/* ── ikony ───────────────────────────────────────────────────────
   Wklejany SVG z include/ikony.php. Rysowane linia i kolorem currentColor,
   wiec ikona przejmuje kolor tekstu obok i zmienia sie razem z nim przy
   najechaniu - bez ani jednej dodatkowej reguly na stan. 07.09.2026. */
.ikona{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ikona--duza{width:1.6em;height:1.6em;stroke-width:1.6}

/* Okruszki: dom przed napisem, odstep z gapa listy. */
.okruszki a{gap:6px}
.okruszki li:first-child .ikona{stroke-width:1.9}

/* Karty kontaktu: ikona nad etykieta, w kolorze paska danej karty. */
.kanal__ikona{width:26px;height:26px;stroke-width:1.6;margin-bottom:8px}
.kanal--tel .kanal__ikona{color:var(--primary)}
.kanal--mail .kanal__ikona{color:var(--accent)}
.kanal--adres .kanal__ikona{color:var(--muted)}

/* Lista dokumentow: kartka przed nazwa pliku. */
.dokumenty a{display:inline-flex;align-items:center;gap:8px}

/* Notki: ikona wstawiana przez ::before nie istnieje - notki dostaja ja
   z tresci, wiec tu tylko odstep, gdy jest. */
.notka .ikona,.uwaga .ikona{margin-right:8px;color:var(--accent)}

/* Ikony w menu: odstep od napisu i lekkie wyszarzenie, zeby nie krzyczaly
   glosniej niz tekst. Przy najechaniu biora kolor razem z napisem. */
.nav-sat__start,.nav-sat__kontakt,.nav-sat__tytul{gap:8px}
.nav-sat .ikona{opacity:.65;transition:opacity .15s}
.nav-sat__start:hover .ikona,.nav-sat__kontakt:hover .ikona,
.nav-sat__tytul:hover .ikona,.nav-sat__grupa[open]>.nav-sat__tytul .ikona{opacity:1}

/* Ikona po prawej stronie napisu - w przyciskach i odnosnikach wychodzacych
   poza serwis. Odstep z lewej, nie z prawej, bo stoi na koncu. */
.przycisk .ikona,.produkt__cta .ikona{margin-left:8px}
.przycisk .ikona{transition:transform .15s}
.przycisk:hover .ikona{transform:translateX(3px)}

/* Strzalka powrotu to ta sama ikona obrocona - jeden ksztalt, dwa uzycia. */
.ikona--wstecz{transform:rotate(180deg);margin-right:6px}

/* Odnosnik wychodzacy poza serwis: ikona mniejsza i blada, ma sygnalizowac,
   nie przyciagac wzrok mocniej niz sam napis. */
a .ikona[class=ikona]{opacity:.55}
.stopka__zakup .ikona,.tresc a .ikona{width:.9em;height:.9em;margin-left:4px;opacity:.55}

/* Notki z ikona: ikona w linii z pierwszym slowem, nie nad tekstem. */
.notka .ikona,p.kontakt__nisza .ikona{margin-right:8px;vertical-align:-.22em}
.notka--info .ikona,p.kontakt__nisza .ikona{color:var(--primary)}
.notka--ostrzezenie .ikona{color:var(--accent)}

/* Pasek pod mapa: dwa odnosniki obok siebie. */
.mapa__pod{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 0;font-size:14px}
.mapa__pod a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.mapa__pod a:hover{text-decoration:underline}

/* ── telefon: rytm pionowy i marginesy ───────────────────────────
   Zmierzone na zywo przy 375 px, 07.09.2026. Odstepy sekcji byly te same
   co na desktopie, wiec przewijanie miedzy trescia bylo dluzsze niz sama
   tresc. Baner zabieral 180 px zaraz pod menu, ktore zabieralo 560 px. */
@media(max-width:600px){
  .kontener{padding:0 20px}
  .sekcja{padding-top:32px;padding-bottom:32px}
  .hero{padding-top:32px;padding-bottom:32px}
  .baner img{height:140px}
  .baner__tytul{padding:32px 20px 12px;font-size:14px}
  .okruszki{padding:10px 20px}

  /* Karty i sekcje: mniej powietrza w srodku, wiecej miedzy nimi. */
  .kanal{padding:20px}
  .krok{padding:20px}
  .kategoria__lista{gap:12px}
  .kroki{gap:12px}
  .stopka{margin-top:32px;padding-top:24px;padding-bottom:24px}
  .stopka__prawne{gap:8px 16px}

  /* Naglowki: mniejszy odstep dolny, bo caly rytm jest ciasniejszy. */
  h1,h2,h3{margin-bottom:12px}
  .tresc h2,.tresc h4{margin-top:24px}
  p{margin-bottom:14px}

  /* Pasek cookies zjada pol ekranu przy tej dlugosci tekstu. */
  .cookies{padding:14px 16px;gap:12px}
  .cookies__tekst{font-size:13px;line-height:1.45}
  .cookies__ok{min-height:44px}

  /* Rysunek produktu: wieksza plocha, mniej ramki dokola. */
  .rysunek{padding:12px}
  .rys-duzy{max-width:100%}

  /* Tabliczka parametrow: etykieta i wartosc w dwoch wierszach, gdy
     nazwa parametru jest dluga - inaczej "wysokosc z gwintem" lamie sie
     w slupku po dwie litery. */
  .param{flex-wrap:wrap;gap:2px 16px}
  .param dt{flex:1 1 60%}
  .param dd{flex:0 0 auto;margin-left:auto}
}

/* Pasek dolny nie moze zaslaniac ostatniej sekcji strony. */
body{padding-bottom:0}
@media(max-width:600px){.stopka{padding-bottom:32px}}

/* Granica czesci roboczej walka magnetycznego - tam konczy sie ciag magnesow,
   a zaczyna sam starter. Kreska pelna, zeby odrozniala sie od przerywanych
   podzialow miedzy sekcjami. Dopisane 07.09.2026. */
.walek__starter{stroke:var(--ink);stroke-width:1.4;opacity:.75}

/* ── poradniki ───────────────────────────────────────────────────
   Rusztowanie E-E-A-T: pasek danych, blok autorstwa, ramka na wlasne
   doswiadczenie i lista zrodel. Dopisane 07.09.2026. */
.poradnik-pasek{display:flex;flex-wrap:wrap;gap:8px 32px;padding:16px 0;margin:0 0 32px;
  list-style:none;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.poradnik-pasek li{display:flex;flex-direction:column;gap:2px;font-size:15px;
  font-weight:600;color:var(--ink)}
.poradnik-pasek span{font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

.autor{margin:48px 0 0;padding:24px;background:var(--surface-2);border-radius:8px}
.autor__tytul{font-size:15px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.autor__tresc{max-width:72ch;margin:0 0 12px;font-size:15px}
.autor__kontakt{margin:0;font-size:14px;color:var(--muted)}

/* Ramka na doswiadczenie wlasne. Akcent po lewej i inne tlo, zeby bylo
   widac, ze to nie jest ta sama warstwa co reszta tekstu. */
.zpraktyki{margin:32px 0;padding:24px;background:#FFF7ED;
  border-left:4px solid var(--accent);border-radius:0 8px 8px 0}
.zpraktyki__tytul{font-size:15px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#C2410C;margin:0 0 12px}
.zpraktyki__tresc{max-width:72ch}
.zpraktyki__tresc p:last-child{margin-bottom:0}
.zpraktyki__podpis{margin:12px 0 0;font-size:13px;color:var(--muted);font-style:italic}

.zrodla{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--hairline)}
.zrodla__tytul{font-size:15px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.zrodla ul{max-width:72ch;margin:0;padding-left:20px;font-size:14px;color:var(--muted)}
.zrodla li{margin-bottom:6px}

@media(max-width:600px){
  .poradnik-pasek{gap:12px 24px}
  .autor,.zpraktyki{padding:20px}
}

/* Tabela danych bez ramki - etykieta po lewej, wartosc po prawej.
   Wraca 07.09.2026: zdjalem ja, gdy strona kontaktu przeszla na <dl>,
   ale uzywa jej przelicznik jednostek z paczki P5. */
table.dane{border-collapse:collapse;width:100%;max-width:520px;font-size:15px}
table.dane th,table.dane td{padding:8px 16px 8px 0;text-align:left;
  vertical-align:top;border-bottom:1px solid var(--hairline)}
table.dane th{font-weight:600;color:var(--muted)}
table.dane td{color:var(--ink)}

/* Pas stron obslugowych w stopce. Wizualnie lzejszy od prawnych - to nie
   sa dokumenty, tylko zwykla nawigacja pomocnicza. 07.09.2026. */
/* .stopka__serwis i .stopka__prawne nie maja juz wlasnego ukladu - obie
   listy dostaja go z .stopka__lista. Klasy zostaja w markupie jako nazwy
   znaczace, przydatne przy szukaniu w kodzie. 08.09.2026. */

/* ── kalkulator doboru magnesow (K1) ─────────────────────────────
   Przepisane 07.09.2026, drugie podejscie. Bylo: formularz w bialej karcie,
   a tabela wynikow goła na tle strony i dosunieta do lewej - dwie polowy
   jednego przyrzadu wygladaly jak dwie rozne rzeczy. Teraz oba bloki maja
   te sama karte i te sama szerokosc, a caly kalkulator stoi na srodku. */
.kalk-blok{margin:0 0 48px}
.kalk__lead{margin:0 0 24px;font-size:17px;max-width:none}

.kalk{margin:0 0 24px;padding:32px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px;
  box-shadow:0 1px 3px rgba(17,24,39,.04)}
.kalk--wyniki{margin-bottom:0}
.kalk__tytul{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:23px}
.kalk__tytul .ikona{color:var(--primary);width:1.3em;height:1.3em}

.kalk__pola{display:grid;gap:20px;margin:0 0 24px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kalk .pole{margin:0}
.kalk .pole__etykieta{display:flex;align-items:center;gap:6px}
.kalk .pole__etykieta .ikona{color:var(--primary);opacity:.8}

/* Cztery wyniki geometrii - ikona, liczba, jednostka, opis pod spodem. */
.kalk__geometria{display:grid;gap:20px;padding:24px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--hairline)}
.wynik{display:flex;flex-direction:column;gap:2px}
.wynik__ikona{width:22px;height:22px;color:var(--primary);opacity:.75;margin-bottom:4px}
.wynik__liczba{font-size:24px;font-weight:700;color:var(--ink);line-height:1.2;
  font-variant-numeric:tabular-nums}
.wynik__jedn{font-size:15px;font-weight:600;color:var(--muted)}
.wynik__opis{font-size:13px;color:var(--muted)}

.kalk__ile{margin:0 0 24px;color:var(--muted);font-size:15px}

/* Tabela wynikow.
   07.09.2026, trzecia poprawka: bylo za malo. Tekst 15 px, naglowki 11 px
   i wiersze po 10 px robily z niej wydruk z drukarki iglowej - a to jest
   glowna tresc tej strony, nie przypis. Kolumna z nazwa zabierala przy tym
   40 procent szerokosci, wiec liczby, ktore sie porownuje, stlaczaly sie
   na prawej krawedzi. Teraz szerokosci kolumn sa ustalone, a stopnie pisma
   wynikaja z waznosci: udzwig kompletu jest najwiekszy, bo to on decyduje. */
table.kalk__tabela{width:100%;font-size:16px;
  border-collapse:separate;border-spacing:0;table-layout:fixed}
/* Piec kolumn na pelnej szerokosci karty. Poprzednie `max-width:840px`
   konczylo tabele 184 px przed prawa krawedzia karty (zmierzone 07.09.2026:
   karta 16-1105, tabela 49-889) - wygladalo to jak tabela wsunieta w rog,
   a nie jak tabela strony. Pustka po prawej znika przez szerokosci kolumn,
   nie przez zwezanie calosci: nazwa dostaje najwiecej, bo tam jest najdluzszy
   napis (MPL 40x10x5x2[7/3.5] / N38), kolumna przycisku tylko tyle, ile
   przycisk potrzebuje. */
/* Kolumna przycisku 14%, nie 12%: przy 900 px szerokosci okna 12% dawalo
   94 px, a przycisk (92 px) plus odstep od ramki (16 px) potrzebuje 108 -
   przycisk wychodzil 2 px ZA ramke. Zmierzone 07.09.2026 na trzech
   szerokosciach okna, bo przy 1140 i 1516 miescil sie i usterki nie bylo widac. */
table.kalk__tabela col.kol-nazwa{width:32%}
table.kalk__tabela col.kol-wymiar{width:20%}
table.kalk__tabela col.kol-komplet{width:22%}
table.kalk__tabela col.kol-masa{width:12%}
table.kalk__tabela col.kol-kup{width:14%}

table.kalk__tabela th{padding:0 14px 12px 0;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--hairline)}
table.kalk__tabela td{padding:12px 14px 12px 0;
  border-bottom:1px solid var(--hairline);vertical-align:middle;
  font-variant-numeric:tabular-nums}
table.kalk__tabela tr:last-child td{border-bottom:0}
table.kalk__tabela tbody tr{transition:background .15s}
table.kalk__tabela tbody tr:hover{background:var(--canvas)}
/* Naglowek trzyma sie swojej kolumny. Byly tu dwa bledy naraz.
   1. `td:nth-child(3)` bez `table.kalk__tabela` z przodu to selektor GLOBALNY -
      dosuwal do prawej trzecia i czwarta kolumne KAZDEJ tabeli w serwisie.
   2. W samym kalkulatorze i tak nie dzialal, bo `table.dane td` (linia 743)
      ma wyzsza szczegolowosc (0,1,2 wobec 0,1,1) i wygrywal z nim
      `text-align:left`. Skutek zmierzony 07.09.2026: naglowek "Masa" konczyl
      sie na 782 px, a wartosc "0,6 kg" na 733 px - 49 px rozjazdu; przy
      "Udzwig kompletu" 113 px. Naglowek stal osobno od swojej kolumny.
   Wyrownanie do LEWEJ, nie do prawej: liczby i tak maja `tabular-nums`
   i te sama liczbe cyfr, a odznaka "najwiecej" przy pierwszym wierszu
   przy dosunieciu do prawej wypychalaby jego liczbe o szerokosc odznaki
   w bok - czyli psulaby kolumne, ktora ma prostowac. */
table.kalk__tabela th:nth-child(3),table.kalk__tabela td:nth-child(3),
table.kalk__tabela th:nth-child(4),table.kalk__tabela td:nth-child(4){text-align:left}
table.kalk__tabela th:last-child,table.kalk__tabela td:last-child{text-align:right}
/* Odsuniecie od ramki. Te paddingi pisalem, gdy tabela byla goła - stala
   na tle karty, wiec zerowy odstep z lewej i prawej ustawial ja rowno
   z tekstem strony. Teraz tabela siedzi w `.tabela-przewijana`, ktora
   maluje jej wlasna ramke 1 px i szary pas naglowka - i zerowy padding
   znaczy juz co innego: tresc dotyka ramki. Zmierzone 07.09.2026 przy
   1516 px: tresc pierwszej kolumny na 229, wewnetrzna krawedz ramki na
   229 (1 px odstepu), prawa krawedz przycisku 1269 przy krawedzi 1269
   (0 px). Naglowek i dane dostaja ten sam padding, wiec wyrownanie
   kolumn z poprzedniej poprawki zostaje nietkniete. */
table.kalk__tabela th:first-child,
table.kalk__tabela td:first-child{padding-left:16px}
table.kalk__tabela th:last-child,
table.kalk__tabela td:last-child{padding-right:16px}

.kalk__tabela td:first-child a{display:inline-block;font-size:16px;
  color:var(--ink);font-weight:600;line-height:1.35;text-decoration:none}
.kalk__tabela td:first-child a:hover{color:var(--primary);text-decoration:underline}
.kalk__wymiar{font-size:15px;color:var(--body)}
.kalk__poboczne{font-size:15px;color:var(--muted)}

/* Udzwig kompletu - liczba, dla ktorej ktos tu przyszedl. */
.kalk__komplet{font-size:21px;font-weight:700;color:var(--ink);
  line-height:1.25;white-space:nowrap}
/* Udzwig jednej sztuki jako podpis - ta sama wielkosc, tylko przed
   pomnozeniem. Osobna kolumna na to byla marnotrawstwem szerokosci. */
.kalk__zeszt{display:block;margin-top:2px;font-size:13px;font-weight:400;
  color:var(--muted);letter-spacing:.01em}
.kalk__najwiecej{display:inline-block;margin-left:8px;padding:2px 8px;
  vertical-align:2px;border-radius:999px;background:#FFF7ED;color:#C2410C;
  font-size:11px;font-weight:700;letter-spacing:.03em}

.kalk__kup{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:0 18px;border-radius:6px;background:var(--accent);
  color:#fff;font-size:14px;font-weight:600;text-decoration:none;
  white-space:nowrap;transition:background .15s,transform .15s}
.kalk__kup:hover{background:#ea6a0c;transform:translateY(-1px)}
.kalk__kup .ikona{width:1.1em;height:1.1em}
/* Wszystkie przyciski jednej szerokosci - inaczej kazdy jest tak szeroki jak
   jego tresc i prawa krawedz kolumny faluje mimo dosuniecia do prawej. */
.kalk__kup{min-width:92px}

@media(max-width:820px){
  .kalk{padding:20px 16px}
  table.kalk__tabela{min-width:700px;table-layout:auto}
}

.kalk__wzory{max-width:72ch;padding-left:20px}
.kalk__wzory li{margin-bottom:8px}

@media(max-width:600px){.kalk{padding:20px 16px}}

/* Napis wylacznie dla czytnika ekranu - kolumna przycisku nie ma widocznego
   naglowka, ale pusty <th> to dla czytnika dziura w tabeli. */
.tylko-czytnik{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── wyszukiwarka ─────────────────────────────────────────────────
   Dodane 08.09.2026. Formularz GET, zero JavaScriptu - dziala przy
   odmowie zgody na ciasteczka i przy wylaczonych skryptach.          */
.nav-sat__szukaj{display:flex;align-items:center;gap:0;margin-left:8px}
.nav-sat__pole{width:150px;height:34px;padding:0 12px;
  border:1px solid var(--hairline);border-radius:6px 0 0 6px;border-right:0;
  background:var(--canvas);color:var(--ink);
  font:400 14px/1 Cairo,system-ui,sans-serif;transition:width .15s,border-color .15s}
.nav-sat__pole:focus{width:220px;outline:none;border-color:var(--primary)}
.nav-sat__pole::placeholder{color:var(--muted)}
.nav-sat__lupa{display:flex;align-items:center;justify-content:center;
  width:38px;height:34px;padding:0;cursor:pointer;
  border:1px solid var(--hairline);border-radius:0 6px 6px 0;
  background:var(--surface-2);color:var(--body);transition:background .15s,color .15s}
.nav-sat__lupa:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.nav-sat__lupa:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nav-sat__lupa .ikona{width:18px;height:18px}

.szukajka{margin:0 0 32px;padding:24px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px}
.szukajka__etykieta{display:block;margin:0 0 8px;
  font-size:14px;font-weight:600;color:var(--ink)}
.szukajka__rzad{display:flex;flex-wrap:wrap;gap:8px}
.szukajka__pole{flex:1 1 260px;min-height:44px}
.szukajka__rzad .przycisk{flex:none}
.szukajka__podpowiedz{margin:12px 0 0;font-size:14px;color:var(--muted)}
.szukajka__tropy{margin:0;padding-left:20px}
.szukajka__tropy li{margin-bottom:8px}
.szukajka__ile{margin:0 0 24px;font-size:17px}

/* Licznik przy naglowku grupy - szara pastylka, nie krzyczy. */
.szukajka__licznik{display:inline-block;margin-left:8px;padding:2px 10px;
  border-radius:999px;background:var(--surface-2);color:var(--muted);
  font-size:13px;font-weight:600;vertical-align:middle}
.tresc h2 .ikona{width:1em;height:1em;margin-right:8px;color:var(--primary);
  vertical-align:-.1em}

.wyniki{margin:0 0 32px;padding:0;list-style:none}
.wynik{padding:16px 0;border-bottom:1px solid var(--hairline)}
.wynik:last-child{border-bottom:0}
.wynik__tytul{display:inline-block;margin-bottom:4px;
  font-size:17px;font-weight:600;color:var(--primary);text-decoration:none}
.wynik__tytul:hover{text-decoration:underline}
.wynik__wycinek{margin:0;font-size:15px;color:var(--body);line-height:1.55}
.wynik__wycinek mark{padding:0 2px;background:#FEF3C7;color:var(--ink);border-radius:2px}
/* Produkty w dwoch kolumnach - to sa krotkie nazwy, jedna na wiersz
   zostawialaby polowe szerokosci pusta. */
@media(min-width:768px){
  .wyniki--produkty{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
}
@media(max-width:900px){
  .nav-sat__szukaj{order:-1;flex-basis:100%;margin:0;padding:12px 16px;
    border-top:1px solid var(--hairline)}
  .nav-sat__pole{flex:1 1 auto;width:auto;height:40px}
  .nav-sat__pole:focus{width:auto}
  .nav-sat__lupa{height:40px}
}