/* ============================================================
   KROJE JACKOWA - z wlasnego serwera, zero zapytan na zewnatrz.
   Reguly przepisane z ../../assets/css/tokens.css; zmieniona jest
   wylacznie sciezka (sklep/css/ lezy o poziom glebiej niz assets/css/).
   Zrodlem prawdy dla zakresow znakow pozostaje tokens.css.
   Licencja obu krojow: SIL Open Font License 1.1 - hosting wlasny dozwolony.
   ============================================================ */
@font-face{
  font-family:'Lora';
  src:url('../../assets/fonts/lora-latin.woff2') format('woff2');
  font-weight:400 700; 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:'Lora';
  src:url('../../assets/fonts/lora-latin-ext.woff2') format('woff2');
  font-weight:400 700; 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;
}
@font-face{
  font-family:'Inter';
  src:url('../../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900; 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:'Inter';
  src:url('../../assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:100 900; 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;
}

@charset "UTF-8";
/* ⚠️ Bodoni Moda gubi kreske w „l" przy duzym rozmiarze optycznym: naglowek „dokladnie"
   renderowal sie jako „dokladnie", bez kreski. Zmierzone 05.08.2026 - winna jest os `opsz`,
   nie ligatury ani `calt`. Wylaczenie osi naprawia wszystkie „l"; pozostale ogonki
   (a e z o n c s z) byly poprawne. Wlasciwosc dziedziczy sie z :root. NIE USUWAC. */
/* Uniwersalne + !important, bo skrot `font:` w regule na body kasuje te wlasciwosc
   (zlapane na innym naszym serwisie: :root mial none, a naglowki dalej auto). */
*, *::before, *::after { font-optical-sizing: none !important; }
/* ==========================================================================
   Jackowo Jarosławiec - arkusz stylow sklepu.
   Arkusz wspolny dla czterech stron: index.html, sklep.html, produkt.html, panel.html.
   Wersja: 20260905k   (w HTML linkujemy: css/style.css?v=20260905k)

   SYSTEM WIZUALNY - ten sam, ktorego trzymamy sie w naszych realizacjach:
   - PRAWDZIWE ZDJECIA produktow w <img>, aspect-ratio 3/4, object-fit:cover,
   - szeryf 'Lora' w naglowkach i w cenach, 'Inter' w tekscie i UI,
   - kremowa paleta, jeden stonowany akcent (palona terakota), zloto jako drugi glos,
   - miekkie zaokraglenia: 16px karty i panele, 14px karta produktu, 10px miniatury,
   - przyciski zawsze pigulki, plakietki na zdjeciu male i w wersalikach.

   ZERO rysowania produktu CSS-em. Nie ma tu klasy .produkt, .wzor ani .dodatek.
   Produkt na tej stronie to <img> ze zdjeciem.

   Poprawki wzgledem wzorca bazowego (celowe, nie kopiujemy jego bledow):
   1. .prod ma position:relative, wiec .serce trzyma sie karty, a nie okna przegladarki,
   2. jest podmiana zdjecia po najechaniu (.foto-druga) - wzorzec jej nie mial,
   3. szuflady chowamy przez opacity + visibility, NIGDY przez wyjazd poza ekran,
   4. .btn--maly ma 44px wysokosci (dotyk), nie 40px,
   5. siatki schodza do jednej kolumny na <=600px,
   6. zero alert() - komunikaty ida do .toast i do .komunikat.
   ========================================================================== */

/* ==========================================================================
   1. RESET I BAZA MOBILE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ overflow-x:clip; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; overflow-wrap:anywhere; }
img, video, svg, iframe{ max-width:100%; height:auto; display:block; }
input, select, textarea, button{ font-size:16px; font-family:inherit; line-height:1.25; }
button{ font-family:'Inter',system-ui,sans-serif; }
[hidden]{ display:none !important; }
select{
  -webkit-appearance:none; appearance:none; min-height:46px; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4234' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* ==========================================================================
   2. PALETA I TYPOGRAFIA
   ========================================================================== */
:root{
  /* ══════════════════════════════════════════════════════════════════════
     PALETA SKLEPU - przebudowana 13.09.2026

     ⛔ Kolory pochodza z palety SERWISU (assets/css/tokens.css), nie z szablonu.
        Sklep uzywal wczesniej rodziny terakotowej odziedziczonej po innym kliencie.
     ⚡ Trzy role kolorystyczne, kazda cos ZNACZY:
        zielen  - marka i dzialanie (przyciski, odnosniki),
        bursztyn - wedzarnia, cena, wyroznienie,
        morski  - swieza ryba i informacja o transporcie.
     ⛔ Nazw nie zmieniac - 1041 odwolan `var()` w tym pliku.
     ══════════════════════════════════════════════════════════════════════ */

  /* grunt */
  --bialy:#fff;
  --kremowy:#FBF9F5;
  --kremowy2:#F1EADC;
  --piasek:#E7DFD0;

  /* ciemne pasy: ZIELONA czern, nie brazowa - to Baltyk i wedzarnia, nie kawiarnia */
  --noc:#11241A;
  --noc2:#183021;
  --noc-tekst:#F0E8D8;
  --noc-tekst2:#AFC2B4;

  /* ⚡⚡ STOPKA - TA SAMA W SKLEPIE I NA STRONIE (14.09.2026, polecenie klienta:
     „Footer na stronie i na sklepie mają być takie same kolorystycznie!").
     ⛔⛔ TO NIE JEST `--noc` I NIE MOZE NIM BYC. `--noc` maluje w sklepie takze hero,
     pasy `.sekcja--noc` i welony nad zdjeciami - podmiana tego tokenu przemalowalaby
     pol sklepu, a zmiana dotyczy WYLACZNIE stopki. Osobny token = osobna decyzja.
     ⚡ Wartosci sa IDENTYCZNE z `--c-stopka*` w `assets/css/tokens.css` serwisu:
     tlo #1E4830, tekst #F3E9DA (8,63:1), przygaszony #D5C9B7 (6,35:1), linia bieli 14%.
     ⛔ Zmieniasz jedno - zmien drugie. Pilnuje tego regula „obie stopki maja to samo
        tlo". */
  --stopka:#1E4830;
  --stopka-tekst:#F3E9DA;
  --stopka-tekst2:#D5C9B7;
  --stopka-linia:rgba(255,255,255,.14);

  /* tekst */
  --ink:#16201A;
  --muted:#4B584F;
  --muted2:#7E8C81;

  /* marka */
  --akcent:#2C6343;
  --akcent-ciemny:#1B452C;
  --akcent-jasny:#E7F2EB;

  /* bursztyn - dym, wedzarnia, cena */
  --bursztyn:#AE7D29;
  --bursztyn-ciemny:#7A5518;
  --bursztyn-jasny:#F6E7C6;
  --bursztyn-tekst:#654513;

  /* morski - swieza ryba, transport */
  --morski:#2F687F;
  --morski-ciemny:#1F495C;
  --morski-jasny:#E6F1F6;

  /* zloto na ciemnym tle */
  --zloto:#D8B45F;

  /* stany */
  --alarm:#8E2F16;
  --alarm-jasny:#FBE9E4;
  /* ⚡ OLIWKA - kolor dzialu olejow (14.09.2026). POLICZONA, nie dobrana: zdjecia
     olejow maja 83% nasyconych pikseli w pasmie 30-79 st. (pola rzepaku, lnu
     i slonecznika, oliwkowe szklo butelek), srodek pasma to 55-58 st.
     Wariant ciemny 7,58:1 na bieli - dla etykiety dzialu na karcie. */
  --oliwka:#84812A;
  --oliwka-ciemny:#595618;
  --oliwka-jasny:#F5F5E5;

  /* ⛔ Cztery zmienne uzywane w pliku, ktore NIGDY nie byly zdefiniowane (stan zastany).
     `--dym` i `--linia` nie mialy nawet wartosci zapasowej, wiec tekst dostawal kolor
     odziedziczony, a ramka - kolor tekstu. Domykam je tu, przy palecie. */
  --dym:var(--muted);
  --linia:var(--line);
  --bars:116px;                 /* wysokosc dwoch przyklejonych paskow u gory */
  --font-tekst:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --line:rgba(17,36,26,.14);
  --line2:rgba(17,36,26,.07);

  --tap:48px; --safe-b:env(safe-area-inset-bottom,0px);
  --cien:0 2px 10px rgba(31,36,33,.06);
  --cien2:0 12px 40px rgba(31,36,33,.14);
}

html{ scroll-behavior:smooth; scroll-padding-top:132px; }
/* na index i w sklepie naglowek ma dwa poziomy (68px + 48px pasek kategorii),
   wiec kotwice dostaja jeszcze 20px zapasu - razem 116px, dokladnie tyle, ile trzeba */
section[id], .kotwica{ scroll-margin-top:20px; }

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--kremowy);
  line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
}
h1, h2, h3, h4{
  font-family:'Lora',Georgia,'Times New Roman',serif;
  font-weight:500; line-height:1.1; letter-spacing:-.005em; margin:0;
}
p{ margin:0 0 14px; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--akcent); }
:focus-visible{ outline:2px solid var(--akcent); outline-offset:3px; }
::selection{ background:var(--akcent-jasny); color:var(--akcent-ciemny); }

.wrap{ width:100%; max-width:1260px; margin-inline:auto; padding-inline:clamp(16px,4vw,30px); }
section{ padding:clamp(52px,7vw,88px) 0; }
.sekcja--biala{ background:var(--bialy); }
.sekcja--kremowa2{ background:var(--kremowy2); }
/* ciemne sekcje: ten sam podnieciony kolor co stopka (13,7:1 zamiast 9,4:1) */
.sekcja--noc{ background:var(--noc); color:var(--noc-tekst); }
.sekcja--noc h1, .sekcja--noc h2, .sekcja--noc h3{ color:#fff; }
.sekcja--waska{ padding-top:clamp(22px,3vw,32px); }

.eyebrow{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--akcent-ciemny); font-weight:700; margin:0 0 14px; }
.sekcja--noc .eyebrow{ color:var(--zloto); }
.lead{ max-width:640px; margin-bottom:clamp(28px,4vw,44px); }
.lead h2{ font-size:clamp(27px,4.4vw,44px); }
.lead p{ color:var(--muted); margin:13px 0 0; font-size:clamp(15px,2vw,17px); }
.sekcja--noc .lead p{ color:var(--noc-tekst); }
/* wstep + tresc wysrodkowane - ten sam rytm w kazdej sekcji */
.srodek{ margin-inline:auto; text-align:center; }
/* ⚠️ `.lead p` (klasa + element) BIJE `.eyebrow` (sama klasa), wiec etykieta wewnatrz
   bloku wstepu traci kolor akcentu i rosnie do 17 px. Na jasnym tle to tylko drobna
   niekonsekwencja, ale na ciemnym pasie wychodzilo 1,8:1 - brazowy tekst na brazie.
   Dlatego etykieta w `.lead` dostaje wlasna regule o tej samej wadze. */
.lead .eyebrow{ color:var(--akcent-ciemny); font-size:11.5px; margin:0 0 14px; }
.sekcja--noc .lead .eyebrow, .df-zaufanie .lead .eyebrow{ color:var(--zloto); }

.lead-rzad{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; max-width:none; }

/* drobna nota "[do uzupelnienia]" - kolor, ktory przechodzi kontrast (nie muted2) */
.nota{ font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.55; }
.okruszek{ font-size:13px; color:var(--muted); margin:0 0 10px; }
.nw{ white-space:nowrap; }

/* ==========================================================================
   3. FAIL-SAFE: tresc czytelna bez JS
   ========================================================================== */
.bez-js [data-tylko-js]{ display:none !important; }
.bez-js .bez-js-info{ display:block; }
.bez-js-info{ display:none; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:13.5px; padding:12px 16px; border-radius:12px; margin-bottom:18px; }
/* bez skryptu zadna warstwa nie moze przykryc tresci */
.bez-js .ovl, .bez-js .toast{ display:none; }
.reveal{ opacity:1; transform:none; }
html.js-anim .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
html.js-anim .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.js-anim .reveal{ opacity:1; transform:none; } }

/* ==========================================================================
   4. PRZYCISKI
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--tap); cursor:pointer; font:700 14px 'Inter',sans-serif;
  padding:13px 26px; border-radius:100px;
  border:1px solid var(--akcent); background:var(--akcent); color:#fff;
  transition:transform .18s ease, background .2s ease, border-color .2s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; text-align:center;
}
.btn--kontur{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--noc{ background:var(--noc); border-color:var(--noc); color:#fff; }
.btn--zloto{ background:var(--zloto); border-color:var(--zloto); color:var(--ink); }
.btn--maly{ min-height:44px; padding:10px 18px; font-size:13px; }   /* 44px, nie 40 - dotyk */
.btn--pelny{ width:100%; }
.btn--kwadrat{ min-width:56px; padding-inline:14px; }
.btn--obrys{ background:transparent; color:var(--ink); border-color:var(--line); }   /* druga nazwa .btn--kontur */
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--akcent-ciemny); border-color:var(--akcent-ciemny); color:#fff; transform:translateY(-1px); }
  .btn--kontur:hover, .btn--obrys:hover{ background:var(--kremowy2); border-color:var(--ink); color:var(--ink); }
  .btn--noc:hover{ background:var(--noc2); border-color:var(--noc2); color:#fff; }
  .btn--zloto:hover{ background:var(--bursztyn); border-color:var(--bursztyn); color:var(--ink); }
}
.link-podkreslony{ color:var(--akcent-ciemny); text-decoration:underline; text-underline-offset:3px; font-weight:600; }

/* ==========================================================================
   5. PASEK PROMOCYJNY + NAGLOWEK
   ========================================================================== */
.pasek-demo, .demobar{
  background:var(--noc); color:var(--noc-tekst); font-size:12.5px; text-align:center;
  padding:8px 14px; line-height:1.5;
}
.pasek-demo a, .demobar a{ color:var(--zloto); border-bottom:1px solid currentColor; }
.pasek-demo a:hover, .demobar a:hover{ color:var(--bursztyn-jasny); }

/* Etykieta tylko dla czytnikow ekranu. ⚠️ CELOWO PRZED blokiem paska:
   dwie podmiany bloku z rzedu zjadly te regule, bo siedziala w srodku. */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* PASEK PROMOCJI (13.08.2026, wersja wg klienta): CIENKI pasek, w ktorym tekst
   plynie w PRAWO bez zatrzymania, a komunikaty ida na zmiane (dostawa / kod).
   Tor ma zdublowana zawartosc i jedzie od -50% do 0 - petla bez szwu.
   `overflow:hidden` pilnuje, zeby tasma nie robila poziomego przewijania strony. */
.pasek-promo{
  background:var(--noc); color:var(--noc-tekst); padding:7px 0; overflow:hidden;
}
.promo-tor{
  display:flex; width:max-content;
  animation:promo-plynie 40s linear infinite;
}
/* ⛔ PUSTKA NA SZEROKIM EKRANIE. Tor stoi na starcie na `translateX(-50%)`, czyli pokazuje
   DRUGA grupe - a gdy jedna grupa jest wezsza od okna, za jej koncem widac goly pasek.
   Zmierzone: grupa ma 1470 px, wiec przy 1920 px zostawalo 450 px pustki, przy 2560 px - 1090.
   ⚡ `min-width:100vw` gwarantuje, ze grupa NIGDY nie jest wezsza od okna, przy kazdej
   szerokosci i bez JavaScriptu. `space-around` rozklada nadmiar rowno, a szew miedzy grupami
   wypada dokladnie taki sam jak odstep miedzy pozycjami (pol odstepu + pol odstepu),
   wiec petla dalej nie ma widocznego laczenia. */
.promo-grupa{ display:flex; flex:none; min-width:100vw; justify-content:space-around; }
.promo-poz{
  flex:none; padding:0 34px; font-size:12.5px; line-height:17px;
  letter-spacing:.03em; white-space:nowrap;
}
.promo-poz b{ color:var(--zloto); font-weight:700; }
/* od -50% do 0 = ruch W PRAWO; zdublowana zawartosc domyka petle */
@keyframes promo-plynie{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }
/* Bez animacji: tasma staje, pokazujemy jedna pare komunikatow na srodku. */
@media (prefers-reduced-motion:reduce){
  .promo-tor{ animation:none; width:100%; justify-content:center; }
  .promo-grupa + .promo-grupa{ display:none; }
  .promo-grupa{ flex-wrap:wrap; justify-content:center; }
  .promo-grupa .promo-poz:nth-child(n+3){ display:none; }
}
@media (max-width:420px){
  .promo-poz{ font-size:11.5px; padding:0 22px; }
}

header.nav{
  position:sticky; top:0; z-index:70;
  background:rgba(250,246,241,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line2);
}
.nav-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; height:68px; }
.brand{ font-family:'Lora',Georgia,serif; font-size:23px; letter-spacing:.02em; display:inline-flex; align-items:center; min-height:44px; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand em{ font-style:italic; color:var(--akcent); }
.brand small{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-left:10px; }
/* OFICJALNE LOGO od klienta (13.08.2026). Obrazek ma przezroczyste tlo i CZARNY
   napis - dziala na jasnym tle nawigacji. W stopce (ciemne tlo) zostaje zapis
   tekstowy, bo czarny napis by tam zniknal - do czasu, az klient da wersje jasna. */
/* ⛔⛔ `flex:none` JEST TU NAJWAZNIEJSZE. Bez niego obrazek stoi w kontenerze `flex`
   z domyslnym `flex-shrink:1` i przy ciasnocie zostaje SCISNIETY W POZIOMIE - zmierzone
   na telefonie: 100 px zamiast 159 przy 390 px ekranu i 30 px zamiast 159 przy 320 px.
   Napis „NAZWA MARKI" byl wtedy zgnieciony piecio krotnie. `width:auto` samo nie wystarcza,
   bo `flex-shrink` dziala na wyliczona szerokosc. */
.brand--logo{ flex:none; }
.brand--logo img{ display:block; width:auto; height:34px; flex:none; }
/* Na telefonie logo jest nizsze, a miejsce robia ikony schodzace do menu (nizej). */
@media (max-width:600px){ .brand--logo img{ height:26px; } }
@media (max-width:360px){ .brand--logo img{ height:24px; } }
.nav-linki{ display:flex; gap:24px; align-items:center; }
.nav-linki a.link{ font-size:14.5px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; min-height:44px; }
/* 7,6:1 zamiast 5,0:1 - terakota na kremie to ten sam cieply odcien co tlo */
.nav-linki a.link:hover, .nav-linki a.link.akt{ color:var(--akcent-ciemny); }
.nav-akcje{ display:flex; align-items:center; gap:6px; flex:none; }
/* ⚠️ Piec ikon zajmowalo 244 z 390 px naglowka i nie zostawalo miejsca na logo.
   Konto i ulubione schodza na telefonie do menu pod hamburgerem - odpowiadaja im
   pozycje `.nav-konto`, wiec dostep zostaje. */
/* ⚠️ WYZSZA SPECYFICZNOSC JEST TU KONIECZNA. `.ikonabtn` i `.nav-linki a.link` maja
   wlasne `display` zapisane NIZEJ w tym pliku, wiec przy rownej wadze wygrywaly
   z regulami ponizej i ani ikony sie nie chowaly, ani pozycje menu nie pokazywaly.
   Zmierzone: na 1440 px widac bylo obie pozycje menu, a na 390 px dalej piec ikon. */
@media (max-width:600px){ .nav-akcje .ikonabtn--chowana{ display:none; } }
.nav-linki a.link.nav-konto{ display:none; }
@media (max-width:600px){ .nav-linki a.link.nav-konto{ display:inline-flex; } }
.ikonabtn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:none; cursor:pointer; position:relative; border-radius:50%;
  color:var(--ink); transition:background .2s ease;
}
.ikonabtn svg{ width:21px; height:21px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){ .ikonabtn:hover{ background:var(--kremowy2); } }
.licznik{
  position:absolute; top:4px; right:2px; min-width:19px; height:19px; padding:0 5px;
  border-radius:100px; background:var(--akcent); color:#fff;
  font:700 11px 'Inter',sans-serif; display:flex; align-items:center; justify-content:center;
}
/* hamburger: schowany na duzych ekranach, ale ZAWSZE 44x44 - bez tego na podstronie,
   ktora nie doda mu klasy .ikonabtn, przycisk mierzyl 6 px i nie dalo sie w niego trafic */
.nav-toggle{ display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; }

/* pasek kategorii - drugi poziom naglowka (index i sklep) */
/* PASEK KATEGORII (13.08.2026, wzor royalgift.sklep.pl): wysrodkowany,
   kazda pozycja ma mega-menu na cala szerokosc. Dropdown otwiera :hover
   i :focus-within - dziala z klawiatury i bez JS. Na telefonie (<900px)
   pasek wraca do przewijania, a dropdowny znikaja - pozycje sa linkami. */
.katbar{ border-top:1px solid var(--line2); background:var(--bialy); position:relative; }
.katbar-inner{ display:flex; gap:6px; align-items:stretch; justify-content:center; height:48px; }
.katbar-inner::-webkit-scrollbar{ display:none; }
.kat-poz{ display:flex; align-items:stretch; }
.katbar .kat-link{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 13px;
}
.katbar .kat-link:hover, .kat-poz:hover .kat-link, .kat-poz:focus-within .kat-link{ color:var(--akcent); }
.katbar .kat-link--akcent{ color:var(--akcent); }
.kat-strzalka{ width:9px; height:6px; opacity:.6; transition:transform .2s; }
.kat-poz:hover .kat-strzalka, .kat-poz:focus-within .kat-strzalka{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .kat-strzalka{ transition:none; } }

/* mega-panel: pelna szerokosc, zakotwiczony do .katbar */
.kat-menu{
  display:none; position:absolute; left:0; right:0; top:100%; z-index:60;
  background:var(--bialy); border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line); box-shadow:0 30px 50px -30px rgba(31,36,33,.35);
  padding:28px 0 34px;
}
.kat-poz:hover .kat-menu, .kat-poz:focus-within .kat-menu{ display:block; }
/* dlugie panele (zawody: 53 pozycje) przewijaja sie w srodku, nie rozpychaja strony */
.kat-menu{ max-height:min(74vh, 680px); overflow:auto; overscroll-behavior:contain; }
.kat-kolumny{ display:grid; grid-template-columns:repeat(4, minmax(180px, auto)); gap:26px 46px; justify-content:center; }
@media (max-width:1180px){ .kat-kolumny{ grid-template-columns:repeat(3, minmax(160px, auto)); } }
/* plaska siatka jak WSZYSTKIE PRODUKTY i ZAWODY na royalgift: kazdy link
   z wlasnym podkresleniem */
.kat-siatka{ display:grid; grid-template-columns:repeat(4, minmax(180px, auto)); gap:4px 46px; justify-content:center; }
@media (max-width:1180px){ .kat-siatka{ grid-template-columns:repeat(3, minmax(160px, auto)); } }
.kat-siatka a{
  font-size:13.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:13px 0; min-height:44px; display:inline-flex; align-items:center;
  border-bottom:1px solid var(--line);
}
.kat-siatka a:hover{ color:var(--akcent); }
.kat-naglowek{
  font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); padding-bottom:10px; margin:0 0 8px; border-bottom:1px solid var(--line);
}
.kat-kol{ display:flex; flex-direction:column; }
.kat-kol a{
  font-size:13.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); padding:8px 0; min-height:34px; display:inline-flex; align-items:center;
}
.kat-kol a:hover{ color:var(--akcent); }

/* telefon i waski tablet: pasek przewijany, bez dropdownow */
@media (max-width:900px){
  .katbar-inner{ justify-content:flex-start; gap:14px; overflow-x:auto; scrollbar-width:none; }
  .kat-menu{ display:none !important; }
  .kat-strzalka{ display:none; }
  .katbar .kat-link{ padding:0 2px; }
}

/* ==========================================================================
   6. HERO (index.html)
   ========================================================================== */
.hero{
  position:relative; padding:0;
  min-height:min(calc(100svh - var(--bars,116px)),780px);
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; }
/* ⛔ `<picture>` jest domyslnie elementem LINIOWYM bez wymiarow. Bez tej reguly
   `<img>` w srodku dostawal 100% z rodzica, ktory nie ma wysokosci - i tlo hero
   znikalo. Dodane razem z przejsciem hero na `<picture>` (13.09.2026). */
.hero-bg picture{ display:block; width:100%; height:100%; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(17,36,26,.80),rgba(17,36,26,.28) 62%,transparent),
    linear-gradient(0deg,rgba(17,36,26,.86),transparent 58%);
}
.hero-inner{ position:relative; z-index:2; padding-block:0 clamp(40px,6vw,74px); max-width:660px; color:#fff; }
.hero h1{ font-size:clamp(38px,6.6vw,72px); color:#fff; margin:0 0 16px; }
.hero h1 em{ font-style:italic; color:var(--zloto); }
.hero p.sub{ font-size:clamp(15.5px,2vw,19px); color:var(--noc-tekst); max-width:520px; margin:0 0 24px; }
.hero .eyebrow{ color:var(--zloto); }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn--nahero{ color:#fff; border-color:rgba(255,255,255,.62); background:rgba(17,36,26,.45); }
@media (hover:hover) and (pointer:fine){
  .btn--nahero:hover{ background:rgba(17,36,26,.72); border-color:#fff; color:#fff; }
}
@media (min-width:1100px){
  .hero-inner{ max-width:1000px; }
  .hero h1{ font-size:clamp(56px,5.9vw,88px); letter-spacing:-.015em; }
  .hero p.sub{ max-width:660px; font-size:20px; }
  .hero .eyebrow{ letter-spacing:.28em; }
}
@media (min-width:1500px){
  .hero-inner{ max-width:1120px; }
  .hero h1{ font-size:92px; }
  .hero p.sub{ max-width:720px; }
}

/* ==========================================================================
   7. PASEK ZAUFANIA I LICZBY
   ========================================================================== */
.zaufanie{ background:var(--noc); color:var(--noc-tekst); }
.zaufanie-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:20px; padding:26px 0; }
.zaufanie-grid > *{ min-width:0; }
.zt{ display:flex; gap:12px; align-items:flex-start; font-size:14px; }
.zt svg{ width:22px; height:22px; stroke:var(--zloto); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:1px; }
.zt b{ display:block; color:#fff; font-size:14.5px; margin-bottom:2px; }
/* ten sam pasek uzyty na jasnym tle (karta produktu) */
.zaufanie-grid--jasny{ padding:18px 0 0; gap:12px; }
.zaufanie-grid--jasny .zt{ color:var(--muted); }
.zaufanie-grid--jasny .zt svg{ stroke:var(--akcent); }
.zaufanie-grid--jasny .zt b{ color:var(--ink); }

.fakty{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:16px; }
.fakty > *{ min-width:0; }
.fakt{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:20px 18px; }
.fakt b{ display:block; font-family:'Lora',Georgia,serif; font-weight:500; font-size:32px; line-height:1.05; margin-bottom:6px; }
.fakt span{ display:block; font-size:13.5px; color:var(--muted); }

/* ==========================================================================
   8. KAFLE KATEGORII I OKAZJI
   ========================================================================== */
/* flex-wrap, nie grid - ostatni rzad domyka sie do krawedzi, zero sierotek */
.kafle{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:16px; }
.kafle > *{ min-width:0; }
.kafel{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; display:block; background:var(--kremowy2); }
.kafel img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.kafel::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(17,36,26,.74),transparent 58%); }
.kafel span{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; font-family:'Lora',Georgia,serif; font-size:21px; }
.kafel small{ display:block; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--piasek); margin-top:3px; line-height:1.45; }
@media (hover:hover){ .kafel:hover img{ transform:scale(1.05); } }

/* pigulki okazji - linkuja do sklepu z parametrem */
.okazje{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-okazja{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:10px 18px; border-radius:100px; border:1px solid var(--line);
  background:var(--bialy); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.chip-okazja:hover, .chip-okazja.akt{ background:var(--akcent-jasny); border-color:var(--akcent); color:var(--akcent-ciemny); }

/* ==========================================================================
   9. SIATKA PRODUKTOW I KARTA W SIATCE
   ========================================================================== */
/* ⛔⛔ SIATKA, NIE FLEX. `flex:1 1 <baza>` kaze elementowi ROSNAC do wypelnienia
   rzedu, wiec JEDEN wynik zajmowal caly kontener (zmierzone na zywym sklepie:
   kafel 890 px przy jednym wyniku kontra 281 px przy dziewieciu - 3,17 raza).
   ⛔ `auto-fill`, NIGDY `auto-fit`: auto-fit zwija puste tracki i defekt wraca.
   ⛔ `min(100%, N)` zamiast samego N - inaczej track jest szerszy od kontenera
   przy waskim oknie i strona przewija sie w poziomie. */
.produkty{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:clamp(14px,2vw,24px); }
.produkty > *{ min-width:0; max-width:none; }

.prod{
  position:relative;                      /* poprawka wzgledem wzorca - .serce trzyma sie karty */
  background:var(--bialy); border:1px solid var(--line2); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .25s ease, transform .25s ease;
}
.prod-foto{ position:relative; overflow:hidden; background:var(--kremowy2); display:block; }
/* ⛔ `<picture>` jest domyslnie INLINE, a inline pudelko dokłada pod obrazkiem odstep
   linii bazowej (3-5 px bialego paska pod kazdym kaflem). Zdjecia sklepu siedza od
   14.09.2026 w `<picture>`, zeby dostac lzejsze kopie webp z zapasem JPEG - ta jedna
   reguła sprawia, ze opakowanie niczego w ukladzie nie zmienia. */
.prod-foto picture, .galeria-glowna picture, .miniatury picture{ display:block; }
/* app.js owija zdjecia w <a class="prod-foto-link"> - link musi byc blokiem,
   inaczej pod zdjeciem zostaje szczelina po linii bazowej tekstu */
.prod-foto-link{ display:block; position:relative; }
/* stala proporcja zdjecia = rowne rzedy kart, niezaleznie od dlugosci nazwy */
/* Kafel produktu w katalogu - ta sama proporcja co karta, zeby ten sam produkt nie byl
   w dwoch miejscach inaczej przyciety. ⛔ To NIE jest `.kafel` ze strony glownej: tam
   sa kafle KATEGORII z fotografia redakcyjna i pion 3:4 zostaje. */
.prod-foto img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .6s ease, opacity .45s ease; }
/* drugie zdjecie - podmiana po najechaniu; wzorzec tego nie mial, tu jest.
   Dwie nazwy, bo app.js rysuje .prod-foto-2, a karty wpisane w HTML .foto-druga. */
.prod-foto .foto-druga, .prod-foto .prod-foto-2{ position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.prod-plakietki{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.plakietka{
  font:700 11px 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; background:var(--noc); color:#fff; align-self:flex-start;
}
.plakietka--nowosc{ background:var(--akcent); color:#fff; }
.plakietka--imie{ background:var(--zloto); color:var(--ink); }     /* personalizacja imieniem */
.plakietka--zestaw{ background:var(--noc); color:#fff; }
/* dwie nazwy tej samej plakietki - app.js pisze --bestseller, karty w HTML --hit */
.plakietka--hit, .plakietka--bestseller{ background:var(--bialy); color:var(--akcent-ciemny); box-shadow:var(--cien); }
.serce{
  position:absolute; top:6px; right:6px; z-index:3; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s ease;
}
.serce svg{ width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.serce.akt svg{ fill:var(--akcent); stroke:var(--akcent); }
@media (hover:hover){ .serce:hover{ background:#fff; } }
.serce-duze{ width:var(--tap); height:var(--tap); }

.prod-body{ padding:14px 15px 16px; display:flex; flex-direction:column; flex:1; }
.prod-kat{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
/* nazwa produktu celowo groteskiem - szeryf zostaje dla naglowkow i ceny */
.prod h3{ font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; line-height:1.4; margin:0 0 8px; }
.prod h3 a:hover{ color:var(--akcent); }
/* opcjonalna druga linijka pod nazwa (linia produktu, haslo z wzoru) - to zwykly tekst,
   nie grafika. Dwie nazwy: app.js pisze .prod-linia, karty w HTML .prod-haslo. */
.prod-haslo, .prod-linia{ font-family:'Lora',Georgia,serif; font-size:15px; color:var(--muted); margin:0 0 10px; line-height:1.35; }
.prod-rozmiary{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.rozm{ font-size:11.5px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 7px; }
/* cena i przycisk zawsze przy dolnej krawedzi - caly rzad stoi w jednej linii */
/* Obnizka ceny (01.09.2026). `.cena-stara` istniala od dawna i NIE BYLA UZYWANA -
   pole w panelu nigdzie nie dochodzilo. `.cena-omnibus` to obowiazkowa informacja
   o najnizszej cenie z 30 dni; bez niej przekreslenia nie wolno pokazac. */
.cena-omnibus{ margin:6px 0 0; font-size:12.5px; line-height:1.35; color:var(--muted); }
/* ⛔⛔ RZAD WOLNO ZLAMAC, NAPISU NA PRZYCISKU NIE. Bez `flex-wrap` przycisk
   „Zapytaj o wycene" dostawal kilkanascie pikseli obok nielamliwej ceny
   („Wycena indywidualna" + `.cena{white-space:nowrap}`) i lamal sie PO JEDNEJ
   LITERZE - pionowa kolumna liter w kazdej karcie bez ceny. Zmierzone na sklepie
   Jackowa 13.09.2026: 12 z 14 kart. */
.prod-dol{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; }
.prod-dol .btn{ white-space:nowrap; }
.cena{ font-family:'Lora',Georgia,serif; font-size:19px; font-weight:500; white-space:nowrap; }
.cena-stara{ font-family:'Inter',sans-serif; font-size:13px; color:var(--muted); text-decoration:line-through; margin-left:7px; }
@media (hover:hover) and (pointer:fine){
  .prod:hover{ box-shadow:var(--cien2); transform:translateY(-3px); }
  .prod:hover .prod-foto img{ transform:scale(1.04); }
  .prod:hover .prod-foto .foto-druga, .prod:hover .prod-foto .prod-foto-2{ opacity:1; }
}

/* ==========================================================================
   10. SKLEP - uklad z panelem filtrow
   ========================================================================== */
.sklep-uklad{ display:grid; grid-template-columns:272px 1fr; gap:clamp(20px,3vw,38px); align-items:start; }
.filtry{
  position:sticky; top:126px; background:var(--bialy); border:1px solid var(--line2);
  border-radius:16px; padding:20px 18px;
}
/* ⚠️ Bylo `.filtr-grupa:first-of-type{ border-top:0 }`, czyli kreska zdejmowana
   od PIERWSZEGO elementu danego TYPU. Dzialalo, dopoki wszystkie grupy byly <div>-ami
   i nic innego nie stalo nad nimi. Od 02.09.2026 grupy sa <details>, a nad nimi jest
   <div class="filtry-gora"> - regula sasiedztwa nie zalezy od typu elementu ani od tego,
   co stoi wyzej, wiec nie ma czego pilnowac przy nastepnej zmianie. */
.filtr-grupa{ border-top:0; padding-top:0; margin-top:0; }
.filtr-grupa + .filtr-grupa{ border-top:1px solid var(--line2); padding-top:16px; margin-top:16px; }
.filtr-grupa h4{
  font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 0 11px;
}
.opcje{ display:flex; flex-direction:column; gap:2px; }
.opcja{ display:flex; align-items:center; gap:11px; font-size:14px; cursor:pointer; min-height:44px; }
.opcja input{ width:18px; height:18px; accent-color:var(--akcent); flex:none; }
.opcja .ile{ margin-left:auto; font-size:12px; color:var(--muted); }
.chipy-rozm, .chipy-wybor{ display:flex; flex-wrap:wrap; gap:7px; }
.chip-rozm{
  border:1px solid var(--line); background:var(--bialy); border-radius:8px; padding:8px 12px;
  font:600 13px 'Inter',sans-serif; cursor:pointer; min-height:44px; min-width:44px; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.chip-rozm.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
@media (hover:hover){
  .chip-rozm:hover{ border-color:var(--ink); }
  .chip-rozm.akt:hover{ background:var(--akcent-ciemny); border-color:var(--akcent-ciemny); }
}
.probka{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line); flex:none; }

/* --- Kolumna filtrow, przebudowa 02.09.2026 --- */
/* Opcja bez wynikow: gasnie, ale ZOSTAJE. Przy 12 produktach kolumna jest jedyna mapa
   asortymentu - „Zawody 0" mowi, ze zawody sa, tylko nie w tym kolorze.
   ⚠️ Kolor z `--muted`, nie `opacity` - zmierzone: `opacity:.45` dawalo 2,3:1 na bialym. */
.opcja--pusta{ color:var(--muted); cursor:default; }
.opcja--pusta input{ cursor:not-allowed; }
.chip-rozm.opcja--pusta{ border-style:dashed; }

/* Grupy sa teraz <details>. `list-style:none` + wlasna strzalka, bo domyslny trojkat
   przegladarki nie da sie ostylowac spojnie miedzy Chrome a Safari. */
.filtr-grupa > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:44px; cursor:pointer; list-style:none; user-select:none;
}
.filtr-grupa > summary::-webkit-details-marker{ display:none; }
.filtr-grupa > summary::after{
  content:''; width:9px; height:9px; flex:none; margin-right:2px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.filtr-grupa[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.filtr-grupa > summary h4{ margin:0; }
/* h4 mial `margin:0 0 11px` - w <summary> ten odstep przestaje dzielic naglowek od opcji,
   bo opcje leza JUZ POZA summary. Odstep przenosimy na sam summary. */
.filtr-grupa > summary{ padding-bottom:9px; }
.filtr-grupa > summary:focus-visible{ outline:2px solid var(--akcent); outline-offset:3px; border-radius:6px; }

/* Chip zaznaczony - ten sam wyglad co `.akt`, tylko sterowany stanem pola wyboru. */
.chip-rozm:has(input:checked){ background:var(--akcent); border-color:var(--akcent); color:#fff; }

.filtry-gora{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.filtry-gora h3{ margin:0; font-size:15px; display:flex; align-items:center; gap:8px; }
.filtry-gora .licznik{ position:static; }
.f-nota{ margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted); }
.btn-filtry .licznik{ position:static; margin-left:7px; }
.suwak{ width:100%; accent-color:var(--akcent); }

.sklep-gora{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.szukajka{ position:relative; flex:1; min-width:220px; }
.szukajka input{ width:100%; min-height:46px; padding:13px 15px 13px 44px; border:1px solid var(--line); border-radius:100px; background:var(--bialy); color:var(--ink); }
.szukajka input::placeholder{ color:var(--muted); }
.szukajka svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:1.8; stroke-linecap:round; }
/* ⚠️ POPRAWKA 13.08.2026: przy 172 px najdluzsza opcja („Od najdrozszych") nie
   miescila sie w polu - select kurczyl sie w rzedzie filtrow. Stad . */
.sortuj{ border:1px solid var(--line); border-radius:100px; background:var(--bialy); padding:0 38px 0 16px; min-height:46px; min-width:196px; flex:none; color:var(--ink); }
.btn-filtry{ display:none; }
.wyniki-info{ font-size:13.5px; color:var(--muted); margin:0 0 14px; }
.aktywne-filtry{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.aktywne-filtry:empty{ display:none; margin:0; }
.tag-filtr{
  display:inline-flex; align-items:center; gap:7px; background:var(--akcent-jasny);
  color:var(--akcent-ciemny); border:0; border-radius:100px; padding:7px 12px;
  font:600 12.5px 'Inter',sans-serif; cursor:pointer; min-height:34px;
}
@media (hover:hover){ .tag-filtr:hover{ background:var(--kremowy2); } }
.pusto{ text-align:center; padding:50px 20px; color:var(--muted); }
.pusto h3{ font-size:18px; margin-bottom:8px; color:var(--ink); }

/* ==========================================================================
   11. SZUFLADY: koszyk, filtry na telefonie, menu
   Chowamy przez opacity + visibility. NIGDY translateX poza ekran.
   ========================================================================== */
.ovl{
  position:fixed; inset:0; background:rgba(17,36,26,.48); z-index:90;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.ovl.open{ opacity:1; visibility:visible; }
.szuflada{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw);
  background:var(--kremowy); z-index:95; display:flex; flex-direction:column;
  box-shadow:var(--cien2);
  opacity:0; visibility:hidden; transform:translateY(10px);
  /* ⛔⛔⛔ `visibility` MA ZMIENIAĆ SIĘ SKOKOWO, NIE PRZEZ PRZEJŚCIE (14.09.2026).
     Było tu `visibility .28s`, czyli przejście o czasie trwania 0,28 s. Przy takim
     zapisie w chwili t=0 wartość policzona jest jeszcze WYJŚCIOWA, a więc `hidden` -
     i dopiero następna klatka daje `visible`. Element policzony jako `visibility:
     hidden` jest NIEOGNISKOWALNY, a `focus()` na nim nic nie robi i nie zgłasza błędu.
     Zmierzone: `otworz()` w js/app.js wołało `focus()` na przycisku „zamknij", a ten
     miał w tej chwili `visibility: hidden` - fokus zostawał na `<body>`. Osoba na
     klawiaturze musiała przejść tabulatorem przez całą stronę, żeby wejść do szuflady,
     którą właśnie otworzyła. ⛔ Ani wymuszony układ (`offsetWidth`), ani jedna klatka
     `requestAnimationFrame` tego nie naprawiały - przejście i tak startuje od `hidden`.
     ⚡ Poprawny idiom to czas trwania ZERO i opóźnienie po stronie zamykania:
       · otwieranie: `visibility 0s` - widoczna natychmiast, więc ogniskowalna,
       · zamykanie:  `visibility 0s .28s` - zostaje widoczna do końca zanikania.
     Wygląd bez zmian, a szuflada daje się zogniskować od pierwszej chwili. */
  transition:opacity .28s ease, transform .28s cubic-bezier(.32,.72,0,1), visibility 0s .28s;
}
.szuflada.open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.32,.72,0,1), visibility 0s;
}
.szuflada--lewa{ right:auto; left:0; }
.szuflada-gora{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px; border-bottom:1px solid var(--line2); }
.szuflada-gora h3{ font-size:19px; }
.zamknij{ width:44px; height:44px; border:0; background:none; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.zamknij svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }
@media (hover:hover){ .zamknij:hover{ background:var(--kremowy2); } }
.szuflada-tresc{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 20px; -webkit-overflow-scrolling:touch; }
.szuflada-dol{ padding:18px 20px calc(18px + var(--safe-b)); border-top:1px solid var(--line2); background:var(--bialy); }

.pozycja{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line2); }
.pozycja img{ width:64px; height:84px; object-fit:cover; border-radius:8px; flex:none; background:var(--kremowy2); }
.pozycja-t{ flex:1; min-width:0; }
.pozycja-t h4{ font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; line-height:1.35; margin:0 0 2px; }
.pozycja-t small{ color:var(--muted); font-size:12px; display:block; }
/* kwota i "Usun" w jednym wierszu pozycji koszyka - bez tej reguly napisy sklejaly sie
   w "26,99 zlUsun" (app.js rysuje .pozycja-dol > b.kwota + button.usun) */
.pozycja-dol{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:8px; }
.pozycja-kwota, .pozycja-dol .kwota{ font-family:'Lora',Georgia,serif; font-size:17px; font-weight:500; white-space:nowrap; }
.ilosc{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:100px; margin-top:7px; background:var(--bialy); }
.ilosc button{ width:34px; height:34px; border:0; background:none; cursor:pointer; font-size:16px; color:var(--ink); border-radius:50%; }
.ilosc span{ min-width:26px; text-align:center; font-size:13.5px; font-weight:600; }
.usun{ border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; text-decoration:underline; padding:6px 0; min-height:32px; }
@media (hover:hover){ .usun:hover{ color:var(--akcent-ciemny); } }
.pasek-progu{ height:6px; border-radius:100px; background:var(--kremowy2); overflow:hidden; margin:6px 0 8px; }
.pasek-progu i{ display:block; height:100%; background:var(--akcent); border-radius:100px; transition:width .4s ease; }
.suma{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; font-size:15px; }
.suma b{ font-family:'Lora',Georgia,serif; font-size:24px; font-weight:500; }
/* ⛔ Zdanie w miejscu kwoty nie jest kwotą - klasę dokłada `js/zamowienie.js`.
   Bez tego „po wyborze dostawy” łamało się na dwa wiersze i łamało też etykietę. */
.suma b.suma-slowo{ font-family:'Inter',sans-serif; font-size:15px; font-weight:600; }
/* ⛔ KWOTA NIGDY SIE NIE LAMIE. „6,00 zł” rozdzielone na „6,00” i „zł” czyta się
   jak dwie liczby pod sobą - złapane na zrzucie kasy 13.09.2026.
   ⚡ Wyjątek dla zdania: w tej samej kolumnie stoi czasem „wybierz sposób dostawy”,
   które ZAWINAĆ SIĘ MUSI, bo inaczej wychodzi poza kartę na wąskim ekranie.
   Rozstrzyga klasa dokładana przez skrypt, nie zgadywanie po treści. */
.suma > :last-child{ white-space: nowrap; }
.suma > .suma-slowo{ white-space: normal; }
.dostawa-info{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }

/* ==========================================================================
   12. KARTA PRODUKTU (produkt.html)
   ========================================================================== */
.karta{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(22px,4vw,52px); align-items:start; }
.karta--srodek{ align-items:center; }
.galeria-glowna{ border-radius:16px; overflow:hidden; background:var(--kremowy2); }
/* ⚠️ KWADRAT (klient 28.08.2026). Zrodlo to 2048x2048 z `F()` w `dane.js` -
   proporcja musi sie z nim zgadzac, inaczej `object-fit:cover` docina zdjecie,
   ktore i tak jest juz w dobrym kadrze. */
.galeria-glowna img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.miniatury{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.miniatury button{ border:2px solid transparent; border-radius:10px; overflow:hidden; padding:0; background:var(--kremowy2); cursor:pointer; }
.miniatury button.akt{ border-color:var(--akcent); }
.miniatury img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.karta h1{ font-size:clamp(26px,3.6vw,40px); margin:0 0 10px; }
.cena-duza{ font-family:'Lora',Georgia,serif; font-size:31px; font-weight:500; margin:14px 0 6px; }
.wybor h4{
  font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:20px 0 10px;
}
.akcje-produkt{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.akcje-produkt > .btn:first-child{ flex:1; min-width:190px; }

/* personalizacja imieniem - POLE TEKSTOWE, zadnego rysowanego produktu */
.personalizacja{ background:var(--akcent-jasny); border:1px solid rgba(174,125,41,.18); border-radius:16px; padding:16px 18px; margin-top:20px; }
.personalizacja h4{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bursztyn-tekst); margin:0 0 10px; }   /* 8,2:1 - 12 px potrzebuje zapasu nad progiem */
.personalizacja input[type="text"]{ width:100%; min-height:var(--tap); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); color:var(--ink); }
.personalizacja input:focus{ outline:none; border-color:var(--akcent); box-shadow:0 0 0 3px rgba(174,125,41,.15); }
.personalizacja .nota{ color:var(--akcent-ciemny); margin-top:10px; }
.licznik-znakow{ font-size:12px; color:var(--bursztyn-tekst); margin-top:7px; text-align:right; }   /* 8,2:1 - drobny tekst potrzebuje zapasu nad progiem */
.podglad-imienia{ font-family:'Lora',Georgia,serif; font-size:22px; color:var(--ink); margin-top:12px; min-height:30px; }

/* akordeon */
.akordeon{ border-top:1px solid var(--line); margin-top:24px; }
.akordeon details{ border-bottom:1px solid var(--line); }
.akordeon summary{
  cursor:pointer; padding:15px 0; font-weight:600; font-size:15px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:var(--tap);
}
.akordeon summary::-webkit-details-marker{ display:none; }
.akordeon summary::after{ content:'+'; font-size:20px; color:var(--akcent); flex:none; }
.akordeon details[open] summary::after{ content:'-'; }
.akordeon p, .akordeon ul{ padding:0 0 16px; color:var(--muted); font-size:14.5px; margin:0; }
.akordeon ul{ padding-left:18px; }
.akordeon li{ margin-bottom:6px; }

.tabela{ width:100%; border-collapse:collapse; font-size:14px; }
.tabela th, .tabela td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line2); }
.tabela th{ font-weight:700; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* ==========================================================================
   13. FORMULARZE I KOMUNIKATY
   ========================================================================== */
.pole{ display:block; margin-bottom:14px; }
/* TYLKO bezposredni span jest etykieta. Bez ">" kazdy zagniezdzony <span class="nw">
   tez dostawal display:block i "Adres e-mail" lamalo sie na dwa wiersze. */
.pole > span{ display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px; }
.pole input, .pole select, .pole textarea{
  width:100%; min-height:var(--tap); padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:var(--kremowy); color:var(--ink);
}
.pole textarea{ min-height:110px; resize:vertical; line-height:1.55; }
.pole input:focus, .pole select:focus, .pole textarea:focus{
  outline:none; border-color:var(--akcent); box-shadow:0 0 0 3px rgba(174,125,41,.15);
}
.pole input::placeholder, .pole textarea::placeholder{ color:var(--muted); }
.dane-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dane-grid > .pelny-rzad{ grid-column:1/-1; }
.zgoda{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.55; margin-bottom:14px; }
.zgoda input{ width:20px; height:20px; accent-color:var(--akcent); flex:none; margin-top:2px; }

/* komunikat po wyslaniu formularza w makiecie (zamiast alertu) */
.komunikat{
  margin-top:14px; padding:12px 15px; border-radius:12px;
  background:var(--akcent-jasny); color:var(--akcent-ciemny);
  font-size:13.5px; font-weight:600; line-height:1.5;
}
.komunikat:empty{ display:none; padding:0; margin:0; }
.komunikat--ok{ background:var(--akcent-jasny); color:var(--akcent); }
.komunikat--blad{ background:var(--alarm-jasny); color:var(--alarm); }
/* ⛔⛔ TA SAMA BARWA DLA KLASY `blad`. W kodzie sa DWA zapisy tego samego stanu:
   `komunikat--blad` (kontakt, wycena hurtowa) i `blad` (sledzenie, kasa, newsletter).
   Drugi mial regule TYLKO wewnatrz `.newsletter`, wiec na 26 podstronach nieudana
   wysylka wygladala DOKLADNIE tak samo jak udana - ten sam kolor, to samo tlo.
   Kupujacy nie mial jak zauwazyc, ze zgloszenie nie poszlo.
   ⚠️ Specyficznosc (0,2,0) jest NIZSZA niz `.newsletter .komunikat.blad` (0,2,1),
      wiec jasny wariant w ciemnej stopce nadal wygrywa - sprawdzone. */
.komunikat.blad{ background:var(--alarm-jasny); color:var(--alarm); }
/* komunikat stojacy w sekcji na ciemnym tle - jasne pudelko z ciemnym tekstem trzyma kontrast */
.komunikat--noc{ background:var(--kremowy2); color:var(--bursztyn-tekst); }

/* ==========================================================================
   14. PANEL KLIENTA (panel.html)
   ========================================================================== */
.log-uklad{ max-width:440px; margin-inline:auto; }
.zakladki{ display:flex; gap:6px; background:var(--kremowy2); padding:5px; border-radius:100px; margin-bottom:22px; }
.zakladki button{
  flex:1; border:0; background:none; cursor:pointer; padding:11px; border-radius:100px;
  /* var(--muted), nie --muted: nieaktywna zakladka na --kremowy2 mialaby 4,37:1, a musi miec 4,5:1 */
  font:700 14px 'Inter',sans-serif; color:var(--muted); min-height:44px;
}
.zakladki button.akt{ background:var(--bialy); color:var(--ink); box-shadow:var(--cien); }
.demo-konta{ background:var(--akcent-jasny); border-radius:12px; padding:14px 16px; font-size:13px; color:var(--akcent-ciemny); margin-top:18px; line-height:1.6; }
.demo-konta b{ display:block; margin-bottom:5px; }
.demo-konta-lista{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.konto-demo{
  display:inline-flex; align-items:center; min-height:44px; padding:9px 15px;
  border:1px solid rgba(126,60,30,.28); border-radius:100px; background:var(--bialy);
  color:var(--akcent-ciemny); font:600 12.5px 'Inter',sans-serif; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
@media (hover:hover){ .konto-demo:hover{ background:var(--kremowy2); border-color:var(--akcent); } }

.panel-uklad{ display:grid; grid-template-columns:250px 1fr; gap:clamp(20px,3vw,36px); align-items:start; }
.panel-menu{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:14px; position:sticky; top:110px; }
.panel-menu button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:none;
  cursor:pointer; padding:12px 13px; border-radius:10px; font:600 14.5px 'Inter',sans-serif;
  color:var(--ink); min-height:46px;
}
.panel-menu button svg{ width:19px; height:19px; stroke:var(--muted); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.panel-menu button.akt{ background:var(--akcent-jasny); color:var(--bursztyn-tekst); }   /* 8,2:1, bylo 7,0:1 */
.panel-menu button.akt svg{ stroke:var(--akcent); }
@media (hover:hover){
  .panel-menu button:hover{ background:var(--kremowy2); }
  .panel-menu button.akt:hover{ background:var(--akcent-jasny); }
}
.panel-karta{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:clamp(18px,3vw,28px); }
.panel-karta h2{ font-size:24px; margin-bottom:6px; }
.panel-sekcja{ display:none; }
.panel-sekcja.akt{ display:block; }
.panel-naglowek{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }

.zam{ border:1px solid var(--line2); border-radius:14px; padding:16px; margin-bottom:14px; }
.zam-gora{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.zam-nr{ font-weight:700; font-size:15px; }
.status{ font:700 11.5px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px; white-space:nowrap; }
.status--w-drodze{ background:var(--morski-jasny); color:var(--morski-ciemny); }
.status--gotowe{ background:var(--akcent-jasny); color:var(--akcent-ciemny); }   /* 9,2:1, bylo 5,7:1 */
.status--pakowane{ background:var(--bursztyn-jasny); color:var(--bursztyn-tekst); }  /* 8,1:1, bylo 5,6:1 */
.status--zwrot{ background:var(--akcent-jasny); color:var(--akcent-ciemny); }
.zam-poz{ display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--muted); }
.zam-poz img{ width:44px; height:56px; object-fit:cover; border-radius:6px; flex:none; background:var(--kremowy2); }
.zam-poz b{ color:var(--ink); }
.kroki-dostawy{ display:flex; gap:6px; margin:14px 0 4px; }
.krok{ flex:1; text-align:center; font-size:11px; color:var(--muted); }
.krok i{ display:block; height:4px; border-radius:100px; background:var(--kremowy2); margin-bottom:6px; }
.krok.zrobione i{ background:var(--akcent); }
.krok.zrobione{ color:var(--akcent-ciemny); font-weight:600; }

/* checklista (np. lista prezentow na okazje) */
.lista-check .opcja{ border-bottom:1px solid var(--line2); }
.lista-check .opcja:last-child{ border-bottom:0; }
.lista-check .opcja.zrobione{ color:var(--muted); text-decoration:line-through; }
.znacznik{ margin-left:auto; font:700 11px 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; }

.bon{ background:linear-gradient(135deg,var(--noc),var(--noc2)); color:#fff; border-radius:16px; padding:22px; }
.bon .kod{ font-family:'Lora',Georgia,serif; font-size:26px; letter-spacing:.1em; margin:10px 0 4px; }
.bon p{ color:var(--piasek); font-size:13.5px; }
.puste-info{ text-align:center; padding:36px 16px; color:var(--muted); }
.puste-info b{ display:block; font-size:15.5px; color:var(--ink); margin-bottom:6px; }
.info-kafel{ background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:14px 16px; font-size:13.5px; color:var(--muted); }

/* --------------------------------------------------------------------------
   14b. PANEL - reszta slownika uzywanego przez panel.html
   Te klasy stoja w markupie konta i do tej pory nie mialy tu ani jednej reguly.
   -------------------------------------------------------------------------- */
.sklep-naglowek{ padding-bottom:0; }
.sklep-naglowek h1{ font-size:clamp(28px,4.4vw,44px); margin-bottom:10px; }
.mute{ color:var(--muted); }
.odstep{ margin-top:16px; }
/* karta wokol aktywnej sekcji konta - to samo pudelko, co .panel-karta */
.panel-cialo .panel-sekcja.akt{
  background:var(--bialy); border:1px solid var(--line2); border-radius:16px;
  padding:clamp(18px,3vw,28px);
}
.panel-cialo .panel-sekcja h2{ font-size:24px; margin-bottom:6px; }
.panel-powitanie{ margin-bottom:clamp(18px,3vw,26px); }

/* etapy dostawy: pasek rysuje ::before, bo w markupie nie ma <i> */
.krok-d{ flex:1; text-align:center; font-size:11px; color:var(--muted); }
.kroki-dostawy .krok::before{
  content:''; display:block; height:4px; border-radius:100px;
  background:var(--kremowy2); margin-bottom:6px;
}
.kroki-dostawy .krok.zrobione::before{ background:var(--akcent); }
.status--w-druku{ background:var(--bursztyn-jasny); color:var(--bursztyn-tekst); }      /* to samo, co --pakowane */
.status--wyslane{ background:var(--morski-jasny); color:var(--morski-ciemny); }      /* to samo, co --w-drodze */
.zam-akcje{ display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.zam-nazwa{ color:var(--ink); }

/* formularz w panelu: ta sama siatka, co .dane-grid, inna nazwa w markupie */
/* ── PYTANIE O CENE POZYCJI BEZ WYCENY ───────────────────────────────────────
   ⚡ Blok musi odcinac sie od reszty karty produktu: pojawia sie WYLACZNIE przy
   dwunastu pozycjach, ktorych sklep jeszcze nie wycenil, i zastepuje im droge
   przez przycisk zakupu. Ramka i jasne tlo mowia „to jest osobna akcja”. */
.pytanie-o-cene{
  margin:18px 0 0; padding:18px 20px; background:var(--kremowy2);
  border:1px solid var(--line); border-radius:14px;
}
.pytanie-o-cene h4{ margin:0 0 6px; font-size:17px; }
.pytanie-o-cene .nota{ margin:0 0 14px; }
.pytanie-o-cene .formularz{ gap:12px; }

.formularz{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.formularz .pole{ margin-bottom:0; }
.formularz > .szeroko{ grid-column:1/-1; }
.formularz > .szeroko .btn{ margin-top:2px; }

/* tabela na waskim ekranie przewija sie w swoim pudelku, a nie rozpycha strony */
/* ⚠️ `position:relative` jest KONIECZNE - dokladnie ten sam przypadek, co przy
   `.pp-tabela-okno` nizej: bez wlasnego kontekstu pozycjonowania tabela
   z `min-width` rozpycha CALY dokument na telefonie, mimo `overflow-x:auto`. */
.tabela-otoczka{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabela caption{ font-size:12.5px; color:var(--muted); }

.parametry{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; }
.parametry li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--line2); font-size:14px; color:var(--muted);
}
.parametry li:last-child{ border-bottom:0; }
.parametry b{ color:var(--ink); font-weight:600; text-align:right; }

.blok-prawny{
  background:var(--kremowy); border:1px solid var(--line2); border-left:3px solid var(--akcent);
  border-radius:12px; padding:16px 18px; margin-top:20px; font-size:13.5px;
  color:var(--muted); line-height:1.6;
}
.blok-prawny b{ color:var(--ink); }

/* zapisane wzory - TEKST w ramce, nigdy rysowany produkt */
.wzory-lista{ display:grid; gap:12px; margin-top:16px; }
.wzor-zapis{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background:var(--kremowy); border:1px solid var(--line2); border-radius:14px; padding:14px 16px;
}
.wzor-zapis-t{ flex:1 1 200px; min-width:0; }
.wzor-zapis-t b{ display:block; font-size:14.5px; margin-bottom:3px; }
.wzor-zapis-t small{ display:block; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* ==========================================================================
   15. TOAST (zamiast alert - iOS potrafi go zablokowac)
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:calc(20px + var(--safe-b)); z-index:120;
  transform:translateX(-50%) translateY(20px);
  background:var(--noc); color:#fff; padding:13px 20px; border-radius:100px;
  font-size:14px; font-weight:600; box-shadow:var(--cien2);
  max-width:92vw; text-align:center;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.toast.pokaz{ opacity:1; visibility:visible; transform:translateX(-50%); }

/* ==========================================================================
   16. STOPKA
   ========================================================================== */
/* Stopka: var(--noc-tekst) (13,7:1), nie bezowy #CFBFAE (9,4:1). Liczba byla dobra,
   ale cieply bez na cieplym brazie czyta sie jak ten sam kolor. */
footer{ background:var(--stopka); color:var(--stopka-tekst); padding:clamp(44px,6vw,64px) 0 26px; }
/* ⛔⛔ OBWODKA FOKUSU NA ZIELONEJ STOPCE. Globalne `:focus-visible` daje `--akcent`
   #2C6343, ktory na tle stopki #1E4830 ma **1,47:1** - czyli po zmianie tla znika.
   Na ciemnej czerni #11241A mial 2,03:1, wiec i tak byl za slaby; dzis 8,63:1.
   ⚠️ Zaden pomiar koloru TEKSTU tego nie widzi - fokus to stan, ktory trzeba wywolac. */
footer :focus-visible{ outline-color:var(--stopka-tekst); }
/* 5 kolumn od 13.08.2026 - doszla kolumna „Informacje" z podstronami sklepu */
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:26px 22px; }
.foot-grid > *{ min-width:0; }
footer h4{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 13px; }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:2px; font-size:14px; }
footer ul a{ display:inline-flex; align-items:center; min-height:40px; padding:2px 0; }
footer a{ color:var(--stopka-tekst); }
footer a:hover{ color:#fff; }

/* IKONY SOCIAL W STOPCE (prosba klienta): Instagram i dwa konta Allegro.
   Ikona ZAWSZE z podpisem - znak Allegro nie jest tak czytelny jak Instagram,
   a konta sa dwa, wiec bez tekstu nie wiadomo, ktore jest ktore. */
.soc-lista{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:2px; }
.soc{ display:inline-flex; align-items:center; gap:11px; min-height:44px; font-size:14px; }
.soc svg{
  width:22px; height:22px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.soc svg .pelne{ fill:currentColor; stroke:none; }

/* Logo klienta w stopce - wersja JASNA (img/logo-jasne.png). Oryginal ma czarny
   napis, wiec na ciemnym tle stopki bylby niewidoczny; znak CMYK zostaje bez zmian. */
.stopka-logo{ display:inline-block; }
.stopka-logo img{ display:block; width:auto; height:38px; }

/* PANEL PRODUKTOW (panel-produktow.html) - klient sam dodaje i poprawia produkty */
.pp-gora{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.pp-szukaj{ flex:1 1 260px; }
.pp-szukaj .pole{ margin:0; }
/* ⚠️ position:relative jest KONIECZNE. Bez niego tabela z min-width:620px rozpychala
   CALY dokument na telefonie (scrollWidth 543 przy oknie 390), mimo overflow-x:auto -
   bo pozycjonowani potomkowie ucieka z kontenera przewijania, gdy nie ma on wlasnego
   kontekstu pozycjonowania. Kontrola jakosci zlapala to jako poziome przewijanie. */
/* OPIS POD ZDJECIAMI (klient 13.08.2026: pod galeria bylo duzo wolnego miejsca).
   Prawa kolumna karty zostaje bez zmian - tam dalej cena, korpus i zakup. */
/* „Dostepny" to informacja sprzedazowa, nie nota robocza - dlatego ciemniejsza
   i z zielona kropka, zamiast szarego drobnego druku. */
/* „Kup teraz" na karcie w katalogu - pelna szerokosc pod cena i koszykiem,
   w obrysie, zeby nie konkurowalo wizualnie z glownym przyciskiem. */
.prod-kup{ width:100%; margin-top:10px; }

/* WYSZUKIWARKA POD LUPKA (14.08.2026) - panel zjezdza pod naglowkiem, wyniki
   pojawiaja sie w trakcie pisania, bez przeladowania strony. */
/* Panel wyszukiwarki jest WARSTWA nad trescia - nie wchodzi w uklad, wiec hero
   nie zjezdza w dol. Zjezdza z gory z lekkim przenikaniem. */
.szukaj-panel{
  position:absolute; top:100%; left:0; right:0; z-index:5;
  background:var(--bialy); border-bottom:1px solid var(--line);
  box-shadow:0 18px 44px rgba(31,36,33,.16);
  max-height:min(70vh,560px); overflow-y:auto;
  opacity:0; transform:translateY(-10px);
  transition:opacity .2s ease, transform .2s ease;
}
.szukaj-panel.otwarty{ opacity:1; transform:none; }
.szukaj-zaslona{
  position:fixed; inset:0; z-index:65; background:rgba(24,18,12,.32);
  opacity:0; transition:opacity .2s ease;
}
.szukaj-zaslona.otwarta{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .szukaj-panel, .szukaj-zaslona{ transition:none; }
}
.szukaj-panel-tresc{ display:grid; grid-template-columns:1fr auto; gap:10px; padding:16px 0; align-items:center; }
.szukaj-panel .pole{ margin:0; }
.szukaj-zamknij{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:none; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.szukaj-zamknij svg{ width:18px; height:18px; }
.szukaj-wyniki{ grid-column:1/-1; display:flex; flex-direction:column; gap:6px; }
.szukaj-poz{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; color:var(--ink); }
@media (hover:hover){ .szukaj-poz:hover{ background:var(--kremowy); color:var(--ink); } }
.szukaj-poz img{ width:44px; height:58px; object-fit:cover; border-radius:8px; flex:none; background:var(--bialy); }
.szukaj-t{ flex:1; min-width:0; }
.szukaj-t b{ display:block; font-size:14.5px; }
.szukaj-t small{ display:block; font-size:12.5px; color:var(--ink); opacity:.72; }
.szukaj-cena{ font-weight:700; font-size:14px; white-space:nowrap; }
.szukaj-info{ margin:0; padding:8px 4px; font-size:14px; color:var(--ink); }
.szukaj-wiecej{ display:block; text-align:center; padding:10px; font-weight:600; min-height:44px; }

/* STRONICOWANIE KATALOGU */
.stronicowanie{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.str-btn{
  min-width:44px; min-height:44px; padding:0 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:var(--bialy); color:var(--ink); font:600 14.5px 'Inter',sans-serif;
}
/* ⚠️ Od 01.09.2026 stronicowanie to ODNOSNIKI (strona katalogu ma wlasny adres),
   wiec `.str-btn` musi sie zachowywac jak przycisk mimo bycia <a>: srodkowanie
   i brak podkreslenia. Wygaszona strzalka to <span> z `aria-disabled`, bo atrybut
   `disabled` na odnosniku nie istnieje - stad druga regula obok `[disabled]`. */
.str-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.str-btn.jest{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
.str-btn[disabled], .str-btn--nieczynny{ opacity:.4; cursor:default; }
@media (hover:hover){ .str-btn:not(.jest):not([disabled]):not(.str-btn--nieczynny):hover{ border-color:var(--akcent); } }

.dostepnosc{ color:var(--ink); font-size:14px; display:flex; align-items:center; gap:8px; }
.dostepnosc::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--akcent-ciemny); flex:none; }
/* ⛔ Zielona kropka przy napisie o braku towaru to sprzecznosc, ktora kupujacy zglosi
   jako blad sklepu - przy „brak na stanie" kropka zmienia kolor razem z tekstem. */
.dostepnosc--brak::before{ background:var(--bursztyn-ciemny); }
.dostepnosc--brak{ color:var(--bursztyn-tekst); }

/* Adres produktu, ktorego kupujacy nie ma prawa zobaczyc (szkic albo martwy link). */
.brak-produktu{ max-width:560px; margin:60px auto; text-align:center; }
.brak-produktu h1{ font-size:clamp(26px,4vw,38px); margin:0 0 14px; }
.brak-produktu .nota{ margin:0 0 22px; font-size:16px; color:var(--muted); }
.opis-pod-zdjeciami{ margin-top:26px; }
.opis-pod-zdjeciami h2{ font-size:22px; margin:0 0 12px; }
.opis-pod-zdjeciami p{ margin:0 0 12px; line-height:1.75; color:var(--ink); }
/* Tresc opisu wpisana przez sklep (klient 20.08.2026). „Naglowek 1" to h3, „Naglowek 2"
   to h4 - oba stoja POD stalym „Opis produktu" (h2), wiec sekcja zostaje jedna caloscia. */
.opis-tresc h3{ font-family:'Lora',Georgia,serif; font-size:18px; margin:20px 0 8px; color:var(--ink); }
.opis-tresc h4{ font-size:16px; margin:16px 0 6px; color:var(--ink); }
.opis-tresc h3:first-child, .opis-tresc h4:first-child{ margin-top:0; }
.opis-tresc ul, .opis-tresc ol{ margin:0 0 12px; padding-left:22px; }
.opis-tresc li{ margin-bottom:6px; line-height:1.75; color:var(--ink); }
.opis-tresc strong{ font-weight:700; }
.opis-tresc p:last-child, .opis-tresc ul:last-child, .opis-tresc ol:last-child{ margin-bottom:0; }

/* --- SLOWNIKI SKLEPU: kategorie, oznaczenia, okazje, dodatki (klient 20.08.2026) --- */
.sl-blok{ margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line); }
.sl-naglowek{ margin-bottom:4px; }
.sl-lista{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.sl-poz{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 12px;
  border:1px solid var(--line); border-radius:12px; background:var(--bialy); }
/* Podkategoria stoi z wcieciem POD swoim rodzicem - bez tego nie widac, co gdzie lezy. */
.sl-poz--podkat{ margin-left:26px; background:var(--kremowy); }
.sl-wciecie{ color:var(--muted2); margin-right:2px; }
.sl-nazwa{ font-size:14px; font-weight:600; color:var(--ink); }
.sl-info{ font-size:12.5px; color:var(--muted); }
.sl-info code{ font-size:11.5px; color:var(--muted2); }
/* ⚠️ Polka bez produktow NIE POJAWI SIE w filtrach sklepu - mowimy to wprost, inaczej
   klient zaklada ja drugi i trzeci raz, myslac ze funkcja nie dziala. */
.sl-zero{ color:var(--akcent-ciemny); font-weight:600; }
.sl-chip{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; background:var(--kremowy2);
  color:var(--muted); border:1px solid var(--line); }
.sl-akcje{ display:flex; align-items:center; gap:6px; margin-left:auto; }

/* Slajdy strony glownej w panelu - wiersz rozwija sie w formularz. */
.sl-slajd{ flex-direction:column; align-items:stretch; gap:0; }
.sl-slajd-glowa{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sl-slajd-tresc{ display:flex; flex-direction:column; gap:10px; margin-top:12px;
  padding-top:12px; border-top:1px solid var(--line); }
.sl-slajd-tresc[hidden]{ display:none; }
.sl-slajd-tresc .pe-pole{ margin:0; }

/* Pola wyboru kategorii w edytorze produktu */
/* ⛔ 260 px to bylo okolo szesciu pozycji - lista wygladala na UCIETA, a klient zglosil
   „nie ma tam wszystkich kategorii". Dwa paski przewijania jeden w drugim (okno listy
   wewnatrz przewijanej szuflady) to zawsze zla odpowiedz przy krotkiej liscie. */
.pe-kat-lista{ display:flex; flex-direction:column; gap:2px; max-height:520px;
  overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:8px;
  background:var(--bialy); }
.pe-kat-lista .pe-ptaszek{ margin-right:0; }
.pe-ptaszek--podkat{ padding-left:22px; }
/* ⛔ Polka usunieta ze slownika, ale wciaz przypisana do produktu - widoczna, nie skasowana
   po cichu: inaczej klient traci przypisanie przy zapisie, ktorego trescia byla cena. */
.pe-ptaszek--sierota span{ color:var(--akcent-ciemny); }
/* Dwa przyciski w kolumnie akcji - na waskim ekranie jeden pod drugim. */
/* ⚠️ Po dolozeniu kolumny „Oznaczenia" kolumna akcji zwezila sie i oba przyciski
   ustawily sie JEDEN POD DRUGIM - wiersz urosl o polowe i lista przestala byc rowna.
   ⛔ `display:flex` na `<td>` WYJMUJE komorke z ukladu tabeli: zmierzone na serwerze
      przyciski staly 13 px wyzej niz srodek wiersza, a linie dzialowe w tej kolumnie
      nie trafialy w reszte tabeli. Komorka zostaje komorka, przyciski sa `inline-block`. */
.pp-akcja{ white-space:nowrap; text-align:right; }
.pp-akcja .btn{ white-space:nowrap; padding-left:12px; padding-right:12px; }
.pp-akcja .btn + .btn{ margin-left:6px; }
.pp-dubluj{ white-space:nowrap; }
/* Na waskim ekranie jeden pod drugim, wyrownane do prawej krawedzi kolumny. */
@media (max-width:1180px){
  .pp-akcja .btn{ display:block; margin:0 0 6px auto; }
  .pp-akcja .btn + .btn{ margin-left:auto; }
  .pp-akcja .btn:last-child{ margin-bottom:0; }
}

/* „+" pod kazda lista - dodawanie bez wychodzenia z produktu. */
.pe-kat-dodaj{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pe-kat-dodaj .pe-pole{ flex:1 1 150px; margin:0; }
.pe-kat-dodaj .btn{ flex:0 0 auto; margin-bottom:1px; }
.pe-kat-dodaj select, .pe-kat-dodaj input{ min-height:44px; }

.pe-kat-licznik{ margin:0 0 6px; font-size:12.5px; color:var(--muted); }
.pe-kat-licznik.zle{ color:var(--akcent-ciemny); font-weight:600; }

/* Plakietka oznaczenia dodanego przez sklep - neutralna, bez obiecywania czegokolwiek. */
.plakietka--wlasne{ background:var(--kremowy2); color:var(--muted); border:1px solid var(--line); }
/* „Brak na stanie" na kaflu. ⛔ Nie idzie przez slownik oznaczen - status ma wlasna
   klase, zeby wlasne oznaczenie klienta o tej samej nazwie nie stanelo obok. */
.plakietka--brak{ background:var(--noc); color:var(--kremowy); }
/* Podkategoria w pasku kategorii sklepu */
.katbar-podkat{ padding-left:22px; font-size:13px; color:var(--muted); }

/* --- FILTROWANIE PRODUKTOW (klient 20.08.2026, wzor: panel BaseLinkera) -----
   ⚠️ Pasek stoi na wlasnym, jasnym podlozu z obwodka. Pola z domyslnym `--line`
   (krycie .12) na kremowym tle daja krawedz o kontrascie 1,27:1 - przy jednym polu
   szukania to uchodzilo, przy siedmiu pasek zamienia sie w jednolita plame. */
.pp-filtry{ margin:12px 0 0; border:1px solid var(--line); border-radius:14px;
  background:var(--bialy); }
.pp-filtry-sum{ display:flex; align-items:center; gap:10px; min-height:48px;
  padding:0 14px; cursor:pointer; list-style:none; font-size:13.5px; font-weight:600;
  color:var(--ink); }
.pp-filtry-sum::-webkit-details-marker{ display:none; }
.pp-filtry-sum::after{ content:'rozwiń'; margin-left:auto; font-size:12.5px;
  font-weight:400; color:var(--muted); }
.pp-filtry[open] .pp-filtry-sum::after{ content:'zwiń'; }
.pp-filtry-sum:focus-visible{ outline:2px solid var(--akcent); outline-offset:-2px; }
.pp-filtry-ile{ padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--akcent-jasny); color:var(--akcent-ciemny); }
.pp-filtry-pola{ display:grid; gap:12px; padding:4px 14px 0;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.pp-filtry-pola .pe-pole{ margin:0; }
/* ⚠️ Krawedz pol przyciemniona do 3:1 wzgledem tla - `--muted2` daje tylko 2,85:1. */
/* ⚠️ 16 px NIE jest tu kosmetyka: Safari na iOS przybliza strone przy fokusie w pole
   mniejsze niz 16 px, a tabela ma min-width 1000 px i po przyblizeniu wychodzi poza ekran.
   Wyzsza specyficznosc, bo `.pe-pole input` ustawia 15 px. */
.pp-filtry .pe-pole input, .pp-filtry .pe-pole select{ min-height:48px; font-size:16px;
  border-color:var(--muted2); background:var(--bialy); }
/* ⚠️ Wyzsza specyficznosc: `.pe-pole span` ustawia `display:block` i przy rownej wadze
   wygrywa, bo stoi nizej w arkuszu - pola „od" i „do" ladowaly jedno pod drugim. */
.pp-filtry .pp-zakres-para{ display:flex; gap:8px; }
.pp-filtry .pp-zakres-para input{ flex:1 1 0; min-width:0; }
/* Para pol potrzebuje dwoch kolumn siatki, inaczej sasiednie pole spada do nowego rzedu. */
.pp-filtry .pp-filtr-zakres{ grid-column:span 2; }
@media (max-width:700px){ .pp-filtry .pp-filtr-zakres{ grid-column:auto; } }
.pp-filtry-akcje{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0; padding:12px 14px 14px; }
.pp-filtry-chipy{ display:flex; gap:6px; flex-wrap:wrap; }
.pp-chip{ display:inline-flex; align-items:center; gap:6px; min-height:32px;
  padding:4px 10px; font:inherit; font-size:12.5px; color:var(--akcent-ciemny);
  background:var(--akcent-jasny); border:1px solid var(--akcent); border-radius:999px;
  cursor:pointer; }
.pp-chip:hover{ background:var(--akcent); color:#fff; }
.pp-wynik{ margin:10px 0 0; font-weight:600; color:var(--akcent-ciemny); }
.pp-wynik[hidden]{ display:none; }
.pp-pusto .btn{ margin-left:10px; }
@media (max-width:700px){
  /* ⚠️ Siedem pol po ~70 px pionu odepchneloby pierwszy wiersz produktu o pol ekranu -
     na waskim ekranie pasek jest domyslnie zwiniety (`<details>` bez `open` po JS). */
  .pp-filtry-pola{ grid-template-columns:1fr; }
}

/* --- ZYWY PODGLAD PRODUKTU w panelu (klient 20.08.2026) ---------------------
   „Podglad przy wystawianiu produktu - jak wyglada edytowany lub wystawiany produkt." */
.pep-summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  min-height:44px; }
.pep-summary::-webkit-details-marker{ display:none; }
.pep-summary::after{ content:'zwiń'; margin-left:auto; font-size:12.5px; color:var(--muted); }
.pep-zwin:not([open]) .pep-summary::after{ content:'rozwiń'; }
.pep-przelacznik{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.pep-btn{ min-height:44px; padding:8px 14px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--bialy); border:1px solid var(--line); border-radius:999px; cursor:pointer; }
.pep-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); }
.pep-btn:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; }
/* ⚠️ Stan wlaczony niesie tez obrys, nie samo tlo - w trybie wysokiego kontrastu tlo znika. */
.pep-btn.akt{ background:var(--akcent); border-color:var(--akcent-ciemny); color:#fff;
  box-shadow:inset 0 0 0 2px var(--akcent-ciemny); }
/* ⛔ Podglad jest martwy: `inert` w JS, a tu dodatkowo blokada kursora i zaznaczania. */
/* ⚠️ `container-type` pozwala mierzyc SZEROKOSC TEJ KOLUMNY, a nie okna. Podglad stoi
   teraz w waskiej kolumnie bocznej, wiec zwykle zapytanie o szerokosc okna nic tu nie da:
   okno moze miec 1500 px, a kolumna 340 px. */
.pep-scena{ background:var(--kremowy2); padding:16px; border-radius:12px; container-type:inline-size; }
.pep-plocha{ pointer-events:none; user-select:none; }
/* ⚠️ Szerokosc jak w katalogu (~280 px). Przy pelnej szerokosci karty panelu zdjecie 3:4
   urosloby do ~900 px i klient przycinalby grafike pod format, ktorego w sklepie nie ma.
   Kafel stoi na srodku - samotny przy lewej krawedzi czytalby sie jak usterka ukladu. */
.pep-siatka{ max-width:280px; margin-left:auto; margin-right:auto; }

/* ⛔ Bylo na sztywno `200px 1fr`. Po przeniesieniu podgladu do kolumny 340 px na tekst
   zostawalo ~70 px i nazwa produktu lamala sie PO JEDNEJ LITERZE, w pionie.
   ⚠️ Uklad pionowy jest DOMYSLNY, a obok siebie wlacza sie dopiero przy zapasie miejsca -
   dzieki temu przegladarka bez obslugi zapytan o kontener dostaje wersje czytelna,
   a nie rozsypana. */
.pep-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:14px;
  padding:16px; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.pep-karta > .pep-foto{ max-width:210px; margin-inline:auto; width:100%; }
@container (min-width: 470px){
  .pep-karta{ grid-template-columns:200px minmax(0,1fr); gap:18px; }
  .pep-karta > .pep-foto{ max-width:none; margin-inline:0; }
}
/* Podglad w panelu MUSI miec te sama proporcje co sklep - inaczej sklep ustawialby
   kadr, ktorego kupujacy nigdy nie zobaczy. */
.pep-foto{ position:relative; aspect-ratio:1/1; background:var(--kremowy);
  border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pep-foto img{ width:100%; height:100%; object-fit:cover; }
.pep-brakfoto{ font-size:12.5px; color:var(--muted); }
.pep-plakietki{ position:absolute; left:8px; top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.pep-tresc{ min-width:0; }
.pep-meta{ margin:0 0 4px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); }
.pep-nazwa{ margin:0 0 6px; font-family:'Lora',Georgia,serif; font-size:22px;
  line-height:1.15; color:var(--ink); }
.pep-cytat{ margin:0 0 8px; font-size:15px; color:var(--muted); }
.pep-cena{ margin:0 0 4px; font-family:'Lora',Georgia,serif; font-size:24px; color:var(--ink); }
.pep-kupilo{ margin:0 0 8px; font-size:12.5px; color:var(--muted); }
.pep-stale{ margin:0 0 12px; font-size:12.5px; color:var(--muted); }
.pep-chip{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--kremowy2); color:var(--muted); border:1px solid var(--line); }
.pep-etykieta{ margin:12px 0 6px; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.pep-kolka{ display:flex; gap:8px; flex-wrap:wrap; }
.pep-kolka .kolko{ display:inline-block; }
.pep-nota-kolor, .pep-nota{ margin:6px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted); }
.pep-rozmiary{ display:flex; gap:8px; flex-wrap:wrap; }
.pep-rozmiary .chip-rozm{ display:inline-flex; align-items:center; }
.pep-atrapa{ display:block; padding:10px 12px; border:1px dashed var(--muted2);
  border-radius:10px; font-size:13px; color:var(--muted); background:var(--kremowy); }
.pep-akcje{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0; }
.pep-atrapa-btn{ padding:10px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:var(--akcent); color:#fff; }
.pep-atrapa-btn--ciemny{ background:var(--noc); }
/* Podglad pokazuje to, co ZOBACZY kupujacy - przy braku na stanie nie ma przyciskow zakupu. */
.pep-atrapa-btn--wyl{ background:var(--kremowy2); color:var(--muted); border:1px dashed var(--line); }
.pep-stale--brak{ color:var(--bursztyn-tekst); }
.pep-opis{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:12px; }
.pep-brak{ color:var(--akcent-ciemny); font-weight:600; }
.pep-tabela{ grid-column:1 / -1; width:100%; border-collapse:collapse; font-size:13px; }
.pep-tabela th, .pep-tabela td{ padding:7px 0; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top; }
.pep-tabela th{ width:44%; font-weight:600; color:var(--muted); }
.pep-tabela td{ color:var(--ink); }

.pep-streszczenie{ margin:12px 0 0; padding:0; list-style:none; font-size:12.5px;
  line-height:1.7; color:var(--muted); }
.pep-streszczenie b{ color:var(--ink); font-weight:600; }

@media (max-width:900px){
  .pep-karta{ grid-template-columns:1fr; }
  .pep-foto{ max-width:220px; }
}

/* --- EDYTOR OPISU w panelu (klient 20.08.2026) ------------------------------
   Pasek narzedzi, pole tresci i licznik znakow. ⚠️ Pole ma te same odstepy i wielkosci
   co karta produktu - panel ma pokazywac to, co zobaczy kupujacy. */
.pe-pole--opis{ display:flex; flex-direction:column; gap:6px; }
.pe-etykieta{ font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
.pe-nrz{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px; border:1px solid var(--line); border-bottom:0;
  border-radius:10px 10px 0 0; background:var(--kremowy); }
.pe-nrz-btn{ min-height:36px; padding:6px 10px; font:inherit; font-size:13px;
  color:var(--ink); background:var(--bialy); border:1px solid var(--line);
  border-radius:8px; cursor:pointer; }
.pe-nrz-btn--b{ font-weight:700; min-width:40px; }
.pe-nrz-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); }
.pe-nrz-btn:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; }
/* ⚠️ Stan „wlaczone" NIE jest samym kolorem tla: dochodzi obrys 2 px, zeby dalo sie go
   odczytac takze przy widzeniu monochromatycznym. */
.pe-nrz-btn[aria-pressed="true"]{ background:var(--akcent); border-color:var(--akcent-ciemny);
  color:#fff; box-shadow:inset 0 0 0 2px var(--akcent-ciemny); }
.pe-nrz-kreska{ width:1px; height:24px; background:var(--line); margin:0 2px; }
.pe-opis{ min-height:140px; padding:12px; font:inherit; font-size:14px; line-height:1.7;
  color:var(--ink); background:var(--bialy); border:1px solid var(--line);
  border-radius:0 0 10px 10px; overflow-y:auto; max-height:340px; }
.pe-opis:focus{ outline:2px solid var(--akcent); outline-offset:-2px; }
.pe-opis h3{ font-size:17px; margin:14px 0 6px; }
.pe-opis h4{ font-size:15px; margin:12px 0 4px; }
.pe-opis h3:first-child, .pe-opis h4:first-child, .pe-opis p:first-child{ margin-top:0; }
.pe-opis p{ margin:0 0 10px; }
.pe-opis ul, .pe-opis ol{ margin:0 0 10px; padding-left:22px; }
.pe-opis li{ margin-bottom:4px; }
.pe-licznik{ margin:0; font-size:12.5px; color:var(--muted); }
.pe-licznik.zle{ color:var(--akcent-ciemny); font-weight:600; }
@media (max-width:700px){
  /* palec potrzebuje 44 px; zmierzone na 390 px bylo 36 px */
  .pe-nrz-btn{ flex:1 1 auto; min-height:44px; }
  .pe-nrz-kreska{ display:none; }
}
/* szybki zakup - ciemny, zeby nie konkurowal z glownym przyciskiem koszyka */
.btn--szybki{ flex:1 1 160px; min-height:56px; }
@media (max-width:520px){ .btn--szybki{ flex:1 1 100%; order:4; } }

.pp-tabela-okno{ position:relative; overflow-x:auto; background:var(--bialy); border:1px solid var(--line); border-radius:16px; }
/* ⚠️ min-width rosnie razem z liczba kolumn. Po dolozeniu zaznaczenia i SKU 620 px
   bylo za ciasne: na telefonie naglowek „SKU" lamal sie na trzy linie, litera pod
   litera. Tabela ma sie PRZEWIJAC w swoim oknie, a nie sciskac. */
/* ⚠️ Ta liczba rosnie z KAZDA kolumna. Po zaznaczeniu, SKU i zdjeciu 76 px doszlo tyle,
   ze przy 880 px lamaly sie plakietka „Bestseller" i nazwa korpusu - litera pod litera.
   Tabela ma sie PRZEWIJAC w swoim oknie, a nie sciskac tresci. */
.pp-tabela{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:1000px; }
/* Plakietka statusu i nazwa korpusu to krotkie etykiety - nie wolno ich lamac. */
.pp-stan{ white-space:nowrap; }
/* Pozycja koszyka, ktorej produkt zniknal z oferty. Wiersz MUSI istniec razem
   z przyciskiem usuwania - inaczej licznik nad ikona liczy sztuke, ktorej nie widac. */
.koszyk-poz--znikl{ opacity:.85; }
/* Pozycja w koszyku, ktorej nie da sie kupic - musi rzucac sie w oczy JUZ w szufladzie,
   a nie dopiero przy ostatnim kliknieciu w kasie. */
.pozycja--niedostepna{ background:var(--kremowy); border-radius:12px; }
/* Pozycja w podsumowaniu kasy, ktorej nie da sie kupic - z przyciskiem, ktory ja zdejmuje. */
/* Naglowek panelu bez tytulu - samo zdanie pod tytulem z sekcji wyzej. */
.sklep-naglowek--ciag{ padding-top:0; }

.sp-niedostepna{ background:var(--kremowy); border-radius:10px; }
.sp-niedostepna .sp-nazwa small{ display:block; margin-top:2px; font-size:12px; color:var(--bursztyn-tekst); }
.sp-usun{ border:1px solid var(--line); background:var(--bialy); color:var(--bursztyn-tekst);
  border-radius:100px; padding:6px 14px; font:600 13px 'Inter',sans-serif;
  cursor:pointer; min-height:36px; }
@media (hover:hover){ .sp-usun:hover{ border-color:var(--bursztyn-ciemny); } }

.poz-uwaga{ margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--bursztyn-tekst); }
.pozycja--niedostepna .kwota{ color:var(--bursztyn-tekst); font-weight:600; }
.koszyk-poz--znikl .kp-t b{ color:var(--bursztyn-tekst); }
.pp-tabela td:nth-child(6){ white-space:nowrap; }
.pp-tabela th{
  text-align:left; padding:13px 16px; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line);
}
.pp-tabela td{ padding:13px 16px; border-bottom:1px solid var(--line2); color:var(--ink); vertical-align:middle; }
.pp-tabela tr:last-child td{ border-bottom:0; }
.pp-tabela td small{ display:block; font-size:12.5px; color:var(--ink); opacity:.72; margin-top:2px; }
.pp-cena{ font-weight:700; white-space:nowrap; }
.pp-akcja{ text-align:right; white-space:nowrap; }
.pp-pusto{ text-align:center; padding:28px 16px; }
.pp-stan{ display:inline-block; padding:4px 11px; border-radius:100px; font-size:12px; font-weight:700; background:var(--kremowy2); color:var(--ink); }
.pp-stan--best{ background:var(--akcent-jasny); color:var(--akcent-ciemny); }
.pp-stan--nowosc{ background:var(--akcent-jasny); color:var(--akcent-ciemny); }
.pp-stan--ukryty{ background:var(--bursztyn-jasny); color:var(--bursztyn-tekst); }
/* Trzy statusy produktu (klient 20.08.2026): aktywny, brak na stanie, szkic.
   ⚠️ Kazda para policzona na 7:1 - zielen 9,3:1, bursztyn 8,0:1, szarosc 9,9:1. */
.pp-stan--aktywny{ background:var(--akcent-jasny); color:var(--akcent-ciemny); }
.pp-stan--brak{ background:var(--bursztyn-jasny); color:var(--bursztyn-tekst); }
.pp-stan--szkic{ background:var(--kremowy2); color:var(--ink); }

/* Oznaczenia maja WLASNA kolumne - status i plakietka marketingowa to dwie rozne rzeczy. */
.pp-kol-ozn{ max-width:190px; }
.pp-ozn{ display:inline-block; margin:2px 4px 2px 0; padding:3px 9px; border-radius:100px;
  background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:11.5px; font-weight:700;
  white-space:nowrap; }
/* Oznaczenie skasowane ze slownika: pokazujemy identyfikator zamiast pomijac wiersz. */
.pp-ozn--nieznane{ background:var(--kremowy2); color:var(--muted); border:1px dashed var(--line); }
.szuflada--szeroka{ width:min(560px,100%); }
.pp-akcje{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
/* link w menu panelu wyglada jak zakladka, ale prowadzi na osobna strone */
.panel-zak--link{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.pp-usun{ margin-left:auto; color:var(--alarm); border-color:var(--line); }
@media (hover:hover){ .pp-usun:hover{ background:var(--alarm); border-color:var(--alarm); color:#fff; } }

/* ZDJECIA PRODUKTOWE NA BIALYM (klient 13.08.2026: „zdjecia glowne beda na bialym tle").
   Ramka jest biala, wiec zdjecie produktu wyciete na bialym wtapia sie w kadr.
   ⚠️ Gdy klient przysle wlasne zdjecia produktowe, zamien object-fit na `contain` -
   `cover` przycina brzegi, co przy wycietym produkcie obcina ucho. */
.galeria-glowna, .prod-foto, .miniatury button, .pozycja img, .prop-kafel img{
  background:var(--bialy);
}
@media (max-width:600px){ .stopka-logo img{ height:32px; } }
/* ⛔ `opacity:.8` ZDJETE - krycie MIESZA Z TLEM, wiec przy kazdej zmianie tla stopki
   wynik jest inny i nie da sie go policzyc z samego arkusza. Sciszamy KOLOREM. */
.soc small{ display:block; font-size:12.5px; color:var(--stopka-tekst2); }
@media (hover:hover){ .soc:hover svg{ stroke:var(--zloto); } }
footer p{ font-size:14px; }
footer .brand{ color:#fff; }
footer .brand em{ color:var(--zloto); }
.copy{
  margin-top:30px; border-top:1px solid var(--stopka-linia); padding-top:18px;
  font-size:12.5px; color:var(--stopka-tekst2); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
/* ⛔⛔ `--muted2` #7E8C81 ZDJETY 14.09.2026. Komentarze, ktore tu staly („5,5:1",
   „8,7:1 zamiast 6,9:1"), byly nieaktualne juz przed ta zmiana: po przebudowie palety
   na zielona noc ten kolor mial na tle stopki **4,61:1** przy 12,5 px, czyli 0,11 nad
   progiem AA - a po zmianie tla na #1E4830 spadlby do **2,94:1**. To byl najciemniejszy
   wiersz calej stopki i jedyny, ktory nie przetrwalby rozjasnienia tla.
   ⚡ Dzis ten sam kolor co reszta drobnego druku stopki: 6,35:1.
   ⚠️ Nauka ogolna: liczba wpisana w komentarz starzeje sie razem z paleta. */
.copy a{ color:var(--stopka-tekst2); }
.copy a:hover{ color:#fff; }
/* "PART-WEB" nie lamie sie w polowie */
footer a[href*="partweb"], .copy a, .pasek-demo a, .demobar a{ white-space:nowrap; }

/* ==========================================================================
   17. RESPONSYWNOSC
   ========================================================================== */
/* laptopy o niskim ekranie - hero nie moze zajac calego widoku */
@media (max-height:780px){
  .hero h1{ font-size:clamp(30px,4.4vw,48px); margin-bottom:11px; }
  .hero p.sub{ font-size:15px; margin-bottom:14px; }
  .hero-inner{ padding-block:0 clamp(22px,4vw,40px); }
}

@media (max-width:1000px){
  .sklep-uklad, .panel-uklad{ grid-template-columns:1fr; }
  .filtry{ display:none; }
  /* ten sam panel filtrow przenoszony skryptem do szuflady - zero duplikatow ID */
  .filtry.mob{ display:block; position:static; border:0; padding:0; background:none; }
  .btn-filtry{ display:inline-flex; }
  .panel-menu{ position:static; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:8px; }
  .panel-menu::-webkit-scrollbar{ display:none; }
  .panel-menu button{ white-space:nowrap; width:auto; }
  .karta{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

/* PROG HAMBURGERA JEST POLICZONY, NIE DOBRANY NA OKO (07.09.2026).
   Tresc naglowka mierzy 899 px (marka 192 + menu 485 + ikony 194 + 2 x 14 odstepu),
   a `.wrap` dokłada 2 x 30 px marginesu - wiec menu w wersji na duzy ekran
   potrzebuje okna >= 959 px. Przy poprzednim progu 860 px pozycje lamaly sie
   w SRODKU SLOWA miedzy 861 a 959 px (zlapala to kontrola ukladu).
   1023 px zostawia 64 px zapasu na dluzsze nazwy pozycji u klienta.
   ⚡ Po zmianie nazw w menu PRZELICZ prog hamburgera. */
@media (max-width:1023px){
  /* menu mobilne: panel wysuwany pod naglowkiem, chowany opacity + visibility */
  .nav-linki{
    position:absolute; left:0; right:0; top:100%; z-index:60;
    background:var(--kremowy); flex-direction:column; gap:0; align-items:stretch;
    border-bottom:1px solid var(--line); box-shadow:var(--cien2);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .26s ease, transform .26s ease, visibility .26s;
  }
  .nav-linki.open{ opacity:1; visibility:visible; transform:none; }
  .nav-linki a.link{ padding:14px 24px; width:100%; border-bottom:1px solid var(--line2); min-height:52px; }
  .nav-linki a.link:last-child{ border-bottom:0; }
  .nav-toggle{ display:inline-flex; }
  .brand small{ display:none; }
}

@media (max-width:640px){
  .sortuj, .szukajka, .btn-filtry{ width:100%; flex:1 1 100%; }
  .produkty{ gap:12px; }
  .prod-body{ padding:12px 12px 14px; }
  .cena{ font-size:18px; }
  .dane-grid, .formularz{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .wzor-zapis{ gap:12px; }
  .panel-naglowek{ align-items:flex-start; }
}

/* zelazna zasada: na telefonie siatki schodza do JEDNEJ kolumny */
@media (max-width:600px){
  .produkty, .kafle, .fakty{ grid-template-columns:1fr; }
  .produkty > *, .kafle > *, .fakty > *{ max-width:100%; }
  .akcje-produkt > .btn{ flex:1 1 100%; min-width:0; }
  .akcje-produkt > .btn--kwadrat{ flex:0 0 auto; }
  .szuflada{ width:100%; }
}

/* ==========================================================================
   18. DOMYKANIE OSTATNIEGO RZEDU - zero sierotek
   Przy dokladnie czterech kaflach robily sie cztery chude kolumny; wtedy 2 x 2.
   ⚠️ TYLKO do 1000px. Powyzej cztery kafle mieszcza sie w jednym rzedzie po ok. 300px
   i tak tez maja stac - uklad 2 x 2 na 1440px dawal kafle 600 x 800 px, czyli dwa
   zdjecia na cala szerokosc ekranu. Wyglada to jak blad, a nie jak siatka kategorii.
   ========================================================================== */
@media (max-width:1000px){
  /* ⚠️ Liczbe kolumn ustawia RODZIC, wiec warunek „dokladnie cztery dzieci"
     musi siegnac do rodzica przez `:has()` - stary zapis celowal w dzieci. */
  .kafle:has(> *:first-child:nth-last-child(4)),
  .produkty:has(> *:first-child:nth-last-child(4)){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px){
  /* ⛔ Ta regula MUSI stac PO regule 1000 px: przy 600 px pasuja oba zapytania,
     a `@media` nie dodaje wagi - rozstrzyga kolejnosc w pliku. */
  .kafle:has(> *:first-child:nth-last-child(4)),
  .produkty:has(> *:first-child:nth-last-child(4)){
    grid-template-columns:1fr;
  }
}

/* ==========================================================================
   19. POZIOME PASKI NA TELEFONIE
   Pelna szerokosc, przyciaganie do kafla, wygaszenie maska. Maska znika,
   gdy pasek dojedzie do konca (atrybut data-koniec ustawia app.js).
   ========================================================================== */
@media (max-width:640px){
  .katbar-inner, .panel-menu, .okazje--pasek{
    scroll-snap-type:x proximity; scrollbar-width:none; flex-wrap:nowrap; overflow-x:auto;
    padding-inline:18px; scroll-padding-inline:18px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent);
  }
  .katbar-inner[data-koniec], .panel-menu[data-koniec], .okazje--pasek[data-koniec]{
    -webkit-mask-image:none; mask-image:none;
  }
  .katbar-inner > *, .panel-menu > *, .okazje--pasek > *{ flex:none; scroll-snap-align:start; }
  .katbar-inner::-webkit-scrollbar, .panel-menu::-webkit-scrollbar, .okazje--pasek::-webkit-scrollbar{ display:none; }
  /* pasek okazji rozciagniety na pelna szerokosc ekranu, poza padding .wrap */
  .okazje--pasek{ margin-inline:calc(-1 * clamp(16px,4vw,30px)); }
}

/* ==========================================================================
   20. DRUK - strona bywa drukowana do PDF
   ========================================================================== */
@media print{
  .pasek-demo, .demobar, .pasek-promo, header.nav, .ovl, .szuflada, .toast, .btn{ display:none !important; }
  body{ background:#fff; }
  section{ padding:18px 0; break-inside:avoid; }
  .prod, .kafel, .panel-karta{ break-inside:avoid; }
}


/* ==========================================================================
   KARTA PRODUKTU 13.08.2026 - uklad z referencji klienta (RoyalGift):
   personalizacja (opcjonalnie) -> ilosc + koszyk w jednym rzedzie -> linia
   o wysylce -> DODATKI -> trzy akordeony. Podobne produkty sa nizej, w sekcji.
   ========================================================================== */

/* --- personalizacja: pole wielolinijkowe zamiast jednej linii --- */
.personalizacja h4 .opcjonalnie{ font-weight:400; color:var(--muted); font-size:14px; }
.pole--goly span.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.personalizacja textarea{
  width:100%; min-height:104px; resize:vertical; padding:13px 15px;
  border:1px solid var(--line); border-radius:12px; background:var(--bialy);
  font-family:inherit; font-size:16px; line-height:1.5; color:var(--ink);
}
.personalizacja textarea:focus{ outline:2px solid var(--akcent); outline-offset:1px; border-color:transparent; }
.personalizacja textarea::placeholder{ color:var(--muted2); }

/* --- rzad zakupowy: minus/liczba/plus + duzy przycisk + serce --- */
.kup-rzad{ display:flex; gap:12px; align-items:stretch; margin-top:20px; flex-wrap:wrap; }
.kup-rzad .ilosc{ flex:none; }
.kup-rzad .btn--kup{ flex:1 1 240px; min-height:56px; font-size:15px; letter-spacing:.04em; }
.kup-rzad .btn--kwadrat{ flex:none; min-height:56px; width:56px; }
@media (max-width:520px){
  .kup-rzad .btn--kup{ flex:1 1 100%; order:3; }
  .kup-rzad .ilosc{ flex:1 1 auto; }
}

/* --- jedna linia o wysylce pod przyciskiem --- */
/* ⛔⛔ TEKST MUSI BYC JEDNYM ELEMENTEM SIATKI (14.09.2026, uwaga klienta ze zrzutu:
   „nie mogą być zł pod liczbami i tak to rozjechane").
   `display:flex` na akapicie robi z KAZDEGO kawalka tekstu osobny element siatki -
   takze z golych wezlow tekstowych miedzy znacznikami. Ten wiersz mial ich siedem
   (ikona, „Odbior osobisty w sklepie:", `<b>0,00 zl</b>`, kropka, „kurier",
   `<b>20 zl</b>`, reszta zdania), wiec kazdy lamal sie NIEZALEZNIE: „zl" schodzilo
   pod liczbe, a slowo „kurier" pekalo na „kuri" i „er".
   ⚡ Lekarstwo nie polega na zwezaniu ani na `nowrap` - tylko na tym, ze flex ma
   dostac DWA elementy: ikone i jeden blok tekstu. Wtedy tekst plynie jak akapit.
   ⚡ Sama tresc jest krotsza, bo pelne zdanie o kurierze i czasie doreczenia stalo
   trzydziesci pikseli nizej, w rozwijanym „Wysylka" - i stoi tam nadal. */
.wysylka-linia{
  display:flex; align-items:flex-start; justify-content:center; gap:10px;
  margin:16px 0 0; font-size:14.5px; color:var(--muted); text-align:center;
}
.wysylka-linia svg{ width:20px; height:20px; flex:none; margin-top:1px; fill:none; stroke:var(--akcent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.wysylka-linia__tresc{ min-width:0; }
/* ⛔ Kwota nigdy nie pęka miedzy liczba a jednostka - „0,00" w jednym wierszu
   i „zl" w nastepnym to nie jest cena, tylko dwie liczby. */
.wysylka-linia b{ color:var(--ink); font-weight:600; white-space:nowrap; }
.wysylka-linia .kropka{ opacity:.45; margin:0 8px; }

/* --- DODATKI („Wzbogac swoj zakup") --- */
.dodatki-sekcja{ margin-top:30px; }
.dodatki-tyt{ font-size:19px; margin:0 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dodatki-tyt span{ font-family:'Inter',sans-serif; font-size:13.5px; font-weight:400; color:var(--muted); }
.dodatek{
  display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer;
  background:var(--bialy); border:1px solid var(--line); border-radius:14px;
  transition:border-color .2s, box-shadow .2s;
}
.dodatek + .dodatek{ margin-top:10px; }
.dodatek:has(input:checked){ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; }
@media (hover:hover){ .dodatek:hover{ border-color:var(--akcent); } }
.dodatek-znak{
  flex:none; width:64px; height:64px; border-radius:10px; background:var(--kremowy2);
  display:grid; place-items:center;
}
.dodatek-znak svg{ width:30px; height:30px; fill:none; stroke:var(--akcent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dodatek-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.dodatek-t b{ font-size:15px; line-height:1.35; }
.dodatek-t small{ font-size:13px; color:var(--muted); line-height:1.5; }

/* WZORY PUDELKA PREZENTOWEGO (dane i zdjecia od klienta).
   Cztery kafle pod dodatkiem; klikniecie kafla zaznacza tez sam dodatek. */
.dod-warianty{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.dod-wzor{
  flex:1 1 calc(25% - 6px); min-width:84px; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:var(--bialy);
  padding:8px 6px 6px; text-align:center; transition:border-color .2s ease, box-shadow .2s ease;
}
.dod-wzor img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
.dod-wzor-nazwa{ display:block; margin-top:5px; font-size:12px; font-weight:600; color:var(--ink); }
.dod-wzor.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; }
.dod-wzor:focus-within{ outline:2px solid var(--akcent); outline-offset:2px; }
@media (hover:hover){ .dod-wzor:hover{ border-color:var(--akcent); } }
@media (max-width:520px){ .dod-wzor{ flex:1 1 calc(50% - 4px); } }
.dodatek-cena{ font-size:14.5px; font-weight:700; color:var(--akcent-ciemny); }
.dodatek input[type="checkbox"]{
  flex:none; width:24px; height:24px; accent-color:var(--akcent); cursor:pointer; margin:0;
}
@media (max-width:520px){
  .dodatek-znak{ width:52px; height:52px; }
  .dodatek-znak svg{ width:24px; height:24px; }
}

/* ==========================================================================
   KONTRAST TEKSTU NA KARCIE PRODUKTU (prosba klienta)
   Opisy stoja wyzej w --muted (#7A6A5A) na kremowym = 4,8:1. To przechodzi
   podloge WCAG, ale w cieplej palecie brazowy tekst zlewa sie z kremem.
   Klient poprosil: tresc opisow na BIALYM tle, naglowki na CZARNO.
   Zakres: wylacznie .karta-produktu - ten sam .akordeon obsluguje FAQ
   na stronie glownej i tam zostaje bez zmian.
   ========================================================================== */
.karta-produktu .akordeon{
  background:var(--bialy); border:1px solid var(--line); border-radius:14px;
  padding:2px 18px;
}
.karta-produktu .akordeon details{ border-bottom:1px solid var(--line2); }
.karta-produktu .akordeon details:last-child{ border-bottom:0; }
/* naglowki sekcji: „Opis Produktu", „Wysylka", „Szczegoly produktu" */
.karta-produktu .akordeon summary{ color:var(--ink); font-weight:700; font-size:15.5px; }
/* tresc opisow: pelny kontrast zamiast wyplowialego brazu */
.karta-produktu .akordeon p,
.karta-produktu .akordeon ul,
.karta-produktu .akordeon li,
.karta-produktu .akordeon td,
.karta-produktu .akordeon th{ color:var(--ink); }
.karta-produktu .akordeon th{ font-weight:700; }

/* DODATKI - naglowek na czarno, opis pozycji czytelny, kafle na bialym */
.karta-produktu .dodatki-tyt{ font-weight:700; }
.karta-produktu .dodatki-tyt span{ color:var(--ink); }
.karta-produktu .dodatek{ background:var(--bialy); }
.karta-produktu .dodatek-t small{ color:var(--ink); }

/* linia o wysylce + naglowek personalizacji */
.karta-produktu .wysylka-linia{ color:var(--ink); }
.karta-produktu .personalizacja h4{ font-weight:700; }
.karta-produktu .personalizacja h4 .opcjonalnie{ color:var(--ink); }

/* nota robocza dziedziczy juz podniesione --muted (8,4:1) - osobne
   nadpisanie z 13.08.2026 bylo jasniejsze i zostalo zdjete. */

/* .dodatki-sekcja to <section>, wiec lapala globalne section{padding:clamp(52px,7vw,88px) 0}
   - wewnatrz karty produktu dawalo to 88 px pustki nad „Dodatkami" i pod nimi. */
.karta-produktu .dodatki-sekcja{ padding:0; }

/* ==========================================================================
   SLAJDER HERO (13.08.2026) - piec slajdow: okazje, zestawy, promocja.
   Wysokosc i typografia zostaja z dotychczasowego hero (prosba klienta).
   Slajdy stoja w JEDNEJ komorce gridu - dzieki temu wysokosc liczy sie
   z najwyzszego slajdu i przy przelaczaniu strona nie skacze.
   Bez JS widac pierwszy slajd (klasa .jest siedzi w HTML).
   ========================================================================== */
.hero--slajder{ display:block; align-items:stretch; }
/* Przyciemnienie pod tekstem. Piec roznych zdjec = pieciu roznych jasnosci,
   a napisy stoja zawsze w lewym dolnym rogu, wiec scrim musi byc mocniejszy
   niz przy jednym, dobranym kadrze. Wartosci dobrane pomiarem najjasniejszego
   piksela pod kazdym napisem, podloga 4,5:1. */
.hero--slajder .hero-bg::after{
  /* ⛔⛔ WELON MUSI BYC INNY NA TELEFONIE NIZ NA SZEROKIM EKRANIE - i to nie jest
     przeczucie, tylko wynik pomiaru. Gradient poziomy, ktory oszczedza prawa polowe
     kadru, ma sens tylko wtedy, gdy blok tekstu tam nie siega. Przy 390 px tekst
     zajmuje niemal cala szerokosc, wiec ta sama krzywa dawala 6 napisow ponizej progu
     (najgorszy 1,90:1 przy wymaganych 3:1), a przy 1440 px tylko 2.
     ⚡ Baza jest wiec MOCNA i rowna - liczy sie czytelnosc. Dopiero od 1000 px,
     gdzie tekst konczy sie okolo 60% szerokosci, prawa strona wraca do zdjecia.
     ⛔ Kolor z `--noc` (11,26,19). Poprzedni welon byl brazowo-czarny (18,13,8) -
     resztka po palecie innego klienta; na zielonej marce dawal szarobure zdjecia. */
  background:
    linear-gradient(90deg,rgba(11,26,19,.93) 0%,rgba(11,26,19,.88) 55%,rgba(11,26,19,.78) 85%,rgba(11,26,19,.68) 100%),
    linear-gradient(0deg,rgba(11,26,19,.55) 0%,rgba(11,26,19,.26) 50%,transparent 88%);
}
@media (min-width:1000px){
  .hero--slajder .hero-bg::after{
    background:
      linear-gradient(90deg,rgba(11,26,19,.92) 0%,rgba(11,26,19,.84) 42%,rgba(11,26,19,.52) 68%,rgba(11,26,19,.12) 88%,transparent 100%),
      linear-gradient(0deg,rgba(11,26,19,.56) 0%,rgba(11,26,19,.22) 48%,transparent 84%);
  }
}
.hero-tor{ display:grid; }
.hero-slajd{
  /* Klient 13.08.2026: tresc ma stac na SRODKU w pionie, nie przy dolnej krawedzi.
     Miejsce na kropki sterujace robi padding-bottom w .hero--slajder .hero-inner. */
  grid-area:1/1; position:relative; display:flex; align-items:center;
  min-height:min(calc(100svh - var(--bars,116px)),780px);
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.hero-slajd.jest{ opacity:1; visibility:visible; transition:opacity .45s ease, visibility 0s; }
/* tytul slajdow 2-5 to <h2> - ma wygladac dokladnie jak <h1> ze slajdu 1 */
.hero .hero-tyt{
  font-family:'Lora',Georgia,serif; font-weight:500; line-height:1.04;
  font-size:clamp(38px,6.6vw,72px); color:#fff; margin:0 0 16px;
}
.hero .hero-tyt em{ font-style:italic; color:var(--zloto); }

/* Etykieta w hero ZAWSZE na ciemnym. Piec roznych zdjec oznacza pieciu roznych
   jasnosci pod napisem, a sam scrim nie wystarczy przy 13-punktowej etykiecie
   w kolorze akcentu. Pigulka daje stale tlo niezaleznie od kadru. */
.hero--slajder .eyebrow{
  display:inline-block; background:rgba(18,13,8,.78); color:var(--bursztyn-jasny);
  padding:7px 14px; border-radius:999px; margin-bottom:14px;
}

/* delikatne wejscie tresci - tylko transform i opacity */
.hero-slajd .hero-inner > *{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.hero-slajd.jest .hero-inner > *{ opacity:1; transform:none; }
.hero-slajd.jest .hero-inner > *:nth-child(2){ transition-delay:.07s; }
.hero-slajd.jest .hero-inner > *:nth-child(3){ transition-delay:.14s; }
.hero-slajd.jest .hero-inner > *:nth-child(4){ transition-delay:.21s; }

/* --- sterowanie: strzalki po bokach, kropki na dole --- */
.hero-sterowanie{
  position:absolute; inset:auto 0 0; z-index:3; pointer-events:none;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:0 0 18px;
}
.hero-strzalka{
  pointer-events:auto; flex:none; width:var(--tap,44px); height:var(--tap,44px);
  display:none; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.55); border-radius:50%;
  background:rgba(17,36,26,.42); color:#fff; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.hero-strzalka svg{ width:20px; height:20px; }
@media (hover:hover) and (pointer:fine){
  .hero-strzalka:hover{ background:rgba(17,36,26,.78); border-color:#fff; }
}
.hero-kropki{ pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:4px; }
.hero-kropka{
  width:var(--tap,44px); height:var(--tap,44px); padding:0; border:0; background:none;
  cursor:pointer; position:relative; border-radius:50%;
}
/* pole dotyku ma 44 px, ale widac tylko kropke w srodku.
   Swiadomie KOLKO, nie kreska - pozioma kreska czyta sie jak dlugi myslnik
   i lapie ja kontrola jakosci "ozdobne kreski przed etykietami". */
.hero-kropka::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45);
  transition:background .25s ease, box-shadow .25s ease;
}
.hero-kropka.jest::after{ background:var(--zloto); box-shadow:0 0 0 4px rgba(240,201,168,.26); }
@media (hover:hover) and (pointer:fine){
  .hero-kropka:hover::after{ background:rgba(255,255,255,.8); }
}

/* miejsce na kropki pod przyciskami, zeby nic na siebie nie wchodzilo */
.hero--slajder .hero-inner{ padding-bottom:calc(clamp(40px,6vw,74px) + 30px); }

@media (min-width:900px){
  /* na duzym ekranie strzalki wchodza po bokach, kropki zostaja na dole */
  .hero-strzalka{ display:flex; position:absolute; top:50%; transform:translateY(-50%); }
  .hero-strzalka--wstecz{ left:clamp(12px,2.4vw,30px); }
  .hero-strzalka--dalej{ right:clamp(12px,2.4vw,30px); }
}
@media (max-width:899px){
  /* telefon: bez strzalek, zostaja kropki i przesuniecie palcem */
  .hero-tor{ touch-action:pan-y; }
  .hero-sterowanie{ padding-bottom:8px; }
  .hero--slajder .hero-inner{ padding-bottom:calc(clamp(40px,6vw,74px) + 22px); }
}

@media (prefers-reduced-motion:reduce){
  .hero-slajd, .hero-slajd .hero-inner > *{ transition:none; }
  .hero-slajd .hero-inner > *{ opacity:1; transform:none; }
}

/* ==========================================================================
   KASA (zamowienie.html) - uklad z referencji klienta (SFD), 13.08.2026.
   Numerowane kroki po lewej, przyklejone podsumowanie po prawej.
   Krok nieodblokowany jest przygaszony i nie da sie w niego wejsc tabulatorem.
   UWAGA: klasa .krok byla juz zajeta przez paski postepu dostawy w panelu,
   dlatego kroki kasy nazywaja sie .kasa-krok.
   ========================================================================== */

/* naglowek kasy - bez menu, zeby nie wyprowadzac z zakupu */
.nav--kasa .nav-top{ justify-content:space-between; }
.kasa-bezpiecznie{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:13px; color:var(--ink); font-weight:600;
}
.kasa-bezpiecznie svg{ width:19px; height:19px; color:var(--akcent); flex:none; }

.sekcja--gora0{ padding-top:0; }

.kasa{ display:grid; gap:26px; align-items:start; }
@media (min-width:980px){
  .kasa{ grid-template-columns:minmax(0,1fr) 350px; gap:32px; }
}
.kasa > *{ min-width:0; }

/* --- krok --- */
.kasa-krok{
  background:var(--bialy); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin-bottom:14px;
}
.kasa-krok.zablokowany{ opacity:.5; }
.kasa-krok.zablokowany .krok-tresc{ display:none; }
.kasa-krok.gotowy .krok-tresc{ display:block; }
.kasa-krok:not(.jest):not(.gotowy) .krok-tresc{ display:none; }
.krok-gora{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.krok-tyt{
  font-family:'Inter',sans-serif; font-size:17px; font-weight:700; color:var(--ink);
  margin:0; display:flex; align-items:center; gap:11px; min-height:var(--tap,44px);
}
.kasa-krok:not(.zablokowany) .krok-tyt{ cursor:pointer; }
.krok-nr{
  width:28px; height:28px; flex:none; border-radius:50%;
  background:var(--akcent); color:#fff; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.kasa-krok.zablokowany .krok-nr{ background:var(--muted); }
.kasa-krok.gotowy .krok-nr{ background:var(--noc); }
.krok-tresc{ padding-top:14px; }
.krok-akcje{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

/* --- formularz adresu --- */
/* .formularz jest siatka 1fr 1fr, wiec dwa bloki .pola-2 staly OBOK siebie
   i dawaly cztery waskie pola w rzedzie. Kazdy blok ma zajac cala szerokosc. */
.pola-2{ display:grid; gap:0 14px; grid-template-columns:1fr; grid-column:1/-1; }
.formularz > .pole, .formularz > .nota, .formularz > .komunikat, .formularz > .krok-akcje{ grid-column:1/-1; }
@media (min-width:640px){
  .pola-2{ grid-template-columns:1fr 1fr; }
  .pola-2:has(.pole--waskie){ grid-template-columns:140px 1fr; }
}
.formularz .pola-2 .pole{ margin-bottom:14px; }

.karta-blok{
  background:var(--kremowy); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:14px;
}
.etykieta-mala{
  margin:0 0 6px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); font-weight:700;
}
.adres-tekst{ margin:0 0 8px; font-size:14.5px; line-height:1.6; color:var(--ink); }
.link-akcja{
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--akcent-ciemny); font:inherit; font-size:14px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; min-height:var(--tap,44px);
}

/* --- wybor dostawy: najpierw rodzaj, potem przewoznik --- */
.grupy-dostawy{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.grupa-dost{
  flex:1 1 190px; text-align:left; cursor:pointer;
  background:var(--bialy); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; min-height:var(--tap,44px); font:inherit; color:var(--ink);
}
.grupa-dost b{ display:block; font-size:15px; }
.grupa-dost small{ display:block; font-size:12.5px; color:var(--ink); opacity:.72; margin-top:2px; }
.grupa-dost.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; }
@media (hover:hover){ .grupa-dost:hover{ border-color:var(--akcent); } }

.wybor-przewoznika, .wybor-platnosci{ display:flex; flex-direction:column; gap:10px; }
.przewoznik, .platnosc{
  display:flex; align-items:center; gap:13px; cursor:pointer;
  background:var(--bialy); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; min-height:var(--tap,44px);
}
.przewoznik.jest, .platnosc.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; }
@media (hover:hover){ .przewoznik:hover, .platnosc:hover{ border-color:var(--akcent); } }
.przewoznik input, .platnosc input{ width:20px; height:20px; flex:none; accent-color:var(--akcent); }
.pw-tresc, .pl-tresc{ flex:1; min-width:0; }
.pw-tresc b, .pl-tresc b{ display:block; font-size:15px; color:var(--ink); }
.pw-tresc small, .pl-tresc small{ display:block; font-size:12.5px; color:var(--ink); opacity:.75; margin-top:2px; }
.pw-nota{ font-style:italic; }
.pw-cena, .pl-doplata{ flex:none; font-size:14.5px; font-weight:700; color:var(--akcent-ciemny); }

/* --- punkt odbioru ---
   ⛔ Reguly `.punkt-szukaj` / `.punkt-wyniki` / `.punkt-wynik` skasowane razem
      z wyszukiwarka punktow, ktora przyjmowala kazda miejscowosc (14.09.2026).
      Sklep ma jeden punkt odbioru, wiec jest tu adres, a nie pole do wpisania. */
.punkt-adres{
  margin:6px 0 4px; font-size:15px; font-weight:600; color:var(--ink); line-height:1.45;
}

/* --- zgody --- */
.zgoda{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;
  font-size:14px; line-height:1.6; color:var(--ink); cursor:pointer;
}
.zgoda input{ width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--akcent); }
/* zgoda-przelacznik w kroku 1 kasy (faktura) stoi w siatce formularza */
.zgoda--faktura{ grid-column:1/-1; margin:4px 0 10px; }

/* ZGODY FORMALNE w kasie - uklad z SFD (przelacznik zbiorczy + zwinieta klauzula) */
/* Zgody czyta sie z gory na dol, wiec kazda zajmuje CALY rzad. Bez tego siatka
   .formularz (1fr 1fr) ustawiala je w dwie kolumny i kolejnosc skakala na boki. */
#formZgody > .zgoda, #formZgody > .klauzula, #formZgody > .komunikat, #formZgody > .krok-akcje{
  grid-column:1/-1;
}
.zgoda--wszystkie{
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.zgoda i{ font-style:normal; color:var(--ink); opacity:.72; }
.klauzula{ position:relative; margin:6px 0 14px; }
.klauzula-tekst{
  margin:0; font-size:12px; line-height:1.6; color:var(--ink);
  max-height:66px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);
          mask-image:linear-gradient(#000 55%,transparent);
}
.klauzula.rozwinieta .klauzula-tekst{
  max-height:none; -webkit-mask-image:none; mask-image:none;
}
.klauzula-wiecej{ display:block; margin:6px auto 0; }

/* --- podsumowanie po prawej --- */
.suma-karta{
  background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px;
}
@media (min-width:980px){
  .kasa-suma{ position:sticky; top:calc(var(--bars,116px) + 16px); }
}
.suma-tyt{ font-family:'Inter',sans-serif; font-size:16px; font-weight:700; margin:0 0 12px; color:var(--ink); }
.suma-pozycje{ list-style:none; margin:12px 0 14px; padding:0; border-top:1px solid var(--line2); }
.suma-pozycje li{
  display:flex; gap:10px; align-items:baseline; padding:9px 0;
  border-bottom:1px solid var(--line2); font-size:13.5px; color:var(--ink);
}
.sp-ile{ flex:none; font-weight:700; color:var(--akcent-ciemny); }
.sp-nazwa{ flex:1; min-width:0; }
.sp-cena{ flex:none; font-weight:600; white-space:nowrap; }
.suma--razem{ border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.suma--rabat span{ color:var(--akcent-ciemny); font-weight:600; }

.kod-blok{ margin:16px 0 14px; padding-top:14px; border-top:1px solid var(--line2); }
.kod-rzad{ display:flex; gap:8px; align-items:center; }
.kod-rzad .pole{ flex:1; min-width:0; margin:0; }
.kod-rzad .btn{ flex:none; }

.btn--duzy{ min-height:56px; font-size:15px; width:100%; }
/* link udajacy wylaczony przycisk (pusty koszyk) - <a> nie ma atrybutu disabled */
.btn--wylaczony{ opacity:.45; pointer-events:none; }

/* PODSTRONY INFORMACYJNE (dostawa, platnosci, zwroty, regulamin, polityka,
   cookies, sledzenie) - jedna waska kolumna, bo to tekst do czytania. */
.tresc-waska{ max-width:760px; }
.tresc-waska h2{ font-size:clamp(22px,2.6vw,27px); margin:34px 0 12px; }
.tresc-waska h2:first-child{ margin-top:0; }
.tresc-waska p{ margin:0 0 12px; line-height:1.75; }
.tresc-waska .karta-blok{ margin-bottom:26px; }
.lista-tresci{ margin:0 0 12px; padding-left:20px; }
.lista-tresci li{ margin-bottom:8px; line-height:1.7; }

/* ── WZÓR FORMULARZA ODSTĄPIENIA (załącznik nr 2 do ustawy o prawach konsumenta) ──
   ⚡ Wygląda jak DRUK, nie jak kolejny akapit strony: ramka, jasne tło i kropkowane
   pola do wypełnienia. To nie ozdoba - kupujący ma go przepisać albo wydrukować,
   więc musi się odcinać od tekstu wokół.
   ⛔ Punkty bez wypunktowania: w załączniku są to myślniki, a nie lista numerowana. */
.wzor-odstapienia{
  margin:0 0 16px; padding:20px 22px; background:var(--kremowy2);
  border:1px solid var(--line); border-radius:14px;
}
.wzor-tytul{ margin:0 0 4px; font-weight:700; letter-spacing:.02em; }
.wzor-nota{ margin:0 0 12px; font-size:13.5px; color:var(--muted); font-style:italic; }
.wzor-lista{ margin:0 0 12px; padding:0; list-style:none; }
.wzor-lista li{ margin-bottom:10px; line-height:1.7; padding-left:16px; position:relative; }
.wzor-lista li::before{ content:"-"; position:absolute; left:0; color:var(--muted); }
@media print{
  /* Wydruk formularza ma być czysty: bez tła, z ramką, która przetrwa druk mono. */
  .wzor-odstapienia{ background:none; border:1px solid #000; break-inside:avoid; }
}

/* BLOG: lista wpisow i pojedynczy wpis (13.08.2026) */
.wpisy-lista{ display:flex; flex-wrap:wrap; gap:22px; }
.wpis-karta{
  flex:1 1 320px; min-width:0; background:var(--bialy); border:1px solid var(--line2);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .25s ease, transform .25s ease;
}
@media (hover:hover){ .wpis-karta:hover{ box-shadow:var(--cien2); transform:translateY(-3px); } }
.wpis-foto{ display:block; aspect-ratio:3/2; overflow:hidden; background:var(--kremowy2); }
.wpis-foto img{ width:100%; height:100%; object-fit:cover; }
.wpis-tresc{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.wpis-tresc h2{ font-size:21px; margin:0; line-height:1.25; }
.wpis-tresc h2 a{ color:var(--ink); }
.wpis-tresc p{ margin:0; font-size:14.5px; line-height:1.65; }
.wpis-meta{ display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 6px; }
.wpis-kat{ background:var(--akcent-jasny); color:var(--akcent-ciemny); padding:4px 10px; border-radius:100px; font-weight:700; }
.wpis-wiecej{ margin-top:auto; padding-top:6px; font-weight:600; }
.wpis-glowne{ margin:0 0 26px; border-radius:18px; overflow:hidden; }
.wpis-glowne img{ width:100%; height:auto; display:block; }
.wpis-cta{ margin:30px 0; }
.wpis-cta .btn{ margin-top:10px; }

/* NEWSLETTER W STOPCE (13.08.2026). Zapis dwuetapowy - link potwierdzajacy
   z maila - dlatego komunikat mowi o kliknieciu, a nie o gotowym zapisie. */
.newsletter{
  display:grid; gap:18px 34px; align-items:start;
  margin-top:34px; padding-top:28px; border-top:1px solid var(--stopka-linia);
}
@media (min-width:900px){ .newsletter{ grid-template-columns:minmax(0,1fr) minmax(0,460px); } }
.nl-tekst h4{ margin:0 0 6px; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; letter-spacing:.02em; text-transform:none; color:#fff; }
.nl-tekst p{ margin:0; font-size:14px; max-width:420px; }
/* Pole+przycisk to OSOBNY rzad; zgoda i komunikat ida pod spodem jako pelna
   szerokosc. Wczesniej wszystko lezalo w jednej siatce dwukolumnowej i kontrola
   QA slusznie widziala dziure w ostatnim rzedzie. */
.nl-form{ display:flex; flex-direction:column; gap:10px; }
.nl-rzad{ display:flex; gap:10px; align-items:center; }
.nl-rzad .pole{ flex:1; min-width:0; margin:0; }
.nl-form .pole{ margin:0; }
.nl-form input[type='email']{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28); color:#fff;
}
.nl-form input[type='email']::placeholder{ color:rgba(239,231,222,.62); }
.nl-form .btn{ flex:none; }
.nl-zgoda{ margin:0; font-size:13px; color:var(--stopka-tekst); }
.nl-zgoda input{ margin-top:1px; }
.newsletter .komunikat{ margin:0; color:var(--stopka-tekst); }
.newsletter .komunikat.blad{ color:var(--bursztyn-jasny); }

/* PROPONOWANE PRODUKTY (koszyk i panel) - wzor z innego sklepu */
.propozycje{ padding:16px 20px 4px; border-top:1px solid var(--line2); }
.propozycje--panel{ padding:0; border:0; margin-bottom:26px; }
.prop-lista{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.propozycje--panel .prop-lista{ flex-direction:row; flex-wrap:wrap; }
.prop-kafel{
  display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px;
  border:1px solid var(--line2); background:var(--bialy); color:var(--ink); min-height:44px;
}
.propozycje--panel .prop-kafel{ flex:1 1 220px; min-width:0; }
.prop-kafel img{ width:52px; height:68px; object-fit:cover; border-radius:8px; flex:none; background:var(--kremowy2); }
.prop-t{ min-width:0; }
.prop-t b{ display:block; font-size:14px; line-height:1.3; }
.prop-t small{ display:block; font-size:13px; font-weight:700; color:var(--akcent-ciemny); margin-top:2px; }
@media (hover:hover){ .prop-kafel:hover{ border-color:var(--akcent); color:var(--ink); } }
.pod-haslem{ margin:0 0 10px; text-align:right; }


/* ===== DLA FIRM I WYCENA HURTOWA (14.08.2026) ================================
   Osobny prefiks `df-`, bo obie podstrony maja komponenty, ktorych nie ma nigdzie
   indziej (kreator zapytania, kafle zastosowan, pasek liczb na ciemnym tle).
   ⚠️ KAZDA klasa uzyta w HTML ma tu regule. Klasa bez reguly nie znika z kodu -
      po prostu przestaje byc widoczna, a to najtrudniejszy blad do zauwazenia. */

.df-h2{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(26px, 3.4vw, 38px); line-height:1.18; margin:6px 0 22px; }
.df-h3{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:22px; line-height:1.25; margin:2px 0 14px; }
.df-lead-cta{ max-width:60ch; margin:0 auto 22px; color:var(--muted); font-size:16.5px; line-height:1.65; }
.srodek .df-lead-cta{ margin-inline:auto; }

.df-akcje-gora{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:26px 0 0; }
/* ⚠️  ma w arkuszu  (pod przyciski na cala szerokosc w koszyku),
   wiec w rzedzie rozpychal sie na caly wiersz i spychal drugi przycisk pod siebie. */
.df-akcje-gora .btn{ width:auto; flex:0 0 auto; }
.sklep-naglowek .df-akcje-gora{ justify-content:flex-start; }
.sklep-naglowek .df-akcje-gora{ margin-top:22px; }

/* --- kafle zastosowan --- */
.df-siatka{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:18px; }
.df-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:var(--cien); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.df-karta h3{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:20px; margin:0 0 10px; }
.df-karta p{ margin:0; color:var(--muted); font-size:15px; line-height:1.65; }
@media (hover:hover) and (pointer:fine){
  .df-karta:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); }
}

/* --- tabela linii --- */
.df-tabela th[scope="row"]{ font-weight:700; white-space:normal; }
.df-cena{ font-family:"Lora",Georgia,serif; font-size:17px; color:var(--akcent-ciemny); white-space:nowrap; }
.df-nota-rabat{ margin-top:14px; }

/* --- kroki --- */
.df-kroki{ list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:none; }
.df-krok{ display:flex; gap:16px; align-items:flex-start; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.df-krok-nr{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--akcent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; }
.df-krok > div > b{ display:block; margin-bottom:4px; font-size:16px; }   /* ⚠️ tylko TYTUL kroku -  obejmowalo tez <b> w tresci i lamalo „[do uzupelnienia]" na osobne wiersze */
.df-krok p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; }

/* --- dwie kolumny: lista + ramka --- */
.df-dwie{ display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.df-box{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:var(--cien); }
.df-box h3{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:19px; margin:0 0 8px; }
.df-box h3 + p{ margin-top:0; }
.df-box p{ color:var(--muted); font-size:15px; line-height:1.65; }
.df-box h3:not(:first-child){ margin-top:20px; padding-top:18px; border-top:1px solid var(--line2); }

/* --- pasek liczb na ciemnym --- */
.df-zaufanie{ background:var(--noc); color:var(--noc-tekst); }
.df-h2-noc{ color:#FFFFFF; }
.df-eyebrow-noc{ color:var(--zloto); }
.df-nota-noc{ color:var(--piasek); margin-top:18px; }
.df-liczby{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:20px; margin-top:8px; }
.df-liczba{ border-left:2px solid var(--zloto); padding-left:16px; }
.df-liczba b{ display:block; font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(26px, 3vw, 34px); color:#FFFFFF; line-height:1.1; }
.df-liczba span{ display:block; margin-top:4px; font-size:14px; color:var(--piasek); line-height:1.45; }

/* --- odnosnik z sekcji hurtowej na stronie glownej (ciemne tlo) --- */
.df-link-oferta{ margin-top:14px; }
.df-link-oferta a{ color:var(--zloto); }

/* ===== KREATOR ============================================================= */
.df-uklad{ display:grid; grid-template-columns:1fr 360px; gap:34px; align-items:start; }
.df-kreator{ display:grid; gap:18px; min-width:0; }
.df-blok{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:22px 22px 24px; box-shadow:var(--cien); }
.df-numer{ margin:0 0 2px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--akcent-ciemny); }

.df-pigulki{ display:flex; flex-wrap:wrap; gap:10px; }
.df-pig{ flex:1 1 190px; min-width:0; text-align:left; background:var(--kremowy); border:1px solid var(--line); border-radius:12px; padding:13px 15px; cursor:pointer; font:inherit; color:var(--ink); transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; min-height:var(--tap); }
.df-pig b{ display:block; font-size:15px; font-weight:700; }
.df-pig small{ display:block; margin-top:3px; font-size:13px; color:var(--muted); line-height:1.4; }
.df-pig.akt{ border-color:var(--akcent); background:var(--akcent-jasny); box-shadow:inset 0 0 0 1px var(--akcent); }
.df-pig.akt small{ color:var(--akcent-ciemny); }
@media (hover:hover) and (pointer:fine){
  .df-pig:hover{ border-color:var(--akcent); background:var(--akcent-jasny); }
}
.df-pigulki--male{ margin-top:12px; }
.df-pig--maly{ flex:0 0 auto; min-width:64px; text-align:center; font-weight:700; padding:10px 16px; }

.df-licznik{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.df-lbtn{ width:var(--tap); height:var(--tap); flex:none; border:1px solid var(--line); background:var(--kremowy); border-radius:10px; font-size:20px; line-height:1; cursor:pointer; color:var(--ink); }
.df-licznik input{ width:110px; height:var(--tap); text-align:center; font:inherit; font-weight:700; font-size:17px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); color:var(--ink); }
.df-lopis{ color:var(--muted); font-size:15px; }
@media (hover:hover) and (pointer:fine){
  .df-lbtn:hover{ border-color:var(--akcent); background:var(--akcent-jasny); }
}
.df-data-pole{ margin:14px 0 0; max-width:280px; }

/* --- podsumowanie --- */
.df-podsum{ min-width:0; }
.df-sticky{ position:sticky; top:96px; }
.df-zdanie{ margin:0 0 14px; font-size:15.5px; line-height:1.65; color:var(--muted); }
.df-zdanie b{ color:var(--ink); }
.df-pozycje{ margin:0 0 16px; }
.df-pozycje li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line2); font-size:14.5px; }
.df-pozycje li span{ color:var(--muted); }
.df-pozycje li b{ text-align:right; }
.df-wycena{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 16px; background:var(--akcent-jasny); border-radius:12px; margin-bottom:12px; }
.df-wycena span{ font-size:14.5px; color:var(--muted); }
.df-wycena b{ font-family:"Lora",Georgia,serif; font-size:17px; color:var(--akcent-ciemny); text-align:right; }
.df-srodek-btn{ margin:6px 0 0; }
.tresc-waska p.df-nota-pod{ margin-top:24px; }   /* ⚠️ specyficznosc:  (klasa+element) bije pojedyncza klase i zerowalo ten margines */

@media (max-width:980px){
  .df-uklad{ grid-template-columns:1fr; }
  .df-dwie{ grid-template-columns:1fr; gap:24px; }
  .df-sticky{ position:static; }
}
@media (max-width:600px){
  .df-pig{ flex:1 1 100%; }
  .df-krok{ padding:16px; }
  .df-akcje-gora{ flex-direction:column; align-items:stretch; }
  .df-akcje-gora .btn{ width:100%; }
}


/* ===== KONTAKT (podstrona) ===================================================
   Karty kontaktu na stronie glownej mialy style INLINE w index.html, wiec na osobnej
   podstronie nie dzialalyby wcale. Tu maja wlasny komplet regul (prefiks `kt-`).
   ⚠️ Kazda klasa uzyta w HTML ma tu regule - klasa bez reguly nie znika z kodu,
      tylko przestaje byc widoczna. */

.kt-siatka{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.kt-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:20px 19px; box-shadow:var(--cien); display:flex; gap:13px; align-items:flex-start; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.kt-karta svg{ width:22px; height:22px; flex:none; margin-top:2px; stroke:var(--akcent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kt-karta b{ display:block; font-size:15.5px; margin-bottom:5px; }
.kt-karta p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }
.kt-karta a{ color:var(--akcent-ciemny); font-weight:600; }
.kt-dane a{ display:block; font-size:15px; margin-bottom:2px; }
@media (hover:hover) and (pointer:fine){
  .kt-karta:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); }
}

.kt-uklad{ display:grid; grid-template-columns:1fr 330px; gap:34px; align-items:start; }
.kt-form{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:24px 22px 26px; box-shadow:var(--cien); min-width:0; }
.kt-bok{ background:var(--akcent-jasny); border-radius:16px; padding:22px 20px; }
.kt-bok h3{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:18px; margin:0 0 10px; }
.kt-bok ul{ margin:0 0 14px; padding-left:18px; }
.kt-bok li{ font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:6px; }
.kt-bok p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }
.kt-bok p + h3{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(174,125,41,.18); }

.kt-pola{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kt-pola > .kt-cala{ grid-column:1/-1; }
.kt-form .komunikat{ margin-top:16px; }
.kt-licznik{ display:block; margin-top:5px; font-size:12.5px; color:var(--muted2); text-align:right; }
.kt-srodek{ text-align:center; margin:18px 0 0; }
.kt-h2{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(24px, 3vw, 34px); line-height:1.2; margin:6px 0 20px; }
.kt-lead{ max-width:62ch; color:var(--muted); font-size:16px; line-height:1.65; margin:0 0 24px; }
.tresc-waska p.kt-nota-dol{ margin-top:22px; }

@media (max-width:900px){
  .kt-uklad{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .kt-pola{ grid-template-columns:1fr; }
}


/* ===== BLOG - LISTA (uklad sprawdzony na naszej produkcji, 14.08.2026) =======
   Rytm: ciemny pas tytulowy -> jeden wpis wyrozniony -> pigulki kategorii
   -> siatka kart -> ciemny pas CTA. Kolory i typografia Jackowo Jarosławiec: kremowe tlo,
   Bodoni Moda w naglowkach, terakota jako akcent, `--noc` na pasach. */

.bl-hero{ background:var(--noc); color:var(--noc-tekst); padding:clamp(46px,7vw,86px) 0 clamp(40px,6vw,70px); text-align:center; }
.bl-eyebrow{ margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--zloto); }
.bl-tytul{ font-family:"Lora",Georgia,serif; font-weight:400; font-style:italic; font-size:clamp(44px,7vw,78px); line-height:1; margin:0 0 14px; color:#FFFFFF; }
.bl-lead{ max-width:56ch; margin:0 auto 18px; font-size:clamp(15px,1.8vw,17px); line-height:1.7; color:var(--piasek); }
.bl-okruszki{ margin:0; font-size:13.5px; color:var(--muted2); }
.bl-okruszki a{ color:var(--piasek); }
.bl-okruszki span{ margin:0 7px; opacity:.6; }

/* --- wpis wyrozniony --- */
.bl-wyroznik{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; background:var(--bialy); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--cien); }
.bl-wyroznik-foto{ display:block; min-height:100%; }
.bl-wyroznik-foto img{ width:100%; height:100%; min-height:320px; object-fit:cover; display:block; }
.bl-wyroznik-tresc{ padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; justify-content:center; }
.bl-wyroznik-tresc h2{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(24px,2.8vw,34px); line-height:1.2; margin:0 0 12px; }
.bl-wyroznik-tresc h2 a{ color:var(--ink); }
.bl-plakietka{ align-self:flex-start; margin:0 0 14px; padding:6px 14px; border-radius:999px; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

.bl-meta{ margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--akcent-ciemny); }
.bl-meta span{ margin:0 5px; opacity:.6; }
.bl-zajawka{ margin:0 0 16px; color:var(--muted); font-size:15px; line-height:1.7; }
.bl-wiecej{ margin:0; }
.bl-wiecej a{ font-weight:700; color:var(--akcent-ciemny); }
.bl-wiecej a::after{ content:" \2192"; }

/* --- pigulki kategorii --- */
.bl-filtry{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 clamp(22px,3vw,30px); }
.bl-pig{ border:1px solid var(--line); background:var(--bialy); color:var(--ink); border-radius:999px; padding:10px 20px; min-height:var(--tap); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; }
.bl-pig.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
@media (hover:hover) and (pointer:fine){
  .bl-pig:hover{ border-color:var(--akcent); }
  .bl-pig.akt:hover{ background:var(--akcent-ciemny); }
}

/* --- siatka kart --- */
.bl-siatka{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:22px; }
.bl-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--cien); display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.bl-karta[hidden]{ display:none; }
.bl-foto{ display:block; }
.bl-foto img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.bl-tresc{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1 1 auto; }
.bl-tresc h3{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:20px; line-height:1.28; margin:0 0 10px; }
.bl-tresc h3 a{ color:var(--ink); }
.bl-tresc .bl-wiecej{ margin-top:auto; padding-top:6px; }
.bl-pusto{ margin:24px 0 0; text-align:center; color:var(--muted); }
@media (hover:hover) and (pointer:fine){
  .bl-karta:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); }
  .bl-tresc h3 a:hover, .bl-wyroznik-tresc h2 a:hover{ color:var(--akcent-ciemny); }
}

/* --- pas CTA na dole --- */
.bl-cta{ background:var(--noc); color:var(--noc-tekst); padding:clamp(44px,6vw,74px) 0; text-align:center; }
.bl-cta-tyt{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(26px,3.4vw,38px); line-height:1.2; margin:0 0 12px; color:#FFFFFF; }
.bl-cta-lead{ max-width:56ch; margin:0 auto 24px; color:var(--piasek); font-size:16px; line-height:1.65; }
.bl-cta-akcje{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0; }
.bl-cta-akcje .btn{ width:auto; flex:0 0 auto; }

@media (max-width:860px){
  .bl-wyroznik{ grid-template-columns:1fr; }
  .bl-wyroznik-foto img{ min-height:240px; }
}
@media (max-width:600px){
  .bl-cta-akcje{ flex-direction:column; align-items:stretch; }
  .bl-cta-akcje .btn{ width:100%; }
}


/* ===== KONTAKT - UKLAD SPRAWDZONY NA PRODUKCJI (14.08.2026) =================
   Ciemny pas tytulowy -> dwie kolumny (dane | formularz) -> skroty -> FAQ -> pas CTA.
   ⚠️ Reguly celuja w BEZPOSREDNIE dzieci tam, gdzie w srodku moga siedziec zagniezdzone
      <span> (np. `.nw` przy „e-mail") - selektor elementowy zlapalby je i rozbil wiersz. */

.kt-hero{ background:var(--noc); color:var(--noc-tekst); padding:clamp(44px,6.5vw,80px) 0 clamp(36px,5vw,62px); text-align:center; }
.kt-hero-eyebrow{ margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--zloto); }
.kt-hero-tytul{ font-family:"Lora",Georgia,serif; font-weight:400; font-style:italic; font-size:clamp(40px,6.5vw,72px); line-height:1; margin:0 0 14px; color:#FFFFFF; }
.kt-hero-lead{ max-width:56ch; margin:0 auto 16px; font-size:clamp(15px,1.8vw,17px); line-height:1.7; color:var(--piasek); }
.kt-okruszki{ margin:0; font-size:13.5px; color:var(--muted2); }
.kt-okruszki a{ color:var(--piasek); }
.kt-okruszki span{ margin:0 7px; opacity:.6; }

/* --- dwie kolumny: dane | formularz --- */
.kt-kolumny{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); gap:26px; align-items:start; }
.kt-lista{ display:grid; gap:12px; min-width:0; }
.kt-poz{ display:flex; gap:14px; align-items:center; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--cien); }
.kt-poz-ikona{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--akcent-jasny); display:grid; place-items:center; }
.kt-poz-ikona svg{ width:20px; height:20px; stroke:var(--akcent-ciemny); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kt-poz-etykieta{ margin:0 0 3px; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.kt-poz > div > .kt-poz-wartosc{ margin:0; font-family:"Lora",Georgia,serif; font-size:18px; line-height:1.35; color:var(--ink); }
.kt-poz-wartosc a{ color:var(--ink); }
.kt-poz-wartosc .nw{ display:inline; }
.kt-poz-mala{ margin:3px 0 0; font-size:13px; line-height:1.5; color:var(--muted); font-family:inherit; }
@media (hover:hover) and (pointer:fine){
  .kt-poz:hover{ border-color:var(--akcent); }
  .kt-poz-wartosc a:hover{ color:var(--akcent-ciemny); }
}

.kt-formbox{ background:var(--bialy); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,2.6vw,32px); box-shadow:var(--cien2); min-width:0; }

/* --- skroty pod kolumnami --- */
.kt-skroty{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px; }
.kt-skrot{ display:block; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; box-shadow:var(--cien); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.kt-skrot b{ display:block; font-size:15px; margin-bottom:5px; color:var(--ink); }
.kt-skrot span{ display:block; font-size:13.5px; line-height:1.55; color:var(--muted); }
.kt-skrot em{ display:block; margin-top:8px; font-style:normal; font-size:13.5px; font-weight:700; color:var(--akcent-ciemny); }
.kt-skrot em::after{ content:" \2192"; }
@media (hover:hover) and (pointer:fine){
  .kt-skrot:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); }
}

/* --- ciemny pas na dole --- */
.kt-cta{ background:var(--noc); color:var(--noc-tekst); padding:clamp(40px,5.5vw,68px) 0; text-align:center; }
.kt-cta-tyt{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(24px,3.2vw,34px); line-height:1.2; margin:0 0 10px; color:#FFFFFF; }
.kt-cta-lead{ max-width:54ch; margin:0 auto 22px; color:var(--piasek); font-size:15.5px; line-height:1.65; }
.kt-cta-akcje{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0; }
.kt-cta-akcje .btn{ width:auto; flex:0 0 auto; }

@media (max-width:900px){
  .kt-kolumny{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .kt-cta-akcje{ flex-direction:column; align-items:stretch; }
  .kt-cta-akcje .btn{ width:100%; }
}


/* ===== HERO PODSTRON (14.08.2026) ============================================
   Jeden komponent dla wszystkich podstron - wczesniej kazda zaczynala sie samym
   tekstem i po wejsciu z menu wygladala jak dokument, a nie kolejny ekran sklepu.
   ⚠️ Welon jest PODWOJNY (gradient + plaska warstwa), bo samo przyciemnienie nie
      wystarcza przy jasnych kadrach - bialy tekst schodzil ponizej 10:1. */

.pod-hero{ position:relative; isolation:isolate; padding:clamp(52px,7vw,96px) 0 clamp(44px,6vw,76px); text-align:center; color:#fff; background:var(--noc); overflow:hidden; }
.pod-hero-foto{ position:absolute; inset:0; z-index:-2; }
.pod-hero-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.pod-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(24,17,11,.80) 0%, rgba(24,17,11,.62) 45%, rgba(24,17,11,.84) 100%); }
.pod-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 80% at 50% 50%, rgba(24,17,11,.50) 0%, rgba(24,17,11,.20) 70%, rgba(24,17,11,.16) 100%); }
.pod-hero-tresc{ position:relative; }
.pod-hero-eyebrow{ margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--zloto); }
.pod-hero-tytul{ font-family:"Lora",Georgia,serif; font-weight:400; font-style:italic; font-size:clamp(38px,6vw,68px); line-height:1.04; margin:0 0 14px; color:#FFFFFF; }
.pod-hero-tytul--zwykly{ font-size:clamp(30px,4.4vw,48px); }
.pod-hero-tytul em{ font-style:normal; color:var(--zloto); }
.pod-hero-lead{ max-width:58ch; margin:0 auto 16px; font-size:clamp(15px,1.8vw,17.5px); line-height:1.7; color:var(--noc-tekst); }
.pod-hero-okruszki{ margin:0; font-size:13.5px; color:var(--piasek); }
.pod-hero-okruszki a{ color:var(--noc-tekst); }
.pod-hero-okruszki span{ margin:0 7px; opacity:.6; }
@media (hover:hover) and (pointer:fine){
  .pod-hero-okruszki a:hover{ color:#fff; }
}

/* Sekcja tuz pod hero nie potrzebuje juz gornego oddechu - hero go daje. */
.pod-hero + .sekcja{ padding-top:clamp(40px,5vw,64px); }


/* --- PANEL KLIENTA: poprawki 14.08.2026 -------------------------------------
   1) „Wyloguj sie" kleil sie do powitania - `.sklep-gora` to flex bez rozsuniecia.
   2) „Produkty w sklepie" jest <a>, a reguly menu celowaly w `button`, wiec pozycja
      nie miala wypelnienia ani hoveru i wypadala z karty. Regula idzie po KLASIE. */
.panel-powitanie{ justify-content:space-between; align-items:flex-start; }
.panel-powitanie > div{ min-width:0; }
.panel-powitanie #wyloguj{ flex:none; margin-top:4px; }

.panel-menu .panel-zak--link{
  padding:12px 13px; border-radius:10px; font:600 14.5px 'Inter', system-ui, sans-serif;
  color:var(--muted); margin-top:6px; padding-top:16px; border-top:1px solid var(--line2);
}
.panel-menu .panel-zak--link::after{ content:" \2197"; margin-left:auto; opacity:.6; }
@media (hover:hover) and (pointer:fine){
  .panel-menu .panel-zak--link:hover{ background:var(--kremowy2); color:var(--akcent-ciemny); }
}


/* --- PANEL: krotkie pola parami ---------------------------------------------
    zostalo dodane pod KASE, gdzie kazde pole
   ma isc przez cala szerokosc. W panelu dawalo to dziewiec pol w jednej kolumnie
   („Dane i adresy" ciagnely sie przez dwa ekrany). Tu wracamy do siatki dwukolumnowej;
   pola oznaczone  (ulica, uwagi) dalej biora caly rzad. */
.panel-sekcja .formularz > .pole{ grid-column:auto; }
.panel-sekcja .formularz > .pole.szeroko{ grid-column:1/-1; }


/* Nota pod kontem demonstracyjnym stala 5 px pod przyciskiem - kontrola jakosci slusznie
   to lapie, bo tekst kleil sie do bloku nad soba. */
.demo-konta .nota{ margin-top:12px; }


/* ===== EDYTOR PRODUKTU (uklad jak w panelu Shopify, 14.08.2026) ===============
   Pelny ekran zamiast bocznej szuflady: ciemny przyklejony pasek zapisu, pod nim
   dwie kolumny kart. `panel-produktow.js` otwiera to klasa `.open` - te same reguly
   pokazywania, co szuflada, tylko element zajmuje caly ekran.
   ⚠️ Kolejnosc ma znaczenie: te reguly musza byc PO `.szuflada`, bo nadpisuja
      szerokosc, pozycje i przesuniecie bocznego panelu. */

.pe-edytor{
  position:fixed; inset:0; width:100%; max-width:none; transform:none;
  background:var(--kremowy2); z-index:120; display:none; overflow:auto;
  border-radius:0; box-shadow:none;
}
.pe-edytor.open{ display:block; transform:none; }

.pe-pasek{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:14px;
  background:var(--noc); color:var(--noc-tekst); padding:12px clamp(14px,3vw,26px);
}
.pe-wroc{ flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:9px; background:rgba(255,255,255,.10); color:var(--noc-tekst); cursor:pointer; }
.pe-wroc svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pe-stan{ margin:0; font-weight:700; font-size:15px; }
.pe-akcje{ margin-left:auto; display:flex; gap:10px; }
.pe-btn{ border:1px solid rgba(255,255,255,.28); background:transparent; color:var(--noc-tekst); border-radius:9px; padding:9px 16px; font:600 14px 'Inter', system-ui, sans-serif; cursor:pointer; min-height:40px; }
.pe-btn--zapisz{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
@media (hover:hover) and (pointer:fine){
  .pe-wroc:hover{ background:rgba(255,255,255,.18); }
  .pe-btn:hover{ background:rgba(255,255,255,.12); }
  .pe-btn--zapisz:hover{ background:var(--akcent-ciemny); border-color:var(--akcent-ciemny); }
}

.pe-plocho{ padding:clamp(18px,3vw,32px) clamp(14px,3vw,26px) 60px; }
.pe-uklad{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; max-width:1180px; margin-inline:auto; }
.pe-glowna, .pe-bok{ display:grid; gap:16px; min-width:0; }

/* ⛔ PRZYKLEJONA JEST CALA KOLUMNA, nie sam podglad. Element `sticky` jedzie tylko
   w granicach rodzica - przyklejony podglad wewnatrz zwyklej kolumny zatrzymalby sie
   po kilkudziesieciu pikselach i problem zostalby ten sam.
   ⚠️ Wlasne przewijanie w srodku, bo podglad karty produktu bywa wyzszy od ekranu. */
@media (min-width:981px){
  .pe-bok{ position:sticky; top:14px; align-self:start;
    max-height:calc(100vh - 96px); overflow-y:auto; overscroll-behavior:contain;
    padding-right:4px; }
  .pe-bok::-webkit-scrollbar{ width:8px; }
  .pe-bok::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
}
/* Oczko w pasku edytora - jedyna droga do podgladu, gdy kolumny ustawia sie
   jedna pod druga i podglad zjedzie poza ekran. */
.pe-btn--oko{ display:inline-flex; align-items:center; gap:7px; }
.pe-btn--oko svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.pe-btn--oko[aria-expanded="false"] svg{ opacity:.5; }
@media (max-width:600px){ .pe-btn--oko span{ display:none; } }

.pe-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:20px 20px 22px; box-shadow:var(--cien); }
.pe-tyt{ margin:0 0 14px; font-family:'Inter', system-ui, sans-serif; font-size:15px; font-weight:700; color:var(--ink); }
.pe-karta--groza{ border-color:rgba(174,125,41,.28); }

.pe-pole{ display:block; margin-bottom:16px; }
.pe-pole:last-child{ margin-bottom:0; }
.pe-pole > span{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); }
.pe-pole input, .pe-pole select, .pe-pole textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--kremowy);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; min-height:46px;
}
.pe-pole textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.pe-pole input:focus, .pe-pole select:focus, .pe-pole textarea:focus{ outline:2px solid var(--akcent); outline-offset:1px; }
.pe-pole small{ display:block; margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--muted2); }
.pe-rzad{ display:flex; gap:16px; flex-wrap:wrap; }
.pe-pole--waska{ flex:0 0 220px; margin-bottom:0; }
.pe-pole--rosnie{ flex:1 1 260px; margin-bottom:0; }
.pe-nota{ margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted2); }

.pe-kwota{ position:relative; display:block; }
.pe-kwota em{ position:absolute; right:13px; top:50%; transform:translateY(-50%); font-style:normal; font-size:14px; color:var(--muted2); }
.pe-kwota input{ padding-right:34px; }

.pe-media{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.pe-media-podglad{ flex:none; width:104px; height:104px; border-radius:12px; border:1px dashed var(--line); background:var(--kremowy) center/cover no-repeat; }
.pe-media-podglad.pusty::after{ content:"bez zdjęcia"; display:grid; place-items:center; height:100%; font-size:11.5px; color:var(--muted2); text-align:center; }

.pe-przelacznik{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line2); font-size:14.5px; cursor:pointer; }
.pe-karta > .pe-przelacznik:first-of-type{ border-top:0; padding-top:0; }
.pe-przelacznik input{ flex:none; width:20px; height:20px; accent-color:var(--akcent); }

.pe-serp{ background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:14px 16px; }
.pe-serp-url{ margin:0 0 4px; font-size:12.5px; color:var(--muted2); }
.pe-serp-tytul{ margin:0 0 4px; font-size:17px; line-height:1.3; color:#1a3ba3; }
.pe-serp-opis{ margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); }

.pe-komunikat{ grid-column:1/-1; margin:0; }

@media (max-width:980px){
  .pe-uklad{ grid-template-columns:1fr; }
  .pe-bok{ order:-1; }
}
@media (max-width:600px){
  .pe-akcje{ gap:8px; }
  .pe-btn{ padding:9px 12px; }
  .pe-stan{ font-size:14px; }
}


/* ===== PANEL SKLEPU (obsluga: zamowienia, klienci, produkty) 14.08.2026 ========
   Uklad bierze z panelu klienta (`.panel-uklad`, `.panel-menu`, `.panel-sekcja`) -
   ten sam sklep, ten sam jezyk wizualny. Tutaj tylko to, czego panel klienta nie ma:
   kafle liczb, filtry etapow, tabele i okno szczegolow zamowienia. */

.ad-kafle{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr)); gap:12px; margin:18px 0 0; }
.ad-kafel{ background:var(--kremowy); border:1px solid var(--line2); border-radius:14px; padding:16px 16px 14px; }
.ad-kafel b{ display:block; font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(22px,2.6vw,28px); line-height:1.1; color:var(--ink); }
.ad-kafel span{ display:block; margin-top:6px; font-size:13.5px; font-weight:700; color:var(--ink); }
.ad-kafel small{ display:block; margin-top:2px; font-size:12px; line-height:1.45; color:var(--muted); }

.ad-podtytul{ margin:26px 0 12px; font-family:"Inter",system-ui,sans-serif; font-size:15px; font-weight:700; }
.ad-lista{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ad-wiersz{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:12px 14px; font:inherit; color:var(--ink); cursor:pointer; }
.ad-wiersz-nr{ flex:1 1 auto; font-weight:700; font-size:14.5px; min-width:0; }
.ad-wiersz-nr small{ display:block; font-weight:400; font-size:13px; color:var(--muted); }
.ad-wiersz-kwota{ font-family:"Lora",Georgia,serif; font-size:16px; white-space:nowrap; }
.ad-pusto{ color:var(--muted); font-size:14px; padding:14px 0; }

.ad-filtry{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 12px; }
.ad-filtr{ border:1px solid var(--line); background:var(--bialy); color:var(--ink); border-radius:999px; padding:8px 16px; min-height:40px; font:600 13.5px "Inter",system-ui,sans-serif; cursor:pointer; }
.ad-filtr.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
.ad-licznik{ margin:0 0 10px; font-size:13px; color:var(--muted2); }
.ad-tabela td{ vertical-align:top; }
.ad-kwota{ font-family:"Lora",Georgia,serif; font-size:16px; white-space:nowrap; }
.ad-akcje-sekcji{ margin:16px 0 0; }

.ad-szczegoly{ margin-top:20px; background:var(--kremowy); border:1px solid var(--line); border-radius:16px; padding:20px; }
.ad-szczegoly-gora{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; }
.ad-szczegoly-gora h3{ margin:0; font-size:18px; }
.ad-meta{ margin:0 0 16px; font-size:13.5px; color:var(--muted); }
.ad-dwie{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.ad-dane{ margin:4px 0 0; font-size:14px; line-height:1.6; }
.ad-pozycje{ list-style:none; margin:0 0 12px; padding:0; }
.ad-pozycje li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line2); font-size:14px; }
.ad-pozycje li span:first-child{ flex:1 1 auto; min-width:0; }
.ad-pozycje small{ display:block; color:var(--muted); font-size:12.5px; }
.ad-suma{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px; color:var(--muted); }
.ad-suma--razem{ border-top:1px solid var(--line); margin-top:4px; padding-top:12px; color:var(--ink); font-size:15px; }
.ad-suma--razem b{ font-family:"Lora",Georgia,serif; font-size:19px; }
.ad-etap{ margin:18px 0 8px; }
.ad-etapy{ display:flex; flex-wrap:wrap; gap:8px; }
.ad-etap-btn{ border:1px solid var(--line); background:var(--bialy); color:var(--ink); border-radius:999px; padding:8px 15px; min-height:40px; font:600 13.5px "Inter",system-ui,sans-serif; cursor:pointer; }
.ad-etap-btn.akt{ background:var(--akcent-jasny); border-color:var(--akcent); color:var(--akcent-ciemny); }
.ad-przesylka{ margin:16px 0 0; max-width:340px; }
.ad-akcje-szcz{ margin:14px 0 0; }
@media (hover:hover) and (pointer:fine){
  .ad-wiersz:hover, .ad-filtr:hover, .ad-etap-btn:hover{ border-color:var(--akcent); }
}
@media (max-width:640px){
  .ad-dwie{ grid-template-columns:1fr; }
}


/* --- edytor produktu: nowe bloki (galeria, opcje, szczegoly, dodatki) 14.08 --- */
.pe-mini{ display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 16px; }
.pe-mini span{ width:56px; height:56px; border-radius:8px; border:1px solid var(--line); background:var(--kremowy) center/cover no-repeat; }
.pe-netto{ margin:10px 0 0; font-size:13.5px; font-weight:700; color:var(--akcent-ciemny); }
.pe-etykieta{ margin:18px 0 8px; }
.pe-opcje{ display:grid; gap:10px; }
.pe-opcja{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 40px; gap:10px; align-items:end; background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:12px; }
.pe-opcja .pe-pole{ margin-bottom:0; }
.pe-opcja-usun{ width:40px; height:46px; border:1px solid var(--line); background:var(--bialy); border-radius:10px; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; }
.pe-siatka2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pe-siatka2 .pe-pole{ margin-bottom:0; }
.pe-dodatki .pe-przelacznik small{ display:block; font-size:12.5px; color:var(--muted2); font-weight:400; }
@media (hover:hover) and (pointer:fine){
  .pe-opcja-usun:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); }
}
@media (max-width:700px){
  .pe-opcja{ grid-template-columns:1fr; }
  .pe-opcja-usun{ width:100%; }
  .pe-siatka2{ grid-template-columns:1fr; }
}


/* ===== POWLOKA PANELU SKLEPU (uklad jak w panelu Shopify, 14.08.2026) =========
   Ciemny pasek z wyszukiwarka, stale menu z lewej, tresc w kartach z naglowkiem
   i akcjami po prawej. Kolory nasze - panel ma wygladac jak czesc tego sklepu,
   a nie jak zrzut z cudzego systemu. */

/* ⛔ KOLUMNA FLEX jest tu tresciowa, nie kosmetyczna. Ciemny pas menu to gradient
   na `.sa-uklad` (nizej), wiec konczy sie tam, gdzie konczy sie TRESC podstrony.
   Bez `flex` na rodzicu „Rabaty" i „Kategorie" urywaly pas w polowie ekranu.
   ⚠️ `100dvh` idzie PO `100vh` jako poprawka na telefony: `vh` liczy sie tam wzgledem
      ekranu z ROZWINIETYM paskiem adresu, wiec strona podskakuje przy przewijaniu. */
.sa{ background:var(--kremowy2); min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; }
.sa-pasek{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:16px;
  background:var(--noc); color:var(--noc-tekst); padding:10px clamp(14px,2.5vw,22px); }
.sa-marka{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; color:#fff; text-decoration:none; }
.sa-marka .sa-marka-dopisek{ font-weight:400; color:var(--muted2); }   /* 8,1:1 na --noc; `.mute` mialby 1,8:1 */
.sa-marka svg{ width:20px; height:20px; stroke:var(--zloto); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sa-szukaj{ flex:1 1 auto; max-width:520px; margin-inline:auto; position:relative; }
.sa-szukaj input{ width:100%; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; color:var(--noc-tekst); font:inherit; font-size:14px; padding:9px 13px 9px 36px; min-height:40px; }
.sa-szukaj input::placeholder{ color:var(--muted2); }
.sa-szukaj svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  stroke:var(--muted2); fill:none; stroke-width:1.9; }
.sa-konto{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--piasek); }
.sa-awatar{ width:30px; height:30px; border-radius:8px; background:var(--akcent); color:#fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:700; }
.sa-wyloguj{ border:1px solid rgba(255,255,255,.24); background:transparent; color:var(--noc-tekst);
  border-radius:9px; padding:7px 13px; font:600 13px 'Inter',system-ui,sans-serif; cursor:pointer; min-height:36px; }

/* `flex:1` - pudelko bierze cala wysokosc, ktora zostala pod gornym paskiem, wiec
   gradient z ciemnym pasem siega dna ekranu niezaleznie od dlugosci tresci. */
.sa-uklad{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:0; align-items:start;
  flex:1 1 auto; }
.sa-menu{ position:sticky; top:60px; align-self:start; padding:16px 12px 40px; display:grid; gap:3px; }
.sa-poz{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:none;
  border-radius:9px; padding:10px 12px; font:600 14px 'Inter',system-ui,sans-serif;
  color:var(--noc-tekst); cursor:pointer; }   /* jasny tekst na ciemnym pasku - 13,4:1 */
.sa-poz svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* Aktywna pozycja to rozjasnienie tla, nie biala pigulka - na ciemnym pasku biale
   pole wygladaloby jak dziura. Biel na tym tle daje 12,4:1. */
.sa-poz.akt{ background:rgba(255,255,255,.10); color:#FFFFFF; box-shadow:none; }
.sa-poz .sa-licznik{ margin-left:auto; background:var(--zloto); color:var(--ink);
  border-radius:999px; padding:2px 8px; font-size:12px; }   /* 8,7:1 */
/* ⛔ „Zapytania hurtowe" i „Biblioteka grafik" maja licznik PUSTY - renderowal sie jako
   pasek 16x4 px. Na kremowym pasku byl niewidoczny (jasna terakota na kremie), na ciemnym
   zaswiecil na zloto jak plakietka bez tresci. Usterka byla wczesniej, tylko jej nie bylo widac. */
.sa-poz .sa-licznik:empty{ display:none; }
@media (hover:hover) and (pointer:fine){
  .sa-poz:hover{ background:rgba(255,255,255,.08); color:#FFFFFF; }
  .sa-wyloguj:hover{ background:rgba(255,255,255,.12); }
}

.sa-tresc{ padding:clamp(16px,2.4vw,26px) clamp(14px,2.4vw,26px) 60px; min-width:0; }
.sa-naglowek{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.sa-naglowek h2{ margin:0; font-size:clamp(21px,2.6vw,26px); }
.sa-naglowek .sa-akcje{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.sa-opis{ margin:-8px 0 16px; font-size:14px; line-height:1.6; color:var(--muted); max-width:78ch; }
.sa-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:18px 18px 20px; box-shadow:var(--cien); margin-bottom:16px; }
.sa-karta > h3{ margin:0 0 12px; font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:700; }
.sa-filtr-rzad{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.sa-szukajka{ flex:1 1 240px; min-width:0; }
.sa-szukajka input{ width:100%; font:inherit; font-size:14px; background:var(--kremowy);
  border:1px solid var(--line); border-radius:10px; padding:10px 13px; min-height:44px; }

@media (max-width:900px){
  .sa-uklad{ grid-template-columns:1fr; }
  .sa-menu{ position:static; display:flex; overflow-x:auto; gap:6px; padding:10px 12px; scrollbar-width:none; }
  .sa-menu::-webkit-scrollbar{ display:none; }
  /* ⚠️ Zmierzone: pozycja miala 41 px wysokosci, a prog celu dotykowego to 44 px.
     Na pasku przewijanym w bok pomylka w palec kosztuje przeskok do zlej sekcji. */
  .sa-poz{ width:auto; white-space:nowrap; min-height:44px; }
  .sa-poz .sa-licznik{ margin-left:6px; }
  .sa-szukaj{ display:none; }
}

/* --- panel sklepu: tresc w kartach (Shopify oddziela naglowek od listy) ------ */
.sa-tresc .panel-sekcja h2{ font-size:clamp(21px,2.6vw,26px); margin:0 0 6px; }
.sa-tresc .panel-sekcja > .mute{ margin:0 0 16px; font-size:14px; line-height:1.6; max-width:78ch; }
.sa-tresc .tabela-otoczka,
.sa-tresc .pp-tabela-okno{
  background:var(--bialy); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--cien); overflow:hidden; overflow-x:auto;
}
.sa-tresc .tabela{ margin:0; }
.sa-tresc .ad-filtry{ margin-top:0; }
.sa-tresc .pp-gora{ margin-bottom:14px; }
.sa-tresc .ad-kafle{ margin-top:0; }
.sa-tresc .ad-szczegoly{ background:var(--bialy); box-shadow:var(--cien); }

/* --- panel sklepu: kreska przy menu ----------------------------------------- */
.sa-uklad{
  background:linear-gradient(to right, var(--noc) 0 236px, transparent 236px);
}
@media (max-width:900px){
  .sa-uklad{ background:none; }
  .sa-menu{ background:var(--noc); border-bottom:0; }
}

/* --- panel sklepu: pasek i tabele na telefonie ------------------------------ */
.sa-marka, .sa-wyloguj, .sa-konto span{ white-space:nowrap; }
/* bez tego kolumny scieraja sie do jednej litery w pionie - okno i tak przewija w bok */
.sa-tresc .ad-tabela{ min-width:620px; }
.sa-tresc .ad-tabela th{ white-space:nowrap; }   /* naglowki nie lamia sie na „SZTU / K" */
@media (max-width:900px){
  .sa-pasek{ padding:8px 12px; gap:10px; }
  .sa-marka-dopisek{ display:none; }
  .sa-konto .tb-chowaj{ display:none; }
  .sa-tresc{ padding-inline:12px; }
}


/* ===== DLA FIRM v2 - przebudowa 14.08.2026 ==================================
   Podstrona B2B mowi tym samym jezykiem co strona glowna: `.lead.srodek`, kafle
   ze zdjeciem, dwie kolumny tresc+zdjecie, `.reveal`. Do tego trzy bloki, ktorych
   nie ma nigdzie indziej: podglad produktu firmowego, zakladki sytuacji i os krokow. */

/* --- akcje w hero (zamiast osobnej sekcji z przyciskami w pustce) ----------- */
.pod-hero-akcje{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:24px 0 0; }
.pod-hero-akcje .btn{ width:auto; flex:0 0 auto; }
.pod-hero-akcje + .pod-hero-okruszki{ margin-top:22px; }
.pod-hero-akcje .btn--obrys{ background:rgba(17,36,26,.55); border-color:rgba(255,255,255,.8); color:#fff; }
@media (hover:hover) and (pointer:fine){
  .pod-hero-akcje .btn--obrys:hover{ background:rgba(17,36,26,.78); border-color:#fff; }
}

/* --- dwie kolumny tresc + zdjecie (odpowiednik `.duet` ze strony glownej) --- */
.df-duet{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,54px); align-items:center; }
.df-duet h2{ font-size:clamp(26px,4vw,42px); margin-bottom:14px; }
.df-duet-foto{ border-radius:16px; overflow:hidden; background:var(--kremowy2); }
.df-duet-foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
@media (max-width:1000px){ .df-duet{ grid-template-columns:1fr; } .df-duet-foto{ order:-1; } }

/* --- ZAKLADKI SYTUACJI: kafle ze strony glownej pelnia role przelacznika ---- */
.kafel--btn{ border:0; padding:0; width:100%; cursor:pointer; font:inherit; text-align:left; }
.kafel--btn[aria-pressed="true"]{ box-shadow:0 0 0 3px var(--akcent); }
.kafel--btn[aria-pressed="true"] span{ color:#fff; }
.dfz-panel{ margin-top:clamp(18px,2.6vw,26px); background:var(--bialy); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--cien); overflow:hidden; display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr); align-items:stretch; }
.dfz-panel > .dfz-foto{ background:var(--kremowy2); }
.dfz-foto img{ width:100%; height:100%; min-height:220px; object-fit:cover; display:block; }
.dfz-tresc{ padding:clamp(20px,2.6vw,30px); }
.dfz-tresc h3{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:clamp(21px,2.6vw,27px); margin:0 0 10px; }
.dfz-tresc p{ margin:0 0 14px; color:var(--muted); font-size:15.5px; line-height:1.7; }
.dfz-lista{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.dfz-lista li{ background:var(--kremowy); border:1px solid var(--line2); border-radius:100px;
  padding:7px 14px; font-size:13.5px; color:var(--ink); }
.dfz-akcja{ margin:0; }
/* Bez skryptu widac WSZYSTKIE cztery opisy - zwijanie wlacza dopiero JS.
   ⚠️ Nie wystarczy zwykla regula: w arkuszu stoi globalne `[hidden]{display:none !important}`,
   wiec fail-safe musi byc rowniez `!important` i wisiec na `.bez-js` (app.js zdejmuje
   te klase po starcie skryptu). */
body.bez-js .dfz-panel[hidden]{ display:grid !important; }
@media (max-width:820px){
  .dfz-panel{ grid-template-columns:1fr; }
  .dfz-foto img{ min-height:200px; max-height:260px; }
}

/* --- KONFIGURATOR PRODUKTU FIRMOWEGO ------------------------------------------ */
.dfk{ display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:clamp(22px,3.4vw,44px); align-items:start; }
/* Podglad jedzie razem z ustawieniami - prawa kolumna jest o ~700 px dluzsza,
   wiec bez tego pod produktem zostawala pusta plama na pol ekranu. */
/* 132 px = wysokosc przyklejonego naglowka (118) plus oddech; ta sama liczba,
   co `scroll-padding-top` w arkuszu - inaczej podglad chowa sie pod menu. */
@media (min-width:901px){ .dfk-lewa{ position:sticky; top:132px; } }
.dfk-podglad{ position:relative; border-radius:18px; overflow:hidden; background:var(--kremowy2); box-shadow:var(--cien2); }
.dfk-podglad img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.dfk-arkusz{ position:absolute; left:clamp(14px,5%,28px); right:clamp(14px,5%,28px); bottom:clamp(14px,5%,28px);
  background:rgba(255,255,255,.95); border-radius:14px; padding:16px 16px 18px; text-align:center; }
.dfk-znak{ width:66px; height:66px; margin:0 auto 12px; border:1px dashed var(--line);
  border-radius:12px; display:grid; place-items:center; text-align:center;
  font-size:9.5px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:6px; }
.dfk-nazwa{ display:block; font-family:"Lora",Georgia,serif; font-weight:500;
  font-size:clamp(19px,2.4vw,25px); line-height:1.15; color:var(--ink); word-break:break-word; }
.dfk-haslo{ display:block; margin-top:6px; font-size:13px; letter-spacing:.06em; color:var(--muted); word-break:break-word; }
.dfk-plakietka{ position:absolute; top:14px; left:14px; background:rgba(31,36,33,.82); color:#fff;
  border-radius:100px; padding:6px 13px; font-size:12px; font-weight:600; }

.dfk-prawa{ display:grid; gap:16px; min-width:0; }
/* ⚠️ Bez `min-width:0` na DZIECIACH pasek linii rozpychal cala strone w prawo:
   element siatki domyslnie nie schodzi ponizej szerokosci swojej tresci. */
.dfk-prawa > *{ min-width:0; }
.dfk-pasek{ min-width:0; }
.dfk-krok{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:20px 20px 22px; box-shadow:var(--cien); }
.dfk-tyt{ margin:0 0 12px; font-family:"Lora",Georgia,serif; font-weight:500; font-size:20px; }

.dfk-pasek{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; }
.dfk-pasek::-webkit-scrollbar{ height:6px; }
.dfk-pasek::-webkit-scrollbar-thumb{ background:var(--line); border-radius:100px; }
.dfk-linia{ flex:0 0 128px; scroll-snap-align:start; border:1px solid var(--line); border-radius:14px;
  background:var(--kremowy); padding:8px 8px 10px; cursor:pointer; font:inherit; color:var(--ink); text-align:left;
  transition:border-color .18s ease, background .18s ease, transform .18s ease; }
.dfk-linia img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block; margin-bottom:8px; }
.dfk-linia b{ display:block; font-size:13px; line-height:1.3; }
.dfk-linia small{ display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.dfk-linia.akt{ border-color:var(--akcent); background:var(--akcent-jasny); box-shadow:inset 0 0 0 1px var(--akcent); }
.dfk-linia.akt small{ color:var(--akcent-ciemny); }
@media (hover:hover) and (pointer:fine){
  .dfk-linia:hover{ border-color:var(--akcent); transform:translateY(-2px); }
}

.dfk-pola{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dfk-pola .pole{ margin:0; }
@media (max-width:620px){ .dfk-pola{ grid-template-columns:1fr; } }

.dfk-tabela{ margin-top:14px; border-top:1px solid var(--line2); padding-top:10px; }
.dfk-tabela > summary{ cursor:pointer; font-weight:600; font-size:14px; color:var(--akcent-ciemny);
  list-style:none; min-height:var(--tap); display:flex; align-items:center; gap:8px; }
.dfk-tabela > summary::-webkit-details-marker{ display:none; }
.dfk-tabela > summary::after{ content:'+'; font-size:18px; }
.dfk-tabela[open] > summary::after{ content:'-'; }

.dfk-podsum{ background:var(--akcent-jasny); border:1px solid var(--akcent); border-radius:16px; padding:20px 20px 22px; }
.dfk-zdanie{ margin:0 0 14px; font-size:16px; line-height:1.65; color:var(--ink); }
.dfk-zdanie b{ font-weight:700; }
.dfk-cena{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin:0 0 16px;
  padding-top:14px; border-top:1px solid rgba(174,125,41,.25); font-size:14.5px; color:var(--akcent-ciemny); }
.dfk-cena b{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:19px; color:var(--ink); }
.dfk-akcje{ margin:0; display:flex; justify-content:center; }
.dfk-podsum .nota{ text-align:center; max-width:64ch; margin-inline:auto; }

@media (max-width:900px){ .dfk{ grid-template-columns:1fr; } }

/* --- OS PIECIU KROKOW (klikana) -------------------------------------------- */
/* ⚠️ Pasek, ktory jedzie w bok, MUSI byc wygaszony na krawedzi - inaczej kontrola jakosci
   melduje „ucinany pasek", a klient nie widzi, ze jest tam cos dalej. Klase
   `.pasek-przewijany` obsluguje juz `app.js`: przy koncu przewijania zdejmuje maske. */
.pasek-przewijany{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);
}
.pasek-przewijany[data-koniec]{ -webkit-mask-image:none; mask-image:none; }

.dfs-tor{ display:flex; gap:6px; overflow-x:auto; padding:2px 2px 10px; }
.dfs-krok{ flex:1 1 0; min-width:132px; border:0; background:none; cursor:pointer; font:inherit;
  text-align:center; padding:0; color:var(--muted); }
.dfs-kolo{ width:44px; height:44px; margin:0 auto 8px; border-radius:50%; background:var(--kremowy2);
  border:1px solid var(--line); display:grid; place-items:center; font-weight:700; font-size:15px; color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease; }
.dfs-krok b{ display:block; font-size:13.5px; line-height:1.35; color:var(--ink); font-weight:600; }
.dfs-krok.akt .dfs-kolo{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
.dfs-krok.zrobiony .dfs-kolo{ background:var(--akcent-jasny); border-color:var(--akcent); color:var(--akcent-ciemny); }
@media (hover:hover) and (pointer:fine){
  .dfs-krok:hover .dfs-kolo{ border-color:var(--akcent); }
}
.dfs-pasek{ height:4px; border-radius:100px; background:var(--kremowy2); overflow:hidden; margin:0 0 18px; }
.dfs-pasek i{ display:block; height:100%; background:var(--akcent); border-radius:100px; transition:width .35s ease; }
.dfs-opisy{ display:grid; gap:12px; }
.dfs-opis{ background:var(--bialy); border:1px solid var(--line); border-radius:16px;
  padding:20px 22px 22px; box-shadow:var(--cien); }
.dfs-opis h3{ font-family:"Lora",Georgia,serif; font-weight:500; font-size:21px; margin:0 0 8px; }
.dfs-opis p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.7; }
.dfs-opis p + p{ margin-top:10px; }
/* bez skryptu widac wszystkie piec opisow - jak wyzej, przez `.bez-js` */
body.bez-js .dfs-opis[hidden]{ display:block !important; }

/* --- lista „czego potrzebujemy" z podswietleniem wiersza ------------------- */
.df-wymagania{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.df-wymagania li{ background:var(--bialy); border:1px solid var(--line2); border-radius:12px;
  padding:13px 16px; font-size:15px; line-height:1.6; color:var(--muted);
  transition:border-color .18s ease, transform .18s ease; }
.df-wymagania li b{ color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .df-wymagania li:hover{ border-color:var(--akcent); transform:translateX(3px); }
  .df-box:hover{ border-color:var(--akcent); }
}
.df-box{ transition:border-color .18s ease; }


/* --- galeria produktu: do 12 slotow z podgladem (14.08.2026) ---------------- */
.pe-gal-gora{ display:flex; align-items:baseline; gap:10px; margin:18px 0 8px; }
.pe-gal-tyt{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pe-gal-licznik{ margin-left:auto; font-size:12.5px; color:var(--muted); }
.pe-galeria{ display:grid; gap:8px; }
.pe-slot{ display:flex; align-items:center; gap:10px; background:var(--kremowy);
  border:1px solid var(--line2); border-radius:12px; padding:8px 10px; }
.pe-slot-nr{ flex:none; width:22px; text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); }
.pe-slot-foto{ flex:none; width:46px; height:46px; border-radius:9px; border:1px solid var(--line);
  background:var(--bialy) center/cover no-repeat; }
.pe-slot-foto.pusty{ background:var(--kremowy2); border-style:dashed; }
.pe-slot-pole{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.pe-slot-pole input{ min-height:40px; font-size:13.5px; }
.pe-slot-akcje{ flex:none; display:flex; gap:4px; }
.pe-slot-btn{ width:32px; height:40px; border:1px solid var(--line); background:var(--bialy);
  border-radius:9px; font-size:14px; line-height:1; color:var(--muted); cursor:pointer; }
.pe-slot-usun{ font-size:18px; }
.pe-gal-akcje{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 0; }
.pe-gal-akcje .btn[disabled]{ opacity:.5; cursor:not-allowed; }
.pe-gal-info{ font-size:12.5px; color:var(--akcent-ciemny); }
.pe-pod-gal{ display:block; margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--muted); }
@media (hover:hover) and (pointer:fine){
  .pe-slot:hover{ border-color:var(--line); }
  .pe-slot-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); }
}
@media (max-width:620px){
  .pe-slot{ flex-wrap:wrap; }
  .pe-slot-pole{ flex:1 1 100%; order:3; }
}


/* --- wgrywanie zdjec z dysku (14.08.2026) ---------------------------------- */
.pe-media-podglad{ position:relative; cursor:pointer; display:grid; place-items:center;
  background-size:cover; background-position:center; }
.pe-media-znak{ font-size:11px; line-height:1.35; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-align:center; }
.pe-media-podglad.ma-foto .pe-media-znak{ display:none; }
.pe-media-podglad.nad{ border-color:var(--akcent); box-shadow:inset 0 0 0 2px var(--akcent); }
.pe-slot-foto{ cursor:pointer; }
.pe-slot-foto.nad{ border-color:var(--akcent); box-shadow:0 0 0 2px var(--akcent); }
.pe-plik-chip{ display:block; background:var(--akcent-jasny); border:1px solid var(--akcent);
  border-radius:10px; padding:11px 14px; font-size:13.5px; font-weight:600; color:var(--akcent-ciemny);
  min-height:var(--tap); display:flex; align-items:center; }
.pe-zrzut{ display:grid; gap:3px; justify-items:center; text-align:center; cursor:pointer;
  margin-top:10px; padding:16px 14px; border:1px dashed var(--line); border-radius:12px;
  background:var(--kremowy); transition:border-color .18s ease, background .18s ease; }
.pe-zrzut b{ font-size:14px; }
.pe-zrzut span{ font-size:12.5px; color:var(--muted); }
.pe-zrzut.nad{ border-color:var(--akcent); background:var(--akcent-jasny); }
@media (hover:hover) and (pointer:fine){
  .pe-zrzut:hover{ border-color:var(--akcent); }
  .pe-media-podglad:hover{ border-color:var(--akcent); }
}


/* --- wlasne wiersze szczegolow produktu (14.08.2026) ------------------------
   Jeden wiersz w edytorze = jeden wiersz w tabeli na karcie produktu. Nazwe wpisuje
   sklep, wiec nie ma tu zadnej listy zamknietej - sa tylko szablony do wstawienia. */
.pe-wiersze{ display:grid; gap:8px; }
.pe-wiersz{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr) auto;
  gap:8px; align-items:center; background:var(--kremowy); border:1px solid var(--line2);
  border-radius:12px; padding:8px 10px; }
.pe-wiersz .pe-pole{ margin-bottom:0; }
.pe-wiersz input{ min-height:42px; font-size:14px; }
.pe-wiersz-akcje{ display:flex; gap:4px; }
.pe-wiersz-btn{ width:32px; height:42px; border:1px solid var(--line); background:var(--bialy);
  border-radius:9px; font-size:14px; line-height:1; color:var(--muted); cursor:pointer; }
.pe-wiersz-usun{ font-size:18px; }
.pe-szablon{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 0; }
.pe-szablon-info{ font-size:12.5px; color:var(--muted); }
.pe-gal-tyt + .pe-wiersze{ margin-top:6px; }
@media (hover:hover) and (pointer:fine){
  .pe-wiersz-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); }
}
@media (max-width:700px){
  .pe-wiersz{ grid-template-columns:1fr auto; }
  .pe-wiersz .pe-pole--wartosc{ grid-column:1/-1; order:3; }
}


/* --- edycja zbiorcza w panelu produktow (14.08.2026) ------------------------ */
.pp-kol-zazn{ width:44px; text-align:center; }
.pp-tabela th{ white-space:nowrap; }
.pp-kol-zazn input{ width:18px; height:18px; accent-color:var(--akcent); cursor:pointer; }
/* ⚠️ Zaznaczony wiersz NIE moze miec tla --akcent-jasny: plakietka „Bestseller" stoi
   dokladnie na tym kolorze i pigulka po prostu znika (zostaje sam napis). Zaznaczenie
   robimy jasniejszym tlem i paskiem akcentu z lewej - pigulki zostaja czytelne. */
.pp-wiersz-zazn{ background:var(--kremowy); box-shadow:inset 3px 0 0 var(--akcent); }
.pp-sku{ font-size:13px; color:var(--muted); white-space:nowrap; }
.pp-zbiorczo{ background:var(--akcent-jasny); border:1px solid var(--akcent); border-radius:14px;
  padding:14px 16px 16px; margin-bottom:14px; }
.pp-zbiorczo-info{ margin:0 0 10px; font-size:14px; color:var(--akcent-ciemny); }
.pp-zbiorczo-info b{ font-size:16px; color:var(--ink); }
.pp-zbiorczo-akcje{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pp-zbiorczo-pole{ margin:0; min-width:220px; }
.pp-zbiorczo-wartosc{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pp-zbiorczo-wartosc em{ font-style:normal; font-size:13px; color:var(--akcent-ciemny); }
.pp-zbiorczo-wartosc input, .pp-zbiorczo-wartosc select{
  min-height:44px; font:inherit; font-size:14px; background:var(--bialy);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:150px; }
/* ⚠️  ma kolor --muted2 dobrany pod BIALE tlo edytora. Na tle akcentu
   spada do 2,58:1 i nota znika. To ten sam blad, co  na ciemnym pasku panelu:
   klasa przeniesiona na inne tlo bez sprawdzenia odcienia. */
.pp-zbiorczo .pe-nota{ margin-top:10px; color:var(--akcent-ciemny); }
@media (max-width:700px){
  .pp-zbiorczo-akcje{ flex-direction:column; align-items:stretch; }
  .pp-zbiorczo-wartosc{ flex-direction:column; align-items:stretch; }
}


/* --- kolka koloru i rozmiar produktu (wzor od klienta) --------------- */
.wybor-nazwa{ font-weight:600; color:var(--muted); }
.kolka{ display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 8px; }
.kolko{ width:34px; height:34px; min-width:34px; padding:0; border-radius:50%;
  border:1px solid var(--line); cursor:pointer; position:relative;
  box-shadow:inset 0 0 0 2px #fff; transition:transform .12s ease, box-shadow .12s ease; }
.kolko:hover{ transform:scale(1.06); }
/* Obwodka zamiast zmiany koloru - inaczej nie widac, ktory odcien jest wybrany. */
.kolko.akt{ box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--ink); }
.kolko:focus-visible{ outline:2px solid var(--akcent); outline-offset:3px; }
/* ⚠️ Kolko jest samym kolorem, bez napisu - musi miec pole klikania 44 px. */
.kolka::before{ content:''; }
.kolko::after{ content:''; position:absolute; inset:-5px; border-radius:50%; }
.kolko--aukcja{ display:inline-block; }

/* Rozmiar, ktorego nie ma w tym kolorze: widoczny, ale przekreslony. Kupujacy ma
   wiedziec, ze taki produkt istnieje, tylko nie w tym odcieniu.
   ⚠️ Stan „niedostepny" malujemy KOLOREM, nie przezroczystoscia: `opacity:.45` na
      tekscie --ink dawalo realnie okolo 2,8:1, czyli ponizej podlogi czytelnosci -
      a audyt tego nie widzial, bo czyta kolor obliczony, nie zlozony z przezroczystoscia. */
.chip-rozm--brak{ text-decoration:line-through; cursor:not-allowed;
  color:var(--muted); border-color:var(--muted2); }
.chip-rozm--brak:hover{ background:transparent; border-color:var(--muted2); color:var(--muted); }

/* KOLOR, KTOREGO NIE MA W WYBRANYM ROZMIARZE (klient 20.08.2026).
   Kolko zostaje widoczne i zostaje w kolejnosci Tab - kupujacy ma sie dowiedziec, ze taki
   kolor istnieje. Blokada idzie klasa, a nie atrybutem `disabled`: czesc kolek to <a>
   z aukcja, gdzie `disabled` nie dziala. */
.kolko--brak{ cursor:not-allowed;
  /* ⚠️ Welon ma PRZYGASIC, a nie zrownac: przy 62% czarny, granatowy i dwubarwny
     „magiczny" wygladaly identycznie, wiec kupujacy nie wiedzial, ktorego koloru nie ma.
     Przy 45% odcien zostaje czytelny, a nieczynnosc niosa kreska i ciemniejsza obwodka. */
  box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 40px rgba(250,246,241,.45);
  border-color:var(--muted2); }
.kolko--brak:hover{ transform:none; }
/* ⛔ Kreska KANAPKOWA - jasny pas, ciemny srodek, jasny pas. Jednokolorowa znikalaby
   na bialym, na czarnym albo na polowie kolka dwubarwnego. `::after` jest juz zajete
   przez pole dotyku 44 px, wiec kreska idzie w `::before`. */
.kolko--brak::before{ content:''; position:absolute; left:-4px; right:-4px; top:50%;
  height:6px; margin-top:-3px; border-radius:3px; transform:rotate(-45deg);
  background:linear-gradient(var(--kremowy) 0 2px, var(--noc) 2px 4px, var(--kremowy) 4px 6px); }

/* Zdanie pod kolkami: opis wariantu albo powod wygaszenia. */
.nota--kolor{ margin-top:6px; color:var(--muted); }

/* ⚠️ Ta sama zasada co przy pigulce: stan „nieczynny" ma byc KOLOREM, nie mgla na tekscie. */
.btn--nieczynny{ cursor:not-allowed; }
.nota--brak-ceny{ color:var(--akcent-ciemny); font-weight:600; }
.btn--nieczynny{ background:var(--kremowy2); border-color:var(--muted2);
  color:var(--muted); cursor:not-allowed; }
.btn--nieczynny:hover{ background:var(--kremowy2); border-color:var(--muted2); color:var(--muted); }

/* --- KOLORY PRODUKTU w edytorze (klient 20.08.2026) -------------------------
   Kazdy kolor to karta: naglowek zawsze widoczny, reszta rozwijana. Bez rozwijania
   dwanascie kolorow po piec pol dalo by sciane, po ktorej nie da sie nawigowac. */
.pe-gal-gora--kolory{ margin-top:16px; }
.pe-kolory-foto{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.pe-kolor{ border:1px solid var(--line); border-radius:12px; background:var(--bialy); }
.pe-kolor-glowa{ display:flex; align-items:center; gap:10px; padding:8px 10px; }
.pe-kolor-kropka{ width:22px; height:22px; min-width:22px; border-radius:50%;
  border:1px solid var(--line); box-shadow:inset 0 0 0 1px #fff; }
.pe-kolor-nazwa{ font-size:13.5px; color:var(--ink); font-weight:600; }
.pe-kolor-znacznik{ font-size:12.5px; color:var(--muted); }
.pe-kolor-akcje{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.pe-kolor-tresc{ border-top:1px solid var(--line); padding:12px 12px 14px;
  display:flex; flex-direction:column; gap:12px; }
.pe-kolor-tresc[hidden]{ display:none; }

/* Odcien: pole tekstowe jest ZRODLEM, paleta systemowa tylko pomaga. Odwrotnie klient
   nie mialby jak sprawdzic ani wpisac wartosci z klawiatury. */
.pe-pole--hex{ max-width:264px; }
.pe-pole .pe-hex-para{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.pe-pole .pe-hex-para input[type="text"]{ flex:1 1 auto; width:auto; min-width:0;
  min-height:44px; font:inherit; font-size:13.5px; background:var(--bialy);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.pe-pole .pe-hex-para input[type="color"]{ flex:0 0 44px; width:44px; height:44px; padding:2px;
  border:1px solid var(--line); border-radius:10px; background:var(--bialy); cursor:pointer; }
.pe-pole .pe-hex-para input.zle{ border-color:var(--akcent-ciemny); }

.pe-k-rozmiary{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0; }
.pe-k-rozmiary legend{ font-size:12.5px; color:var(--muted); padding:0 4px; }
.pe-ptaszek{ display:inline-flex; align-items:center; gap:6px; min-height:44px;
  margin-right:16px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.pe-k-rozmiary small{ display:block; font-size:12.5px; line-height:1.55; color:var(--muted2); }

.pe-k-fotki{ display:flex; flex-direction:column; gap:8px; }
.pe-k-foto-wiersz{ display:flex; align-items:center; gap:6px; }
.pe-k-foto{ flex:1; min-width:0; min-height:44px; font:inherit; font-size:13.5px;
  background:var(--bialy); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.pe-k-wklej, .pe-k-opis{ width:100%; min-height:60px; font:inherit; font-size:13.5px;
  background:var(--bialy); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; resize:vertical; }

/* Dodawanie koloru: DWA bloki, bo to dwie rozne czynnosci - „wybieram z listy sklepu"
   i „dodaje swoj". ⚠️ Szesc elementow w jednym rzedzie nie miescilo sie: paleta spadala
   pod pole, a przycisk do trzeciego wiersza. */
.pe-kolor-dodaj{ display:flex; flex-direction:column; gap:14px;
  margin-top:10px; padding:14px; border:1px dashed var(--muted2); border-radius:12px; }
.pe-kolor-dodaj-blok{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.pe-kolor-dodaj-blok--wlasny{ border-top:1px solid var(--line); padding-top:14px; }
.pe-kolor-dodaj-blok > .pe-pole{ flex:1 1 200px; margin:0; }
.pe-kolor-dodaj-blok > .pe-pole--hex{ flex:0 0 264px; }
/* Etykieta stoi nad polem, wiec przycisk rownamy do DOLU rzedu - inaczej wisi w powietrzu. */
.pe-kolor-dodaj-blok > .btn{ flex:0 0 auto; margin-bottom:1px; }
.pe-kolor-dodaj select{ min-height:44px; }
.pe-kolor-komunikat{ margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted); }
.pe-kolor-komunikat.zle{ color:var(--akcent-ciemny); font-weight:600; }

@media (max-width:700px){
  .pe-kolor-glowa{ flex-wrap:wrap; }
  .pe-kolor-akcje{ margin-left:0; width:100%; }
  .pe-kolor-znacznik{ flex:1 0 100%; }
  .pe-pole--hex{ max-width:none; flex:1 0 100%; }
  .pe-kolor-dodaj-blok > .pe-pole--hex{ flex:1 0 100%; }
  .pe-kolor-dodaj-blok > .btn{ flex:1 0 100%; }
}

/* --- ilu kupujacych ma za soba ten wzor (dane z Allegro, 14.08.2026) --------- */
.kupilo{ margin:6px 0 0; font-size:13.5px; color:var(--akcent-ciemny); }
.kupilo b{ font-size:15px; color:var(--ink); }

/* --- dodatek gratis przy zestawie produkt i dodatek (14.08.2026) -------------- */
.dodatek-cena s{ color:var(--muted); font-weight:400; margin-right:4px; }
.dodatek-gratis{ color:var(--akcent-ciemny); background:var(--akcent-jasny); border-radius:100px;
  padding:2px 9px; font-size:12.5px; font-weight:700; }

/* --- opis wybranej linii w konfiguratorze (zastapil tabele, 14.08.2026) ------ */
.dfk-opis{ margin-top:14px; padding:16px 18px; background:var(--kremowy);
  border:1px solid var(--line); border-radius:14px; }
.dfk-opis-etykieta{ margin:0; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--akcent-ciemny); }
.dfk-opis-tyt{ margin:4px 0 6px; font-size:20px; }
.dfk-opis-tresc{ margin:0; font-size:15px; line-height:1.6; color:var(--ink); }
.dfk-opis-cena{ margin:10px 0 0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dfk-opis-cena b{ font-size:22px; color:var(--akcent-ciemny); }
.dfk-opis-cena span{ font-size:12.5px; color:var(--muted); }
.dfk-opis .nota{ margin-top:10px; }

/* --- miniatura produktu w liscie panelu (wzor: BaseLinker, 14.08.2026) ------- */
/* ⚠️ Szerokosc kolumny MUSI zmiescic zdjecie RAZEM z paddingiem komorki (76+16+8),
   inaczej tabela sciska obrazek w poziomie i produkt robi sie chudy. */
.pp-kol-foto{ width:108px; }
/* Zdjecie ma byc realnie widoczne, a nie ikonka - 14.08.2026: „te zdjęcia
   produktów muszą być większe". 76 px + luzniejszy wiersz, zeby produkt dalo sie rozpoznac
   bez otwierania edytora. */
.pp-mini{ display:block; width:76px; height:76px; object-fit:cover; border-radius:10px;
  border:1px solid var(--line); background:var(--kremowy2); }
.pp-tabela td.pp-kol-foto{ padding:10px 8px 10px 16px; }
/* Produkt bez zdjecia: pusty kafelek z napisem, zeby wiersz nie skakal i zeby bylo
   widac, ze zdjecia BRAKUJE - a nie zeby udawac, ze jest. */
.pp-mini--brak{ display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:11px; line-height:1.2; color:var(--muted); padding:4px; }

/* --- SKU i wariant przy pozycji zamowienia (do pakowania, 14.08.2026) -------- */
.ad-znaki{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:3px; }
.ad-sku{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;
  letter-spacing:.02em; background:var(--kremowy2); color:var(--ink);
  border-radius:6px; padding:2px 8px; }
/* Brak symbolu to nie drobiazg - bez niego nie da sie spakowac wlasciwego produktu.
   ⚠️ To KOMUNIKAT, a nie kod, wiec nie moze byc pisany czcionka maszynowa z odstepami:
   „brak SKU" wygladalo wtedy jak dwa osobne symbole. */
.ad-sku--brak{ background:var(--bursztyn-jasny); color:var(--bursztyn-tekst); font-weight:700;
  font-family:inherit; font-size:11.5px; letter-spacing:0; }
.ad-wariant{ font-size:12px; color:var(--muted); }


/* ============================================================================
   KONFIGURATOR PRODUKTU (wzor ukladu: edytor projektu online)
   Uklad jak w programie graficznym: narzedzia po lewej, plotno na srodku,
   ustawienia i warstwy po prawej. Na telefonie kolumny ida jedna pod druga,
   a pasek narzedzi kladzie sie w poziomie nad plotnem.
   ============================================================================ */
/* Ostrzezenie o wzoru zlewajacym sie z produktem - informacja produkcyjna, nie estetyczna. */
.kf-ostrzezenie{ margin:0 auto 12px; padding:12px 16px; background:var(--bursztyn-jasny); color:var(--bursztyn-tekst);
  border:1px solid var(--bursztyn-jasny); border-radius:12px; font-size:14px; font-weight:600; line-height:1.5; }
.kf-gora{ display:flex; gap:20px; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; padding-top:34px; }
.kf-tytul{ margin:6px 0 8px; font-size:clamp(28px, 4vw, 40px); }
.kf-lead{ margin:0; max-width:56ch; color:var(--muted); line-height:1.6; }
.kf-gora-akcje{ display:flex; gap:8px; flex-wrap:wrap; }

/* ⚡ KREATOR DOSTAJE SZERSZY KONTENER NIZ RESZTA SERWISU (05.09.2026, prosba klienta:
   „niech bedzie wieksza ta ramka w ktorej znajduje sie produkt, na razie jest za ciasna”).
   `.wrap` daje 1260px, wiec srodkowa kolumna miala 720px. Przy 1400px ma 860px.
   ⛔ NIE ZMIENIAC `aspect-ratio` plotna: `.kf-pole` (ramka wzoru) jest pozycjonowane
      w PROCENTACH PUDELKA, a SVG ma viewBox 400x300. Inna proporcja pudelka wpycha SVG
      w listwy (`xMidYMid meet`) i pole wzoru rozjezdza sie z produktem. Zapas wokol
      produktu robimy w `geometria()`, nie tutaj. */
.kf-uklad{ display:grid; grid-template-columns:110px minmax(0,1fr) 330px; gap:20px; max-width:1400px;
  align-items:start; padding-bottom:56px; }

/* --- lewy pasek narzedzi --- */
.kf-narzedzia{ display:flex; flex-direction:column; gap:8px; position:sticky; top:132px; }
.kf-narzedzie{ display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 6px; min-height:78px; background:var(--bialy); border:1px solid var(--line);
  border-radius:14px; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink); text-align:center; transition:border-color .15s, background .15s; }
.kf-narzedzie:hover{ border-color:var(--akcent); background:var(--akcent-jasny); }
.kf-n-ikona{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:10px; background:var(--kremowy2); font-size:17px; }

/* --- plotno --- */
.kf-nazwa-produktu{ margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--akcent-ciemny); }
.kf-plotno{ position:relative; background:var(--kremowy2); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; aspect-ratio:4/3; display:flex;
  align-items:center; justify-content:center; }
.kf-plotno{ background:var(--kremowy); }
/* ⚠️ Przy zdjeciu produktu plotno jest BIALE - mockupy maja biale tlo i na kremowym
   plotnie widac bylo bialy kwadrat z ostra krawedzia. */
.kf-plotno--mockup{ background:#FFFFFF; }
.kf-produkt{ position:absolute; inset:0; }
.kf-produkt svg{ width:100%; height:100%; }
/* Pole wzoru lezy na FRONCIE narysowanego produktu - wspolrzedne odpowiadaja prostokatowi
   korpusu z  (x 96-296, y 72-236 przy plotnie 400x300).
   ⚠️ Zmieniasz rysunek produktu -> popraw te cztery liczby, inaczej pole zjedzie z korpusu. */
/* ⚠️ TE PROCENTY TO TYLKO STAN WYJSCIOWY (przed startem skryptu). Od 28.08.2026
   realna geometria pola idzie z `geometria()` w `js/konfigurator.js` - bo zalezy od trybu
   wzoru („Calosc" jest ponad dwa razy szersza). ⛔ Nie strojic tu nic recznie:
   zmiana w arkuszu rozjedzie sie z podgladem na canvasie. */
.kf-pole{ position:absolute; left:27%; top:31%; width:44%; height:44%;
  border:2px dashed var(--akcent); border-radius:4px; }
.kf-pusto{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  margin:0; padding:8px 14px; background:rgba(255,255,255,.92); border-radius:100px;
  font-size:13px; color:var(--ink); white-space:nowrap; }

.kf-el{ position:absolute; cursor:grab; border:1px solid transparent; }
.kf-el:hover{ border-color:rgba(174,125,41,.5); }
.kf-el.akt{ border-color:var(--akcent); border-style:dashed; }
.kf-el--zamek{ cursor:not-allowed; }
.kf-el img{ display:block; width:100%; height:auto; }
.kf-el:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; }
/* Uchwyt skalowania. 18 px to minimum, ktore da sie zlapac palcem na telefonie. */
.kf-uchwyt{ position:absolute; right:-9px; bottom:-9px; width:18px; height:18px;
  background:var(--akcent); border:2px solid #fff; border-radius:50%; cursor:nwse-resize; }

/* --- prawy panel --- */
.kf-panel{ display:flex; flex-direction:column; gap:14px; position:sticky; top:132px; }
.kf-blok{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.kf-blok-tyt{ margin:0 0 10px; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--font-tekst, inherit); font-weight:700; color:var(--ink); }
.kf-ilosc{ display:flex; align-items:center; gap:8px; }
.kf-ilosc button{ width:44px; height:44px; font-size:20px; background:var(--kremowy);
  border:1px solid var(--line); border-radius:10px; cursor:pointer; color:var(--ink); }
.kf-ilosc input{ flex:1; min-width:0; height:44px; text-align:center; font:inherit;
  font-size:16px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); }
.kf-cena-w{ display:flex; justify-content:space-between; gap:12px; margin:0 0 8px; font-size:14px;
  color:var(--muted); }
.kf-cena-w b{ color:var(--ink); }
.kf-cena-w--razem{ padding-top:10px; border-top:1px solid var(--line2); font-size:16px; }
.kf-cena-w--razem b{ font-size:20px; color:var(--akcent-ciemny); }
.kf-kup{ width:100%; margin-top:12px; }

/* --- warstwy --- */
.kf-warstwy{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kf-warstwa{ display:flex; align-items:center; gap:6px; background:var(--kremowy);
  border:1px solid var(--line); border-radius:10px; padding:4px 6px 4px 4px; }
.kf-warstwa.akt{ border-color:var(--akcent); background:var(--akcent-jasny); }
.kf-warstwa--pusto{ display:block; padding:12px; font-size:13px; color:var(--muted);
  background:transparent; border-style:dashed; }
.kf-w-nazwa{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:6px;
  background:none; border:0; cursor:pointer; font:inherit; font-size:13px; color:var(--ink);
  text-align:left; }
.kf-w-nazwa span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-w-ikona{ display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  min-width:24px; background:var(--bialy); border:1px solid var(--line); border-radius:6px;
  font-size:12px; font-weight:700; }
.kf-w-akcje{ display:flex; gap:1px; }
.kf-w-akcje button{ width:26px; height:30px; background:none; border:0; cursor:pointer;
  font-size:12px; color:var(--muted); border-radius:6px; }
.kf-w-akcje button:hover{ background:var(--bialy); color:var(--ink); }

/* --- okna --- */
/* ⚠️ `z-index` MUSI byc wyzszy niz przyklejony naglowek strony (`header.nav` ma 70).
   Przy 60 pasek nawigacji lezal NA oknie i zaslanial jego gore z krzyzykiem. */
.kf-okno{ position:fixed; inset:0; z-index:100; display:flex;
  /* ⚠️ NIE `align-items:center`. Centrowanie kontenerem razem z `overflow:auto` UCINA
     gore tresci wyzszej od ekranu i nie da sie do niej doscrollowac. Centrujemy
     `margin:auto` na karcie - wtedy dziala i centrowanie, i przewijanie. */
  align-items:flex-start; justify-content:center;
  padding:16px; background:rgba(31,36,33,.5); overflow:hidden; overscroll-behavior:contain; }
/* ⚠️ PRZEWIJA SIE KARTA, nie tlo. Gdy przewijalo tlo, tresc uciekala NAD przyklejony
   naglowek okna i w szparze nad nim bylo widac przewijajace sie etykiety. */
.kf-okno-karta{ width:100%; max-width:460px; margin:auto; background:var(--bialy);
  border-radius:18px; padding:0 24px 24px;
  max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; }
.kf-okno-karta--szeroka{ max-width:760px; }
/* Naglowek okna przykleja sie do jego gory - krzyzyk zostaje pod reka takze wtedy,
   gdy tresc jest dluga i klient zjedzie na dol. */
.kf-okno-gora{ position:sticky; top:0; z-index:2; display:flex; align-items:center;
  justify-content:space-between; gap:12px; margin:0 -24px 14px; padding:18px 24px 12px;
  background:var(--bialy); border-radius:18px 18px 0 0; border-bottom:1px solid var(--line2); }
/* Gdy okno jest otwarte, tlo pod nim ma stac w miejscu - inaczej przewijanie rusza
   strone zamiast okna i wyglada to jak zaciecie. */
body.kf-blokada{ overflow:hidden; }
.kf-okno-gora h2{ margin:0; font-size:20px; }
.kf-okno-x{ width:36px; height:36px; background:var(--kremowy); border:1px solid var(--line);
  border-radius:10px; cursor:pointer; font-size:14px; color:var(--ink); }
.kf-okno-akcje{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0; }
.kf-suwaki{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kf-etykieta{ margin:0 0 6px; font-size:13px; font-weight:600; color:var(--ink); }
.kf-wyrownanie{ display:flex; gap:6px; }
.kf-wyrownanie button{ flex:1; min-height:44px; background:var(--kremowy); border:1px solid var(--line);
  border-radius:10px; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); }
.kf-wyrownanie button.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
.pole--kolor input{ width:64px; height:44px; padding:2px; border:1px solid var(--line);
  border-radius:10px; background:var(--bialy); cursor:pointer; }
.kf-zrzut{ display:block; padding:26px 18px; text-align:center; cursor:pointer;
  background:var(--kremowy); border:2px dashed var(--line); border-radius:14px; }
.kf-zrzut b{ display:block; margin-bottom:6px; font-size:15px; }
.kf-zrzut span{ font-size:13px; color:var(--muted); line-height:1.5; }
.kf-zgoda{ margin-top:14px; }

.kf-cliparty{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
.kf-clipart{ width:100%; padding:12px 8px; background:var(--kremowy); border:1px solid var(--line);
  border-radius:12px; cursor:pointer; font:inherit; font-size:12.5px; color:var(--ink); }
.kf-clipart:hover{ border-color:var(--akcent); background:var(--akcent-jasny); }
.kf-clipart svg{ display:block; width:46px; height:46px; margin:0 auto 6px; }
.kf-clipart-pusto{ grid-column:1/-1; padding:16px; font-size:13.5px; color:var(--muted); }
/* Naglowek grupy w bibliotece rysunkow (01.09.2026). `grid-column:1/-1` jest tu
   OBOWIAZKOWE - bez tego naglowek zajalby jedno oczko siatki obok rysunku. */
.kf-grupa{ grid-column:1/-1; margin:10px 0 0; font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.kf-grupa:first-child{ margin-top:0; }

.kf-produkty{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }
/* ⚡ KAFEL KSZTALTU - duze zdjecie korpusu od klienta, pod nim nazwa i cena „od".
   Kupujacy wybiera tu PRODUKT, wiec zdjecie ma byc glowna trescia kafla, nie ikonka.
   ⛔ Zdjecia korpusow sa na bialym tle - kafel tez, inaczej widac bialy kwadrat. */
.kf-ksztalt{ width:100%; padding:14px; background:var(--bialy); border:1px solid var(--line);
  border-radius:16px; cursor:pointer; font:inherit; color:var(--ink); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:border-color .15s, box-shadow .15s; }
.kf-ksztalt img{ width:100%; max-width:260px; height:auto; aspect-ratio:1/1;
  object-fit:contain; display:block; }
.kf-ksztalt b{ font-size:16px; }
.kf-ksztalt small{ font-size:14px; color:var(--dym); }
@media (hover: hover){ .kf-ksztalt:hover{ border-color:var(--akcent);
  box-shadow:0 6px 18px rgba(0,0,0,.07); } }
.kf-ksztalt.akt{ border-color:var(--akcent); box-shadow:0 0 0 2px var(--akcent) inset; }
.kf-produkt{ width:100%; padding:10px; background:var(--kremowy); border:1px solid var(--line);
  border-radius:14px; cursor:pointer; font:inherit; text-align:left; color:var(--ink); }
.kf-produkt.akt{ border-color:var(--akcent); background:var(--akcent-jasny); }
/* ⚡ Kafel bez zdjecia - nazwa i cena. Zdjecie ksztaltu stoi raz, nad grupa. */
.kf-produkt--zwarty{ min-height:64px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
/* ⚡ Naglowek ksztaltu w oknie wyboru - lezy w tej samej siatce, wiec musi zajac caly rzad. */
.kf-produkty-grupa{ grid-column:1 / -1; list-style:none; margin:6px 0 0; }
.kf-produkty-grupa:first-child{ margin-top:0; }
.kf-produkty-grupa{ display:flex; align-items:center; gap:12px; }
.kf-produkty-grupa img{ width:64px; height:64px; object-fit:contain; flex:none;
  background:var(--bialy); border:1px solid var(--line); border-radius:12px; }
.kf-produkty-grupa h3{ flex:1; margin:0; padding:0 2px 6px; font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dym);
  border-bottom:1px solid var(--line); }
/* ⚡ Przycisk wyboru produktu w prawej kolumnie - pelna szerokosc bloku, cel dotykowy 44px. */
.kf-zmien-produkt{ width:100%; justify-content:center; }
.kf-produkt img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:10px; margin-bottom:8px; }
.kf-produkt b{ display:block; font-size:13.5px; line-height:1.35; }
.kf-produkt small{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); }

@media (max-width:1080px){
  .kf-uklad{ grid-template-columns:88px minmax(0,1fr); }
  .kf-panel{ grid-column:1/-1; position:static; }
}
@media (max-width:700px){
  .kf-uklad{ grid-template-columns:1fr; }
  /* Na telefonie pasek narzedzi klaadzie sie w poziomie NAD plotnem - pionowa
     kolumna zjadalaby polowe szerokosci ekranu. */
  .kf-narzedzia{ flex-direction:row; position:static; overflow-x:auto; }
  .kf-narzedzie{ flex:1 0 auto; min-width:82px; }
  .kf-suwaki{ grid-template-columns:1fr; }
  .kf-plotno{ aspect-ratio:1/1; }
}

/* --- konfigurator: warstwa profesjonalna (14.08.2026) ----------------------- */
.kf-hist:disabled{ opacity:.45; cursor:not-allowed; }
/* Ostrzezenia produkcyjne - lista, bo potrafia wystapic naraz. */
.kf-ostrzezenie{ display:flex; flex-direction:column; gap:6px; margin:0 auto 12px;
  padding:12px 16px; background:var(--bursztyn-jasny); color:var(--bursztyn-tekst); border:1px solid var(--bursztyn-jasny);
  border-radius:12px; font-size:14px; font-weight:600; line-height:1.5; }

/* Prowadnice srodka - widoczne tylko w chwili zaskoczenia. */
.kf-prowadnica{ position:absolute; background:var(--akcent); pointer-events:none; z-index:99; }
.kf-prowadnica--x{ left:50%; top:-8px; bottom:-8px; width:1px; }
.kf-prowadnica--y{ top:50%; left:-8px; right:-8px; height:1px; }

/* Pasek akcji nad zaznaczonym elementem. */
.kf-pasek-el{ position:absolute; z-index:100; display:flex; gap:2px; transform:translateX(-50%);
  padding:3px; background:var(--noc); border-radius:10px; box-shadow:0 6px 18px rgba(31,36,33,.25); }
.kf-pasek-el button{ width:30px; height:30px; background:none; border:0; border-radius:7px;
  cursor:pointer; color:#fff; font-size:13px; line-height:1; }
.kf-pasek-el button:hover{ background:rgba(255,255,255,.18); }
/* Uchwyt obrotu nad elementem - odsuniety, zeby nie mylil sie z uchwytem skali. */
.kf-obrotka{ position:absolute; left:50%; top:-22px; width:16px; height:16px; margin-left:-8px;
  background:#fff; border:2px solid var(--akcent); border-radius:50%; cursor:grab; }

.kf-widoki, .kf-rownaj{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; }
.kf-widoki-etykieta{ font-size:12.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--akcent-ciemny); margin-right:4px; }
.kf-rownaj button{ width:40px; height:40px; background:var(--bialy); border:1px solid var(--line);
  border-radius:9px; cursor:pointer; font-size:15px; color:var(--ink); }
.kf-rownaj button:hover{ border-color:var(--akcent); background:var(--akcent-jasny); }

.kf-skroty{ margin-top:12px; background:var(--bialy); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; }
.kf-skroty summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink); }
.kf-skroty ul{ margin:10px 0 2px; padding-left:18px; }
.kf-skroty li{ font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:4px; }

/* --- biblioteka grafik w panelu (14.08.2026) -------------------------------- */
.ad-graf-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; }
.ad-graf-form .pe-pole{ margin:0; min-width:180px; }
.ad-graf-plik{ display:inline-flex; align-items:center; cursor:pointer; }
.ad-grafiki{ list-style:none; margin:10px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.ad-graf{ display:flex; align-items:center; gap:10px; padding:8px; background:var(--bialy);
  border:1px solid var(--line); border-radius:12px; }
.ad-graf img{ width:56px; height:56px; min-width:56px; object-fit:contain;
  background:var(--kremowy2); border-radius:8px; }
.ad-graf-opis{ flex:1; min-width:0; }
.ad-graf-opis b{ display:block; font-size:13.5px; line-height:1.3; }
.ad-graf-opis small{ font-size:12px; color:var(--muted); }
.ad-graf--pusto{ grid-column:1/-1; display:block; padding:16px; font-size:13.5px;
  color:var(--muted); border-style:dashed; }
@media (max-width:700px){ .ad-graf-form .pe-pole{ min-width:100%; } }

/* --- konfigurator: czcionki i biblioteka wzorow (14.08.2026) ---------------- */
.kf-podglad-fontu{ margin:10px 0 0; padding:14px 16px; min-height:64px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--kremowy); border:1px solid var(--line); border-radius:12px;
  font-size:26px; line-height:1.25; word-break:break-word; }
.kf-zakladki, .kf-kategorie{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.kf-kategorie{ margin-top:8px; }
.kf-clipart img{ display:block; width:52px; height:52px; margin:0 auto 6px;
  object-fit:contain; }

/* --- podglad projektu z konfiguratora przy pozycji zamowienia (14.08.2026) --- */
.ad-projekt{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.ad-projekt-foto{ display:block; width:132px; text-decoration:none; color:var(--muted); }
.ad-projekt-foto img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--kremowy); border:1px solid var(--line); border-radius:10px; }
.ad-projekt-foto b{ display:block; margin-top:3px; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--akcent-ciemny); }
.ad-projekt-foto:hover img{ border-color:var(--akcent); }

/* --- szablony i efekty tekstu (14.08.2026) ---------------------------------- */
.kf-szablony{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.kf-szablon{ width:100%; padding:0; background:var(--kremowy); border:1px solid var(--line);
  border-radius:14px; cursor:pointer; font:inherit; text-align:left; color:var(--ink);
  overflow:hidden; }
.kf-szablon:hover{ border-color:var(--akcent); }
.kf-szablon-podglad{ display:block; height:118px; background:var(--bialy);
  border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.kf-szablon-podglad span{ position:absolute; left:8%; right:8%; text-align:center;
  line-height:1.2; word-break:break-word; }
.kf-szablon-opis{ display:block; padding:9px 11px 11px; }
.kf-szablon-opis b{ display:block; font-size:13.5px; line-height:1.3; }
.kf-szablon-opis small{ display:block; margin-top:2px; font-size:12px; color:var(--muted); }
.kf-kolory-tekstu{ display:grid; grid-template-columns:auto auto 1fr; gap:12px; align-items:end; }
.kf-przelaczniki{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
@media (max-width:520px){ .kf-kolory-tekstu{ grid-template-columns:1fr 1fr; } }

/* --- margines bezpieczenstwa w polu wzoru (14.08.2026) -------------------- */
.kf-margines{ position:absolute; inset:7%; border:1px dashed rgba(174,125,41,.35);
  border-radius:3px; pointer-events:none; }

/* --- okno kodu QR (14.08.2026) ---------------------------------------------
   ⚠️ Podglad na BIALYM tle i z ramka wolnego miejsca - bo tak kod ma wygladac na
   produkcie. Pokazanie go na kremowym tle strony uczyloby zlego nawyku. */
.kf-qr-podglad{ display:flex; justify-content:center; margin:14px 0 6px; min-height:8px; }
.kf-qr-podglad img{ width:172px; height:172px; image-rendering:pixelated;
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:6px; }

/* --- wejscie do konfiguratora z karty produktu (14.08.2026) ----------------- */
.prod-projektuj{ margin:12px 0 0; display:flex; flex-direction:column; gap:6px; }
.prod-projektuj .nota{ margin:0; }
/* ⚠️ Bez tej linii `hidden` NIE DZIALA: wlasne `display:flex` wygrywa z domyslnym
   `display:none` przegladarki, wiec przycisk zostawalby widoczny przy dodatku. */
.prod-projektuj[hidden]{ display:none; }

/* --- nazwane projekty (14.08.2026) ----------------------------------------- */
.kf-licznik{ display:inline-block; min-width:18px; margin-left:6px; padding:0 5px;
  border-radius:9px; background:var(--akcent); color:#fff; font-size:12px; line-height:18px;
  text-align:center; font-weight:700; }
.kf-projekty{ list-style:none; margin:14px 0 0; padding:0; display:flex;
  flex-direction:column; gap:8px; }
.kf-projekt{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--bialy); }
.kf-projekt-opis{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kf-projekt-opis b{ font-size:15px; }
.kf-projekt-opis small{ color:var(--muted); font-size:12.5px; }
.kf-projekt-akcje{ display:flex; align-items:center; gap:6px; }
.kf-projekt-x{ width:32px; height:32px; border:1px solid var(--line); border-radius:9px;
  background:var(--bialy); color:var(--muted); cursor:pointer; font-size:14px; }
.kf-projekt-x:hover{ border-color:var(--akcent-ciemny); color:var(--akcent-ciemny); }
.kf-projekt-pusto{ padding:14px; border:1px dashed var(--line); border-radius:12px;
  color:var(--muted); font-size:14px; }

/* --- biblioteka grafik: edycja i kolejnosc (14.08.2026) --------------------- */
/* ⛔ LISTA, NIE SIATKA. Kafle po 220 px mialy sens, gdy w wierszu byl obrazek, nazwa
   i jeden przycisk. Po dolozeniu strzalek i „Edytuj" tresc przestala sie miescic i nazwy
   lamaly sie LITERA NA WIERSZ. W kodzie nic tego nie zapowiadalo. */
.ad-grafiki{ grid-template-columns:1fr; }
.ad-graf-akcje{ display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap; }
.ad-graf-strzalka{ width:30px; height:30px; border:1px solid var(--line); border-radius:8px;
  background:var(--bialy); color:var(--ink); cursor:pointer; font-size:14px; line-height:1; }
.ad-graf-strzalka:hover:not(:disabled){ border-color:var(--akcent-ciemny); color:var(--akcent-ciemny); }
.ad-graf-strzalka:disabled{ opacity:.35; cursor:not-allowed; }
.ad-graf--edycja{ align-items:flex-start; }
.ad-graf-pola{ display:flex; gap:10px; flex:1 1 260px; min-width:0; flex-wrap:wrap; }
.ad-graf-pola .pe-pole{ flex:1 1 160px; margin:0; }

/* --- pasek narzedzi na telefonie (14.08.2026) -------------------------------
   Szesc narzedzi nie miesci sie w 390 px. Bez maski ostatni przycisk urywa sie
   na krawedzi i wyglada jak blad ukladu, a nie jak „przewin dalej". */
@media (max-width:900px){
  .kf-narzedzia--pasek{ scroll-snap-type:x proximity; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
    padding-right:26px; }
  .kf-narzedzia--pasek::-webkit-scrollbar{ display:none; }
  .kf-narzedzia--pasek > *{ scroll-snap-align:start; flex:0 0 auto; }
}

/* --- „inni brali tez": dowod przy kaflu (14.08.2026) ------------------------ */
/* ⚡ SIEROTKA ZALATWIONA W SAMEJ SIATCE (11.09.2026): `.produkty` to dzis grid
   `auto-fill`, wiec jedyny kafel ma szerokosc tracka, a nie calej sekcji. Tutaj
   zostaje tylko to, czego siatka nie wie: karty maja stale 280 px i stoja DO LEWEJ.
   ⛔ Nie wracaj do `flex:1 1 <baza>` - przy jednym wyniku filtrowania kafel
   rozciagal sie wtedy na cala szerokosc sekcji. */
/* Do LEWEJ, nie na srodek: naglowek sekcji jest wyrownany do lewej, wiec pojedyncza
   karta na srodku wygladala jak zgubiona. */
#razem{ grid-template-columns:repeat(auto-fill,280px); justify-content:start; }
#razem > *{ max-width:280px; }
@media (max-width:600px){ #razem{ grid-template-columns:1fr; } #razem > *{ max-width:100%; } }

.prod-razem{ display:inline-block; margin:0 0 8px; padding:3px 9px; border-radius:999px;
  background:var(--akcent-jasny); color:var(--akcent-ciemny);
  font-size:12px; font-weight:600; letter-spacing:.01em; }
.nota--razem{ margin-top:18px; }

/* --- godziny pracy w trzech wierszach (14.08.2026) -------------------------
   Jedna linia z separatorami lamala sie w polowie i zostawiala wiszaca kropke. */
.kt-godziny{ display:flex; flex-direction:column; gap:2px; }
.kt-godziny em{ font-style:normal; color:var(--muted); }

/* --- kolka koloru: obszar dotyku 44 px (14.08.2026) -------------------------
   Kolko ma 34 px, czyli mniej niz palec (44 px). ⛔ Nie powiekszamy SAMEGO kolka -
   pieciu wiekszych kolek nie mielibysmy gdzie postawic przy 390 px, a wyglad ustalil
   klient. Zamiast tego niewidoczna nakladka: rysunek zostaje 34 px, trafia sie w 44 px.
   ⚠️ Odstep miedzy kolkami to 10 px, wiec rozszerzenie o 5 px z kazdej strony NIE
   nachodzi na sasiada - inaczej palec trafialby w zly kolor. */
/* ⚠️ NIE `inset:-5px`: `inset` liczy sie od pola WEWNETRZNEGO, wiec obramowanie kolka
   zjadalo po 2 px z kazdej strony i realny obszar wychodzil 40 px zamiast 44.
   Rozmiar podany wprost jest odporny na grubosc ramki.
   ⚡ Rozstaw kolek to 34 + 10 = 44 px, wiec kola 44 px stykaja sie i NIE nachodza -
   palec nie trafi w sasiedni kolor. */
.kolko::after{ content:""; position:absolute; width:44px; height:44px;
  left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; }
@media (hover:hover){ .kolko::after{ display:none; } }   /* myszka trafia dokladnie */

/* --- plakietka „wymaga faktury" w panelu obslugi (20.08.2026) ----------------
   ⚠️ Kolor z akcentu marki, nie zielony ani czerwony: faktura to nie jest stan
   „dobrze/zle", tylko informacja, ze cos trzeba wystawic. */
.ad-fv{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px;
  font-weight:700; letter-spacing:.06em; background:var(--akcent-jasny);
  color:var(--akcent-ciemny); vertical-align:middle; }
.ad-filtr--fv{ position:relative; margin-left:16px; }
/* Wlosowa kreska: „Wymaga FV" to inna os niz etap, a nie kolejny etap. */
.ad-filtr--fv::before{ content:''; position:absolute; left:-9px; top:50%;
  transform:translateY(-50%); width:1px; height:22px; background:var(--line); }
.ad-filtr--fv[aria-pressed="true"]{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
@media (max-width:700px){
  /* pasek sie zawija - kreska trafialaby na poczatek wiersza */
  .ad-filtr--fv{ margin-left:0; }
  .ad-filtr--fv::before{ display:none; }
  /* palec potrzebuje 44 px; zmierzone bylo 40 px */
  .ad-filtr{ min-height:44px; }
}
.ad-fv-blok{ margin-top:14px; padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; background:var(--kremowy); }
.ad-fv-blok .etykieta-mala{ margin:0 0 4px; }

/* Przelacznik „w menu na gorze" przy kategoriach w panelu (klient 28.08.2026).
   ⚠️ Stan MUSI byc widoczny bez najezdzania myszka - to nie jest przycisk akcji,
   tylko wskaznik stanu, ktory da sie klikac. Wygaszony = kategoria jest poza menu. */
.sl-menu-btn{ opacity:.34; }
.sl-menu-btn--akt{ opacity:1; background:var(--zloto); color:var(--ink); border-color:var(--zloto); }
@media (hover:hover) and (pointer:fine){ .sl-menu-btn:hover{ opacity:1; } }

/* --- OCENY na karcie produktu (klient 28.08.2026) --------------------------------
   ⛔ Blok jest `hidden`, dopoki `rysujOceny()` nie ma CZEGO pokazac. Zadnej liczby
      nie ma w HTML-u - inaczej wyswietlilaby sie na chwile przed startem skryptu. */
.oceny{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:2px 0 12px; font-size:14px; line-height:1.45; }
/* Dwie warstwy gwiazdek: szara podkladka i zlota przycieta do wartosci.
   ⚠️ `white-space:nowrap` jest KONIECZNY - bez niego warstwa wypelnienia lamie sie
   przy waskim ekranie i gwiazdki rozjezdzaja sie wzgledem podkladki. */
.gwiazdki{ position:relative; display:inline-block; line-height:1;
  white-space:nowrap; font-size:17px; letter-spacing:1px; }
.gwiazdki-tlo{ color:var(--piasek); }
.gwiazdki-wypelnienie{ position:absolute; top:0; left:0; bottom:0;
  /* ⚠️ KONTRAST ZMIERZONY, NIE DOBRANY. Poprzedni `#B8862B` dawal 3,0:1 na kremie -
     audyt slusznie to zglosil. `var(--bursztyn-ciemny)` daje 5,1:1: gwiazdki dalej czytaja sie jako
     zlote, a widac je wyraznie. ⛔ Do naszego progu 7:1 trzeba by `#6B4A0F`, czyli
     ciemnego brazu - przestalyby byc gwiazdkami i zaczely plamka. Swiadomy wybor. */
  overflow:hidden; color:var(--bursztyn-ciemny); }
.oceny-liczba{ font-weight:700; color:var(--ink); }
.oceny-ile{ color:var(--muted); }
/* ⚠️ Zrodlo oceny MUSI byc czytelne, a nie schowane - to ono mowi, ze liczba dotyczy
   naszych ofert na Allegro, a nie tego jednego produktu. */
.oceny-zrodlo{ color:var(--muted); font-size:13px; }
@media (max-width:520px){
  .oceny{ gap:7px; }
  .oceny-zrodlo{ flex-basis:100%; }
}

/* Pole z adresem produktu - ostatnia droga, gdy przegladarka nie daje ani systemowego
   udostepniania, ani schowka. Ma byc SZEROKIE i zaznaczone, zeby dalo sie zrobic Ctrl+C. */
.link-do-skopiowania{ width:100%; max-width:420px; margin-top:6px; padding:8px 10px;
  border:1px solid var(--linia); border-radius:8px; background:#fff;
  font:400 13px/1.4 'Inter',system-ui,sans-serif; color:var(--ink); }

/* --- WSPOLNY OPIS POD KREATOREM (klient 28.08.2026) ------------------------------
   Kolumna tresci + zdjecie obok. Wczesniej byly trzy kolumny litego tekstu - blok
   tekstu trzeba czytac, a liste z podnaglowkami da sie przeskanowac wzrokiem.
   ⚠️ `minmax(0, ...)`, nie `1fr` - przy `1fr` dluzsze slowo rozpycha kolumne i caly
   uklad wychodzi poza ekran. */
.kf-opis{ margin:52px auto 8px; }
.kf-opis-uklad{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:40px 52px; align-items:start; }
.kf-opis h2{ font-size:clamp(23px, 2.8vw, 30px); margin:0 0 14px; }
.kf-opis-wstep{ margin:0 0 22px; font-size:16px; line-height:1.7; color:var(--ink);
  max-width:62ch; }
.kf-opis-tresc h3{ font-size:16px; margin:22px 0 8px; }
.kf-opis-tresc h3:first-of-type{ margin-top:0; }
/* ⚠️ Wlasny znak listy zamiast `list-style` - kropka przegladarki siedzi za blisko
   tekstu i przy dwuwierszowym punkcie druga linia wraca pod znak, nie pod tresc. */
.kf-opis-lista{ margin:0; padding:0; list-style:none; }
.kf-opis-lista li{ position:relative; padding-left:18px; margin-bottom:8px;
  font-size:15px; line-height:1.65; color:var(--muted); max-width:60ch; }
.kf-opis-lista li::before{ content:''; position:absolute; left:2px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--zloto); }
.kf-opis-lista strong{ color:var(--ink); }
.kf-opis-firmy{ margin:22px 0 0; font-size:15px; line-height:1.65; color:var(--muted); }
/* ⚠️ Kolumna tekstu jest DUZO wyzsza niz zdjecie - bez tego pod zdjeciem zostawala
   pusta polowa ekranu. Przyklejone zdjecie idzie za czytaniem i dziura znika.
   ⛔ Tylko powyzej 900 px: nizej kolumny sa jedna pod druga i `sticky` nie ma sensu. */
.kf-opis-foto{ margin:0; }
@media (min-width:901px){
  .kf-opis-foto{ position:sticky; top:96px; }
}
.kf-opis-foto img{ display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; border-radius:16px; background:var(--kremowy2); }
.kf-opis-foto figcaption{ margin-top:10px; font-size:13px; line-height:1.55;
  color:var(--muted); }
@media (max-width:900px){
  /* Zdjecie idzie POD tresc, nie znika - to jedyny obrazek w tej sekcji. */
  .kf-opis-uklad{ grid-template-columns:1fr; gap:26px; }
  .kf-opis-foto img{ max-width:420px; }
}
@media (max-width:620px){ .kf-opis{ margin-top:34px; } }

/* --- CELE DOTYKOWE NA TELEFONIE (przebieg mobilny 28.08.2026) ---------------------
   ⛔⛔ Pomiar na 390 px pokazal, ze odnosniki w stopce maja 16 px wysokosci, a logo
   stopki 32 px. Wytyczna to 44 px (WCAG 2.5.5, Apple HIG) - ponizej tej wartosci
   palec trafia obok i kupujacy klika nie to, co chcial.
   ⚠️ TYLKO NA TELEFONIE. Na myszy 16 px jest w porzadku, a wymuszenie 44 px rozdmuchaloby
   stopke na desktopie o kilkaset pikseli. */
@media (max-width: 900px) {
  /* ⚠️ Klasa siatki stopki to `.foot-grid`, NIE `.stopka-kol` - pierwsza wersja tej
     reguly nie trafiala w nic i pomiar to pokazal. Mierz, czy skutek nastapil. */
  .foot-grid a,
  .stopka-logo,
  details > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* ⚠️ `inline-flex` na odnosniku w liscie rozjezdza punktory, wiec w kolumnach stopki
     idzie pelne `flex` - tam kazdy link i tak stoi w osobnym wierszu. */
  .foot-grid li { margin: 0; }
  /* Tytul produktu na kafelku ma 16 px wysokosci. NIE rozpychamy go do 44 px, bo cale
     zdjecie kafla (356x356) prowadzi pod TEN SAM adres - wiekszy cel juz istnieje.
     Dokladamy tylko odstep, zeby palec nie musial trafiac w sam wiersz tekstu. */
  .prod h3 a, .prod-tytul a { display: inline-block; padding: 7px 0; }
  /* Przyciski wyrownania w kreatorze maja 40x40 - cztery piksele za malo. Na myszy to
     nie przeszkadza, palcem trafia sie obok. ⚠️ Powiekszamy CEL, nie ikone: sama strzalka
     zostaje tej samej wielkosci, rosnie tylko obszar klikalny. */
  .kf-rownaj button { min-width: 44px; min-height: 44px; }
  /* Znacznik `summary` ma wlasna strzalke - `flex` ustawia ja rowno z tekstem. */
  details > summary { gap: 8px; }
}

/* --- RZAD O STALEJ TRESCI WYPELNIA SZEROKOSC (13.09.2026) --------------------
   ⛔ `auto-fill` liczy tory z SZEROKOSCI KONTENERA, nie z liczby kafli - wiec rzad
   o stalej tresci konczyl sie pustym torem (zmierzone: 304 px przy
   trzech kaflach w kontenerze 1200 px).
   ⛔⛔ `.produkty` celowo NIE ma tej reguly: tam liczba kart bierze sie z DANYCH
   i pusty tor jest POPRAWNY - to on nie pozwala jednemu wynikowi rozciagnac sie
   na caly rzad.
   ⛔ `:has()` ma wage (0,2,0), wiec telefonowe domkniecie tez musi uzyc `:has()`
   i stac nizej - `@media` nie dodaje wagi. */
.fakty:has(> *:first-child:nth-last-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
.fakty:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
.kafle:has(> *:first-child:nth-last-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
.kafle:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
/* ⛔ CZTERY i PIEC kafli - dopisane 13.09.2026, gdy zrzut sklepu Jackowa pokazal
   PIATY kafel stojacy sam w drugim rzedzie. `auto-fill` dawal cztery tory, wiec
   piaty spadal nizej. Przy czterech kaflach 2x2 czyta sie lepiej niz 4+0. */
.kafle:has(> *:first-child:nth-last-child(4)){ grid-template-columns:repeat(4,minmax(0,1fr)); }
.kafle:has(> *:first-child:nth-last-child(5)){ grid-template-columns:repeat(5,minmax(0,1fr)); }
.bl-siatka:has(> *:first-child:nth-last-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
.bl-siatka:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){
  .fakty:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kafle:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* ⛔ Piec waskich kafli ponizej 1000 px daje kadr 3:4 o szerokosci ok. 180 px -
     podpis lamie sie wtedy co drugie slowo. Schodzimy na trzy w rzedzie: 3+2 to
     dwa PELNE rzedy, a nie sierotka. */
  .kafle:has(> *:first-child:nth-last-child(4)),
  .kafle:has(> *:first-child:nth-last-child(5)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bl-siatka:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .fakty:has(> *:first-child:nth-last-child(2)),
  .fakty:has(> *:first-child:nth-last-child(3)){ grid-template-columns:1fr; }
  .kafle:has(> *:first-child:nth-last-child(2)),
  .kafle:has(> *:first-child:nth-last-child(3)),
  .kafle:has(> *:first-child:nth-last-child(4)),
  .kafle:has(> *:first-child:nth-last-child(5)){ grid-template-columns:1fr; }
  .bl-siatka:has(> *:first-child:nth-last-child(2)),
  .bl-siatka:has(> *:first-child:nth-last-child(3)){ grid-template-columns:1fr; }
}


/* ⛔ SKOK DO TRESCI - chowamy go poza kadrem, a POKAZUJEMY na fokusie klawiatury.
   `display:none` byloby bledem: element ukryty w ten sposob nie przyjmuje fokusu,
   wiec odnosnik istnialby w kodzie i nie dzialalby dla nikogo. */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--akcent); color:#fff; padding:10px 16px; border-radius:0 0 6px 0;
  font-weight:600; text-decoration:none; }
.skip-link:focus{ left:0; }


/* ⚡ Cena za kilogram pod kwota - wzorem strony wskazanej przez klienta. Stoi TUZ pod
   cena (dlatego ujemny gorny margines kasuje odstep akapitu) i jest wyraznie cichsza,
   bo to liczba do PORÓWNANIA, a nie kwota do zaplaty. */
.cena-za-kg{ margin:-8px 0 10px; font-size:14.5px; color:var(--muted); }

.cena-waga{ font-weight:400; font-size:13px; color:var(--muted); font-family:'Inter',sans-serif; }
.cena-za-kg--kafel{ margin:2px 0 0; font-size:13px; }

/* ══════════════════════════════════════════════════════════════════════════
   WARSTWA KOLORU - dopisana 13.09.2026 na koniec arkusza.

   ⛔ DLACZEGO NA KONCU, A NIE W REGULACH WYZEJ. Arkusz ma 1897 regul napisanych
   pod poprzednia palete. Przepisywanie ich po kolei to 1897 okazji do pomylki;
   warstwa na koncu wygrywa kolejnoscia przy tej samej wadze i da sie ja przeczytac
   w calosci na jednym ekranie.

   ⚡ ZASADA: kolor NIESIE ZNACZENIE, nie zdobi.
      bursztyn  - wedzarnia, cena, wyroznienie
      morski    - swieza ryba, transport
      zielen    - marka, dzialanie, potwierdzenie
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CENA: bursztyn wedzarni ──────────────────────────────────────────────
   ⛔ `--bursztyn-tekst` (#654513), nie `--bursztyn` (#AE7D29). Powod jest liczbowy:
   kwota na kafelku ma 19 px i wage 500, czyli NIE jest „duzym tekstem" w rozumieniu
   WCAG (potrzeba 24 px albo 18,66 px pogrubione). #AE7D29 na bieli daje 4,0:1 -
   ponizej progu 4,5:1. #654513 daje 9,1:1 i dalej czyta sie jak bursztyn. */
.cena{ color:var(--bursztyn-tekst); font-weight:600; }
.cena-duza{ color:var(--bursztyn-tekst); }
.cena-za-kg{ color:var(--muted); }

/* ── ETYKIETA KATEGORII: kolor dzialu ─────────────────────────────────────
   Po `data-dzial` z `kartaHTML()`. Kupujacy odroznia wedzone od swiezych zanim
   przeczyta napis - a to jest podzial, po ktorym w tym sklepie naprawde sie wybiera. */
.prod-kat{ font-weight:700; }
.prod[data-dzial="wedzone"]   .prod-kat{ color:var(--bursztyn-ciemny); }
.prod[data-dzial="swieze"]    .prod-kat{ color:var(--morski-ciemny); }
.prod[data-dzial="przetwory"] .prod-kat{ color:var(--akcent-ciemny); }

/* Cienka kreska koloru dzialu przy gornej krawedzi kafla - czytelna na jednym
   rzucie oka na cala siatke, a nie zabiera ani piksela wysokosci. */
.prod{ border-top:3px solid var(--line2); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.prod[data-dzial="wedzone"]   { border-top-color:var(--bursztyn); }
.prod[data-dzial="swieze"]    { border-top-color:var(--morski); }
.prod[data-dzial="przetwory"] { border-top-color:var(--akcent); }
/* ⚡ Dwa nowe dzialy (14.09.2026) dostaja wlasny kolor tak samo jak trzy rybne -
   inaczej w mieszanej siatce „Wszystko" miod i olej bylyby jedynymi kartami bez
   kreski, czyli czytalyby sie jak pozycje z innego sklepu. Miod: zloto, ten sam
   kolor, ktory ma juz na zawieszce sloika. Olej: oliwka policzona ze zdjec. */
.prod[data-dzial="miody"]     .prod-kat{ color:var(--bursztyn-tekst); }
.prod[data-dzial="oleje"]     .prod-kat{ color:var(--oliwka-ciemny); }
.prod[data-dzial="miody"]     { border-top-color:var(--zloto); }
.prod[data-dzial="oleje"]     { border-top-color:var(--oliwka); }
@media (hover:hover){
  .prod:hover{ box-shadow:0 10px 30px rgba(17,36,26,.13); transform:translateY(-3px); }
}

/* ── KAFEL BEZ ZDJECIA ────────────────────────────────────────────────────
   ⛔ Do 13.09.2026 `fotoGl()` zwracalo pusty `src` i przegladarka rysowala ikone
   zepsutego obrazka. Dzis wchodzi znak marki - `object-fit:contain` na ciemnym tle,
   zeby kafel nie byl przyciety w przypadkowym miejscu. */
/* ⛔ Kafel zastepczy JASNY, nie nocny (14.09.2026). Ciemnozielony kafel z „J" stal
   w siatce miedzy zdjeciami jak czarna plama - na zrzucie calej glownej to byl
   najciezszy element strony, a mial byc najcichszy. Kremowy kafel z zielonym
   znakiem siedzi w rzedzie jak reszta kart i nie zabiera wzroku towarowi. */
.prod-foto img[src$="bez-zdjecia.svg"]{ object-fit:contain; background:var(--kremowy2); }

/* ── PASEK KATEGORII: wybrana kategoria w kolorze swojego dzialu ──────────── */
.kat-link.akt[data-kat="wedzone"]  { color:var(--bursztyn-ciemny); border-color:var(--bursztyn); }
.kat-link.akt[data-kat="swieze"]   { color:var(--morski-ciemny);   border-color:var(--morski); }
.kat-link.akt[data-kat="przetwory"]{ color:var(--akcent-ciemny);   border-color:var(--akcent); }

/* ── PRZYCISK ZLOTY: na ciemnym tle, nie na jasnym ────────────────────────
   `--zloto` (#D8B45F) na `--ink` daje 8,2:1; na bieli tylko 2,0:1, wiec tekst
   przycisku musi byc ciemny - i tak jest w regule bazowej. */
.btn--zloto:hover{ background:var(--bursztyn); border-color:var(--bursztyn); color:#fff; }

/* ── STANY ZAMOWIENIA: zestrojone z paleta, dalej rozroznialne ────────────── */
.status--pakowane{ background:var(--bursztyn-jasny); color:var(--bursztyn-tekst); }
.status--w-drodze{ background:var(--morski-jasny);   color:var(--morski-ciemny); }
.status--gotowe  { background:var(--akcent-jasny);   color:var(--akcent-ciemny); }
/* ⛔⛔ „ANULOWANE" WYGLĄDAŁO DOKŁADNIE JAK „GOTOWE". Przy zestrajaniu palety ten blok dostał
   trzy stany, a `.status--zwrot` został przy starej regule wyżej w pliku - która po podmianie
   zmiennych wskazuje ten sam `--akcent-jasny` i ten sam `--akcent-ciemny` co `.status--gotowe`.
   Tło w tło, tekst w tekst: plakietka przestała cokolwiek odróżniać, a stoi przy zamówieniach
   ANULOWANYCH, przy zgłoszeniu reklamacyjnym i przy wyłączonym produkcie.
   ⚡ Paleta ma na to własny kolor: `--alarm` (#8E2F16) na `--alarm-jasny` daje 6,9:1. */
.status--zwrot   { background:var(--alarm-jasny);    color:var(--alarm); }

/* ── ZGODY MARKETINGOWE: TRZY STANY ───────────────────────────────────────────
   ⛔ „Nie wiadomo" NIE jest tym samym co „brak zgody" i nie może wyglądać tak samo.
      Stare zamówienia (sprzed 14.09.2026) nie zapisywały zgód wcale - sprzedawca musi
      widzieć, że o tych osobach po prostu nic nie wiadomo, a nie że odmówiły.
   ⚡ Stan nieznany rysujemy PRZERYWANĄ ramką bez tła - to jedyny z trzech, który nie
      wygląda jak rozstrzygnięcie. `--muted` na kremie 6,2:1, na bieli 7,5:1. */
.status--brak    { background:var(--kremowy2);       color:var(--ink); }
.status--nieznane{ background:transparent; color:var(--muted);
                   border:1px dashed currentColor; padding:4px 10px; }

/* ── PANEL PRODUKTOW: KADR ZDJECIA W KAFELKU ────────────────────────────────
   ⛔⛔ Podglad jest KWADRATEM, bo kwadratem jest kafel katalogu. Prostokatny podglad
   pokazywalby wlascicielce co innego, niz zobaczy kupujacy - czyli dokladnie ten blad,
   ktory to pole ma usuwac. `background-size: cover` + `background-position` licza sie
   tak samo jak `object-fit: cover` + `object-position` na kaflu. */
.pe-kadr{ border:0; margin:10px 0 0; padding:0; }
.pe-kadr-rzad{ display:flex; align-items:center; gap:14px; margin-top:6px; flex-wrap:wrap; }
.pe-kadr-podglad{ flex:none; width:104px; height:104px; border-radius:12px;
  border:1px solid var(--line); background:var(--kremowy2) center/cover no-repeat; }
.pe-kadr-podglad.pusty{ border-style:dashed; }
.pe-kadr-sterowanie{ flex:1 1 220px; min-width:180px; display:flex; flex-direction:column; gap:8px; }
/* ⛔ Suwak MUSI miec pole dotyku 44 px - na telefonie wlascicielka ustawia kadr palcem. */
.pe-kadr-sterowanie input[type=range]{ width:100%; min-height:44px; accent-color:var(--akcent); }
.pe-kadr-opis{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.pe-kadr-opis b{ color:var(--tekst); font-weight:600; }
.pe-kadr-zdejmij{ font:inherit; font-size:13px; padding:6px 10px; min-height:36px;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--tekst); cursor:pointer; }
.pe-kadr-zdejmij:hover{ border-color:var(--akcent); }
.pe-kadr small{ display:block; margin-top:6px; }

/* ── WYBOR GRAMATURY: KAFEL KATALOGU I WIERSZ KOSZYKA ───────────────────────
   ⛔⛔ Blok wagi stoi NAD `.prod-dol`, a nie w nim. `.prod-dol` trzyma cene i przycisk
   w JEDNYM rzedzie (`display:flex`) - trzecie dziecko lamie ten rzad na dwa i kafel
   rosnie o ponad pol setki pikseli, przy czym widac to dopiero na szerokim ekranie.
   ⛔ `margin-top:auto` przenosi sie z `.prod-dol` na `.prod-waga`, bo to teraz ON jest
   pierwszym elementem przyklejonego do dolu bloku. Zostawienie go w OBU miejscach dzieli
   wolne miejsce karty na pol i miedzy wyborem wagi a cena zostaje pusty pas. */
.prod-waga{ margin-top:auto; padding-top:10px; }
.prod-waga + .prod-dol{ margin-top:0; }
.prod-waga-et{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; }
/* ⛔ Baza (`select`) daje tylko wysokosc i miejsce na strzalke - ramke, tlo, zaokraglenie
   i lewy oddech dokladaja normalnie opakowania `.pole`/`.pe-pole`, ktorych kafel nie ma. */
.prod-waga-pole{
  width:100%; min-height:46px; padding-left:13px;
  border:1px solid var(--line); border-radius:10px;
  background-color:var(--bialy); color:var(--ink);
}
.prod-waga-pole:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; }

/* ⛔ W szufladzie select stoi we WLASNYM wierszu, nie obok licznika sztuk: kolumna tekstu
   ma tam ok. 304 px przy szufladzie 420 px i ok. 215 px przy oknie 360 px - licznik
   i lista wyboru w jednym rzedzie by sie nie zmiescily. */
/* ⛔⛔ WAGA I LICZNIK SZTUK W JEDNYM RZEDZIE, GDY JEST NA TO MIEJSCE. Po dolozeniu
   listy wag wiersz koszyka urosl ze 128 do 179 px, wiec na telefonie 390x900 w widocznej
   czesci szuflady zostawala JEDNA pozycja. `flex-wrap` rozstrzyga to sam: przy szerokiej
   szufladzie oba elementy stoja obok siebie, przy waskiej lamia sie na dwa wiersze -
   bez zadnego progu wpisanego na sztywno. */
.poz-sterowanie{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:7px; }
.poz-sterowanie .ilosc{ margin-top:0; }
.poz-waga{ display:flex; align-items:center; gap:8px; flex:1 1 150px; min-width:0; }
.poz-waga-et{ font-size:12px; color:var(--muted); flex:none; }
/* ⛔ Bez `min-height` - baza daje 46 px, a wlasna wartosc 44 px OBNIZYLABY cel dotykowy
   wzgledem stanu, ktory juz jest w pliku. */
.poz-waga-pole{
  flex:1; min-width:0; padding-left:13px;
  border:1px solid var(--line); border-radius:10px;
  background-color:var(--bialy); color:var(--ink);
}
.poz-waga-pole:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; }

/* ── PANEL PRODUKTOW: GRAMATURY SPRZEDAZY ──────────────────────────────────── */
.pe-wagi{ border:0; margin:12px 0 0; padding:0; }
.pe-wagi-lista{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:6px 0 8px; }
.pe-wagi-stan{ margin:0 0 10px; font-size:13px; color:var(--muted); }
/* ⛔ Stan „zero wag i brak jednostki" to jedyny NIEPOPRAWNY uklad tej pary - i ma
   wygladac inaczej niz zwykla podpowiedz, bo zapis go nie przepusci. */
.pe-wagi-stan--brak{ color:var(--alarm); font-weight:600; }