/* Wizualizator STRAMA PANELS. Własny arkusz, przedrostek wz-, mobile-first.
   Marka: Poppins (nagłówki), Roboto (tekst), niebieski #006EB6, granat #171B2B,
   tło #F3F5F7, tekst #2D2D2D, szary #6E7378. Bez em-dash w treściach.

   2026-09-07: kolory i typografia doprowadzone do księgi znaku i do reszty serwisu
   (/do-pobrania/, /kontakt/, /panele-lazienkowe/, /elewacje-aluminiowe/). Zniknęły:
   obce niebieskie (#2E9BE0, #8FCBF3, #EEF5FB), pomarańczowy focus #FFB300, szarości
   spoza palety, barwne cienie i poświaty, dekoracyjne gradienty radialne oraz wszystkie
   zaokrąglenia poza kołami (reszta serwisu ma proste kanty). Układ i logika bez zmian. */

@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url("../fonts/Poppins-400-lat.1dafca45aa5f.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url("../fonts/Poppins-400-ext.f74686b21aab.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url("../fonts/Poppins-500-lat.7ba74ba36682.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url("../fonts/Poppins-500-ext.246597e08926.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url("../fonts/Poppins-600-lat.8357ec4f64e8.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url("../fonts/Poppins-600-ext.5391e1fd5adb.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("../fonts/Poppins-700-lat.ad76c2259e64.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("../fonts/Poppins-700-ext.9cf624f04afc.woff2") format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Kolory i kroje 1:1 z księgą znaku i z resztą serwisu (/do-pobrania/, /kontakt/):
   niebieski 006EB6, ciemny 013A6C (hover przycisków), 300 66A8D3 (akcent na granacie),
   50 E6F1F8 (jasne plamy), granat 171B2B, chłód F3F5F7, tekst 2D2D2D, szary 6E7378, linia DFE4E9.
   Jasne szarości na granacie (c9d3dc / 9aa6b3) są te same co w sekcji konta na /do-pobrania/.
   Promienie są zerowe: cały serwis ma proste kanty (patrz .btn i pola w nowa.css). Zmienne
   --wz-r/--wz-r-duzy zostają jako 0, żeby nie przepisywać każdej reguły z osobna. */
.wz-body{
  --wz-niebieski:#006EB6; --wz-niebieski-c:#013A6C; --wz-niebieski-j:#66A8D3; --wz-granat:#171B2B; --wz-n50:#E6F1F8;
  --wz-tlo:#F3F5F7; --wz-tekst:#2D2D2D; --wz-szary:#6E7378; --wz-linia:#DFE4E9; --wz-bialy:#fff; --wz-blad:#b3261e; --wz-blad-tlo:#fdecea;
  --wz-jasny:#c9d3dc; --wz-jasny-cichy:#9aa6b3;
  --wz-naglowki:"Poppins","Segoe UI",Arial,sans-serif; --wz-tresc:"Roboto","Segoe UI",Arial,sans-serif;
  --wz-r:0; --wz-r-duzy:0; --wz-cien:0 12px 32px rgba(23,27,43,.05); --wz-cien-duzy:0 10px 26px rgba(23,27,43,.07);
  --wz-przejscie:.18s cubic-bezier(.2,.8,.2,1);
}
/* Bazowe reguły przez :where(), żeby miały zerową wagę i nie przebijały klas wz-. */
.wz-body main{background:var(--wz-tlo);color:var(--wz-tekst);font-family:var(--wz-tresc);font-size:16px;line-height:1.6;letter-spacing:0}
:where(.wz-body main) *{box-sizing:border-box}
.wz-body [hidden]{display:none !important}
:where(.wz-body main) img{width:auto;max-width:100%}
:where(.wz-body main) :where(h1,h2,h3){font-family:var(--wz-naglowki);color:var(--wz-granat);letter-spacing:-.015em;line-height:1.15;margin:0;font-weight:600}
:where(.wz-body main) p{margin:0 0 1em}
:where(.wz-body main) a{color:inherit}

/* --- typografia i drobiazgi --- */
.wz-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--wz-naglowki);letter-spacing:.16em;text-transform:uppercase;color:var(--wz-niebieski);margin:0 0 14px}
.wz-eyebrow--jasny{color:var(--wz-niebieski-j)}
.wz-kropka{width:8px;height:8px;border-radius:50%;background:var(--wz-niebieski-j);box-shadow:0 0 0 4px rgba(102,168,211,.25);animation:wz-puls 2.2s ease-in-out infinite}
@keyframes wz-puls{0%,100%{box-shadow:0 0 0 4px rgba(102,168,211,.25)}50%{box-shadow:0 0 0 8px rgba(102,168,211,.05)}}
.wz-h1{font-size:clamp(30px,6.4vw,58px);font-weight:700;color:#fff;margin:0 0 18px;text-wrap:balance}
.wz-h1 em{font-style:normal;color:var(--wz-niebieski-j)}
.wz-h1--maly{font-size:clamp(24px,4.6vw,40px);margin-bottom:0}
.wz-h2{font-size:clamp(24px,4.2vw,38px);font-weight:600;margin:0 0 12px;text-wrap:balance}
.wz-h2--jasny{color:#fff}
.wz-lead{font-size:clamp(16px,2.2vw,18px);line-height:1.65;color:var(--wz-jasny);max-width:560px;margin:0 0 26px}
.wz-lead--ciemny{color:var(--wz-szary)}
.wz-drobne{font-size:13px;line-height:1.55;color:var(--wz-szary);margin:14px 0 0}
.wz-link{background:none;border:0;padding:0;font:inherit;color:var(--wz-niebieski);text-decoration:underline;cursor:pointer}

/* --- przyciski --- */
/* .wz-btn = ten sam przycisk co .btn w nowa.css: proste kanty, 1 px ramki, Poppins 500, bez uniesienia i barwnego cienia */
.wz-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 22px;border-radius:var(--wz-r);border:1px solid var(--wz-niebieski);background:var(--wz-niebieski);color:#fff !important;font:500 15px/1.2 var(--wz-naglowki);letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background var(--wz-przejscie),border-color var(--wz-przejscie),color var(--wz-przejscie);width:auto}
.wz-btn:hover{background:var(--wz-niebieski-c);border-color:var(--wz-niebieski-c)}
.wz-btn:focus-visible{outline:2px solid var(--wz-niebieski);outline-offset:2px}
.wz-btn[disabled]{background:var(--wz-linia);border-color:var(--wz-linia);color:var(--wz-szary) !important;cursor:not-allowed}
.wz-btn--duzy{min-height:54px;padding:14px 26px;font-size:16px}
.wz-btn--maly{min-height:38px;padding:8px 14px;font-size:13px}
.wz-btn--pelny{width:100%}
.wz-btn--szkic{background:transparent;border-color:rgba(255,255,255,.55);color:#fff !important}
.wz-btn--szkic:hover{background:#fff;border-color:#fff;color:var(--wz-granat) !important}
.wz-btn--szkic-ciemny{background:#fff;border-color:var(--wz-niebieski);color:var(--wz-niebieski) !important}
.wz-btn--szkic-ciemny:hover{background:var(--wz-n50)}
.wz-akcje{display:flex;flex-direction:column;gap:10px;margin:0 0 30px}

/* --- suwak przed/po --- */
/* touch-action:pan-y - gest pionowy nadal przewija stronę, poziomy liczy wizualizator.js */
.wz-porownanie{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--wz-r);overflow:hidden;background:var(--wz-granat);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.wz-porownanie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.wz-porownanie--dopasuj{margin:0 auto}
.wz-porownanie-przed{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.wz-porownanie-kreska{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-1px);pointer-events:none}
.wz-porownanie-uchwyt{position:absolute;top:50%;left:1px;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:var(--wz-granat);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.wz-porownanie-etyk{position:absolute;top:12px;padding:5px 9px;background:rgba(23,27,43,.75);color:#fff;font:600 11px/1 var(--wz-naglowki);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.wz-porownanie-etyk--l{left:12px}.wz-porownanie-etyk--p{right:12px}
/* input range zostaje dla klawiatury i czytników ekranu, ale nie łapie dotyku (robi to wizualizator.js).
   Selektor przez :has(), bo w DOM input stoi PO kresce i zwykłe ~ by jej nie sięgnęło. */
.wz-porownanie-suwak{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:transparent}
.wz-porownanie:has(.wz-porownanie-suwak:focus-visible) .wz-porownanie-kreska{outline:2px solid var(--wz-niebieski);outline-offset:2px}
.wz-porownanie.jest-plynny .wz-porownanie-przed,.wz-porownanie.jest-plynny .wz-porownanie-kreska{transition:clip-path var(--wz-przejscie),left var(--wz-przejscie)}

/* --- hero --- */
.wz-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--wz-granat);color:#fff;padding:56px 0 40px}
.wz-hero-siatka{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 70% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 30%,transparent 75%)}
.wz-hero-uklad{display:grid;gap:34px}
.wz-fakty{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wz-fakty b{display:block;font:700 clamp(20px,4vw,28px)/1.1 var(--wz-naglowki);color:#fff}
.wz-fakty span{display:block;font-size:12px;line-height:1.4;color:var(--wz-jasny-cichy);margin-top:4px}
.wz-hero-ramka{position:relative;border-radius:var(--wz-r-duzy);padding:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.wz-hero-plakietka{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:#fff;color:var(--wz-granat);box-shadow:0 10px 26px rgba(23,27,43,.25)}
.wz-hero-plakietka img{width:44px;height:44px;object-fit:cover}
.wz-hero-plakietka small{display:block;font:600 10px/1 var(--wz-naglowki);letter-spacing:.12em;text-transform:uppercase;color:var(--wz-niebieski);margin-bottom:3px}
.wz-hero-plakietka strong{display:block;font:600 14px/1.2 var(--wz-naglowki)}
.wz-hero-podpis{margin:14px 0 0;font-size:13px;color:var(--wz-jasny-cichy);text-align:center}

/* --- sekcje --- */
.wz-sekcja{padding:56px 0}
.wz-naglowek{margin-bottom:28px}
.wz-naglowek-opis{color:var(--wz-szary);max-width:460px;margin:0}
.wz-kroki{background:var(--wz-bialy)}
.wz-kroki-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.wz-krok{position:relative;padding:26px 22px 24px;background:var(--wz-tlo);border:1px solid var(--wz-linia);transition:border-color var(--wz-przejscie),box-shadow var(--wz-przejscie)}
.wz-krok:hover{border-color:var(--wz-niebieski);box-shadow:var(--wz-cien-duzy)}
.wz-krok-nr{position:absolute;top:18px;right:22px;font:700 13px/1 var(--wz-naglowki);letter-spacing:.12em;color:var(--wz-niebieski)}
.wz-krok-ikona{width:48px;height:48px;color:var(--wz-niebieski);margin-bottom:16px}
.wz-krok h3{font-size:20px;font-weight:600;margin-bottom:8px}
.wz-krok p{margin:0;color:var(--wz-szary);font-size:15px}

.wz-galeria-siatka{display:grid;gap:22px}
.wz-przyklad{background:var(--wz-bialy);padding:10px;box-shadow:var(--wz-cien);border:1px solid var(--wz-linia)}
.wz-przyklad-stopka{padding:14px 8px 6px;display:flex;flex-direction:column;gap:10px}
.wz-przyklad h3{font-size:17px;font-weight:600}
.wz-przelacznik{display:flex;flex-wrap:wrap;gap:6px}
/* pigułki dekorów = ten sam wzór co spis kategorii .pb-spis a na /do-pobrania/ */
.wz-przelacznik-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--wz-linia);background:#fff;font:500 13px/1 var(--wz-naglowki);color:var(--wz-tekst);cursor:pointer;transition:border-color var(--wz-przejscie),background var(--wz-przejscie),color var(--wz-przejscie)}
.wz-przelacznik-btn img{width:22px;height:22px;object-fit:cover}
.wz-przelacznik-btn:hover{border-color:var(--wz-niebieski);color:var(--wz-niebieski)}
.wz-przelacznik-btn.jest-aktywny{border-color:var(--wz-niebieski);background:var(--wz-n50);color:var(--wz-niebieski)}

.wz-dekory-pas{padding-bottom:40px;background:var(--wz-bialy);overflow:hidden}
.wz-pas{position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wz-pas-tor{list-style:none;margin:0;padding:6px 0;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-left:max(16px,calc((100vw - 1320px)/2))}
.wz-pas-tor::-webkit-scrollbar{display:none}
.wz-pas-tor li{flex:0 0 auto;width:120px;scroll-snap-align:start}
.wz-pas-tor img{width:120px;height:120px;object-fit:cover;box-shadow:var(--wz-cien)}
.wz-pas-tor span{display:block;margin-top:8px;font:500 12px/1.3 var(--wz-naglowki);color:var(--wz-granat)}

/* --- konto --- */
.wz-konto{background:var(--wz-granat);color:var(--wz-jasny);position:relative;overflow:hidden}
.wz-konto-uklad{display:grid;gap:34px;position:relative;z-index:1}
.wz-konto-tekst p{color:var(--wz-jasny)}
.wz-korzysci{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.wz-korzysci li{padding-left:26px;position:relative;color:var(--wz-jasny)}
/* ptaszek jak w .pb-korzysci na /do-pobrania/: dwie kreski, bez barwnej poświaty */
.wz-korzysci li:before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;border-left:2px solid var(--wz-niebieski-j);border-bottom:2px solid var(--wz-niebieski-j);transform:rotate(-45deg)}
.wz-konto .wz-drobne{color:var(--wz-jasny-cichy)}
.wz-formularz{background:#fff;color:var(--wz-tekst);padding:22px 18px;display:grid;gap:16px}
/* przełącznik trybu = .pb-tryb z /do-pobrania/: ramka hairline, aktywny na granacie */
.wz-tryb{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--wz-linia);background:#fff}
.wz-tryb-btn{border:0;background:transparent;padding:11px 8px;font:500 14px/1.2 var(--wz-naglowki);color:var(--wz-szary);cursor:pointer;transition:background var(--wz-przejscie),color var(--wz-przejscie)}
.wz-tryb-btn.jest-aktywny{background:var(--wz-granat);color:#fff}
.wz-pole{display:grid;gap:6px}
.wz-pole label{font:500 12.5px/1.2 var(--wz-naglowki);letter-spacing:.04em;color:var(--wz-granat)}
.wz-pole label b{color:var(--wz-niebieski);font-weight:500}
.wz-pole label small{font:400 12px/1 var(--wz-tresc);color:var(--wz-szary);margin-left:4px}
.wz-pole input{width:100%;font:16px/1.3 var(--wz-tresc);padding:12px 12px;border:1px solid var(--wz-linia);background:#fff;color:var(--wz-tekst);transition:border-color var(--wz-przejscie)}
.wz-pole input:hover{border-color:var(--wz-szary)}
.wz-pole input:focus{outline:2px solid var(--wz-niebieski);outline-offset:0;border-color:var(--wz-niebieski)}
.wz-pole-blad{font-size:13px;color:var(--wz-blad)}
.wz-pola-nowe{display:grid;gap:16px}
.wz-pola-rzad{display:grid;gap:16px}
.wz-zgoda{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--wz-szary);cursor:pointer}
.wz-zgoda input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--wz-niebieski)}
.wz-mam-info{margin:0;font-size:14px;color:var(--wz-szary)}
.wz-alert{margin:0;padding:12px 14px;background:var(--wz-blad-tlo);color:var(--wz-blad);border:1px solid rgba(179,38,30,.28);font-size:14px}
.wz-drobne--form{margin-top:0;font-size:12px}

/* --- FAQ --- */
.wz-faq{background:var(--wz-bialy)}
.wz-faq-uklad{display:grid;gap:10px}
.wz-faq-lista{display:grid;gap:10px}
.wz-faq-pozycja{border:1px solid var(--wz-linia);background:var(--wz-tlo);padding:0 18px}
.wz-faq-pozycja summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;font:600 15.5px/1.35 var(--wz-naglowki);color:var(--wz-granat)}
.wz-faq-pozycja summary::-webkit-details-marker{display:none}
.wz-faq-pozycja summary:after{content:"+";position:absolute;right:0;top:12px;font-size:22px;color:var(--wz-niebieski);transition:transform var(--wz-przejscie)}
.wz-faq-pozycja[open] summary:after{transform:rotate(45deg)}
.wz-faq-pozycja p{margin:0 0 16px;color:var(--wz-szary);font-size:15px}

/* --- komunikaty (sprawdź skrzynkę, zły token) --- */
.wz-komunikat{min-height:60vh;display:flex;align-items:center}
.wz-komunikat-uklad{display:flex;justify-content:center}
/* karta komunikatu = karta formularza z /kontakt/: biała, niebieska kreska u góry, cichy cień */
.wz-komunikat-karta{background:#fff;padding:34px 24px;max-width:600px;width:100%;box-shadow:var(--wz-cien);border-top:4px solid var(--wz-niebieski)}
.wz-komunikat-karta--blad{border-top-color:var(--wz-blad)}
/* kwadratowa plamka z ikoną = .pb-ikona / .kt-znak */
.wz-komunikat-ikona{display:flex;width:56px;height:56px;background:var(--wz-n50);color:var(--wz-niebieski);align-items:center;justify-content:center;margin-bottom:18px}
.wz-komunikat-ikona svg{width:28px;height:28px}
.wz-komunikat-karta--blad .wz-komunikat-ikona{background:var(--wz-blad-tlo);color:var(--wz-blad)}
.wz-komunikat-lista{margin:0 0 24px;padding-left:20px;color:var(--wz-szary);font-size:15px;display:grid;gap:6px}

/* --- studio --- */
.wz-studio-gora{background:var(--wz-granat);color:#fff;padding:34px 0 30px;position:relative;overflow:hidden}
.wz-studio-gora-uklad{display:grid;gap:18px;position:relative}
.wz-studio-status{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* UWAGA: nazwa .wz-licznik jest zajęta także przez wzornik (premium-2026.css: `.wz-licznik span`
   ustawia granat #11375f i grubość 600, a to bije zwykłą klasę). Licznik wizualizatora piszemy
   więc pod .wz-body, żeby wygrać specyficznością, a nie kolejnością wczytywania arkuszy. */
.wz-body .wz-licznik{display:grid;gap:6px;min-width:200px;color:var(--wz-jasny);font-weight:400}
.wz-body .wz-licznik-pasek{display:block;height:6px;background:rgba(255,255,255,.16);overflow:hidden}
.wz-body .wz-licznik-pasek i{display:block;height:100%;background:var(--wz-niebieski-j);transition:width .4s ease}
.wz-body .wz-licznik-tekst{font-size:13px;color:var(--wz-jasny);font-weight:400}
.wz-body .wz-licznik-tekst b{color:#fff;font-weight:600}
.wz-wyloguj{margin:0}
.wz-studio{padding:20px 0 60px;display:grid;gap:18px}
.wz-studio-siatka{display:grid;gap:18px}
.wz-karta{background:#fff;padding:20px 16px;box-shadow:var(--wz-cien);border:1px solid var(--wz-linia)}
.wz-karta-naglowek{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.wz-karta-naglowek h2{font-size:18px;font-weight:600}
.wz-karta-naglowek--rzad{justify-content:space-between}
.wz-karta-info{font-size:13px;color:var(--wz-szary);margin-left:auto}
.wz-karta-info b{color:var(--wz-granat)}
.wz-karta-opis{font-size:14px;color:var(--wz-szary);margin:0 0 14px}
.wz-karta-opis--srodek{text-align:center;margin:10px 0 0}
.wz-nr{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--wz-niebieski);color:#fff;font:600 14px/1 var(--wz-naglowki);align-items:center;justify-content:center;flex:none}

.wz-upusc{display:block;position:relative;border:2px dashed #99C5E2;padding:26px 16px;text-align:center;background:var(--wz-tlo);cursor:pointer;transition:border-color var(--wz-przejscie),background var(--wz-przejscie);min-height:200px}
.wz-upusc.jest-aktywna{border-color:var(--wz-niebieski);background:var(--wz-n50)}
.wz-upusc.ma-plik{padding:8px;border-style:solid;border-color:var(--wz-linia);background:#fff}
.wz-upusc input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.wz-upusc-podglad{display:block;width:100%;max-height:420px;object-fit:contain;background:var(--wz-granat)}
.wz-upusc.ma-plik .wz-upusc-zacheta{display:none}
.wz-upusc-zacheta{display:grid;justify-items:center;gap:6px;color:var(--wz-szary)}
.wz-upusc-zacheta svg{width:44px;height:44px;color:var(--wz-niebieski);margin-bottom:6px}
.wz-upusc-zacheta strong{font:600 16px/1.3 var(--wz-naglowki);color:var(--wz-granat)}
.wz-upusc-zacheta span u{color:var(--wz-niebieski);text-decoration-thickness:1.5px}
.wz-upusc-zacheta small{font-size:12.5px;max-width:320px;line-height:1.45;margin-top:4px}
.wz-upusc-zmien{display:block;font-size:13px;color:var(--wz-szary);padding:10px 0 4px}

.wz-dekory{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wz-dekor{position:relative;display:block;cursor:pointer;overflow:hidden;border:2px solid transparent;background:var(--wz-tlo);transition:border-color var(--wz-przejscie),box-shadow var(--wz-przejscie)}
.wz-dekor input{position:absolute;opacity:0;width:1px;height:1px}
.wz-dekor img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.wz-dekor span{display:block;padding:7px 8px;font:500 11.5px/1.25 var(--wz-naglowki);color:var(--wz-granat);min-height:2.9em;background:#fff}
.wz-dekor-ptaszek{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:#fff;opacity:0;transform:scale(.6);transition:opacity var(--wz-przejscie),transform var(--wz-przejscie);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.wz-dekor-ptaszek:after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:solid var(--wz-niebieski);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.wz-dekor:hover{box-shadow:var(--wz-cien-duzy)}
.wz-dekor:has(input:checked){border-color:var(--wz-niebieski)}
.wz-dekor:has(input:checked) span{background:var(--wz-niebieski);color:#fff}
.wz-dekor:has(input:checked) .wz-dekor-ptaszek{opacity:1;transform:scale(1)}
.wz-dekor:has(input:focus-visible){outline:2px solid var(--wz-niebieski);outline-offset:2px}

.wz-sciany{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wz-sciana{position:relative;display:grid;justify-items:center;gap:8px;padding:12px 8px;border:1px solid var(--wz-linia);background:#fff;cursor:pointer;font:500 13.5px/1.2 var(--wz-naglowki);color:var(--wz-granat);transition:border-color var(--wz-przejscie),background var(--wz-przejscie)}
.wz-sciana input{position:absolute;opacity:0;width:1px;height:1px}
.wz-sciana-ikona{width:52px;height:36px}
.wz-sciana-ikona path{fill:var(--wz-n50);stroke:#99C5E2;stroke-width:1;stroke-linejoin:round}
.wz-sciana-ikona--glowna .g,.wz-sciana-ikona--lewa .l,.wz-sciana-ikona--prawa .r,.wz-sciana-ikona--tylna .g{fill:var(--wz-niebieski);stroke:var(--wz-niebieski-c)}
.wz-sciana-ikona--tylna .g{fill:var(--wz-granat);stroke:var(--wz-granat)}
.wz-sciana:has(input:checked){border-color:var(--wz-niebieski);background:var(--wz-n50);color:var(--wz-niebieski)}
.wz-sciana:has(input:focus-visible){outline:2px solid var(--wz-niebieski);outline-offset:2px}

.wz-postep{margin-top:16px;display:grid;gap:8px}
/* pasek postępu: dwa niebieskie z księgi (006EB6 i 338BC5), bez obcych kolorów */
.wz-postep-pasek{height:8px;background:var(--wz-tlo);overflow:hidden}
.wz-postep-pasek i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--wz-niebieski),#338BC5);background-size:200% 100%;animation:wz-plynie 1.4s linear infinite;transition:width .5s ease}
@keyframes wz-plynie{to{background-position:-200% 0}}
.wz-postep-tekst{margin:0;font-size:14px;color:var(--wz-szary);text-align:center}
/* Lista stanu serii: przy kilku dekorach klient widzi, co gotowe, co się liczy, co padło. */
.wz-kolejka{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px}
.wz-kolejka-poz{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--wz-tlo);border-left:3px solid var(--wz-linia);font-size:13px;color:var(--wz-szary)}
.wz-kolejka-poz img{width:22px;height:22px;object-fit:cover;flex:none}
.wz-kolejka-poz b{font:500 13px/1.2 var(--wz-naglowki);color:var(--wz-granat);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-kolejka-poz span{flex:none;font-size:12px;letter-spacing:.02em}
.wz-kolejka-poz.jest-trwa{border-left-color:var(--wz-niebieski);background:var(--wz-n50)}
.wz-kolejka-poz.jest-trwa span{color:var(--wz-niebieski)}
.wz-kolejka-poz.jest-gotowe{border-left-color:var(--wz-niebieski)}
.wz-kolejka-poz.jest-gotowe span:before{content:"\2713 ";color:var(--wz-niebieski)}
.wz-kolejka-poz.jest-blad{border-left-color:var(--wz-blad);background:var(--wz-blad-tlo)}
.wz-kolejka-poz.jest-blad span{color:var(--wz-blad)}
.wz-kolejka-poz.jest-pominiete{opacity:.65}
#wz-blad{margin-top:14px}

.wz-wyniki{scroll-margin-top:90px}
.wz-karta-naglowek--wyniki{align-items:flex-start;flex-direction:column;gap:10px}
.wz-zakladki{display:flex;flex-wrap:wrap;gap:6px}
.wz-zakladka{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--wz-linia);background:#fff;font:500 13px/1 var(--wz-naglowki);color:var(--wz-tekst);cursor:pointer;transition:border-color var(--wz-przejscie),background var(--wz-przejscie),color var(--wz-przejscie)}
.wz-zakladka img{width:22px;height:22px;object-fit:cover}
.wz-zakladka:hover{border-color:var(--wz-niebieski);color:var(--wz-niebieski)}
.wz-zakladka.jest-aktywna{border-color:var(--wz-niebieski);background:var(--wz-n50);color:var(--wz-niebieski)}
.wz-wyniki-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:13.5px;color:var(--wz-szary)}
.wz-wyniki-meta b{color:var(--wz-granat);font-weight:600}
.wz-wyniki-akcje{display:grid;gap:10px;margin-top:14px}
.wz-siatka-porownawcza{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--wz-linia)}
.wz-siatka-porownawcza figure{margin:0;position:relative;overflow:hidden;cursor:pointer;background:var(--wz-granat)}
.wz-siatka-porownawcza img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.wz-siatka-porownawcza figure:hover img{transform:scale(1.03)}
.wz-siatka-porownawcza figcaption{position:absolute;left:8px;bottom:8px;right:8px;padding:6px 10px;background:rgba(23,27,43,.75);color:#fff;font:500 12px/1.2 var(--wz-naglowki)}
.wz-siatka-porownawcza figure.jest-przed figcaption{background:rgba(255,255,255,.9);color:var(--wz-granat)}

.wz-studio-dol{display:grid;gap:18px}
.wz-filtr{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--wz-naglowki);color:var(--wz-szary)}
.wz-filtr select{font:14px var(--wz-tresc);padding:8px 10px;border:1px solid var(--wz-linia);background:#fff;color:var(--wz-tekst)}
.wz-historia-siatka{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wz-historia-pozycja{position:relative;border:0;padding:0;background:var(--wz-granat);overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit}
.wz-historia-pozycja img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.wz-historia-pozycja:hover img{transform:scale(1.04)}
.wz-historia-pozycja span{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(23,27,43,.9));color:#fff;font:500 12px/1.3 var(--wz-naglowki)}
.wz-historia-pozycja small{display:block;font:400 11px/1.3 var(--wz-tresc);color:var(--wz-jasny);margin-top:2px}
.wz-pusto{font-size:14px;color:var(--wz-szary);margin:8px 0 0}
.wz-zainteresowania-lista{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.wz-zainteresowania-lista li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--wz-tlo)}
.wz-zainteresowania-lista img{width:36px;height:36px;object-fit:cover}
.wz-zainteresowania-lista b{font:600 14px/1.2 var(--wz-naglowki);color:var(--wz-granat);flex:1}
.wz-zainteresowania-lista span{font-size:12.5px;color:var(--wz-szary);white-space:nowrap}

.wz-modal{border:0;padding:0;background:transparent;max-width:min(96vw,1000px);width:100%}
.wz-modal::backdrop{background:rgba(23,27,43,.7)}
.wz-modal-karta{background:#fff;padding:16px;box-shadow:var(--wz-cien-duzy)}
.wz-modal-naglowek{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.wz-modal-naglowek h2{font-size:17px;font-weight:600}
.wz-modal-zamknij{border:0;background:var(--wz-tlo);width:36px;height:36px;font-size:22px;line-height:1;cursor:pointer;color:var(--wz-granat)}

/* --- większe ekrany --- */
@media (min-width:640px){
  .wz-akcje{flex-direction:row}
  .wz-pola-rzad{grid-template-columns:1fr 1fr}
  .wz-wyniki-akcje{grid-template-columns:repeat(3,auto);justify-content:start}
  .wz-dekory{grid-template-columns:repeat(4,1fr)}
  .wz-sciany{grid-template-columns:repeat(4,1fr)}
  .wz-historia-siatka{grid-template-columns:repeat(3,1fr)}
  .wz-siatka-porownawcza{grid-template-columns:repeat(3,1fr)}
  .wz-formularz{padding:30px 28px}
  .wz-karta{padding:24px 22px}
  .wz-komunikat-karta{padding:44px 40px}
  .wz-studio-gora-uklad{grid-template-columns:1fr auto;align-items:end}
  .wz-karta-naglowek--wyniki{flex-direction:row;align-items:center}
  .wz-zakladki{margin-left:auto}
}
@media (min-width:960px){
  .wz-hero{padding:80px 0 64px}
  .wz-hero-uklad{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:56px}
  .wz-sekcja{padding:84px 0}
  .wz-naglowek--rzad{display:flex;justify-content:space-between;align-items:end;gap:40px}
  .wz-kroki-lista{grid-template-columns:repeat(3,1fr);gap:20px}
  .wz-krok{padding:32px 28px 30px}
  .wz-galeria-siatka{grid-template-columns:repeat(3,1fr)}
  .wz-konto-uklad{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:72px}
  .wz-faq-uklad{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px}
  .wz-studio-siatka{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"zdjecie dekory" "sciana dekory" "start dekory";align-items:start}
  .wz-krok-zdjecie{grid-area:zdjecie}.wz-krok-dekory{grid-area:dekory}.wz-krok-sciana{grid-area:sciana}.wz-krok-start{grid-area:start}
  .wz-dekory{grid-template-columns:repeat(5,1fr)}
  .wz-studio-dol{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .wz-historia-siatka{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1280px){
  .wz-dekory{grid-template-columns:repeat(7,1fr)}
  .wz-historia-siatka{grid-template-columns:repeat(4,1fr)}
  .wz-siatka-porownawcza{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .wz-body main *{animation:none !important;transition:none !important}
}