/* ==========================================================================
   POMRUK — system wizualny
   ========================================================================== */
:root{
  --grafit:#14161A; --papier:#F5F4F1; --biel:#FFFFFF;
  --beton:#6E7279; --beton-jasny:#9A9EA5; --linia:#E2DFD9; --linia-mocna:#C9C5BD;
  --naped:#FF4A17; --mycie:#0B5FFF; --ekwipunek:#00B37E; --skora:#B4794A;
  --akcent:var(--naped);
  --f-tekst:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --f-naglowek:'Archivo','Inter',-apple-system,Arial,sans-serif;
  --f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  --max:1340px; --gut:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--grafit);
  font-family:var(--f-tekst);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis-weight:none}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-naglowek);font-weight:800;letter-spacing:-.022em;line-height:1.04;margin:0}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--akcent);outline-offset:2px}

/* ---------- Skala typografii ---------- */
.t-mega{font-size:clamp(2.9rem,8.2vw,6.6rem);letter-spacing:-.035em;line-height:.93}
.t-duzy{font-size:clamp(2rem,4.6vw,3.5rem)}
.t-sredni{font-size:clamp(1.4rem,2.5vw,2.05rem)}
.t-maly{font-size:clamp(1.08rem,1.6vw,1.3rem)}
.lead{font-size:clamp(1.05rem,1.55vw,1.32rem);line-height:1.5;color:#33373D;max-width:62ch}
.etykieta{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--beton);font-weight:500}
.etykieta--akc{color:var(--akcent)}
.mono{font-family:var(--f-mono)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sekcja{padding-block:clamp(48px,7vw,92px)}
.sekcja--zwarta{padding-block:clamp(32px,4vw,52px)}
.kreska{border-top:1px solid var(--linia)}
.siatka{display:grid;gap:clamp(20px,3vw,34px)}
@media(min-width:760px){.s-2{grid-template-columns:repeat(2,1fr)}.s-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.s-4{grid-template-columns:repeat(4,1fr)}
  .s-3{grid-template-columns:repeat(3,1fr)}.s-12-5{grid-template-columns:5fr 7fr}}

/* ---------- Przyciski ---------- */
.btn{display:inline-block;font-family:var(--f-naglowek);font-weight:700;font-size:.95rem;
  letter-spacing:.01em;padding:15px 28px;border:2px solid var(--grafit);background:var(--grafit);
  color:var(--papier);text-decoration:none;cursor:pointer;border-radius:0;
  transition:background .14s,color .14s;text-align:center}
.btn:hover{background:transparent;color:var(--grafit)}
.btn--akc{background:var(--akcent);border-color:var(--akcent);color:#fff}
.btn--akc:hover{background:transparent;color:var(--akcent)}
.btn--puste{background:transparent;color:var(--grafit)}
.btn--puste:hover{background:var(--grafit);color:var(--papier)}
.btn--jasny{background:var(--papier);border-color:var(--papier);color:var(--grafit)}
.btn--jasny:hover{background:transparent;color:var(--papier)}
.btn--szeroki{display:block;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- Nagłówek ---------- */
.gora{position:sticky;top:0;z-index:60;background:var(--papier);border-bottom:1px solid var(--linia)}
.gora__in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);height:70px;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.logo svg{width:27px;height:24px}
.logo b{font-family:var(--f-naglowek);font-weight:800;font-size:1.32rem;letter-spacing:.08em}
.nav{display:none;gap:clamp(14px,2vw,28px);margin-right:auto}
.nav a{text-decoration:none;font-weight:600;font-size:.94rem;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--grafit)}
@media(min-width:900px){.nav{display:flex}}
.gora__akcje{margin-left:auto;display:flex;align-items:center;gap:14px}
.kosz-link{text-decoration:none;font-family:var(--f-naglowek);font-weight:700;font-size:.9rem;
  border:2px solid var(--grafit);padding:9px 16px;white-space:nowrap}
.kosz-link:hover{background:var(--grafit);color:var(--papier)}
.kosz-link b{font-family:var(--f-mono)}
@media(max-width:430px){
  .logo svg{width:22px;height:20px}
  .logo b{font-size:1.08rem;letter-spacing:.04em}
  .logo{gap:8px}
  .gora__in{gap:10px}
  .kosz-link{padding:9px 11px;font-size:.84rem}
  .menu-btn{padding:8px 10px;font-size:.8rem}
}
.menu-btn{display:block;background:none;border:2px solid var(--grafit);padding:8px 12px;
  font-family:var(--f-naglowek);font-weight:700;cursor:pointer;font-size:.85rem}
@media(min-width:900px){.menu-btn{display:none}}
.mnav{display:none;border-bottom:1px solid var(--linia);background:var(--papier)}
.mnav.otw{display:block}
.mnav a{display:block;padding:15px var(--gut);text-decoration:none;font-weight:600;
  border-top:1px solid var(--linia)}

/* ---------- Pasek informacyjny ---------- */
.pasek{background:var(--grafit);color:var(--papier);font-size:.82rem;letter-spacing:.02em}
.pasek__in{max-width:var(--max);margin-inline:auto;padding:9px var(--gut);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.pasek b{color:var(--naped)}

/* ---------- Hero ---------- */
.hero{border-bottom:1px solid var(--linia);background:var(--papier);overflow:hidden}
.hero__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(24px,4vw,48px);padding-block:clamp(40px,6vw,76px);align-items:center}
@media(min-width:900px){.hero__in{grid-template-columns:1.15fr .85fr}}
.hero h1{margin-bottom:22px}
.hero__pod{max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.34rem);color:#33373D;line-height:1.5}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__fakty{display:flex;flex-wrap:wrap;gap:0;margin-top:38px;border-top:1px solid var(--linia-mocna)}
.hero__fakt{flex:1 1 140px;padding:16px 18px 0 0}
.hero__fakt b{display:block;font-family:var(--f-naglowek);font-size:1.5rem;font-weight:800;line-height:1.1}
.hero__fakt span{font-size:.84rem;color:var(--beton)}
.hero__wiz{position:relative;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(6px,1.4vw,18px);background:#14161A;padding:clamp(26px,4vw,44px) clamp(14px,3vw,30px) 0;
  min-height:clamp(340px,42vw,520px);overflow:hidden}
.hero__wiz::before{content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:repeating-linear-gradient(90deg,#1C1F24 0 1px,transparent 1px 44px)}
.hero__wiz img{position:relative;height:clamp(240px,31vw,400px);width:auto;max-width:none}
.hero__wiz figcaption{position:absolute;left:clamp(14px,3vw,30px);top:clamp(14px,2vw,22px);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#7C8189}

/* ---------- Siatka produktów ---------- */
.produkty{display:grid;gap:0;border-top:1px solid var(--linia);border-left:1px solid var(--linia)}
@media(min-width:620px){.produkty{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.produkty{grid-template-columns:repeat(4,1fr)}}
.produkty--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.kafel{position:relative;display:flex;flex-direction:column;background:var(--biel);
  border-right:1px solid var(--linia);border-bottom:1px solid var(--linia);
  padding:22px 22px 20px;text-decoration:none;transition:background .15s}
.kafel:hover{background:#FBFAF8}
.kafel::after{content:"";position:absolute;left:0;top:0;width:4px;height:0;
  background:var(--kat,var(--grafit));transition:height .2s}
.kafel:hover::after{height:100%}
.kafel__fot{display:flex;align-items:flex-end;justify-content:center;height:260px;margin-bottom:18px;
  background:linear-gradient(180deg,#F7F6F3,#EEECE7);padding-top:14px}
.kafel__fot img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;
  transition:transform .22s}
.kafel:hover .kafel__fot img{transform:translateY(-6px)}
.kafel__kat{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kat,var(--beton));font-weight:600;margin-bottom:8px}
.kafel h3{font-size:1.32rem;margin-bottom:3px}
.kafel__pod{font-size:.88rem;color:var(--beton);line-height:1.42;margin-bottom:14px;flex:1}
.kafel__stopka{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:13px;border-top:1px solid var(--linia)}
.cena{font-family:var(--f-naglowek);font-weight:800;font-size:1.28rem;white-space:nowrap}
.cena small{font-family:var(--f-tekst);font-weight:500;font-size:.74rem;color:var(--beton);display:block;
  letter-spacing:0}
.kafel__akcja{font-family:var(--f-naglowek);font-weight:700;font-size:.85rem;color:var(--kat,var(--grafit))}

/* ---------- Karta produktu ---------- */
.karta{display:grid;gap:clamp(26px,4vw,56px);padding-block:clamp(28px,4vw,52px)}
@media(min-width:900px){.karta{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.karta__fot{background:linear-gradient(180deg,#EDEBE6,#E3E0D9);display:flex;align-items:center;
  justify-content:center;padding:clamp(26px,4vw,52px);position:relative;align-self:start}
.karta__fot img{max-height:min(62vh,560px);width:auto}
.karta__flaga{position:absolute;left:0;top:0;background:var(--kat);color:#fff;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;padding:8px 14px;font-weight:600}
.karta h1{margin-bottom:10px}
.karta__pod{font-size:1.12rem;color:var(--beton);margin-bottom:20px}
.karta__cena{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:22px 0 6px}
.karta__cena .duza{font-family:var(--f-naglowek);font-weight:800;font-size:2.5rem;letter-spacing:-.02em}
.dodaj{display:flex;gap:10px;margin:22px 0;flex-wrap:wrap}
.ilosc{display:flex;border:2px solid var(--grafit)}
.ilosc button{width:46px;background:none;border:0;font-size:1.25rem;cursor:pointer;font-weight:700;
  font-family:var(--f-naglowek)}
.ilosc button:hover{background:var(--grafit);color:var(--papier)}
.ilosc input{width:52px;border:0;border-inline:2px solid var(--grafit);text-align:center;
  font-family:var(--f-mono);font-size:1rem;background:none;-moz-appearance:textfield}
.ilosc input::-webkit-outer-spin-button,.ilosc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.korzysci{margin:24px 0}
.korzysci li{display:flex;gap:13px;padding:9px 0;border-bottom:1px solid var(--linia);font-size:.97rem}
.korzysci li::before{content:"";flex:0 0 14px;height:3px;background:var(--kat);margin-top:.68em}
.wysylka-info{border:1px solid var(--linia);border-left:4px solid var(--kat);padding:16px 18px;
  font-size:.9rem;background:var(--biel);margin-top:22px}
.wysylka-info b{font-family:var(--f-naglowek)}

/* ---------- Bloki treści ---------- */
.proza{max-width:68ch;font-size:1.03rem;line-height:1.72}
.proza h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2em 0 .6em}
.proza h3{font-size:1.22rem;margin:1.8em 0 .5em}
.proza ul{margin:0 0 1.2em}
.proza ul li{padding-left:22px;position:relative;margin-bottom:.5em}
.proza ul li::before{content:"";position:absolute;left:0;top:.65em;width:11px;height:2px;background:var(--akcent)}
.proza ol{margin:0 0 1.2em;padding-left:1.3em}
.proza ol li{margin-bottom:.5em}
.proza a{color:var(--grafit);text-decoration-thickness:1px;text-underline-offset:3px}

.kroki{counter-reset:k;margin:0}
.kroki li{counter-increment:k;display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--linia)}
.kroki li::before{content:counter(k,decimal-leading-zero);font-family:var(--f-mono);font-weight:600;
  color:var(--kat,var(--akcent));font-size:.9rem;flex:0 0 30px;padding-top:2px}

.spec{width:100%;border-collapse:collapse;font-size:.93rem}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--linia);vertical-align:top}
.spec th{font-weight:500;color:var(--beton);width:44%;padding-right:18px}
.spec td{font-family:var(--f-mono);font-size:.87rem}

.faq{border-top:1px solid var(--linia)}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{cursor:pointer;padding:18px 34px 18px 0;font-family:var(--f-naglowek);font-weight:700;
  font-size:1.03rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:1.5rem;font-weight:400;
  color:var(--beton);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 40px 20px 0;margin:0;color:#3A3E44;max-width:72ch}

/* ---------- Bloki pełnokolorowe ---------- */
.blok-ciemny{background:var(--grafit);color:var(--papier)}
.blok-ciemny .lead,.blok-ciemny p{color:#C8CBD0}
.blok-ciemny .etykieta{color:var(--beton-jasny)}
.blok-kat{color:#fff;background:var(--kat)}
.blok-kat .lead,.blok-kat p{color:rgba(255,255,255,.88)}
.blok-kat .etykieta{color:rgba(255,255,255,.72)}

/* ---------- Kategorie: nawigacja ---------- */
.katnav{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--linia);background:var(--biel)}
.katnav a{flex:1 1 170px;padding:18px 20px;text-decoration:none;border-right:1px solid var(--linia);
  transition:background .15s;min-width:0}
.katnav a:last-child{border-right:0}
.katnav a:hover,.katnav a[aria-current]{background:var(--kk);color:#fff}
.katnav a:hover .katnav__n,.katnav a[aria-current] .katnav__n{color:rgba(255,255,255,.75)}
.katnav b{display:block;font-family:var(--f-naglowek);font-size:1.12rem;font-weight:800}
.katnav__n{font-family:var(--f-mono);font-size:.74rem;color:var(--beton)}

/* ---------- Okruszki ---------- */
.okruszki{font-size:.82rem;color:var(--beton);padding-block:14px;border-bottom:1px solid var(--linia)}
.okruszki a{text-decoration:none}
.okruszki a:hover{text-decoration:underline}
.okruszki span{margin-inline:7px;color:var(--linia-mocna)}

/* ---------- Koszyk / formularze ---------- */
.tabela{width:100%;border-collapse:collapse}
.tabela th{text-align:left;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--beton);font-weight:500;padding:12px 10px;border-bottom:2px solid var(--grafit)}
.tabela td{padding:18px 10px;border-bottom:1px solid var(--linia);vertical-align:middle}
.tabela td:first-child,.tabela th:first-child{padding-left:0}
.tabela td:last-child,.tabela th:last-child{padding-right:0;text-align:right}
.kosz-prod{display:flex;gap:16px;align-items:center;text-decoration:none}
.kosz-prod img{width:52px;flex:0 0 52px}
.kosz-prod b{font-family:var(--f-naglowek);font-size:1.02rem;display:block}
.kosz-prod span{font-size:.82rem;color:var(--beton)}
.podsum{border:2px solid var(--grafit);padding:24px;background:var(--biel);position:sticky;top:90px}
.podsum__w{display:flex;justify-content:space-between;padding:9px 0;font-size:.95rem}
.podsum__w--duzy{border-top:2px solid var(--grafit);margin-top:10px;padding-top:16px;
  font-family:var(--f-naglowek);font-weight:800;font-size:1.32rem}
.pole{margin-bottom:16px}
.pole label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.pole input,.pole textarea,.pole select{width:100%;padding:13px 14px;border:2px solid var(--linia-mocna);
  background:var(--biel);font-family:inherit;font-size:1rem;border-radius:0}
.pole input:focus,.pole textarea:focus,.pole select:focus{border-color:var(--grafit);outline:none}
.pole--blad input{border-color:#D0021B}
.blad{color:#D0021B;font-size:.82rem;margin-top:5px}
.radio-grupa label{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--linia-mocna);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;font-weight:400;font-size:.95rem}
.radio-grupa label:has(input:checked){border-color:var(--grafit);background:var(--biel)}
.radio-grupa input{margin-top:3px;flex:0 0 auto;width:auto}
.komunikat{padding:16px 18px;border-left:4px solid var(--akcent);background:var(--biel);
  border:1px solid var(--linia);border-left-width:4px;margin-bottom:24px}
.komunikat--ok{border-left-color:var(--ekwipunek)}

/* ---------- Poradniki ---------- */
.wpisy{border-top:1px solid var(--linia)}
.wpis{display:grid;gap:8px 30px;padding:26px 0;border-bottom:1px solid var(--linia);
  text-decoration:none;transition:padding-left .16s}
.wpis:hover{padding-left:10px}
@media(min-width:760px){.wpis{grid-template-columns:150px 1fr}}
.wpis h3{font-size:1.32rem;margin-bottom:6px}
.wpis p{color:var(--beton);font-size:.95rem;margin:0;max-width:70ch}

/* ---------- Stopka ---------- */
.stopka{background:var(--grafit);color:var(--papier);padding-block:clamp(42px,5vw,68px);margin-top:0}
.stopka__siatka{display:grid;gap:34px}
@media(min-width:760px){.stopka__siatka{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.stopka .stopka-h{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--beton-jasny);font-weight:500;margin-bottom:16px}
.stopka a{color:#D6D9DD;text-decoration:none;display:block;padding:5px 0;font-size:.93rem}
.stopka a:hover{color:#fff;text-decoration:underline}
.stopka__logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.stopka__logo b{font-family:var(--f-naglowek);font-weight:800;font-size:1.5rem;letter-spacing:.08em}
.stopka__dol{border-top:1px solid #2A2E34;margin-top:42px;padding-top:22px;display:flex;
  flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.82rem;color:var(--beton-jasny)}

/* ---------- Pomocnicze ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:200;background:var(--grafit);color:#fff;padding:12px 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.srodek{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}