/* ============================================================
   Komponenty wizualne wzorowane na bibliotece 21st.dev.
   Tamte są w Reakcie i Tailwindzie — tu te same wzorce przepisane
   na czysty CSS, żeby działały w naszych layoutach bez frameworka
   i bez budowania. Wszystko korzysta ze zmiennych marki, więc
   każdy sklep dostaje je w swoim kolorze.
   ============================================================ */

/* ---------------------------------------------------- Spotlight Card
   Światło podąża za kursorem nad kartą. Współrzędne podaje JS
   przez --mx/--my; bez JS karta wygląda normalnie. */
.spot{position:relative; isolation:isolate}
.spot::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%);
}
.spot:hover::before{opacity:1}
.spot::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.55), transparent 55%);
  mix-blend-mode:overlay;
}
.spot:hover::after{opacity:1}

/* ---------------------------------------------------- Marquee
   Nieskończony pasek. Treść jest zduplikowana w JS, więc pętla
   nie ma widocznego szwu. Zatrzymuje się pod kursorem. */
.marquee{overflow:hidden; position:relative; --predkosc:38s}
.marquee__tor{display:flex; width:max-content; animation:marquee var(--predkosc) linear infinite}
.marquee:hover .marquee__tor{animation-play-state:paused}
.marquee__grupa{display:flex; align-items:center; gap:34px; padding-right:34px; flex:none}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0; background:linear-gradient(270deg,var(--bg),transparent)}
.marquee__el{display:flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--ink-60)}
.marquee__el b{color:var(--ink); font-weight:800}
.marquee__el i{font-style:normal; color:var(--accent); font-weight:800}

/* ---------------------------------------------------- Magnetyczny przycisk
   Przesuwa się lekko w stronę kursora. Przesunięcie liczy JS. */
.magnes{transition:transform .22s cubic-bezier(.2,.8,.3,1), background var(--fast)}
.magnes:active{transform:scale(.97)!important}

/* ---------------------------------------------------- Shimmer
   Przebiegające światło po krawędzi — do jednego, najważniejszego CTA. */
.shimmer{position:relative; overflow:hidden}
.shimmer::after{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg); animation:shimmer 3.6s ease-in-out infinite}
@keyframes shimmer{0%,62%{left:-140%} 88%,100%{left:160%}}

/* ---------------------------------------------------- Bento
   Siatka kafli różnej wielkości — pierwszy zajmuje dwa pola. */
.bento{display:grid; gap:14px; grid-template-columns:repeat(4,1fr)}
.bento>*{min-height:180px}
.bento>*:first-child{grid-column:span 2; grid-row:span 2}
.bento>*:nth-child(4){grid-column:span 2}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento>*:first-child{grid-column:span 2; grid-row:auto}
  .bento>*:nth-child(4){grid-column:span 2}
}

/* ---------------------------------------------------- Podkreślenie nagłówka
   Kreska dorysowuje się, gdy nagłówek wjeżdża w kadr. */
.podkresl{position:relative; display:inline-block}
.podkresl::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  border-radius:3px; background:var(--accent); transform:scaleX(0);
  transform-origin:left; transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.podkresl.jest::after{transform:scaleX(1)}

/* ====================================================================
   KONWERSJA KARTY PRODUKTU
   Cztery rzeczy, których karcie brakowało: podpowiedź szybkiego podglądu,
   potwierdzenie dodania, licznik koszyka i samo okno podglądu.
   Wszystko na zmiennych marki (--brand, --accent, --ink), więc każdy sklep
   grupy dostaje te komponenty w swoim kolorze, bez jednego hexa poniżej.
   ==================================================================== */

/* ---------------------------------------------------- potwierdzenie na karcie
   Obwódka w kolorze marki na moment po dodaniu. Świadomie `outline`, a nie
   `border` ani `box-shadow`: te dwa layouty nadpisują u siebie na hover,
   a kursor po kliknięciu „+" jest przecież nad kartą. */
.karta--dodano{outline:2px solid var(--brand); outline-offset:-1px;
  animation:kartaDodano 1.1s cubic-bezier(.2,.8,.3,1)}
@keyframes kartaDodano{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 42%, transparent)}
  40%{box-shadow:0 0 0 7px color-mix(in srgb, var(--brand) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent)}
}
/* Przycisk zamienia się w znak potwierdzenia — bez tego klient nie wie,
   czy kliknięcie zadziałało, i klika drugi raz albo wychodzi. */
.dodaj{transition:transform .18s cubic-bezier(.2,.8,.3,1), filter var(--fast)}
.dodaj.zrobione{background:var(--brand); color:var(--surface); transform:scale(1.08)}
.fajka{display:grid; place-items:center; width:100%; height:100%}
.fajka svg{width:56%; height:56%}

/* ---------------------------------------------------- licznik koszyka */
.kosz-licznik{display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 6px; margin-left:6px; vertical-align:middle;
  border-radius:var(--r-pill); background:var(--brand); color:var(--surface);
  font-size:11.5px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.kosz-licznik[hidden]{display:none}
.kosz-licznik.puls,.kosz.puls{animation:koszPuls .42s cubic-bezier(.2,.8,.3,1)}
@keyframes koszPuls{
  0%{transform:scale(1)} 45%{transform:scale(1.32)} 100%{transform:scale(1)}
}

/* ---------------------------------------------------- koszyk z boku
   Po dodaniu produktu wysuwa się cały koszyk marki (js/komponenty.js).
   Te same nazwy klas co w sklepie Sellteo (css/sellteo.css), bo to ten sam
   komponent — kolory biorą się ze zmiennych layoutu, więc każda marka ma swój. */
html.ma-szuflade{overflow:hidden}
.kbok{position:fixed; inset:0; z-index:300}
.kbok__tlo{position:absolute; inset:0; background:rgba(0,0,0,.46); 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:var(--surface); color:var(--ink); display:flex; flex-direction:column;
  box-shadow:-10px 0 44px rgba(0,0,0,.24);
  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-family:var(--display); 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:var(--surface); color:var(--ink-60)}
.kbok__x:hover{background:var(--bg); 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{box-shadow:inset 3px 0 0 var(--brand); padding-left:11px}
.kbok__foto{border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:5px; aspect-ratio:1}
.kbok__foto img{width:100%; height:100%; object-fit:contain}
.kbok__opis{min-width:0}
.kbok__nazwa{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:var(--surface); font-weight:700; color:var(--ink-60); font-size:15px}
.kbok__ilosc button:hover{background:var(--bg); color:var(--ink)}
.kbok__ilosc input{width:36px; height:32px; border:0; text-align:center; font-weight:700; font-size:14px;
  background:var(--surface); -moz-appearance:textfield}
.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(--ink)}
.kbok__stopka{flex:none; border-top:1px solid var(--line); padding:15px 20px 18px; background:var(--surface);
  box-shadow:0 -6px 18px rgba(0,0,0,.07); 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); font-weight:700}
.kbok__prog i{display:block; height:6px; background:var(--bg); 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-family:var(--display); font-size:22px; font-weight:800}
.kbok__vat{font-size:12px; color:var(--ink-40); margin-top:-4px}
.kbok__cta{display:flex; align-items:center; justify-content:center; padding:14px 20px; border-radius:var(--r-pill);
  background:var(--brand); color:#fff; font-weight:700; font-size:15px; line-height:1}
.kbok__cta:hover{filter:brightness(1.1)}
.kbok__cta--cichy{background:transparent; color:var(--ink); border:1px solid var(--line); font-weight:600}
.kbok__cta--cichy:hover{background:var(--bg); filter:none}
.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(--bg);
  border-radius:var(--r); padding:9px 11px}
.kbok__pusto{flex:1; display:grid; align-content:center; justify-items:center; gap:6px; text-align:center; padding:30px 24px}
.kbok__pusto b{font-family:var(--display); font-size:17px}
.kbok__pusto p{color:var(--ink-60); font-size:14px}
@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} }

/* ---------------------------------------------------- Scroll expansion hero
   Zdjęcie startuje jako kadr w kontenerze i rozszerza się do pełnej szerokości
   w miarę przewijania. Postęp podaje ScrollTrigger przez --rozwin (0 do 1);
   bez JS zdjęcie po prostu stoi rozwinięte. */
/* Zamiast rozpychać kontener (co w wąskiej kolumnie dawało ruch rzędu 60 px
   i było niewidoczne), kadr zostaje na miejscu, a zmienia się to, ile zdjęcia
   widać: przy wjeździe w ekran jest przybliżone i mocniej zaokrąglone,
   przy pełnym rozwinięciu — pełny kadr z prostymi rogami. */
.rozwin{--rozwin:1; position:relative; overflow:hidden; display:block;
  border-radius:calc(22px * (1 - var(--rozwin)));
  clip-path:inset(calc(7% * (1 - var(--rozwin))) calc(9% * (1 - var(--rozwin)))
            round calc(22px * (1 - var(--rozwin))))}
.rozwin img{width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(calc(1.18 - 0.18 * var(--rozwin)));
  transform-origin:center}
.rozwin__tresc{position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:28px; z-index:2;
  opacity:calc(0.35 + 0.65 * var(--rozwin))}
.rozwin__tresc h1,.rozwin__tresc h2{color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.5); margin:0}
.rozwin::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.52))}

/* ---------------------------------------------------- Karuzela
   Przewijanie z przyciąganiem, bez biblioteki. Na telefonie działa palcem,
   na komputerze strzałkami — dlatego strzałki chowają się pod dotykiem. */
.karuzela{position:relative}
.karuzela__tor{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; padding-bottom:4px}
.karuzela__tor::-webkit-scrollbar{display:none}
.karuzela__tor>*{flex:0 0 auto; scroll-snap-align:start}
.karuzela__strzalka{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); display:grid; place-items:center; font-size:17px;
  color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.10); transition:opacity var(--fast)}
.karuzela__strzalka:hover{border-color:var(--brand); color:var(--brand)}
.karuzela__strzalka[disabled]{opacity:.28; pointer-events:none}
.karuzela__strzalka--lewo{left:-14px}
.karuzela__strzalka--prawo{right:-14px}
.karuzela__kropki{display:flex; gap:6px; justify-content:center; margin-top:12px}
.karuzela__kropka{width:7px; height:7px; border-radius:50%; border:0;
  background:var(--line); padding:0; transition:background var(--fast), width var(--fast)}
.karuzela__kropka.jest{background:var(--brand); width:20px; border-radius:99px}
@media (hover:none){ .karuzela__strzalka{display:none} }

/* ---------------------------------------------------- Promieniste tło
   Miękkie plamy światła w kolorze marki, powoli dryfujące. Siedzi pod treścią
   i nigdy nie zabiera jej kontrastu — stąd niskie krycie i brak ostrych krawędzi. */
.blask{position:relative; isolation:isolate; overflow:hidden}
.blask>*{position:relative; z-index:1}
.blask::before,.blask::after{
  content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  filter:blur(70px); opacity:.30}
.blask::before{width:46vw; height:46vw; max-width:560px; max-height:560px;
  top:-16%; left:-8%;
  background:radial-gradient(circle, var(--brand), transparent 68%);
  animation:dryf 26s ease-in-out infinite alternate}
.blask::after{width:38vw; height:38vw; max-width:460px; max-height:460px;
  bottom:-20%; right:-6%;
  background:radial-gradient(circle, var(--accent), transparent 68%);
  animation:dryf 32s ease-in-out infinite alternate-reverse}
@keyframes dryf{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(6%, 8%) scale(1.14)}
}

/* opis i specyfikacja pod zdjęciem i ceną — okno przewija się w sobie */
.podglad__okno{max-height:92vh; overflow-y:auto; flex-wrap:wrap}
.podglad [hidden]{display:none !important}
.podglad__szczegoly{grid-column:1 / -1; flex-basis:100%; width:100%; padding:4px 24px 24px;
  border-top:1px solid var(--line)}
.podglad__laduje{color:var(--ink-60); font-size:14px}
.podglad__zakladki{display:flex; gap:6px; margin:14px 0 12px}
.podglad__zakladki button{font:inherit; font-size:14.5px; font-weight:700; padding:8px 15px; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--r-pill, 99px)}
.podglad__zakladki button.jest{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.podglad__opis-tresc{font-size:14.5px; line-height:1.65; color:var(--ink)}
.podglad__opis-tresc img{display:block; max-width:100%; height:auto; margin:10px 0; border-radius:8px}
.podglad__opis-tresc h1,.podglad__opis-tresc h2,.podglad__opis-tresc h3{font-size:17px; margin:14px 0 6px}
.podglad__spec{width:100%; border-collapse:collapse; font-size:14.5px}
.podglad__spec th{width:40%; text-align:left; font-weight:600; color:var(--ink-60); padding:8px 12px 8px 0;
  border-bottom:1px solid var(--line)}
.podglad__spec td{padding:8px 0; border-bottom:1px solid var(--line)}

/* ---------------------------------------------------- podstrona kategorii */
.podstrona{padding:26px 0 56px}
.podstrona__okruchy{font-size:14px; color:var(--ink-60); margin-bottom:10px}
.podstrona__okruchy a{color:inherit; text-decoration:underline}
.podstrona__glowa{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:12px 24px; margin-bottom:20px}
.podstrona__glowa h1{font-size:clamp(26px,3vw,36px); line-height:1.15; margin:0}
.podstrona__glowa h1 span{font-size:15px; font-weight:600; color:var(--ink-60); margin-left:6px}
.podstrona__sort{font-size:14.5px; color:var(--ink-60); display:flex; align-items:center; gap:8px}
.podstrona__sort select{font:inherit; color:var(--ink); padding:9px 12px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--surface)}

/* Lenis przewija sam — przeglądarkowe wygładzanie na <html> zderzało się z nim
   i kółko myszy stawało w miejscu (Gardiva, Sellteo Outlet, Mebliva). Zasady z CSS Lenisa. */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .rozwin{width:100%; border-radius:0}
  .rozwin img{transform:none}
  .rozwin__tresc{opacity:1}
  .blask::before,.blask::after{animation:none}
  .karuzela__tor{scroll-behavior:auto}
}

/* ---------------------------------------------------- konto w nagłówku marki (komponenty.js → kontoMarki)
   Link dziedziczy wygląd sąsiednich pozycji nagłówka; lista ma własny, neutralny wygląd we wszystkich layoutach. */
.km{position:relative; display:inline-flex; align-items:center}
.km__link{display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; white-space:nowrap}
.km__link i{font-style:normal; max-width:140px; overflow:hidden; text-overflow:ellipsis}
.km__menu{
  position:absolute; top:100%; right:0; z-index:200; width:270px; margin-top:8px; text-align:left;
  background:#fff; color:#1b1f1d; border:1px solid rgba(0,0,0,.1); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.18);
  font:400 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:normal; text-transform:none;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility 0s .15s;
}
.km__menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.km:hover .km__menu,.km:focus-within .km__menu{opacity:1; visibility:visible; transform:none; transition:opacity .15s, transform .15s}
.km .km__glowa{display:flex; flex-direction:column; gap:3px; padding:15px 15px 12px; border-bottom:1px solid rgba(0,0,0,.08)}
.km .km__glowa b{font-size:16px; font-weight:700}
.km .km__glowa span{font-size:12.5px; color:#6b7280; overflow-wrap:anywhere}
.km .km__menu a{display:block; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-decoration:none; text-transform:none; letter-spacing:normal}
.km .km__menu a.km__btn{margin-top:10px; padding:10px; border-radius:8px; background:var(--brand,#0F6F52); color:#fff; font-weight:700; text-align:center}
.km .km__menu a.km__zaloz{margin-top:6px; font-size:13px; text-align:center}
.km .km__menu nav{display:flex; flex-direction:column; padding:6px}
.km .km__menu nav a{display:flex; justify-content:space-between; padding:9px 10px; border-radius:8px}
.km .km__menu nav a:hover{background:rgba(0,0,0,.05)}
.km .km__menu nav em{font-style:normal; font-size:12px; font-weight:700; background:rgba(0,0,0,.06); border-radius:999px; padding:1px 8px}
.km .km__wyloguj{display:block; width:100%; padding:11px 15px; border:0; border-top:1px solid rgba(0,0,0,.08); border-radius:0 0 12px 12px;
  background:none; color:#6b7280; font:inherit; text-align:left; cursor:pointer}
.km .km__wyloguj:hover{background:rgba(0,0,0,.05); color:#1b1f1d}
@media (hover:none){ .km__menu{display:none} }