/*
 * strony.css, paczka Z2B, 16 wrzesnia 2026.
 *
 * Arkusz 19 stron redakcyjnych, czyli tych, ktore maja wlasny naglowek
 * header.top i wlasna stopke footer.dol wpisane w tresc wpisu: strona glowna,
 * kontakt, poradnik i 12 poradnikow, rabaty i trzy strony marek.
 *
 * Wtyczka (wyglad.php) kolejkuje ten plik w STOPCE DOKUMENTU, czyli za
 * blokami <style> wpisanymi w tresc strony. Dzieki temu przy rownej wadze
 * selektora wygrywamy kolejnoscia. Tam, gdzie tresc ma regule mocniejsza,
 * dokladamy selektor body albo :root; nigdzie nie uzywamy !important.
 *
 * Co robi:
 *   1. Przepina tokeny wpisane w tresc stron (--red, --blue, --hot, --ink...)
 *      na tokeny sklepu (--ns-act, --ns-ink...) ze sklep.css. Po tym jeden
 *      kolor dzialania, czerwien B91C1C z logo, obowiazuje takze tutaj.
 *   2. Ustawia naglowek header.top tak samo jak naglowek sklepu: wiersz 64 px,
 *      logo 40 px, menu 14,5 px, kreska aktywnej pozycji w kolorze dzialania.
 *   3. Sprowadza przyciski do trzech poziomow z sekcji "Z2 przyciski"
 *      w sklep.css: wypelniony, obrys, odnosnik. Klas .ns-btn tu nie ma,
 *      bo przyciski w tresci nosza wlasne klasy (.btn, .cta, .go); mapujemy
 *      je na te same wartosci i te same tokeny, zeby byl jeden wyglad.
 *   4. Ujednolica stopke footer.dol ze stopka motywu.
 *   5. Zdejmuje kroj szeryfowy Newsreader (i Saira oraz Fira Sans ze strony
 *      Bohlera, ktorych witryna i tak nie zamawia) na rzecz Archivo.
 *
 * Kolory marek (MEGMEET, Migatronic, Bohler) zostaja tam, gdzie identyfikuja
 * marke: naglowek, kreska, etykieta, pas. Nie ma ich na zadnym przycisku
 * ani odnosniku dzialania.
 *
 * Kontrast par uzytych w przyciskach (policzony dla kazdej pary):
 *   jasny   napis FFFFFF na B91C1C  6,5    obrys B91C1C na FFFFFF  6,5
 *                                          obrys B91C1C na F5F7F8  6,0
 *   ciemny  napis 0E1319 na F08B85  7,8    obrys F08B85 na 12171D  7,5
 *   ciemne pasy .end i .rbt: napis 0E1319 na F08B85 7,8, F08B85 na 0C1116 7,9
 * Specyfikacja podaje dla pary 0E1319 na F08B85 wartosc 9,7; policzone
 * wychodzi 7,8. Obie liczby sa powyzej progu 4,5, ale w komentarzach
 * trzymamy sie policzonej.
 */


/* ============================================================
   1. TOKENY
   ============================================================

   Strony deklaruja swoje zmienne na :root w tresci. Nasz arkusz jest
   pozniej w dokumencie, wiec plaskie :root wygrywa kolejnoscia, ale bloki
   motywu ciemnego w tresci (:root[data-theme="dark"] oraz
   :root:not([data-theme="light"])) maja wieksza wage i wygralyby ze zwyklym
   :root. Dlatego te same mapowania powtarzamy na body: deklaracja na body
   bije kazda wartosc odziedziczona z :root, niezaleznie od wagi selektora,
   a wartosciami sa odwolania var(--ns-*), wiec motyw jasny i ciemny biora
   sie same z tokenow sklepu. */

:root,
body{
  /* kolor dzialania: jeden na cala witryne */
  --red:var(--ns-act);
  --red-soft:var(--ns-act-soft);
  --blue:var(--ns-act);
  --blue-soft:var(--ns-act-soft);
  --ns-red:var(--ns-act);
  --ns-blue:var(--ns-act);
  --hot:var(--ns-act);
  --hot-ink:var(--ns-act-hover);
  --hot-soft:var(--ns-act-soft);

  /* szarosci: te same nazwy znacza to samo na wszystkich stronach */
  --ink:var(--ns-ink);
  --ink-2:var(--ns-ink-2);
  --muted:var(--ns-muted);
  --line:var(--ns-line);
  --line-2:var(--ns-line-2);
  --mist:var(--ns-steel);
  --mist-2:var(--ns-line);
  --sunk:var(--ns-sunk);
}

/* Strony marek wpisuja wlasne --ns-ink na :root (22262D, 1E2328) i przykrywaja
   token sklepu. Wracamy do wartosci ze sklep.css. Blok plaski, bo bloki
   motywu ciemnego w sklep.css maja wieksza wage selektora i dalej wygrywaja. */
:root{ --ns-ink:#121A21 }

/* --paper na 18 stronach to tlo strony, czyli biel. Na /rabaty/ ta sama nazwa
   znaczy co innego (jasne tlo strony, a biel nazywa sie --card), wiec ta
   strona dostaje wlasny blok nizej. */
body:not(.page-id-101){ --paper:var(--ns-paper) }

/* /rabaty/ (101). Dwa akcenty: --hot byl pomaranczowy i szedl na przyciski,
   wiec idzie na kolor dzialania; --deep byl drugim akcentem informacyjnym
   (tory rabatowe, stan "ok", wyroznienia w tabeli) i nigdy nie byl
   dzialaniem, wiec staje sie grafitem, a nie druga czerwienia. Dwa kolory
   dzialania na jednej stronie znosilyby sens calej zmiany. */
body.page-id-101{
  --paper:var(--ns-steel);
  --card:var(--ns-paper);
  --steel:var(--ns-line);
  --steel-2:var(--ns-line-2);
  --deep:var(--ns-ink);
  --deep-soft:var(--ns-steel);
  --deep-ink:var(--ns-ink);
  --ui:var(--ns-archivo);
  --disp:var(--ns-archivo);
}

/* MEGMEET (105) i Migatronic (107): --steel i --steel-2 to jasne powierzchnie.
   --megred i --teal zostaja, bo identyfikuja marke. */
body.page-id-105,
body.page-id-107{
  --steel:var(--ns-steel);
  --steel-2:var(--ns-line);
}

/* Bohler (109): --fog i --fog-2 to jasne powierzchnie. Token --vab (blekit
   marki) zostaje przy identyfikacji marki, a --steel na tej stronie znaczy
   szarosc marki voestalpine (6F6F6F) i tez zostaje. */
body.page-id-109{
  --fog:var(--ns-steel);
  --fog-2:var(--ns-line);
}

/* Ciemne pasy, ktore sa ciemne takze w motywie jasnym: zamkniecie strony
   (.end) i pas rabatow na stronie glownej (.rbt). Czerwien B91C1C na tle
   0C1116 ma kontrast 2,9, wiec przycisk bylby na nim ciemna plama. Bierzemy
   w tych pasach jasny wariant koloru dzialania, ten sam, ktorego sklep uzywa
   w motywie ciemnym (F08B85 z ciemnym napisem 0E1319). W motywie ciemnym
   te wartosci sa juz takie same, wiec blok nic nie zmienia.

   Na /megmeet/ (105) i /migatronic/ (107) sekcja .end jest jasna, to zwykle
   zamkniecie strony bez ciemnego pasa, wiec obie strony sa wylaczone. */
body:not(.page-id-105):not(.page-id-107) .end,
.rbt{
  --ns-act:#F08B85;
  --ns-act-hover:#F5A6A1;
  --ns-act-soft:#3A1A1A;
  --ns-act-tekst:#0E1319;
}

/* Mapowania w obu wariantach motywu ciemnego. Wartosci sa te same, bo to
   odwolania do tokenow sklepu; bloki sa po to, zeby :root byl spojny tam,
   gdzie tresc deklaruje swoje kolory z wieksza waga. */
:root[data-theme="dark"]{
  --red:var(--ns-act); --red-soft:var(--ns-act-soft);
  --blue:var(--ns-act); --blue-soft:var(--ns-act-soft);
  --ns-red:var(--ns-act); --ns-blue:var(--ns-act);
  --hot:var(--ns-act); --hot-ink:var(--ns-act-hover); --hot-soft:var(--ns-act-soft);
  --ink:var(--ns-ink); --ink-2:var(--ns-ink-2); --muted:var(--ns-muted);
  --line:var(--ns-line); --line-2:var(--ns-line-2);
  --mist:var(--ns-steel); --mist-2:var(--ns-line); --sunk:var(--ns-sunk);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --red:var(--ns-act); --red-soft:var(--ns-act-soft);
    --blue:var(--ns-act); --blue-soft:var(--ns-act-soft);
    --ns-red:var(--ns-act); --ns-blue:var(--ns-act);
    --hot:var(--ns-act); --hot-ink:var(--ns-act-hover); --hot-soft:var(--ns-act-soft);
    --ink:var(--ns-ink); --ink-2:var(--ns-ink-2); --muted:var(--ns-muted);
    --line:var(--ns-line); --line-2:var(--ns-line-2);
    --mist:var(--ns-steel); --mist-2:var(--ns-line); --sunk:var(--ns-sunk);
  }
}


/* ============================================================
   2. NAGLOWEK header.top
   ============================================================

   Ma wygladac jak wiersz z logo w naglowku sklepu: 64 px wysokosci,
   logo 40 px, menu 14,5 px pismem polgrubym, aktywna pozycja podkreslona
   kreska w kolorze dzialania. Wysokosc samego elementu header.top to
   65 px: 64 px wiersza i 1 px kreski dolnej.

   Wysokosc logo ustawia sklep.css (.top a.brandmark img), zeby wartosc
   byla w jednym miejscu dla calej witryny. */

body .top{
  position:sticky;top:0;z-index:60;
  background:var(--ns-paper);
  border-bottom:1px solid var(--ns-line)}
body .top .wrap{
  display:flex;align-items:center;gap:16px;height:64px}

body .top a.brandmark{display:inline-flex;align-items:center;flex:none;text-decoration:none}

/* --- menu --- */
body .top nav.nav{display:flex;gap:2px;margin-left:6px;flex-wrap:nowrap}
body .top nav.nav a{
  display:inline-flex;align-items:center;
  padding:8px 10px;border-radius:3px;
  font-size:14.5px;font-weight:600;line-height:1.2;
  color:var(--ns-ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;box-shadow:none}
body .top nav.nav a:hover{color:var(--ns-ink);background:var(--ns-steel)}
body .top nav.nav a[aria-current="page"]{
  color:var(--ns-ink);border-bottom-color:var(--ns-act);box-shadow:none}

/* --- menu telefonu --- */
body .top details.mnu > summary{
  border:1.5px solid var(--ns-line);border-radius:3px;
  width:44px;height:44px}
body .top details.mnu > summary span,
body .top details.mnu > summary span::before,
body .top details.mnu > summary span::after{background:var(--ns-ink)}
body .top .mnu-p{
  background:var(--ns-paper);border:1px solid var(--ns-line);border-radius:3px}
body .top .mnu-p a{color:var(--ns-ink)}
body .top .mnu-p a:hover{background:var(--ns-steel)}
body .top .mnu-p a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--ns-act)}
body .top .mnu-p a.mn{color:var(--ns-ink-2)}
body .top .mnu-p hr{border:0;border-top:1px solid var(--ns-line)}

/* --- telefon ---
   Ponizej 980 px menu poziome chowa sie, a jego miejsce zajmuje details.mnu.
   Regule powtarzamy u siebie, bo nasz display:flex na nav.nav ma taka sama
   wage jak display:none w tresci i wygralby kolejnoscia. */
@media (max-width:980px){
  body .top nav.nav{display:none}
}
@media (max-width:640px){
  body .top .wrap{height:56px;gap:10px}
}


/* ============================================================
   3. PRZYCISKI I ODNOSNIKI DZIALANIA
   ============================================================

   Trzy poziomy, te same wartosci co sekcja "Z2 przyciski" w sklep.css:

     1  wypelniony  jedno glowne dzialanie w widoku
        .btn.primary, .btn.red, .cta, .rbt .btn, przycisk "Sklep" w naglowku
     2  obrys       dzialanie drugorzedne
        .btn bez modyfikatora
     3  odnosnik    dzialanie poboczne, wyglada jak tekst
        .go, .d-czysc, odnosniki tekstowe w tresci

   Selektory maja przedrostek body, bo reguly ze stron stoja nizej
   w dokumencie i przy rownej wadze wygralyby kolejnoscia. */

/* --- baza --- */
body .btn,
body .cta,
body .go,
body .d-czysc{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;
  font-family:var(--ns-archivo);
  text-decoration:none;cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s}

body .btn,
body .cta{
  min-height:44px;padding:0 18px;
  border:1.5px solid transparent;border-radius:3px;
  font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.005em}

/* --- poziom 1: wypelniony --- */
body .btn.primary,
body .btn.red,
body .cta,
body .rbt .btn,
body .end .btn.primary,
body .end .btn.red{
  background:var(--ns-act);color:var(--ns-act-tekst);border-color:var(--ns-act)}
body .btn.primary:hover,
body .btn.red:hover,
body .cta:hover,
body .rbt .btn:hover,
body .end .btn.primary:hover,
body .end .btn.red:hover{
  background:var(--ns-act-hover);color:var(--ns-act-tekst);border-color:var(--ns-act-hover)}

/* --- poziom 2: obrys --- */
body .btn,
body .end .btn{
  background:transparent;color:var(--ns-act);border-color:var(--ns-act)}
body .btn:hover,
body .end .btn:hover{
  background:var(--ns-act-soft);color:var(--ns-act);border-color:var(--ns-act)}

/* --- poziom 3: odnosnik dzialania --- */
body .go,
body .d-czysc,
body .set footer a,
body .heroimg figcaption a{
  background:none;border:0;padding:0;min-height:0;
  font-weight:600;
  color:var(--ns-act);
  text-decoration:underline;text-underline-offset:3px}
body .go:hover,
body .d-czysc:hover,
body .set footer a:hover,
body .heroimg figcaption a:hover{color:var(--ns-ink)}

/* Odnosniki w tresci. Waga (0,0,1), taka sama jak reguly a{} ze stron, wiec
   wygrywamy kolejnoscia, a nie sila selektora: menu, stopka, karty .poz
   i przyciski maja wlasne reguly o wiekszej wadze i zostaja bez zmian. */
a{color:var(--ns-act)}

/* --- przycisk "Sklep" w naglowku: poziom 1, rozmiar maly ---
   Tresc /rabaty/ ma tu reguly z :link, :visited i :hover oraz ich odpowiedniki
   w obu blokach motywu ciemnego; to najmocniejsze selektory przyciskow w calej
   paczce. Powtarzamy wiec te sama deklaracje w trzech wariantach, zeby w kazdym
   z nich byc o stopien wyzej. */
body .top .top-cta{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
body .top .top-cta .btn{min-height:36px;padding:0 14px;font-size:14px}
body .top .top-cta .btn.primary,
body .top .top-cta .btn.primary:link,
body .top .top-cta .btn.primary:visited{
  background:var(--ns-act);color:var(--ns-act-tekst);border-color:var(--ns-act);
  text-decoration:none}
body .top .top-cta .btn.primary:hover{
  background:var(--ns-act-hover);color:var(--ns-act-tekst);border-color:var(--ns-act-hover)}

:root[data-theme="dark"] body .top .top-cta .btn.primary,
:root[data-theme="dark"] body .top .top-cta .btn.primary:link,
:root[data-theme="dark"] body .top .top-cta .btn.primary:visited{
  background:var(--ns-act);color:var(--ns-act-tekst);border-color:var(--ns-act);
  text-decoration:none}
:root[data-theme="dark"] body .top .top-cta .btn.primary:hover{
  background:var(--ns-act-hover);color:var(--ns-act-tekst);border-color:var(--ns-act-hover)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body .top .top-cta .btn.primary,
  :root:not([data-theme="light"]) body .top .top-cta .btn.primary:link,
  :root:not([data-theme="light"]) body .top .top-cta .btn.primary:visited{
    background:var(--ns-act);color:var(--ns-act-tekst);border-color:var(--ns-act);
    text-decoration:none}
  :root:not([data-theme="light"]) body .top .top-cta .btn.primary:hover{
    background:var(--ns-act-hover);color:var(--ns-act-tekst);border-color:var(--ns-act-hover)}
}

/* --- rozmiar duzy: jedno glowne dzialanie strony /rabaty/ --- */
body .cta{min-height:48px;padding:0 22px;font-size:16px}

/* --- przyciski, ktore nie sa dzialaniem ---
   Przelaczniki odpowiedzi w doborze i w kalkulatorach oraz para mniej i wiecej
   przy liczbie maszyn. Zostaja neutralne; stan wybrany bierze kolor dzialania
   z tokena --blue, przepietego wyzej na --ns-act. */
body .qbtn{
  width:44px;height:44px;
  border:1px solid var(--ns-line-2);background:var(--ns-paper);color:var(--ns-ink)}
body .qbtn:hover{border-color:var(--ns-act);color:var(--ns-act)}

/* Liczba procent w pasie rabatow na stronie glownej byla wpisana na sztywno
   pomaranczem FF7A3D. Bierze kolor dzialania tego pasa, czyli jasny wariant. */
body .rbt .n{color:var(--ns-act)}

/* Znak plus i minus przy pytaniach czesto zadawanych. Na stronach marek
   byl w kolorze marki, na pozostalych w kolorze tekstu pomocniczego.
   Ujednolicamy na kolor tekstu pomocniczego: to znacznik, a nie marka
   i nie dzialanie. */
body .faq summary::after{color:var(--ns-muted)}

/* --- fokus --- */
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body input:focus-visible,
body select:focus-visible{
  outline:2px solid var(--ns-act);outline-offset:2px}
body .btn:focus-visible,
body .cta:focus-visible{outline:2px solid var(--ns-act);outline-offset:3px}

/* --- stan wylaczony --- */
body .btn[disabled],
body .btn.disabled,
body .btn[aria-disabled="true"],
body .cta[aria-disabled="true"],
body button[disabled]{opacity:.5;cursor:default;pointer-events:none}


/* ============================================================
   4. STOPKA footer.dol
   ============================================================

   Ma wygladac tak samo jak stopka motywu: tlo powierzchni, kreska u gory,
   cztery kolumny (34 procent i trzy rowne), te same rozmiary pisma,
   akapit prawny pod kreska. Kolory bierzemy wprost z tokenow --ns-*,
   a nie ze zmiennych stron, zeby stopka byla identyczna na wszystkich
   dziewietnastu stronach niezaleznie od ich wlasnej palety.

   Jedyna roznica wobec stopki sklepu zostaje szerokosc: stopka redakcyjna
   stoi w torach swojej strony (.wrap, 1160 px), stopka motywu w torach
   sklepu (1340 px). Zrownanie ich zrobiloby stopke szersza niz tresc
   nad nia. */

body .dol{
  margin-top:48px;
  background:var(--ns-steel);
  border-top:1px solid var(--ns-line);
  color:var(--ns-ink-2)}

body .dol .wrap.dol-g{
  display:grid;
  grid-template-columns:34% repeat(3,minmax(0,1fr));
  gap:26px 32px;
  /* Dopelnienie boczne wpisujemy wprost. Regula .dol .wrap.dol-g w tresci
     ustawia skrot padding z zerami po bokach i zbija dopelnienie klasy .wrap,
     przez co na telefonie tekst stopki dotykal krawedzi ekranu. */
  padding:40px 24px 30px}

body .dol .dol-k{display:flex;flex-direction:column;gap:7px;min-width:0}
body .dol .dol-k b{
  font-family:var(--ns-archivo);
  font-size:14px;font-weight:700;line-height:1.35;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ns-ink);margin-bottom:3px}
body .dol .dol-k b.dol-n{
  font-size:14px;letter-spacing:0;text-transform:none}
body .dol .dol-k p{
  margin:0;font-size:13.5px;line-height:1.6;max-width:38ch;color:var(--ns-ink-2)}
body .dol .dol-k a{
  font-size:13.5px;line-height:1.6;
  color:var(--ns-ink-2);text-decoration:none;overflow-wrap:anywhere}
body .dol .dol-k a:hover{color:var(--ns-act);text-decoration:underline}
body .dol .dol-k a:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px}

body .dol .wrap.dol-d{
  border-top:1px solid var(--ns-line);
  padding:16px 24px 24px;
  font-size:12.5px;line-height:1.55;
  color:var(--ns-muted)}

@media (max-width:900px){
  body .dol .wrap.dol-g{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 32px;padding:34px 24px 26px}
}
@media (max-width:560px){
  body .dol .wrap.dol-g{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* motyw ciemny: stopka siada na najciemniejszej powierzchni, jak w sklepie */
:root[data-theme="dark"] body .dol{
  background:var(--ns-sunk);border-top-color:var(--ns-line)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body .dol{
    background:var(--ns-sunk);border-top-color:var(--ns-line)}
}


/* ============================================================
   5. PISMO
   ============================================================

   Archivo na wszystko, IBM Plex Mono do liczb i etykiet. Znikaja:
     Newsreader  akapit wprowadzajacy .thesis i .stand na 15 stronach,
                 caly tekst strony na /megmeet/ i /migatronic/,
     Saira i Fira Sans na /bohler/ (witryna i tak ich nie zamawia,
                 wiec renderowaly sie zapasowym krojem systemowym),
     Saira Condensed w liczbach na /rabaty/ (przez token --disp wyzej).
   Rozmiary zostaja bez zmian. */

body{font-family:var(--ns-archivo)}

body .thesis,
body .stand,
body td.ser small{
  font-family:var(--ns-archivo);
  font-weight:500;
  line-height:1.45}

/* /bohler/: role tekstowe na Archivo, role liczbowe na IBM Plex Mono */
body.page-id-109 h1,
body.page-id-109 h2,
body.page-id-109 h3,
body.page-id-109 .disp,
body.page-id-109 .brandmark,
body.page-id-109 .spec span,
body.page-id-109 td.ser,
body.page-id-109 .wnlist b,
body.page-id-109 .faq summary{font-family:var(--ns-archivo)}

body.page-id-109 .mono,
body.page-id-109 .eyebrow,
body.page-id-109 .code,
body.page-id-109 .crumb,
body.page-id-109 .step,
body.page-id-109 .tag,
body.page-id-109 .spec b,
body.page-id-109 .card h3,
body.page-id-109 .kv dt,
body.page-id-109 .mark .n,
body.page-id-109 .arg .no,
body.page-id-109 .set footer,
body.page-id-109 thead th,
body.page-id-109 td.ser small,
body.page-id-109 td.rng,
body.page-id-109 .eg b,
body.page-id-109 .heroimg figcaption,
body.page-id-109 .kino .kt,
body.page-id-109 .faq summary::after{font-family:var(--ns-mono)}


/* ============================================================
   Z4. STRONA GLOWNA, KONTAKT, RABATY I STRONY MAREK
   ============================================================

   Paczka Z4A, 16 wrzesnia 2026. Zadania audytu wizualnego V07, V08,
   V16, V17, V19, V23.

   Arkusz stoi w stopce dokumentu, czyli za blokami <style> wpisanymi
   w tresc stron; przy rownej wadze selektora wygrywamy kolejnoscia.
   Tam, gdzie tresc ma regule mocniejsza, dokladamy selektor body albo
   body.page-id-NNN. Nigdzie nie ma !important.

   Kolory tylko z tokenow --ns-*: jeden kolor dzialania, kolory marek
   zostaja przy identyfikacji marki (pas hero, kreska, nazwa).

   Numery stron: 100 strona glowna, 101 rabaty, 102 kontakt,
   105 MEGMEET, 107 Migatronic, 109 voestalpine Bohler Welding.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   Z4.1 Skok do kotwicy pod przyklejonym naglowkiem

   Naglowek header.top jest sticky i ma 65 px wysokosci (64 px wiersza
   i kreska). Bez marginesu skoku tytul sekcji chowa sie pod nim.
   ------------------------------------------------------------ */
body section[id],
body div[id],
body #d-wynik{scroll-margin-top:80px}


/* ------------------------------------------------------------
   Z4.2 Strona glowna: pierwszy ekran (V07)

   Dwie kolumny 55/45 na komputerze, zdjecie 4:3 kadrowane przez
   object-fit, na telefonie zdjecie pod tekstem (wynika z kolejnosci
   w tresci, wiec nie trzeba order).
   ------------------------------------------------------------ */
body.page-id-100 .hero .wrap{padding:40px 24px 42px}
body.page-id-100 .hero-g{display:grid;gap:28px;align-items:center}
@media (min-width:900px){
  body.page-id-100 .hero-g{grid-template-columns:55fr 45fr;gap:44px}
}
body.page-id-100 .hero .eyebrow{margin-bottom:14px}
body.page-id-100 .hero h1{
  font-size:clamp(32px,3.6vw,46px);line-height:1.07;letter-spacing:-.028em;
  margin-bottom:18px;max-width:22ch}
body.page-id-100 .hero .thesis{
  font-size:17.5px;line-height:1.5;max-width:54ch;margin:0 0 24px}

body .hero-f{margin:0;min-width:0}
body .hero-f img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 28%;
  border:1px solid var(--ns-line);background:var(--ns-paper)}
body .hero-podpis{
  margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ns-muted)}

/* Etykieta dzialania na kafelku marki. Brala kolor marki, a to jest
   odnosnik dzialania, wiec bierze kolor dzialania. Przy Bohlerze kolor
   marki 0082B4 na bieli ma kontrast 4,3, czyli ponizej progu 4,5 dla
   drobnego pisma; kolor dzialania B91C1C ma 6,5. Sama nazwa marki
   i kreska na gorze kafelka zostaja w kolorze marki. */
body .brands .brand .bl{color:var(--ns-act)}


/* ------------------------------------------------------------
   Z4.3 Strona glowna: modul "Jak pracujemy" (V08)

   Cztery kroki w jednym rzedzie od 900 px, dwa od 560 px, nizej
   kolumna. Numer w kolku 32 px na powierzchni --ns-steel.
   ------------------------------------------------------------ */
body .kroki{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:560px){
  body .kroki{grid-template-columns:repeat(2,1fr);gap:24px 28px}
}
@media (min-width:900px){
  body .kroki{grid-template-columns:repeat(4,1fr);gap:24px}
}
body .krok{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding-top:16px;border-top:2px solid var(--ns-line);min-width:0}
body .krok-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--ns-steel);
  font-family:var(--ns-mono);font-size:13px;color:var(--ns-ink-2)}
body .krok h3{
  margin:0;font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.015em;
  color:var(--ns-ink)}
body .krok p{margin:0;font-size:15px;line-height:1.5;color:var(--ns-ink-2)}

body .kroki-stopka{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  margin:28px 0 0;padding-top:16px;border-top:1px solid var(--ns-line)}
body .kroki-stopka span{font-size:15px;line-height:1.5;color:var(--ns-ink-2)}


/* ------------------------------------------------------------
   Z4.4 Strona glowna: dobor konfiguracji (V19)

   Pasek postepu nad pytaniami, zwarty stan poczatkowy, stan ladowania,
   stan braku zgodnosci, karty wyniku z trzema parametrami i rozwijanym
   uzasadnieniem. Logika doboru zostaje bez zmian.
   ------------------------------------------------------------ */

/* pasek postepu */
body .d-postep{display:flex;align-items:center;gap:14px;padding:18px 0 2px}
body .d-postep-t{
  font-family:var(--ns-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ns-muted);white-space:nowrap}
body .d-postep-b{
  display:block;flex:1;height:6px;border-radius:3px;
  background:var(--ns-line);overflow:hidden}
body .d-postep-b i{
  display:block;height:100%;width:0;background:var(--ns-act);
  transition:width .3s ease}

/* zwarty stan poczatkowy: trzy karty-szkielety */
body .d-szkielet{display:flex;flex-direction:column;gap:10px}
body .d-szkielet-t{
  margin:0;font-size:15px;font-weight:700;line-height:1.35;color:var(--ns-ink)}
body .d-szk{
  display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;
  gap:8px 12px;align-items:center;
  padding:12px;border:1px dashed var(--ns-line-2);background:var(--ns-paper)}
body .d-szk-i{
  grid-row:1 / 3;width:52px;height:52px;background:var(--ns-line)}
body .d-szk-l{display:block;height:10px;background:var(--ns-line)}
body .d-szk-l2{width:56%}
body .d-szkielet-o{
  margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ns-muted)}

/* stan ladowania */
body .d-ladowanie{
  margin:0;padding:14px 16px;
  border:1px dashed var(--ns-line-2);background:var(--ns-paper);
  font-size:15px;line-height:1.5;color:var(--ns-ink-2)}

/* stan braku zgodnosci */
body .d-niezgoda{
  margin:0 0 12px;padding:14px 16px;
  border:1px solid var(--ns-act);background:var(--ns-act-soft)}
body .d-niezgoda .d-brak{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--ns-ink)}
body .d-niezgoda .d-nota{margin:0;font-size:13px;line-height:1.5;color:var(--ns-ink-2)}

/* karta wyniku */
body .d-cena .d-brutto{font-size:13px;color:var(--ns-muted)}
body .d-doplata{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--ns-muted)}
body .d-param{
  list-style:none;margin:0 0 10px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--ns-line);border:1px solid var(--ns-line)}
body .d-param li{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  background:var(--ns-paper);padding:7px 9px}
body .d-param span{
  font-family:var(--ns-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ns-muted)}
body .d-param b{font-size:13.5px;font-weight:700;color:var(--ns-ink)}

body .d-czemu{margin-top:12px;padding-top:10px;border-top:1px solid var(--ns-line)}
body .d-czemu > summary{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  list-style:none;cursor:pointer;
  font-family:var(--ns-archivo);font-size:13.5px;font-weight:600;
  color:var(--ns-act);text-decoration:underline;text-underline-offset:3px}
body .d-czemu > summary::-webkit-details-marker{display:none}
body .d-czemu > summary::after{content:"+";color:var(--ns-muted);font-weight:700}
body .d-czemu[open] > summary::after{content:"-"}
body .d-czemu > summary:hover{color:var(--ns-ink)}
body .d-czemu .d-uzas{
  margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ns-ink-2)}

/* pas rabatow na stronie glownej: zdanie o pakiecie obslugi (V23) */
body .rbt .rbt-pakiet{margin:0 0 20px;font-size:15px;line-height:1.55}

/* Slupek najwyzszego progu w pasie rabatow byl wpisany na sztywno
   pomaranczem FF7A3D. Z2 zdjelo pomarancz z etykiety i z przycisku tego
   pasa, ale slupek zostal. Bierze kolor dzialania tego pasa, czyli jasny
   wariant F08B85 z ciemnym napisem 0E1319; kontrast pary 7,8. */
body .rbt .rstep.hi i{background:var(--ns-act);color:var(--ns-act-tekst)}


/* ------------------------------------------------------------
   Z4.5 Kontakt: pierwszy ekran (V17)

   Telefon, godziny i poczta od razu pod tytulem, pod nimi trzy karty:
   sprzedaz, serwis i doradca. Tytuly kart sa naglowkami drugiego
   stopnia, wiec kolejnosc naglowkow na stronie idzie h1, h2, h2.
   ------------------------------------------------------------ */
body.page-id-102 .hero .wrap{padding:30px 24px 36px}
body.page-id-102 .hero h1{
  font-size:clamp(29px,3.4vw,44px);line-height:1.05;letter-spacing:-.028em;
  margin-bottom:18px;max-width:24ch}
body.page-id-102 .hero .eyebrow{margin-bottom:12px}

body .kont-pas{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;
  margin:0 0 22px;padding:0}
body .kont-pas li{
  display:flex;align-items:baseline;gap:9px;
  font-size:17px;font-weight:700;color:var(--ns-ink)}
body .kont-pas li span{
  font-family:var(--ns-mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ns-muted)}
body .kont-pas a{color:var(--ns-ink);text-decoration:none}
body .kont-pas a:hover{color:var(--ns-act);text-decoration:underline}

body .kanaly{display:grid;gap:14px}
@media (min-width:900px){
  body .kanaly{grid-template-columns:repeat(3,minmax(0,1fr))}
}
body .kanaly .path{padding:18px 20px}
body .kanaly .path h2{
  margin:0 0 6px;font-size:19px;font-weight:800;line-height:1.16;
  letter-spacing:-.02em;color:var(--ns-ink)}
body .kanaly .path p{margin:0 0 14px;font-size:14.5px;line-height:1.5}
body .kanaly .path .doradca-rola{
  margin:0 0 10px;font-size:13px;line-height:1.4;color:var(--ns-muted);flex:none}
body .kanaly .kont{gap:8px;margin-bottom:14px}
body .kanaly .kont a{font-size:16px}
body .kanaly .doradca-godz{
  margin:auto 0 0;font-size:13px;line-height:1.45;color:var(--ns-muted)}

/* sekcja zapytania: cztery zdania jako wstep nad formularzem */
body.page-id-102 .zap-h3{
  margin:26px 0 8px;font-size:20px;font-weight:800;line-height:1.2;
  letter-spacing:-.02em;color:var(--ns-ink)}
body.page-id-102 .zap-p{
  margin:0 0 18px;max-width:64ch;font-size:16px;line-height:1.55;color:var(--ns-ink-2)}
body.page-id-102 .check{margin-bottom:18px}


/* ------------------------------------------------------------
   Z4.6 Rabaty: dwa bloki w hero i jedna karta narzedzia (V23)

   Rabat na urzadzenia i pakiet obslugi to dwie rozne rzeczy, wiec
   stoja obok siebie, a nie w jednym akapicie. Kalkulator zostaje
   bez zmiany skryptu, tylko dostaje zdanie wprowadzajace.
   ------------------------------------------------------------ */
body.page-id-101 .hero .h1{
  font-size:clamp(31px,3.7vw,47px);line-height:1.07;letter-spacing:-.026em;
  margin-bottom:20px;max-width:22ch}

body.page-id-101 .dwa{display:grid;gap:14px;margin:0 0 20px}
@media (min-width:680px){
  body.page-id-101 .dwa{grid-template-columns:1fr 1fr;gap:16px}
}
body.page-id-101 .dwa-b{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:18px 20px;border:1px solid var(--ns-line);border-radius:12px;
  background:var(--ns-paper)}
body.page-id-101 .dwa-b h2{
  margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.22;
  letter-spacing:-.012em;color:var(--ns-ink)}
body.page-id-101 .dwa-b p{
  margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--ns-ink-2)}
body.page-id-101 .dwa-b .go{font-size:14px;margin-top:auto}

body.page-id-101 .narzedzie-wstep{
  margin:0 0 20px;font-size:14.5px;line-height:1.5;color:var(--ns-muted)}

/* jeden wyglad tabel: siatka rabatow i przyklad floty */
body.page-id-101 .tbl-w{border-color:var(--ns-line)}
body.page-id-101 .tbl-w table thead th{
  font-family:var(--ns-archivo);font-size:13px;font-weight:700;line-height:1.25;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ns-muted);
  border-bottom-color:var(--ns-line)}
body.page-id-101 .tbl-w table td{font-size:14px;line-height:1.45;border-bottom-color:var(--ns-line)}
body.page-id-101 .tbl-w table td.r{font-size:15px}

/* tabela pakietow: te same kreski i ta sama skala pisma co tabele wyzej */
body.page-id-101 .pak .pk{border-color:var(--ns-line)}
body.page-id-101 .pak .pk h3{font-size:18px;letter-spacing:-.012em}
body.page-id-101 .pak .pk li{font-size:14px;line-height:1.45}
body.page-id-101 .pak .pk .kt2{font-size:13px}


/* ------------------------------------------------------------
   Z4.7 Strony marek: wspolny hero i pas kotwic (V16)

   Trzy strony maja te same proporcje hero (tekst 55, zdjecie 45),
   ten sam rozmiar tytulu i te sama pare przyciskow. Zdjecia to
   fotografie maszyn na jasnym tle, wiec ramka 4:3 miesci cale
   urzadzenie (object-fit contain), zamiast je przycinac.
   ------------------------------------------------------------ */
body.page-id-105 .hero .wrap,
body.page-id-107 .hero .wrap,
body.page-id-109 .hero .wrap{
  padding-top:40px;padding-bottom:40px;gap:32px;align-items:center}
@media (min-width:900px){
  body.page-id-105 .hero .wrap,
  body.page-id-107 .hero .wrap,
  body.page-id-109 .hero .wrap{grid-template-columns:55fr 45fr;gap:44px}
}
body.page-id-105 .hero h1,
body.page-id-107 .hero h1,
body.page-id-109 .hero h1{
  font-size:clamp(31px,3.5vw,44px);line-height:1.07;letter-spacing:-.026em;
  margin-bottom:16px;max-width:22ch}
body.page-id-105 .hero .thesis,
body.page-id-107 .hero .thesis,
body.page-id-109 .hero .thesis{
  font-size:16.5px;line-height:1.5;max-width:56ch;margin:0 0 22px}

body .heroimg{position:static;margin:0;align-self:center;min-width:0}
body .heroimg img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  padding:14px;border:1px solid var(--ns-line);background:var(--ns-steel)}
/* Podpis zdjecia: na wszystkich trzech stronach ten sam, pod zdjeciem,
   a nie na nim. Krój zostaje monospacjowy, jak w dzisiejszym projekcie
   tych stron i jak ustawila go paczka Z2 na stronie Bohlera. */
body .heroimg figcaption{
  position:static;left:auto;bottom:auto;
  margin:10px 0 0;padding:0;background:none;
  font-family:var(--ns-mono);font-size:12px;line-height:1.5;color:var(--ns-muted)}

/* Na telefonie hero jest jednokolumnowe, wiec ramka 4:3 zostawialaby po
   bokach zdjecia duzo pustego miejsca. Ramka kwadratowa mieści to samo
   zdjecie wyrazniej, a proporcje na komputerze zostaja bez zmian. */
@media (max-width:899px){
  body .heroimg img{aspect-ratio:1 / 1;padding:10px}
}

/* Ciemny pas z detalami na /megmeet/ ma etykiete sekcji wpisana na sztywno
   pomaranczem FF6B3D, kolorem spoza palety witryny. Etykieta sekcji nalezy
   do identyfikacji marki, wiec bierze odcien MEGMEET, ktory ta strona sama
   deklaruje dla ciemnego tla. Token przestawiamy na pasie, jak robi to
   paczka Z2 przy ciemnych pasach .end i .rbt; kontrast F2604F na 0A0D0F
   wynosi 6,5. */
body.page-id-105 .kino{--megred:#F2604F}
body.page-id-105 .kino .kt{color:var(--megred)}

/* pas kotwic "Na tej stronie": ten sam wyglad co pasek kotwic na karcie
   produktu (.ns-kotwice w karta.css). Reguly sa przepisane, zeby strony
   redakcyjne nie zalezaly od arkusza karty. */
body .kotwice-strony{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;
  margin:26px 0 4px;padding:0;
  border-top:1px solid var(--ns-line);border-bottom:1px solid var(--ns-line)}
body .kotwice-strony .kotwice-t{
  font-family:var(--ns-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ns-muted)}
body .kotwice-strony a{
  display:inline-flex;align-items:center;min-height:44px;
  font:600 13.5px/1.3 var(--ns-archivo);color:var(--ns-act);
  text-decoration:underline;text-underline-offset:3px}
body .kotwice-strony a:hover{color:var(--ns-ink)}
body .kotwice-strony a:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px}
@media (max-width:768px){
  body .kotwice-strony{gap:0 18px;margin-top:20px}
  body .kotwice-strony a{min-height:40px;font-size:13px}
}


/* ------------------------------------------------------------
   Z4.8 Telefon
   ------------------------------------------------------------ */
@media (max-width:640px){
  body.page-id-100 .hero .wrap{padding:26px 24px 30px}
  body.page-id-100 .hero h1{font-size:30px;margin-bottom:14px}
  body.page-id-100 .hero .thesis{font-size:16px;margin-bottom:20px}
  body.page-id-100 .herobtns .btn{width:100%}

  body.page-id-102 .hero .wrap{padding:20px 24px 26px}
  body.page-id-102 .hero .eyebrow{margin-bottom:8px}
  body.page-id-102 .hero h1{font-size:27px;margin-bottom:14px}
  body .kont-pas{gap:6px 0;margin-bottom:16px;flex-direction:column}
  body .kanaly .path{padding:14px 16px}
  body .kanaly .path h2{font-size:18px}
  body .kanaly .path p{margin-bottom:12px;font-size:14px}
  body .kanaly .kont a{font-size:15px}

  body .d-param{grid-template-columns:repeat(3,minmax(0,1fr))}
  body .d-param span{font-size:9.5px;letter-spacing:.05em}
  body .d-param b{font-size:12.5px}
}


/* ============================================================
   Z5. PORADNIK: INDEKS I DWANASCIE PORADNIKOW
   ============================================================

   Paczka Z5A, 16 wrzesnia 2026. Zadania audytu wizualnego V20
   (naglowek artykulu, spis tresci, szerokosc wiersza), V21
   (ilustracje rysowane w SVG, mniejsze zdjecia) i V22 (kalkulatory
   w jednej karcie narzedzia).

   Zakres: 13 stron, ktore maja w tresci kolumne .art, czyli indeks
   /poradnik/ i dwanascie poradnikow. Zadna inna strona redakcyjna
   ani sklepowa tej klasy nie uzywa, wiec selektor body .art wystarczy
   i nie trzeba wyliczac numerow stron.

   Arkusz stoi w stopce dokumentu, czyli za blokami <style> w tresci;
   przy rownej wadze wygrywamy kolejnoscia, a selektor body doklada
   punkt, gdy tresc ma regule mocniejsza. Kolory wylacznie z tokenow
   --ns-*, wiec motyw ciemny bierze sie sam. Bez !important poza
   jednym miejscem, gdzie trzeba przykryc styl inline (pasek kosztow).
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   Z5.1 Skok do kotwicy pod przyklejonym naglowkiem

   Naglowek header.top jest sticky i ma 65 px. Spis tresci skacze do
   naglowkow h2, wiec to one potrzebuja marginesu skoku; sekcje i divy
   dostaly go w Z4.1.
   ------------------------------------------------------------ */
body .art h2[id],
body .art h3[id]{scroll-margin-top:84px}


/* ------------------------------------------------------------
   Z5.2 Naglowek artykulu: tytul, wprowadzenie, wiersz meta

   Pierwszy ekran ma pokazac tytul, wiersz meta i krotka odpowiedz,
   dlatego blok wstepny jest nizszy niz dzisiaj: mniejszy odstep,
   mniejszy tytul i mniejszy akapit wprowadzajacy.
   ------------------------------------------------------------ */
body .hd{padding:22px 0 20px}
body .hd .crumb{margin-bottom:10px}
body .art h1{
  font-size:clamp(27px,2.6vw,34px);line-height:1.1;letter-spacing:-.024em;
  margin-bottom:10px;max-width:30ch;text-wrap:balance}
body .hd .stand{
  font-size:17px;line-height:1.45;max-width:86ch;margin:0 0 12px;color:var(--ns-ink-2)}
body .hd .meta{
  display:flex;flex-wrap:wrap;gap:4px 18px;
  font-size:12.5px;line-height:1.5;color:var(--ns-muted)}
body .hd .meta a{color:var(--ns-act)}


/* ------------------------------------------------------------
   Z5.3 Wstep: krotka odpowiedz i zdjecie glowne obok niej

   Zdjecie glowne zajmuje najwyzej 40 procent szerokosci kolumny na
   komputerze (1,6fr do 1fr daje 38,5 procent), a na telefonie schodzi
   pod krotka odpowiedz. Dzieki temu pierwszy ekran nalezy do tekstu.
   ------------------------------------------------------------ */
body .art>section:first-of-type,
body .art section:first-of-type{padding-top:18px}
/* Krotka odpowiedz idzie na cala szerokosc kolumny, zeby wiersz mial pelna
   dlugosc i zeby blok byl nizszy; zdjecie glowne staje pod nia, obok spisu
   tresci, i zajmuje najwyzej 40 procent szerokosci kolumny. */
body .wstep{display:grid;gap:16px;align-items:start;margin:0}
body .wstep>.krotka{margin:0}
@media (min-width:860px){
  body .wstep{grid-template-columns:1.55fr 1fr;gap:18px 26px}
  body .wstep>.krotka{grid-column:1/-1}
  body .wstep>nav.spis{grid-column:1;grid-row:2}
  body .wstep>.fig-mala{grid-column:2;grid-row:2}
  body .wstep-bez-foto>nav.spis{grid-column:1/-1}
}

/* Krotka odpowiedz: ramka z kreska w kolorze dzialania.
   Dzisiejsza ramka byla zielona (--ok), a zielen nie jest kolorem
   dzialania tej witryny. Zostaje jedna czerwien z logo. */
body .krotka{
  border:1px solid var(--ns-line);border-left:4px solid var(--ns-act);
  background:var(--ns-steel);border-radius:0 3px 3px 0;
  padding:18px 20px}
body .krotka .lbl{
  font-family:var(--ns-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ns-act);margin-bottom:8px}
body .krotka p{margin:0;font-size:17px;line-height:1.5;max-width:none;color:var(--ns-ink)}
body .krotka a{color:var(--ns-act)}

/* Zdjecie glowne przy krotkiej odpowiedzi. */
body .fig-mala{margin:0;min-width:0}
body .fig-mala img{width:100%;height:auto;border:1px solid var(--ns-line);border-radius:3px}
body .fig-mala figcaption{font-size:12.5px;line-height:1.45;margin-top:8px}
/* Zdjecie w srodku artykulu: wezsze niz kolumna, zeby nie dominowalo. */
body .fig-srodek{margin:24px auto;max-width:440px}


/* ------------------------------------------------------------
   Z5.4 Spis tresci

   Lista odnosnikow do wszystkich sekcji artykulu. Od 640 px stoi
   w dwoch kolumnach, nizej w jednej. Numeracja z licznika, zeby
   kropki nie wisialy poza kolumna.
   ------------------------------------------------------------ */
body nav.spis{
  margin:0;padding:16px 18px;
  border:1px solid var(--ns-line);border-radius:3px;background:var(--ns-paper)}
body nav.spis .spis-t{
  margin:0 0 10px;font-family:var(--ns-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ns-muted);max-width:none}
body nav.spis ol{
  list-style:none;margin:0;padding:0;counter-reset:spis}
@media (min-width:640px){
  body nav.spis ol{columns:2;column-gap:28px}
}
body nav.spis li{
  counter-increment:spis;margin:0;padding:0;max-width:none;
  break-inside:avoid}
body nav.spis li a{
  display:block;padding:6px 0 6px 26px;position:relative;
  font-size:14px;line-height:1.35;color:var(--ns-ink-2);
  text-decoration:none;text-underline-offset:3px}
body nav.spis li a::before{
  content:counter(spis,decimal-leading-zero);
  position:absolute;left:0;top:6px;
  font-family:var(--ns-mono);font-size:11px;color:var(--ns-muted)}
body nav.spis li a:hover{color:var(--ns-act);text-decoration:underline}
body nav.spis li a:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px}


/* ------------------------------------------------------------
   Z5.5 Szerokosc wiersza tresci

   Akapity i listy do 70ch, czyli okolo 65 do 75 znakow w wierszu.
   Tabele, kalkulatory, spis i karty indeksu zostaja szersze.
   ------------------------------------------------------------ */
body .art p,
body .art li,
body .art dd{max-width:70ch}
body .art .tw p,
body .art .tw li,
body .art table p,
body .art table li,
body .narzedzie p,
body .narzedzie li,
body .lista p,
body .lista li,
body .ilu figcaption,
body .karta span.op{max-width:none}


/* ------------------------------------------------------------
   Z5.6 Ilustracje rysowane w SVG (V21)

   Rysunki nie maja wpisanego zadnego koloru: biora go z tokenow przez
   ponizsze klasy, wiec motyw ciemny dziala sam. Pismo 13 px Archivo,
   liczby i etykiety bez wersalikow.
   ------------------------------------------------------------ */
body .ilu{margin:26px 0}
body .ilu-obwoluta{overflow-x:auto;overflow-y:hidden}
body .ilu-obwoluta:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px}
body .ilu-svg{display:block;width:100%;max-width:720px;height:auto}
/* Ponizej 760 px kolumna ma okolo 342 px. Rysunek zmniejszony do tej
   szerokosci mialby pismo wielkosci szesciu pikseli, wiec zostaje przy swojej
   szerokosci i przewija sie w obwolucie, tak samo jak szerokie tabele. */
@media (max-width:760px){
  body .ilu-svg{width:720px;max-width:none}
}
body .ilu figcaption{font-size:13px;line-height:1.5;margin-top:10px;color:var(--ns-muted)}

body .ns-il text{font-family:var(--ns-archivo)}
body .ns-il .s-t{font-size:13px;fill:var(--ns-ink)}
body .ns-il .s-tm{font-size:12.5px;fill:var(--ns-ink-2)}
body .ns-il .s-tb{font-size:13px;font-weight:700;fill:var(--ns-ink)}
body .ns-il .s-num{font-size:12px;font-weight:700;fill:var(--ns-act-tekst)}
body .ns-il .s-kre{stroke:var(--ns-ink);stroke-width:1.25;fill:none}
body .ns-il .s-akc{stroke:var(--ns-act);stroke-width:2;fill:none}
body .ns-il .s-akc-f{fill:var(--ns-act);stroke:none}
body .ns-il .s-cien{fill:var(--ns-steel);stroke:var(--ns-line-2);stroke-width:1}
body .ns-il .s-tlo{fill:var(--ns-steel);stroke:var(--ns-line);stroke-width:1}
body .ns-il .s-box{fill:var(--ns-paper);stroke:var(--ns-line-2);stroke-width:1}

/* Odsylacze do ponumerowanych pol rysunku tabliczki (poradnik 122). */
body ol.ilu-odsyl{
  list-style:none;margin:0 0 26px;padding:0;
  display:grid;gap:2px 22px}
@media (min-width:640px){
  body ol.ilu-odsyl{grid-template-columns:1fr 1fr}
}
body ol.ilu-odsyl li{margin:0;max-width:none}
body ol.ilu-odsyl a{
  display:block;padding:5px 0;font-size:14px;line-height:1.35;
  color:var(--ns-ink-2);text-decoration:none}
body ol.ilu-odsyl a b{font-family:var(--ns-mono);font-size:12px;color:var(--ns-act);margin-right:8px}
body ol.ilu-odsyl a:hover{color:var(--ns-act);text-decoration:underline}


/* ------------------------------------------------------------
   Z5.7 Karta narzedzia: kalkulatory (V22)

   Jeden wyglad dla wszystkich szesciu kalkulatorow: naglowek
   "Kalkulator", dane wejsciowe, wynik, zalozenia i "co dalej".
   Wynik czyta sie bez koloru: kazda liczba ma jednostke, a zdanie
   pod spodem podaje ocene slowami.
   ------------------------------------------------------------ */
body .narzedzie{
  border:1px solid var(--ns-line-2);border-radius:3px;
  background:var(--ns-paper);margin:26px 0;padding:20px 22px;overflow-wrap:break-word}
body .narzedzie .n-et{
  margin:0 0 4px;font-family:var(--ns-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ns-act);max-width:none}
body .narzedzie .n-gr{
  margin:20px 0 10px;padding-top:12px;border-top:1px solid var(--ns-line);
  font-family:var(--ns-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ns-muted);max-width:none}
body .narzedzie .n-dalej{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--ns-line);
  font-size:14.5px;line-height:1.5;color:var(--ns-ink-2);max-width:none}
body .narzedzie .n-dalej a{color:var(--ns-act);text-underline-offset:3px}

/* Wnetrze kalkulatora: ramka i tlo schodza do karty, zeby nie bylo
   ramki w ramce. */
body .narzedzie .kalk{
  border:0;background:none;border-radius:0;margin:0;padding:0}
body .narzedzie .kalk h3{
  margin:0 0 6px;font-size:21px;line-height:1.2;letter-spacing:-.018em;color:var(--ns-ink)}
body .narzedzie .kalk .pod{font-size:14px;line-height:1.5;color:var(--ns-muted)}

/* Pola, suwaki i przyciski wyboru: jeden styl w calym sklepie. */
body .narzedzie label{font-size:13px;color:var(--ns-muted)}
body .narzedzie .suw label b,
body .narzedzie .pole label{color:var(--ns-ink)}
body .narzedzie input[type=number],
body .narzedzie select{
  width:100%;max-width:100%;min-height:44px;box-sizing:border-box;
  padding:0 12px;border:1px solid var(--ns-line-2);border-radius:3px;
  background:var(--ns-paper);color:var(--ns-ink);
  font:500 15px/1.2 var(--ns-archivo);font-variant-numeric:tabular-nums}
body .narzedzie input[type=number]:focus-visible,
body .narzedzie select:focus-visible,
body .narzedzie input[type=range]:focus-visible,
body .narzedzie button:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px}
body .narzedzie input[type=range]{width:100%;max-width:100%;accent-color:var(--ns-act);height:26px}
body .narzedzie .klasy button,
body .narzedzie .met button,
body .narzedzie .prof button{
  font-family:var(--ns-archivo);color:var(--ns-ink);
  background:var(--ns-paper);border:1px solid var(--ns-line-2);border-radius:3px;
  min-height:44px;cursor:pointer}
body .narzedzie .klasy button[aria-pressed="true"],
body .narzedzie .met button[aria-pressed="true"],
body .narzedzie .prof button[aria-pressed="true"]{
  border-color:var(--ns-act);box-shadow:inset 0 0 0 1px var(--ns-act)}
body .narzedzie .klasy button span,
body .narzedzie .prof button span{color:var(--ns-ink-2)}

/* Wynik: liczby w jednej rodzinie, kreski z tokenow, bez koloru jako
   jedynego nosnika znaczenia. */
body .narzedzie .odczyt .w,
body .narzedzie .wyn .w,
body .narzedzie .rach .w,
body .narzedzie .szcz .w,
body .narzedzie .wyniki>div{
  border-bottom:1px solid var(--ns-line);font-variant-numeric:tabular-nums}
body .narzedzie .sum{
  border-top:2px solid var(--ns-ink);color:var(--ns-ink);font-variant-numeric:tabular-nums}
body .narzedzie .oszcz{color:var(--ns-ink)}
body .narzedzie .wnio{
  border-left:3px solid var(--ns-act);background:var(--ns-act-soft);
  color:var(--ns-ink);font-size:15.5px;line-height:1.55;max-width:none}
body .narzedzie .duza{color:var(--ns-ink);font-variant-numeric:tabular-nums}
body .narzedzie .box{border:1px solid var(--ns-line-2);border-radius:3px}
body .narzedzie .box.dobra{border-color:var(--ns-act)}
body .narzedzie .tarcza .spaw{stroke:var(--ns-act)}
body .narzedzie .tarcza .tlo{stroke:var(--ns-line-2)}
body .narzedzie .tarcza text{fill:var(--ns-ink)}
body .narzedzie .tarcza text.mala{fill:var(--ns-muted)}

/* Blok "czego nie liczymy" przy wyniku: widoczny, nie schowany
   w drobnym druku. */
body .narzedzie .ogr,
body .narzedzie .uwaga{
  border:1px solid var(--ns-line);border-left:3px solid var(--ns-line-2);
  background:var(--ns-sunk);border-radius:0 3px 3px 0;
  padding:14px 16px;margin:14px 0 0;
  font-size:14.5px;line-height:1.55;color:var(--ns-ink-2);max-width:none}

/* Pasek udzialu kosztow w poradniku o koszcie posiadania: szesc
   odcieni z tokenow zamiast szesciu barw, z ktorych dwie po Z2
   zlewaly sie w jedna czerwien. Liczby i procenty stoja w wierszach
   ponizej, wiec pasek nie jest jedynym nosnikiem informacji.
   Probki w legendzie maja kolor w stylu inline, dlatego jedyny raz
   w tym arkuszu uzywamy !important. */
body .narzedzie .pas i:nth-child(1),
body .narzedzie .leg span:nth-child(1) s{background:var(--ns-ink) !important}
body .narzedzie .pas i:nth-child(2),
body .narzedzie .leg span:nth-child(2) s{background:var(--ns-ink-2) !important}
body .narzedzie .pas i:nth-child(3),
body .narzedzie .leg span:nth-child(3) s{background:var(--ns-muted) !important}
body .narzedzie .pas i:nth-child(4),
body .narzedzie .leg span:nth-child(4) s{background:var(--ns-line-2) !important}
body .narzedzie .pas i:nth-child(5),
body .narzedzie .leg span:nth-child(5) s{background:var(--ns-line) !important}
body .narzedzie .pas i:nth-child(6),
body .narzedzie .leg span:nth-child(6) s{background:var(--ns-act) !important}
body .narzedzie .leg span{color:var(--ns-ink-2)}

@media (max-width:640px){
  body .narzedzie{padding:16px 14px}
  body .narzedzie .kalk h3{font-size:19px}
  body .narzedzie .pola,
  body .narzedzie .suwy,
  body .narzedzie .klasy,
  body .narzedzie .met,
  body .narzedzie .prof,
  body .narzedzie .dwie,
  body .narzedzie .zegar{grid-template-columns:minmax(0,1fr)}
  body .narzedzie .odczyt .w,
  body .narzedzie .wyn .w,
  body .narzedzie .rach .w,
  body .narzedzie .szcz .w{flex-wrap:wrap}
}


/* ------------------------------------------------------------
   Z5.8 Indeks /poradnik/: karty dwunastu poradnikow

   Tytul, jedno wprowadzenie, czas czytania i tematyczna miniatura
   rysowana w SVG. Miniatura jest ozdobna wzgledem tytulu, dlatego ma
   aria-hidden i nie dubluje tresci dla czytnika ekranu.
   ------------------------------------------------------------ */
body .lista.karty{
  display:grid;gap:1px;background:var(--ns-line);
  border:1px solid var(--ns-line);border-radius:3px;overflow:hidden}
@media (min-width:640px){
  body .lista.karty{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Kolumna artykulu ma 760 px i na dwanascie kart jest za waska. Od 1060 px
   siatka kart wychodzi na szerokosc pasa .wrap (1160 px minus marginesy),
   liczona od srodka kolumny, ktora w tym zakresie ma stale 712 px tresci.
   Ponizej tej szerokosci karty zostaja w kolumnie. */
@media (min-width:1060px){
  body .art .lista.karty{
    --sz:min(1112px, calc(100vw - 48px));
    width:var(--sz);
    margin-left:calc(356px - var(--sz) / 2);
    grid-template-columns:repeat(3,minmax(0,1fr))}
}
body .poz.karta{
  background:var(--ns-paper);padding:20px;gap:8px;
  grid-template-columns:44px minmax(0,1fr);align-items:start}
body .poz.karta .p-ik{grid-row:1/3;padding-top:2px}
body .poz.karta .kat,
body .poz.karta h3,
body .poz.karta p,
body .poz.karta .dane{grid-column:2}
body .poz.karta h3{font-size:18px;line-height:1.22;letter-spacing:-.018em}
body .poz.karta p{font-size:14.5px;line-height:1.5;max-width:none}
body .poz.karta .dane{font-size:10.5px;gap:4px 12px}
body .poz.karta .dane span:first-child{color:var(--ns-ink-2)}
body .p-ikona{display:block;width:36px;height:36px}
body .p-ikona .s-kre{stroke:var(--ns-ink);stroke-width:1.6;fill:none}
body .p-ikona .s-akc{stroke:var(--ns-act);stroke-width:1.6;fill:none}
body .p-ikona .s-akc-f{fill:var(--ns-act);stroke:none}
body .p-ikona .s-cien{fill:var(--ns-steel);stroke:var(--ns-line-2);stroke-width:1}
body .p-ikona .s-ikt{font:700 9px var(--ns-archivo);fill:var(--ns-ink-2)}
@media (max-width:520px){
  body .poz.karta{padding:16px;grid-template-columns:36px minmax(0,1fr);gap:6px 12px}
  body .p-ikona{width:30px;height:30px}
}


/* ------------------------------------------------------------
   Z5.8a Kolizja nazwy .kroki

   Modul "Jak pracujemy" na stronie glownej uzywa klasy .kroki i paczka
   Z4 ustawila dla niej siatke czterech kolumn. W poradniku o gwarancji
   i w poradniku o nierdzewce ta sama nazwa oznacza numerowana liste
   zabiegow, ktora ma stac w jednej kolumnie. Przywracamy jej uklad
   listy tutaj, bez ruszania sekcji Z4.
   ------------------------------------------------------------ */
body .art ol.kroki{grid-template-columns:minmax(0,1fr);gap:1px}
body .art ol.kroki>li{max-width:none}
body .art ol.kroki>li p{max-width:70ch}


/* ------------------------------------------------------------
   Z5.8b Bloki uwag i paski gwarancji: jeden wyglad

   Tresc poradnikow uzywa dwoch kolorow spoza palety sklepu: bursztynu
   (--amber) w blokach uwag i zieleni (--ok) na paskach okresu gwarancji.
   Zadnego z nich nie ma w tokenach Z2, wiec sprowadzamy oba do palety.
   Znaczenie zostaje w tekscie: blok uwagi ma tytul wytluszczony, a pasek
   ma wpisany okres, wiec nie polegaja na samym kolorze.

   Kontrast policzony dla kazdej pary paskow:
     jasny   FFFFFF na B91C1C 6,4   FFFFFF na 39454C 9,5
             FFFFFF na 56616B 6,6   121A21 na C3CCD1 11,0
     ciemny  0E1319 na F08B85 7,8   12171D na B3BFCA 9,4
             12171D na 98A5B1 7,5   E8EDF3 na 333D48 8,9
   ------------------------------------------------------------ */
body .art .uwaga{
  border-left:3px solid var(--ns-line-2);background:var(--ns-sunk);
  border-radius:0 3px 3px 0}
body .art .uwaga b{color:var(--ns-ink)}

body .art .gwb{background:var(--ns-line)}
body .art .g60 i{background:var(--ns-act);color:var(--ns-act-tekst)}
body .art .g36 i{background:var(--ns-ink-2);color:var(--ns-paper)}
body .art .g24 i{background:var(--ns-muted);color:var(--ns-paper)}
body .art .g12 i{background:var(--ns-line-2);color:var(--ns-ink)}
body .narzedzie .box.dobra .lb{color:var(--ns-act)}


/* ------------------------------------------------------------
   Z5.9 Tabele i obwoluty w poradnikach

   Obwoluta z przewijaniem w poziomie juz jest w tresci (.tw), wiec
   tylko ujednolicamy kreski i pismo naglowkow z reszta sklepu.
   ------------------------------------------------------------ */
body .art .tw{border-color:var(--ns-line);background:var(--ns-paper)}
body .art table thead th{
  font-family:var(--ns-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ns-muted)}
body .art table caption{color:var(--ns-muted);font-size:13px;line-height:1.5}


/* ------------------------------------------------------------
   Z5.10 Telefon
   ------------------------------------------------------------ */
@media (max-width:640px){
  body .hd{padding:22px 0 20px}
  body .art h1{font-size:26px}
  body .hd .stand{font-size:16px}
  body .wstep{gap:14px}
  body .krotka p{font-size:16.5px}
  body nav.spis{padding:14px 16px}
  body .fig-srodek{margin:20px 0}
  body .ilu{margin:20px 0}
}


/* ============================================================
   Z6 (16 wrzesnia 2026): odbior na szesciu szerokosciach
   ============================================================

   Poprawki wad zmierzonych przy odbiorze. Ukladu i tokenow z Z2 do Z5
   nie zmieniamy, prostujemy tylko to, co sie nie miescilo albo mialo za
   maly kontrast w motywie ciemnym.
   ============================================================ */

/* --- Z6.1 Kafle liczbowe .kpis na 320 px ---
   Siatka dwoch torow 1fr bierze najmniejsza szerokosc zawartosci, wiec
   dlugie slowo w opisie rozpychalo pierwszy tor do 179 px przy 272 px
   miejsca i strona przewijala sie w poziomie (scrollWidth 325 przy 320 px).
   Tory dostaja dolna granice zero, a dlugie slowa moga sie zlamac. */
@media (max-width:640px){
  body .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .kpi{min-width:0}
  body .kpi b,body .kpi span{overflow-wrap:anywhere}
}

/* --- Z6.2 Napisy na paskach gwarancji (/migatronic/, /bohler/) ---
   Tresc stron wpisuje na paskach biel na sztywno. W motywie ciemnym tla
   paskow sa jasne (zielen 5FBF92, szarosc 98A5B1), wiec biale liczby
   mialy kontrast 1,6 do 2,6. Napis bierze token "tekst na kolorze
   dzialania": biel w motywie jasnym, ciemny grafit w ciemnym. */
body .gwbar i{color:var(--ns-act-tekst)}

/* --- Z6.3 /rabaty/: pasek progu i etykieta pakietu ---
   To samo co wyzej: biel wpisana w tresc na tle --hot, ktore w motywie
   ciemnym jest jasnym roz (F08B85). Kontrast 2,4. */
body .st.on .bar,
body .pk .flag{color:var(--ns-act-tekst)}

/* --- Z6.4 /rabaty/: dopisek w wierszu sumy w motywie ciemnym ---
   Tresc daje tam --muted (98A5B1) na --steel-2 (333D48): 4,4. Bierzemy
   jasniejszy ton tekstu pomocniczego, ten sam, ktorego uzywa sklep. */
:root[data-theme="dark"] body .sums .tot span{color:var(--ns-ink-2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body .sums .tot span{color:var(--ns-ink-2)}
}

/* --- Z6.5 Nazwa Bohler Welding w tabeli marek na stronie glownej ---
   Tresc ma dwa tokeny marki: --boh (blekit) i --boh-t (ciemniejszy do
   napisow). Blok ciemny w tresci podmienia tylko --boh, wiec napis
   zostawal na 00769F i mial na tle 161C23 kontrast 3,3. W motywie ciemnym
   napis bierze ten sam jasny blekit marki co reszta strony (7,5). */
:root[data-theme="dark"]{--boh-t:#3FB6E0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--boh-t:#3FB6E0}
}

/* --- Z6.6 Cele dotyku na telefonie ---
   Odnosniki w stopce redakcyjnej mialy 22 px wysokosci (13,5 px razy 1,6),
   a kafle kontaktu i telefon doradcy 23 px, czyli ponizej 24 px z WCAG
   2.5.8. Podnosimy sam obszar dotykowy, rozmiar pisma i odstepy zostaja. */
@media (max-width:640px){
  body .dol .dol-k a{min-height:24px;display:flex;align-items:center}
  body .kanaly .kont a{min-height:24px}
}

/* --- Z6.7 Odnosniki w podpisach galerii na stronie glownej ---
   Tresc daje im display:block, wiec mialy 22 px wysokosci (13,5 px razy 1,6).
   Sam obszar dotykowy rosnie do 24 px, uklad i pismo zostaja. */
@media (max-width:640px){
  body .gal figcaption a{min-height:24px}
}