/* ============================================================
   Wspólny fundament layoutów sklepowych.
   Tu siedzi wyłącznie mechanika: reset, siatka, karta produktu.
   Wygląd robią zmienne, które każdy layout nadpisuje u siebie.
   ============================================================ */
:root{
  --brand:#0F6F52; --accent:#F0A202; --bg:#FAF8F4; --surface:#fff;
  --ink:#16181C; --ink-60:#5C6169; --ink-40:#8A8F97; --line:#E4E1DC;
  --r:10px; --r-pill:999px;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --kolumny:4;
  --karta-gap:18px;
  --container:1320px;
  --fast:.16s ease;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 var(--body); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0; font-family:var(--display); line-height:1.15; text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.kontener{max-width:var(--container); margin:0 auto; padding:0 22px}
.sekcja{padding:46px 0}
.sekcja--tlo{background:var(--surface)}
.sekcja__h{display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px}
.sekcja__h h2{font-size:clamp(21px,2.6vw,29px); font-weight:800; letter-spacing:-.02em}
.sekcja__h p{color:var(--ink-60); font-size:14.5px; margin-top:4px}
.cicho{color:var(--ink-60)} .mini{font-size:13px} .srodek{text-align:center}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border:1px solid transparent; border-radius:var(--r-pill);
  font-weight:700; font-size:15px; line-height:1; transition:background var(--fast),border-color var(--fast)}
.btn--glowny{background:var(--brand); color:#fff}
.btn--glowny:hover{filter:brightness(1.12)}
.btn--lekki{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--lekki:hover{border-color:var(--ink-40)}
.btn--akcent{background:var(--accent); color:#1A1206}
.btn--maly{padding:8px 15px; font-size:13.5px}

.plakietka{display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:var(--r-pill); font-size:12px; font-weight:700}
.plakietka--ok{background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand)}
/* Procent rabatu jest jedynym dowodem społecznym, który mamy z danych —
   więc na karcie ma być liczbą najmocniejszą. Stąd większy stopień i cień. */
.plakietka--akcent{background:var(--accent); color:#1A1206; font-size:13.5px;
  padding:5px 11px; letter-spacing:-.01em; box-shadow:0 2px 8px rgba(0,0,0,.14)}
/* Stan magazynowy 1–3 szt. — prawdziwy, więc wolno go pokazać, ale ciszej
   niż procent: kontur zamiast plamy koloru. */
.plakietka--ostatnie{background:var(--surface); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line))}
.plakietka--ostatnie .kropka{background:var(--accent)}
.plakietka--cicha{background:var(--bg); color:var(--ink-60); border:1px solid var(--line)}
/* Gwarancja najniższej ceny — ta sama obietnica co w Sellteo, lista objętych z data/gwarancja.js. */
.plakietka--gwar{background:var(--ink); color:#fff}
.kropka{width:6px; height:6px; border-radius:50%; background:currentColor}

/* ---------------------------------------------------- siatka produktów */
.siatka{display:grid; gap:var(--karta-gap);
  grid-template-columns:repeat(var(--kolumny),minmax(0,1fr))}
.karta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:border-color var(--fast),transform var(--fast),box-shadow var(--fast)}
.karta:hover{border-color:var(--ink-40); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.07)}
/* Kadr jest stały (aspect-ratio) i przycina — dzięki temu zdjęcie może się
   w nim powiększyć na hover, nie ruszając siatki. To najtańszy chwyt, który
   wydłuża kontakt z produktem: ruch dzieje się w środku, a nie pod kartą. */
.karta__foto{position:relative; aspect-ratio:var(--foto,1); background:var(--bg);
  padding:10px; overflow:hidden; cursor:zoom-in}
.karta__foto img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.karta:hover .karta__foto img{transform:scale(1.06)}
.karta__flagi{position:absolute; top:9px; left:9px; display:flex; flex-direction:column;
  gap:5px; align-items:flex-start; z-index:2}
.karta__tresc{padding:11px 13px 13px; display:flex; flex-direction:column; gap:5px; flex:1}
.karta__marka{font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-40)}
.karta__nazwa{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}
.karta__meta{font-size:12px; color:var(--ink-60)}
.karta__stopka{margin-top:auto; display:flex; align-items:flex-end;
  justify-content:space-between; gap:9px; padding-top:5px}
.cena{font-size:19px; font-weight:800; letter-spacing:-.02em; white-space:nowrap}
.cena small{display:block; font-size:11px; font-weight:600; color:var(--ink-60); letter-spacing:0}
.cena--przed{font-size:13px; font-weight:600; color:var(--ink-40); text-decoration:line-through}
.dodaj{width:38px; height:38px; border-radius:50%; background:var(--brand); color:#fff;
  border:0; display:grid; place-items:center; flex:none; font-size:19px; line-height:1}
.dodaj:hover{filter:brightness(1.12)}

/* wariant rzadszy — dla layoutów, w których produkt ma się prezentować */
.siatka--luzna .karta{border:0; background:transparent}
.siatka--luzna .karta:hover{box-shadow:none; transform:none}
.siatka--luzna .karta__foto{border-radius:var(--r); overflow:hidden; padding:0; background:var(--surface)}
.siatka--luzna .karta__foto img{padding:14px}
.siatka--luzna .karta__tresc{padding:12px 2px 0}
.siatka--luzna .karta:hover .karta__foto{outline:1px solid var(--line)}

/* wariant gęsty — dla outletu i hubów */
.siatka--gesta{--karta-gap:10px}
.siatka--gesta .karta__nazwa{font-size:13px; -webkit-line-clamp:2}
.siatka--gesta .karta__tresc{padding:9px 10px 11px; gap:3px}
.siatka--gesta .cena{font-size:17px}

/* ---------------------------------------------------- nagłówek i stopka */
.gora{background:var(--ink); color:#fff; font-size:12.5px}
.gora .kontener{display:flex; gap:22px; justify-content:center; align-items:center;
  height:34px; flex-wrap:wrap; overflow:hidden}
.szapo{position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line)}
.szapo__glowna{display:flex; align-items:center; gap:18px; padding:13px 0}
.logo{font-family:var(--display); font-size:24px; font-weight:800;
  letter-spacing:-.03em; flex:none}
.logo i{color:var(--brand); font-style:normal}
.szukaj{flex:1; min-width:0; position:relative}
.szukaj input{width:100%; padding:11px 15px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--bg); font-size:14.5px}
.szukaj input:focus{background:var(--surface); border-color:var(--brand); outline:none}
.szapo__akcje{display:flex; gap:14px; align-items:center; flex:none; font-size:14px; font-weight:600}
.menu{border-top:1px solid var(--line); position:relative}
/* gdy pozycje nie mieszczą się w szerokości, prawa krawędź zanika —
   bez tego ostatnia pozycja wygląda na uciętą, a nie na przewijalną */
.menu::after{content:""; position:absolute; top:0; right:0; bottom:0; width:38px;
  pointer-events:none; background:linear-gradient(90deg,transparent,var(--surface))}
.menu .kontener{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.menu .kontener::-webkit-scrollbar{display:none}
/* aktywna kategoria — po wejściu na podstronę pasek zostaje na ekranie,
   więc musi pokazywać, gdzie kupujący właśnie jest */
.menu a[aria-current="page"]{color:var(--brand); font-weight:700;
  box-shadow:inset 0 -2px 0 var(--brand)}
.menu a{padding:12px 13px; font-size:14px; font-weight:600; white-space:nowrap;
  border-bottom:2px solid transparent}
.menu a:hover{color:var(--brand)}
.menu a.jest{color:var(--brand); border-bottom-color:var(--brand)}

.stopa{background:var(--ink); color:#C9CDD3; margin-top:52px; font-size:14px}
.stopa .kontener{padding-top:38px; padding-bottom:26px}
.stopa__siatka{display:grid; gap:28px; grid-template-columns:1.5fr repeat(3,1fr)}
.stopa h4{color:#fff; font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px}
.stopa ul{list-style:none; margin:0; padding:0}
.stopa li{margin-bottom:8px}
.stopa a:hover{color:#fff; text-decoration:underline}
.stopa__bar{border-top:1px solid #2A2F36; margin-top:26px; padding-top:16px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#8A9199}

/* ---------------------------------------------------- pasek grupy */
/* Pasek wpisuje skrypt dopiero po wczytaniu data/produkty.js (kilka MB), więc miejsce
   rezerwujemy z góry — inaczej po chwili wskakuje i przesuwa całą stronę w dół.
   Zawsze jeden wiersz (na telefonie przewijany w bok), żeby wysokość była stała. */
#pasek-grupy:empty{min-height:44px}
.grupa-bar{background:var(--ink); color:#C9CDD3; font-size:12.5px; padding:7px 0}
.grupa-bar .kontener{display:flex; gap:8px; align-items:center; flex-wrap:nowrap;
                     overflow-x:auto; scrollbar-width:none}
.grupa-bar .kontener::-webkit-scrollbar{display:none}
.grupa-bar .kontener > *{flex:none; white-space:nowrap}
.grupa-bar b{color:#fff}
.grupa-bar a{padding:3px 10px; border-radius:var(--r-pill); border:1px solid #333A42}
.grupa-bar a:hover{border-color:#6B7681; color:#fff}
.grupa-bar a.jest{background:var(--brand); border-color:transparent; color:#fff}

@media (max-width:1100px){ :root{--kolumny:3} }
@media (max-width:760px){
  :root{--kolumny:2; --karta-gap:12px}
  .szapo__glowna{flex-wrap:wrap; gap:11px}
  .szukaj{order:3; flex-basis:100%}
  .stopa__siatka{grid-template-columns:1fr 1fr}
  .sekcja{padding:32px 0}
}
@media (max-width:480px){ .stopa__siatka{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* Rzędy towaru jak na Sellteo (Layout.pasy) — pod banerem każdej marki */
.rzad{padding:26px 0 6px}
.rzad__glowa{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px}
.rzad__glowa h2{font-size:clamp(20px,2.4vw,26px); line-height:1.2; margin:0}
.rzad__glowa a{font-size:14px; font-weight:600; color:var(--brand); white-space:nowrap; text-decoration:none}
.rzad__glowa a:hover{text-decoration:underline}
.rzad__ramka{position:relative}
.rzad__tor{display:grid; grid-auto-flow:column; grid-auto-columns:220px; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px 2px 10px}
.rzad__tor::-webkit-scrollbar{display:none}
.rzad__tor > .karta{scroll-snap-align:start; min-width:0}
.rzad__strz{position:absolute; top:38%; z-index:2; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:24px; line-height:1;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.12); display:grid; place-items:center}
.rzad__strz--l{left:-14px} .rzad__strz--p{right:-14px}
.rzad__strz:hover{border-color:var(--brand); color:var(--brand)}
@media (max-width:760px){
  .rzad__tor{grid-auto-columns:46%}
  .rzad__strz{display:none}
}

/* ---------------------------------------------------- opinie klientów
   Ten sam pasek gwiazdek co w Sellteo (jeden element z nakładką przyciętą do oceny),
   bo witryny marek pokazują ten sam towar i te same opinie. */
:root{
  --gw-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0.6l2.6 5.7 6.2 0.7-4.6 4.2 1.2 6.1L10 14.3 4.6 17.3l1.2-6.1L1.2 7l6.2-0.7z'/%3E%3C/svg%3E");
}
.gw{
  --gwpx:14px; --gw:0%;
  display:inline-block; width:calc(var(--gwpx) * 5.35); height:var(--gwpx); flex:none;
  background:linear-gradient(90deg, #F0A202 var(--gw), var(--line) var(--gw));
  -webkit-mask:var(--gw-mask) repeat-x left center/calc(var(--gwpx) * 1.07) var(--gwpx);
  mask:var(--gw-mask) repeat-x left center/calc(var(--gwpx) * 1.07) var(--gwpx);
}
.karta__ocena{display:inline-flex; align-items:center; gap:5px; font-size:12px; line-height:1}
.karta__ocena b{font-weight:700}
.karta__ocena i{font-style:normal; color:var(--ink-60)}