@import url("_fonty.css");

/* ============================================================
   WOZIMEX — arkusz glowny
   Barwy zmierzone w materiale klienta: zolc i czerwien z pasa
   „autoryzowany dystrybutor Shell", grafit z jego paska nawigacji.
   ============================================================ */

:root {
  /* Barwy */
  --wz-bialy:      #FFFFFF;
  --wz-kosc:       #F3F2EF;
  --wz-kosc-ciemna:#E7E5E0;
  --wz-grafit:     #1C1C1A;
  --wz-grafit-2:   #2E2D2A;
  --wz-tekst:      #232320;
  --wz-tekst-2:    #5A5956;
  --wz-zolc:       #F7D117;
  --wz-zolc-ciemna:#D9B408;
  --wz-czerwien:   #D20D00;
  --wz-czerwien-2: #A80A00;
  --wz-kreska:     #D8D5CE;   /* cienkie linie WEWNATRZ: wiersze tabeli, listy */
  /* Obramowanie ELEMENTU (przycisk, pole, karta, kafel) musi byc widoczne:
     3,67:1 na bieli i 3,28:1 na kosci przy progu 3:1. Poprzednie #D8D5CE
     dawalo 1,47:1 i bramka niewidoczne.py zglaszala 67 elementow. */
  --wz-obrys:      #8A857C;
  --wz-kreska-ciemna: #3D3B37;

  /* Odstepy, siatka 8 px */
  --wz-1: 0.25rem;
  --wz-2: 0.5rem;
  --wz-3: 0.75rem;
  --wz-4: 1rem;
  --wz-5: 1.25rem;
  --wz-6: 1.5rem;
  --wz-8: 2rem;
  --wz-10: 2.5rem;
  --wz-12: 3rem;
  --wz-16: 4rem;
  --wz-20: 5rem;

  --wz-sekcja-s: clamp(2.5rem, 5vw, 3.5rem);
  --wz-sekcja-m: clamp(3.25rem, 7vw, 5rem);
  --wz-sekcja-l: clamp(4rem, 9vw, 6.5rem);

  /* Margines boczny rosnie z oknem: przy 1440 px tresc miala tylko 20 px
     zapasu do krawedzi i menu ocieralo sie o brzeg ekranu. Strona-wzorzec
     (arlek.pl) trzyma kontener na 1286 px, my na 1344.                   */
  --wz-px: clamp(1.25rem, 3vw, 3rem);

  /* Szerokosci: cztery i ani jednej wiecej */
  --wz-content: min(100% - 2 * var(--wz-px), 75rem);
  --wz-wide:    min(100% - 2 * var(--wz-px), 84rem);

  /* Typografia. H1 maks. 42 px na komputerze — skala wizytowkowa. */
  --wz-h1: clamp(1.875rem, 1.55rem + 1.45vw, 2.625rem);
  --wz-h2: clamp(1.5rem, 1.31rem + 0.85vw, 2rem);
  --wz-h3: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem);
  --wz-h4: 1.0625rem;
  --wz-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --wz-mala: 0.875rem;
  --wz-mikro: 0.78125rem;

  --wz-display: "Archivo", "Archivo zapasowy", Arial, sans-serif;
  --wz-tresc: "IBM Plex Sans", "IBM Plex Sans zapasowy", Arial, sans-serif;

  --wz-r-s: 3px;
  --wz-r-m: 6px;
  --wz-r-l: 10px;

  --wz-cien-s: 0 1px 2px rgba(28, 28, 26, 0.08);
  --wz-cien-m: 0 4px 14px rgba(28, 28, 26, 0.09);
  --wz-cien-l: 0 12px 32px rgba(28, 28, 26, 0.13);

  --wz-czas: 180ms;
  --wz-krzywa: cubic-bezier(0.25, 1, 0.5, 1);

  --wz-naglowek: 84px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wz-bialy);
  color: var(--wz-tekst);
  font-family: var(--wz-tresc);
  font-size: var(--wz-body);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--wz-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--wz-4);
  text-wrap: balance;
}
h1 { font-size: var(--wz-h1); }
h2 { font-size: var(--wz-h2); }
h3 { font-size: var(--wz-h3); }
h4 { font-size: var(--wz-h4); font-weight: 600; }
p  { margin: 0 0 var(--wz-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--wz-czerwien);
  outline-offset: 2px;
  border-radius: 2px;
}

.wz-tylko-czytnik {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skok do tresci to jedyny element schowany, ktory ma byc KLIKALNY —
   po zlapaniu fokusu klawiatura wchodzi na strone jako normalny przycisk.
   Pole 1x1 px nie nadaje sie do tapniecia, a pomiar slusznie to wytykal. */
a.wz-tylko-czytnik {
  left: -9999px;
  width: auto; height: auto; min-height: 44px;
  clip: auto; overflow: visible; margin: 0;
  display: inline-flex; align-items: center;
  padding: 0 var(--wz-5);
  background: var(--wz-grafit);
  color: #fff;
  text-decoration: none;
  z-index: 1000;
}
a.wz-tylko-czytnik:focus-visible,
a.wz-tylko-czytnik:focus { left: var(--wz-px); top: var(--wz-3); }

/* ---------- Kontenery ---------- */
.wz-kontener       { width: var(--wz-content); margin-inline: auto; }
.wz-kontener--szer { width: var(--wz-wide);    margin-inline: auto; }

/* ---------- Sekcje i ich rozdzielenie ---------- */
.wz-sekcja        { padding-block: var(--wz-sekcja-m); }
.wz-sekcja--waska { padding-block: var(--wz-sekcja-s); }
.wz-sekcja--duza  { padding-block: var(--wz-sekcja-l); }

.wz-sekcja--jasna  { background: var(--wz-bialy); }
.wz-sekcja--kosc   { background: var(--wz-kosc); }

/* Ciemna sekcja: przeskok kontrastu 17:1 wobec bieli. To jest granica,
   ktora widac bez wpatrywania sie. */
.wz-sekcja--ciemna {
  background: var(--wz-grafit);
  color: #EDEBE6;
}
.wz-sekcja--ciemna h1,
.wz-sekcja--ciemna h2,
.wz-sekcja--ciemna h3 { color: #FFFFFF; }

/* Element z wlasnym tlem w ciemnej sekcji ma WLASNE barwy tekstu.
   Bez tego regula „w ciemnej sekcji naglowki sa jasne" wchodzi do wnetrza
   jasnej karty i tytul ginie na wlasnym tle. */
.wz-sekcja--ciemna .wz-karta,
.wz-sekcja--ciemna .wz-karta h3,
.wz-sekcja--ciemna .wz-karta h4 { color: var(--wz-tekst); }

.wz-sekcja__nad {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wz-czerwien);
  margin: 0 0 var(--wz-3);
}
.wz-sekcja--ciemna .wz-sekcja__nad { color: var(--wz-zolc); }

.wz-sekcja__lead { font-size: 1.0625rem; color: var(--wz-tekst-2); }
.wz-sekcja--ciemna .wz-sekcja__lead { color: #C9C6BF; }

.wz-sekcja__glowa {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wz-4) var(--wz-8);
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--wz-8);
}

/* ---------- Przyciski ---------- */
.wz-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wz-2);
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--wz-r-m);
  font-family: var(--wz-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wz-czas) var(--wz-krzywa),
              color var(--wz-czas) var(--wz-krzywa),
              border-color var(--wz-czas) var(--wz-krzywa);
}
.wz-btn--glowny { background: var(--wz-czerwien); color: #fff; }
.wz-btn--glowny:hover, .wz-btn--glowny:focus-visible { background: var(--wz-czerwien-2); }

.wz-btn--zolty { background: var(--wz-zolc); color: var(--wz-grafit); }
.wz-btn--zolty:hover, .wz-btn--zolty:focus-visible { background: var(--wz-zolc-ciemna); }

.wz-btn--obrys { border-color: var(--wz-kreska); background: transparent; color: var(--wz-tekst); }
.wz-btn--obrys:hover, .wz-btn--obrys:focus-visible { border-color: var(--wz-grafit); background: var(--wz-kosc); }

.wz-sekcja--ciemna .wz-btn--obrys { border-color: var(--wz-kreska-ciemna); color: #EDEBE6; }
.wz-sekcja--ciemna .wz-btn--obrys:hover { border-color: var(--wz-zolc); background: rgba(247, 209, 23, 0.12); color: #fff; }

/* ============================================================
   NAGLOWEK
   ============================================================ */
.wz-naglowek {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--wz-bialy);
  border-bottom: 1px solid var(--wz-kreska);
  transition: box-shadow var(--wz-czas) var(--wz-krzywa);
}
.wz-naglowek.jest-przewiniety { box-shadow: var(--wz-cien-m); }

.wz-naglowek__rzad {
  display: flex;
  align-items: center;
  gap: var(--wz-6);
  min-height: var(--wz-naglowek);
}
.wz-naglowek__logo { display: block; flex: 0 0 auto; }
.wz-naglowek__logo img { height: 38px; width: auto; }

.wz-menu { margin-left: auto; }
.wz-menu ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Menu to NAPISY. Bez tla, bez obwodki, bez podkreslenia. Po najechaniu
   zmienia sie wylacznie barwa napisu i nic nie zmienia szerokosci. */
.wz-menu a {
  display: inline-block;
  padding: 0.35rem 0;
  font-family: var(--wz-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--wz-tekst);
  text-decoration: none;
  transition: color var(--wz-czas) var(--wz-krzywa);
}
.wz-menu a:hover,
.wz-menu a:focus-visible { color: var(--wz-czerwien); }
.wz-menu .current-menu-item > a,
.wz-menu .current_page_item > a { color: var(--wz-czerwien); }

.wz-naglowek__tel {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  text-decoration: none;
  flex: 0 0 auto;
}
.wz-naglowek__tel span {
  font-size: var(--wz-mikro);
  color: var(--wz-tekst-2);
  letter-spacing: 0.04em;
}
.wz-naglowek__tel strong {
  font-family: var(--wz-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wz-tekst);
  transition: color var(--wz-czas) var(--wz-krzywa);
}
.wz-naglowek__tel:hover strong { color: var(--wz-czerwien); }

.wz-hamburger {
  display: none;
  width: 46px; height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-m);
  background: transparent;
  cursor: pointer;
}
.wz-hamburger span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--wz-tekst);
  transition: transform var(--wz-czas) var(--wz-krzywa), opacity var(--wz-czas);
}
.wz-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wz-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wz-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Pas dystrybutora: zolty, przez cala szerokosc okna, jeden na strone. */
.wz-pas-shell {
  background: var(--wz-zolc);
  color: var(--wz-grafit);
}
.wz-pas-shell__rzad {
  display: flex;
  align-items: center;
  gap: var(--wz-4);
  min-height: 46px;
  padding-block: var(--wz-2);
}
.wz-pas-shell__muszla { height: 28px; width: auto; flex: 0 0 auto; }
.wz-pas-shell__napis {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.wz-pas-shell__dodatek {
  margin-left: auto;
  font-size: var(--wz-mala);
  font-weight: 500;
}

/* ---------- Menu na telefonie ---------- */
.wz-menu-mobilne {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: var(--wz-grafit);
  color: #fff;
  transform: translateX(100%);
  transition: transform 260ms var(--wz-krzywa);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wz-menu-mobilne.jest-otwarte { transform: translateX(0); }
.wz-menu-mobilne__glowa {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--wz-naglowek);
  padding-inline: var(--wz-px);
  border-bottom: 1px solid var(--wz-kreska-ciemna);
}
.wz-menu-mobilne__zamknij {
  width: 46px; height: 46px;
  border: 1px solid var(--wz-kreska-ciemna);
  border-radius: var(--wz-r-m);
  background: transparent; color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.wz-menu-mobilne ul { list-style: none; margin: 0; padding: var(--wz-4) var(--wz-px); }
.wz-menu-mobilne li + li { border-top: 1px solid var(--wz-kreska-ciemna); }
.wz-menu-mobilne a {
  display: block;
  padding: 1rem 0;
  font-family: var(--wz-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}
.wz-menu-mobilne a:hover { color: var(--wz-zolc); }
.wz-menu-mobilne__stopka { margin-top: auto; padding: var(--wz-6) var(--wz-px) var(--wz-10); }
body.menu-otwarte { overflow: hidden; }

/* ============================================================
   PIERWSZY EKRAN
   ============================================================ */
.wz-hero {
  position: relative;
  background: var(--wz-kosc);
  border-bottom: 1px solid var(--wz-kreska);
  overflow: hidden;
}
.wz-hero__siatka {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--wz-8), 5vw, var(--wz-16));
  align-items: center;
  min-height: 460px;
  padding-block: var(--wz-sekcja-m);
}
.wz-hero__nad {
  display: inline-flex;
  align-items: center;
  gap: var(--wz-2);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--wz-zolc);
  color: var(--wz-grafit);
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--wz-5);
}
.wz-hero h1 { margin-bottom: var(--wz-5); }
.wz-hero__lead { font-size: 1.0625rem; color: var(--wz-tekst-2); margin-bottom: var(--wz-6); }
.wz-hero__akcje { display: flex; flex-wrap: wrap; gap: var(--wz-3); margin-bottom: var(--wz-8); }

.wz-hero__liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--wz-5);
  padding-top: var(--wz-6);
  border-top: 1px solid var(--wz-kreska);
}
.wz-liczba strong {
  display: block;
  font-family: var(--wz-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wz-grafit);
}
.wz-liczba span { font-size: var(--wz-mala); color: var(--wz-tekst-2); }

.wz-hero__obraz { position: relative; }
.wz-hero__obraz img { border-radius: var(--wz-r-l); }
.wz-hero__pudlo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wz-4);
}
.wz-hero__pudlo figure {
  margin: 0;
  padding: var(--wz-5);
  background: var(--wz-bialy);
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-l);
  text-align: center;
}
.wz-hero__pudlo img { margin-inline: auto; max-height: 190px; width: auto; }
.wz-hero__pudlo figcaption {
  margin-top: var(--wz-3);
  font-size: var(--wz-mikro);
  font-weight: 600;
  color: var(--wz-tekst-2);
}

/* ============================================================
   KARTY, SIATKI
   ============================================================ */
.wz-karta {
  background: var(--wz-bialy);
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-l);
  padding: var(--wz-6);
  transition: border-color var(--wz-czas) var(--wz-krzywa),
              box-shadow var(--wz-czas) var(--wz-krzywa),
              transform var(--wz-czas) var(--wz-krzywa);
}
a.wz-karta { text-decoration: none; color: inherit; display: block; }
a.wz-karta:hover, a.wz-karta:focus-visible {
  border-color: var(--wz-grafit);
  box-shadow: var(--wz-cien-m);
  transform: translateY(-2px);
}

.wz-siatka { display: grid; gap: var(--wz-5); }
.wz-siatka--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wz-siatka--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wz-siatka--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Kategorie: jedna wyrozniona szerokim pasem, reszta lista z numerami.
   Szesc rownych kafli czyta sie jak szablon. */
.wz-kategorie { display: grid; gap: var(--wz-5); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.wz-kategoria-glowna {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--wz-8);
  padding: var(--wz-8);
  background: var(--wz-grafit);
  color: #fff;
  border-radius: var(--wz-r-l);
  text-decoration: none;
  transition: background var(--wz-czas) var(--wz-krzywa);
}
.wz-kategoria-glowna:hover { background: var(--wz-grafit-2); }
.wz-kategoria-glowna h3 { color: #fff; font-size: 1.5rem; margin-bottom: var(--wz-2); }
.wz-kategoria-glowna p { color: #C9C6BF; }
.wz-kategoria-glowna__ile {
  font-family: var(--wz-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wz-zolc);
}

.wz-lista-kategorii { list-style: none; margin: 0; padding: 0; }
.wz-lista-kategorii li + li { border-top: 1px solid var(--wz-kreska); }
.wz-lista-kategorii a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--wz-4);
  align-items: baseline;
  padding: 0.95rem 0;
  text-decoration: none;
  transition: color var(--wz-czas) var(--wz-krzywa);
}
.wz-lista-kategorii a:hover { color: var(--wz-czerwien); }
.wz-lista-kategorii__nr {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  color: var(--wz-tekst-2);
}
.wz-lista-kategorii__nazwa { font-family: var(--wz-display); font-weight: 600; }
.wz-lista-kategorii__ile { font-size: var(--wz-mala); color: var(--wz-tekst-2); }

/* ---------- Pasmo marek Shell, wychodzi poza kontener ---------- */
.wz-marki { overflow: hidden; border-block: 1px solid var(--wz-kreska); background: var(--wz-bialy); }
.wz-marki__tor {
  display: flex;
  align-items: center;
  gap: clamp(var(--wz-8), 5vw, var(--wz-16));
  padding-block: var(--wz-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.wz-marki__tor::-webkit-scrollbar { display: none; }
.wz-marki__tor img { height: 30px; width: auto; flex: 0 0 auto; }

/* ============================================================
   KATALOG
   ============================================================ */
.wz-katalog { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--wz-8); align-items: start; }

.wz-filtry {
  position: sticky;
  top: calc(var(--wz-naglowek) + var(--wz-4));
  padding: var(--wz-5);
  background: var(--wz-kosc);
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-l);
}
.wz-filtry__grupa + .wz-filtry__grupa { margin-top: var(--wz-6); padding-top: var(--wz-6); border-top: 1px solid var(--wz-kreska); }
.wz-filtry__tytul {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wz-tekst-2);
  margin: 0 0 var(--wz-3);
}
.wz-filtry ul { list-style: none; margin: 0; padding: 0; }
.wz-filtry li + li { margin-top: 0.15rem; }
.wz-filtry label {
  display: flex;
  align-items: flex-start;
  gap: var(--wz-2);
  min-height: 34px;
  padding: 0.3rem 0;
  font-size: var(--wz-mala);
  line-height: 1.45;
  cursor: pointer;
}
.wz-filtry input[type="checkbox"] { margin-top: 0.28rem; accent-color: var(--wz-czerwien); width: 16px; height: 16px; }
.wz-filtry__ile { margin-left: auto; color: var(--wz-tekst-2); font-size: var(--wz-mikro); }

.wz-szukajka { position: relative; margin-bottom: var(--wz-5); }
.wz-szukajka input {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-m);
  background: var(--wz-bialy);
  font-family: inherit;
  font-size: 1rem;
  color: var(--wz-tekst);
}
.wz-szukajka input:focus { border-color: var(--wz-grafit); outline: none; box-shadow: 0 0 0 3px rgba(210, 13, 0, 0.15); }
.wz-szukajka__ikona { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--wz-tekst-2); }

.wz-katalog__pasek {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wz-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--wz-5);
  padding-bottom: var(--wz-4);
  border-bottom: 1px solid var(--wz-kreska);
}
.wz-katalog__ile { font-size: var(--wz-mala); color: var(--wz-tekst-2); margin: 0; }
.wz-katalog__ile strong { color: var(--wz-tekst); font-weight: 600; }

.wz-produkty { display: grid; gap: var(--wz-5); grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.wz-produkt {
  display: flex;
  flex-direction: column;
  background: var(--wz-bialy);
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--wz-czas) var(--wz-krzywa), box-shadow var(--wz-czas) var(--wz-krzywa);
}
.wz-produkt:hover, .wz-produkt:focus-visible { border-color: var(--wz-grafit); box-shadow: var(--wz-cien-m); }
.wz-produkt__foto {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--wz-4);
  background: var(--wz-kosc);
  border-bottom: 1px solid var(--wz-kreska);
}
.wz-produkt__foto img { max-height: 100%; width: auto; object-fit: contain; }
.wz-produkt__foto--pusta { color: var(--wz-tekst-2); font-size: var(--wz-mikro); letter-spacing: 0.08em; text-transform: uppercase; }
.wz-produkt__tresc { display: flex; flex-direction: column; gap: var(--wz-2); padding: var(--wz-4); flex: 1 1 auto; }
.wz-produkt__kat { font-size: var(--wz-mikro); color: var(--wz-tekst-2); letter-spacing: 0.03em; }
.wz-produkt__nazwa { font-family: var(--wz-display); font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0; }
.wz-produkt__opak { margin-top: auto; padding-top: var(--wz-2); font-size: var(--wz-mikro); color: var(--wz-tekst-2); }
.wz-produkt__opak strong { color: var(--wz-tekst); font-weight: 600; }

.wz-brak {
  padding: var(--wz-12) var(--wz-6);
  text-align: center;
  border: 1px dashed var(--wz-kreska);
  border-radius: var(--wz-r-l);
  color: var(--wz-tekst-2);
}

.wz-strony { display: flex; flex-wrap: wrap; gap: var(--wz-2); margin-top: var(--wz-8); }
.wz-strony .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; padding: 0 0.6rem;
  border: 1px solid var(--wz-kreska); border-radius: var(--wz-r-m);
  text-decoration: none; font-family: var(--wz-display); font-weight: 600; font-size: 0.9375rem;
  transition: border-color var(--wz-czas), background var(--wz-czas);
}
.wz-strony .page-numbers:hover { border-color: var(--wz-grafit); }
.wz-strony .page-numbers.current { background: var(--wz-grafit); border-color: var(--wz-grafit); color: #fff; }

/* ---------- Karta produktu ---------- */
.wz-karta-produktu { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(var(--wz-6), 4vw, var(--wz-12)); align-items: start; }
.wz-karta-produktu__foto {
  display: flex; align-items: center; justify-content: center;
  padding: var(--wz-8);
  background: var(--wz-kosc);
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-l);
  min-height: 320px;
}
.wz-karta-produktu__foto img { max-height: 420px; width: auto; }

.wz-tabela { width: 100%; border-collapse: collapse; font-size: var(--wz-mala); }
.wz-tabela th, .wz-tabela td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--wz-kreska); vertical-align: top; }
.wz-tabela th { width: 58%; font-weight: 500; color: var(--wz-tekst-2); }
.wz-tabela td { font-weight: 600; font-variant-numeric: tabular-nums; }
.wz-tabela tr:last-child th, .wz-tabela tr:last-child td { border-bottom: 0; }
.wz-tabela-otoczka { overflow-x: auto; border: 1px solid var(--wz-kreska); border-radius: var(--wz-r-l); }

.wz-plakietki { display: flex; flex-wrap: wrap; gap: var(--wz-2); margin: 0 0 var(--wz-5); padding: 0; list-style: none; }
.wz-plakietka {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--wz-kreska);
  border-radius: 999px;
  background: var(--wz-kosc);
  font-size: var(--wz-mikro);
  font-weight: 600;
  color: var(--wz-tekst-2);
}
.wz-plakietka--zolta { background: var(--wz-zolc); border-color: var(--wz-zolc-ciemna); color: var(--wz-grafit); }

.wz-okruszki { padding-block: var(--wz-4); font-size: var(--wz-mikro); color: var(--wz-tekst-2); }
.wz-okruszki ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.wz-okruszki li::after { content: "/"; margin-left: 0.4rem; color: var(--wz-kreska); }
.wz-okruszki li:last-child::after { content: ""; }
.wz-okruszki a { text-decoration: none; }
.wz-okruszki a:hover { text-decoration: underline; }

/* ============================================================
   ODDZIALY, KONTAKT, FORMULARZ
   ============================================================ */
.wz-oddzial { display: flex; flex-direction: column; gap: var(--wz-2); }
.wz-oddzial h3 { margin-bottom: var(--wz-1); }
.wz-oddzial__rola { font-size: var(--wz-mikro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wz-czerwien); font-weight: 700; }
.wz-oddzial p { font-size: var(--wz-mala); margin: 0; }
.wz-oddzial a { text-decoration: none; }
.wz-oddzial a:hover { text-decoration: underline; }

.wz-formularz { display: grid; gap: var(--wz-4); }
.wz-pole { display: grid; gap: var(--wz-2); }
.wz-pole label { font-size: var(--wz-mala); font-weight: 600; }
.wz-pole input, .wz-pole textarea, .wz-pole select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-m);
  background: var(--wz-bialy);
  font-family: inherit;
  font-size: 1rem;
  color: var(--wz-tekst);
}
.wz-pole textarea { min-height: 130px; resize: vertical; }
.wz-pole input:focus, .wz-pole textarea:focus, .wz-pole select:focus {
  border-color: var(--wz-grafit); outline: none; box-shadow: 0 0 0 3px rgba(210, 13, 0, 0.15);
}
.wz-zgoda { display: flex; gap: var(--wz-3); align-items: flex-start; font-size: var(--wz-mikro); color: var(--wz-tekst-2); line-height: 1.5; }
.wz-zgoda input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--wz-czerwien); flex: 0 0 auto; }
.wz-miodek { position: absolute; left: -9999px; }
.wz-odpowiedz { padding: var(--wz-4); border-radius: var(--wz-r-m); font-size: var(--wz-mala); }
.wz-odpowiedz--ok { background: #E8F3EA; color: #1D5B2A; }
.wz-odpowiedz--blad { background: #FCE9E7; color: #8C1006; }

/* ============================================================
   STOPKA
   ============================================================ */
.wz-stopka { background: var(--wz-grafit); color: #C9C6BF; padding-block: var(--wz-12) var(--wz-6); }
.wz-stopka a { color: #C9C6BF; text-decoration: none; }
.wz-stopka a:hover { color: var(--wz-zolc); text-decoration: underline; }
.wz-stopka h4 { color: #fff; font-size: var(--wz-mikro); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--wz-4); }
.wz-stopka__siatka { display: grid; gap: var(--wz-8); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wz-stopka ul { list-style: none; margin: 0; padding: 0; font-size: var(--wz-mala); }
.wz-stopka li + li { margin-top: var(--wz-2); }
.wz-stopka__logo img { height: 34px; width: auto; }
.wz-stopka__dol {
  display: flex; flex-wrap: wrap; gap: var(--wz-3) var(--wz-6);
  justify-content: space-between; align-items: center;
  margin-top: var(--wz-10); padding-top: var(--wz-5);
  border-top: 1px solid var(--wz-kreska-ciemna);
  font-size: var(--wz-mikro);
}

/* ---------- Telefon na komorce ---------- */
.wz-tel-plywa {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--wz-czerwien);
  color: #fff;
  box-shadow: var(--wz-cien-l);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 240ms var(--wz-krzywa), transform 240ms var(--wz-krzywa);
}
.wz-tel-plywa.jest-widoczny { opacity: 1; transform: translateY(0); }

/* ---------- Ciasteczka: mala karta w rogu, nie wstega ---------- */
.wz-cookies {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 92;
  width: min(24rem, calc(100vw - 32px));
  padding: var(--wz-5);
  background: var(--wz-bialy);
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-l);
  box-shadow: var(--wz-cien-l);
  font-size: var(--wz-mala);
  transform: translateY(120%);
  transition: transform 280ms var(--wz-krzywa);
}
.wz-cookies.jest-widoczny { transform: translateY(0); }
.wz-cookies p { margin-bottom: var(--wz-4); color: var(--wz-tekst-2); }
.wz-cookies__akcje { display: flex; flex-wrap: wrap; gap: var(--wz-2); }
.wz-cookies .wz-btn { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--wz-mala); }

/* ---------- Wejscia sekcji ----------
   Tresc jest widoczna domyslnie. Chowa ja dopiero klasa `js-anim`, ktora
   skrypt dokłada wtedy, gdy ma dzialajacego obserwatora. Kazda usterka
   skryptu konczy sie odsloniona strona, nie pusta.                      */
.js-anim .wz-anim { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--wz-krzywa), transform 420ms var(--wz-krzywa); }
.js-anim .wz-anim.jest-widoczny { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .wz-anim { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PROG 1200 / 1024 / 768 / 600
   ============================================================ */
@media (max-width: 1200px) {
  .wz-katalog { grid-template-columns: 230px minmax(0, 1fr); gap: var(--wz-6); }
}

@media (max-width: 1024px) {
  :root { --wz-px: 1rem; }
  .wz-hero__siatka { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--wz-8); }
  .wz-kategorie { grid-template-columns: minmax(0, 1fr); }
  .wz-karta-produktu { grid-template-columns: minmax(0, 1fr); }
  .wz-katalog { grid-template-columns: minmax(0, 1fr); }
  .wz-filtry { position: static; }
  .wz-filtry__przelacznik { display: inline-flex; }
}

@media (max-width: 900px) {
  .wz-menu, .wz-naglowek__tel { display: none; }
  .wz-hamburger { display: block; }
}

@media (max-width: 768px) {
  :root { --wz-naglowek: 66px; }
  .wz-naglowek__logo img { height: 32px; }
  .wz-pas-shell__dodatek { display: none; }
  .wz-tel-plywa { display: flex; }
  .wz-produkty { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: var(--wz-4); }
  /* Ciasteczka na telefonie stoja NAD sluchawka, nie obok niej. */
  .wz-cookies { left: 12px; right: 12px; bottom: 84px; width: auto; }
}

@media (max-width: 420px) {
  .wz-produkty { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wz-hero__pudlo { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .wz-naglowek, .wz-menu-mobilne, .wz-tel-plywa, .wz-cookies, .wz-filtry { display: none !important; }
}

/* ============================================================
   DOPELNIENIA: sekcje strony glownej, karta produktu, panel filtrow
   ============================================================ */

/* ---------- Doradztwo: os pozioma, nie cztery kafle ---------- */
.wz-kroki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wz-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}
.wz-krok { position: relative; padding-top: var(--wz-6); border-top: 2px solid var(--wz-grafit); }
.wz-krok__nr {
  display: block;
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--wz-czerwien);
  margin-bottom: var(--wz-2);
}
.wz-krok h3 { font-size: var(--wz-h4); margin-bottom: var(--wz-2); }
.wz-krok p { font-size: var(--wz-mala); color: var(--wz-tekst-2); margin: 0; }

/* ---------- O firmie ---------- */
.wz-o-firmie {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--wz-8), 5vw, var(--wz-16));
  align-items: start;
}
.wz-filary { list-style: none; margin: 0; padding: 0; }
.wz-filary li { padding: var(--wz-5) 0; border-top: 1px solid var(--wz-kreska-ciemna); }
.wz-filary li:first-child { border-top: 0; padding-top: 0; }
.wz-filary h3 { font-size: var(--wz-h4); margin-bottom: var(--wz-2); }
.wz-filary p { font-size: var(--wz-mala); color: #C9C6BF; margin: 0; }

/* Pasmo zdjecia wychodzi poza kontener, do krawedzi okna. */
.wz-pasmo { margin: var(--wz-12) 0 0; }
.wz-pasmo img { width: 100%; max-height: 380px; object-fit: cover; }

/* ---------- Kontakt ---------- */
.wz-kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(var(--wz-6), 3vw, var(--wz-10));
  align-items: start;
}
.wz-karta--centrala { background: var(--wz-kosc); }
.wz-telefony { list-style: none; margin: var(--wz-4) 0 0; padding: 0; }
.wz-telefony li {
  display: flex; flex-wrap: wrap; gap: var(--wz-2) var(--wz-4);
  justify-content: space-between; align-items: baseline;
  padding: 0.5rem 0; border-top: 1px solid var(--wz-kreska);
  font-size: var(--wz-mala);
}
.wz-telefony li:first-child { border-top: 0; }
.wz-telefony span { color: var(--wz-tekst-2); }
.wz-telefony a { font-family: var(--wz-display); font-weight: 700; text-decoration: none; }
.wz-telefony a:hover { color: var(--wz-czerwien); }
.wz-karta--formularz { position: sticky; top: calc(var(--wz-naglowek) + var(--wz-4)); }
.wz-karta--zapytanie { background: var(--wz-kosc); }

/* ---------- Karta produktu ---------- */
.wz-karta-produktu__tresc h1 { margin-bottom: var(--wz-4); }
.wz-produkt__opis { font-size: var(--wz-mala); color: var(--wz-tekst-2); }
.wz-produkt__opis p { margin-bottom: var(--wz-3); }

/* ---------- Tresc podstron ---------- */
.wz-tresc-strony { margin-top: var(--wz-6); }
.wz-tresc-strony h2 { margin-top: var(--wz-8); }
.wz-tresc-strony h3 { margin-top: var(--wz-6); }
.wz-tresc-strony ul, .wz-tresc-strony ol { padding-left: 1.25rem; }
.wz-tresc-strony li { margin-bottom: var(--wz-2); }
.wz-tresc-strony table { width: 100%; border-collapse: collapse; font-size: var(--wz-mala); }
.wz-tresc-strony th, .wz-tresc-strony td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--wz-kreska); text-align: left; }
.wz-wpis__obraz { margin: var(--wz-6) 0; }
.wz-wpis__obraz img { border-radius: var(--wz-r-l); width: 100%; }

/* ---------- Zakladka w przygotowaniu: PELNY EKRAN, nie pasek ---------- */
.wz-przygotowanie {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--wz-naglowek) - 46px);
  padding-block: var(--wz-16);
  background: var(--wz-kosc);
  text-align: left;
}
.wz-przygotowanie__nad {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wz-czerwien);
  margin: 0 0 var(--wz-3);
}
.wz-przygotowanie__lead { font-size: 1.0625rem; color: var(--wz-tekst-2); margin-bottom: var(--wz-8); }
.wz-przygotowanie__punkty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--wz-5);
  margin: 0 0 var(--wz-8);
  padding: 0;
  list-style: none;
}
.wz-przygotowanie__punkty li { padding-top: var(--wz-4); border-top: 2px solid var(--wz-grafit); }
.wz-przygotowanie__punkty strong { display: block; font-family: var(--wz-display); margin-bottom: var(--wz-1); }
.wz-przygotowanie__punkty span { font-size: var(--wz-mala); color: var(--wz-tekst-2); }
.wz-przygotowanie__akcje { display: flex; flex-wrap: wrap; gap: var(--wz-3); }

/* ---------- Podpowiedzi szukajki ---------- */
.wz-podpowiedzi {
  position: absolute;
  z-index: 40;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--wz-bialy);
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-m);
  box-shadow: var(--wz-cien-l);
  overflow: hidden;
}
.wz-podpowiedz {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.65rem 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid var(--wz-kreska);
}
.wz-podpowiedz:last-child { border-bottom: 0; }
.wz-podpowiedz:hover, .wz-podpowiedz:focus-visible { background: var(--wz-kosc); }
.wz-podpowiedz__nazwa { font-family: var(--wz-display); font-weight: 600; font-size: 0.9375rem; }
.wz-podpowiedz__kat { font-size: var(--wz-mikro); color: var(--wz-tekst-2); }

/* ---------- Poprawki w sekcji ciemnej ---------- */
.wz-sekcja--ciemna .wz-lista-kategorii li + li { border-top-color: var(--wz-kreska-ciemna); }
.wz-sekcja--ciemna .wz-lista-kategorii a:hover { color: var(--wz-zolc); }
.wz-sekcja--ciemna .wz-lista-kategorii__nr,
.wz-sekcja--ciemna .wz-lista-kategorii__ile { color: #A29F98; }
.wz-sekcja--ciemna .wz-produkt { background: var(--wz-bialy); color: var(--wz-tekst); }
.wz-sekcja--ciemna .wz-produkt:hover { border-color: var(--wz-zolc); }
.wz-sekcja--ciemna .wz-krok { border-top-color: var(--wz-zolc); }
.wz-sekcja--ciemna .wz-krok p { color: #C9C6BF; }
/* Ta regula miala specyficznosc (0,4,1) i zjadala KAZDY hover w ciemnej
   sekcji: „hover nic nie zmienia" na osmiu odnosnikach (bramka stany.py).
   Odnosniki i tak dziedzicza barwe po `.wz-sekcja--ciemna`, wiec jest zbedna.
   Lekcja: poprawka-css-ktora-nie-weszla. */

/* ---------- Progi ---------- */
@media (max-width: 1024px) {
  .wz-o-firmie { grid-template-columns: minmax(0, 1fr); }
  .wz-kontakt { grid-template-columns: minmax(0, 1fr); }
  .wz-karta--formularz { position: static; }
}
@media (max-width: 768px) {
  .wz-przygotowanie { min-height: calc(100vh - var(--wz-naglowek) - 46px); padding-block: var(--wz-12); }
  .wz-pasmo img { max-height: 240px; }
}

/* ============================================================
   KATALOG: nawigacja po kategorii, wybrane filtry, kafel bez zdjecia
   ============================================================ */

.wz-katalog__glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--wz-6) var(--wz-10);
  align-items: end;
  margin-bottom: var(--wz-6);
}
.wz-katalog__glowa .wz-szukajka { margin-bottom: 0; }

/* ---------- Podkategorie: przejscie jednym klikniecien ---------- */
.wz-podkategorie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wz-2);
  margin-bottom: var(--wz-6);
  padding-bottom: var(--wz-5);
  border-bottom: 1px solid var(--wz-kreska);
}
.wz-podkategoria {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wz-2);
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--wz-kreska);
  border-radius: var(--wz-r-m);
  background: var(--wz-bialy);
  text-decoration: none;
  transition: border-color var(--wz-czas) var(--wz-krzywa), background var(--wz-czas) var(--wz-krzywa);
}
.wz-podkategoria:hover, .wz-podkategoria:focus-visible { border-color: var(--wz-grafit); background: var(--wz-kosc); }
.wz-podkategoria__nazwa { font-family: var(--wz-display); font-weight: 600; font-size: 0.9375rem; }
.wz-podkategoria__ile { font-size: var(--wz-mikro); color: var(--wz-tekst-2); font-variant-numeric: tabular-nums; }

/* ---------- Wybrane filtry ---------- */
.wz-wybrane { display: flex; flex-wrap: wrap; gap: var(--wz-2); margin: 0 0 var(--wz-5); padding: 0; list-style: none; }
.wz-wybrany {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--wz-grafit);
  border-radius: 999px;
  background: var(--wz-grafit);
  color: #fff;
  font-size: var(--wz-mikro);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--wz-czas) var(--wz-krzywa);
}
.wz-wybrany:hover, .wz-wybrany:focus-visible { background: var(--wz-czerwien); border-color: var(--wz-czerwien); }
.wz-wybrany span[aria-hidden] { font-size: 1rem; line-height: 1; opacity: 0.8; }

/* ---------- Filtry: dluga lista zwija sie do wlasnego przewijania ---------- */
.wz-filtry__lista--dluga { max-height: 15.5rem; overflow-y: auto; padding-right: 0.4rem; }
.wz-filtry__lista--dluga::-webkit-scrollbar { width: 6px; }
.wz-filtry__lista--dluga::-webkit-scrollbar-thumb { background: var(--wz-kreska); border-radius: 3px; }
.wz-filtry__zatwierdz { width: 100%; justify-content: center; }

/* ---------- Kafel bez zdjecia: znak linii Shell ----------
   Materiał tego samego klienta, w barwie tej linii. Pusty kafel czyta sie
   jak usterka, znak linii czyta sie jak decyzja.                          */
.wz-produkt__foto { position: relative; }

.wz-produkt__slowo {
  font-family: var(--wz-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--wz-tekst-2);
}
.wz-produkt__lepkosc {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--wz-r-s);
  background: var(--wz-grafit);
  color: #fff;
  font-family: var(--wz-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.wz-karta-produktu__foto--znak img { max-width: 68%; max-height: 190px; }
.wz-karta-produktu__foto--znak .wz-produkt__slowo { font-size: 1.75rem; }

.wz-plakietka--mocna { background: var(--wz-grafit); border-color: var(--wz-grafit); color: #fff; }
.wz-plakietka a { text-decoration: none; color: inherit; }
.wz-plakietka:hover { border-color: var(--wz-grafit); }

@media (max-width: 1024px) {
  .wz-katalog__glowa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .wz-podkategorie { gap: var(--wz-1); }
  .wz-podkategoria { padding: 0.42rem 0.7rem; }
  .wz-filtry__lista--dluga { max-height: 12rem; }
}

/* ---------- Wejscie po zastosowaniu (ciemna sekcja na glownej) ---------- */
.wz-zastosowania {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--wz-3);
  margin-bottom: var(--wz-8);
}
.wz-zastosowanie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wz-3);
  padding: 0.85rem 1rem;
  border: 1px solid var(--wz-kreska-ciemna);
  border-radius: var(--wz-r-m);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  transition: border-color var(--wz-czas) var(--wz-krzywa), background var(--wz-czas) var(--wz-krzywa);
}
.wz-zastosowanie:hover, .wz-zastosowanie:focus-visible {
  border-color: var(--wz-zolc);
  background: rgba(247, 209, 23, 0.1);
}
.wz-zastosowanie__nazwa { font-family: var(--wz-display); font-weight: 600; font-size: 0.9375rem; color: #fff; }
.wz-zastosowanie__ile { font-size: var(--wz-mikro); color: var(--wz-zolc); font-variant-numeric: tabular-nums; }

/* ---------- Fakty o zbiorze: liczby, nie proza ---------- */
.wz-fakty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wz-4) var(--wz-8);
  margin: 0 0 var(--wz-6);
  padding: var(--wz-5) 0;
  border-block: 1px solid var(--wz-kreska);
}
.wz-fakty dt {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wz-tekst-2);
  margin-bottom: 0.2rem;
}
.wz-fakty dd { margin: 0; font-size: var(--wz-mala); font-variant-numeric: tabular-nums; }

/* ============================================================
   POPRAWKI PO OBEJRZENIU ZRZUTOW (02.09.2026)
   ============================================================ */

/* Atrybut `hidden` musi wygrywac z `display` z klasy. Przycisk „Filtry"
   miał `hidden`, a mimo to stał na komputerze, bo `.wz-btn{display:inline-flex}`
   bije regułę przeglądarki `[hidden]{display:none}`. */
[hidden] { display: none !important; }

/* Kotwica pod przyklejonym nagłówkiem: bez tego nagłówek zasłania tytuł sekcji. */
:target,
section[id],
.wz-sekcja[id] { scroll-margin-top: calc(var(--wz-naglowek) + 56px); }

/* ---------- Pierwszy ekran: mniej pustego miejsca ---------- */
.wz-hero__siatka { min-height: 0; align-items: center; }
.wz-hero__pudlo figure { padding: var(--wz-4); }
.wz-hero__pudlo img { max-height: 240px; }
.wz-hero__liczby { gap: var(--wz-6); }
.wz-liczba span { display: block; max-width: none; }

/* ---------- Wejscia po zastosowaniu: rowna wysokosc ---------- */
.wz-zastosowanie {
  min-height: 58px;
  align-items: center;
}
.wz-zastosowanie__nazwa { line-height: 1.25; }

/* ---------- Wyrozniona grupa: tresc zamiast pustki ---------- */
.wz-kategoria-glowna {
  display: flex;
  flex-direction: column;
  gap: var(--wz-6);
  justify-content: flex-start;
}
.wz-kategoria-glowna__tytul { text-decoration: none; display: block; }
.wz-kategoria-glowna__tytul h3 { margin-bottom: var(--wz-2); transition: color var(--wz-czas) var(--wz-krzywa); }
.wz-kategoria-glowna__tytul:hover h3 { color: var(--wz-zolc); }
.wz-kategoria-glowna__liczba { margin: 0; color: #C9C6BF; font-size: var(--wz-mala); }
.wz-kategoria-glowna__liczba strong {
  font-family: var(--wz-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--wz-zolc);
  display: block;
  line-height: 1.05;
}
.wz-podgrupy { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.wz-podgrupy li + li { border-top: 1px solid var(--wz-kreska-ciemna); }
.wz-podgrupy a {
  display: flex;
  justify-content: space-between;
  gap: var(--wz-4);
  padding: 0.6rem 0;
  font-size: var(--wz-mala);
  text-decoration: none;
  color: #EDEBE6;
  transition: color var(--wz-czas) var(--wz-krzywa);
}
.wz-podgrupy a:hover { color: var(--wz-zolc); }
.wz-podgrupy__ile { color: #A29F98; font-variant-numeric: tabular-nums; }
.wz-kategoria-glowna .wz-btn { align-self: flex-start; }

/* ---------- Kafel produktu: jedna wysokosc pola zdjecia ---------- */
.wz-produkt__foto {
  aspect-ratio: auto;
  height: 210px;
  flex: 0 0 auto;
}
.wz-produkt__foto img { max-height: 178px; width: auto; object-fit: contain; }

.wz-produkt__nazwa { min-height: 2.6em; }

@media (max-width: 768px) {
  .wz-produkt__foto { height: 150px; }
  .wz-produkt__foto img { max-height: 124px; }
  .wz-produkt__nazwa { min-height: 0; }
}

/* ---------- Plyta zamiast zdjecia opakowania ----------
   Znak linii maly u gory, klasa lepkosci duza posrodku. Sam znak linii
   powtarzal sie w kategorii dwadziescia razy pod rzad i czytal sie jak
   usterka renderowania. Klasa lepkosci rozni kazdy kafel i jest tym,
   po czym klient wybiera produkt.                                        */
.wz-produkt__foto--plyta {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wz-3);
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, var(--wz-kosc) 70%);
  position: relative;
}
.wz-produkt__znak { max-height: 26px; max-width: 52%; width: auto; opacity: 0.9; }
.wz-produkt__znak-tekst {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wz-tekst-2);
}
.wz-produkt__klasa {
  font-family: var(--wz-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--wz-grafit);
  font-variant-numeric: tabular-nums;
}
.wz-produkt__foto--plyta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 38px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--wz-zolc);
}
.wz-produkt:hover .wz-produkt__foto--plyta::after { background: var(--wz-czerwien); }

@media (max-width: 768px) {
  .wz-produkt__klasa { font-size: 1.375rem; }
  .wz-produkt__znak { max-height: 20px; }
  .wz-produkt__foto--plyta::after { bottom: 18px; width: 30px; }
}

.wz-karta-produktu__foto--plyta {
  flex-direction: column;
  gap: var(--wz-4);
  background: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, var(--wz-kosc) 70%);
}
.wz-karta-produktu__foto--plyta .wz-produkt__znak { max-height: 46px; max-width: 46%; }
.wz-karta-produktu__foto--plyta .wz-produkt__klasa { font-size: 3rem; }

/* Kafel ze zdjeciem i kafel z plyta maja to samo tlo — siatka czyta sie
   wtedy jak jeden system, a nie jak dwa rozne rodzaje kafli. */
.wz-produkt__foto {
  background: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, var(--wz-kosc) 70%);
}
@media (max-width: 900px) {
  .wz-hero__siatka { padding-top: var(--wz-8); }
}

/* ---------- Opis produktu ---------- */
.wz-produkt__opis { font-size: 0.9375rem; color: var(--wz-tekst); }
.wz-produkt__opis p { margin-bottom: var(--wz-3); color: var(--wz-tekst-2); }
.wz-produkt__opis ul { margin: 0 0 var(--wz-4); padding-left: 0; list-style: none; }
.wz-produkt__opis li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: var(--wz-2);
  color: var(--wz-tekst-2);
}
.wz-produkt__opis li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 2px;
  background: var(--wz-czerwien);
}
.wz-opis__srodtytul {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wz-tekst);
  margin: var(--wz-5) 0 var(--wz-2);
}
.wz-produkt__opis > :first-child { margin-top: 0; }

/* Zdjecie produktu trzyma sie gory i jedzie z trescia. */
.wz-karta-produktu__foto { position: sticky; top: calc(var(--wz-naglowek) + var(--wz-4)); align-self: start; }
@media (max-width: 1024px) { .wz-karta-produktu__foto { position: static; } }

/* ============================================================
   POLA DOTYKU I STANY (audyt stany.py)
   ============================================================ */

/* Plakietka z odnosnikiem: reaguje CALA, nie tylko obwodka. */
.wz-plakietka { padding: 0; }
.wz-plakietka > a,
.wz-plakietka > span,
.wz-plakietka { transition: background var(--wz-czas) var(--wz-krzywa), border-color var(--wz-czas) var(--wz-krzywa), color var(--wz-czas) var(--wz-krzywa); }
.wz-plakietka > a {
  display: block;
  padding: 0.32rem 0.7rem;
  color: inherit;
  text-decoration: none;
}
.wz-plakietka:not(:has(> a)) { padding: 0.32rem 0.7rem; }
.wz-plakietka:has(> a):hover,
.wz-plakietka:has(> a):focus-within {
  background: var(--wz-grafit);
  border-color: var(--wz-grafit);
  color: #fff;
}
.wz-plakietka--zolta:has(> a):hover,
.wz-plakietka--zolta:has(> a):focus-within {
  background: var(--wz-zolc-ciemna);
  border-color: var(--wz-zolc-ciemna);
  color: var(--wz-grafit);
}

@media (max-width: 900px) {
  /* Minimum 44 px na palec. Same odnosniki tekstowe mialy 18 do 32 px. */
  .wz-stopka ul a,
  .wz-stopka li > a,
  .wz-telefony a,
  .wz-oddzial a,
  .wz-kategoria-glowna__tytul,
  .wz-okruszki a {
    display: inline-block;
    min-height: 44px;
    padding-block: 0.7rem;
    line-height: 1.5;
  }
  /* Te dwa uklady sa siatkami: `inline-block` zabijal wyrownanie licznika
     do prawej krawedzi. Pole dotyku robi tu odstep, nie zmiana `display`. */
  .wz-podgrupy a,
  .wz-lista-kategorii a { min-height: 44px; align-items: center; }
  .wz-stopka li { margin-top: 0; }
  .wz-telefony li { padding: 0; }
  .wz-naglowek__logo { display: flex; align-items: center; min-height: 46px; padding-block: 0.4rem; }
  .wz-menu-mobilne__glowa img { height: 26px; }
  .wz-podgrupy a, .wz-lista-kategorii a { padding-block: 0.85rem; }
}

/* Pasek ciasteczek to element sterujacy: jego krawedz musi byc widoczna.
   Obwodka `--wz-kreska` na bieli dawala 1,47:1 przy progu 3:1. */
.wz-cookies { border-color: var(--wz-grafit); border-width: 2px; }

/* Ciemna sekcja stojaca tuz nad ciemna stopka nie ma widocznej granicy
   (1,00:1). Zamyka ja pas w barwie Shella: 12:1 wobec obu stron. */
.wz-sekcja--domkniecie { border-bottom: 3px solid var(--wz-zolc); }

/* ---------- Podstrona tresciowa: dwie kolumny ----------
   Wiersz skraca KOLUMNA, nie obramowanie akapitu (zakaz max-width na tekscie).
   Bez tego „O firmie" mialo 145 znakow w wierszu przy 1440 px.            */
.wz-strona {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr);
  gap: clamp(var(--wz-6), 4vw, var(--wz-12));
  align-items: start;
  margin-top: var(--wz-6);
}
.wz-strona .wz-tresc-strony { margin-top: 0; }
.wz-strona__bok { position: sticky; top: calc(var(--wz-naglowek) + var(--wz-4)); }

@media (max-width: 1024px) {
  .wz-strona { grid-template-columns: minmax(0, 1fr); }
  .wz-strona__bok { position: static; }
}

/* Logo w naglowku tez jest odnosnikiem i tez ma odpowiadac na najechanie. */
.wz-naglowek__logo img { transition: opacity var(--wz-czas) var(--wz-krzywa); }
.wz-naglowek__logo:hover img,
.wz-naglowek__logo:focus-visible img { opacity: 0.72; }

/* Odnosniki w ciemnych sekcjach: barwa spoczynkowa i barwa po najechaniu. */
.wz-sekcja--ciemna .wz-podgrupy a,
.wz-sekcja--ciemna .wz-lista-kategorii a { color: #EDEBE6; }
.wz-sekcja--ciemna .wz-podgrupy a:hover,
.wz-sekcja--ciemna .wz-podgrupy a:focus-visible,
.wz-sekcja--ciemna .wz-lista-kategorii a:hover,
.wz-sekcja--ciemna .wz-lista-kategorii a:focus-visible { color: var(--wz-zolc); }

/* Lewa kolumna karty produktu: zdjecie i karta z telefonem razem.
   Sama fotografia zostawiala pod soba pol ekranu pustki. */
.wz-karta-produktu__lewa { display: flex; flex-direction: column; gap: var(--wz-5); position: sticky; top: calc(var(--wz-naglowek) + var(--wz-4)); }
.wz-karta-produktu__lewa .wz-karta-produktu__foto { position: static; }
@media (max-width: 1024px) { .wz-karta-produktu__lewa { position: static; } }

/* ============================================================
   DRUGA RUNDA POPRAWEK PO stany.py
   Bramka mierzy zmiane na ELEMENCIE, na ktory najezdza. Zmiana tla
   RODZICA plakietki jest dla niej niewidoczna, wiec stan musi siedziec
   na samym odnosniku.
   ============================================================ */
.wz-plakietka > a { border-radius: 999px; }
.wz-plakietka > a:hover,
.wz-plakietka > a:focus-visible { background: var(--wz-grafit); color: #fff; }
.wz-plakietka--zolta > a:hover,
.wz-plakietka--zolta > a:focus-visible { background: var(--wz-zolc-ciemna); color: var(--wz-grafit); }
.wz-plakietka--mocna > a:hover,
.wz-plakietka--mocna > a:focus-visible { background: var(--wz-czerwien); color: #fff; }

/* Odnosniki w stopce: wlasny stan, nie sam odziedziczony kolor. */
.wz-stopka a { transition: color var(--wz-czas) var(--wz-krzywa); }
.wz-stopka ul a:hover, .wz-stopka ul a:focus-visible,
.wz-stopka__dol a:hover, .wz-stopka__dol a:focus-visible,
.wz-stopka .menu a:hover, .wz-stopka .menu a:focus-visible { color: var(--wz-zolc); }

/* Strony wynikow: 44 px to minimum na palec, mialy 42. */
.wz-strony .page-numbers { min-width: 46px; min-height: 46px; }

@media (max-width: 900px) {
  .wz-podkategoria { min-height: 46px; padding-block: 0.7rem; }
  .wz-plakietki { gap: var(--wz-2) var(--wz-2); }
  .wz-plakietka > a,
  .wz-plakietka:not(:has(> a)) { padding: 0.6rem 0.85rem; min-height: 44px; display: flex; align-items: center; }
  .wz-stopka__dol a { display: inline-block; min-height: 44px; padding-block: 0.7rem; }
}


/* ============================================================
   OBRAMOWANIA ELEMENTOW (bramka niewidoczne.py)
   ============================================================ */
.wz-btn--obrys,
.wz-karta,
.wz-produkt,
.wz-podkategoria,
.wz-filtry,
.wz-tabela-otoczka,
.wz-plakietka,
.wz-strony .page-numbers,
.wz-hero__pudlo figure,
.wz-produkt__foto,
.wz-karta-produktu__foto,
.wz-szukajka input,
.wz-pole input,
.wz-pole textarea,
.wz-pole select,
.wz-hamburger { border-color: var(--wz-obrys); }

.wz-produkt__foto { border-bottom-color: var(--wz-obrys); }
.wz-brak { border-color: var(--wz-obrys); }
.wz-cookies { border-color: var(--wz-grafit); }

/* W ciemnej sekcji obrys jasnieje, zeby zachowac te sama widocznosc. */
.wz-sekcja--ciemna .wz-karta,
.wz-sekcja--ciemna .wz-produkt { border-color: #6B675F; }

/* Sekcja z samym tytulem stoi tuz nad sekcja kontaktu — bez skrocenia
   odstepu robi sie miedzy nimi dziura. */
.wz-sekcja--tytul { padding-bottom: 0; }

/* ============================================================
   NAGLOWEK NA DWA POZIOMY (przebudowa 02.09.2026)
   Gorny poziom niesie numery i zwija sie przy przewijaniu,
   dolny z logo i menu zostaje przyklejony.
   ============================================================ */

/* --- pas dystrybutora Shell --- */
.wz-pas-shell {
  background: var(--wz-zolc);
  color: var(--wz-grafit);
  border-bottom: 3px solid var(--wz-czerwien);
}
.wz-pas-shell__rzad {
  display: flex;
  align-items: center;
  gap: var(--wz-4);
  min-height: 60px;
  padding-block: var(--wz-2);
}
.wz-pas-shell__muszla {
  height: 40px;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}
.wz-pas-shell__napis {
  font-family: var(--wz-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}
.wz-pas-shell__dodatek {
  margin: 0 0 0 auto;
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B5A05;
}

/* --- poziom kontaktowy --- */
.wz-naglowek { border-bottom: 0; }
.wz-naglowek__kontakt {
  background: var(--wz-kosc);
  border-bottom: 1px solid var(--wz-obrys);
  overflow: hidden;
  max-height: 56px;
  transition: max-height 220ms var(--wz-krzywa), opacity 160ms var(--wz-krzywa);
}
.wz-naglowek.jest-przewiniety .wz-naglowek__kontakt { max-height: 0; opacity: 0; }

.wz-naglowek__kontakt-rzad {
  display: flex;
  align-items: center;
  gap: var(--wz-3) var(--wz-6);
  min-height: 56px;
  flex-wrap: nowrap;
}
.wz-kontakt-poz {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  padding-block: 0.35rem;
  white-space: nowrap;
}
.wz-kontakt-poz__co {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wz-tekst-2);
}
.wz-kontakt-poz__nr {
  font-family: var(--wz-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--wz-tekst);
  transition: color var(--wz-czas) var(--wz-krzywa);
}
.wz-kontakt-poz:hover .wz-kontakt-poz__nr,
.wz-kontakt-poz:focus-visible .wz-kontakt-poz__nr { color: var(--wz-czerwien); }
.wz-naglowek__godziny {
  margin: 0 0 0 auto;
  font-size: var(--wz-mikro);
  color: var(--wz-tekst-2);
  white-space: nowrap;
}

/* --- poziom glowny --- */
.wz-naglowek__glowny { background: var(--wz-bialy); border-bottom: 1px solid var(--wz-obrys); }
.wz-naglowek__rzad { min-height: 84px; gap: var(--wz-8); }
.wz-naglowek__logo img { height: 52px; width: auto; }

.wz-menu ul { gap: clamp(1rem, 2vw, 2.25rem); }
.wz-menu a { font-size: 1rem; font-weight: 600; }

.wz-naglowek__cta { flex: 0 0 auto; font-size: 1rem; }
.wz-naglowek__cta svg { flex: 0 0 auto; }

/* --- menu na telefonie: numery pod menu --- */
.wz-menu-mobilne__tel {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--wz-kreska-ciemna);
  text-decoration: none;
}
.wz-menu-mobilne__tel span { font-size: var(--wz-mikro); color: #9C9A94; letter-spacing: 0.06em; text-transform: uppercase; }
.wz-menu-mobilne__tel strong { font-family: var(--wz-display); font-size: 1.0625rem; font-weight: 700; color: #fff; }
.wz-menu-mobilne__glowa img { height: 34px; width: auto; }

@media (max-width: 1180px) {
  .wz-naglowek__kontakt-rzad { gap: var(--wz-3) var(--wz-4); }
  .wz-kontakt-poz--mail { display: none; }
}
@media (max-width: 1024px) {
  .wz-naglowek__cta { display: none; }
  .wz-naglowek__godziny { display: none; }
}
@media (max-width: 900px) {
  .wz-naglowek__kontakt { display: none; }
  .wz-naglowek__rzad { min-height: 68px; gap: var(--wz-4); }
  .wz-naglowek__logo img { height: 42px; }
  .wz-pas-shell__rzad { min-height: 48px; gap: var(--wz-3); }
  .wz-pas-shell__muszla { height: 30px; }
  .wz-pas-shell__napis { font-size: 0.75rem; letter-spacing: 0.08em; }
}
@media (max-width: 480px) {
  .wz-pas-shell__napis { font-size: 0.6875rem; letter-spacing: 0.04em; }
  .wz-naglowek__logo img { height: 36px; }
}

/* ============================================================
   KARUZELA (znaki linii Shell, zdjecia opakowan)
   ============================================================ */
.wz-karuzela { background: var(--wz-bialy); border-block: 1px solid var(--wz-obrys); }
.wz-karuzela__pudlo { position: relative; display: flex; align-items: center; gap: var(--wz-3); }

.wz-karuzela__tor {
  display: flex;
  align-items: center;
  gap: var(--wz-6);
  list-style: none;
  margin: 0;
  padding: var(--wz-6) 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  flex: 1 1 auto;
}
.wz-karuzela__tor::-webkit-scrollbar { display: none; }
.wz-karuzela__tor:focus-visible { outline: 3px solid var(--wz-czerwien); outline-offset: 4px; }

.wz-karuzela__poz {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wz-karuzela__poz img { width: auto; }

.wz-karuzela--znaki .wz-karuzela__poz { width: 160px; height: 62px; }
.wz-karuzela--znaki .wz-karuzela__poz img { max-height: 52px; max-width: 100%; object-fit: contain; }

.wz-karuzela--opakowania { background: var(--wz-kosc); }
.wz-karuzela--opakowania .wz-karuzela__tor { gap: var(--wz-5); padding-block: var(--wz-8); }
.wz-karuzela--opakowania .wz-karuzela__poz {
  width: 132px;
  height: 168px;
  background: var(--wz-bialy);
  border: 1px solid var(--wz-obrys);
  border-radius: var(--wz-r-m);
  padding: var(--wz-3);
}
.wz-karuzela--opakowania .wz-karuzela__poz img { max-height: 100%; max-width: 100%; object-fit: contain; }

.wz-karuzela__strzalka {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--wz-obrys);
  border-radius: 50%;
  background: var(--wz-bialy);
  color: var(--wz-tekst);
  cursor: pointer;
  transition: background var(--wz-czas) var(--wz-krzywa),
              border-color var(--wz-czas) var(--wz-krzywa),
              opacity var(--wz-czas) var(--wz-krzywa);
}
.wz-karuzela__strzalka:hover,
.wz-karuzela__strzalka:focus-visible { background: var(--wz-grafit); border-color: var(--wz-grafit); color: #fff; }
.wz-karuzela__strzalka:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 900px) {
  .wz-karuzela__strzalka { display: none; }
  .wz-karuzela--znaki .wz-karuzela__poz { width: 128px; height: 52px; }
  .wz-karuzela--znaki .wz-karuzela__poz img { max-height: 42px; }
  .wz-karuzela--opakowania .wz-karuzela__poz { width: 108px; height: 138px; }
  .wz-karuzela__tor { padding-block: var(--wz-5); gap: var(--wz-4); }
}

/* ============================================================
   MNIEJSZY RYTM PIONOWY (uwaga Pawla: paddingi gora dol mniejsze)
   ============================================================ */
:root {
  --wz-sekcja-s: clamp(2rem, 3.6vw, 2.75rem);
  --wz-sekcja-m: clamp(2.75rem, 5vw, 4rem);
  --wz-sekcja-l: clamp(3.25rem, 6.5vw, 5rem);
}
.wz-sekcja__glowa { margin-bottom: var(--wz-6); }

/* ============================================================
   KATALOG NA STRONIE GLOWNEJ: trzy kroki jeden pod drugim
   ============================================================ */
.wz-szukaj-duza {
  display: flex;
  align-items: center;
  gap: var(--wz-2);
  position: relative;
  padding: var(--wz-2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--wz-kreska-ciemna);
  border-radius: var(--wz-r-l);
  margin-bottom: var(--wz-8);
}
/* Ikona stoi na WIERSZU POLA, nie na srodku formularza. Na telefonie
   przycisk „Szukaj" schodzi pod pole, formularz rosnie do 134 px i srodek
   formularza wypada MIEDZY polem a przyciskiem — lupa odskakiwala od pola.
   Zmierzone na 390 px: pole 1661..1715, ikona byla na 1708. */
.wz-szukaj-duza__ikona {
  position: absolute;
  left: 1.15rem;
  top: var(--wz-2);
  height: 54px;
  display: flex;
  align-items: center;
  color: #A29F98;
  pointer-events: none;
}
.wz-szukaj-duza input {
  flex: 1 1 auto;
  min-height: 54px;
  padding: 0.8rem 1rem 0.8rem 3.1rem;
  border: 0;
  border-radius: var(--wz-r-m);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 1.0625rem;
}
.wz-szukaj-duza input::placeholder { color: #918E88; }
.wz-szukaj-duza input:focus { outline: none; }
.wz-szukaj-duza:focus-within { border-color: var(--wz-zolc); }
.wz-szukaj-duza .wz-btn { flex: 0 0 auto; min-height: 54px; }

.wz-krok-katalog + .wz-krok-katalog { margin-top: var(--wz-8); }
.wz-krok-katalog__tytul {
  font-family: var(--wz-display);
  font-size: var(--wz-mikro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A29F98;
  margin: 0 0 var(--wz-4);
}
.wz-krok-katalog__tytul--jasny { color: var(--wz-tekst-2); }

/* --- grupy produktowe: dwie kolumny, kazda z podglądem podkategorii --- */
.wz-grupy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0 var(--wz-10);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wz-grupa { border-top: 1px solid var(--wz-kreska-ciemna); padding: var(--wz-4) 0; }
.wz-grupa__glowa {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--wz-4);
  align-items: baseline;
  text-decoration: none;
  color: #EDEBE6;
  transition: color var(--wz-czas) var(--wz-krzywa);
}
.wz-grupa__glowa:hover, .wz-grupa__glowa:focus-visible { color: var(--wz-zolc); }
.wz-grupa__nr { font-family: var(--wz-display); font-size: var(--wz-mikro); font-weight: 700; color: #7E7A72; }
.wz-grupa__nazwa { font-family: var(--wz-display); font-size: 1.0625rem; font-weight: 600; }
.wz-grupa__ile { font-size: var(--wz-mala); color: var(--wz-zolc); font-variant-numeric: tabular-nums; }
.wz-grupa__pod {
  margin: 0.35rem 0 0 3.35rem;
  font-size: var(--wz-mikro);
  color: #918E88;
  line-height: 1.5;
}

/* ============================================================
   KONTAKT: najpierw numery, potem lokalizacje, na koncu formularz
   ============================================================ */

.wz-numery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--wz-4);
  margin-bottom: var(--wz-10);
}
.wz-numer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--wz-5) var(--wz-5) var(--wz-5) calc(var(--wz-5) + 4px);
  border: 1px solid var(--wz-obrys);
  border-left: 4px solid var(--wz-czerwien);
  border-radius: var(--wz-r-m);
  background: var(--wz-bialy);
  text-decoration: none;
  transition: background var(--wz-czas) var(--wz-krzywa), border-color var(--wz-czas) var(--wz-krzywa);
}
.wz-numer:hover, .wz-numer:focus-visible { background: var(--wz-kosc); border-color: var(--wz-grafit); border-left-color: var(--wz-czerwien); }
.wz-numer__co {
  font-size: var(--wz-mikro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wz-tekst-2);
}
.wz-numer__nr {
  font-family: var(--wz-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--wz-tekst);
  font-variant-numeric: tabular-nums;
}

.wz-lokalizacje {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wz-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wz-lokalizacja { padding-top: var(--wz-4); border-top: 2px solid var(--wz-grafit); }
.wz-lokalizacja__rola {
  font-size: var(--wz-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wz-czerwien);
  font-weight: 700;
  margin: 0 0 var(--wz-1);
}
.wz-lokalizacja h4 { font-size: 1.125rem; margin: 0 0 var(--wz-2); }
.wz-lokalizacja__adres { font-size: var(--wz-mala); color: var(--wz-tekst-2); margin: 0 0 var(--wz-2); }
.wz-lokalizacja__kontakt { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; font-size: var(--wz-mala); }
.wz-lokalizacja__kontakt a { text-decoration: none; }
.wz-lokalizacja__kontakt a:hover { color: var(--wz-czerwien); text-decoration: underline; }

@media (max-width: 1024px) {
  .wz-szukaj-duza { flex-wrap: wrap; }
  .wz-szukaj-duza input { flex: 1 1 100%; }
  .wz-szukaj-duza .wz-btn { width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
  .wz-numer { padding: var(--wz-4); }
  .wz-numer__nr { font-size: 1.25rem; }
  .wz-grupy { gap: 0; }
}

/* --- karuzela: odnosnik musi wypelnic kafel, inaczej `max-height: 100%`
       na obrazie nie ma sie do czego odniesc i zdjecie wychodzi poza ramke --- */
.wz-karuzela__poz > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wz-karuzela--opakowania .wz-karuzela__poz > a img { max-height: 100%; max-width: 100%; object-fit: contain; }
.wz-karuzela--znaki .wz-karuzela__poz > a img { max-height: 52px; max-width: 100%; object-fit: contain; }

/* --- wejscia po zastosowaniu: rowna wysokosc mimo lamania nazw --- */
.wz-zastosowania { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wz-zastosowanie { min-height: 74px; align-items: center; }
.wz-zastosowanie__nazwa { line-height: 1.25; }

/* --- lokalizacje: dwie kolumny, cztery rowne kafle --- */
.wz-lokalizacje { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wz-6) var(--wz-8); }
@media (max-width: 600px) { .wz-lokalizacje { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   POPRAWKI PO CZYSTYM POMIARZE (audyt.py deploy)
   ============================================================ */

/* 320 px: kolumna 340 px nie miesci sie w oknie 320 px i wypychala tresc
   o 36 px w bok (bramki przewijanie.py i macierz.py). */
/* Siedem grup w trzech kolumnach zostawialo w ostatnim rzedzie jedna
   pozycje i dwie dziury. W dwoch kolumnach wychodzi 4 + 3, a podglad
   podkategorii miesci sie w jednej linii zamiast lamac sie na dwie. */
.wz-grupy { grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); }
.wz-numery { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.wz-zastosowania { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

/* Obramowanie w ciemnej sekcji: 3,17:1 zamiast 1,53:1 (prog 3:1). */
.wz-sekcja--ciemna .wz-zastosowanie,
.wz-szukaj-duza { border-color: #6E6A62; }

/* Numer grupy to tekst, wiec prog wynosi 4,5:1. Bylo 3,99:1. */
.wz-grupa__nr { color: #8E8A82; }
.wz-grupa__pod { color: #A29F98; }

/* Pole dotyku pozycji na liscie grup: 28 px to za malo na palec. */
.wz-grupa__glowa { min-height: 44px; align-items: center; padding-block: 0.35rem; }
.wz-grupa { padding: var(--wz-2) 0; }

@media (max-width: 380px) {
  .wz-grupa__pod { margin-left: 0; }
  .wz-grupa__glowa { grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: var(--wz-2); }
}

/* --- pola dotyku na telefonie -------------------------------------------
   Prog 44 px obowiazuje tam, gdzie palec, wiec podnosimy je tylko ponizej
   768 px. Na komputerze te same odnosniki maja zostac zwarte.            */
@media (max-width: 1024px) {
  .wz-lokalizacja__kontakt a { display: flex; align-items: center; min-height: 44px; }
  .wz-lokalizacja__kontakt { gap: 0; }
}
@media (max-width: 767px) {
  .wz-cookies .wz-btn { min-height: 44px; }
  .wz-btn { min-height: 44px; }
}

/* Zgoda w formularzu: tapniecie w CALA etykiete zaznacza pole, wiec pole
   tapniecia to etykieta, a nie kwadracik 18 px. Pseudoelement `inset: 0`
   mowi to wprost, zamiast rozdymac sam kwadrat do 44 px.                 */
.wz-zgoda { position: relative; }
.wz-zgoda input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--wz-czerwien);
}
.wz-zgoda input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
}

/* --- kontakt: panel pod adresami --------------------------------------
   Lewa kolumna konczyla sie 430 px nad dolem formularza i sekcja czytala
   sie jak niedokonczona. Panel domyka kolumne i powtarza to, po co ludzie
   dzwonia do tej firmy: godziny i numer do doradcy.                     */
.wz-kontakt__panel {
  margin-top: var(--wz-6);
  padding: var(--wz-5) var(--wz-6);
  background: var(--wz-grafit);
  border-radius: var(--wz-r-m);
  display: grid;
  gap: var(--wz-4);
}
.wz-kontakt__panel-poz { margin: 0; display: grid; gap: 0.2rem; }
.wz-kontakt__panel-poz span {
  font-size: var(--wz-mikro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A29F98;
}
.wz-kontakt__panel-poz strong,
.wz-kontakt__panel-poz a {
  font-family: var(--wz-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.wz-kontakt__panel-poz a:hover,
.wz-kontakt__panel-poz a:focus-visible { color: var(--wz-zolc); }
@media (min-width: 700px) {
  .wz-kontakt__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wz-6); }
}

/* Trzeci przycisk w pasku ciasteczek zabieral 90 px wysokosci na telefonie
   przy dwoch realnych wyborach. Polityka to odnosnik, nie decyzja. */
.wz-cookies__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--wz-mala);
  color: var(--wz-tekst-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wz-cookies__link:hover,
.wz-cookies__link:focus-visible { color: var(--wz-czerwien); }
.wz-cookies__akcje { align-items: center; gap: var(--wz-3); }
@media (max-width: 767px) {
  .wz-cookies p { font-size: var(--wz-mala); margin-bottom: var(--wz-3); }
}

/* --- stany po najechaniu tam, gdzie ich brakowalo --------------------
   Pomiar (stany.py) znalazl dwa elementy, ktore pod kursorem nie zmienialy
   niczego: pole formularza bez tekstu i odnosnik do polityki w zgodzie.  */
.wz-pole input:hover,
.wz-pole select:hover,
.wz-pole textarea:hover { border-color: var(--wz-grafit); }

/* Pole wyboru jest rysowane przez system, wiec obramowanie nic nie zrobi.
   Widoczna zmiana to obrys dookola. */
.wz-zgoda input[type="checkbox"]:hover { outline: 2px solid var(--wz-grafit); outline-offset: 2px; }

.wz-zgoda a { color: var(--wz-tekst); text-underline-offset: 3px; }
.wz-zgoda a:hover,
.wz-zgoda a:focus-visible { color: var(--wz-czerwien); text-decoration-thickness: 2px; }

/* Odnosnik w karuzeli obejmuje samo zdjecie, wiec nie ma tekstu, ktory
   moglby zmienic barwe. Widoczna odpowiedz to lekkie podniesienie kafla. */
.wz-karuzela__poz > a { transition: transform var(--wz-czas) var(--wz-krzywa); }
.wz-karuzela__poz > a:hover,
.wz-karuzela__poz > a:focus-visible { transform: translateY(-3px); }
.wz-karuzela--opakowania .wz-karuzela__poz { transition: border-color var(--wz-czas) var(--wz-krzywa); }
.wz-karuzela--opakowania .wz-karuzela__poz:hover { border-color: var(--wz-grafit); }

.wz-naglowek__logo { transition: opacity var(--wz-czas) var(--wz-krzywa); }
.wz-naglowek__logo:hover,
.wz-naglowek__logo:focus-visible { opacity: 0.78; }

.wz-karuzela__strzalka { transition: background var(--wz-czas) var(--wz-krzywa), border-color var(--wz-czas) var(--wz-krzywa), color var(--wz-czas) var(--wz-krzywa); }

/* --- rytm sekcji celowo nierowny -------------------------------------
   Wszystkie sceny mialy 64/64 i strona czytala sie jednym tempem.
   Wiecej powietrza tam, gdzie sekcja cos opowiada (o firmie, kontakt),
   ciasniej tam, gdzie jest lista do przejrzenia (katalog, doradztwo).  */
@media (min-width: 900px) {
  #katalog   { padding-block: 3.5rem 4.5rem; }
  #doradztwo { padding-block: 3rem 3.5rem; }
  #o-firmie  { padding-block: 5.5rem 4.5rem; }
  #kontakt   { padding-block: 4rem 5rem; }
}

/* --- pola dotyku na tablecie i telefonie ------------------------------
   Filtry katalogu to 89 pozycji po 34 px. Na komputerze to dobrze, bo
   lista jest dluga i myszka trafia. Palec potrzebuje 44 px.            */
@media (max-width: 1024px) {
  .wz-filtry label { min-height: 44px; align-items: center; padding: 0.4rem 0; }
  .wz-filtry input[type="checkbox"] { margin-top: 0; width: 20px; height: 20px; }
  .wz-naglowek__kontakt a { display: inline-flex; align-items: center; min-height: 44px; }
  .wz-naglowek__kontakt { padding-block: 0; }
}

/* Kolumna z adresami jest krotsza od formularza. Panel schodzi na sam dol,
   zeby obie kolumny konczyly sie w jednej linii, zamiast zostawiac
   280 px pustki pod adresami. */
@media (min-width: 900px) {
  /* `align-items: start` na siatce sprawia, ze kolumna nie siega dolu
     wiersza i `margin-top: auto` nie ma sie od czego odbic. */
  .wz-kontakt { align-items: stretch; }
  .wz-kontakt__lewa { display: flex; flex-direction: column; }
  .wz-kontakt__panel { margin-top: auto; }
}

/* Numery dzialowe stoja teraz w lewej kolumnie razem z adresami:
   „do kogo dzwonic" i „gdzie jestesmy" to jedna mysl, a formularz obok
   przestal wisiec nad pustka. */
.wz-kontakt__lewa .wz-numery { margin-bottom: var(--wz-8); }
@media (min-width: 900px) {
  .wz-kontakt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .wz-kontakt__lewa .wz-numery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wz-kontakt__lewa h3 + .wz-numery,
.wz-kontakt__lewa h3 + .wz-lokalizacje { margin-top: var(--wz-4); }

/* Pasmo zdjec konczy ciemna sekcje, wiec jej dolne wypelnienie rysowalo
   pod spodem pusty czarny pas. */
.wz-sekcja--bez-dolu { padding-bottom: 0; }
@media (min-width: 900px) { #o-firmie.wz-sekcja--bez-dolu { padding-bottom: 0; } }

/* --- pola wyboru: 44 px pod palcem, 20 px pod okiem -------------------
   Kwadrat 20 px jest za maly na tapniecie, a kwadrat 44 px wyglada jak
   pomylka. Przezroczysta obwodka powieksza POLE TAPNIECIA, nie rysunek:
   tlo obcinamy do pudelka wewnetrznego, obrys rysujemy cieniem.        */
.wz-zgoda input[type="checkbox"],
.wz-filtry input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--wz-obrys);
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.wz-zgoda input[type="checkbox"]:checked,
.wz-filtry input[type="checkbox"]:checked {
  background: var(--wz-czerwien);
  border-color: var(--wz-czerwien);
}
.wz-zgoda input[type="checkbox"]:checked::before,
.wz-filtry input[type="checkbox"]:checked::before {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -2px);
}
.wz-zgoda input[type="checkbox"]:focus-visible,
.wz-filtry input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--wz-czerwien);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .wz-zgoda input[type="checkbox"],
  .wz-filtry input[type="checkbox"] {
    width: 44px;
    height: 44px;
    border: 11px solid transparent;
    border-radius: 15px;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 2px var(--wz-obrys);
  }
  .wz-zgoda input[type="checkbox"]:checked,
  .wz-filtry input[type="checkbox"]:checked {
    /* Regula bez zapytania medialnego jest BARDZIEJ szczegolowa (`:checked`),
       wiec przywracala `border-color: red` i `background-clip: border-box`.
       Obwodka ma zostac przezroczysta, bo to pole tapniecia, nie rysunek. */
    border-color: transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 2px var(--wz-czerwien);
  }
  /* Obwodka zabiera miejsce, wiec odstep obok znika. */
  .wz-filtry label { gap: var(--wz-1, 0.25rem); }
  .wz-zgoda { gap: 0.25rem; }
}

/* Pasmo zdjec konczy ciemna sekcje, a pod nim zaczyna sie jasny kontakt.
   Dwa jasne tona daja 1,12:1, czyli granicy nie widac. Kreska w grafitcie
   zamyka ciemny blok: 15,25:1 do pasma i 17,07:1 do kontaktu. */
.wz-sekcja--bez-dolu { border-bottom: 3px solid var(--wz-grafit); }

/* Okruszki na telefonie: ostatnia pozycja nie jest odnosnikiem, wiec nie
   dostawala 44 px z reguly dla `a` i siadala wyzej niz reszta wiersza.
   Wyrownanie robimy na POZYCJI listy, nie na odnosniku. */
@media (max-width: 900px) {
  .wz-okruszki ol { align-items: center; row-gap: 0; }
  .wz-okruszki li { display: flex; align-items: center; min-height: 44px; }
  /* Odnosnik zostaje pelnej wysokosci, bo to on jest polem tapniecia. */
  .wz-okruszki a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* --- ciasteczka: dwa przyciski, karta o jedna trzecia nizsza ----------
   Bylo 225 px, czyli 27% ekranu na 390 px i 31% na 320 px, przy trzech
   elementach do klikniecia. Polityka prywatnosci wraca do zdania, bo to
   odnosnik do doczytania, a nie trzecia decyzja.                        */
.wz-cookies__akcje { gap: var(--wz-2); }
.wz-cookies p .wz-cookies__link { min-height: 0; display: inline; }

@media (max-width: 767px) {
  .wz-cookies {
    padding: var(--wz-4);
    left: 12px;
    right: 12px;
    width: auto;
  }
  .wz-cookies p { margin-bottom: var(--wz-3); font-size: var(--wz-mikro); line-height: 1.5; }
  .wz-cookies .wz-btn { flex: 1 1 auto; justify-content: center; padding-inline: 0.75rem; }
}

/* --- zdjecia produktow: kafel BIALY, nie kosciany ---------------------
   Zdjecia klienta maja wypalone biale tlo: na 14 z 21 sprawdzonych rog
   zdjecia to czysta biel. Na kosciowym kaflu (#F3F2EF) rysowal sie przez
   to twardy bialy prostokat wokol butelki. Na bialym kaflu zdjecie wtapia
   sie w tlo, a te kilka z lekkim odcieniem czyta sie jako czesc zdjecia,
   nie jako pudelko.                                                     */
.wz-produkt__foto,
.wz-karta-produktu__foto { background: #fff; }
/* Kafel BEZ zdjecia ma wlasna plyte z gradientem — zostawiamy ja
   nietknieta, bo to ona odroznia produkt bez fotografii. */
.wz-produkt__foto--plyta {
  background: radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, var(--wz-kosc) 70%);
}

/* Przyklad zapytania pod polem: na telefonie dlugi tekst zastepczy
   urywal sie w polowie slowa („Na przykła"). */
.wz-szukaj-duza__przyklad {
  margin: calc(-1 * var(--wz-6)) 0 var(--wz-8);
  padding-left: 0.25rem;
  font-size: var(--wz-mikro);
  color: #A29F98;
}

/* Zestawienie opakowan, lepkosci i linii to podglad dla myszki. Na
   telefonie spychalo pierwszy produkt o 450 px w dol, a te same wartosci
   sa jeden dotyk dalej, pod przyciskiem „Filtry". */
@media (max-width: 900px) {
  .wz-fakty { display: none; }
}

/* --- karta produktu: nazwa NAD kolumnami --------------------------------
   Na telefonie kolumny ida jedna pod druga, wiec nazwa produktu ladowala
   pod zdjeciem (480 px) i karta ceny — czyli okolo 980 px od gory. Gosc
   wchodzil na karte i nie widzial, co oglada. Naglowek stoi teraz nad
   obiema kolumnami, na kazdej szerokosci.                                */
.wz-karta-produktu__glowa { grid-column: 1 / -1; }
.wz-karta-produktu__glowa h1 { margin: 0 0 var(--wz-4); }
.wz-karta-produktu__glowa .wz-plakietki { margin-bottom: var(--wz-2); }
@media (min-width: 1025px) {
  .wz-karta-produktu { row-gap: var(--wz-6); }
}
@media (max-width: 1024px) {
  /* Zdjecie nie musi zajmowac polowy ekranu telefonu. */
  .wz-karta-produktu__foto { min-height: 0; padding: var(--wz-5); }
  .wz-karta-produktu__foto img { max-height: 300px; }
}

/* `align-self: start` zostalo po czasach, gdy zdjecie bylo bezposrednim
   dzieckiem siatki i mialo sie kleic do gory. Teraz siedzi w kolumnie
   ustawionej pionowo, wiec ta wartosc zwezala kafel do szerokosci samego
   zdjecia: 230 px w kolumnie 358 px. */
.wz-karta-produktu__foto { align-self: stretch; }

/* Trzy przyciski w karcie ceny mialy trzy rozne szerokosci i konczyly sie
   w trzech roznych miejscach. Na telefonie to glowne akcje na tej stronie,
   wiec ida na pelna szerokosc. */
@media (max-width: 767px) {
  .wz-karta--zapytanie .wz-btn { width: 100%; justify-content: center; }
}

/* Numer kroku „03" przy odstepie 0,16 em czytal sie jak „0 3". Cyfry maja
   stac razem, rozstrzelenie zostawiamy etykietom slownym. */
.wz-krok__nr { letter-spacing: 0.04em; }

/* Plywajaca sluchawka stoi 16 px nad dolem okna, wiec na samym koncu
   strony przykrywala linie „Wykonanie: Arlek.pl". Na telefonie ostatni
   wiersz stopki schodzi w dol i zostawia jej miejsce. */
@media (max-width: 767px) {
  .wz-stopka__dol {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wz-2);
    padding-bottom: 76px;
  }
}

/* Numer telefonu nie lamie sie w polowie. Na 320 px przycisk doradztwa
   pokazywal „605 609" w jednym wierszu i „655" w nastepnym. */
.wz-numer-calosc { white-space: nowrap; }

/* Liczby w pierwszym ekranie: przy 320 px „ponad 20 lat" schodzilo do
   dwoch wierszy, a sasiad zostawal w jednym i podpisy sie rozjezdzaly. */
@media (max-width: 360px) {
  .wz-hero__liczby { grid-template-columns: minmax(0, 1fr); gap: var(--wz-4); }
}

/* Przycisk „Doradztwo techniczne: 605 609 655" ma w srodku dwie czesci.
   Jako pola siatki gietkiej rozjezdzaly sie na przeciwne konce, gdy
   etykieta lamala sie na dwa wiersze. Przy waskim ekranie tresc plynie
   jak zwykly tekst i srodkuje sie razem. */
@media (max-width: 480px) {
  .wz-hero__akcje { flex-direction: column; align-items: stretch; }
  .wz-hero__akcje .wz-btn {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.35;
    padding-block: 0.85rem;
  }
}