/* =========================================================================
   PROJEKT OŚWIATA — arkusz główny
   Barwy wyjęte pipetą ze szkicu klienta. Skala zmierzona na mojebambino.pl
   i arlek.pl, tekst CELOWO większy od obu: odbiorca ma 40–65 lat,
   a czytelność jest u niego warunkiem numer jeden.
   Szerokość treści: jedna, wszędzie. Zero max-width na tekście.
   ========================================================================= */

/* --- KROJE (wygenerowane przez tools/fonty-lokalne.py) ------------------ */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format('woff2');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}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin.woff2) format('woff2');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:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/literata-latin-ext.woff2) format('woff2');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}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/literata-latin.woff2) format('woff2');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:'Figtree zapasowy';font-weight:1 600;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:99.61%;ascent-override:95.37%;descent-override:25.1%;line-gap-override:0%}
@font-face{font-family:'Figtree zapasowy';font-weight:601 1000;src:local('Arial Bold'),local('Helvetica Bold'),local('Liberation Sans Bold'),local('Arial');size-adjust:96.21%;ascent-override:98.74%;descent-override:25.98%;line-gap-override:0%}
@font-face{font-family:'Literata zapasowy';font-weight:1 600;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:105.36%;ascent-override:111.72%;descent-override:29.23%;line-gap-override:0%}
@font-face{font-family:'Literata zapasowy';font-weight:601 1000;src:local('Arial Bold'),local('Helvetica Bold'),local('Liberation Sans Bold'),local('Arial');size-adjust:105.44%;ascent-override:111.63%;descent-override:29.21%;line-gap-override:0%}

/* --- TOKENY ------------------------------------------------------------- */
:root{
  /* Barwy — wszystkie zielenie pochodzą ze szkicu klienta */
  --po-zielen:        #1B4C29;
  --po-zielen-2:      #2A683B;
  --po-zielen-3:      #3D8C52;   /* krawedzie, ikony, kreski: prog 3:1 */
  --po-zielen-tekst:  #2A683B;   /* TEKST: #3D8C52 dawal 4,14 przy progu 4,50 */
  --po-zielen-glebia: #14331F;
  /* Zmierzone: biel na #B26A1F dawala 4,22 przy progu AA 4,50.
     #A05F1B daje 5,06, a barwa zostaje ta sama ochra. */
  --po-akcent:        #A05F1B;
  --po-akcent-ciemny: #854D14;
  --po-akcent-tlo:    #F6EDE0;

  --po-bialy:   #FFFFFF;
  --po-ciepla:  #F1EEE7;
  --po-zielonkawa: #EDF3EE;
  --po-tekst:   #1A2420;
  --po-tekst-2: #54605A;
  /* Zmierzone przez niewidoczne.py: obramowanie 1,36:1 jest funkcjonalnie
     niewidoczne. Element interfejsu (pole, przycisk obrysowy, klikalna karta)
     wymaga 3:1 wobec TŁA, na którym stoi — także wobec tła ciepłego. */
  --po-obrys:   #C8CFC9;   /* dekoracja: kreski, wiersze tabeli */
  /* Barwy tekstu NA CIEMNYM tle: osobne tokeny, bo przy zmianie palety
     zielonkawe napisy na granatowym tle wygladaja jak usterka. */
  --po-na-ciemnym-nad:   #8FC49F;
  --po-na-ciemnym-tekst: #DCE8DF;
  --po-na-ciemnym-slaby: #C7D6CB;
  --po-na-ciemnym-cichy: #8FA396;
  --po-na-ciemnym-obrys: #B7D4BF;
  --po-na-jasnym-tlo:    #E7F1E9;
  --po-akcent-jasny:     #F0C68A;
  /* Podpowiedz w polu formularza stoi na BIALYM tle, wiec ma wlasny token.
     Wczesniej brala barwe z `--po-na-ciemnym-cichy` i dawala 2,68 przy
     progu 4,50. Zaden audyt tego nie widzial, bo ::placeholder nie jest
     elementem drzewa i pomiary kontrastu go nie odwiedzaja. */
  --po-placeholder:      #6B7671;

  --po-obrys-2: #7F8B83;   /* elementy interfejsu: 3,06 na ciepłym, 3,55 na bieli */

  /* Szerokości — JEDEN system, nigdy hardkod w sekcji */
  --po-w-content: 80rem;      /* 1280 px */
  --po-w-wide:    90rem;      /* 1440 px */
  --po-px:        1.25rem;

  /* Rytm sekcji CELOWO nierowny. Sceny do czytania dostaja wiecej
     powietrza, ciemne pasma sa gestsze, bo sa oswiadczeniem, a nie
     lektura. Jednakowe 96 px wszedzie czyta sie mechanicznie. */
  /* Skala zeszla o krok 05.09.2026 na prosbe klienta (uwaga 4): „w normalnym
     przybliżeniu jest trochę nieczytelnie, muszę ustawić 80%, żeby było
     przyjemniej ogarnąć treść". Wrazenie „za rzadko" robily przede wszystkim
     ODSTEPY sekcji, nie sam stopien pisma, wiec one schodza mocniej.

     DRUGIE zejscie, 13.09.2026. Klient przyslal zrzuty tej samej strony przy
     100% i przy 80% powiekszenia i napisal: „100% to dalej jest za blisko,
     ucinaja sie pewne fragmenty, chcialbym zeby klient jednym spojrzeniem
     mogl ogarnac wiecej strony". Pomiar: przy 80% w oknie 1080 px widac
     1350 px tresci, czyli o jedna trzecia wiecej.

     Rozklad ciecia jest nierowny, bo czytelnosc ma inna cene niz pustka:
       odstepy sekcji  -28%  (72 -> 52, 56 -> 40, 40 -> 28)
       skok odstepow   -20%  (s4..s9)
       naglowki        -11%  (H1 38 -> 34, H2 28 -> 24)
       interlinia      -6%   (1.7 -> 1.6)
       tekst zwykly     -6%  (18 -> 17 px)
     Tekst schodzi najmniej, bo odbiorca ma 40-65 lat. 17 px to wciaz WIECEJ
     niz 18 px ogladane przy 80% powiekszeniu, czyli wiecej, niz klient sam
     sobie ustawia. Ponizej 16 px nie schodzimy w zadnym wariancie. */
  --po-sek-s:  1.75rem; /* 28 — pasma waskie */
  --po-sek-sr: 2.5rem;  /* 40 — sceny ciemne */
  --po-sek-m:  2.5rem;  /* 40 */
  --po-sek-l:  3rem;    /* 48 — sceny do czytania */

  /* Odstępy, siatka 8 px */
  /* Siatka 4 px. Przy zejsciu ze skala 13.09 wartosci wyladowaly na 14, 18
     i 22 px, czyli poza siatka; `odstepy.py` zglosil to jako „POZA SKALA".
     Redukcja siedzi w odstepach SEKCJI, tam gdzie jest jej widac, a nie
     w drobnych odstepach wewnatrz komponentow. */
  --po-s1: .25rem; --po-s2: .5rem;  --po-s3: .75rem; --po-s4: 1rem;
  --po-s5: 1.25rem; --po-s6: 1.5rem; --po-s7: 1.75rem; --po-s8: 2.25rem;
  --po-s9: 2.75rem;

  /* Typografia — zmierzone widełki, nie „pod zrzut ekranu" */
  --po-fs-h1:   clamp(1.625rem, 1.43rem + .90vw,  2.125rem);  /* 26 → 34 px */
  --po-fs-h2:   clamp(1.25rem,  1.16rem + .40vw,  1.5rem);    /* 20 → 24 px */
  --po-fs-h3:   clamp(1.0625rem,1.03rem + .16vw,  1.125rem);  /* 17 → 18 px */
  --po-fs-tekst:clamp(1rem,     .98rem + .10vw,   1.0625rem); /* 16 → 17 px */
  --po-fs-lead: clamp(1rem,     .96rem + .16vw,   1.125rem);  /* 16 → 18 px */
  /* 15 px, nie 14. Ten stopien nosi OPISY w kaflach dzialow, krokach
     i kartach, czyli 28 miejsc, ktore gosc faktycznie czyta. Przy
     odbiorcy 40-65 lat 14 px to juz meczy, a redukcja skali ma siedziec
     w odstepach sekcji, nie w najmniejszym tekscie na stronie. */
  --po-fs-maly: .9375rem;
  --po-fs-nad:  .75rem;

  --po-lh-nag:  1.15;
  --po-lh-tekst:1.6;

  /* Promienie — cztery stopnie, zero wartosci spoza tej listy */
  --po-r-s:     6px;    /* miniatury, pola wewnatrz kart */
  --po-r:       8px;    /* przyciski, pola formularza */
  --po-r-k:    12px;    /* karty i panele */
  --po-r-pelny: 999px;  /* okragle */

  --po-cien:   0 1px 2px rgba(26,36,32,.06), 0 4px 14px rgba(26,36,32,.05);
  --po-cien-2: 0 2px 6px rgba(26,36,32,.08), 0 12px 34px rgba(26,36,32,.09);

  /* Czasy — trzy, dobrane do wielkosci ruchu.
     Im wieksza rzecz sie rusza, tym dluzej. */
  --po-czas:    180ms;  /* barwa, obrys: mikro */
  --po-czas-sr: 280ms;  /* cien i przesuniecie karty */
  --po-czas-w:  420ms;  /* wejscia sekcji, powiekszenie zdjecia */
  --po-ease: cubic-bezier(.25,1,.5,1);

  /* Wysokosci przyciskow — trzy stopnie, nic pomiedzy */
  --po-h-s: 44px;
  --po-h:   48px;
  --po-h-l: 54px;

}
/* Telefon: odbiorca ma 40-65 lat, a klient napisal, ze strona ma byc
   „przede wszystkim bardzo czytelna". Tekst pomocniczy (opisy kafli, kroki,
   etykiety pol) nie schodzi ponizej 16 px; na desktopie 15 px zostaje jako
   stopien hierarchii obok 18 px tekstu. Zmierzone spojnosc.py: 15 px x 19. */
@media (max-width:599px){:root{--po-fs-maly:1rem}}
/* Telefon: rytm sekcji 56/64 px zamiast 72/96 (na 390 px szerokosci
   72 px pustki miedzy scenami to prawie cwierc ekranu), wybor placowki
   jako lista pelnej szerokosci (flex-wrap dawal uklad 2+1+1+1 z dziurami),
   okruszki bez biezacej strony, bo jej tytul stoi tuz nizej jako H1. */
@media (max-width:599px){
  :root{--po-sek-sr:2.75rem;--po-sek-m:2.75rem;--po-sek-l:3rem}
  /* Podwojony selektor: ten blok stoi w pliku PRZED regula bazowa
     .po-wybor__lista{display:flex}, wiec przy rownej specyficznosci przegrywal. */
  .po-wybor .po-wybor__lista{display:grid;grid-template-columns:1fr}
  .po-wybor .po-wybor__p{justify-content:space-between;width:100%}
  .po-okruszki > :nth-last-child(-n+2){display:none}
}

/* --- PODSTAWY ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Naglowek jest przyklejony i ma 118 px. Bez tego skok do kotwicy chowa
   poczatek sekcji pod nim. Liczba wieksza o oddech, nie o piksel. */
[id]{scroll-margin-top:8.5rem}
@media (max-width:1099px){[id]{scroll-margin-top:5.5rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--po-bialy);
  color:var(--po-tekst);
  font-family:'Figtree','Figtree zapasowy',system-ui,sans-serif;
  font-size:var(--po-fs-tekst);
  line-height:var(--po-lh-tekst);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.po-blokada{overflow:hidden}

img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}

/* Atrybut `hidden` musi wygrywać z każdym `display` z arkusza. Bez tego
   licznik listy zapytania pokazywał „0" mimo `hidden` w znaczniku, bo
   `.po-lista-skrot__licznik` ma `display:inline-flex`. */
[hidden]{display:none!important}

h1,h2,h3,h4{
  font-family:'Literata','Literata zapasowy',Georgia,serif;
  font-weight:600;
  line-height:var(--po-lh-nag);
  letter-spacing:-.015em;
  margin:0 0 var(--po-s4);
  text-wrap:balance;
}
h1{font-size:var(--po-fs-h1)}
h2{font-size:var(--po-fs-h2)}
h3{font-size:var(--po-fs-h3);line-height:1.3}
p{margin:0 0 var(--po-s4);text-wrap:pretty}
p:last-child{margin-bottom:0}

/* Kazdy odnosnik zmienia barwe plynnie. Bez tego szesc miejsc na stronie
   przeskakiwalo barwe natychmiast, a przyciski obok robily to w 180 ms. */
a{
  color:var(--po-zielen);text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color var(--po-czas) var(--po-ease);
}
a:hover{color:var(--po-akcent-ciemny)}

/* Jeden pierscien ogniska na calej stronie. Na ciemnym tle ochra ma
   3,1:1 wobec zieleni, wiec tam swiecimy jasnym. */
:focus-visible{outline:3px solid var(--po-akcent);outline-offset:3px;border-radius:var(--po-r-s)}
.po-sekcja--ciemna :focus-visible,.po-stopka :focus-visible,
.po-menu :focus-visible,.po-zaufanie :focus-visible{outline-color:var(--po-akcent-jasny)}

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

.po-pomin{position:absolute;left:-9999px;z-index:999;padding:var(--po-s3) var(--po-s5);background:var(--po-zielen);color:#fff;border-radius:0 0 var(--po-r) 0}
.po-pomin:focus{left:0;top:0;color:#fff}

/* --- KONTENER: jedna szerokość, wszędzie -------------------------------- */
.po-kontener{
  width:min(100% - (var(--po-px) * 2), var(--po-w-content));
  margin-inline:auto;
}
@media (min-width:768px){:root{--po-px:2rem}}
@media (min-width:1200px){:root{--po-px:2.5rem}}

/* --- SEKCJE: granice robi TON TŁA i PASMO ZDJĘCIA ----------------------- */
.po-sekcja{padding-block:var(--po-sek-m)}
.po-sekcja--jasna{background:var(--po-bialy)}
.po-sekcja--ciepla{background:var(--po-ciepla)}
.po-sekcja--ciemna{background:var(--po-zielen);color:var(--po-na-ciemnym-tekst)}
/* Podwojna klasa, zeby wygrac z `.po-sekcja` z pozniejszego bloku media.
   Przy rownej specyficznosci decydowala kolejnosc i cala strona miala
   96 px w kazdej scenie, czyli rytm plaski jak linijka. */
@media (max-width:899px){.po-sekcja.po-sekcja--ciemna{padding-block:var(--po-sek-s)}}
@media (min-width:900px){.po-sekcja.po-sekcja--ciemna{padding-block:var(--po-sek-sr)}}
.po-sekcja--ciemna h1,.po-sekcja--ciemna h2,.po-sekcja--ciemna h3{color:#fff}
.po-sekcja--ciemna a{color:#fff}

@media (min-width:900px){
  .po-sekcja{padding-block:var(--po-sek-l)}
}

.po-sekcja__glowa{margin-bottom:var(--po-s8)}
.po-sekcja__nag{margin-bottom:var(--po-s3)}
.po-sekcja__nag--mocny{font-size:clamp(1.625rem,1.35rem + 1.2vw,2.375rem)}
.po-sekcja__lead{font-size:var(--po-fs-lead);color:var(--po-tekst-2)}
.po-sekcja--ciemna .po-sekcja__lead{color:var(--po-na-ciemnym-slaby)}

.po-nad{
  font-family:'Figtree','Figtree zapasowy',sans-serif;
  font-size:var(--po-fs-nad);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--po-zielen-tekst);
  margin:0 0 var(--po-s3);
}
.po-nad--jasny{color:var(--po-na-ciemnym-nad)}
/* Ciemna sekcja: nadtytul w zieleni tekstowej dawal 1,49 na wlasnym tle.
   Element z wlasnym tlem ma miec wlasne barwy tekstu, w obie strony. */
.po-sekcja--ciemna .po-nad{color:var(--po-na-ciemnym-nad)}

/* Karta ma WŁASNE barwy tekstu, także w ciemnej sekcji — inaczej reguła
   „w ciemnej sekcji nagłówki są jasne" wchodzi do środka jasnej karty
   i tytuł ginie na własnym tle. */
.po-karta,.po-produkt,.po-pas__tresc{color:var(--po-tekst)}
.po-karta h3,.po-produkt h3,.po-pas__nag{color:var(--po-tekst)}

/* --- PRZYCISKI ---------------------------------------------------------- */
.po-przycisk{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--po-s2);
  min-height:var(--po-h);padding:.75rem 1.5rem;
  font-weight:600;font-size:1rem;line-height:1.2;
  border:2px solid transparent;border-radius:var(--po-r);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--po-czas) var(--po-ease),
             border-color var(--po-czas) var(--po-ease),
             color var(--po-czas) var(--po-ease);
}
.po-przycisk--akcent{background:var(--po-akcent);border-color:var(--po-akcent);color:#fff}
.po-przycisk--akcent:hover{background:var(--po-akcent-ciemny);border-color:var(--po-akcent-ciemny);color:#fff}
/* Na ciemnej zieleni ochra ma tylko 1,96:1 wobec tla, wiec obrys przycisku
   dostaje jasny bursztyn (6,23:1 na zieleni), ten sam co pierscien ogniska
   w menu. Bramka niewidoczne.py: /cyfrowy-uczen/, baner kontaktowy. */
.po-sekcja--ciemna .po-przycisk--akcent,.po-cta .po-przycisk--akcent,
.po-sekcja--ciemna .po-przycisk--akcent:hover,.po-cta .po-przycisk--akcent:hover{border-color:var(--po-akcent-jasny)}
.po-przycisk--obrys{background:transparent;border-color:var(--po-obrys-2);color:var(--po-zielen)}
.po-przycisk--obrys:hover{border-color:var(--po-zielen);background:var(--po-zielonkawa);color:var(--po-zielen)}
.po-sekcja--ciemna .po-przycisk--obrys{border-color:rgba(255,255,255,.45);color:#fff}
.po-sekcja--ciemna .po-przycisk--obrys:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.po-przycisk--cichy{background:transparent;border-color:transparent;color:var(--po-tekst-2);text-decoration:underline}
.po-przycisk--cichy:hover{color:var(--po-tekst)}
.po-przycisk--duzy{min-height:var(--po-h-l);padding:.9rem 1.75rem;font-size:1.0625rem}
.po-przycisk--maly{min-height:var(--po-h-s);padding:.5rem 1rem;font-size:.9375rem}
.po-przycisk--pelny{width:100%}

.po-wiecej{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:var(--po-h-s);font-weight:600;color:var(--po-zielen);text-decoration:none;
  transition:color var(--po-czas) var(--po-ease),gap var(--po-czas) var(--po-ease);
}
.po-wiecej:hover{color:var(--po-akcent-ciemny);gap:.8rem}

/* --- NAGŁÓWEK ----------------------------------------------------------- */
.po-naglowek{position:sticky;top:0;z-index:80;background:var(--po-bialy);transition:box-shadow var(--po-czas) var(--po-ease)}
.po-naglowek.jest-przewiniety{box-shadow:0 2px 14px rgba(26,36,32,.12)}
@media (max-width:1099px){.po-naglowek{border-bottom:1px solid var(--po-obrys)}}
/* Pasek przyklejony zjada miejsce na KAZDYM ekranie, wiec schodzi razem
   ze skala (klient, 13.09.2026): 118 px -> 98 px na szerokim ekranie. */
.po-naglowek__w{display:flex;align-items:center;justify-content:space-between;gap:var(--po-s5);min-height:58px}
@media (min-width:900px){.po-naglowek__w{min-height:60px}}
.po-naglowek.jest-przewiniety .po-naglowek__w{min-height:52px}

.po-naglowek__tel{display:none;align-items:center;gap:.55rem;color:var(--po-tekst);text-decoration:none;min-height:44px}
/* E-mail obok telefonu (uwaga 6 klienta). Ponizej 1200 px nie ma na niego
   miejsca w jednej linii naglowka, a telefon jest wazniejszy: dyrektor
   dzwoni z przerwy miedzy zajeciami. */
.po-naglowek__mail{display:none}
@media (min-width:1200px){
  .po-naglowek__mail{display:inline-flex;align-items:center;gap:.55rem;color:var(--po-tekst);text-decoration:none;transition:color var(--po-czas) var(--po-ease)}
  .po-naglowek__mail svg{color:var(--po-zielen-tekst);flex-shrink:0}
  .po-naglowek__mail strong{display:block;font-size:.9375rem;font-weight:600;line-height:1.2}
  .po-naglowek__mail:hover{color:var(--po-zielen-tekst)}
}
@media (min-width:900px){.po-naglowek__tel{display:inline-flex}}
.po-naglowek__tel svg{color:var(--po-zielen-3);flex-shrink:0}
.po-naglowek__tel-et{display:block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--po-tekst-2)}
.po-naglowek__tel strong{font-size:1.0625rem;line-height:1.2}
.po-naglowek__tel:hover strong{color:var(--po-zielen)}

.po-znak{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
/* Logo klienta w pasku. Wysokosc wynika z proporcji JEGO pliku, nie z gustu:
   pasmo „znak i napis" ma 1319x415, czyli 3,18, wiec przy 60 px logo zajmuje
   191 px szerokosci, o 40 mniej niz dzisiejszy napis (231 px). Hasla
   „INNOWACYJNY PARTNER EDUKACJI" w pasku nie ma, bo w pliku klienta zajmuje
   8 procent wysokosci: przy 60 px mialoby 5 px zamiast dzisiejszych 11. */
/* Blok marki: logo i pod nim haslo z logotypu. Klient, 16.09.2026, poprosil
   zeby haslo bylo „gdzies na gornym pasku". Uklad „obok, po prawej" byl
   zmierzony i odpadl: przy 1200 i 1280 px wypychal strone w bok o 89 i 9 px.
   Pod logo miesci sie na kazdej szerokosci, a pasek zostaje przy 106 px,
   bo logo schodzi z 52 na 40 (40 + 3 odstepu + 14 hasla = 57 przy rzedzie 60). */
.po-marka{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.po-marka__haslo{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--po-tekst-2);white-space:nowrap;line-height:1.2;
}
.po-znak__obraz{max-height:40px;width:auto;height:auto}
/* Pasek po przewinieciu zbiega z 60 na 52 px, wiec logo musi zbiec razem
   z nim, inaczej dotyka obu krawedzi rzedu. TYLKO na komputerze: bez tego
   zakresu regula obowiazywala takze na telefonie, gdzie logo ma 36 px,
   wiec przy przewijaniu URASTALO do 44 i pasek podskakiwal. */
@media (min-width:900px){
  /* Po przewinieciu rzad zbiega z 60 na 52 px, wiec blok marki musi zbiec
     razem z nim: logo o 6 px, a haslo znika. */
  .po-naglowek.jest-przewiniety .po-znak__obraz{max-height:34px}
  .po-naglowek.jest-przewiniety .po-marka__haslo{display:none}
}
.po-znak__tekst{display:flex;flex-direction:column;line-height:1.1}
.po-znak__nazwa{
  font-family:'Literata','Literata zapasowy',Georgia,serif;
  font-size:1.375rem;font-weight:600;letter-spacing:-.01em;color:var(--po-zielen);
}
.po-znak__haslo{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--po-tekst-2);margin-top:2px}

/* Menu: pas w barwie ze szkicu klienta, a w nim SAME NAPISY.
   Bez kafelków, bez obwódek, bez podkreśleń. Po najechaniu zmienia się
   wyłącznie barwa napisu, nic nie podskakuje i nic nie zmienia szerokości. */
.po-menu{display:none;background:var(--po-zielen)}
@media (min-width:1100px){.po-menu{display:block}}
.po-menu__lista{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0;min-height:38px}
.po-menu__lista > li{position:relative}
.po-menu__lista a{
  display:flex;align-items:center;min-height:46px;
  font-size:.9375rem;font-weight:500;color:var(--po-na-ciemnym-tekst);text-decoration:none;
  transition:color var(--po-czas) var(--po-ease);
}
.po-menu__lista a:hover,.po-menu__lista .current-menu-item > a,
.po-menu__lista .current-menu-ancestor > a,.po-menu__lista .current_page_item > a{color:#fff}
.po-menu__lista .menu-item-has-children > a::after{
  content:"";width:6px;height:6px;margin-left:.45rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.7;
}
.po-menu__lista .sub-menu{
  position:absolute;top:100%;left:-1rem;min-width:16rem;z-index:5;
  background:#fff;border:1px solid var(--po-obrys);border-radius:0 0 var(--po-r) var(--po-r);
  box-shadow:var(--po-cien-2);padding:.5rem;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--po-czas) var(--po-ease),transform var(--po-czas) var(--po-ease),visibility var(--po-czas);
}
.po-menu__lista li:hover > .sub-menu,.po-menu__lista li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.po-menu__lista .sub-menu a{padding:.6rem .75rem;border-radius:var(--po-r-s);min-height:var(--po-h-s);color:var(--po-tekst)}
.po-menu__lista .sub-menu a:hover{background:var(--po-zielonkawa);color:var(--po-zielen)}

.po-naglowek__akcje{display:flex;align-items:center;gap:var(--po-s4);flex-shrink:0}
.po-naglowek__cta{display:none}
@media (min-width:1100px){.po-naglowek__cta{display:inline-flex}}

.po-lista-skrot{
  position:relative;display:inline-flex;align-items:center;gap:var(--po-s2);
  min-height:var(--po-h-s);padding:.5rem .75rem;border-radius:var(--po-r);
  font-size:.9375rem;font-weight:600;color:var(--po-zielen);text-decoration:none;
  transition:background-color var(--po-czas) var(--po-ease),color var(--po-czas) var(--po-ease);
}
.po-lista-skrot:hover{background:var(--po-zielonkawa);color:var(--po-zielen)}
.po-lista-skrot__t{display:none}
@media (min-width:600px){.po-lista-skrot__t{display:inline}}
.po-lista-skrot__licznik{
  min-width:22px;height:22px;padding:0 .375rem;border-radius:var(--po-r-pelny);
  background:var(--po-akcent);color:#fff;font-size:.75rem;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}

.po-hamburger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 11px;background:none;border:0;cursor:pointer;
}
@media (min-width:1100px){.po-hamburger{display:none}}
.po-hamburger__k{display:block;height:2px;background:var(--po-tekst);border-radius:2px;transition:transform var(--po-czas) var(--po-ease),opacity var(--po-czas)}
.po-hamburger[aria-expanded="true"] .po-hamburger__k:nth-child(1){transform:translateY(7px) rotate(45deg)}
.po-hamburger[aria-expanded="true"] .po-hamburger__k:nth-child(2){opacity:0}
.po-hamburger[aria-expanded="true"] .po-hamburger__k:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- MENU NA TELEFONIE: pełny ekran ------------------------------------- */
.po-mobile{
  position:fixed;inset:0;z-index:200;background:var(--po-bialy);
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform var(--po-czas-sr) var(--po-ease);
}
.po-mobile[hidden]{display:none}
.po-mobile.jest-otwarte{transform:translateX(0)}
.po-mobile__gora{display:flex;align-items:center;justify-content:space-between;gap:var(--po-s4);padding:var(--po-s4) var(--po-px);border-bottom:1px solid var(--po-obrys)}
.po-mobile__tytul{font-family:'Literata','Literata zapasowy',Georgia,serif;font-size:1.125rem;font-weight:600;color:var(--po-zielen)}
.po-mobile__zamknij{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--po-tekst)}
.po-mobile__nav{flex:1;padding:var(--po-s4) var(--po-px)}
.po-mobile__lista{list-style:none;margin:0;padding:0}
.po-mobile__lista a{display:flex;align-items:center;min-height:56px;padding:.5rem 0;font-size:1.125rem;font-weight:500;color:var(--po-tekst);text-decoration:none;border-bottom:1px solid var(--po-obrys)}
.po-mobile__lista .sub-menu{list-style:none;margin:0 0 0 var(--po-s4);padding:0}
.po-mobile__lista .sub-menu a{font-size:1rem;color:var(--po-tekst-2);min-height:48px}
.po-mobile__dol{padding:var(--po-s5) var(--po-px) var(--po-s8);display:grid;gap:var(--po-s3);background:var(--po-zielonkawa)}
.po-mobile__tel,.po-mobile__mail{display:flex;align-items:center;gap:.6rem;min-height:48px;font-weight:600;color:var(--po-zielen);text-decoration:none}

/* --- PIERWSZY EKRAN ----------------------------------------------------- */
.po-hero{background:var(--po-bialy);padding-top:var(--po-s7)}
.po-hero__w{display:grid;gap:var(--po-s6);align-items:center;padding-bottom:var(--po-s7)}
@media (min-width:900px){
  .po-hero{padding-top:var(--po-s8)}
  .po-hero__w{grid-template-columns:54fr 46fr;gap:var(--po-s8);padding-bottom:var(--po-s8)}
}
.po-hero__nag{margin-bottom:var(--po-s4);line-height:1.1}
.po-hero__lead{font-size:var(--po-fs-lead);color:var(--po-tekst-2);margin-bottom:var(--po-s5)}
.po-hero__przyciski{display:flex;flex-wrap:wrap;gap:var(--po-s3)}
.po-hero__obraz{position:relative}
.po-hero__foto{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--po-r-k)}
.po-hero__brak{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--po-r-k);background:linear-gradient(135deg,var(--po-zielonkawa),var(--po-ciepla))}

/* Pasek zaufania — ciemna wstęga. To ona oddziela pierwszy ekran
   od reszty strony: skok tła powyżej 7:1, nie odcień bieli. */
.po-zaufanie{background:var(--po-zielen);color:var(--po-na-ciemnym-tekst)}
.po-zaufanie__w{display:grid;grid-template-columns:1fr;gap:var(--po-s4);padding-block:var(--po-s5)}
@media (min-width:600px){.po-zaufanie__w{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.po-zaufanie__w{grid-template-columns:repeat(4,1fr);gap:var(--po-s6)}}
.po-zaufanie__p{display:flex;align-items:flex-start;gap:.7rem;font-size:.9375rem;line-height:1.5}
.po-zaufanie__i{color:var(--po-na-ciemnym-nad);flex-shrink:0;margin-top:1px}

/* --- PASMO ZDJĘCIA przez całą szerokość okna ---------------------------- */
/* Proporcja 8:3 to dokładnie proporcja pliku źródłowego. Przycinanie wysokości
   przez `height` plus `object-fit` ucinało górny pasek z etykietą. */
.po-pasmo{width:100%;overflow:hidden;background:var(--po-zielen-glebia)}
.po-pasmo__foto{width:100%;aspect-ratio:8/3;object-fit:cover}

/* --- WYBÓR PLACÓWKI pod pierwszym ekranem ------------------------------- */
/* Zdanie o rodzajach placówek: informacja, nie filtr (uwaga 9 klienta). */
.po-placowki{
  display:flex;align-items:flex-start;gap:.7rem;margin:0 0 var(--po-s6);
  padding:var(--po-s4) var(--po-s5);
  background:var(--po-zielonkawa);border-radius:var(--po-r-k);
  font-size:var(--po-fs-maly);line-height:1.6;color:var(--po-tekst-2);
}
.po-placowki svg{color:var(--po-zielen-tekst);flex-shrink:0;margin-top:2px}
.po-wybor{
  display:grid;gap:var(--po-s4);align-items:center;
  background:var(--po-bialy);border:1px solid var(--po-obrys-2);
  border-radius:var(--po-r-k);box-shadow:var(--po-cien);
  padding:var(--po-s4) var(--po-s5);margin-bottom:var(--po-s7);
  transition:box-shadow var(--po-czas-sr) var(--po-ease);
}
@media (min-width:900px){.po-wybor{grid-template-columns:auto 1fr;gap:var(--po-s6);padding:var(--po-s4) var(--po-s6)}}
.po-wybor__et{margin:0;font-weight:600;font-size:var(--po-fs-maly);color:var(--po-tekst-2);white-space:nowrap}
.po-wybor__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--po-s2)}
.po-wybor__p{
  display:inline-flex;align-items:center;gap:var(--po-s2);min-height:var(--po-h-s);
  padding:.5rem 1rem;border:1px solid var(--po-obrys-2);border-radius:var(--po-r);
  font-weight:600;font-size:.9375rem;color:var(--po-tekst);text-decoration:none;
  transition:border-color var(--po-czas) var(--po-ease),background-color var(--po-czas) var(--po-ease),color var(--po-czas) var(--po-ease);
}
.po-wybor__p svg{color:var(--po-zielen-3);transition:transform var(--po-czas) var(--po-ease)}
.po-wybor__p:hover{border-color:var(--po-zielen);background:var(--po-zielonkawa);color:var(--po-zielen)}
.po-wybor__p:hover svg{transform:translateX(3px)}

/* --- DZIAŁY: kafle ze zdjęciami ----------------------------------------- */
.po-dzialy__glowa{display:grid;gap:var(--po-s5);margin-bottom:var(--po-s7)}
@media (min-width:900px){.po-dzialy__glowa{grid-template-columns:1fr auto;align-items:end;gap:var(--po-s7)}}

.po-dzialy__siatka{display:grid;gap:var(--po-s4);margin-bottom:var(--po-s5)}
@media (min-width:640px){.po-dzialy__siatka{grid-template-columns:repeat(2,1fr);gap:var(--po-s5)}}
@media (min-width:1000px){.po-dzialy__siatka{grid-template-columns:repeat(3,1fr)}}

.po-dk{
  position:relative;display:flex;flex-direction:column;
  background:var(--po-bialy);border:1px solid var(--po-obrys-2);
  border-left:4px solid var(--po-zielen-3);
  border-radius:var(--po-r-k);overflow:hidden;
  transition:border-color var(--po-czas) var(--po-ease),
             box-shadow var(--po-czas-sr) var(--po-ease),
             transform var(--po-czas-sr) var(--po-ease);
}
.po-dk:hover{box-shadow:var(--po-cien-2);transform:translateY(-3px);border-left-color:var(--po-zielen)}
/* Caly kafel klikalny BEZ pustego odnosnika: obszar rozszerza tytul.
   Pusty <a> bez tresci i bez etykiety to odnosnik, ktorego czytnik
   ekranu nie potrafi zapowiedziec (macierz.py). */
.po-dk__nag a::after{content:"";position:absolute;inset:0;z-index:2}
.po-dk__obraz{position:relative;background:var(--po-ciepla);overflow:hidden}
/* Proporcja RÓWNA źródłu (4:3). Każde przycięcie w CSS ucina lewy górny róg,
   a tam siedzi wypalona etykieta „ZDJĘCIE PRZYKŁADOWE". */
.po-dk__obraz img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--po-czas-w) var(--po-ease)}
.po-dk:hover .po-dk__obraz img{transform:scale(1.03)}
.po-dk__brak{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;color:var(--po-obrys-2)}
.po-dk__tresc{padding:var(--po-s5);flex:1;display:flex;flex-direction:column}
/* Ikona rownana do PIERWSZEGO wiersza tytulu, nie do srodka calosci:
   przy tytule lamiacym sie na dwa wiersze srodkowanie zsuwa ja w dol
   i przestaje wygladac na czesc tego samego wiersza. */
.po-dk__nag{display:flex;align-items:flex-start;gap:.6rem;font-size:1.125rem;margin-bottom:var(--po-s2)}
.po-dk__i{display:inline-flex;color:var(--po-zielen-3);flex-shrink:0;margin-top:.15em}
/* BEZ `position` na odnośniku: `::after` liczy `inset:0` od najbliższego
   pozycjonowanego przodka. Z `position:relative` tutaj był nim sam napis,
   więc klikalny był tylko tytuł, a zdjęcie, opis i „Zobacz dział” nie
   reagowały (zgłoszenie klienta 19.10.2026, `_tools/kafle_klik.py`). */
.po-dk__nag a{color:var(--po-tekst);text-decoration:none}
.po-dk:hover .po-dk__nag a{color:var(--po-zielen)}
.po-dk__opis{color:var(--po-tekst-2);font-size:var(--po-fs-maly);line-height:1.65;margin-bottom:var(--po-s4);flex:1}
.po-dk__wiecej{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:var(--po-zielen);
  transition:gap var(--po-czas) var(--po-ease),color var(--po-czas) var(--po-ease)}
.po-dk:hover .po-dk__wiecej{gap:.8rem;color:var(--po-akcent-ciemny)}

/* Obsługa Prawna: u klienta osobny szeroki pas pod kaflami, nie kafel. */
.po-dpas{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--po-s4);
  background:var(--po-zielonkawa);border-radius:var(--po-r-k);
  padding:var(--po-s5);
}
@media (min-width:800px){.po-dpas{grid-template-columns:auto 1fr auto;gap:var(--po-s5);padding:var(--po-s5) var(--po-s6)}}
.po-dpas__i{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--po-bialy);color:var(--po-zielen);flex-shrink:0}
.po-dpas__nag{font-size:1.125rem;margin-bottom:.25rem}
.po-dpas__nag a{color:var(--po-tekst);text-decoration:none}
.po-dpas__nag a:hover{color:var(--po-zielen)}
.po-dpas__opis{margin:0;color:var(--po-tekst-2);font-size:var(--po-fs-maly);line-height:1.6}

/* --- WYRÓŻNIK ----------------------------------------------------------- */
.po-wyroznik__glowa{display:grid;gap:var(--po-s5);margin-bottom:var(--po-s8)}
@media (min-width:900px){.po-wyroznik__glowa{grid-template-columns:1fr 1fr;gap:var(--po-s9);align-items:end}}
.po-wyroznik__tekst{font-size:var(--po-fs-lead);color:var(--po-tekst-2)}
.po-wyroznik__lista{display:grid;gap:var(--po-s4)}
@media (min-width:700px){.po-wyroznik__lista{grid-template-columns:1fr 1fr}}
/* Cztery punkty w siatce trojkolumnowej zostawialy pusta polowe drugiego
   rzedu. Widac to tylko na zrzucie, zaden pomiar tego nie lapie. */
@media (min-width:1100px){.po-wyroznik__lista{grid-template-columns:repeat(2,1fr);gap:var(--po-s5)}}
.po-karta{
  background:var(--po-bialy);border:1px solid var(--po-obrys-2);border-radius:var(--po-r-k);
  padding:var(--po-s5);
  border-left:4px solid var(--po-zielen-3);
  transition:border-color var(--po-czas) var(--po-ease),
             box-shadow var(--po-czas-sr) var(--po-ease),
             transform var(--po-czas-sr) var(--po-ease);
}
.po-karta:hover{border-left-color:var(--po-zielen);box-shadow:var(--po-cien-2);transform:translateY(-2px)}
.po-karta__i{display:inline-flex;color:var(--po-zielen);margin-bottom:var(--po-s3)}
.po-karta__nag{font-size:1.1875rem;margin-bottom:var(--po-s2)}
.po-karta__opis{color:var(--po-tekst-2);font-size:var(--po-fs-maly);line-height:1.65}

/* --- PROCES: oś pozioma ------------------------------------------------- */
.po-os{list-style:none;margin:0;padding:0;display:grid;gap:var(--po-s6);counter-reset:po-krok}
@media (min-width:900px){
  .po-os{grid-template-columns:repeat(var(--po-os-krokow,4),1fr);gap:var(--po-s5);position:relative}
  .po-os::before{
    content:"";position:absolute;left:0;right:0;top:23px;height:2px;
    background:linear-gradient(90deg,var(--po-zielen-3) 0%,var(--po-obrys-2) 100%);
  }
}
.po-os__krok{position:relative;padding-top:0}
@media (min-width:900px){.po-os__krok{padding-top:0}}
.po-os__nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--po-zielen);color:#fff;
  font-family:'Literata','Literata zapasowy',Georgia,serif;font-size:1.125rem;font-weight:600;
  margin-bottom:var(--po-s4);position:relative;z-index:1;
  box-shadow:0 0 0 6px var(--po-ciepla);
}
.po-sekcja--jasna .po-os__nr{box-shadow:0 0 0 6px var(--po-bialy)}
.po-sekcja--ciemna .po-os__nr{background:var(--po-akcent);box-shadow:0 0 0 6px var(--po-zielen)}
.po-sekcja--ciemna .po-os::before{background:linear-gradient(90deg,var(--po-na-ciemnym-nad) 0%,rgba(143,196,159,.25) 100%)}
.po-sekcja--ciemna .po-os__opis{color:var(--po-na-ciemnym-slaby)}
.po-os__nag{font-size:1.125rem;margin-bottom:var(--po-s2)}
.po-os__opis{color:var(--po-tekst-2);font-size:var(--po-fs-maly);line-height:1.65}

/* --- KORZYŚCI: jedyny nasycony moment ----------------------------------- */
.po-korzysci__w{display:grid;gap:var(--po-s7)}
@media (min-width:900px){.po-korzysci__w{grid-template-columns:1fr 1fr;gap:var(--po-s9);align-items:center}}
.po-korzysci__tekst{color:var(--po-na-ciemnym-slaby);font-size:var(--po-fs-lead);margin-bottom:var(--po-s6)}
.po-korzysci__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--po-s4)}
.po-korzysci__p{display:flex;align-items:flex-start;gap:.75rem;padding-bottom:var(--po-s4);border-bottom:1px solid rgba(255,255,255,.14)}
.po-korzysci__p:last-child{border-bottom:0;padding-bottom:0}
.po-korzysci__i{color:var(--po-na-ciemnym-nad);flex-shrink:0;margin-top:3px}

/* --- KATALOG na stronie głównej ----------------------------------------- */
.po-katalogt__glowa{display:grid;gap:var(--po-s5);margin-bottom:var(--po-s8)}
@media (min-width:900px){.po-katalogt__glowa{grid-template-columns:1fr auto;align-items:end;gap:var(--po-s7)}}
.po-kroki{list-style:none;margin:0 0 var(--po-s8);padding:0;display:grid;gap:var(--po-s5)}
@media (min-width:800px){.po-kroki{grid-template-columns:repeat(3,1fr)}}
.po-krok{background:var(--po-zielonkawa);border-radius:var(--po-r-k);padding:var(--po-s5)}
.po-krok__i{display:inline-flex;color:var(--po-zielen);margin-bottom:var(--po-s3)}
.po-krok__nr{display:block;font-size:var(--po-fs-nad);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--po-zielen-tekst);margin-bottom:var(--po-s2)}
.po-krok__nag{font-size:1.125rem;margin-bottom:var(--po-s2)}
.po-krok__opis{color:var(--po-tekst-2);font-size:var(--po-fs-maly);line-height:1.65}

.po-katalogt__kat{margin-bottom:var(--po-s6)}
.po-katalogt__kat-nag{font-size:1.0625rem;margin-bottom:var(--po-s4)}
.po-znaczniki{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--po-s2)}
.po-znacznik{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.5rem 1rem;border:1px solid var(--po-obrys-2);border-radius:var(--po-r);
  color:var(--po-tekst);text-decoration:none;font-size:.9375rem;font-weight:500;
  transition:border-color var(--po-czas) var(--po-ease),background-color var(--po-czas) var(--po-ease),color var(--po-czas) var(--po-ease);
}
.po-znacznik:hover{border-color:var(--po-zielen);background:var(--po-zielonkawa);color:var(--po-zielen)}
.po-znacznik__ile{font-size:.8125rem;color:var(--po-tekst-2)}
.po-znacznik:hover .po-znacznik__ile{color:var(--po-zielen)}

.po-uwaga{
  display:flex;align-items:flex-start;gap:.7rem;
  background:var(--po-akcent-tlo);border-radius:var(--po-r);
  padding:var(--po-s5);color:#5C4318;font-size:var(--po-fs-maly);line-height:1.6;
}
.po-uwaga svg{flex-shrink:0;margin-top:.15em;color:var(--po-akcent-ciemny)}
.po-uwaga--male{font-size:.875rem;padding:var(--po-s3) var(--po-s4)}

/* --- KONTAKT ------------------------------------------------------------ */
.po-kontakt{border-top:3px solid var(--po-zielen-3);background:var(--po-zielonkawa)}
.po-kontakt__w{display:grid;gap:var(--po-s7)}
@media (min-width:900px){.po-kontakt__w{grid-template-columns:38fr 62fr;gap:var(--po-s9)}}
.po-kontakt__dane{list-style:none;margin:var(--po-s6) 0 0;padding:0;display:grid;gap:var(--po-s4)}
.po-kontakt__dane a,.po-kontakt__poz{display:flex;align-items:center;gap:.85rem;min-height:48px;color:var(--po-tekst);text-decoration:none}
.po-kontakt__dane a:hover{color:var(--po-zielen)}
.po-kontakt__dane svg{color:var(--po-zielen-3);flex-shrink:0}
.po-kontakt__et{display:block;font-size:.8125rem;color:var(--po-tekst-2);letter-spacing:.04em}
.po-kontakt__dane strong{font-size:1.0625rem}

/* --- FORMULARZ ---------------------------------------------------------- */
.po-formularz{background:var(--po-bialy);border:1px solid var(--po-obrys-2);border-radius:var(--po-r-k);padding:var(--po-s5)}
@media (min-width:600px){.po-formularz{padding:var(--po-s6)}}
.po-pola{display:grid;gap:var(--po-s4)}
@media (min-width:600px){.po-pola{grid-template-columns:1fr 1fr;gap:var(--po-s4) var(--po-s5)}.po-pole--pol{grid-column:span 1}.po-pole{grid-column:span 2}}
.po-pole{margin:0}
.po-pole label{display:block;font-size:.9375rem;font-weight:600;margin-bottom:.4rem}
.po-wym{color:var(--po-akcent-ciemny)}
.po-pole input[type="text"],.po-pole input[type="email"],.po-pole input[type="tel"],.po-pole textarea{
  width:100%;min-height:50px;padding:.7rem .9rem;
  background:var(--po-bialy);border:1px solid var(--po-obrys-2);border-radius:var(--po-r);
  font-size:1rem;transition:border-color var(--po-czas) var(--po-ease),box-shadow var(--po-czas) var(--po-ease);
}
.po-pole textarea{min-height:120px;resize:vertical}
.po-pole input:hover,.po-pole textarea:hover{border-color:var(--po-tekst-2)}
.po-pole input:focus,.po-pole textarea:focus{border-color:var(--po-zielen);box-shadow:0 0 0 3px rgba(61,140,82,.18);outline:none}
.po-pole input::placeholder,.po-pole textarea::placeholder{color:var(--po-placeholder);opacity:1}

.po-pole--zgoda{margin-top:var(--po-s4)}
.po-zgoda{display:flex;align-items:flex-start;gap:.7rem;font-size:.9375rem;font-weight:400;line-height:1.6;color:var(--po-tekst-2);cursor:pointer}
/* Obszar dotyku 44 px przy kwadracie 24 px. Zwykly `checkbox` mial 22 px,
   czyli polowe progu — a to jest pole, bez ktorego formularz nie pojdzie. */
.po-zgoda input{
  appearance:none;-webkit-appearance:none;
  width:44px;height:44px;margin:-10px -10px -10px 0;flex-shrink:0;cursor:pointer;
  background-image:linear-gradient(var(--po-bialy),var(--po-bialy));
  background-size:24px 24px;background-position:center;background-repeat:no-repeat;
  border:0;border-radius:0;position:relative;
}
.po-zgoda input::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:24px;height:24px;border:2px solid var(--po-obrys-2);border-radius:var(--po-r-s);
  background:var(--po-bialy);transition:background-color var(--po-czas) var(--po-ease),border-color var(--po-czas) var(--po-ease);
}
.po-zgoda input:hover::before{border-color:var(--po-zielen)}
.po-zgoda input:checked::before{background:var(--po-zielen);border-color:var(--po-zielen)}
.po-zgoda input:checked::after{
  content:"";position:absolute;left:50%;top:50%;
  width:6px;height:11px;margin:-2px 0 0 -3px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:translate(-50%,-60%) rotate(45deg);
}

.po-pulapka{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.po-formularz__dol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--po-s4);margin-top:var(--po-s5)}
.po-formularz__info{font-size:.875rem;color:var(--po-tekst-2)}
.po-komunikat{margin-top:var(--po-s4);padding:var(--po-s4);border-radius:var(--po-r);font-size:.9375rem;line-height:1.6}
.po-komunikat.jest-ok{background:var(--po-na-jasnym-tlo);color:#1B4C29;border:1px solid var(--po-na-ciemnym-obrys)}
.po-komunikat.jest-blad{background:#FBEDE8;color:#7A2E14;border:1px solid #E7C3B5}

/* --- GŁOWA PODSTRONY ---------------------------------------------------- */
.po-glowa{background:var(--po-zielonkawa);padding-block:var(--po-s7)}
@media (min-width:900px){.po-glowa{padding-block:var(--po-s8)}}
/* Nagłówek zakładki działu: tekst i fotografia obok siebie. */
.po-glowa__w{display:grid;gap:var(--po-s6)}
@media (min-width:900px){
  /* `center` zostawialo 116 px pustki nad nadtytulem, bo tekst jest nizszy
     od zdjecia 4:3. Wyrownanie do gory daje wspolna linie startu. */
  .po-glowa--zfoto .po-glowa__w{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:var(--po-s8);align-items:start}
  /* Zakladka BEZ zdjecia dostaje TE SAMA kolumne tekstu co zakladka ze
     zdjeciem. Bez tego lead szedl przez caly kontener 1280 px i mial
     125 znakow w wierszu przy 89 na dziewieciu pozostalych zakladkach
     (`czytelnosc.py`, prog 120). Klient ma jedno wymaganie ponad wszystkie:
     „przede wszystkim ta strona musi byc bardzo czytelna".
     ⚠️ To jest szerokosc KOLUMNY, nie `max-width` na tekscie: tekst dalej
     dziedziczy szerokosc tego, w czym stoi (root CLAUDE.md, twarda zasada
     Pawla o zerowych ograniczeniach szerokosci tekstu). */
  .po-glowa--dzial:not(.po-glowa--zfoto) .po-glowa__w{grid-template-columns:minmax(0,58%)}
}
/* Rozdroze, czyli zakladka NADRZEDNA z dwiema podzakladkami. Klient wybral
   ten uklad 27.09.2026 sposrod pieciu widokow porownania: „Zostawiamy
   wariant »opis na srodku«, reszte guzikow mozemy wyrzucic". Wzorem jest
   jego zrzut z tego dnia (`materialy/od-klienta/2026-09-27-strona5/`).
   Zakladka nadrzedna stoi bez zdjecia (zdejmuje je `page-dzial.php`),
   pasmo naglowka jest nizsze, opis i nagłówek sekcji stoja na srodku.
   Klasy nadaje `page-dzial.php` wprost, a nie przez `:not(.po-glowa--zfoto)`:
   zakladka bez podzakladek, ktorej ktos kiedys nie da zdjecia, nie moze
   przez to wskoczyc w uklad rozdroza. */
.po-glowa.po-glowa--rozdroze{padding-block:var(--po-s5)}
.po-sekcja.po-sekcja--rozdroze{padding-top:var(--po-s6)}
@media (min-width:900px){
  .po-glowa.po-glowa--rozdroze{padding-block:var(--po-s6)}
}
.po-glowa--rozdroze .po-glowa__w{justify-content:center;text-align:center}
@media (min-width:900px){
  /* 50 procent kontenera: dokladnie ta szerokosc, ktora klient zobaczyl
     i zatwierdzil w widoku „opis na srodku". To szerokosc KOLUMNY, nie
     `max-width` na tekscie. */
  /* Specyficznosc (0,4,0), bo regula 58 procent wyzej ma (0,3,0) i przy
     slabszym selektorze wygrywalaby bez slowa. */
  .po-glowa.po-glowa--dzial.po-glowa--rozdroze .po-glowa__w{grid-template-columns:minmax(0,50%)}
}
.po-glowa--rozdroze .po-okruszki,
.po-glowa--rozdroze .po-glowa__akcje{justify-content:center}
.po-sekcja--rozdroze .po-nad,
.po-sekcja--rozdroze .po-sekcja__nag{text-align:center}
.po-glowa__foto{border-radius:var(--po-r-k);overflow:hidden;box-shadow:var(--po-cien-2)}
.po-glowa__foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
/* Nagłówki łamiemy `balance`, nigdy ograniczeniem szerokości. */
.po-glowa__nag,.po-sekcja__nag,.po-obietnica__nag{text-wrap:balance}

.po-okruszki{font-size:.875rem;color:var(--po-tekst-2);margin-bottom:var(--po-s4);display:flex;flex-wrap:wrap;gap:.5rem}
.po-okruszki a{color:var(--po-tekst-2);text-decoration:none}
.po-okruszki a:hover{color:var(--po-zielen)}
.po-glowa__nag{margin-bottom:var(--po-s3)}
/* Wiersz skraca KOLUMNA, nie `max-width` na akapicie. Bez tego lead
   nagłówka podstrony miał 105 znaków w wierszu przy progu 95. */
.po-glowa__lead{font-size:var(--po-fs-lead);color:var(--po-tekst-2)}
/* ⛔ Nagłówek strony NIE zwęża kolumny tekstu.
   Miał `grid-template-columns: minmax(0, 46rem) 1fr`: kolumna tekstu 736 px
   przy kontenerze 1280, zdanie łamane w połowie, obok 544 px pustki
   (Paweł, 07.09.2026). Tekst dziedziczy szerokość kontenera, a tam, gdzie
   ma być kolumna, obok stoi ZDJĘCIE, nie pustka. */

/* --- STRONA TEKSTOWA: dwie kolumny -------------------------------------
   Wiersz skraca KOLUMNA, nigdy `max-width` na akapicie (zakaz z CLAUDE.md).
   Na pełnym kontenerze wiersz miał 122 znaki przy progu 95. */
.po-tekstowa{display:grid;gap:var(--po-s7)}
@media (min-width:900px){.po-tekstowa{grid-template-columns:minmax(0,46rem) 21rem;justify-content:space-between;gap:var(--po-s8);align-items:start}}

.po-bok__karta{background:var(--po-zielonkawa);border-radius:var(--po-r-k);padding:var(--po-s5)}
@media (min-width:900px){.po-bok{position:sticky;top:140px}}
.po-bok__nag{font-size:1.125rem;margin-bottom:var(--po-s2)}
.po-bok__opis{font-size:var(--po-fs-maly);color:var(--po-tekst-2);margin-bottom:var(--po-s4)}
.po-bok__lista{list-style:none;margin:0 0 var(--po-s4);padding:0;display:grid;gap:var(--po-s2)}
.po-bok__lista a{display:flex;align-items:center;gap:.6rem;min-height:48px;color:var(--po-tekst);text-decoration:none;font-size:var(--po-fs-maly)}
.po-bok__lista a:hover{color:var(--po-zielen)}
.po-bok__lista svg{color:var(--po-zielen-tekst);flex-shrink:0}
.po-bok__lista strong{font-size:1.0625rem}
.po-bok__katalog{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;margin-top:var(--po-s3);font-size:.9375rem;font-weight:600;color:var(--po-zielen);text-decoration:none}
.po-bok__katalog:hover{color:var(--po-akcent-ciemny)}

/* --- PROZA -------------------------------------------------------------- */
.po-proza h2{font-size:var(--po-fs-h2);margin-top:var(--po-s8)}
.po-proza h3{font-size:var(--po-fs-h3);margin-top:var(--po-s6)}
.po-proza h2:first-child,.po-proza h3:first-child{margin-top:0}
.po-proza ul,.po-proza ol{margin:0 0 var(--po-s5);padding-left:1.4em}
.po-proza li{margin-bottom:.5rem}
.po-proza img{border-radius:var(--po-r-k);margin-block:var(--po-s5)}
.po-proza table{width:100%;border-collapse:collapse;margin-bottom:var(--po-s5)}
.po-proza th,.po-proza td{padding:.75rem;border-bottom:1px solid var(--po-obrys);text-align:left}

/* --- BANER KONTAKTOWY (slowa klienta) ----------------------------------- */
.po-cta__w{display:grid;gap:var(--po-s6);align-items:center}
@media (min-width:900px){.po-cta__w{grid-template-columns:1fr auto;gap:var(--po-s8)}}
.po-cta__nag{font-size:clamp(1.5rem,1.3rem + .9vw,2.125rem);margin-bottom:var(--po-s3)}
.po-cta__opis{color:var(--po-na-ciemnym-slaby);margin:0}
.po-cta__akcje{display:grid;gap:var(--po-s3);justify-items:start}
@media (min-width:900px){.po-cta__akcje{justify-items:end}}
.po-cta__tel{display:inline-flex;align-items:center;gap:.5rem;min-height:var(--po-h-s);color:#fff;text-decoration:none;font-weight:600;font-size:1.0625rem}
.po-cta__tel svg{color:var(--po-na-ciemnym-nad)}
.po-cta__tel:hover{color:var(--po-akcent-jasny)}
@media (max-width:899px){.po-cta__akcje .po-przycisk{width:100%}.po-cta__akcje{justify-items:stretch}.po-cta__tel{justify-content:center}}

/* --- KATALOG: lista ----------------------------------------------------- */
.po-katalog__w{display:grid;gap:var(--po-s7)}
@media (min-width:1000px){.po-katalog__w{grid-template-columns:16rem 1fr;gap:var(--po-s8);align-items:start}}
.po-filtry__w{display:grid;gap:var(--po-s6)}
@media (min-width:1000px){.po-filtry__w{position:sticky;top:120px}}
.po-filtry__wszystkie{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600;color:var(--po-zielen);text-decoration:none}
.po-filtry__nag{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--po-tekst-2);margin-bottom:var(--po-s3);font-family:'Figtree','Figtree zapasowy',sans-serif}
.po-filtry__lista,.po-filtry__pod{list-style:none;margin:0;padding:0}
.po-filtry__lista a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;padding:.4rem 0;color:var(--po-tekst);text-decoration:none;font-size:.9375rem;transition:color var(--po-czas) var(--po-ease)}
.po-filtry__lista a:hover{color:var(--po-zielen-tekst)}
.po-filtry__poz.jest-aktywny > a,.po-filtry__pod .jest-aktywny > a{color:var(--po-zielen);font-weight:700}
/* Filtr BIEZACEJ kategorii nie reagowal na najechanie: `.po-filtry__lista a:hover`
   i regula stanu aktywnego maja te sama specyficznosc (0-2-1), a aktywna stoi
   nizej, wiec wygrywala kolejnoscia. Zglosila to `stany.py` 17.09.2026 na
   /katalog/kategoria/warsztaty-dla-dzieci/. Wlasna regula z wyzsza
   specyficznoscia, zamiast przestawiania kolejnosci, ktore psuje sie przy
   nastepnej edycji arkusza. Grubosc zostaje, zmienia sie sama barwa napisu. */
.po-filtry__lista .jest-aktywny > a:hover,
.po-filtry__lista .jest-aktywny > a:focus-visible{color:var(--po-zielen-tekst)}
.po-filtry__pod{margin-left:var(--po-s4);border-left:2px solid var(--po-obrys);padding-left:var(--po-s4)}
.po-filtry__ile{font-size:.8125rem;color:var(--po-tekst-2)}
.po-filtry__pomoc{background:var(--po-zielonkawa);border-radius:var(--po-r-k);padding:var(--po-s5)}
.po-filtry__pomoc p{font-size:var(--po-fs-maly);color:var(--po-tekst-2);margin-bottom:var(--po-s4)}

.po-katalog__ile{font-size:var(--po-fs-maly);color:var(--po-tekst-2);margin:var(--po-s5) 0}
.po-siatka{display:grid;gap:var(--po-s4)}
@media (min-width:560px){.po-siatka{grid-template-columns:repeat(2,1fr);gap:var(--po-s5)}}
@media (min-width:1200px){.po-siatka{grid-template-columns:repeat(3,1fr)}}
/* Kafel ma te sama szerokosc na kazdej stronie, takze gdy w siatce stoi
   jedna albo dwie pozycje: pierwsza wersja rozciagala dwa kafle na pol
   szerokosci (fotografia 470 px wysokosci) i zostawiala jeden kafel na
   jednej trzeciej, wiec strony dzialow roznily sie od katalogu. */

.po-produkt{
  display:flex;flex-direction:column;background:var(--po-bialy);
  border:1px solid var(--po-obrys-2);border-radius:var(--po-r-k);overflow:hidden;
  transition:border-color var(--po-czas) var(--po-ease),
             box-shadow var(--po-czas-sr) var(--po-ease),
             transform var(--po-czas-sr) var(--po-ease);
}
.po-produkt:hover{border-color:var(--po-zielen-3);box-shadow:var(--po-cien-2);transform:translateY(-2px)}
/* Zdjecie pozycji katalogu pokazujemy CALE, na bialym polu 4:3. Klient
   dodaje pozycje sam, z panelu (27.09.2026: „dodawac nastepne produkty
   na te pierwsza do katalogu”), a jego zdjecia maja rozne proporcje:
   z pieciu w dokumencie „strona 5” tylko jedno bylo 4:3, a pionowa
   hustawka tracilaby przy `object-fit: cover` 41 procent kadru, razem z hakiem
   i siedziskiem. Biel, bo zdjecia produktow od dostawcow stoja zwykle
   na bialym tle i wtedy brzegu pola w ogole nie widac. */
.po-produkt__obraz{display:block;background:#fff}
.po-produkt__obraz img{width:100%;aspect-ratio:4/3;object-fit:contain}
.po-produkt__brak{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;color:var(--po-obrys-2)}
.po-produkt__tresc{display:flex;flex-direction:column;align-items:flex-start;padding:var(--po-s4) var(--po-s5);flex:1}
.po-produkt__kat{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--po-zielen-tekst);margin-bottom:.4rem}
.po-produkt__nag{font-size:1.0625rem;margin-bottom:.4rem;line-height:1.35}
.po-produkt__nag a{color:var(--po-tekst);text-decoration:none}
.po-produkt__nag a:hover{color:var(--po-zielen)}
.po-produkt__symbol{font-size:.8125rem;color:var(--po-tekst-2);margin-bottom:.4rem}
.po-produkt__opis{font-size:var(--po-fs-maly);color:var(--po-tekst-2);line-height:1.6;margin:0;flex:1}
.po-produkt__dol{padding:0 var(--po-s5) var(--po-s5)}
.po-produkt__dol .po-dodaj{width:100%}
.po-produkt__wiecej{
  display:inline-flex;align-items:center;gap:.5rem;min-height:var(--po-h-s);margin-top:var(--po-s3);
  font-size:.9375rem;font-weight:600;color:var(--po-zielen);text-decoration:none;
  transition:color var(--po-czas) var(--po-ease),gap var(--po-czas) var(--po-ease);
}
.po-produkt:hover .po-produkt__wiecej{gap:.8rem}
.po-produkt__wiecej:hover{color:var(--po-akcent-ciemny)}

.po-dodaj{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--po-s2);
  min-height:var(--po-h);padding:.6rem 1rem;background:var(--po-zielen);color:#fff;
  border:2px solid var(--po-zielen);border-radius:var(--po-r);
  font-size:.9375rem;font-weight:600;line-height:1.2;cursor:pointer;
  transition:background-color var(--po-czas) var(--po-ease),border-color var(--po-czas) var(--po-ease);
}
.po-dodaj:hover{background:var(--po-zielen-2);border-color:var(--po-zielen-2)}
/* „Wybierz wariant" przy pozycji z wariantami to ODNOSNIK w kroju tego
   przycisku, wiec dostawal z globalnego `a` podkreslenie, a z `a:hover`
   brazowy napis na zielonym tle: 1,02:1 po najechaniu, zmierzone 27.09.
   Barwa napisu jawnie w kazdym stanie, jak przy kazdym elemencie
   z wlasnym tlem. */
.po-dodaj{text-decoration:none}
.po-dodaj:hover,.po-dodaj:focus-visible{color:#fff}
.po-dodaj--duzy{min-height:var(--po-h-l);padding:.9rem 1.5rem;font-size:1.0625rem}
.po-dodaj.jest-dodany{background:var(--po-akcent);border-color:var(--po-akcent)}
.po-dodaj.jest-dodany:hover{background:var(--po-akcent-ciemny);border-color:var(--po-akcent-ciemny)}

/* --- KARTA POZYCJI ------------------------------------------------------ */
.po-karta-produktu > .po-sekcja--jasna:first-child{padding-bottom:var(--po-sek-sr)}
.po-kp__w{display:grid;gap:var(--po-s6);margin-top:var(--po-s5)}
@media (min-width:900px){.po-kp__w{grid-template-columns:48fr 52fr;gap:var(--po-s8);align-items:start}}
.po-kp__glowny{background:#fff;border-radius:var(--po-r-k);overflow:hidden}
/* Pole 4:3, zdjecie cale (`object-fit: contain`): patrz komentarz przy `.po-produkt__obraz`. */
.po-kp__glowny img{width:100%;aspect-ratio:4/3;object-fit:contain}
.po-kp__mini{display:flex;flex-wrap:wrap;gap:var(--po-s2);margin-top:var(--po-s3)}
.po-kp__mini-p{width:72px;height:72px;padding:0;border:1px solid var(--po-obrys-2);border-radius:var(--po-r-s);overflow:hidden;background:none;cursor:pointer;transition:border-color var(--po-czas) var(--po-ease)}
.po-kp__mini-p img{width:100%;height:100%;object-fit:cover}
.po-kp__mini-p:hover{border-color:var(--po-zielen)}
.po-kp__nag{margin-bottom:var(--po-s3)}
.po-kp__lead{font-size:var(--po-fs-lead);color:var(--po-tekst-2);margin-bottom:var(--po-s5)}
.po-kp__meta{list-style:none;margin:0 0 var(--po-s5);padding:0;display:grid;gap:.4rem}
.po-kp__meta li{display:flex;gap:.75rem;font-size:var(--po-fs-maly)}
.po-kp__meta span{color:var(--po-tekst-2);min-width:6.5rem}
.po-kp__akcja{display:flex;flex-wrap:wrap;gap:var(--po-s3);margin-bottom:var(--po-s5)}
/* Notatka wykonawcy, nie tresc klienta. Ma sie roznic od reszty strony,
   zeby nikt nie wzial jej za opis produktu. */
.po-kp__uwaga{
  display:flex;align-items:flex-start;gap:.6rem;
  margin-top:var(--po-s4);padding:var(--po-s3) var(--po-s4);
  border:1px dashed var(--po-obrys-2);border-radius:var(--po-r);
  font-size:.875rem;line-height:1.55;color:var(--po-tekst-2);background:var(--po-ciepla);
}
.po-kp__uwaga::before{content:"i";flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-top:.05em;border-radius:var(--po-r-pelny);
  background:var(--po-tekst-2);color:#fff;font-size:.6875rem;font-weight:700;font-style:italic}
.po-kp__dol{display:grid;gap:var(--po-s7)}
@media (min-width:900px){.po-kp__dol{grid-template-columns:1fr 22rem;gap:var(--po-s8);align-items:start}}
.po-kp__pod{font-size:1.25rem;margin-bottom:var(--po-s4)}
.po-cechy{margin:0 0 var(--po-s6)}
.po-cechy__w{display:grid;grid-template-columns:minmax(0,8.5rem) 1fr;gap:var(--po-s4);
  padding:.7rem 0;border-bottom:1px solid var(--po-obrys);align-items:baseline}
.po-cechy__w:last-child{border-bottom:0}
.po-cechy dt{color:var(--po-tekst-2);font-size:var(--po-fs-maly);line-height:1.5}
.po-cechy dd{margin:0;font-weight:600;font-size:var(--po-fs-maly);line-height:1.5}
.po-pliki{list-style:none;margin:0;padding:0;display:grid;gap:var(--po-s2)}
.po-pliki a{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.5rem .9rem;background:var(--po-bialy);border:1px solid var(--po-obrys-2);border-radius:var(--po-r);color:var(--po-tekst);text-decoration:none;font-size:var(--po-fs-maly);font-weight:600}
.po-pliki a:hover{border-color:var(--po-zielen);color:var(--po-zielen)}

/* --- LISTA ZAPYTANIA ---------------------------------------------------- */
.po-zapytanie{display:grid;gap:var(--po-s7)}
@media (min-width:1000px){.po-zapytanie{grid-template-columns:1fr 1fr;gap:var(--po-s8);align-items:start}}
.po-zapytanie__nag{font-size:1.375rem;margin-bottom:var(--po-s5)}
.po-lista{display:grid;gap:var(--po-s3)}
.po-lista__ladowanie{color:var(--po-tekst-2);font-size:var(--po-fs-maly)}
.po-lista__w{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--po-s3);
  background:var(--po-bialy);border:1px solid var(--po-obrys-2);border-radius:var(--po-r-k);padding:var(--po-s3);
}
@media (min-width:600px){.po-lista__w{grid-template-columns:auto 1fr auto auto;gap:var(--po-s4);padding:var(--po-s4)}}
.po-lista__obraz{width:64px;height:64px;border-radius:var(--po-r);overflow:hidden;background:var(--po-ciepla);flex-shrink:0}
.po-lista__obraz img{width:100%;height:100%;object-fit:cover}
.po-lista__nazwa{display:block;font-weight:600;color:var(--po-tekst);text-decoration:none;line-height:1.35}
.po-lista__nazwa:hover{color:var(--po-zielen)}
.po-lista__symbol{display:block;font-size:.8125rem;color:var(--po-tekst-2);margin-top:.15rem}
.po-lista__ilosc{display:flex;align-items:center;gap:.25rem;grid-column:2;justify-self:start}
@media (min-width:600px){.po-lista__ilosc{grid-column:auto;justify-self:auto}}
.po-ilosc__p{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--po-bialy);border:1px solid var(--po-obrys-2);border-radius:var(--po-r);cursor:pointer;color:var(--po-tekst)}
.po-ilosc__p:hover{border-color:var(--po-zielen);color:var(--po-zielen)}
.po-ilosc__pole{width:60px;height:44px;text-align:center;border:1px solid var(--po-obrys-2);border-radius:var(--po-r);font-weight:600}
.po-lista__usun{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:var(--po-r);cursor:pointer;color:var(--po-tekst-2)}
.po-lista__usun:hover{color:#9A3412;border-color:#E7C3B5;background:#FBEDE8}
.po-lista__pusto{background:var(--po-zielonkawa);border-radius:var(--po-r-k);padding:var(--po-s6)}
.po-lista__pusto-nag{font-weight:700;font-size:1.0625rem}
.po-lista__dol{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--po-s4);margin-top:var(--po-s5);padding-top:var(--po-s4);border-top:1px solid var(--po-obrys)}
.po-lista__ile{font-weight:600}
.po-lista__wyczysc{background:none;border:0;color:var(--po-tekst-2);text-decoration:underline;cursor:pointer;min-height:44px;font-size:.9375rem}
.po-lista__wyczysc:hover{color:#9A3412}
.po-zapytanie .po-uwaga{margin-top:var(--po-s5)}

/* --- W PRZYGOTOWANIU / 404 ---------------------------------------------- */
.po-budowa{
  min-height:min(78vh,760px);display:flex;align-items:center;
  background:linear-gradient(180deg,var(--po-zielonkawa) 0%,var(--po-bialy) 100%);
  padding-block:var(--po-sek-l);
}
.po-budowa__nag{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);margin-bottom:var(--po-s4)}
.po-budowa__lead{font-size:var(--po-fs-lead);color:var(--po-tekst-2);margin-bottom:var(--po-s6)}
.po-budowa__lista{list-style:none;margin:0 0 var(--po-s7);padding:0;display:grid;gap:var(--po-s3)}
.po-budowa__lista li{display:flex;align-items:flex-start;gap:.7rem}
.po-budowa__lista svg{color:var(--po-zielen-3);flex-shrink:0;margin-top:2px}
.po-budowa__przyciski{display:flex;flex-wrap:wrap;gap:var(--po-s3)}

/* --- WPISY / WYNIKI ----------------------------------------------------- */
.po-wpisy{display:grid;gap:var(--po-s5)}
.po-wpis{padding-bottom:var(--po-s5);border-bottom:1px solid var(--po-obrys)}
.po-wpis__nag{font-size:1.375rem;margin-bottom:var(--po-s2)}
.po-wpis__nag a{color:var(--po-tekst);text-decoration:none}
.po-wpis__nag a:hover{color:var(--po-zielen)}
.po-wpis__opis{color:var(--po-tekst-2)}
.po-pusto{background:var(--po-zielonkawa);border-radius:var(--po-r-k);padding:var(--po-s6)}
.po-strony{margin-top:var(--po-s7)}
.po-strony .nav-links{display:flex;flex-wrap:wrap;gap:var(--po-s2)}
.po-strony .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 .75rem;border:1px solid var(--po-obrys-2);border-radius:var(--po-r);color:var(--po-tekst);text-decoration:none;font-weight:600}
.po-strony .page-numbers:hover{border-color:var(--po-zielen);color:var(--po-zielen)}
.po-strony .page-numbers.current{background:var(--po-zielen);border-color:var(--po-zielen);color:#fff}

/* --- STOPKA ------------------------------------------------------------- */
.po-stopka{background:var(--po-zielen-glebia);color:var(--po-na-ciemnym-slaby);padding-top:var(--po-sek-m)}
.po-stopka__gora{display:grid;gap:var(--po-s7);padding-bottom:var(--po-s7)}
@media (min-width:800px){.po-stopka__gora{grid-template-columns:2fr 1fr 1fr;gap:var(--po-s8)}}
.po-stopka__logo{max-height:56px;width:auto}
.po-stopka__nazwa{display:block;font-family:'Literata','Literata zapasowy',Georgia,serif;font-size:1.375rem;font-weight:600;color:#fff}
.po-stopka__haslo{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--po-na-ciemnym-nad);margin-top:.25rem}
.po-stopka__opis{margin-top:var(--po-s4);font-size:var(--po-fs-maly);line-height:1.7;color:var(--po-na-ciemnym-slaby)}
.po-stopka__tytul{font-family:'Figtree','Figtree zapasowy',sans-serif;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--po-na-ciemnym-nad);margin-bottom:var(--po-s4)}
.po-stopka__lista{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.po-stopka__lista a,.po-stopka__poz{display:flex;align-items:center;gap:.6rem;min-height:44px;color:var(--po-na-ciemnym-tekst);text-decoration:none;font-size:var(--po-fs-maly)}
.po-stopka__lista a:hover{color:#fff}
.po-stopka__lista svg{color:var(--po-na-ciemnym-nad);flex-shrink:0}
.po-stopka__dol{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  /* 15 px: stoi tu odnosnik do polityki prywatnosci, czyli tresc, ktora
     gosc moze chciec otworzyc, a nie sama dekoracja. */
  gap:var(--po-s4);border-top:1px solid rgba(255,255,255,.12);font-size:.9375rem;
  padding-top:var(--po-s5);
  /* Bez rezerwy na karte ciasteczek. Rezerwa (wysokosc karty + marginesy)
     dokladala ok. 200 px pustej zieleni pod wierszem praw autorskich i przy
     1920 px stopka wygladala na „jakas wielka" (Pawel, 4.09.2026). Karta ma
     wlasny odnosnik do polityki prywatnosci, wiec zakryty odnosnik w stopce
     niczego nie odbiera; karta znika po decyzji goscia. */
  padding-bottom:var(--po-s5);
}
.po-stopka__dol p{margin:0}
.po-stopka__nip{margin-left:.75rem;color:var(--po-na-ciemnym-cichy)}
.po-stopka__linki{display:flex;flex-wrap:wrap;align-items:center;gap:var(--po-s5)}
.po-stopka__linki a{color:var(--po-na-ciemnym-tekst);text-decoration:underline;text-decoration-color:rgba(211,224,215,.4)}
.po-stopka__linki a:hover{color:#fff;text-decoration-color:#fff}
.po-stopka__wykonanie{color:var(--po-na-ciemnym-cichy)}

/* --- SŁUCHAWKA NA TELEFONIE --------------------------------------------- */
.po-tel-plywa{
  position:fixed;right:1rem;z-index:90;
  bottom:1rem;
  width:56px;height:56px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:var(--po-akcent);color:#fff;
  box-shadow:0 6px 20px rgba(26,36,32,.28);
  transition:opacity var(--po-czas) var(--po-ease),transform var(--po-czas) var(--po-ease);
  opacity:0;transform:scale(.8);pointer-events:none;
}
@media (max-width:899px){.po-tel-plywa{display:inline-flex}}
.po-tel-plywa.jest-widoczna{opacity:1;transform:scale(1);pointer-events:auto}
.po-tel-plywa:hover{background:var(--po-akcent-ciemny);color:#fff}

/* --- PASEK CIASTECZEK: mała karta w rogu, nie wstęga -------------------- */
.po-cookies{
  position:fixed;z-index:120;right:1rem;bottom:1rem;left:1rem;
  max-width:22rem;margin-left:auto;
  background:var(--po-bialy);border:1px solid var(--po-obrys-2);
  border-left:3px solid var(--po-akcent);
  border-radius:var(--po-r-k);box-shadow:var(--po-cien-2);
  padding:.75rem 1rem .875rem;
  transform:translateY(120%);transition:transform var(--po-czas-sr) var(--po-ease);
}
.po-cookies[hidden]{display:none}
.po-cookies.jest-widoczny{transform:translateY(0)}
/* Karta: dwa wiersze tekstu z odnosnikiem W ZDANIU (osobny wiersz odnosnika
   z wcieciem .6rem dawal 160 px), przyciski 44 px. Zmierzone po zmianie:
   ok. 115 px na telefonie, miara z pamieci: ok. 110, powyzej 130 za duzo. */
/* 15 px, nie 13. To jedyny tekst PRAWNY, ktory gosc ma przeczytac, zanim
   kliknie zgode, a odbiorca tej strony ma 40-65 lat. Karta ma zapas:
   zmierzone 121 px z 844 na telefonie przy progu 40 procent ekranu. */
.po-cookies__t{font-size:.9375rem;line-height:1.5;color:var(--po-tekst-2);margin-bottom:.625rem}
.po-cookies__t a{color:var(--po-zielen);display:inline;padding:.25rem 0;text-decoration:underline;text-decoration-color:rgba(27,76,41,.35)}
.po-cookies__t a:hover{color:var(--po-akcent-ciemny);text-decoration-color:currentColor}
.po-cookies__p{display:flex;flex-wrap:wrap;align-items:center;gap:var(--po-s2)}
.po-cookies__p .po-przycisk--maly{min-height:44px;padding:.5rem 1rem;font-size:.875rem}
@media (max-width:899px){
  /* Na telefonie karta zajmuje cala szerokosc przy samym dole. Poprzednio
     stala 84 px nad dolem, w miejscu zarezerwowanym dla sluchawki, ktora
     na pierwszym ekranie jeszcze sie nie pokazuje: pod karta wisiala pusta
     przestrzen. Sluchawka czeka, az gosc podejmie decyzje o cookies. */
  .po-cookies{left:1rem;right:1rem;max-width:none;bottom:1rem}
}
/* Najwezsze telefony (320 px): oba przyciski w jednym rzedzie, inaczej karta
   rosnie do 193 px. Zmierzone: 288 px karty, 256 px tresci. */
@media (max-width:359px){.po-cookies__p .po-przycisk--maly{padding:.5rem .7rem;font-size:.8125rem}}
.po-cookies-otwarte .po-tel-plywa{opacity:0;transform:scale(.8);pointer-events:none}
/* Strony z formularzem: sluchawka zakrywala prawy brzeg pol i konkurowala
   z wezwaniem, ktore gosc wlasnie wykonuje. */
.page-template-page-zapytanie-ofertowe .po-tel-plywa,.page-template-page-kontakt .po-tel-plywa{display:none}

/* --- MAPA WSPOLPRACY ----------------------------------------------------- */
.po-mapa__w{display:grid;gap:var(--po-s6)}
@media (min-width:900px){
  .po-mapa__w{grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:var(--po-s8);align-items:center}
}
.po-mapa__licznik{margin:var(--po-s5) 0 var(--po-s3);font-size:var(--po-fs-maly);color:var(--po-tekst-2)}
.po-mapa__licznik strong{font-family:'Literata','Literata zapasowy',Georgia,serif;font-size:1.75rem;color:var(--po-zielen);margin-right:.35rem}
.po-mapa__lista{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem;
}
.po-mapa__lista li{
  font-size:var(--po-fs-maly);color:var(--po-tekst-2);
  padding:.3rem .7rem;border:1px solid var(--po-obrys-2);border-radius:999px;
}
.po-mapa__stopka{margin-top:var(--po-s5);font-size:var(--po-fs-maly);color:var(--po-tekst-2)}
.po-mapa__rysunek svg{display:block;width:100%;height:auto}
.po-mapa__kontur{fill:var(--po-zielonkawa);stroke:var(--po-zielen-3);stroke-width:3;stroke-linejoin:round}
.po-mapa__aura{fill:var(--po-akcent);opacity:.18}
.po-mapa__kropka{fill:var(--po-akcent)}
/* Punkty pojawiaja sie po kolei, gdy sekcja wchodzi w okno. Ruch idzie po
   `scale`, nie po `transform`: `animation-fill-mode: both` przypina animowana
   wlasciwosc na zawsze i zabija pozniejsze reguly na `transform`. */
.po-js .po-mapa__punkt{opacity:0;scale:.4;transform-box:fill-box;transform-origin:center}
.po-js .po-wejscie.jest-widoczne .po-mapa__punkt,
.po-js .jest-widoczne .po-mapa__punkt{animation:po-punkt 320ms var(--po-ease) both;animation-delay:var(--po-op,0ms)}
@keyframes po-punkt{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){
  .po-js .po-mapa__punkt{opacity:1!important;scale:1!important;animation:none!important}
}

/* --- STRONA DZIALU ------------------------------------------------------- */
/* Uklad wg struktury, w ktorej klient napisal tresc: dla kogo, zdanie
   wyroznione z akapitem, „Jak wspieramy Panstwa" z punktami. */

/* Pasek „Dla kogo": waski, ciepły, oddziela zdjecie od tresci. */
.po-dla-kogo{background:var(--po-ciepla);border-bottom:1px solid var(--po-obrys)}
.po-dla-kogo__w{display:flex;align-items:flex-start;gap:.75rem;padding-block:var(--po-s4)}
.po-dla-kogo__w svg{color:var(--po-akcent);flex-shrink:0;margin-top:2px}
.po-dla-kogo__w p{margin:0;font-size:var(--po-fs-maly);line-height:1.6;color:var(--po-tekst-2)}
.po-dla-kogo__et{font-weight:700;color:var(--po-zielen-tekst)}

/* Zdanie wyroznione: jedyne miejsce na stronie dzialu z wieksza typografia,
   bo to obietnica, po ktorej gosc decyduje, czy czytac dalej. */
.po-obietnica{
  display:grid;gap:var(--po-s4) var(--po-s8);
  grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  align-items:start;
  padding-block:var(--po-s7);
  border-top:1px solid var(--po-obrys);
}
.po-obietnica:first-child{border-top:0;padding-top:0}
.po-obietnica:last-child{padding-bottom:0}
.po-obietnica__nag{
  font-size:clamp(1.375rem,1.2rem + .55vw,1.75rem);line-height:1.25;
  color:var(--po-zielen);margin:0;
}
.po-obietnica__txt{font-size:var(--po-fs-lead);line-height:1.7;color:var(--po-tekst-2);margin:0}
@media (max-width:820px){
  .po-obietnica{grid-template-columns:1fr;gap:var(--po-s3);padding-block:var(--po-s6)}
}
/* Zdanie wyróżnione w lewej kolumnie, rozwinięcie w prawej. Wersja
   poprzednia stawiała jedno pod drugim przez całą szerokość i czytała się
   jak dokument, nie jak strona (Paweł, 07.09.2026). To NIE jest zwężanie
   tekstu: w obu kolumnach stoi treść, więc obok krótszego wiersza nie ma
   pustki. Pilnuje tego `czytelnosc.py`, kontrola PUSTKA OBOK TEKSTU. */

/* „Jak wspieramy Panstwa": punkty klienta, kazdy z nazwa i opisem. */
.po-wsparcie__w{display:grid;gap:var(--po-s5);margin-top:var(--po-s6)}
@media (min-width:760px){.po-wsparcie__w{grid-template-columns:1fr 1fr;gap:var(--po-s6) var(--po-s8)}}
.po-wsparcie__p{display:flex;align-items:flex-start;gap:.85rem;padding-top:var(--po-s4);border-top:2px solid rgba(255,255,255,.18)}
.po-wsparcie__i{color:var(--po-na-ciemnym-nad);flex-shrink:0;margin-top:2px}
.po-wsparcie__nag{font-size:1.0625rem;line-height:1.3;color:#fff;margin-bottom:var(--po-s2)}
.po-wsparcie__opis{font-size:var(--po-fs-maly);line-height:1.65;color:var(--po-na-ciemnym-slaby);margin:0}

/* Rozdroze: dwie drogi z zakladki nadrzednej. */
.po-rozdroze{display:grid;gap:var(--po-s5);margin-top:var(--po-s6)}
@media (min-width:700px){.po-rozdroze{grid-template-columns:1fr 1fr;gap:var(--po-s6)}}
.po-rozdroze__k{
  display:flex;flex-direction:column;background:var(--po-bialy);
  border:1px solid var(--po-obrys-2);border-radius:var(--po-r-k);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color var(--po-czas) var(--po-ease),box-shadow var(--po-czas) var(--po-ease),transform var(--po-czas) var(--po-ease);
}
.po-rozdroze__k:hover{border-color:var(--po-zielen);box-shadow:var(--po-cien-2);transform:translateY(-3px)}
.po-rozdroze__foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.po-rozdroze__tresc{display:flex;flex-direction:column;gap:var(--po-s2);padding:var(--po-s5)}
.po-rozdroze__nag{font-family:'Literata','Literata zapasowy',Georgia,serif;font-size:1.25rem;line-height:1.25;color:var(--po-zielen)}
.po-rozdroze__opis{font-size:var(--po-fs-maly);line-height:1.6;color:var(--po-tekst-2)}
.po-rozdroze__wiecej{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--po-s2);font-weight:600;font-size:var(--po-fs-maly);color:var(--po-zielen-tekst)}
.po-rozdroze__k:hover .po-rozdroze__wiecej svg{transform:translateX(3px)}
.po-rozdroze__wiecej svg{transition:transform var(--po-czas) var(--po-ease)}

/* Kafel domykajacy rzad w siatce dzialu: ma wygladac jak zaproszenie,
   nie jak pusta pozycja katalogu, wiec obrys przerywany i brak zdjecia. */
.po-domkniecie{
  display:flex;flex-direction:column;justify-content:center;
  background:var(--po-bialy);border:2px dashed var(--po-obrys-2);
  border-radius:var(--po-r-k);padding:var(--po-s6);
}
.po-domkniecie svg{color:var(--po-zielen-tekst)}
.po-domkniecie__nag{font-size:1.125rem;line-height:1.3;margin:var(--po-s3) 0 var(--po-s2)}
.po-domkniecie__opis{font-size:var(--po-fs-maly);color:var(--po-tekst-2);line-height:1.6;margin-bottom:var(--po-s5)}
.po-domkniecie__akcje{display:flex;flex-wrap:wrap;gap:var(--po-s3)}
@media (max-width:559px){.po-domkniecie__akcje .po-przycisk{flex:1 1 100%;justify-content:center}}

/* --- WEJŚCIA SEKCJI ----------------------------------------------------- */
/* Wejscie sekcji jako ANIMACJA, nie przejscie.
   Przejscie na `.po-wejscie` nadpisywalo wlasne przejscie hoveru tego
   samego elementu: kafel mial `transition` na cien i obwodke, a dostawal
   liste `opacity, transform`. Skutek: cien i ramka skakaly bez plynnosci,
   a przesuniecie trwalo 380 ms zamiast 280. Animacja nie rusza wlasciwosci
   `transition`, wiec hover zostaje nietkniety. */
/* Wejscie jedzie po `translate`, NIE po `transform`.
   `animation-fill-mode: both` przypina wartosc koncowa animowanej
   wlasciwosci i bije zwykla regule CSS. Przy `transform` oznaczalo to,
   ze `.po-dk:hover{transform:translateY(-3px)}` nie mialo zadnego
   skutku: kafel przestawal sie unosic, a pomiar przed i po najechaniu
   pokazywal roznice tylko dlatego, ze pierwszy odczyt lapal jeszcze
   trwajaca animacje wejscia. `translate` to osobna wlasciwosc, wiec
   animacja trzyma ja u siebie, a `transform` zostaje wolny dla hoveru.
   Memory: lekcja-fill-mode-both-przykrywa-transform. */
.po-wejscie{opacity:0;translate:0 12px}
.po-wejscie.jest-widoczne{animation:po-wejscie var(--po-czas-w) var(--po-ease) both}
.po-wejscie--2.jest-widoczne{animation-delay:90ms}
@keyframes po-wejscie{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* Straż: gdy skrypt nie wystartuje, treść MUSI być widoczna.
   Klasa nadawana przez JS w pierwszej linii — bez niej nic się nie chowa. */
html:not(.po-js) .po-wejscie{opacity:1;translate:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .po-wejscie{opacity:1!important;translate:none!important;transform:none!important}
  .po-mobile{transition:none}
}

/* --- POLA DOTYKU NA TELEFONIE -------------------------------------------
   Zmierzone przez stany.py: okruszki 91x24, tytuł pozycji w katalogu 282x25,
   podpis „Arlek.pl" w stopce 46x17. Podnosimy WYŁĄCZNIE odstępem pionowym.
   Zmiana `display` na `block` skleiłaby odnośniki stopki w jeden blok —
   ta poprawka już raz zepsuła sąsiada (memory: lekcja-poprawka-bramki-psuje-obok). */
@media (max-width:899px){
  /* Dwa wezwania obok siebie mialy rozna szerokosc: jedno na cala,
     drugie na tresc. Na telefonie oba ida na pelna szerokosc. */
  .po-kp__akcja{display:grid;gap:var(--po-s3)}
  .po-kp__akcja .po-dodaj,.po-kp__akcja .po-przycisk{width:100%}
  .po-hero__przyciski{display:grid;gap:var(--po-s3)}
  .po-hero__przyciski .po-przycisk{width:100%}
  .po-budowa__przyciski{display:grid;gap:var(--po-s3)}
  .po-budowa__przyciski .po-przycisk{width:100%}
  .po-okruszki a,.po-okruszki span{padding-block:.72rem;display:inline-block}
  .po-produkt__nag a{padding-block:.72rem;display:inline-block}
  .po-stopka__wykonanie a{padding-block:.75rem;display:inline-block}
  .po-stopka__linki a{padding-block:.75rem;display:inline-block}
  .po-lista__nazwa{padding-block:.5rem}
  .po-kp__mini-p{width:64px;height:64px}
  .po-dk__nag a{padding-block:.72rem;display:inline-block}
  .po-dpas__nag a{padding-block:.72rem;display:inline-block}
  .po-znak{padding-block:.55rem}
  .po-znak__obraz{max-height:36px}
  .po-marka__haslo{font-size:.625rem;letter-spacing:.12em}
  .po-wpis__nag a{padding-block:.5rem;display:inline-block}
}


/* --- KATALOG NA TELEFONIE: filtry jako paski znaczników ------------------
   Zmierzone: pełna kolumna filtrów zajmowała 864 px, czyli więcej niż cały
   ekran telefonu. Gość musiał przewinąć ekran filtrów, zanim zobaczył
   pierwszą pozycję. Poziome paski schodzą do około 150 px i pokazują od razu,
   po czym da się zawęzić katalog. */
@media (max-width:999px){
  /* Bez przyklejania: pasek ma 224 px, wiec przyklejony zjadalby cwiartke
     ekranu telefonu przez cale przegladanie katalogu. */
  .po-filtry{
    margin-inline:calc(-1 * var(--po-px));
    padding:0 var(--po-px) var(--po-s5);
    border-bottom:1px solid var(--po-obrys);
  }
  .po-filtry__w{gap:var(--po-s3)}
  .po-filtry__grupa{display:grid;gap:.4rem}
  .po-filtry__nag{margin-bottom:0}
  .po-filtry__lista{
    display:flex;gap:var(--po-s2);
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:.25rem;margin-bottom:-.25rem;
  }
  .po-filtry__lista::-webkit-scrollbar{display:none}
  /* Znak, ze pasmo przewija sie w bok: prawy brzeg wygasa, dopoki cos
     jest dalej (klasa z main.js), a nie zawsze, bo staly cien obcinalby
     ostatni kafelek po dojechaniu do konca. */
  .po-filtry__lista.ma-dalej{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.75rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 2.75rem),transparent)}
  .po-filtry__poz{flex:0 0 auto}
  .po-filtry__lista a{
    white-space:nowrap;min-height:var(--po-h-s);padding:.5rem .9rem;
    border:1px solid var(--po-obrys-2);border-radius:var(--po-r);
    font-weight:500;
  }
  .po-filtry__poz.jest-aktywny > a{background:var(--po-zielen);border-color:var(--po-zielen);color:#fff}
  .po-filtry__poz.jest-aktywny > a .po-filtry__ile{color:var(--po-na-ciemnym-slaby)}
  /* Podkategorii i ramki pomocy nie wciskamy w pasek: pierwsza jest pusta
     w tym katalogu, druga powtarza wezwanie, ktore stoi nizej na stronie. */
  .po-filtry__pod,.po-filtry__pomoc{display:none}
  .po-filtry__wszystkie{min-height:var(--po-h-s)}
}

/* --- WASKIE TELEFONY: nagłówek nie może wypychać strony w bok ------------
   Zmierzone przez przewijanie.py: przy 320 px nagłówek wychodził o 63 px
   poza okno, przy 360 px o 23 px. Winne: napis znaku w 1,375 rem obok
   skrótu do listy i hamburgera. */
@media (max-width:420px){
  /* Ciasniejsze marginesy TYLKO w naglowku. Zmienna ustawiona na samym
     naglowku zmienia szerokosc jego kontenera, a reszta strony zostaje
     przy wygodnych 20 px od krawedzi ekranu. */
  .po-naglowek{--po-px:.875rem}
  .po-znak__nazwa{font-size:1.125rem}
  .po-znak__obraz{max-height:32px}
  /* Haslo zostaje takze na telefonie, bo klient prosil zeby bylo „gdzies
     na gornym pasku". Zmierzone: przy 9 px zajmuje 170 px szerokosci,
     a obok logo i dwoch ikon jest na nie okolo 280 px. */
  .po-marka__haslo{font-size:.5625rem;letter-spacing:.1em}
  .po-znak__haslo{font-size:.5625rem;letter-spacing:.1em}
  .po-naglowek__akcje{gap:var(--po-s2)}
  .po-lista-skrot{padding:.5rem .35rem}
  .po-hamburger{width:44px;padding:0 9px}
}
@media (max-width:360px){
  .po-znak__nazwa{font-size:1rem}
  /* Podtytul znika, wiec sam odnosnik robi sie za niski na palec. */
  .po-znak__haslo{display:none}
  /* Haslo z logotypu ZOSTAJE takze tutaj: zmierzone przy 320 px zajmuje
     179 px i do ikon po prawej ma jeszcze 30 px zapasu. Klient prosil,
     zeby bylo na gornym pasku, wiec nie chowamy go na zadnej szerokosci. */
  /* 0,9rem bylo potrzebne, gdy pod logo nie bylo nic i sam odnosnik mial
     32 px. Haslo wrocilo poza odnosnik, wiec wystarcza tyle, zeby samo logo
     dalo pole dotyku. Przy 0,9rem pasek mial 76 px.
     `min-height` zamiast samego wypelnienia, bo obraz o proporcji 509:160
     przy `max-height:32px` renderuje sie na 31,984 px i 32 + 2 x 6 dawalo
     43,984, czyli bramka macierzy zglaszala pole dotyku ponizej progu na
     21 szablonach. Wartosc dobrana CO DO PROGU zawsze przegrywa
     z zaokragleniem, wiec tu jest zapas. */
  .po-znak{padding-block:.375rem;min-height:46px}
}

/* --- DRUK --------------------------------------------------------------- */
@media print{
  .po-naglowek,.po-mobile,.po-cookies,.po-tel-plywa,.po-filtry,.po-formularz{display:none!important}
  body{font-size:11pt}
  .po-sekcja{padding-block:1rem}
}

/* Okruszki stoja NAD ukladem naglowka, pelna szerokoscia. Wewnatrz kolumny
   tekstu byly wyrownywane pionowo razem z nia i przy krotszym tekscie
   zaczynaly sie 100 px nizej niz zdjecie obok, robiac pustke u gory strony. */
.po-glowa__w > .po-okruszki--nad{grid-column:1/-1;margin-bottom:calc(var(--po-s6) * -1)}

/* Dwie drogi dalej pod leadem zakladki. Wypelniaja miejsce, ktore zostawalo
   pod krotszym tekstem obok zdjecia 4:3, i robia to trescia, nie ozdoba. */
.po-glowa__akcje{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--po-s4) var(--po-s6);margin-top:var(--po-s6);
}
.po-glowa__tel{
  display:inline-flex;align-items:center;gap:var(--po-s2);
  font-weight:600;color:var(--po-zielen-tekst);text-decoration:none;
  /* 29 px wysokosci na telefonie to za male pole dotyku (prog 44). */
  padding-block:.5rem;min-height:44px;
}
.po-glowa__tel:hover,.po-glowa__tel:focus-visible{color:var(--po-akcent)}

/* Odnosniki w tresci strony tekstowej (polityka prywatnosci): adres e-mail
   w akapicie mial 187x20 px, czyli mniej niz prog 44 px na telefonie.
   `padding-block` na elemencie liniowym powieksza pole dotyku i NIE zmienia
   wysokosci wiersza, wiec uklad prozy zostaje bez zmian. */
@media (max-width:600px){
  .po-tekstowa a[href^="mailto:"],
  .po-tekstowa a[href^="tel:"]{padding-block:.8rem}
}

/* Rzad z mniej niz trzema kaflami nie rozciaga sie na trzy kolumny: przy
   jednej pozycji i kaflu domykajacym zostawalo 750 px pustki po prawej. */
@media (min-width:1200px){
  .po-siatka--waska{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ======================================================================
   WYBOR WARIANTU POZYCJI KATALOGU
   ======================================================================
   Klient, 21.09.2026: „aby klient widzial, ze moze sobie wybrac".
   Pawel doprecyzowal, ze ma wybrac i DOPIERO potem dodac do zapytania.

   Zwykle pola `radio` ukryte wizualnie, a widac etykiete z miniatura
   i NAZWA barwy. Odbiorca ma 40-65 lat i czesto telefon: sam kwadracik
   nie mowi nic, a nazwa mowi.
   ====================================================================== */
.po-wariant{border:0;padding:0;margin:0 0 var(--po-s5)}
.po-wariant__nag{
  padding:0;margin-bottom:var(--po-s3);
  font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--po-tekst-2);font-family:'Figtree','Figtree zapasowy',sans-serif;
}
.po-wariant__lista{display:flex;flex-wrap:wrap;gap:var(--po-s3)}
/* Pole zostaje w drzewie dostepnosci: `display:none` wyjmuje je z obslugi
   klawiatura i z czytnika ekranu. */
.po-wariant__pole{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.po-wariant__et{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.375rem .75rem .375rem .375rem;
  /* `--po-obrys` to token DEKORACYJNY (kreski, wiersze tabeli): na bieli ma
     1,29 i przy przycisku wyboru zglosila go bramka `niewidoczne.py`
     (1,59 przy progu 3,00). Element klikalny bierze `--po-obrys-2`, ktory
     powstal dokladnie do tego i ma zmierzone 3,55 na bieli. Nazwa tokenu
     nie mowi, do czego sluzy; mowi to jego komentarz przy definicji. */
  border:2px solid var(--po-obrys-2);border-radius:999px;
  background:#fff;color:var(--po-tekst);cursor:pointer;
  font-size:.9375rem;
  transition:border-color var(--po-czas) var(--po-ease),background var(--po-czas) var(--po-ease);
}
.po-wariant__et img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.po-wariant__et:hover{border-color:var(--po-zielen-tekst)}
/* Stan wybrany: obwodka 2 px w barwie wiodacej plus grubszy napis.
   Sama barwa obwodki to za malo przy 3:1, wiec dokladamy tlo i grubosc. */
.po-wariant__pole:checked + .po-wariant__et{
  border-color:var(--po-zielen);background:var(--po-zielonkawa);font-weight:600;
}
/* Obrys skupienia MUSI byc widoczny, bo samo pole jest ukryte wizualnie. */
.po-wariant__pole:focus-visible + .po-wariant__et{
  outline:3px solid var(--po-zielen-tekst);outline-offset:2px;
}