@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 rezydencja-bohema: :root mial none, a naglowki dalej auto). */
*, *::before, *::after { font-optical-sizing: none !important; }
/* ==========================================================================
   SubHouse - makieta pogladowa PART-WEB.
   Arkusz wspolny dla czterech stron: index.html, sklep.html, produkt.html, panel.html.
   Wersja: 20260820b   (w HTML linkujemy: css/style.css?v=20260820b)

   SYSTEM WIZUALNY: ten sam, ktorym robimy strony od zawsze - milk-and-love,
   despe-debki, partweb.pl, alpaki-niechorze. Czyli:
   - PRAWDZIWE ZDJECIA produktow w <img>, aspect-ratio 3/4, object-fit:cover,
   - szeryf 'Bodoni Moda' w naglowkach i w cenach, 'Manrope' 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 .kubek, .nadruk ani .poduszka.
   Kubek na tej stronie to <img> ze zdjeciem.

   Poprawki wzgledem wzorca milk-and-love (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:'Manrope',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='%237A6A5A' 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{
  --kremowy:#FAF6F1; --kremowy2:#F2EAE0; --bialy:#fff;
  --noc:#241C14; --noc2:#33281C; --ink:#241C14;
  --muted:#544639;            /* 8,4:1 na kremowym, 7,6:1 na --kremowy2.
                                 PODNIESIONE 13.08.2026 z #7A6A5A (4,8:1) na prosbe klienta:
                                 bruz na kremie przechodzil norme, ale wizualnie sie zlewal. */
  --muted2:#A2917E;           /* UWAGA: 2,8:1 na kremowym, ale 5,6:1 na --noc.
                                 Uzywac na ciemnym tle albo jako kolor obramowan i ikon.
                                 Drobny tekst na jasnym tle -> --muted albo klasa .nota. */
  --akcent:#A8532B;           /* palona terakota - kolor wypalanej ceramiki i kawy; 4,9:1 na kremowym */
  --akcent-ciemny:#6F341A;    /* 8,1:1 na kremowym - drobny tekst i tekst na --akcent-jasny.
                                 Bylo #7E3C1E, ale 12-13 px wychodzilo na 6,9:1, czyli pod progiem. */
  --akcent-jasny:#F6EAE2;
  --zloto:#D9B584;            /* 8,7:1 na --noc. PODNIESIONE 13.08.2026 z #C8A06A (6,9:1):
                                 zloto na brazie roznilo sie glownie ODCIENIEM, a nie
                                 jasnoscia, wiec drobny tekst sie z nim zlewal. */
  --line:rgba(36,28,20,.12); --line2:rgba(36,28,20,.07);
  --tap:48px; --safe-b:env(safe-area-inset-bottom,0px);
  --cien:0 2px 10px rgba(36,28,20,.06);
  --cien2:0 12px 40px rgba(36,28,20,.14);
  color-scheme:light;
}

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:'Manrope',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:'Bodoni Moda',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:#EFE7DE; }
.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:#EFE7DE; }
/* wstep + tresc wysrodkowane - tak budujemy sekcje we wszystkich makietach */
.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 'Manrope',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:#2A1D10; }
.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:#B98F58; border-color:#B98F58; color:#2A1D10; }
}
.link-podkreslony{ color:var(--akcent-ciemny); text-decoration:underline; text-underline-offset:3px; font-weight:600; }

/* ==========================================================================
   5. PASEK MAKIETY + NAGLOWEK
   ========================================================================== */
.pasek-demo, .demobar{
  background:var(--noc); color:#EFE2D6; 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:#E2C08A; }

/* 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:#EFE2D6; 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:'Bodoni Moda',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:'Manrope',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. */
.brand--logo img{ display:block; width:auto; height:34px; }
@media (max-width:600px){ .brand--logo img{ height:28px; } }
.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; }
.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 'Manrope',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(36,28,20,.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; }
.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(26,19,12,.80),rgba(26,19,12,.28) 62%,transparent),
    linear-gradient(0deg,rgba(26,19,12,.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:#F0C9A8; }
.hero p.sub{ font-size:clamp(15.5px,2vw,19px); color:#F2E6DA; max-width:520px; margin:0 0 24px; }
.hero .eyebrow{ color:#F0C9A8; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn--nahero{ color:#fff; border-color:rgba(255,255,255,.62); background:rgba(26,19,12,.45); }
@media (hover:hover) and (pointer:fine){
  .btn--nahero:hover{ background:rgba(26,19,12,.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:#EFE7DE; }
.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:flex; flex-wrap:wrap; gap:16px; }
.fakty > *{ flex:1 1 190px; min-width:0; }
.fakt{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:20px 18px; }
.fakt b{ display:block; font-family:'Bodoni Moda',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:flex; flex-wrap:wrap; gap:16px; }
.kafle > *{ flex:1 1 240px; 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(26,19,12,.74),transparent 58%); }
.kafel span{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; font-family:'Bodoni Moda',Georgia,serif; font-size:21px; }
.kafel small{ display:block; font-family:'Manrope',sans-serif; font-size:12.5px; color:#E9DCCD; 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
   ========================================================================== */
.produkty{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,24px); }
.produkty > *{ flex:1 1 250px; 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; }
/* 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 */
.prod-foto img{ width:100%; aspect-ratio:3/4; 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 'Manrope',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:#2A1D10; }     /* 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:'Manrope',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 kubka, haslo z nadruku) - to zwykly tekst,
   nie grafika. Dwie nazwy: app.js pisze .prod-linia, karty w HTML .prod-haslo. */
.prod-haslo, .prod-linia{ font-family:'Bodoni Moda',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 */
.prod-dol{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; }
.cena{ font-family:'Bodoni Moda',Georgia,serif; font-size:19px; font-weight:500; white-space:nowrap; }
.cena-stara{ font-family:'Manrope',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;
}
.filtr-grupa{ border-top:1px solid var(--line2); padding-top:16px; margin-top:16px; }
.filtr-grupa:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.filtr-grupa h4{
  font-family:'Manrope',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 'Manrope',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; }
.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 'Manrope',sans-serif; cursor:pointer; min-height:34px;
}
@media (hover:hover){ .tag-filtr:hover{ background:#EFDBCF; } }
.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(26,19,12,.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);
  transition:opacity .28s ease, transform .28s cubic-bezier(.32,.72,0,1), visibility .28s;
}
.szuflada.open{ opacity:1; visibility:visible; transform:none; }
.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:'Manrope',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:'Bodoni Moda',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:'Bodoni Moda',Georgia,serif; font-size:24px; font-weight:500; }
.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); }
.galeria-glowna img{ width:100%; aspect-ratio:3/4; 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:3/4; object-fit:cover; }
.karta h1{ font-size:clamp(26px,3.6vw,40px); margin:0 0 10px; }
.cena-duza{ font-family:'Bodoni Moda',Georgia,serif; font-size:31px; font-weight:500; margin:14px 0 6px; }
.wybor h4{
  font-family:'Manrope',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 kubka */
.personalizacja{ background:var(--akcent-jasny); border:1px solid rgba(168,83,43,.18); border-radius:16px; padding:16px 18px; margin-top:20px; }
.personalizacja h4{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6E3419; 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(168,83,43,.15); }
.personalizacja .nota{ color:var(--akcent-ciemny); margin-top:10px; }
.licznik-znakow{ font-size:12px; color:#6E3419; margin-top:7px; text-align:right; }   /* 8,2:1 - drobny tekst potrzebuje zapasu nad progiem */
.podglad-imienia{ font-family:'Bodoni Moda',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(168,83,43,.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:#E6F0E7; color:#1F5B33; }
.komunikat--blad{ background:#FBE9E4; color:#8E2F16; }
/* komunikat stojacy w sekcji na ciemnym tle - jasne pudelko z ciemnym tekstem trzyma kontrast */
.komunikat--noc{ background:#F4E8DF; color:#6B3418; }

/* ==========================================================================
   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;
  /* #6B5C4D, nie --muted: nieaktywna zakladka na --kremowy2 mialaby 4,37:1, a musi miec 4,5:1 */
  font:700 14px 'Manrope',sans-serif; color:#6B5C4D; 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 'Manrope',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 'Manrope',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:#6E3419; }   /* 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 'Manrope',sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px; white-space:nowrap; }
.status--w-drodze{ background:#E7F0FB; color:#1C4F8F; }
.status--gotowe{ background:#E6F4EC; color:#12492B; }   /* 9,2:1, bylo 5,7:1 */
.status--pakowane{ background:#FDF0E3; color:#6B3E0A; }  /* 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 'Manrope',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; }

.bon{ background:linear-gradient(135deg,var(--noc),#4A3624); color:#fff; border-radius:16px; padding:22px; }
.bon .kod{ font-family:'Bodoni Moda',Georgia,serif; font-size:26px; letter-spacing:.1em; margin:10px 0 4px; }
.bon p{ color:#D9C9B6; 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:#FDF0E3; color:#6B3E0A; }      /* to samo, co --pakowane */
.status--wyslane{ background:#E7F0FB; color:#1C4F8F; }      /* 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 */
.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 nadruki - TEKST w ramce, nigdy rysowany kubek */
.nadruki-lista{ display:grid; gap:12px; margin-top:16px; }
.nadruk-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;
}
.nadruk-zapis-t{ flex:1 1 200px; min-width:0; }
.nadruk-zapis-t b{ display:block; font-size:14.5px; margin-bottom:3px; }
.nadruk-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: #EFE7DE (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(--noc); color:#EFE7DE; padding:clamp(44px,6vw,64px) 0 26px; }
/* 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:'Manrope',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:#EFE7DE; }
footer a:hover{ color:#fff; }

/* IKONY SOCIAL W STOPCE (prosba klienta 13.08.2026): 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 kubki */
.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. Bramka QA 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(36,28,20,.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 'Manrope',sans-serif;
}
.str-btn.jest{ background:var(--akcent); border-color:var(--akcent); color:#fff; }
.str-btn[disabled]{ opacity:.4; cursor:default; }
@media (hover:hover){ .str-btn:not(.jest):not([disabled]):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:#12492B; 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:#8A3D12; }
.dostepnosc--brak{ color:#6B3E0A; }

/* 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:'Bodoni Moda',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:#FAF6F1; }
/* 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:#8A7F73; 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. */
.pep-scena{ background:var(--kremowy2); padding:16px; border-radius:12px; }
.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; }

.pep-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:14px;
  padding:16px; display:grid; grid-template-columns:200px 1fr; gap:18px; }
.pep-foto{ position:relative; aspect-ratio:3/4; 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:'Bodoni Moda',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:'Bodoni Moda',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:#6B3E0A; }
.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:#FDF6EF; 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:#FDF6EF; border-radius:10px; }
.sp-niedostepna .sp-nazwa small{ display:block; margin-top:2px; font-size:12px; color:#6B3E0A; }
.sp-usun{ border:1px solid var(--line); background:var(--bialy); color:#6B3E0A;
  border-radius:100px; padding:6px 14px; font:600 13px 'Manrope',sans-serif;
  cursor:pointer; min-height:36px; }
@media (hover:hover){ .sp-usun:hover{ border-color:#8A3D12; } }

.poz-uwaga{ margin:4px 0 0; font-size:12.5px; line-height:1.5; color:#6B3E0A; }
.pozycja--niedostepna .kwota{ color:#6B3E0A; font-weight:600; }
.koszyk-poz--znikl .kp-t b{ color:#6B3E0A; }
.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:#E6F4EC; color:#12492B; }
.pp-stan--ukryty{ background:#FDF0E3; color:#6B3E0A; }
/* 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:#E6F4EC; color:#12492B; }
.pp-stan--brak{ background:#FDF0E3; color:#6B3E0A; }
.pp-stan--szkic{ background:#ECE7E1; color:#3A3128; }

/* 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:#8C2F1B; border-color:#E0BDB2; }
@media (hover:hover){ .pp-usun:hover{ background:#8C2F1B; border-color:#8C2F1B; 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 kubku 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; } }
.soc small{ display:block; font-size:12.5px; opacity:.8; }
@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 rgba(255,255,255,.1); padding-top:18px;
  /* --muted2 dawal tu 5,5:1 - najciemniejszy wiersz calej stopki. */
  font-size:12.5px; color:#D8CCC0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
/* 8,7:1 zamiast 6,9:1 - drobny tekst 12,5 px potrzebuje zapasu */
.copy a{ color:#D9B584; }
.copy a:hover{ color:#E2C08A; }
/* "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; }
}

@media (max-width:860px){
  /* 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; }
  .nadruk-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 > *{ flex:1 1 100%; 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){
  .kafle > *:first-child:nth-last-child(4), .kafle > *:first-child:nth-last-child(4) ~ *,
  .produkty > *:first-child:nth-last-child(4), .produkty > *:first-child:nth-last-child(4) ~ *{
    flex:1 1 calc(50% - 11px) !important; max-width:calc(50% - 11px) !important;
  }
}
@media (max-width:600px){
  .kafle > *:first-child:nth-last-child(4), .kafle > *:first-child:nth-last-child(4) ~ *,
  .produkty > *:first-child:nth-last-child(4), .produkty > *:first-child:nth-last-child(4) ~ *{
    flex:1 1 100% !important; max-width:100% !important;
  }
}

/* ==========================================================================
   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 - makieta bywa drukowana do PDF przy prezentacji klientowi
   ========================================================================== */
@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 --- */
.wysylka-linia{
  display:flex; align-items:center; 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; fill:none; stroke:var(--akcent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.wysylka-linia b{ color:var(--ink); font-weight:600; }
.wysylka-linia .kropka{ opacity:.45; }

/* --- 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:'Manrope',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 13.08.2026).
   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 13.08.2026)
   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 (scripts/_sub-hero-kontrast.*), podloga 4,5:1. */
.hero--slajder .hero-bg::after{
  background:
    /* Po wysrodkowaniu tresci w pionie (13.08.2026) napisy stoja w polowie wysokosci,
       gdzie dotychczasowy scrim byl najslabszy. Ciezar przenosimy na gradient POZIOMY,
       bo blok tekstu siega do ~70% szerokosci. Wartosci dobrane pomiarem najjasniejszego
       piksela pod kazdym napisem na wszystkich szesciu slajdach. */
    linear-gradient(90deg,rgba(18,13,8,.95) 0%,rgba(18,13,8,.89) 42%,rgba(18,13,8,.74) 70%,rgba(18,13,8,.24) 90%,transparent 100%),
    linear-gradient(0deg,rgba(18,13,8,.76) 0%,rgba(18,13,8,.55) 45%,rgba(18,13,8,.28) 78%,transparent 96%);
}
.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:'Bodoni Moda',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:#F0C9A8; }

/* 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:#F5D6BA;
  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(26,19,12,.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(26,19,12,.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 bramka QA "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:#F0C9A8; 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:'Manrope',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 --- */
.punkt-szukaj{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.punkt-szukaj .pole{ flex:1 1 200px; margin:0; }
.punkt-wyniki{ margin-top:12px; }
.punkt-wynik{
  display:block; width:100%; text-align:left; cursor:pointer; margin-top:8px;
  background:var(--bialy); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font:inherit; color:var(--ink); min-height:var(--tap,44px);
}
.punkt-wynik b{ display:block; font-size:14.5px; }
.punkt-wynik small{ display:block; font-size:12.5px; color:var(--ink); opacity:.75; }
.punkt-wynik.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; }

/* --- 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:'Manrope',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; }

/* 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 rgba(255,255,255,.12);
}
@media (min-width:900px){ .newsletter{ grid-template-columns:minmax(0,1fr) minmax(0,460px); } }
.nl-tekst h4{ margin:0 0 6px; font-family:'Manrope',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 bramka
   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:#EFE7DE; }
.nl-zgoda input{ margin-top:1px; }
.newsletter .komunikat{ margin:0; color:#EFE7DE; }
.newsletter .komunikat.blad{ color:#F3C9AE; }

/* PROPONOWANE PRODUKTY (koszyk i panel) - wzor z SFD */
.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:"Bodoni Moda",Georgia,serif; font-weight:500; font-size:clamp(26px, 3.4vw, 38px); line-height:1.18; margin:6px 0 22px; }
.df-h3{ font-family:"Bodoni Moda",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:"Bodoni Moda",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:"Bodoni Moda",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:"Bodoni Moda",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:#F6EDE4; }
.df-h2-noc{ color:#FFFFFF; }
.df-eyebrow-noc{ color:var(--zloto); }
.df-nota-noc{ color:#E4D6C6; 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:"Bodoni Moda",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:#E4D6C6; 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:"Bodoni Moda",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:"Bodoni Moda",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(168,83,43,.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:"Bodoni Moda",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 jak despe-debki.pl/blog, 14.08.2026) ===============
   Rytm z despe: ciemny pas tytulowy -> jeden wpis wyrozniony -> pigulki kategorii
   -> siatka kart -> ciemny pas CTA. Kolory i typografia SubHouse: kremowe tlo,
   Bodoni Moda w naglowkach, terakota jako akcent, `--noc` na pasach. */

.bl-hero{ background:var(--noc); color:#F6EDE4; 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:"Bodoni Moda",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:#E4D6C6; }
.bl-okruszki{ margin:0; font-size:13.5px; color:#C9B7A4; }
.bl-okruszki a{ color:#E4D6C6; }
.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:"Bodoni Moda",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:"Bodoni Moda",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:#F6EDE4; padding:clamp(44px,6vw,74px) 0; text-align:center; }
.bl-cta-tyt{ font-family:"Bodoni Moda",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:#E4D6C6; 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 DESPE (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:#F6EDE4; 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:"Bodoni Moda",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:#E4D6C6; }
.kt-okruszki{ margin:0; font-size:13.5px; color:#C9B7A4; }
.kt-okruszki a{ color:#E4D6C6; }
.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:"Bodoni Moda",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:#F6EDE4; padding:clamp(40px,5.5vw,68px) 0; text-align:center; }
.kt-cta-tyt{ font-family:"Bodoni Moda",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:#E4D6C6; 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:"Bodoni Moda",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:#F3E7DA; }
.pod-hero-okruszki{ margin:0; font-size:13.5px; color:#D8C7B5; }
.pod-hero-okruszki a{ color:#F3E7DA; }
.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 'Manrope', 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 - bramka QA 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:#F6EDE4; 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:#F6EDE4; 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:#F6EDE4; border-radius:9px; padding:9px 16px; font:600 14px 'Manrope', 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; }

.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:'Manrope', system-ui, sans-serif; font-size:15px; font-weight:700; color:var(--ink); }
.pe-karta--groza{ border-color:rgba(168,83,43,.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:"Bodoni Moda",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:"Manrope",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:"Bodoni Moda",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 "Manrope",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:"Bodoni Moda",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:"Bodoni Moda",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 "Manrope",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. */

.sa{ background:var(--kremowy2); min-height:100vh; }
.sa-pasek{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:16px;
  background:var(--noc); color:#F6EDE4; 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:#C9B7A4; }   /* 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:#F6EDE4; font:inherit; font-size:14px; padding:9px 13px 9px 36px; min-height:40px; }
.sa-szukaj input::placeholder{ color:#C9B7A4; }
.sa-szukaj svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  stroke:#C9B7A4; fill:none; stroke-width:1.9; }
.sa-konto{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#E4D6C6; }
.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:#F6EDE4;
  border-radius:9px; padding:7px 13px; font:600 13px 'Manrope',system-ui,sans-serif; cursor:pointer; min-height:36px; }

.sa-uklad{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:0; align-items:start; }
.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 'Manrope',system-ui,sans-serif; color:var(--muted); cursor:pointer; }
.sa-poz svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sa-poz.akt{ background:var(--bialy); color:var(--ink); box-shadow:var(--cien); }
.sa-poz .sa-licznik{ margin-left:auto; background:var(--akcent-jasny); color:var(--akcent-ciemny);
  border-radius:999px; padding:2px 8px; font-size:12px; }
@media (hover:hover) and (pointer:fine){
  .sa-poz:hover{ background:rgba(255,255,255,.6); color:var(--ink); }
  .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:'Manrope',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; }
  .sa-poz{ width:auto; white-space:nowrap; }
  .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,
    transparent 0 235px, var(--line2) 235px 236px, transparent 236px);
}
@media (max-width:900px){
  .sa-uklad{ background:none; }
  .sa-menu{ border-bottom:1px solid var(--line2); }
}

/* --- 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 kubka 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(26,19,12,.55); border-color:rgba(255,255,255,.8); color:#fff; }
@media (hover:hover) and (pointer:fine){
  .pod-hero-akcje .btn--obrys:hover{ background:rgba(26,19,12,.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:"Bodoni Moda",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 KUBKA 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 kubkiem 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:"Bodoni Moda",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(36,28,20,.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:"Bodoni Moda",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(168,83,43,.25); font-size:14.5px; color:var(--akcent-ciemny); }
.dfk-cena b{ font-family:"Bodoni Moda",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 bramka QA
   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:"Bodoni Moda",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:#FCF4EF; 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 kubka (wzor od klienta 14.08.2026) --------------- */
.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 kubek 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(#FAF6F1 0 2px, #241C14 2px 4px, #FAF6F1 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 kubek i poduszka (14.08.2026) -------------- */
.dodatek-cena s{ color:var(--muted); font-weight:400; margin-right:4px; }
.dodatek-gratis{ color:#12492B; background:#E6F4EC; 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 kubek robi sie chudy. */
.pp-kol-foto{ width:108px; }
/* Zdjecie ma byc realnie widoczne, a nie ikonka - Maciek 14.08.2026: „te zdjęcia
   produktów muszą być większe". 76 px + luzniejszy wiersz, zeby kubek 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 kubka.
   ⚠️ 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:#FDF0E3; color:#6B3E0A; font-weight:700;
  font-family:inherit; font-size:11.5px; letter-spacing:0; }
.ad-wariant{ font-size:12px; color:var(--muted); }


/* ============================================================================
   KONFIGURATOR KUBKA (14.08.2026, wzor: shirtme.pl/projektuj)
   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 nadruku zlewajacym sie z kubkiem - informacja produkcyjna, nie estetyczna. */
.kf-ostrzezenie{ margin:0 auto 12px; padding:12px 16px; background:#FDF0E3; color:#6B3E0A;
  border:1px solid #E8C9A0; 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; }

.kf-uklad{ display:grid; grid-template-columns:110px minmax(0,1fr) 330px; gap:20px;
  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); }
.kf-kubek{ position:absolute; inset:0; }
.kf-kubek svg{ width:100%; height:100%; }
/* Pole nadruku lezy na FRONCIE narysowanego kubka - wspolrzedne odpowiadaja prostokatowi
   korpusu z  (x 96-296, y 72-236 przy plotnie 400x300).
   ⚠️ Zmieniasz rysunek kubka -> popraw te cztery liczby, inaczej pole zjedzie z korpusu. */
.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(168,83,43,.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(36,28,20,.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); }

.kf-produkty{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.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); }
.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:#FDF0E3; color:#6B3E0A; border:1px solid #E8C9A0;
  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(36,28,20,.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 nadruku (14.08.2026) -------------------- */
.kf-margines{ position:absolute; inset:7%; border:1px dashed rgba(168,83,43,.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
   kubku. 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 poduszce. */
.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. `.produkty` to flex z `flex:1 1 250px`, wiec JEDEN kafel rozciaga sie na
   cala szerokosc sekcji - kubek na pol ekranu obok pustki. Tutaj liczba kafli bierze sie
   z DANYCH (1-4 realne pary), wiec nie da sie jej „dopelnic" do czterech - trzeba
   utrzymac normalna szerokosc karty i wysrodkowac rzad.
   ⚠️ Widac to tylko na zrzucie: w kodzie kafel jest taki sam jak w kazdej innej siatce. */
/* Do LEWEJ, nie na srodek: naglowek sekcji jest wyrownany do lewej, wiec pojedyncza
   karta na srodku wygladala jak zgubiona. */
#razem{ justify-content:flex-start; }
#razem > *{ flex:0 1 280px; max-width:280px; }
@media (max-width:600px){ #razem > *{ flex:1 1 100%; 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; }