:root{
  --ns-paper:#FFFFFF; --ns-steel:#F1F4F7; --ns-sunk:#F7F9FB;
  --ns-ink:#0E1418; --ns-ink-2:#3B4750; --ns-muted:#647079;
  --ns-line:#DCE2E8; --ns-line-2:#C2CCD4;
  --ns-act:#0B54F0; --ns-act-soft:#EAF0FE; --ns-hot:#E51219; --ns-act-tekst:#FFFFFF;
}

/* ---------- układ strony sklepu ---------- */
.ns-sklep .wp-block-woocommerce-breadcrumbs{font-size:13px;color:var(--ns-muted);margin-bottom:6px}
.ns-sklep .wp-block-woocommerce-breadcrumbs a{color:var(--ns-muted)}
.ns-sklep .wp-block-query-title{font-size:clamp(30px,4vw,42px);letter-spacing:-.02em;margin:0 0 6px}
.ns-sklep .wp-block-term-description{max-width:70ch;color:var(--ns-ink-2);font-size:15px;line-height:1.65}
.ns-uklad{margin-top:30px;align-items:flex-start}
.ns-bok{position:sticky;top:78px}

/* ---------- filtry ---------- */
.ns-filtry{font-size:14px}
.ns-fgr{border-top:1px solid var(--ns-line);padding:16px 0 6px;margin:0}
.ns-fgr:first-of-type{border-top:0;padding-top:0}
.ns-ft{margin:0 0 10px;color:var(--ns-ink)}
.ns-filtry label,.ns-filtry .wc-block-components-checkbox__label{font-size:13.5px;color:var(--ns-ink-2);line-height:1.45}
.ns-filtry .wc-block-components-checkbox{margin:0 0 7px}
.ns-filtry .wc-block-components-checkbox__input{accent-color:var(--ns-act)}
.ns-filtry .wc-block-components-price-slider__range-input-wrapper{background:var(--ns-line)}
.ns-filtry button,.ns-filtry .wc-block-components-filter-reset-button{
  font-size:13px;color:var(--ns-act);background:none;border:0;padding:0;cursor:pointer}
.ns-akt{margin-bottom:10px}

/* ---------- pasek nad wynikami ---------- */
.ns-pasek{border-bottom:1px solid var(--ns-line);padding-bottom:12px;margin-bottom:22px;gap:14px}
.ns-pasek .wc-block-product-results-count,.ns-pasek .woocommerce-result-count{
  font-size:13.5px;color:var(--ns-muted);margin:0}
.ns-pasek select,.woocommerce-ordering select{
  font-size:13.5px;padding:7px 30px 7px 11px;border:1px solid var(--ns-line);border-radius:2px;
  background:var(--ns-paper);color:var(--ns-ink)}

/* przełącznik netto i brutto: ta sama linia co reszta paska */
.spawlab-ceny{margin:0 0 22px;font-size:13.5px;color:var(--ns-muted)}
.spawlab-ceny .grupa{border-color:var(--ns-line-2)}

/* ---------- siatka kart ---------- */
.ns-siatka ul.wc-block-product-template{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
@media(max-width:1200px){.ns-siatka ul.wc-block-product-template{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.ns-uklad{display:block}.ns-bok{position:static;margin-bottom:26px}}
@media(max-width:760px){.ns-siatka ul.wc-block-product-template{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:430px){.ns-siatka ul.wc-block-product-template{grid-template-columns:minmax(0,1fr)}}

.ns-siatka li.wc-block-product{
  display:flex;flex-direction:column;background:var(--ns-paper);
  border:1px solid var(--ns-line);border-radius:3px;padding:12px;margin:0;
  transition:border-color .15s ease, box-shadow .15s ease}
.ns-siatka li.wc-block-product:hover{
  border-color:var(--ns-line-2);box-shadow:0 1px 3px rgba(14,20,24,.06),0 12px 24px -18px rgba(14,20,24,.35)}

.ns-foto{margin:0 0 12px}
.ns-foto,.wc-block-components-product-image{display:block;margin:0 0 12px}
.wc-block-components-product-image a{display:block}
.ns-foto img,.wc-block-components-product-image img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--ns-sunk);
  border-radius:2px;padding:10px;box-sizing:border-box}

.ns-marka{margin:0 0 5px;line-height:1.2}
.ns-marka a{text-decoration:none;color:var(--ns-muted)}
.ns-marka a:hover{color:var(--ns-ink-2)}

.ns-nazwa{margin:0 0 10px}
.ns-nazwa a{color:var(--ns-ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ns-nazwa a:hover{color:var(--ns-act)}

.ns-cena{margin:0 0 12px;margin-top:auto;font-size:17px;font-weight:700;color:var(--ns-ink);line-height:1.3}
.ns-cena .ceny-dop,.ns-cena small{display:block;font-size:12.5px;font-weight:400;color:var(--ns-muted);margin-top:3px}
.ns-cena .woocommerce-Price-amount{white-space:nowrap}

.ns-kup{margin:0}
.ns-kup .wp-block-button__link,.ns-kup a.button,.ns-kup button{
  display:block;width:100%;text-align:center;background:var(--ns-act);color:#fff;border:0;
  border-radius:2px;padding:11px 14px;font-size:13.5px;font-weight:700;line-height:1.2;
  text-decoration:none;cursor:pointer;transition:background .15s ease}
.ns-kup .wp-block-button__link:hover,.ns-kup a.button:hover,.ns-kup button:hover{background:#0847CB}
.ns-kup .added_to_cart{display:block;text-align:center;font-size:12.5px;margin-top:7px;color:var(--ns-act)}

/* produkt bez ceny: zamiast pustego miejsca prowadzimy do zapytania */
.ns-cena:empty::before{content:"Cena na zapytanie";font-size:15px;font-weight:600;color:var(--ns-ink-2)}

/* ---------- stronicowanie ---------- */
.ns-siatka .wp-block-query-pagination{margin-top:34px;gap:6px;font-size:14px}
.ns-siatka .wp-block-query-pagination a,.ns-siatka .wp-block-query-pagination span{
  padding:8px 13px;border:1px solid var(--ns-line);border-radius:2px;text-decoration:none;color:var(--ns-ink-2)}
.ns-siatka .wp-block-query-pagination .current{background:var(--ns-ink);border-color:var(--ns-ink);color:#fff}

/* ---------- karta produktu ---------- */
.single-product .entry-title,.wp-block-post-title{letter-spacing:-.01em}
.woocommerce-product-gallery img{background:var(--ns-sunk);border-radius:3px}

/* ---------- kolumna filtrow nie moze wychodzic poza swoja szerokosc ---------- */
/* bloki filtrow WooCommerce maja wlasna szerokosc minimalna i bez tego naklada */
/* sie na siatke kart, co widac jako pionowa kreska w polowie ekranu            */
.ns-bok,.ns-bok *{min-width:0;max-width:100%;box-sizing:border-box}
.ns-bok .wp-block-woocommerce-product-filters,.ns-bok .ns-fgr,
.ns-bok .wc-block-product-filter-checkbox-list,.ns-bok fieldset{width:100%;margin-left:0;margin-right:0}
.ns-bok fieldset{border:0;padding:0;margin:0}
.ns-bok ul{list-style:none;margin:0;padding:0}
.ns-bok .wc-block-product-filter-checkbox-list__list{max-height:none}
.ns-tresc{min-width:0}

/* przelacznik netto i brutto nad siatka, w jednej linii z paskiem wynikow */
.ns-tresc .spawlab-ceny{margin:0 0 20px}

/* siatka nie moze byc wezsza niz kolumna */
.ns-siatka{min-width:0}

/* na waskim ekranie karta ma mniej powietrza, zeby dwie zmiescily sie w rzedzie */
@media(max-width:560px){
  .ns-siatka li.wc-block-product{padding:9px}
  .ns-nazwa{font-size:14px}
  .ns-cena{font-size:15.5px}
  .ns-kup .wp-block-button__link,.ns-kup a.button,.ns-kup button{padding:10px 8px;font-size:12.5px}
  .ns-marka{font-size:10px}
}
/* przycisk filtrow na telefonie w naszym stylu */
.wc-block-product-filters__open-overlay{
  display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ns-line-2);
  border-radius:2px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ns-ink);
  background:var(--ns-paper);cursor:pointer}

/* ---------- karta produktu ---------- */
.single-product .wp-block-post-title{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em;margin:0 0 10px}
.single-product .wp-block-woocommerce-product-price{font-size:22px;font-weight:700;color:var(--ns-ink)}
.single-product .wp-block-woocommerce-product-price .ceny-dop{font-size:13.5px;font-weight:400;color:var(--ns-muted)}
.single-product .woocommerce-product-details__short-description{
  font-size:15px;line-height:1.65;color:var(--ns-ink-2);max-width:62ch;margin:16px 0 20px}

.single-product form.cart{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:0 0 20px}
.single-product form.cart .quantity input{
  width:74px;height:100%;min-height:46px;padding:0 10px;border:1px solid var(--ns-line);
  border-radius:2px;font-size:15px;text-align:center}
.single-product form.cart button.single_add_to_cart_button,
.single-product .wp-block-add-to-cart-form button{
  background:var(--ns-act);color:var(--ns-act-tekst);border:0;border-radius:2px;padding:13px 30px;
  font-size:15px;font-weight:700;cursor:pointer;transition:background .15s ease}
.single-product form.cart button.single_add_to_cart_button:hover{background:#0847CB}

.ns-zaufanie{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;
  border-top:1px solid var(--ns-line);border-bottom:1px solid var(--ns-line);
  padding:18px 0;margin:0 0 20px}
.ns-zaufanie .ns-z{display:flex;flex-direction:column;gap:3px;min-width:0}
.ns-zaufanie .ns-z b{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ns-muted)}
.ns-zaufanie .ns-z span{font-size:13.5px;line-height:1.5;color:var(--ns-ink-2)}
.ns-zaufanie .ns-z.ns-z-platnosc{grid-column:1/-1;padding-top:12px;border-top:1px solid var(--ns-line)}
.ns-z-wiecej{grid-column:1/-1;margin:2px 0 0;font-size:13.5px}
.ns-z-wiecej a{color:var(--ns-act);text-decoration:none}
.ns-z-wiecej a:hover{text-decoration:underline}
.ns-z-wiecej span{color:var(--ns-line-2);margin:0 4px}
@media(max-width:600px){.ns-zaufanie{grid-template-columns:1fr}}

.single-product .product_meta{font-size:13px;color:var(--ns-muted);border-top:1px solid var(--ns-line);padding-top:14px}
.single-product .product_meta a{color:var(--ns-ink-2)}
.woocommerce-tabs ul.tabs{border-bottom:1px solid var(--ns-line);padding:0;margin:0 0 26px;display:flex;gap:6px;list-style:none}
.woocommerce-tabs ul.tabs li a{display:block;padding:11px 16px;font-size:14px;font-weight:600;color:var(--ns-muted);text-decoration:none}
.woocommerce-tabs ul.tabs li.active a{color:var(--ns-ink);box-shadow:inset 0 -2px 0 var(--ns-act)}

/* ---------- koszyk i zamowienie ---------- */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link){
  background:var(--ns-act);color:var(--ns-act-tekst);border:0;border-radius:2px;font-weight:700;
  padding:14px 22px;font-size:15px;transition:background .15s ease}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover{background:#0847CB;color:#fff}

.wc-block-cart-items__header{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ns-muted)}
.wc-block-cart-items td,.wc-block-cart-items th{border-color:var(--ns-line)}
.wc-block-components-product-name{font-size:15px;font-weight:600;color:var(--ns-ink);text-decoration:none}
.wc-block-components-product-name:hover{color:var(--ns-act)}
.wc-block-cart-item__image img{background:var(--ns-sunk);border-radius:2px;padding:6px}

.wc-block-components-totals-wrapper{border-color:var(--ns-line)}
.wc-block-components-totals-item__label{color:var(--ns-ink-2)}
.wc-block-components-totals-item__value{font-variant-numeric:tabular-nums}
/* rabat ilosciowy ma byc widoczny, to najwazniejsza liczba w podsumowaniu */
.wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wc-block-components-totals-fees .wc-block-components-totals-item__value{color:var(--ns-ok,#0C7C59);font-weight:700}
.wc-block-components-totals-footer-item{border-top:1px solid var(--ns-line);padding-top:14px}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:22px;font-weight:700;color:var(--ns-ink)}

.wc-block-components-sidebar-layout .wc-block-components-sidebar{background:var(--ns-sunk);border:1px solid var(--ns-line);border-radius:3px}
.wc-block-components-radio-control__option{border-color:var(--ns-line)}
.wc-block-components-text-input input,.wc-block-components-textarea{
  border:1px solid var(--ns-line);border-radius:2px}
.wc-block-components-text-input input:focus{border-color:var(--ns-act);outline:2px solid var(--ns-act-soft)}

/* informacja o rabatach i transporcie nad koszykiem */
.spawlab-rabaty-info,.spawlab-wysylka-info{
  border:1px solid var(--ns-line);border-left:3px solid var(--ns-act);border-radius:2px;
  background:var(--ns-sunk);padding:12px 16px;margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--ns-ink-2)}

/* Przycisk otwierajacy filtry ma sens tylko na telefonie. Na duzym ekranie
   filtry stoja w kolumnie obok siatki, a przycisk wciskal sie miedzy nie
   i lamal sie na pionowe litery. */
.wc-block-product-filters__open-overlay{display:none}
@media (max-width:781px){
  .wc-block-product-filters__open-overlay{
    display:inline-flex;align-items:center;gap:.5rem;
    width:100%;justify-content:center;
    padding:.75rem 1rem;border:1px solid var(--ns-linia,#d5dae0);
    border-radius:4px;background:#fff;font-weight:600;white-space:nowrap}
}

/* Zapytanie o wycene przy produktach bez ceny */
.ns-wycena{margin:14px 0 6px;padding:16px;border:1px solid var(--ns-linia,#d5dae0);border-radius:6px;background:#f7f9fb}
.ns-wycena-info{margin:0 0 12px;font-size:14px;color:var(--ns-ink-2)}
.ns-wycena-przycisk{display:inline-block;background:#1a56db;color:#fff !important;font-weight:600;padding:12px 22px;border-radius:4px;text-decoration:none}
.ns-wycena-przycisk:hover{background:#1246b8}
.ns-wycena-tel{display:inline-block;margin-left:14px;font-size:14px;text-decoration:underline}

/* Odstep miedzy akapitami krotkiego opisu na karcie produktu */
.woocommerce-product-details__short-description p + p,
.wc-block-components-product-summary p + p{margin-top:.6em}

/* ============================================================
   Jezyk wizualny sklepu: ten sam co strona glowna.
   Archivo do naglowkow i etykiet, IBM Plex Mono do liczb,
   granat #0f1720, niebieski #1a56db, pasek czterech marek.
   ============================================================ */

:root{
  --ns-granat:#0f1720; --ns-granat2:#141d2b; --ns-niebieski:#1a56db;
  --ns-linia:#d5dae0; --ns-mono:"IBM Plex Mono",ui-monospace,monospace;
  --ns-archivo:Archivo,"Helvetica Neue",Arial,sans-serif;
  --m-megmeet:#e5484d; --m-migatronic:#3fa66b; --m-gys:#2f6bff; --m-bohler:#38bdf8}

/* --- ciemna glowa sklepu, pelna szerokosc, z pasem czterech marek --- */
.ns-glowa{background:
    radial-gradient(circle at 12% -40%, rgba(37,99,235,.30), transparent 42%),
    radial-gradient(circle at 95% 140%, rgba(249,115,22,.14), transparent 40%),
    linear-gradient(135deg,#0f1720 0%,#111827 55%,#1e293b 100%);
  color:#fff;position:relative;overflow:hidden;
  padding:26px 0 34px;margin-bottom:30px}
.ns-glowa::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--m-megmeet) 0 25%,var(--m-migatronic) 25% 50%,
    var(--m-gys) 50% 75%,var(--m-bohler) 75% 100%)}
.ns-glowa::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px}
.ns-glowa>*{position:relative;z-index:2}
.ns-glowa .wc-block-breadcrumbs{font-size:12.5px;color:#93a1b3;margin:0 0 10px}
.ns-glowa .wc-block-breadcrumbs a{color:#c4cedb;text-decoration:none}
.ns-glowa .wc-block-breadcrumbs a:hover{color:#fff}
.ns-glowa h1{font-family:var(--ns-archivo);font-variation-settings:"wdth" 110;
  font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;
  margin:0 0 10px;color:#fff}
.ns-usp{font-family:var(--ns-mono);font-size:12.5px;letter-spacing:.01em;
  color:#aeb9c8;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px 22px}
.ns-usp b{color:#dbeafe;font-weight:500}
.ns-usp b::before{content:"+ ";color:var(--m-bohler)}

/* --- kafle kategorii: na ciemnym pasie, aktywny bialy --- */
.ns-kafle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.ns-kafel{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:5px;
  background:rgba(255,255,255,.045);text-decoration:none;color:#e7ecf3;
  transition:border-color .15s,background .15s,transform .15s}
.ns-kafel b{font-family:var(--ns-archivo);font-variation-settings:"wdth" 108;
  font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.ns-kafel span{font-family:var(--ns-mono);font-size:12px;color:#9fb0c6;
  background:rgba(255,255,255,.09);border-radius:3px;padding:3px 9px;min-width:34px;text-align:center}
.ns-kafel:hover{border-color:var(--m-bohler);background:rgba(255,255,255,.09);transform:translateY(-1px)}
.ns-kafel-aktywny{background:#fff;border-color:#fff;color:var(--ns-granat)}
.ns-kafel-aktywny b{color:var(--ns-granat)}
.ns-kafel-aktywny span{background:#e8eefb;color:var(--ns-niebieski)}
@media (max-width:900px){.ns-kafle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ns-kafel{padding:11px 12px}.ns-kafel b{font-size:11.5px}}

/* --- karty produktow: cien, uniesienie, kreska marki --- */
ul.wc-block-product-template{gap:18px 18px}
li.wc-block-product{border:1px solid var(--ns-linia);border-radius:6px;background:#fff;
  padding:14px 14px 16px;position:relative;overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s}
li.wc-block-product::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:#c8d1dc}
li.wc-block-product:has(.ns-marka a[href*="/marka/megmeet"])::before{background:var(--m-megmeet)}
li.wc-block-product:has(.ns-marka a[href*="/marka/migatronic"])::before{background:var(--m-migatronic)}
li.wc-block-product:has(.ns-marka a[href*="/marka/gys"])::before{background:var(--m-gys)}
li.wc-block-product:has(.ns-marka a[href*="/marka/bohler"])::before{background:var(--m-bohler)}
li.wc-block-product:hover{transform:translateY(-3px);border-color:var(--ns-line-2);
  box-shadow:0 14px 30px rgba(15,23,42,.12)}
li.wc-block-product .ns-marka a{text-decoration:none;color:var(--ns-muted)}
/*
 * Nazwa marki nad tytulem to drobny tekst wielkimi literami, wiec musi miec
 * kontrast co najmniej 4,5:1 wzgledem bialego tla (WCAG 2.1 AA). Jasne kolory
 * marek tego nie spelnialy: Bohler 3,01, Migatronic 3,05, MEGMEET 3,91.
 * Dlatego dla samego napisu bierzemy ciemniejszy odcien tej samej barwy.
 * Kolor marki zostaje bez zmian tam, gdzie nie jest tekstem: pasek nad karta,
 * kafle i akcenty na ciemnym tle.
 */
li.wc-block-product:has(.ns-marka a[href*="/marka/megmeet"]) .ns-marka a{color:#c9393d}
li.wc-block-product:has(.ns-marka a[href*="/marka/migatronic"]) .ns-marka a{color:#2f7d52}
li.wc-block-product:has(.ns-marka a[href*="/marka/gys"]) .ns-marka a{color:#2a60e6}
li.wc-block-product:has(.ns-marka a[href*="/marka/bohler"]) .ns-marka a{color:#00769f}
li.wc-block-product .ns-nazwa a{text-decoration:none;color:var(--ns-ink)}
li.wc-block-product .ns-nazwa a:hover{color:var(--ns-niebieski)}
li.wc-block-product .ns-cena{font-family:var(--ns-mono);font-weight:600}
.ns-kup .wp-block-button__link,.wc-block-product .wp-element-button{
  font-family:var(--ns-archivo);font-weight:700;letter-spacing:.02em;border-radius:4px;
  background:var(--ns-niebieski);transition:background .15s,transform .1s}
.ns-kup .wp-block-button__link:hover,.wc-block-product .wp-element-button:hover{background:#1246b8}

/* etykieta na karcie bez ceny */
li.wc-block-product:not(:has(.ns-cena .woocommerce-Price-amount))::after{
  content:"Wycena indywidualna";position:absolute;top:12px;right:10px;z-index:3;
  font-family:var(--ns-mono);font-size:10.5px;letter-spacing:.04em;
  background:#0f1720;color:#dbeafe;padding:4px 8px;border-radius:3px}

/* --- pasek wynikow i boczna kolumna --- */
.ns-pasek{font-family:var(--ns-mono);font-size:13px;color:var(--ns-muted)}
.ns-ft{font-family:var(--ns-archivo) !important;color:var(--ns-ink)}
.ns-f input[type=checkbox]{accent-color:var(--ns-niebieski)}
.ns-fgr{border-bottom:1px solid var(--ns-linia);padding-bottom:16px}

/* --- "dlaczego u nas" pod filtrami --- */
.ns-dlaczego{margin-top:22px;padding:16px;border-radius:6px;background:var(--ns-granat);color:#dbe4ee}
.ns-dlaczego b{font-family:var(--ns-archivo);display:block;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;margin-bottom:9px}
.ns-dlaczego p{margin:0 0 7px;font-size:12.8px;line-height:1.45}
.ns-dlaczego p::before{content:"+ ";color:var(--m-bohler);font-family:var(--ns-mono)}
.ns-dlaczego a{color:#9cc3ff;font-size:12.8px}

/* Filtry warunkowe: progi pradu, rodzaj pradu, chlodzenie i moc lasera
   pokazuja sie dopiero w kategorii, w ktorej maja sens. */
/* Widocznosc filtrow per kategoria robi teraz wtyczka (filtry.php): blok spoza
   kategorii nie trafia do kodu strony, wiec nie pokazuje sie tez w panelu
   filtrow na telefonie ani w chipsach aktywnych filtrow. */
/* kolejnosc pozycji od najprostszej do najbardziej zaawansowanej,
   bo blok WooCommerce sortuje tylko po nazwie albo liczbie */
.ns-fp .wc-block-product-filter-checkbox-list__items{display:flex;flex-direction:column}
.ns-fp .wc-block-product-filter-checkbox-list__item{order:9}
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="manualne"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="ciecie-reczne"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="spawanie"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="luk-ciagniony"]){order:1}
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="synergiczne"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="praca-z-cnc-i-automatem"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="spawanie-z-podawaniem-drutu"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="kondensatorowe-cd"]){order:2}
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="pulsacyjne"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="zlobienie-plazmowe"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="czyszczenie-laserowe"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="krotki-cykl"]){order:3}
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="podwojny-puls"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="mix-ac"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="ciecie-siatek-i-krat"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="ciecie"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="podajnik-automatyczny"]){order:4}
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="procesy-specjalne"]),
.ns-fp .wc-block-product-filter-checkbox-list__item:has(input[value="sczepianie"]){order:5}
/* glowa sklepu na telefonie: boczne dopelnienie motywu, zeby tekst nie dotykal krawedzi */
@media (max-width:640px){
  .ns-glowa{padding-left:var(--wp--style--root--padding-left,20px);padding-right:var(--wp--style--root--padding-right,20px)}
}

/* Opis kategorii pod siatka produktow: typografia do czytania, nie sciana */
.ns-kat-opis{margin-top:44px;padding-top:28px;border-top:1px solid var(--ns-linia,#d5dae0)}
.ns-kat-opis .wp-block-term-description,
.ns-kat-opis .wp-block-post-term-description,
.ns-kat-opis .taxonomy-description{max-width:none}
/* Opis kategorii to kilka krotkich rozdzialow. W jednej kolumnie zostawial
   polowe ekranu pusta, wiec na szerokim ekranie lamiemy go na dwie kolumny
   z linia miedzy nimi. Naglowek nie zostaje sam na koncu kolumny, akapit
   nie pcka sie na pol. */
@media (min-width:1000px){
  .ns-kat-opis .wp-block-term-description,
  .ns-kat-opis .wp-block-post-term-description,
  .ns-kat-opis .taxonomy-description{
    columns:2;column-gap:52px;column-rule:1px solid var(--ns-linia,#d5dae0)}
  .ns-kat-opis h2{break-after:avoid;break-inside:avoid}
  .ns-kat-opis p,.ns-kat-opis ul,.ns-kat-opis ol,.ns-kat-opis table{break-inside:avoid}
}
.ns-kat-opis h2{font-size:20px;font-weight:700;margin:26px 0 10px;letter-spacing:-.01em}
.ns-kat-opis h2:first-child{margin-top:0}
.ns-kat-opis p{font-size:15.5px;line-height:1.62;color:var(--ns-ink-2,#3a4652);margin:0 0 14px}
.ns-kat-opis h2:first-of-type{margin-top:0}

/* Poprawki mobilne z audytu 2026-09-01 */

/* 1. Pasek USP w glowie sklepu: na telefonie jedna linia przewijana
   w poziomie zamiast czterech wierszy. Pasek przewijania jest ukryty,
   ale przewijanie palcem, kolkiem i klawiatura dziala. Prawa krawedz
   zanika (mask-image), co podpowiada, ze jest co przewinac; pseudoelement
   ::after dodaje odstep na koncu, zeby ostatni punkt dal sie doprowadzic
   przed strefe zanikania. Podwojna klasa: wygrywa z .ns-usp z tego pliku
   niezaleznie od kolejnosci. */
@media (max-width:640px){
  .ns-usp.ns-usp{
    display:flex;flex-wrap:nowrap;white-space:nowrap;
    gap:4px 10px;font-size:11px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .ns-usp.ns-usp::-webkit-scrollbar{display:none}
  .ns-usp.ns-usp>b{flex:0 0 auto}
  .ns-usp.ns-usp::after{content:"";flex:0 0 32px}
}

/* 2. i 3. Przyciski bloku filtrow: obszar dotykowy min. 44 px.
   Regula .ns-filtry button (0,1,1) zeruje padding wszystkich przyciskow
   w kolumnie filtrow, a WooCommerce dorzuca :where(.wc-block-product-filters)
   .wc-block-product-filters__open-overlay{padding:0}. Stad kontener +
   element + klasa (0,2,1). Celowo bez display: WooCommerce chowa przycisk
   otwierania na szerokich ekranach przez display:none i nie wolno tego
   nadpisac. */
.wc-block-product-filters button.wc-block-product-filters__open-overlay{
  min-height:44px;align-items:center;padding:10px 0;box-sizing:border-box;cursor:pointer}
.wc-block-product-filters button.wc-block-product-filters__apply,
.wc-block-product-filters button.wc-block-product-filters__close-overlay{
  min-height:44px;padding:12px 16px;box-sizing:border-box;cursor:pointer}
/* "Zastosuj" to glowne dzialanie panelu; przez .ns-filtry button bylo
   golym niebieskim tekstem, wiec wraca do wygladu przycisku sklepu. */
.wc-block-product-filters button.wc-block-product-filters__apply{
  display:flex;align-items:center;justify-content:center;width:100%;
  background:var(--ns-niebieski,#1a56db);color:#fff;border:0;border-radius:4px;
  font-size:14px;font-weight:700}

/* 4. Hamburger menu: 44x44 px wokol ikony 24 px, ikona bez zmian.
   Rdzen WordPressa daje temu przyciskowi padding:0 i display:flex (0,1,0);
   element + klasa (0,1,1) wystarcza, display zostaje nietkniety, zeby
   nie odslonic przycisku na desktopie. */
button.wp-block-navigation__responsive-container-open{
  padding:10px;min-width:44px;min-height:44px;box-sizing:border-box;
  align-items:center;justify-content:center}

/* 6. Przelacznik netto/brutto (wtyczka spawlab-ceny, style inline
   .spawlab-ceny a{padding:5px 12px}): na 390 px kontener inline-flex
   sciska grupe i slowa lamia sie w srodku ("ne/tto"). Grupa nie moze sie
   kurczyc, slowo nie moze sie lamac, a na waskim ekranie dopisek o VAT
   przechodzi do nowej linii. */
.spawlab-ceny span.grupa{flex-shrink:0}
.spawlab-ceny span.grupa a{
  white-space:nowrap;min-width:58px;box-sizing:border-box;font-size:13px;text-align:center}
@media (max-width:640px){
  .spawlab-ceny{flex-wrap:wrap}
}

/* 9. Baner Complianz na telefonie. Arkusz banera laduje sie po tym pliku
   i uzywa selektorow (0,2,0), dlatego identyfikator kontenera Complianz.
   Baner nie wyzej niz 60vh (z przewijaniem), a tresc (.cmplz-body) nie
   wyzej niz 30vh, zeby przyciski zgody zostaly widoczne bez przewijania.
   Krzyzyk zamykania: pole 32x32 px z ikona 20 px wysrodkowana; ujemny
   margines rowny dopelnieniu trzyma ikone w tym samym miejscu i nie
   podnosi naglowka banera. */
@media (max-width:640px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    max-height:60vh;overflow-y:auto;padding:12px 14px}
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body{max-height:30vh}
  #cmplz-cookiebanner-container .cmplz-close{
    width:32px;height:32px;min-width:32px;min-height:32px;padding:6px;margin:-6px -6px -6px 0;
    box-sizing:border-box;display:flex;align-items:center;justify-content:center;line-height:1}
}

/* 10. Tekst ponizej 12 px: nazwa marki na karcie (div.ns-marka ma inline
   font-size:11px, wiec regula idzie na link) i symbol waluty. max(12px,1em)
   znaczy: nigdy mniej niz 12 px, poza tym rozmiar rodzica bez zmian, wiec
   duze ceny (17 i 22 px) zostaja takie same. Kwota i symbol razem, zeby
   "zl" nie bylo wieksze od liczby obok. */
.ns-marka a{font-size:max(12px,1em)}
span.woocommerce-Price-amount,span.woocommerce-Price-currencySymbol{font-size:max(12px,1em)}

/* Pasek kontaktu nad naglowkiem: telefon, godziny, mail.
   Klient ma numer w zasiegu wzroku na kazdej stronie sklepu. */
.ns-kontakt-pas{border-bottom:1px solid var(--ns-line);margin-bottom:6px;padding:0}
.ns-kontakt-pas .ns-kontakt{margin:0;padding:6px 0;font-size:13px;color:var(--ns-ink-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;white-space:nowrap}
.ns-kontakt-pas .ns-kontakt a{color:var(--ns-ink);text-decoration:none;font-weight:600}
.ns-kontakt-pas .ns-kontakt a:hover{color:var(--ns-act);text-decoration:underline}
.ns-kontakt-pas .ns-kontakt a[href^="tel:"]{font-family:var(--ns-mono,"IBM Plex Mono",monospace);font-weight:600;letter-spacing:.01em}
.ns-kontakt-pas .ns-kontakt-godz{color:var(--ns-muted)}
.ns-kontakt-pas .ns-kontakt-godz::before,.ns-kontakt-pas .ns-kontakt-godz::after{content:"|";color:var(--ns-line-2);margin:0 10px}
@media (max-width:640px){
  .ns-kontakt-pas .ns-kontakt{font-size:12px;justify-content:space-between;width:100%}
  .ns-kontakt-pas .ns-kontakt a[href^="mailto:"]{display:none}
  .ns-kontakt-pas .ns-kontakt-godz::after{content:none}
  .ns-kontakt-pas .ns-kontakt a[href^="tel:"]{min-height:32px;display:inline-flex;align-items:center}
}

/* Logo w naglowkach stron wlasnego szablonu bylo 34 px wysokosci, czyli
   113 px szerokosci, i gubilo sie obok menu. Podnosimy do 46 px, tak zeby
   pasowalo do 210 px w naglowku sklepu. Selektor z kontenerem, bo styl
   strony siedzi w tresci i jest pozniej w dokumencie. */
.top a.brandmark img{height:46px}
@media (max-width:900px){ .top a.brandmark img{height:38px} }


/* Wyszukiwarka w pasku kontaktu: 524 maszyny, a klient znajacy model nie mial
   gdzie go wpisac. Pole idzie po lewej, kontakt zostaje po prawej. */
.ns-kontakt-pas{justify-content:space-between}
.ns-szukaj{display:flex;align-items:center;gap:0;flex:0 1 340px;margin:4px 0}
.ns-szukaj input[type="search"]{
  flex:1;min-width:0;height:34px;padding:0 12px;font-size:13.5px;
  border:1px solid var(--ns-line,#DCE2E8);border-right:0;border-radius:3px 0 0 3px;
  background:var(--ns-paper,#fff);color:var(--ns-ink,#0E1418)}
.ns-szukaj input[type="search"]::placeholder{color:var(--ns-muted,#647079)}
.ns-szukaj input[type="search"]:focus{outline:2px solid var(--ns-act,#0B54F0);outline-offset:-2px}
.ns-szukaj button{
  height:34px;padding:0 14px;border:1px solid var(--ns-act,#0B54F0);border-radius:0 3px 3px 0;
  background:var(--ns-act,#0B54F0);color:var(--ns-act-tekst,#fff);font:600 13px/1 var(--ns-archivo,system-ui);cursor:pointer}
.ns-szukaj button:hover{background:#0A45C4;border-color:#0A45C4}
@media (max-width:900px){
  .ns-kontakt-pas{flex-wrap:wrap}
  .ns-szukaj{flex:1 1 100%;order:2;margin:0 0 8px}
  .ns-kontakt-pas .ns-kontakt{order:1;width:100%}
}

/* Pasek nad siatka produktow: po lewej przelacznik netto i brutto,
   po prawej wyszukiwarka. Formularz jest przenoszony z naglowka,
   zeby nie budowac drugiego i nie mnozyc pol wyszukiwania na stronie. */
.ns-pasek-sklep{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 18px}
.ns-pasek-sklep .spawlab-ceny{margin:0}
.ns-szukaj-sklep{flex:0 1 320px;margin:0}
@media (max-width:640px){
  .ns-pasek-sklep{gap:10px}
  .ns-szukaj-sklep{flex:1 1 100%}
}

/* Przelacznik motywu. Siedzi w pasku kontaktu w sklepie i przy przycisku
   Sklep na stronach wlasnego szablonu. */
.ns-motyw{display:inline-flex;align-items:center;gap:6px;margin-left:14px;
  height:30px;padding:0 10px;cursor:pointer;
  border:1px solid var(--ns-line,#DCE2E8);border-radius:3px;
  background:transparent;color:inherit;
  font:600 12px/1 var(--ns-archivo,system-ui);letter-spacing:.02em}
.ns-motyw:hover{border-color:var(--ns-act,#0B54F0);color:var(--ns-act,#0B54F0)}
.ns-motyw svg{flex:none}
.top .top-cta .ns-motyw{margin-left:0;height:38px}
@media (max-width:640px){ .ns-motyw span{display:none} .ns-motyw{padding:0 8px} }

/* ---------- motyw ciemny sklepu ----------
   Motyw blokowy maluje tlo i tekst zmiennymi base i contrast, wiec podmieniamy
   je razem z naszymi tokenami. Glowa sklepu jest ciemna od zawsze, wiec
   zostaje bez zmian. Reguly ida i za ustawieniem systemu (gdy klient niczego
   nie wybral), i za jawnym wyborem przycisku. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ns-paper:#12171d; --ns-steel:#161c23; --ns-sunk:#0e1319;
    --ns-ink:#e8edf3; --ns-ink-2:#b3bfca; --ns-muted:#8b98a4;
    --ns-line:#252d36; --ns-line-2:#333d48;
    --ns-act:#6f9bff; --ns-act-soft:#16233b; --ns-act-tekst:#0e1319;
    --wp--preset--color--base:#0e1319; --wp--preset--color--contrast:#e8edf3;
  }
}
:root[data-theme="dark"]{
  --ns-paper:#12171d; --ns-steel:#161c23; --ns-sunk:#0e1319;
  --ns-ink:#e8edf3; --ns-ink-2:#b3bfca; --ns-muted:#8b98a4;
  --ns-line:#252d36; --ns-line-2:#333d48;
  --ns-act:#6f9bff; --ns-act-soft:#16233b; --ns-act-tekst:#0e1319;
  --wp--preset--color--base:#0e1319; --wp--preset--color--contrast:#e8edf3;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body{background:var(--ns-sunk);color:var(--ns-ink)}
}
:root[data-theme="dark"] body{background:var(--ns-sunk);color:var(--ns-ink)}

/* Elementy z wlasnym bialym tlem albo ciemnym tekstem wpisanym na sztywno.
   Powtarzamy blok dwa razy, bo selektor z @media w srodku jest niepoprawny. */
:root[data-theme="dark"] li.wc-block-product,
:root[data-theme="dark"] .ns-kafle,
:root[data-theme="dark"] .ns-filtry,
:root[data-theme="dark"] .woocommerce-tabs,
:root[data-theme="dark"] table.ns-dane,
:root[data-theme="dark"] .ns-pasek-sklep{background:transparent;color:var(--ns-ink)}
:root[data-theme="dark"] li.wc-block-product{background:var(--ns-paper);border-color:var(--ns-line)}
:root[data-theme="dark"] .ns-szukaj input[type="search"]{background:var(--ns-paper);color:var(--ns-ink);border-color:var(--ns-line)}
:root[data-theme="dark"] table.ns-dane th,
:root[data-theme="dark"] table.ns-dane td{border-color:var(--ns-line);color:var(--ns-ink)}
:root[data-theme="dark"] .ns-kat-opis p{color:var(--ns-ink-2)}
:root[data-theme="dark"] .spawlab-ceny{color:var(--ns-ink)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) li.wc-block-product{background:var(--ns-paper);border-color:var(--ns-line)}
  :root:not([data-theme="light"]) .ns-szukaj input[type="search"]{background:var(--ns-paper);color:var(--ns-ink);border-color:var(--ns-line)}
  :root:not([data-theme="light"]) table.ns-dane th,
  :root:not([data-theme="light"]) table.ns-dane td{border-color:var(--ns-line);color:var(--ns-ink)}
  :root:not([data-theme="light"]) .ns-kat-opis p{color:var(--ns-ink-2)}
}

/* Elementy, ktore w jasnym motywie stoja na bialym tle albo maja wpisany
   ciemny kolor. Blok idzie dwa razy: raz dla wyboru z przycisku, raz dla
   ustawienia systemu, bo @media w srodku selektora jest niepoprawne. */
:root[data-theme="dark"] .ns-wycena{background:var(--ns-steel);border-color:var(--ns-line);color:var(--ns-ink)}
:root[data-theme="dark"] .woocommerce-tabs{background:transparent;color:var(--ns-ink)}
:root[data-theme="dark"] .spawlab-ceny .grupa{border-color:var(--ns-line)}
:root[data-theme="dark"] .spawlab-ceny .grupa a{background:var(--ns-steel);color:var(--ns-ink-2)}
:root[data-theme="dark"] .spawlab-ceny .grupa a[aria-current]{background:var(--ns-act);color:#0e1319}
:root[data-theme="dark"] .ns-filtry input[type="text"],
:root[data-theme="dark"] .wc-block-product-filter-price-slider input,
:root[data-theme="dark"] .quantity input,
:root[data-theme="dark"] input.qty,
:root[data-theme="dark"] .wc-block-components-text-input input{
  background:var(--ns-paper);color:var(--ns-ink);border-color:var(--ns-line)}
:root[data-theme="dark"] li.wc-block-product img,
:root[data-theme="dark"] .woocommerce-product-gallery img{background:#fff;border-radius:3px}
:root[data-theme="dark"] .wp-block-site-logo img,
:root[data-theme="dark"] .top a.brandmark img{content:url(logo-ciemny.png)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ns-wycena{background:var(--ns-steel);border-color:var(--ns-line);color:var(--ns-ink)}
  :root:not([data-theme="light"]) .ns-kafle,
  :root:not([data-theme="light"]) .ns-filtry,
  :root:not([data-theme="light"]) .woocommerce-tabs,
  :root:not([data-theme="light"]) table.ns-dane,
  :root:not([data-theme="light"]) .ns-pasek-sklep{background:transparent;color:var(--ns-ink)}
  :root:not([data-theme="light"]) .spawlab-ceny{color:var(--ns-ink)}
  :root:not([data-theme="light"]) .spawlab-ceny .grupa{border-color:var(--ns-line)}
  :root:not([data-theme="light"]) .spawlab-ceny .grupa a{background:var(--ns-steel);color:var(--ns-ink-2)}
  :root:not([data-theme="light"]) .spawlab-ceny .grupa a[aria-current]{background:var(--ns-act);color:#0e1319}
  :root:not([data-theme="light"]) .ns-filtry input[type="text"],
  :root:not([data-theme="light"]) .wc-block-product-filter-price-slider input,
  :root:not([data-theme="light"]) .quantity input,
  :root:not([data-theme="light"]) input.qty,
  :root:not([data-theme="light"]) .wc-block-components-text-input input{
    background:var(--ns-paper);color:var(--ns-ink);border-color:var(--ns-line)}
  :root:not([data-theme="light"]) li.wc-block-product img,
  :root:not([data-theme="light"]) .woocommerce-product-gallery img{background:#fff;border-radius:3px}
  :root:not([data-theme="light"]) .wp-block-site-logo img,
  :root:not([data-theme="light"]) .top a.brandmark img{content:url(logo-ciemny.png)}
}


/* Kontrast napisow na przyciskach.
   W motywie ciemnym akcent jest jasny (#6f9bff), wiec bialy napis dawal
   kontrast 2,7 przy wymaganych 4,5. Napis na jasnym akcencie jest ciemny,
   a na stalym granacie kafli zawsze bialy. */
.ns-kup .wp-block-button__link,
.wc-block-product .wp-element-button,
.ns-kup a.button,
.ns-kup button{color:#fff}


/* Rozdroze na stronie 404: wykaz dzialow pod polem wyszukiwania. */
.ns-404{margin:2.5rem 0 0;max-width:52rem;text-align:left}
.ns-404 h2{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  margin:1.6rem 0 .6rem;color:var(--ns-muted, #647079)}
.ns-404 ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem 2.5rem;
  grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr))}
.ns-404 li{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline;
  border-bottom:1px solid var(--ns-line);padding:.45rem .1rem}
.ns-404 li a{text-decoration:none;font-size:1rem;line-height:1.35}
.ns-404 li a:hover{text-decoration:underline}
.ns-404 li span{font-variant-numeric:tabular-nums;font-size:.85rem;
  color:var(--ns-muted, #647079)}
.ns-404 p{margin-top:1.6rem;font-size:.95rem}


/* Baner zgody ma osobny odnosnik do polityki cookies i do polityki
   prywatnosci, a u nas to jedna strona ("Polityka prywatnosci i cookies"),
   wiec w banerze wyswietlal sie dwa razy ten sam link obok siebie.
   Zostaje jeden; strona jest nadal linkowana i ze stopki. */
#cmplz-cookiebanner-container a.cmplz-link.privacy-statement{display:none}


/* Przelacznik netto/brutto: wtyczka spawlab-ceny przyciemnia grupe
   przezroczystoscia .85, przez co szary #647079 wychodzi jako #7b858d
   i daje kontrast 3,76 przy wymaganych 4,5 (kontrola axe). Zdejmujemy
   przezroczystosc; kolor zostaje ten sam, kontrast rosnie do 5,08. */
.spawlab-ceny span.grupa{opacity:1}

/* Napis tylko dla czytnikow ekranu. */
.ns-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* Motyw ciemny na stronach pisanych recznie: przyciski.
   Kontrola axe pokazala trzy przypadki ponizej progu 4,5:
   bialy napis na czerwonym #FF4A4F daje 3,30, a ciemny napis #08131F
   na niebieskim #2C6BFF daje 4,14. W motywie ciemnym akcent ma byc
   jasny, a napis na nim ciemny, wiec doprowadzamy oba do tej zasady.
   Reguly ze stron sa wpisane w tresc i stoja nizej w dokumencie,
   dlatego selektory musza byc mocniejsze. */
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .primary.btn{background:#6F9BFF;border-color:#6F9BFF;color:#08131F}
:root[data-theme="dark"] .spawlab-ceny .grupa a[aria-current] span{color:#0e1319}
:root[data-theme="dark"] .btn.red,
:root[data-theme="dark"] a.red,
:root[data-theme="dark"] .red.btn{background:#FF6B6F;border-color:#FF6B6F;color:#1A0405}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn.primary,
  :root:not([data-theme="light"]) .primary.btn{background:#6F9BFF;border-color:#6F9BFF;color:#08131F}
  :root:not([data-theme="light"]) .spawlab-ceny .grupa a[aria-current] span{color:#0e1319}
  :root:not([data-theme="light"]) .btn.red,
  :root:not([data-theme="light"]) a.red,
  :root:not([data-theme="light"]) .red.btn{background:#FF6B6F;border-color:#FF6B6F;color:#1A0405}
}


/* Suwak ceny: WooCommerce chowa dwa pola typu range o wysokosci zero
   (widoczny jest tylko rysowany pasek), wiec przy przejsciu klawiszem
   Tab nie bylo widac, ze zaznaczenie na nim stoi. Ramka na calym suwaku,
   gdy fokus jest w srodku. Kontrola klawiaturowa, 3 wrzesnia 2026. */
.wc-block-product-filter-price-slider__range:focus-within{
  outline:2px solid var(--ns-act);outline-offset:5px;border-radius:3px}


/* ---------- porownanie maszyn (/porownaj/) ---------- */
.ns-porownaj{padding-bottom:20px}
.ns-porownaj .ns-nota,.ns-porownaj .ns-pusto,.ns-porownaj .ns-uwaga{
  font-size:14px;color:var(--ns-muted);max-width:70ch}
.ns-porownaj .ns-uwaga{background:var(--ns-steel);border-left:3px solid var(--ns-line-2);
  padding:10px 14px;margin:14px 0 0}
.ns-porownaj code{font-size:13px;background:var(--ns-steel);padding:2px 5px;border-radius:2px}

/* Naglowek ma dokladnie te same tory co tabela pod nim: pierwsza kolumna
   na etykiety, potem po jednej na maszyne. Odstep robimy wewnetrznym
   marginesem komorki, a nie gap, bo tabela gapa nie zna i kolumny
   rozjechalyby sie o szerokosc przerw. */
.ns-por-glowa{display:grid;grid-template-columns:var(--etykieta,9rem) repeat(var(--ile),minmax(var(--kolumna,8.5rem),1fr));
  gap:0;margin:26px 0 0;align-items:end}
.ns-por-glowa::before{content:"";display:block}
.ns-por-karta{min-width:0;padding-right:14px;box-sizing:border-box}
.ns-por-foto{display:block;background:var(--ns-sunk);border-radius:3px;padding:8px;margin-bottom:10px}
/*
 * Zdjecia w porownywarce sa tylko do rozpoznania maszyny, nie do ogladania.
 * Przy kwadracie 1:1 blok naglowka rosl do 367 px i spychal tabele, czyli to,
 * po co ktos w ogole tu wchodzi. Nizszy kadr o stalej wysokosci wyrownuje
 * tez rozne proporcje zdjec producentow: jedne sa ciasne, inne tona w bieli.
 */
.ns-por-foto img{width:100%;height:130px;aspect-ratio:auto;object-fit:contain;display:block}
@media(max-width:760px){.ns-por-foto img{height:96px}}
.ns-por-marka{margin:0 0 3px;font-size:12px;color:var(--ns-muted);
  letter-spacing:.06em;text-transform:uppercase}
.ns-por-nazwa{margin:0 0 8px;font-size:15px;line-height:1.35;font-weight:700}
.ns-por-nazwa a{color:var(--ns-ink);text-decoration:none}
.ns-por-nazwa a:hover{color:var(--ns-act)}
.ns-por-cena{margin:0;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.ns-por-cena span{font-size:12.5px;font-weight:400;color:var(--ns-muted)}
.ns-por-wycena{font-size:15px;font-weight:600;color:var(--ns-ink-2)}

.ns-por-sterowanie{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  margin:30px 0 10px;font-size:14px;color:var(--ns-ink-2)}
.ns-por-sterowanie p{margin:0}
.ns-por-sterowanie label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  color:var(--ns-muted)}
.ns-por-sterowanie input{accent-color:var(--ns-act);width:16px;height:16px}

/*
 * Naglowek kolumn i tabela siedza w jednym przewijanym pojemniku i maja
 * te sama siatke, wiec kolumny stoja w jednej linii takze wtedy, gdy klient
 * przewinie zestawienie w bok na telefonie.
 */
.ns-por-obwoluta{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* szerokosc wynika z liczby maszyn, a nie z najdluzszej wartosci w tabeli:
   przy czterech maszynach to okolo 43rem, wiec na monitorze miesci sie bez
   przewijania, a na telefonie przewija sie w bok wewnatrz pojemnika */
.ns-por-plansza{min-width:calc(var(--etykieta,9rem) + var(--ile) * var(--kolumna,8.5rem))}
.ns-por-plansza .ns-por-glowa,
.ns-por-plansza .ns-por-tabela{width:100%}
.ns-por-tabela{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;table-layout:fixed}
.ns-por-tabela th[scope="row"]{width:var(--etykieta,9rem);text-align:left;font-weight:600;
  color:var(--ns-muted);vertical-align:top;padding:11px 14px 11px 0;
  border-top:1px solid var(--ns-line);box-sizing:border-box;overflow-wrap:anywhere}
.ns-por-tabela td{vertical-align:top;padding:11px 14px 11px 0;border-top:1px solid var(--ns-line);
  color:var(--ns-ink);box-sizing:border-box;overflow-wrap:anywhere}
.ns-por-tabela .ns-brak{color:var(--ns-muted);font-style:italic}
.ns-por-tabela tr.ns-wspolne{display:none}
.ns-por-tabela.ns-pokaz-wszystko tr.ns-wspolne{display:table-row}
.ns-por-tabela.ns-pokaz-wszystko tr.ns-wspolne td,
.ns-por-tabela.ns-pokaz-wszystko tr.ns-wspolne th{color:var(--ns-muted)}

@media(max-width:760px){
  /* Na waskim ekranie zestawienie przewija sie w bok wewnatrz swojego
     pojemnika, a nie rozpycha calej strony. Kolumna z etykietami jest
     wezsza, zeby przy pierwszym spojrzeniu bylo widac maszyne, a nie
     sam pasek nazw parametrow. */
  .ns-porownaj{--etykieta:6.5rem;--kolumna:8rem}
  .ns-por-tabela{font-size:13px}
  .ns-por-nazwa{font-size:14px}
}


/* Chipsy aktywnych filtrow (skladane w filtry.php, bo blok WooCommerce
   renderuje sie pusty). Klient widzi, co ma zaznaczone, i moze zdjac
   pojedynczy filtr albo wszystkie naraz. */
.ns-chipsy{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.ns-chipsy-tytul{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ns-muted);margin-right:2px}
.ns-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1;
  padding:6px 10px;border:1px solid var(--ns-line-2);border-radius:2px;
  background:var(--ns-paper);color:var(--ns-ink);text-decoration:none;
  transition:border-color .15s ease,color .15s ease}
.ns-chip:hover{border-color:var(--ns-act);color:var(--ns-act)}
.ns-chip b{font-weight:400;color:var(--ns-muted);font-size:15px;line-height:1}
.ns-chip:hover b{color:var(--ns-act)}
.ns-chip-czysc{border-style:dashed;color:var(--ns-muted)}

/* ---------- "Warto przeczytac": odnosniki do poradnika na karcie ---------- */
.ns-poradnik{border-top:1px solid var(--ns-line);margin:34px 0 0;padding:22px 0 0}
.ns-poradnik h2{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ns-muted);margin:0 0 12px}
.ns-poradnik ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ns-poradnik li{margin:0}
.ns-poradnik li a{display:block;font-size:14.5px;line-height:1.45;color:var(--ns-ink-2);
  text-decoration:none;padding:10px 12px;border:1px solid var(--ns-line);border-radius:2px;
  transition:border-color .15s ease,color .15s ease}
.ns-poradnik li a:hover{border-color:var(--ns-act);color:var(--ns-act)}
.ns-poradnik-wiecej{margin:12px 0 0;font-size:13.5px}
.ns-poradnik-wiecej a{color:var(--ns-act);text-decoration:none}
.ns-poradnik-wiecej a:hover{text-decoration:underline}

/* Formularz zapytania o dobor. Zastepuje odnosniki mailto. */
.ns-zap{max-width:52rem;margin:0;display:flex;flex-direction:column;gap:2px}
.ns-zap h3{margin:0 0 12px;font-size:1.25rem;line-height:1.3}
.ns-zap p{margin:0 0 14px}
.ns-zap-plot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ns-zap-para{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ns-zap label{display:block;font-size:.9rem;font-weight:600;color:var(--ns-ink-2);margin:0 0 5px}
.ns-zap input[type=text],.ns-zap input[type=tel],.ns-zap input[type=email],
.ns-zap select,.ns-zap textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;font:inherit;font-size:1rem;
  color:var(--ns-ink);background:var(--ns-paper);
  border:1px solid var(--ns-line-2);border-radius:6px}
.ns-zap textarea{resize:vertical;min-height:104px}
.ns-zap input:focus-visible,.ns-zap select:focus-visible,
.ns-zap textarea:focus-visible,.ns-zap button:focus-visible{
  outline:2px solid var(--ns-act);outline-offset:2px}
.ns-zap input[type=file]{font:inherit;font-size:.95rem;color:var(--ns-ink-2)}
.ns-zap-uwaga{display:block;font-size:.85rem;color:var(--ns-muted);margin:-8px 0 14px}
/*
 * Etykieta zgody nie moze byc siatka. Siatka robi z kazdego dziecka osobna
 * komorke, wiec odnosnik do polityki prywatnosci wyskakiwal do nowego wiersza,
 * a kropka za nim zostawala sama. Zwykly wciag wiszacy: pole wychodzi w lewo,
 * a zawijany tekst rowna sie pod pierwsza linia.
 */
.ns-zap-zgoda label{font-weight:400;font-size:.9rem;color:var(--ns-ink-2);
  display:block;line-height:1.5;padding-left:26px;text-indent:-26px}
.ns-zap-zgoda input{accent-color:var(--ns-act);margin-right:9px;vertical-align:-2px}
.ns-zap-akcja{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ns-zap button[type=submit]{
  padding:12px 22px;font:inherit;font-size:1rem;font-weight:600;cursor:pointer;
  color:var(--ns-act-tekst);background:var(--ns-act);border:0;border-radius:6px}
.ns-zap button[type=submit]:hover{background:#0847CB}
.ns-zap button[type=submit]:disabled{opacity:.6;cursor:default}
.ns-zap-stan{font-size:.9rem;color:var(--ns-hot)}
.ns-zap-ok{padding:16px 18px;border-radius:8px;
  background:var(--ns-act-soft);border:1px solid var(--ns-line-2);color:var(--ns-ink)}
@media(max-width:640px){.ns-zap-para{grid-template-columns:1fr}}

/*
 * Czcionki motywu przekierowane na nasze.
 *
 * Twenty Twenty-Five wnosi wlasne rodziny Manrope i Fira Code i ustawia
 * Manrope na wrapperach bloków, przez co naglowek i pasek kontaktowy
 * renderowaly sie inna czcionka niz reszta strony, a przegladarka pobierala
 * 52 kB pliku Manrope-VariableFont. Zamiast walczyc o specyficznosc,
 * podmieniamy same zmienne presetu: wszystko, co prosi o Manrope, dostaje
 * Archivo, a plik czcionki motywu przestaje byc w ogole potrzebny.
 */
:root{
  --wp--preset--font-family--manrope:Archivo,"Helvetica Neue",Arial,sans-serif;
  --wp--preset--font-family--fira-code:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace}

/* Trzy parametry pod cena na kafelku listy. Maja byc czytelne, nie krzykliwe. */
.ns-kafel-parametry{list-style:none;margin:7px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:4px}
.ns-kafel-parametry li{font-size:11.5px;line-height:1.3;color:var(--ns-ink-2);
  background:var(--ns-steel);border:1px solid var(--ns-line);
  border-radius:3px;padding:2px 6px;white-space:nowrap}
@media(max-width:480px){.ns-kafel-parametry li{font-size:11px;padding:2px 5px}}

/* Sekcja z formularzem na karcie produktu i na stronie kontaktu. */
.ns-zap-sekcja{margin:40px 0 8px;padding:28px 30px;
  background:var(--ns-sunk);border:1px solid var(--ns-line);border-radius:10px}
.ns-zap-sekcja h2{margin:0 0 10px;font-size:1.5rem;line-height:1.25}
.ns-zap-lead{margin:0 0 22px;max-width:52rem;color:var(--ns-ink-2);font-size:1rem;line-height:1.55}
.ns-zap-sekcja .ns-zap input[type=text],.ns-zap-sekcja .ns-zap input[type=tel],
.ns-zap-sekcja .ns-zap input[type=email],.ns-zap-sekcja .ns-zap select,
.ns-zap-sekcja .ns-zap textarea{background:var(--ns-paper)}
@media(max-width:640px){.ns-zap-sekcja{padding:22px 18px;margin:32px 0 8px;border-radius:8px}
  .ns-zap-sekcja h2{font-size:1.3rem}}


/* === audyt-dokumenty.css (audyt 2026-09-06) === */
/* Pakiet D: sekcja "Dokumenty" na karcie produktu i podpis pod galeria.
   Reguly do doklejenia na koniec sklep.css. Kolory ida z tych samych zmiennych
   co reszta sklepu (--ns-*), wiec motyw ciemny obsluguje sie sam i nie trzeba
   powtarzac blokow [data-theme] ani @media prefers-color-scheme. */

.ns-dok{border-top:1px solid var(--ns-line);margin:34px 0 0;padding:22px 0 0}
.ns-dok h2{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ns-muted);margin:0 0 12px}
.ns-dok-poz{margin:0 0 8px;font-size:14.5px;line-height:1.5;color:var(--ns-ink-2)}
.ns-dok-poz a{color:var(--ns-act);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px}
.ns-dok-poz a:hover{border-bottom-color:var(--ns-act)}
.ns-dok-poz a:focus-visible{outline:2px solid var(--ns-act);outline-offset:2px}
.ns-dok-meta{margin:0 0 4px;font-size:13px;line-height:1.5;color:var(--ns-muted);max-width:70ch}

/* Kotwica #formularz: punkt skoku nad formularzem zapytania, bez wlasnej
   wysokosci. Odstep u gory zostawia miejsce na pasek naglowka po skoku. */
.ns-dok-kotwica{display:block;height:0;overflow:hidden;scroll-margin-top:90px}

/* Podpis pod galeria kart, ktorych SKU dotyczy samego zrodla. */
.ns-dok-podpis{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ns-muted);max-width:60ch}

@media(max-width:640px){
  .ns-dok{margin-top:28px;padding-top:18px}
  .ns-dok-poz{font-size:14px}
}


/* === audyt-porownaj.css (audyt 2026-09-06) === */
/* ============================================================
   Porownywarka po audycie 2026-09-06 (CRO-06).
   Arkusz doklada sie do sklep.css i tylko na stronie /porownaj/.
   Zaleznosc: spawlab-sklep, wiec te reguly nadpisuja starsze.
   ============================================================ */

/* --- przelacznik "Pokaz tylko roznice" ---------------------------------

   sklep.css chowal wiersze wspolne na stale i pokazywal je klasa
   ns-pokaz-wszystko. Teraz decyduje pole wyboru: klasa ns-tylko-roznice
   dla przegladarek ze skryptem, selektor :has dla tych bez skryptu.
   Kolejnosc regul ma znaczenie, ostatnia wygrywa przy rownej wadze. */
.ns-por-tabela tr.ns-wspolne{display:table-row}
.ns-por-tabela.ns-tylko-roznice tr.ns-wspolne{display:none}
.ns-por-sterowanie:has(input:not(:checked)) ~ .ns-por-obwoluta .ns-por-tabela tr.ns-wspolne{
  display:table-row}
.ns-por-tabela tr.ns-wspolne td,
.ns-por-tabela tr.ns-wspolne th{color:var(--ns-muted,#647079)}

.ns-por-przelacznik{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13.5px;color:var(--ns-ink-2,#3B4750);user-select:none}
.ns-por-przelacznik input{accent-color:var(--ns-act,#0B54F0);width:16px;height:16px;margin:0}

/* --- naglowek kolumny: numer katalogowy i przejscie do karty --- */
.ns-por-sku{margin:0 0 6px;font-family:var(--ns-mono,ui-monospace,monospace);
  font-size:11.5px;letter-spacing:.02em;color:var(--ns-muted,#647079)}
.ns-por-do-karty{margin:9px 0 0}
.ns-por-do-karty a{display:inline-block;font-size:13px;font-weight:700;line-height:1;
  padding:8px 12px;border:1px solid var(--ns-line-2,#C2CCD4);border-radius:2px;
  color:var(--ns-ink,#0E1418);text-decoration:none}
.ns-por-do-karty a:hover{border-color:var(--ns-act,#0B54F0);color:var(--ns-act,#0B54F0)}

/* --- przejscie do zapytania z lista porownywanych maszyn --- */
.ns-por-akcje-dol{margin:20px 0 0}
.ns-por-zapytaj{display:inline-block;background:var(--ns-act,#0B54F0);
  color:var(--ns-act-tekst,#FFFFFF);text-decoration:none;font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:2px}
.ns-por-zapytaj:hover{background:var(--ns-ink,#0E1418);color:var(--ns-act-tekst,#FFFFFF)}
.ns-por-akcje-info{margin:8px 0 0;font-size:12.5px;color:var(--ns-muted,#647079)}

/* --- brak danych: informacja, nie pusta komorka --- */
.ns-por-tabela .ns-brak{color:var(--ns-muted,#647079);font-style:italic}

/* --- pierwsza kolumna trzyma sie lewej krawedzi przy przewijaniu w bok ---

   Pojemnik przewija sie w poziomie, wiec komorka z nazwa parametru moze
   byc do niego przyklejona. Przy czterech maszynach na waskim ekranie bez
   tego po dwoch przesunieciach nie wiadomo juz, ktory to wiersz. */
.ns-por-glowa::before{position:sticky;left:0;z-index:4;
  background:var(--ns-paper,#FFFFFF)}
.ns-por-tabela th[scope="row"]{position:sticky;left:0;z-index:2;
  background:var(--ns-paper,#FFFFFF);box-shadow:1px 0 0 var(--ns-line,#DCE2E8)}

/* --- telefon: naglowek z nazwami modeli zostaje na wierzchu ---

   Zeby naglowek mogl sie przykleic do gory, pojemnik musi miec wlasna
   wysokosc i wlasne przewijanie. Zdjecia w naglowku schodza do 56 px,
   inaczej sam naglowek zajalby polowe ekranu. */
@media(max-width:760px){
  .ns-por-obwoluta{max-height:78vh;overflow:auto;overscroll-behavior:contain}
  .ns-por-glowa{position:sticky;top:0;z-index:3;
    background:var(--ns-paper,#FFFFFF);box-shadow:0 1px 0 var(--ns-line,#DCE2E8)}
  .ns-por-foto img{height:56px}
  .ns-por-foto{padding:5px;margin-bottom:7px}
  .ns-por-nazwa{font-size:13.5px;margin-bottom:5px}
  .ns-por-cena{font-size:15px}
  .ns-por-sku{font-size:11px;margin-bottom:4px}
  .ns-por-do-karty a{padding:6px 9px;font-size:12px}
}

/* Klawiatura: pojemnik jest obszarem przewijanym, wiec musi byc widoczny
   punkt skupienia, gdy klient dojdzie do niego tabulatorem. */
.ns-por-obwoluta:focus-visible{outline:2px solid var(--ns-act,#0B54F0);outline-offset:2px}


/* === audyt-rodziny.css (audyt 2026-09-06) === */
/*
 * Wstep rodziny nad lista i tabela roznic wariantow pod lista.
 * Zmienne i konwencje z sklep.css: --ns-ink, --ns-line, --ns-act, --ns-muted.
 * Zestawienie przewija sie w bok wewnatrz swojego pojemnika, jak porownywarka,
 * zeby przy 24 wersjach nie rozpychalo calej strony na telefonie.
 */

.ns-rodzina-wstep{max-width:78ch;margin:0 0 22px}
.ns-rodzina-wstep p{margin:0;font-size:16px;line-height:1.62;color:var(--ns-ink-2,#3b4750)}

.ns-rodzina{margin:38px 0 0;padding:26px 0 0;border-top:1px solid var(--ns-line,#dce2e8)}
.ns-rodzina-tytul{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;
  color:var(--ns-ink,#0e1418)}
.ns-rodzina-podpis{caption-side:top;text-align:left;font-size:13px;color:var(--ns-muted,#647079);
  padding:0 0 12px}

.ns-rodzina-obwoluta{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ns-rodzina-tabela{width:100%;min-width:56rem;border-collapse:collapse;font-size:14px;line-height:1.5}
.ns-rodzina-tabela th,
.ns-rodzina-tabela td{vertical-align:top;padding:10px 14px 10px 0;text-align:left;
  border-top:1px solid var(--ns-line,#dce2e8);color:var(--ns-ink,#0e1418);overflow-wrap:anywhere}
.ns-rodzina-tabela thead th{font-weight:600;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ns-muted,#647079);border-top:0;
  border-bottom:1px solid var(--ns-line-2,#c2ccd4);padding-bottom:8px}
.ns-rodzina-tabela tbody tr:hover td,
.ns-rodzina-tabela tbody tr:hover th{background:var(--ns-sunk,#f7f9fb)}

.ns-rodzina-model{font-weight:600;min-width:16rem}
.ns-rodzina-model a{color:var(--ns-ink,#0e1418);text-decoration:none;
  border-bottom:1px solid var(--ns-line-2,#c2ccd4)}
.ns-rodzina-model a:hover{color:var(--ns-act,#0b54f0);border-bottom-color:var(--ns-act,#0b54f0)}
.ns-rodzina-sku{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  font-weight:400;letter-spacing:.02em;color:var(--ns-muted,#647079);margin-top:3px}

.ns-rodzina-cena{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.ns-rodzina-sprawdz{color:var(--ns-act,#0b54f0);text-decoration:none;font-weight:400}
.ns-rodzina-sprawdz:hover{text-decoration:underline}
.ns-rodzina .ns-brak{color:var(--ns-muted,#647079);font-style:italic;font-weight:400}
.ns-rodzina-zrodlo{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ns-muted,#647079)}

@media(max-width:760px){
  .ns-rodzina-tabela{font-size:13px;min-width:48rem}
  .ns-rodzina-model{min-width:13rem}
  .ns-rodzina-wstep p{font-size:15.5px}
}

@media print{
  .ns-rodzina-obwoluta{overflow-x:visible}
  .ns-rodzina-tabela{min-width:0;font-size:10pt}
  .ns-rodzina-tabela tr{break-inside:avoid}
}

/*
 * Motyw ciemny nie potrzebuje osobnego bloku: wszystkie kolory biora sie ze
 * zmiennych --ns-*, ktore sklep.css podmienia i dla data-theme="dark", i dla
 * prefers-color-scheme: dark. Wartosci po przecinku w var() to tylko zapas na
 * wypadek, gdyby sklep.css sie nie zaladowal.
 */