/* ============================================================
   Sellteo — design system
   Jeden plik, zero zależności zewnętrznych. Patrz BRAND.md.
   ============================================================ */

:root{
  --ink:#16181C; --ink-60:#5C6169; --ink-40:#8A8F97;
  --brand:#0F6F52; --brand-dk:#0A543E; --brand-soft:#E8F3EE;
  --amber:#F0A202; --amber-soft:#FFF4DC;
  --sand:#F8F5F0; --line:#E4E1DC; --white:#fff;
  --red:#C0392B;
  --r-card:10px; --r-field:8px; --r-pill:999px;
  --shadow:0 6px 24px rgba(22,24,28,.10);
  --shadow-sm:0 2px 8px rgba(22,24,28,.07);
  --container:1320px;
  --header-h:auto;
  --fast:.16s cubic-bezier(.2,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.18; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(28px,4vw,44px); letter-spacing:-.025em}
h2{font-size:clamp(22px,2.6vw,30px)}
h3{font-size:19px}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.section{padding:48px 0}
.section--sand{background:var(--sand)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.section__head p{margin:4px 0 0; color:var(--ink-60)}
.muted{color:var(--ink-60)}
.small{font-size:13px}
.center{text-align:center}
.stack>*+*{margin-top:12px}
/* Każdy display z arkusza (np. .btn{display:inline-flex}) bije regułę [hidden] z przeglądarki,
   więc element.hidden = true przestaje cokolwiek chować. Stąd ta jedna reguła na wszystko. */
[hidden]{display:none !important}

/* ---------------------------------------------------------- przyciski */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-pill); border:1px solid transparent;
  font-weight:700; font-size:15px; line-height:1; transition:background var(--fast),color var(--fast),border-color var(--fast);
  white-space:nowrap;
}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-dk)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); background:var(--white)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:#000}
.btn--block{width:100%}
.btn--lg{padding:15px 28px; font-size:16px}
.btn--sm{padding:8px 14px; font-size:13px}
.btn[disabled]{opacity:.45; pointer-events:none}

/* ---------------------------------------------------------- plakietki */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.01em;
}
.badge--stock{background:var(--brand-soft); color:var(--brand-dk)}
.badge--order{background:var(--sand); color:var(--ink-60); border:1px solid var(--line)}
.badge--promo{background:var(--amber); color:#3A2A00}
.badge--new{background:var(--ink); color:#fff}
/* gwarancja najniższej ceny — ustawiana w panelu (server/gwarancja.py) */
.badge--gwar{background:var(--ink); color:#fff}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

/* ---------------------------------------------------------- nagłówek */
.topbar{background:var(--ink); color:#fff; font-size:13px}
.topbar .container{display:flex; gap:24px; align-items:center; justify-content:center; height:36px; flex-wrap:wrap; overflow:hidden}
.topbar span{display:flex; align-items:center; gap:7px; white-space:nowrap}
.topbar svg{width:15px; height:15px; flex:none; opacity:.85}

.header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line)}
.header__main{display:flex; align-items:center; gap:20px; padding:14px 0}
.logo{display:flex; align-items:baseline; font-size:25px; font-weight:800; letter-spacing:-.035em; flex:none}
.logo i{color:var(--brand); font-style:normal}

.search{flex:1; position:relative; min-width:0}
.search input{
  width:100%; padding:12px 44px 12px 16px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--sand); font-size:15px;
}
.search input:focus{background:#fff; border-color:var(--brand); outline:none}
.search button{position:absolute; right:5px; top:5px; width:36px; height:36px; border:0; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center}
.search svg{width:17px; height:17px}
.search__results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow);
  max-height:min(62vh,460px); overflow:auto; display:none; z-index:70;
}
.search__results.is-open{display:block}
.search__item{display:flex; gap:12px; padding:10px 14px; align-items:center; border-bottom:1px solid var(--line)}
.search__item:last-child{border-bottom:0}
.search__item:hover{background:var(--sand)}
.search__item img{width:44px; height:44px; object-fit:contain; flex:none}
.search__item b{display:block; font-size:14px; font-weight:600; line-height:1.3}
.search__item span{font-size:13px; color:var(--brand); font-weight:700}

.header__actions{display:flex; align-items:center; gap:6px; flex:none}
.iconbtn{
  display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:var(--r-pill);
  border:0; background:transparent; font-size:14px; font-weight:600; position:relative;
}
.iconbtn:hover{background:var(--sand)}
.iconbtn svg{width:21px; height:21px}
.iconbtn__count{
  position:absolute; top:2px; left:26px; min-width:18px; height:18px; padding:0 5px;
  background:var(--brand); color:#fff; border-radius:var(--r-pill);
  font-size:11px; font-weight:800; display:grid; place-items:center;
}
.iconbtn__count:empty,.iconbtn__count[data-n="0"]{display:none}

.nav{border-top:1px solid var(--line)}
/* Pasek działów musi się mieścić w oknie — myszą nikt nie przewinie go w bok,
   więc zamiast paska przewijania zwężamy odstępy, a w ostateczności łamiemy do drugiego rzędu. */
/* jeden rząd — wyróżniona pozycja na końcu nie może spadać pod spód; gdy brakuje miejsca, skraca się ona sama (wielokropek) */
.nav .container{display:flex; gap:0; flex-wrap:nowrap; align-items:center}
.nav a{
  /* odstępy ciut węższe, żeby wyróżniona pozycja („Gwarancja ceny") mieściła się w jednym rzędzie */
  padding:13px 6px; font-size:14px; font-weight:600; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color var(--fast),border-color var(--fast);
}
.nav a:hover{color:var(--brand)}
.nav a.is-active{color:var(--brand); border-bottom-color:var(--brand)}
.nav a.nav__sale{color:var(--red); display:inline-flex; align-items:center; gap:6px; margin-left:auto}
.nav a.nav__sale svg{width:17px; height:17px; flex:none}
.nav a.nav__sale{flex:0 1 auto; min-width:0}
.nav a.nav__sale span{overflow:hidden; text-overflow:ellipsis}
.burger{display:none; border:0; background:transparent; padding:9px}
.burger svg{width:22px; height:22px}

/* ---------------------------------------------------------- karta produktu */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:border-color var(--fast),box-shadow var(--fast),transform var(--fast);
}
.card{cursor:pointer}
/* Stretched link: cała karta jest celem kliknięcia, ale w drzewie zostaje
   prawdziwy <a> z nazwą produktu. Opakowanie całej karty w <a> połknęłoby
   przycisk koszyka i zepsuło odczyt dla czytników ekranu. */
.card__name::after{content:""; position:absolute; inset:0; z-index:1}
.card__add, .card__fav{position:relative; z-index:2}
.card:hover{border-color:var(--ink-40); box-shadow:var(--shadow-sm); transform:translateY(-2px)}
/* zdjęcie powiększa się w kadrze — wydłuża kontakt z produktem */
.card__media{overflow:hidden}
.card__media img{transition:transform .45s cubic-bezier(.2,.6,.3,1)}
.card:hover .card__media img{transform:scale(1.06)}
.card__media{position:relative; aspect-ratio:1; background:var(--sand); padding:12px}
.card__media img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
/* Zastępnik, gdy zdjęcie nie doszło. Pusty prostokąt w siatce czyta się
   jak awaria strony — neutralne tło z inicjałem marki jest uczciwsze. */
.card__media--brak{display:grid; place-items:center; background:var(--sand)}
.card__media--brak span{font-size:30px; font-weight:800; color:var(--ink-40);
  letter-spacing:-.03em; user-select:none}
.card__flags{position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2}
.card__flags{max-width:calc(100% - 64px)}   /* nie wchodzi na serduszko — długa plakietka „Gwarancja najniższej ceny" łamie się w dwie linie */
.card__flags .badge{white-space:normal; line-height:1.2; text-align:left}
.card__flags .badge--gwar{border-radius:8px}
.card__fav{
  position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--line); display:grid; place-items:center; z-index:2;
}
.card__fav svg{width:17px; height:17px; fill:none; stroke:var(--ink); stroke-width:1.8}
.card__fav.is-on svg{fill:var(--red); stroke:var(--red)}
.card__body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.card__brand{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-40)}
.card__name{font-size:14px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
.card__meta{font-size:12px; color:var(--ink-60)}
.card__foot{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding-top:6px}
.price{font-size:20px; font-weight:800; letter-spacing:-.02em; white-space:nowrap}
/* Zielona cena TYLKO tam, gdzie jest gwarancja najniższej ceny — w pozostałych kartach czarna,
   inaczej kolor przestaje cokolwiek znaczyć. Klasę nadaje js/app.js i js/karuzela.js. */
.card--gwar .price,.of--gwar .of__kwota,.buy__price--gwar b{color:var(--brand)}
.price small{font-size:12px; font-weight:600; color:var(--ink-60); display:block; letter-spacing:0}
.price--old{font-size:13px; font-weight:600; color:var(--ink-40); text-decoration:line-through}
.card__add{
  width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff;
  border:0; display:grid; place-items:center; flex:none; transition:background var(--fast);
}
.card__add:hover{background:var(--brand-dk)}
.card__add svg{width:19px; height:19px}
.card__add.is-done{background:var(--ink)}

/* ---------------------------------------------------------- kafle kategorii */
.tiles{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tile{
  position:relative; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  background:var(--sand); display:flex; flex-direction:column; transition:border-color var(--fast),transform var(--fast);
}
.tile:hover{border-color:var(--brand); transform:translateY(-2px)}
.tile img{aspect-ratio:4/3; width:100%; object-fit:contain; padding:14px; mix-blend-mode:multiply}
.tile__body{padding:0 16px 16px}
.tile b{display:block; font-size:16px; font-weight:700}
.tile span{font-size:13px; color:var(--ink-60)}

/* ---------------------------------------------------------- USP */
.usp{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.usp__item{display:flex; gap:13px; align-items:flex-start; padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-card)}
.usp__item svg{width:24px; height:24px; flex:none; color:var(--brand)}
.usp__item b{display:block; font-size:15px; margin-bottom:2px}
.usp__item span{font-size:13px; color:var(--ink-60); line-height:1.5}

/* ---------------------------------------------------------- formularze */
.field{display:block; margin-bottom:14px}
.field>span{display:block; font-size:13px; font-weight:600; margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r-field); background:#fff; font-size:15px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand); outline:none}
.field textarea{min-height:120px; resize:vertical}
.field--err input,.field--err select,.field--err textarea{border-color:var(--red)}
.field__err{display:none; color:var(--red); font-size:12.5px; margin-top:4px; font-weight:600}
.field--err .field__err{display:block}
.row2{display:grid; gap:0 14px; grid-template-columns:1fr 1fr}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; margin-bottom:12px; color:var(--ink-60)}
.check input{width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--brand)}
.check a{color:var(--brand); text-decoration:underline}

/* ---------------------------------------------------------- panele / boxy */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:22px}
.panel--sand{background:var(--sand)}
.note{padding:14px 16px; border-radius:var(--r-field); background:var(--brand-soft); color:var(--brand-dk); font-size:14px; font-weight:600}
.note--warn{background:var(--amber-soft); color:#6A4A00}

/* ---------------------------------------------------------- breadcrumb */
.crumbs{display:flex; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--ink-60); padding:16px 0}
.crumbs a:hover{color:var(--brand); text-decoration:underline}
.crumbs span{color:var(--ink-40)}

/* ---------------------------------------------------------- artykuł / proza */
.prose{max-width:760px}
.prose h2{margin-top:1.6em; font-size:24px}
.prose h3{margin-top:1.4em; font-size:18px}
.prose ul,.prose ol{padding-left:22px; margin:0 0 1em}
.prose li{margin-bottom:.45em}
.prose a{color:var(--brand); text-decoration:underline}
.prose table{width:100%; border-collapse:collapse; margin:0 0 1.5em; font-size:14px}
.prose th,.prose td{padding:10px 12px; border:1px solid var(--line); text-align:left; vertical-align:top}
.prose th{background:var(--sand); font-weight:700}
.page-head{padding:34px 0 6px; border-bottom:1px solid var(--line); margin-bottom:34px}
.page-head p{color:var(--ink-60); max-width:680px; margin:0}

/* ---------------------------------------------------------- stopka */
.footer{background:var(--ink); color:#C9CDD3; margin-top:56px; font-size:14px}
.footer a:hover{color:#fff; text-decoration:underline}
.footer__grid{display:grid; gap:30px; grid-template-columns:1.4fr repeat(3,1fr); padding:48px 0 36px}
.footer h4{color:#fff; font-size:14px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:9px}
.footer .logo{color:#fff; margin-bottom:12px}
.footer__about{max-width:330px; line-height:1.65; color:#9AA1AA}
.footer__pay{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.footer__pay span{padding:5px 10px; border:1px solid #33383F; border-radius:5px; font-size:11px; font-weight:700; color:#9AA1AA}
.footer__news{display:grid; gap:14px 40px; grid-template-columns:1fr 1.3fr; align-items:start; padding:34px 0 30px; border-bottom:1px solid #2A2F36}
.footer__news h4{margin-bottom:8px}
.footer__news p{margin:0; color:#9AA1AA; max-width:420px}
.footer__news-pola{display:flex; gap:8px; margin-bottom:10px}
.footer__news-pola input{flex:1; min-width:0; padding:11px 13px; border:1px solid #3A4048; border-radius:var(--r-field); background:#1F2328; color:#fff}
.footer__news-pola input:focus{border-color:#6FBFA3; outline:none}
.footer__news .check{color:#9AA1AA; font-size:12.5px; margin:0}
.footer__news .check a{color:#C9CDD3}
.footer__news-msg{display:block; font-style:normal; font-size:13px; font-weight:600; color:#8FD6BC; margin-top:8px; min-height:1em}
@media (max-width:760px){ .footer__news{grid-template-columns:1fr} }
.footer__bar{border-top:1px solid #2A2F36; padding:18px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#8A9199}

/* ---------------------------------------------------------- pusty stan / loader */
.empty{text-align:center; padding:70px 20px; color:var(--ink-60)}
.empty svg{width:52px; height:52px; color:var(--line); margin:0 auto 14px}
.skeleton{background:linear-gradient(90deg,var(--sand) 25%,#EFEBE4 37%,var(--sand) 63%); background-size:400% 100%; animation:sk 1.3s ease infinite; border-radius:var(--r-card)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------------------------------------------------------- toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,120%);
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600; z-index:200; box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.3,1); display:flex; gap:10px; align-items:center;
}
.toast.is-on{transform:translate(-50%,0)}
.toast svg{width:18px; height:18px; color:#6FD3A8}

/* ---------------------------------------------------------- gwarancja najniższej ceny
   Rząd na stronie głównej i na górze kategorii. Treść i objęte produkty ustawia panel
   (data/gwarancja.js ← server/gwarancja.py); rysuje Sellteo.gwarancjaRzad w js/app.js. */
.gwar{border:1px solid var(--line); border-radius:var(--r-card); background:#fff; padding:16px 18px 6px; margin-bottom:22px}
.gwar__glowa{display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-bottom:12px}
.gwar__tarcza{flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
    background:var(--brand-soft); color:var(--brand-dk)}
.gwar__tarcza svg{width:21px; height:21px}
.gwar h2{font-size:19px; font-weight:800; letter-spacing:-.01em}
.gwar p{font-size:13.5px; color:var(--ink-60); margin-top:2px}
.gwar--duza{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:26px 28px;
  background:linear-gradient(180deg,var(--brand-soft),#fff); border-color:#CFE5DA}
.gwar--duza .gwar__tarcza{width:58px; height:58px; background:#fff; color:var(--brand)}
.gwar--duza .gwar__tarcza svg{width:30px; height:30px}
.gwar--duza h1{font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.1}
.gwar--duza p{font-size:15px; margin-top:6px; color:var(--ink-60); max-width:70ch}
.gwar__ile{display:inline-block; margin-top:9px; padding:4px 11px; border-radius:var(--r-pill);
  background:#fff; border:1px solid #CFE5DA; color:var(--brand-dk); font-size:13px; font-weight:700}
@media (max-width:640px){ .gwar--duza{padding:20px 16px; gap:12px} }
.gwar__link{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--brand-dk); text-decoration:underline}
@media (max-width:640px){ .gwar{padding:14px 14px 4px} .gwar__link{margin-left:0} }

/* ---------------------------------------------------------- koszyk z boku
   Wysuwa się po dodaniu produktu i po kliknięciu ikony koszyka (js/app.js).
   Ten sam komponent obsługuje sklepy marek — kolor bierze z --brand, więc
   marka podmienia zmienną i szuflada jest w jej kolorze. */
html.ma-szuflade{overflow:hidden}
.kbok{position:fixed; inset:0; z-index:300}
.kbok__tlo{position:absolute; inset:0; background:rgba(22,24,28,.44); opacity:0; transition:opacity .24s ease}
.kbok.is-on .kbok__tlo{opacity:1}
.kbok__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(430px,100%); background:#fff;
  display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(22,24,28,.18);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
.kbok.is-on .kbok__panel{transform:none}
.kbok__glowa{display:flex; align-items:center; gap:12px; padding:17px 20px; border-bottom:1px solid var(--line)}
.kbok__glowa b{display:block; font-size:17px; font-weight:800}
.kbok__licz{font-size:13px; color:var(--ink-60)}
.kbok__x{margin-left:auto; flex:none; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-pill); background:#fff; color:var(--ink-60)}
.kbok__x:hover{background:var(--sand); color:var(--ink)}
.kbok__x svg{width:17px; height:17px}
.kbok__tresc{flex:1; min-height:0; display:flex; flex-direction:column}
.kbok__lista{flex:1; overflow-y:auto; padding:6px 20px 12px; -webkit-overflow-scrolling:touch}

.kbok__poz{display:grid; grid-template-columns:74px minmax(0,1fr); gap:13px; padding:15px 0;
  border-bottom:1px solid var(--line)}
.kbok__poz.is-nowa{background:var(--brand-soft); box-shadow:0 0 0 10px var(--brand-soft); border-radius:4px}
.kbok__foto{border:1px solid var(--line); border-radius:8px; background:var(--sand); padding:5px; aspect-ratio:1}
.kbok__foto img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.kbok__foto--brak{background:var(--sand)}
.kbok__opis{min-width:0}
.kbok__nazwa{display:block; font-size:14px; font-weight:600; line-height:1.35; margin-bottom:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.kbok__szt{display:block; font-size:12.5px; color:var(--ink-60)}
.kbok__dol{display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap}
.kbok__ilosc{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden}
.kbok__ilosc button{width:30px; height:32px; border:0; background:#fff; font-weight:700; color:var(--ink-60); font-size:15px}
.kbok__ilosc button:hover{background:var(--sand); color:var(--ink)}
.kbok__ilosc input{width:36px; height:32px; border:0; text-align:center; font-weight:700; font-size:14px;
  -moz-appearance:textfield; background:#fff; color:inherit}
.kbok__ilosc input::-webkit-outer-spin-button,.kbok__ilosc input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.kbok__kwota{font-size:15px; font-weight:800; margin-left:auto}
.kbok__usun{flex-basis:100%; text-align:left; border:0; background:0; padding:0; color:var(--ink-40);
  font-size:12.5px; text-decoration:underline}
.kbok__usun:hover{color:var(--red)}

.kbok__stopka{flex:none; border-top:1px solid var(--line); padding:15px 20px 18px; background:#fff;
  box-shadow:0 -6px 18px rgba(22,24,28,.06); display:grid; gap:9px}
.kbok__prog{font-size:13px; color:var(--ink-60)}
.kbok__prog b{color:var(--ink)}
.kbok__prog.is-ok{color:var(--brand-dk); font-weight:700}
.kbok__prog i{display:block; height:6px; background:var(--sand); border-radius:99px; overflow:hidden; margin-top:7px}
.kbok__prog em{display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .3s}
.kbok__suma{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:15px}
.kbok__suma b{font-size:22px; font-weight:800}
.kbok__vat{font-size:12px; color:var(--ink-40); margin-top:-4px}
.kbok__dalej{border:0; background:0; padding:4px 0 0; color:var(--ink-60); font-size:13.5px; text-decoration:underline}
.kbok__dalej:hover{color:var(--ink)}
.kbok__info{margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-60); background:var(--sand);
  border-radius:var(--r-field); padding:9px 11px}
.kbok__pusto{flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:30px 24px; gap:8px}
.kbok__pusto svg{width:46px; height:46px; color:var(--line); margin:0 auto 6px}
.kbok__pusto b{font-size:17px}
.kbok__pusto p{color:var(--ink-60); font-size:14px; margin:0 0 10px}
@media (max-width:520px){
  .kbok__panel{width:100%}
  .kbok__lista{padding:2px 15px 10px}
  .kbok__stopka{padding:13px 15px 16px}
}
@media (prefers-reduced-motion:reduce){
  .kbok__panel,.kbok__tlo{transition:none}
}

/* ---------------------------------------------------------- zakupy dla firm (B2B)
   Sekcja nad stopką strony głównej: z lewej korzyści, z prawej formularz,
   który zapisuje zapytanie w panelu (POST /api/b2b). */
.b2b{scroll-margin-top:90px}
.b2b__opis{min-width:0}
.toast__cta{margin-left:14px; color:#fff; font-weight:700; text-decoration:underline; white-space:nowrap; pointer-events:auto}

/* ---------------------------------------------------------- wszystkie kategorie (mega menu) */
.nav__kategorie{display:flex; align-items:center; gap:8px; flex:none; margin-right:4px; padding:12px 12px;
  border:0; background:var(--ink); color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.nav__kategorie svg{width:18px; height:18px}
.mega{position:absolute; left:0; right:0; top:100%; z-index:70; background:#fff; border-top:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.14)}
.mega__uklad{display:grid; grid-template-columns:260px minmax(0,1fr); height:min(74vh,600px)}
.mega__dzialy{list-style:none; margin:0; padding:12px 0; border-right:1px solid var(--line); overflow-y:auto}
.mega__dzial{display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; font-size:14.5px; font-weight:600;
  border-radius:8px 0 0 8px; color:var(--ink)}
.mega__dzial svg{width:21px; height:21px; flex:none; color:var(--ink-60)}
.mega__dzial span{margin-left:auto; font-size:12px; font-weight:500; color:var(--ink-40)}
.mega__dzial.is-on{background:var(--brand-soft); color:var(--brand-dk)}
.mega__dzial.is-on svg{color:var(--brand)}
.mega__panel{padding:20px 0 24px 32px; overflow-y:auto}
.mega__tytul{display:flex; align-items:baseline; gap:12px; margin-bottom:18px}
.mega__tytul a{font-size:21px; font-weight:800; letter-spacing:-.02em}
.mega__tytul span{font-size:13px; color:var(--ink-40)}
.mega__tresc{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:32px; align-items:start}
.mega__kolumny{columns:3 180px; column-gap:28px}
.mega__pod{break-inside:avoid; margin-bottom:22px}
.mega__podtytul{display:block; font-size:14.5px; font-weight:800; margin-bottom:6px}
.mega ul{list-style:none; margin:0; padding:0}
.mega__pod li a{display:block; padding:3px 0; font-size:14px; color:var(--ink-60)}
.mega__pod span{font-size:12px; font-weight:500; color:var(--ink-40)}
.mega__wiecej{color:var(--brand)!important; font-weight:600}
.mega__boczne{border-left:1px solid var(--line); padding-left:24px}
.mega__boczne h4{font-size:14.5px; font-weight:800; margin:0 0 6px}
.mega__boczne ul{margin-bottom:18px}
.mega__boczne li a{display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:14px; color:var(--ink-60)}
.mega__boczne li span{font-size:12px; color:var(--ink-40)}
.mega__polecane a{display:grid; grid-template-columns:52px 1fr; column-gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line)}
.mega__polecane img{grid-row:span 2; width:52px; height:52px; object-fit:contain; background:var(--sand); border-radius:6px; mix-blend-mode:multiply}
.mega__polecane span{font-size:13px; line-height:1.3; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mega__polecane b{font-size:14px}
.mega a:hover,.mega a:hover span{color:var(--brand)}
.mega__mobilny{display:none}
@media (max-width:1100px){
  .mega__tresc{grid-template-columns:1fr}
  .mega__boczne{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:16px}
}
@media (max-width:760px){
  /* na telefonie pełny ekran z własnym przewijaniem — przyklejony nagłówek bywa wyższy niż ekran */
  .mega{position:fixed; inset:0; z-index:90; overflow-y:auto; box-shadow:none; border-top:0}
  .mega__mobilny{display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1;
    padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); font-size:17px}
  .mega__mobilny button{border:0; background:none; font-size:30px; line-height:1; padding:0 4px; color:var(--ink)}
  .mega__uklad{grid-template-columns:1fr; height:auto}
  .mega__dzialy{border-right:0; padding:4px 0}
  .mega__panel{padding:10px 0 18px}
  .mega__kolumny{columns:1}
  .mega__boczne{display:none}
}

/* ---------------------------------------------------------- sklepy marek w nagłówku */
.sklepy{background:var(--sand); border-top:1px solid var(--line)}
.sklepy .container{display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:6px;
  padding-top:8px; padding-bottom:8px}
.sklepy .container::-webkit-scrollbar{display:none}
.sklepy b{flex:none; font-size:13px; margin-right:4px}
.sklepy a{flex:none; display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:99px;
  background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--k)}
.sklepy a svg{flex:none}
.sklepy a:hover{background:var(--k); border-color:var(--k); color:#fff}
.b2b__in{display:grid; gap:48px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start}
.b2b__znak{margin-bottom:14px}
.b2b__lead{font-size:16.5px; color:var(--ink-60); max-width:470px; margin-bottom:26px}
.b2b__zalety{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:18px}
.b2b__zalety li{display:flex; gap:14px; align-items:flex-start}
.b2b__zalety i{width:36px; height:36px; flex:none; border-radius:50%; background:var(--brand-soft);
  color:var(--brand); display:grid; place-items:center}
.b2b__zalety svg{width:18px; height:18px}
.b2b__zalety b{display:block; font-size:15.5px; margin-bottom:1px}
.b2b__zalety span{font-size:14px; color:var(--ink-60); line-height:1.5}
.b2b__kontakt{font-size:14px; color:var(--ink-60); padding-top:18px; border-top:1px solid var(--line); max-width:470px; margin:0}
.b2b__kontakt a{color:var(--brand); font-weight:700; text-decoration:underline; white-space:nowrap}
.b2b__form{padding:28px 28px 24px}
.b2b__form h3{font-size:21px; margin-bottom:2px}
.b2b__wstep{margin-bottom:18px}
.b2b__opc{font-style:normal; font-weight:500; color:var(--ink-40); margin-left:4px}
.b2b__form textarea{min-height:110px}
/* pole z błędem zostaje czerwone także po kliknięciu w nie */
.b2b__form .field--err input:focus,.b2b__form .field--err select:focus,.b2b__form .field--err textarea:focus{border-color:var(--red)}
.b2b__zgoda .check{margin-bottom:0}
.b2b__zgoda .check input{padding:0; border:0; background:none}
.b2b__zgoda .field__err{margin-left:28px}
/* poza ekranem zamiast display:none — część botów pomija ukryte pola */
.b2b__pulapka{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.b2b__komunikat{padding:12px 14px; border-radius:var(--r-field); background:#FBEAE8; color:#8E2A1F;
  font-size:14px; font-weight:600; line-height:1.5}
.b2b__komunikat a{text-decoration:underline; white-space:nowrap}
.b2b__wyslij{min-width:220px}
.b2b__wyslij[disabled]{opacity:.7; cursor:progress}
.b2b__nota{margin:12px 0 0}
.b2b__done{padding:10px 0 6px; outline:none}
.b2b__done i{width:48px; height:48px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; margin-bottom:14px}
.b2b__done i svg{width:24px; height:24px}
.b2b__done h3{font-size:22px}
.b2b__done p{color:var(--ink-60); max-width:460px}
.b2b__done a{color:var(--brand); font-weight:700; text-decoration:underline; white-space:nowrap}
@media (max-width:900px){ .b2b__in{grid-template-columns:1fr; gap:28px} }
@media (max-width:520px){
  .b2b__form{padding:20px 16px 18px}
  .b2b__wyslij{width:100%; min-width:0}
  .b2b__kontakt a{white-space:normal}
}

/* ---------------------------------------------------------- karuzele towaru (js/karuzela.js)
   Rząd kart przewijany w bok bez końca: strzałki, przeciąganie myszą, palcem na telefonie.
   Na telefonie widać kawałek następnej karty — to mówi „przewiń”, zanim ktoś spróbuje. */
.pas{padding:20px 0 6px}
.pas__glowa{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px}
.pas__glowa h2{font-size:clamp(20px,2vw,25px); margin:0; letter-spacing:-.02em}
.pas__glowa a{font-size:14px; font-weight:700; color:var(--brand); white-space:nowrap}
.pas__glowa a:hover{text-decoration:underline}
.karuzela{position:relative; --na-ekranie:6; --odstep:12px}
.karuzela__tor{display:flex; gap:var(--odstep); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:none; padding:2px 0 10px}
.karuzela__tor::-webkit-scrollbar{display:none}
.karuzela__tor > *{flex:0 0 calc((100% - (var(--na-ekranie) - 1) * var(--odstep)) / var(--na-ekranie));
  scroll-snap-align:start; min-width:0}
.karuzela.is-ciag .karuzela__tor{cursor:grabbing; scroll-snap-type:none; user-select:none}
.karuzela.is-ciag .karuzela__tor *{pointer-events:none}
.karuzela__strz{position:absolute; top:calc(50% - 32px); z-index:4; width:46px; height:46px; border-radius:50%;
  border:0; background:#fff; color:var(--ink); box-shadow:0 3px 14px rgba(22,24,28,.18); cursor:pointer;
  display:grid; place-items:center; transition:transform var(--fast), opacity var(--fast)}
.karuzela__strz:hover{transform:scale(1.08)}
.karuzela__strz svg{width:22px; height:22px}
.karuzela__strz--l{left:-16px}
.karuzela__strz--p{right:-16px}
.karuzela__strz[disabled]{opacity:0; pointer-events:none}

/* karta oferty: zdjęcie, cena dużo, nazwa w dwóch liniach, dostawa */
.of{position:relative; display:flex; flex-direction:column; background:#fff; border-radius:var(--r-card);
  padding:12px 12px 14px; cursor:pointer; transition:box-shadow var(--fast)}
.of:hover{box-shadow:0 4px 18px rgba(22,24,28,.12)}
.of__foto{position:relative; display:block; aspect-ratio:1; margin-bottom:10px; overflow:hidden; border-radius:6px; background:#fff}
.of__foto img{width:100%; height:100%; object-fit:contain; transition:transform .35s cubic-bezier(.2,.6,.3,1);
  -webkit-user-drag:none}
.of:hover .of__foto img{transform:scale(1.045)}
/* zdjęcie czeka na swoją kolej (js/karuzela.js, leniwe) — bez tego mignąłby tekst alt */
img[data-src]{opacity:0}
.of__foto img,.kat img{transition:opacity .25s ease, transform .35s cubic-bezier(.2,.6,.3,1)}
.of__foto--brak{display:grid; place-items:center; background:var(--sand); font-size:34px; font-weight:800; color:var(--ink-40)}
.of__znak{position:absolute; left:0; top:0; z-index:1; padding:4px 8px; font-size:11.5px; font-weight:800;
  color:#fff; background:var(--brand); border-radius:0 0 6px 0}
.of__serce{position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0;
  background:rgba(255,255,255,.94); display:grid; place-items:center; cursor:pointer}
.of__serce svg{width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.8}
.of__serce:hover svg{stroke:var(--red)}
.of__serce.is-on svg{fill:var(--red); stroke:var(--red)}
.of__cena{display:flex; align-items:center; justify-content:space-between; gap:8px}
.of__kwota{font-weight:800; letter-spacing:-.02em; line-height:1; white-space:nowrap; color:var(--ink)}
.of__kwota b{font-size:25px}
.of__kwota sup{font-size:13px; vertical-align:top; position:relative; top:2px; margin-left:1px}
.of__kup{flex:none; width:40px; height:40px; border-radius:50%; border:0; background:var(--brand); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background var(--fast), transform var(--fast)}
.of__kup:hover{background:var(--brand-dk); transform:scale(1.07)}
.of__kup svg{width:20px; height:20px}
.of__kup.is-done{background:var(--ink)}
.of__nazwa{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:7px 0 8px; font-size:14px; line-height:1.36; min-height:2.72em; color:var(--ink)}
.of__nazwa:hover{color:var(--brand)}
.of__dost{margin-top:auto; font-size:12.5px; font-weight:700; color:var(--brand)}
.of__dost--pozniej{color:var(--ink-60); font-weight:600}
.of__dost i{font-style:normal; font-weight:600; color:var(--ink-60)}

@media (max-width:1240px){ .karuzela{--na-ekranie:5} }
@media (max-width:1020px){ .karuzela{--na-ekranie:4} }
@media (max-width:760px){
  .karuzela{--na-ekranie:2.35; --odstep:10px}
  .karuzela__strz{display:none}
  .pas{padding:16px 0 4px}
  .of{padding:9px 9px 11px}
  .of__kwota b{font-size:21px}
  .of__kup{width:36px; height:36px}
  .of__nazwa{font-size:13px}
}
@media (hover:none){ .karuzela__strz{display:none} }

/* ---------------------------------------------------------- responsywność */
@media (max-width:1500px){ .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} }
@media (max-width:1340px){ .nav a{padding:12px 5px; font-size:13.5px} .nav__kategorie{padding:11px 10px; font-size:13.5px} }
@media (max-width:1279px){ .nav .container{flex-wrap:wrap} }
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr 1fr; gap:26px}
  .section{padding:36px 0}
}
@media (max-width:760px){
  .header__main{gap:12px; flex-wrap:wrap; padding:11px 0}
  .search{order:3; flex-basis:100%}
  .burger{display:block}
  .nav{display:none}
  .nav.is-open{display:block}
  .nav .container{flex-direction:column}
  .iconbtn span{display:none}
  .grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .row2{grid-template-columns:1fr}
  .topbar .container{height:auto; padding:8px 20px; gap:14px; font-size:12px}
}
@media (max-width:520px){
  .footer__grid{grid-template-columns:1fr}
  .card__name{font-size:13.5px}
  .price{font-size:18px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ---------------------------------------------------- nagłówek na telefonie
   Pasek zalet łamał się na dwa wiersze, a osiem sklepów marek na cztery — razem z wyszukiwarką
   nagłówek zajmował 427 px z 844. Oba paski idą w jeden przewijany rząd. */
@media (max-width:760px){
  .topbar .container{flex-wrap:nowrap; justify-content:flex-start; height:32px; padding:0 16px; gap:18px;
    overflow-x:auto; scrollbar-width:none}
  .topbar .container::-webkit-scrollbar{display:none}
  .sklepy .container{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-top:7px; padding-bottom:7px}
  .sklepy a{padding:5px 12px; font-size:13px}
}

/* ---------------------------------------------------- układ nie skacze przy ładowaniu
   Nagłówek i stopkę wstawia skrypt, a towar przychodzi z plików danych — bez zarezerwowanego miejsca
   treść zjeżdżała w dół po wczytaniu (CLS 0,24–0,47; dobry wynik to poniżej 0,1). */
[data-header]{min-height:219px}
[data-grid]:empty, [data-row-stock]:empty, [data-row-pool]:empty, [data-tiles]:empty, [data-marki]:empty{min-height:70vh}
[data-filters]{min-height:70vh}
main.container{min-height:100vh}
@media (max-width:760px){
  [data-header]{min-height:262px}
}

/* ---------------------------------------------------- telefon: nagłówek w jednym wierszu
   Logo i ikony spadały do dwóch wierszy (cztery ikony po 47 px nie mieściły się obok logo).
   Telefon do sklepu jest w pasku zalet i w stopce, więc jego ikona może zniknąć. */
@media (max-width:760px){
  .header__main{row-gap:8px}
  .header__actions{margin-left:auto; gap:2px}
  .header__actions .iconbtn{min-width:44px; min-height:44px; padding:8px; justify-content:center}
  .header__actions a[href*="kontakt"]{display:none}
  [data-header]{min-height:214px}
}

/* siatka nie pozwalała dzieciom się kurczyć (min-width:auto), więc tabela dostaw i spisy treści
   wypychały stronę do 830 px na telefonie */
main.container > *, main.container > * > *, .prose, .panel{min-width:0}
.prose, .panel, aside{max-width:100%; overflow-wrap:anywhere}
.scroller{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
@media (max-width:760px){
  main.container [class*="__side"], main.container [class*="__toc"]{position:static; width:auto; max-width:100%}
  main.container [class*="grid"], main.container [class$="__in"], .reg, .priv{grid-template-columns:minmax(0,1fr)}
}

/* drobne szare napisy miały kontrast 3,2:1 (marka na karcie) i 2,9:1 (stopka) — poniżej progu czytelności */
.card__brand{color:var(--ink-60)}
.footer .muted, .footer small, .footer__bottom{color:rgba(255,255,255,.72)}
.card__fav{width:40px; height:40px}

/* dymek na telefonie: tekst łamał się słowo po słowie w kulę i zasłaniał pasek zakupu */
@media (max-width:760px){
  .toast{width:max-content; max-width:calc(100vw - 24px); border-radius:14px; padding:12px 16px; font-size:14px;
    align-items:flex-start; text-align:left}
  .toast__cta{margin-left:10px}
  body.ma-pasek .toast{bottom:92px}
}

/* ---------------------------------------------------- konto w nagłówku (lista po najechaniu, jak na Allegro) */
.konto{position:relative}
.konto__menu{
  position:absolute; top:100%; right:0; z-index:80; width:280px; margin-top:6px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 40px rgba(20,30,25,.16);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility 0s .15s;
}
.konto__menu::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}   /* most nad szczeliną — kursor nie gubi listy */
.konto:hover .konto__menu,.konto:focus-within .konto__menu{opacity:1; visibility:visible; transform:none; transition:opacity .15s, transform .15s}
.konto__glowa{padding:16px 16px 12px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px}
.konto__glowa b{font-size:16px}
.konto__glowa span{font-size:13px; color:var(--muted,#6b7280); overflow-wrap:anywhere}
.konto__glowa .btn{margin-top:10px}
.konto__zaloz{font-size:13px; text-align:center; margin-top:4px}
.konto__menu nav{display:flex; flex-direction:column; padding:6px}
.konto__menu nav a{display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:8px; font-size:14px}
.konto__menu nav a:hover{background:var(--sand)}
.konto__menu nav em{font-style:normal; font-size:12px; font-weight:700; background:var(--sand); border-radius:999px; padding:1px 8px}
.konto__wyloguj{display:block; width:100%; text-align:left; padding:12px 16px; border:0; border-top:1px solid var(--line);
  background:none; font:inherit; font-size:14px; color:var(--muted,#6b7280); cursor:pointer; border-radius:0 0 12px 12px}
.konto__wyloguj:hover{background:var(--sand); color:inherit}
.konto.is-zalogowany>.iconbtn span{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (hover:none){ .konto__menu{display:none} }   /* dotyk: klik prowadzi prosto do konta */