/* 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)}

h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.2;margin:0 0 16px}
h1{font-size:clamp(28px,5vw,44px)}
h2{font-size:clamp(22px,3vw,30px);font-weight:600}
h3{font-size:20px;font-weight:600}
p{margin:0 0 16px}

.kontener{width:100%;max-width:var(--max);margin:0 auto;padding:0 16px}
.sekcja{padding:48px 0}
.sekcja--tlo{background:var(--surface-2)}
@media(min-width:768px){.sekcja{padding:64px 0}}

/* ── 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}

@media(max-width:900px){
  /* Piec pozycji ustawia sie w kolumne. Hamburger niepotrzebny -
     grupy i tak zwijaja sie wlasnym <details>. */
  .nav-sat{flex-direction:column;align-items:stretch;padding:0}
  .nav-sat__marka{padding:12px 16px;border-bottom:1px solid var(--hairline)}
  .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:static}
}

/* ── 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}}
.baner__tytul{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:48px 16px 16px;color:#fff;font-size:15px;font-weight:600;
  background:linear-gradient(180deg,rgba(17,24,39,0) 0%,rgba(17,24,39,.72) 100%)}
.baner__tytul{max-width:var(--max);margin:0 auto}

/* ── strona glowna ───────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,#fff 0%,var(--canvas) 100%);
  border-bottom:1px solid var(--hairline);padding:48px 0}
@media(min-width:768px){.hero{padding:72px 0}}
.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__dane{width:100%;margin:24px 0;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px;overflow:hidden}
.produkt__dane caption{text-align:left;font-weight:600;color:var(--ink);padding:0 0 8px}
.produkt__dane th,.produkt__dane td{padding:12px 16px;border-bottom:1px solid var(--hairline);
  text-align:left;font-size:15px}
.produkt__dane tr:last-child th,.produkt__dane tr:last-child td{border-bottom:0}
.produkt__dane th{background:var(--surface-2);font-weight:600;color:var(--ink);width:40%}
.produkt__dane td{font-variant-numeric:tabular-nums}
.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{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 0;margin:0;
  list-style:none;color:var(--muted);font-size:13px}
.okruszki a{color:var(--muted);text-decoration:none}
.okruszki a:hover{color:var(--primary)}
.okruszki li+li::before{content:"› ";color:var(--hairline)}

/* ── 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{margin-top:48px;padding:32px 0;background:var(--surface);
  border-top:1px solid var(--hairline);color:var(--body);font-size:14px}
.stopka__zakup{font-size:16px;color:var(--ink);max-width:60ch}
.stopka__prawne{display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:0 0 16px;
  list-style:none}
.stopka__prawne a{color:var(--body);text-decoration:none}
.stopka__prawne a:hover{color:var(--primary)}
.stopka__prawa{color:var(--muted);font-size:13px;margin:16px 0 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(22px,3vw,28px);margin-top:32px}
.tresc h4{font-size:20px;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: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 pogladowy produktu ──────────────────────────────────
   Inline SVG liczony z wymiarow w products.json. Bez plikow graficznych:
   ksztalt i proporcje wynikaja z danych, wiec walec 100x10 wyglada jak
   talerz, a 10x100 jak pret. Dopisane 07.09.2026.                   */
.rysunek{margin:24px 0;padding:16px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:8px;max-width:420px}
.rysunek svg{display:block;width:100%;height:auto}
.rysunek__podpis{margin-top:8px;font-size:12px;color:var(--muted)}
.rys-bryla{fill:var(--surface-2);stroke:var(--ink);stroke-width:1.5}
.rys-bok{fill:var(--hairline);stroke:var(--ink);stroke-width:1.5}
.rys-os{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 3}
.rys-wymiar{stroke:var(--primary);stroke-width:1.5}
.rys-pomoc{stroke:var(--primary);stroke-width:1}

/* ── 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}

/* Miniatura bryly na karcie w liscie. Rysowana z tych samych wymiarow
   co rysunek na karcie produktu, tylko bez linii wymiarowych i podpisu. */
.rys-mini{display:block;width:100%;max-width:150px;height:88px;margin-bottom:12px}
.rys-mini .rys-bryla,.rys-mini .rys-bok{stroke-width:2}
.rys-opis{font:600 15px Cairo,system-ui,sans-serif;fill:var(--muted);text-anchor:middle}

/* Bieguny. N czerwony, S niebieski - tak sa oznaczane w katalogach magnesow
   i tak czyta je ta nisza. Polprzezroczyste, zeby ksztalt bryly zostal
   widoczny pod spodem. Dopisane 07.09.2026.                              */
.biegun{stroke:none}
.biegun--n{fill:#DC2626;fill-opacity:.16}
.biegun--s{fill:#0066FF;fill-opacity:.16}
.biegun__opis{font:700 15px Cairo,system-ui,sans-serif;text-anchor:middle;
  fill:var(--ink);fill-opacity:.55}
.rysunek .biegun--n{fill-opacity:.2}
.rysunek .biegun--s{fill-opacity:.2}
.rysunek .biegun__opis{font-size:18px;fill-opacity:.7}
.karta__link:hover .rys-bryla,.karta__link:hover .rys-bok{stroke:var(--primary)}