/* ==========================================================================
   BuiltGreen — arkusz główny
   Zasady: biel jako podłoże, hierarchia ze skali (nie z grubości),
   hairline 1px zamiast ramek i cieni, ostre rogi, zieleń wyłącznie jako akcent.
   ========================================================================== */

/* --------------------------------------------------------------- fonty --- */
/* Manrope — geometryczny sans o zmiennej grubości (200–800) na licencji SIL OFL.
   Zastąpił Geomanist, którego odmiana Bold nie zawierała polskich diakrytyków.
   Dwa podzbiory z zakresami znaków: przeglądarka pobiera tylko to, czego użyje. */
@font-face{
  font-family:"Manrope";
  src:url("../fonts/Manrope-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/Manrope-latin-ext.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokeny --- */
:root{
  color-scheme:light;

  --paper:#FFFFFF;
  --paper-2:#FAFAF8;
  --ink:#171A13;
  --ink-2:#6B7065;
  --ink-3:#9BA093;
  --hair:#E4E5DF;
  --hair-2:#F0F1EC;
  --accent:#4C7C3F;
  --accent-2:#7DB96E;
  --accent-soft:#EDF3EA;

  --gut:clamp(20px,4vw,64px);
  --maxw:1340px;
  /* połowa odstępu między sekcjami — dokłada się z obu stron linii,
     więc pełna przerwa to dwukrotność tej wartości */
  --sec:clamp(40px,5vw,76px);

  --t:.2s ease;
}

/* ---------------------------------------------------------------- reset --- */
*{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(--paper); color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
/* Własne display (np. flex na kaflach) nadpisuje domyślną regułę przeglądarki
   dla atrybutu hidden — bez tego filtrowanie produktów nie ukrywa niczego. */
[hidden]{display:none !important}
/* <picture> nie ma własnego wyglądu — niech <img> trafi wprost do siatki rodzica.
   <source> trzeba jawnie ukryć: przy display:contents przestaje być pomijany
   i zaczyna zajmować komórkę siatki, rozbijając układ. */
picture{display:contents}
picture source{display:none}
button{font:inherit}

.shell{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 20px; z-index:100;
}
.skip:focus{left:0}

/* ------------------------------------------------------------ typografia --- */
h1,h2,h3,h4{margin:0; font-weight:400; text-wrap:balance; line-height:1.06; letter-spacing:-.035em}
/* Nagłówek strony w najgrubszej odmianie kroju (Manrope sięga 800).
   Grubszy rysunek liter znosi ciaśniejszy trakting niż zwykła odmiana. */
h1{font-size:clamp(2.4rem,6vw,5rem); font-weight:800; letter-spacing:-.045em}
h2{font-size:clamp(1.8rem,3.6vw,3rem)}
h3{font-size:1.2rem; letter-spacing:-.02em; line-height:1.2}
h4{font-size:1rem; letter-spacing:-.015em}
p{margin:0}

/* Zielony akcent na początku nagłówka — <em> pełni tu rolę uchwytu
   do koloru, nie kursywy. */
h1 em,h2 em{font-style:normal; color:var(--accent)}

/* Nazwy produktów w najgrubszej odmianie kroju — tak samo jak nagłówki stron.
   Uwaga: ta klasa ma wyższą specyficzność niż selektor h1, więc to ona
   decyduje o grubości nagłówka na karcie produktu. */
.bold{font-weight:800; letter-spacing:-.02em}

.lbl{font-size:.7rem; letter-spacing:.185em; text-transform:uppercase; color:var(--ink-3); line-height:1.4}
.lbl-a{color:var(--accent)}
.lede{font-size:clamp(1rem,1.4vw,1.16rem); line-height:1.58; color:var(--ink-2); max-width:54ch}
.muted{color:var(--ink-2)}
.small{font-size:.92rem}
.col{display:flex; flex-direction:column}
.hr{height:1px; background:var(--hair); border:0; margin:0}

a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* -------------------------------------------------------------- przyciski --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none; font-size:.9rem; letter-spacing:.02em; padding:14px 26px;
  border:1px solid var(--ink); cursor:pointer; background:transparent; color:var(--ink);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.btn-line{border-color:var(--hair)}
.btn-line:hover{border-color:var(--ink)}
.btn-green{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-green:hover{background:#3C5F32; border-color:#3C5F32}
/* Przyciski trzymają się jednej zasady w całym serwisie:
   zawsze wyrównane do lewej krawędzi treści, której dotyczą,
   nigdy nie rozciągają się na szerokość kolumny,
   a odstęp nad nimi pochodzi z klasy, nie ze stylu w atrybucie. */
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn-row.center{justify-content:center}
.btn-row.after{margin-top:clamp(30px,4vw,44px)}   /* pod siatką lub tabelą */

/* w kolumnie tekstu przycisk zajmuje tyle, ile potrzebuje */
.split-txt > .btn,.split-txt > .btn-row,
.strip-in .btn-row,.fields .btn{align-self:start}

/* ------------------------------------------------------------ pomocnicze --- */
/* Klasy zastępujące styl wpisywany w atrybucie — jedno miejsce na wartości,
   które wcześniej powtarzały się przy poszczególnych znacznikach. */
.narrow{max-width:52ch}
.narrow-s{max-width:44ch}
.gap-m{gap:18px}
.gap-l{gap:20px}
.strip-h{margin-top:12px}
.fieldset-plain{border:0; padding:0; margin:0}
.legend-plain{padding:0; margin-bottom:7px}
.honeypot{position:absolute; left:-9999px}

/* hasło marki w stopce — zapis jak na opakowaniach */
.foot-tagline{
  font-size:.72rem; letter-spacing:.185em; text-transform:uppercase;
  color:var(--ink); line-height:1.7; margin-bottom:14px;
}
.foot-desc{font-size:.9rem; color:var(--ink-2); line-height:1.55; max-width:32ch}

/* ------------------------------------------------------------------- nav --- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--hair);
}
.nav-in{display:flex; align-items:center; gap:38px; height:74px}
.logo{display:flex; align-items:center; text-decoration:none; color:inherit; flex:none}
.logo img{height:46px; width:auto; display:block}
.logo-foot{margin-bottom:18px}
.logo-foot img{height:46px}
@media (max-width:520px){ .logo img{height:36px} }
.nav-links{display:flex; gap:30px; margin-left:14px}
.nav-links a{
  text-decoration:none; color:var(--ink-2); font-size:.93rem;
  padding:4px 0; border-bottom:1px solid transparent;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
.nav-sp{flex:1}
/* Numer telefonu w nagłówku — standard w handlu B2B. Na wąskich ekranach
   ustępuje miejsca przyciskowi, ale zostaje w stopce i na Współpracy. */
.nav-tel{
  color:var(--ink); text-decoration:none; font-size:.93rem; font-weight:700;
  letter-spacing:-.01em; white-space:nowrap; margin-right:6px;
}
.nav-tel:hover{color:var(--accent)}
@media (max-width:1080px){ .nav-tel{display:none} }
.nav-cta{
  display:inline-flex; align-items:center; text-decoration:none; background:var(--accent);
  color:#fff; font-size:.86rem; letter-spacing:.02em; padding:11px 20px; white-space:nowrap;
  transition:background var(--t);
}
.nav-cta:hover{background:#3C5F32}
.nav-burger{display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink)}
.nav-burger svg{width:22px; height:22px; display:block}

@media (max-width:980px){
  .nav-links{
    display:none; position:absolute; top:74px; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--hair); flex-direction:column; gap:0; margin:0;
    padding:8px var(--gut) 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0; border-bottom:1px solid var(--hair-2)}
  .nav-burger{display:block; order:3}
  .nav-cta{order:2; padding:10px 16px; font-size:.82rem}
  .nav-in{gap:12px}
}

/* ---------------------------------------------------------------- sekcje --- */
.sec{padding-block:var(--sec)}
.sec-tight{padding-top:0}
/* Każda sekcja poza pierwszą na stronie jest rozdzielona linią, z odstępem
   równym nad nią i pod nią. Jedna zasada w całym serwisie. */
.sec-rule{border-top:1px solid var(--hair); padding-top:var(--sec)}
.sec-head{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,60px);
  align-items:end; margin-bottom:clamp(34px,5vw,60px);
}
.sec-head h2{margin-top:17px}
/* Nagłówek podstrony jest mniejszy od tego w hero: siedzi w kolumnie o połowie
   szerokości sekcji, więc przy skali strony głównej nie mieściłby się w wierszu. */
.sec-head h1{font-size:clamp(2.2rem,4.4vw,3.5rem)}
@media (max-width:860px){ .sec-head{grid-template-columns:1fr; gap:16px} }

/* -------------------------------------------------------------- siatki --- */
/* wspólny wzorzec: siatka rysowana hairline'ami, bez kart i cieni */
.gridline{border-top:1px solid var(--hair); border-left:1px solid var(--hair)}
.gridline > *{border-right:1px solid var(--hair); border-bottom:1px solid var(--hair)}

.cards-3{display:grid; grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .cards-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .cards-3{grid-template-columns:1fr} }
.cards-4{display:grid; grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .cards-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .cards-4{grid-template-columns:1fr} }

/* -------------------------------------------------------- kafel produktu --- */
.prod{
  padding:26px 26px 30px; display:flex; flex-direction:column; gap:14px;
  text-decoration:none; color:inherit; background:var(--paper); transition:background var(--t);
}
.prod:hover{background:var(--paper-2)}
/* nazwa i gramatura w jednym wierszu */
.prod-head{display:flex; align-items:baseline; gap:12px}
.prod-head .prod-name{flex:1; min-width:0}
.prod-pack{
  flex:none; font-size:.8rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Kwadratowe pole na packshot. flex:none — inaczej wyrównywanie wysokości kafli
   w siatce ściska ten element i łamie proporcję zdjęcia.
   object-fit:contain trzyma proporcje niezależnie od rozmiaru pola. */
.prod-img{aspect-ratio:1/1; flex:none; padding:6px 0; display:flex; align-items:center; justify-content:center}
.prod-img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.prod-name{font-size:1.14rem; letter-spacing:-.02em; line-height:1.15}
.prod-desc{font-size:.9rem; color:var(--ink-2); line-height:1.5; flex:1}
.sp{flex:1}
.arrow{color:var(--ink-3); transition:transform var(--t),color var(--t)}
.dlitem:hover .arrow{color:var(--accent)}
@media (prefers-reduced-motion:reduce){ .arrow{transition:none} }

/* --------------------------------------------------- kafel grupy produktów --- */
.cat{
  padding:26px 26px 30px; display:flex; flex-direction:column; gap:18px;
  text-decoration:none; color:inherit; background:var(--paper); transition:background var(--t);
}
.cat:hover{background:var(--paper-2)}
.cat-img{aspect-ratio:1/1; flex:none; display:flex; align-items:center; justify-content:center}
.cat-img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.cat-head{display:flex; align-items:baseline; gap:12px}
.cat-name{flex:1; min-width:0; font-size:1.2rem; letter-spacing:-.02em; line-height:1.15}
.cat-count{
  flex:none; font-size:.8rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* szósty kafel domyka siatkę 3×2 i przejmuje rolę przycisku */
.cat-cta{background:var(--accent); color:#fff; justify-content:center}
.cat-cta:hover{background:#3C5F32}
.cat-cta-in{display:flex; flex-direction:column; gap:14px}
.cat-cta h3{font-size:1.6rem; letter-spacing:-.03em; line-height:1.1}
.cat-cta p{font-size:.95rem; line-height:1.55; color:rgba(255,255,255,.82); max-width:30ch}
.cat-cta-link{
  font-size:.9rem; letter-spacing:.02em; padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.5); align-self:start; margin-top:4px;
}
.cat-cta:hover .cat-cta-link{border-bottom-color:#fff}

/* ------------------------------------------------------------------ hero --- */
.hero{padding-top:clamp(50px,8vw,104px)}
.hero-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(26px,5vw,70px); align-items:end}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:28px} }
.hero h1{margin-top:22px}
.hero-side{display:flex; flex-direction:column; gap:26px; padding-bottom:9px}
.hero-fig{margin-top:clamp(38px,6vw,72px)}
.hero-fig img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:50% 55%}
@media (max-width:700px){ .hero-fig img{aspect-ratio:3/2} }

/* ----------------------------------------------------------------- fakty --- */
.fact{padding:34px 26px 38px; display:flex; flex-direction:column; gap:9px}
.fact .n{
  font-weight:700; font-size:2.5rem; line-height:1;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.fact p{font-size:.92rem; color:var(--ink-2); line-height:1.5}

/* ----------------------------------------------------------------- split --- */
/* Zdjęcie dorównuje wysokością kolumnie tekstu, zamiast narzucać własną
   proporcję. Wysokość wiersza wyznacza tekst — obrazek tylko ją wypełnia. */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,74px); align-items:stretch}
@media (max-width:880px){ .split{grid-template-columns:1fr; gap:28px} }
.split picture{display:block; position:relative; min-height:460px}
.split picture img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 45%;
}
@media (max-width:880px){
  .split picture{min-height:0; aspect-ratio:16/10}
}
.split-txt{display:flex; flex-direction:column; gap:20px; justify-content:center}
/* Zdjęcie dokładnie na wysokość kolumny tekstu — bez dolnego ograniczenia,
   które w innych sekcjach pilnuje, by pionowy kadr nie zapadł się w pasek. */
.split-fit picture{min-height:0}

/* Wariant z naturalną wysokością zdjęcia — bez kadrowania w pionie.
   Używany tam, gdzie w kadrze stoi opakowanie i przycięcie by je ścięło. */
/* dwa bloki tekstu obok jednego zdjęcia — zdjęcie w węższej kolumnie */
.split-nat{grid-template-columns:1.18fr .82fr}
@media (max-width:880px){ .split-nat{grid-template-columns:1fr} }
.split-nat .split-txt{gap:clamp(34px,4vw,52px)}
.split-nat picture{position:static; min-height:0; aspect-ratio:auto}
.split-nat picture img{position:static; width:100%; height:auto}
/* .split-nat + .split-fit: zdjęcie sięga dokładnie wysokości kolumny tekstu.
   Nadwyżkę kadru przycina object-fit, zamiast skalować całe zdjęcie w dół. */
.split-nat.split-fit picture{position:relative}
.split-nat.split-fit picture img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* odwrócenie kolejności: tekst po lewej, zdjęcie po prawej */
.split-rev picture{order:2}
@media (max-width:880px){ .split-rev picture{order:0} }

/* ------------------------------------------------------- lista korzyści --- */
.offer{display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--hair)}
@media (max-width:760px){ .offer{grid-template-columns:1fr} }
.off{padding:30px 0 34px; border-bottom:1px solid var(--hair); display:flex; flex-direction:column; gap:9px}
.offer .off:nth-child(odd){padding-right:44px}
.offer .off:nth-child(even){padding-left:34px; border-left:1px solid var(--hair)}
@media (max-width:760px){
  .offer .off:nth-child(odd){padding-right:0}
  .offer .off:nth-child(even){padding-left:0; border-left:0}
}
.off .k{font-weight:700; font-size:.78rem; color:var(--accent); letter-spacing:.04em}
.off p{font-size:.95rem; color:var(--ink-2); line-height:1.55}

/* ------------------------------------------------------------- breadcrumb --- */
.crumb{display:flex; align-items:center; gap:10px; padding-top:22px; font-size:.83rem; color:var(--ink-3); flex-wrap:wrap}
.crumb a{color:var(--ink-3); text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb .cur{color:var(--ink-2)}

/* ------------------------------------------------------- karta produktu --- */
.phead{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(26px,5vw,70px);
  align-items:start; padding-block:clamp(24px,4vw,48px) clamp(46px,7vw,78px);
}
@media (max-width:900px){ .phead{grid-template-columns:1fr; gap:28px} }
/* Zdjęcie w naturalnej proporcji — bez kadrowania w pionie.
   Ujęcia produktowe mają różne formaty (4:5 i 2:3), a każde przycięcie
   wysokości ucinało opakowanie: pistolet piany albo końcówkę kartusza. */
.pshot img{width:100%; height:auto}
.pmeta{display:flex; flex-direction:column; gap:22px; padding-top:6px}
.ptags{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ptag{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--hair); padding:5px 10px}
/* Nazwa jak na opakowaniu: „Green" w zieleni nad główną częścią nazwy.
   Całość w jednym nagłówku, żeby zawierał pełną nazwę produktu. */
.pname{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.pname-lead{
  display:block; font-size:.36em; color:var(--accent);
  letter-spacing:-.02em; line-height:1; margin-bottom:.22em;
}
.psummary{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair); border-left:1px solid var(--hair)}
@media (max-width:520px){ .psummary{grid-template-columns:1fr} }
.ps{
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:15px 16px 17px; display:flex; flex-direction:column; gap:4px;
}
.ps .k{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.ps .v{font-weight:700; font-size:1.02rem; font-variant-numeric:tabular-nums}

/* Parametr, którego producent jeszcze nie podał. Widoczny, ale nie udaje danej —
   po dostarczeniu wartości wystarczy podmienić „?" w products.json. */
.todo{
  font-size:.86em; font-weight:400;
  color:#B4762C; border-bottom:1px dotted currentColor; cursor:help;
  letter-spacing:0;
}

.bleed img{width:100%; aspect-ratio:21/9; object-fit:cover; object-position:50% 60%}

@media (max-width:700px){
    .bleed img{aspect-ratio:4/3}
}

.uses{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--hair)}
@media (max-width:760px){ .uses{grid-template-columns:1fr} }
/* Nieparzysty, ostatni blok zajmuje pełną szerokość — inaczej połowa wiersza
   zostaje pusta. Dotyczy produktów z jedną albo trzema listami. */
.uses > .use:last-child:nth-child(odd){grid-column:1/-1; padding-right:0}
.use{padding:28px 0 32px; display:flex; flex-direction:column; gap:16px; border-bottom:1px solid var(--hair)}
.uses .use:nth-child(odd){padding-right:40px}
.uses .use:nth-child(even){padding-left:40px; border-left:1px solid var(--hair)}
@media (max-width:760px){
  .uses .use:nth-child(odd){padding-right:0}
  .uses .use:nth-child(even){padding-left:0; border-left:0}
}
.taglist{display:flex; flex-wrap:wrap; gap:7px}
.taglist span{font-size:.87rem; color:var(--ink-2); border:1px solid var(--hair); padding:6px 12px}
.bullets{margin:0; padding-left:19px; color:var(--ink-2); font-size:.94rem; line-height:1.6}
.bullets li{margin-bottom:6px}
/* długie wyliczenia w dwóch kolumnach — mniej ściany, łatwiej skanować */
.bullets.cols{columns:2; column-gap:clamp(20px,3vw,40px)}
.bullets.cols li{break-inside:avoid}
@media (max-width:620px){ .bullets.cols{columns:1} }

/* Obie kolumny zamykają się wspólną linią, nawet gdy jedna ma więcej wierszy. */
.techgrid{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,5vw,70px); align-items:stretch}
@media (max-width:820px){ .techgrid{grid-template-columns:1fr} }
.tech{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  margin:0; display:flex; flex-direction:column;
}
@media (max-width:820px){ .tech + .tech{border-top:0} }
.trow{display:grid; grid-template-columns:1.55fr 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--hair-2); align-items:baseline}
.trow:last-child{border-bottom:0}
@media (max-width:480px){
  .trow{grid-template-columns:1fr; gap:2px; padding:11px 0}
  .trow dd{text-align:left}
}
.trow dt{color:var(--ink-2); font-size:.95rem; margin:0}
.trow dd{margin:0; font-weight:700; font-size:.98rem; font-variant-numeric:tabular-nums; text-align:right}

/* kafle etapów — używane jeszcze na stronie Współpraca */
.step{padding:28px 28px 34px; display:flex; flex-direction:column; gap:12px}
.step .sn{font-weight:700; font-size:.78rem; color:var(--accent); letter-spacing:.1em}
.step p{font-size:.93rem; color:var(--ink-2); line-height:1.6}

/* Etapy aplikacji w wierszach: numer, tytuł, opis — trzy kolumny wypełniające
   szerokość sekcji. W układzie kolumnowym krótszy opis zostawiał pół kafla
   pustego, bo wszystkie wyrównywały się do najdłuższego. */
.steps-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.step-row{
  display:grid; grid-template-columns:auto minmax(180px,250px) 1fr;
  gap:clamp(18px,3vw,42px); align-items:start;
  padding:28px 0 32px; border-bottom:1px solid var(--hair);
}
.step-num{
  font-weight:700; font-size:2.3rem; line-height:.9;
  color:var(--accent); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  min-width:1.2em;
}
.step-title{font-size:1.14rem; letter-spacing:-.02em; line-height:1.25; padding-top:.18em}
.step-desc{font-size:.95rem; color:var(--ink-2); line-height:1.65; padding-top:.25em}

@media (max-width:900px){
  .step-row{grid-template-columns:auto 1fr; gap:14px clamp(16px,3vw,28px)}
  .step-desc{grid-column:2}
}
@media (max-width:560px){
  .step-row{grid-template-columns:1fr; gap:9px}
  .step-num{font-size:1.9rem}
  .step-title,.step-desc{padding-top:0}
  .step-desc{grid-column:1}
}

.dlitem{
  padding:24px 26px 26px; display:flex; align-items:center; gap:16px;
  text-decoration:none; color:inherit; transition:background var(--t);
}
.dlitem:hover{background:var(--paper-2)}
/* Dokument jeszcze nieprzekazany przez producenta — widoczny, ale nie udaje,
   że da się go pobrać. Po wgraniu pliku wraca zwykły odnośnik. */
.dlitem.is-waiting{cursor:default; color:var(--ink-3)}
.dlitem.is-waiting:hover{background:transparent}
.dlitem.is-waiting .ext{color:var(--ink-3); border-color:var(--hair)}
.dlitem.is-waiting .arrow{opacity:.4}
.dlitem .ext{
  font-weight:700; font-size:.7rem; letter-spacing:.1em; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent); padding:6px 8px; flex:none;
}
.dlitem .dt{display:flex; flex-direction:column; gap:3px; flex:1}
.dlitem .dt b{font-weight:400; font-size:1rem; letter-spacing:-.015em}
.dlitem .dt small{color:var(--ink-3); font-size:.82rem}
.dlitem:hover .arrow{transform:translateY(2px)}

/* Pasek informacyjny na całą szerokość treści, z piktogramem po lewej. */
.note{
  background:var(--paper-2); border-left:2px solid var(--accent);
  padding:20px 24px; margin-top:clamp(24px,3vw,34px);
  display:flex; gap:16px; align-items:flex-start;
}
.note p{font-size:.9rem; color:var(--ink-2); line-height:1.6}
.note-icon{width:44px; height:44px; flex:none; color:var(--accent); margin-top:-2px}
.note.warn{border-left-color:#B4762C}
.note.warn .note-icon{color:#B4762C}
@media (max-width:520px){
  .note{gap:13px; padding:18px 18px}
  .note-icon{width:34px; height:34px}
}

/* ------------------------------------------------------- listing z filtrem --- */
.filters{
  display:flex; gap:9px; flex-wrap:wrap; padding-bottom:26px;
  border-bottom:1px solid var(--hair); margin-bottom:0;
}
.filter{
  font-size:.86rem; padding:9px 16px; border:1px solid var(--hair); background:var(--paper);
  color:var(--ink-2); cursor:pointer; transition:border-color var(--t),color var(--t);
}
.filter:hover{border-color:var(--ink-3); color:var(--ink)}
.filter[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
.filter .cnt{color:var(--ink-3); font-variant-numeric:tabular-nums; margin-left:6px; font-size:.8rem}
.filter[aria-pressed="true"] .cnt{color:var(--accent)}
/* Nazwa aktywnej grupy nad siatką — jedyny sygnał kontekstu po tym,
   jak kafle straciły etykietę kategorii. */
.filter-status{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:22px 0 26px; border-bottom:1px solid var(--hair);
}
.filter-group{font-size:1.14rem; letter-spacing:-.02em; line-height:1.2}
.filter-count{
  font-size:.8rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.empty{padding:60px 0; color:var(--ink-3); text-align:center}

/* ------------------------------------------------------------ gdzie kupić --- */
.map-wrap{
  position:relative; border:1px solid var(--hair); background:var(--paper-2);
  aspect-ratio:21/9; overflow:hidden;
}
@media (max-width:820px){ .map-wrap{aspect-ratio:1/1} }
@media (max-width:480px){ .map-wrap{aspect-ratio:3/4} }
#map{position:absolute; inset:0}
.map-note{padding:16px 18px; font-size:.86rem; color:var(--ink-2); border:1px solid var(--hair); border-top:0}

.pos-list{display:flex; flex-direction:column; border-top:1px solid var(--hair)}
.pos{padding:20px 0 22px; border-bottom:1px solid var(--hair); display:flex; gap:18px; align-items:flex-start}
.pos .pos-main{flex:1; display:flex; flex-direction:column; gap:4px}
.pos .pos-name{font-size:1.02rem; letter-spacing:-.02em}
.pos .pos-addr{font-size:.9rem; color:var(--ink-2)}
.pos .pos-tel{font-size:.9rem; color:var(--accent); text-decoration:none; white-space:nowrap}
@media (max-width:560px){
  .pos{flex-direction:column; gap:8px}
  .pos .pos-tel{align-self:start}
}
.pos .pos-tel:hover{text-decoration:underline}
/* Filtry w wąskiej kolumnie po lewej, adresy po prawej. Węższa lista skraca
   dystans między adresem a telefonem, który przy pełnej szerokości był przepaścią. */
.pos-layout{
  display:grid; grid-template-columns:minmax(190px,250px) 1fr;
  gap:clamp(26px,4vw,60px); align-items:start;
}
@media (max-width:820px){ .pos-layout{grid-template-columns:1fr; gap:28px} }

/* pigułki jedna pod drugą, na całą szerokość kolumny */
.pos-side .filters{
  flex-direction:column; align-items:stretch;
  padding-bottom:0; border-bottom:0; margin-bottom:0;
}
.pos-side .filter{display:flex; align-items:baseline; gap:10px}
.pos-side .filter .cnt{margin-left:auto}
@media (max-width:820px){
  .pos-side .filters{flex-direction:row; flex-wrap:wrap}
  .pos-side .filter{display:inline-flex}
  .pos-side .filter .cnt{margin-left:6px}
}

.pos-body .filter-status{padding-top:0}

.pos-free{
  margin-top:clamp(22px,3vw,32px); font-size:.88rem; color:var(--ink-2);
  line-height:1.6;
}
.pos-free strong{font-weight:700; color:var(--ink)}
.pos-region{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  padding-top:22px; padding-bottom:6px;
}

/* ------------------------------------------------------------- formularz --- */
.formsec{background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.formgrid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,6vw,88px); align-items:start}
@media (max-width:900px){ .formgrid{grid-template-columns:1fr; gap:32px} }
.fields{display:grid; grid-template-columns:1fr 1fr; gap:26px 24px}
@media (max-width:620px){ .fields{grid-template-columns:1fr} }
.f{display:flex; flex-direction:column; gap:7px}
.f.wide{grid-column:1/-1}
.f label{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.f label .req{color:var(--accent)}
.f input,.f select,.f textarea{
  font-family:inherit; font-size:1rem; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--hair); padding:9px 0; width:100%;
  border-radius:0; appearance:none;
}
.f select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%,calc(100% - 6px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0; border-bottom-color:var(--accent)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:2px solid var(--accent); outline-offset:4px}
.f textarea{resize:vertical; min-height:62px}
.f input:user-invalid,.f select:user-invalid{border-bottom-color:#B4483C}
.checks{display:flex; flex-wrap:wrap; gap:8px; padding-top:2px}
.check{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-2);
  border:1px solid var(--hair); padding:8px 13px; cursor:pointer; transition:border-color var(--t),color var(--t)}
.check:hover{border-color:var(--ink-3)}
.check input{width:13px; height:13px; margin:0; accent-color:var(--accent); flex:none}
.check:has(input:checked){border-color:var(--accent); color:var(--accent)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--ink-3); line-height:1.5; max-width:52ch}
.consent input{margin-top:3px; accent-color:var(--accent); flex:none}
/* Wiersz zgody siedzi w .f, więc łapały go reguły pól: etykieta szła
   wersalikami z rozstrzeleniem, a checkbox rozciągał się na całą szerokość
   z kreską pola. Selektory pól są bardziej szczegółowe niż .consent — stąd
   te dwie reguły, które im to odbierają. */
.f .consent{font-size:.8rem; letter-spacing:0; text-transform:none}
.f .consent input{
  appearance:auto; -webkit-appearance:checkbox;
  width:15px; height:15px; border:0; padding:0;
}
.formnote{font-size:.85rem; color:var(--ink-3); line-height:1.55}

/* pasek CTA na karcie produktu */
.strip{background:var(--paper-2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.strip-in{display:flex; align-items:center; gap:clamp(20px,4vw,60px); padding-block:clamp(50px,6vw,84px); flex-wrap:wrap}
.strip-in > *{flex:1; min-width:min(280px,100%)}

/* --------------------------------------------------- dokument prawny --- */
/* Polityka prywatności i podobne teksty: nagłówek sekcji w lewej kolumnie,
   treść w prawej. Kolumny zamiast zwężonego bloku — akapit ma wtedy
   sensowną długość wiersza, a sekcja domyka się na obu krawędziach. */
.doc{border-top:1px solid var(--hair)}
.doc-row{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(20px,4vw,60px); padding-block:clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--hair);
}
@media (max-width:760px){ .doc-row{grid-template-columns:1fr; gap:14px} }
.doc-row h2{font-size:clamp(1.3rem,2vw,1.65rem); letter-spacing:-.025em}

/* ------------------------------------------------------ porównanie grupy --- */
/* Zestawienie parametrów produktów z jednej grupy. Bieżąca karta wyróżniona,
   żeby kupiec wiedział, którą kolumnę właśnie czyta. */
/* Tabela nie zmieści się na telefonie, więc przewija się w poziomie.
   Cień przy prawej krawędzi sygnalizuje, że jest tam dalszy ciąg. */
.cmp-wrap{
  overflow-x:auto; border:1px solid var(--hair);
  background:linear-gradient(to right,transparent calc(100% - 28px),rgba(23,26,19,.06));
  background-attachment:local;
}
.cmp-hint{
  display:none; margin-top:10px; font-size:.84rem; color:var(--ink-3);
}
@media (max-width:760px){ .cmp-hint{display:block} }
.cmp{border-collapse:collapse; width:100%; min-width:620px; font-size:.94rem}
.cmp th,.cmp td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--hair-2)}
.cmp thead th{
  font-size:1.02rem; font-weight:800; letter-spacing:-.02em;
  border-bottom:1px solid var(--hair); vertical-align:bottom;
}
.cmp tbody th{
  font-weight:400; color:var(--ink-2); font-size:.9rem;
  width:32%; background:var(--paper-2);
  position:sticky; left:0; z-index:1;
}
.cmp td{font-variant-numeric:tabular-nums}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp .is-current{background:var(--accent-soft)}
.cmp thead .is-current{color:var(--accent)}
.cmp .cmp-none{color:var(--ink-3)}
.cmp .cmp-here{color:var(--ink-3); font-size:.86rem}
.cmp td a{font-size:.9rem}

/* dane rejestrowe w stopce — wymagane prawnie, sprawdzane przez kupców */
.foot-legal{
  margin-top:clamp(30px,4vw,44px); padding-top:22px; border-top:1px solid var(--hair);
  font-size:.83rem; color:var(--ink-2); line-height:1.8;
}

/* produkt zaznaczony automatycznie po przejściu z karty */
.check-from-card{border-color:var(--accent); color:var(--accent)}
.check-all{border-style:dashed}

/* ---------------------------------------------------------------- stopka --- */
/* padding-block, nie skrót — inaczej zeruje margines boczny z .shell */
.foot{padding-block:clamp(50px,7vw,84px) 40px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:500px){ .foot-grid{grid-template-columns:1fr} }
.foot h4{font-size:.72rem; letter-spacing:.185em; text-transform:uppercase; color:var(--ink-3); margin-bottom:15px; font-weight:400}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot a{color:var(--ink-2); text-decoration:none; font-size:.93rem}
.foot a:hover{color:var(--accent)}
.foot-bot{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--hair);
  display:flex; gap:18px; flex-wrap:wrap; font-size:.83rem; color:var(--ink-3);
}
.foot-bot a{font-size:.83rem}