/* ==========================================================================
   VITAMIN SHOP - KONWERSJA
   Arkusz awaryjny wtyczki. Motyw potomny ma wlasne, pelne wersje wiekszosci
   tych regul, dlatego wszystko, co motyw juz zna, stoi tutaj w :where() -
   swoistosc zero, wiec motyw zawsze wygrywa.

   PELNA lista regul stojacych POZA :where(). Kazda z nich jest tu swiadomie,
   wiec nie owijaj ich w :where() jako przeoczenia:
   - .ship-bar--kompakt (i jej potomkowie) - wariant wlasny wtyczki, motyw go nie zna;
   - .ship-bar.is-done, .toast.proof, .toast.is-out, .news.is-err ... - klasy stanu,
     ktore z definicji maja bic wersje spoczynkowa;
   - .badge.badge--new, .badge.badge--low - plakietki wlasne wtyczki;
   - .buybox__sold, .news__note, .vs-hp - elementy, ktorych w motywie nie ma;
   - .toast__body (oraz b i span w srodku), .news__form (oraz pola w srodku) -
     stan zastany: nazwy sa wspolne z motywem, ale zawartosc regul sie nie kloci;
   - .toast__x - pole dotyku 44 px. Motyw potomny podnosi je dzis do tej samej
     wartosci, wiec regula nie zmienia niczego przy aktywnym motywie; zostaje
     dla instalacji BEZ motywu i dla motywu obcego, gdzie 32 px wraca.
     Owiniecie tego w :where() cofa pole dotyku ponizej progu dostepnosci;
   - .toast, .toast.is-out w bloku @media (prefers-reduced-motion: reduce) -
     wylaczenie animacji MUSI miec swoistosc wieksza niz :where(.toast),
     ktore te animacje nadaje. To jedyna gola regula poza lista powyzej.

   Selektor obrazka miniatury toastu ma wlasny komentarz przy regule - tam
   :where() obejmuje tylko klase, bo konkurentem jest globalny reset img.

   Kolory ida z tokenow motywu z awaryjna wartoscia lokalna, wiec wtyczka
   wyglada sensownie takze bez motywu potomnego, razem z trybem ciemnym.
   ========================================================================== */

:root{
  --vsk-brand:#0FCA19;
  --vsk-brand-ink:#0B7A10;
  --vsk-brand-tint:#E9FBEA;
  --vsk-brand-tint-2:#D2F6D4;
  --vsk-hot:#D03312;
  --vsk-on-hot:#FFFFFF;
  --vsk-ink:#101418;
  --vsk-ink-surface:#101418;
  --vsk-slate:#5A646E;
  --vsk-slate-2:#6B747C;
  --vsk-line:#E4E8EC;
  --vsk-bg:#FFFFFF;
  --vsk-card:#FFFFFF;
  --vsk-warn:#B45309;
  --vsk-danger:#C0261C;
  --vsk-on-brand:#0B0F0B;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --vsk-brand-ink:#3BE045;
    --vsk-brand-tint:#122814;
    --vsk-brand-tint-2:#173A1A;
    --vsk-hot:#F2613F;
    --vsk-on-hot:#2A0A04;
    --vsk-ink:#F2F5F7;
    --vsk-ink-surface:#080B0D;
    --vsk-slate:#A3ADB6;
    --vsk-slate-2:#7C868F;
    --vsk-line:#2A3138;
    --vsk-bg:#0E1215;
    --vsk-card:#161B21;
    --vsk-warn:#FBBF24;
    --vsk-danger:#F2705F;
  }
}

:root[data-theme="dark"]{
  --vsk-brand-ink:#3BE045;
  --vsk-brand-tint:#122814;
  --vsk-brand-tint-2:#173A1A;
  --vsk-hot:#F2613F;
  --vsk-on-hot:#2A0A04;
  --vsk-ink:#F2F5F7;
  --vsk-ink-surface:#080B0D;
  --vsk-slate:#A3ADB6;
  --vsk-slate-2:#7C868F;
  --vsk-line:#2A3138;
  --vsk-bg:#0E1215;
  --vsk-card:#161B21;
  --vsk-warn:#FBBF24;
  --vsk-danger:#F2705F;
}

/* ---------- 1. PASEK DARMOWEJ DOSTAWY ---------- */

:where(.ship-bar){
  background:var(--brand-tint, var(--vsk-brand-tint));
  border-bottom:1px solid var(--brand-tint-2, var(--vsk-brand-tint-2));
  color:var(--ink, var(--vsk-ink));
  font-size:.8125rem;
  padding:9px 0;
}
:where(.ship-bar .container){
  display:flex; align-items:center; gap:12px;
  justify-content:center; flex-wrap:wrap; text-align:center;
}
:where(.ship-bar strong){ color:var(--brand-ink, var(--vsk-brand-ink)) }

:where(.ship-progress){
  width:150px; height:7px; flex:none; overflow:hidden;
  border-radius:var(--r-full, 999px);
  background:var(--brand-tint-2, var(--vsk-brand-tint-2));
}
:where(.ship-progress i){
  display:block; height:100%; border-radius:inherit;
  background:var(--brand, var(--vsk-brand));
  transition:width var(--dur-3, 320ms) var(--ease, cubic-bezier(.22,.61,.36,1));
}

/* Wersja kompaktowa - szuflada koszyka i strona koszyka. Pasek stoi tam
   w waskiej kolumnie, wiec tekst idzie nad wskaznikiem, a nie obok. */
.ship-bar--kompakt{
  border-bottom:0;
  border-radius:var(--r-sm, 10px);
  padding:12px 14px;
  margin-bottom:16px;
}
.ship-bar--kompakt .ship-bar__in{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.ship-bar--kompakt .ship-progress{ width:100%; margin-top:2px }

.ship-bar.is-done{
  background:var(--brand-tint, var(--vsk-brand-tint));
  border-bottom-color:var(--brand, var(--vsk-brand));
}
.ship-bar.is-done .ship-progress i{ background:var(--brand, var(--vsk-brand)) }

/* ---------- 2. PLAKIETKI ---------- */

:where(.card__badges){
  position:absolute; top:8px; left:8px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  pointer-events:none;
}
:where(.badge){
  display:inline-flex; align-items:center; gap:5px;
  min-height:26px; padding:0 9px; line-height:1;
  border-radius:var(--r-xs, 6px);
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
}
:where(.badge.badge--hot){
  background:var(--hot, var(--vsk-hot));
  color:var(--on-hot, var(--vsk-on-hot));
}
:where(.badge.badge--brand){
  background:var(--brand, var(--vsk-brand));
  color:#0B0F0B;
}

/* Plakietki wlasne wtyczki - motyw ich nie zna, wiec bez :where().
   Nowosc: ciemne tlo, bo zielone i czerwone sa juz zajete.
   Ostatnie sztuki: bursztyn, kontrast 5,1:1 na ciemnym tle. */
.badge.badge--new{
  background:var(--ink, var(--vsk-ink));
  color:var(--bg, var(--vsk-bg));
}
.badge.badge--low{
  background:#FEF3C7;
  color:#8A5A00;
}
:root[data-theme="dark"] .badge.badge--low{ background:#3A2C08; color:#FBBF24 }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge.badge--low{ background:#3A2C08; color:#FBBF24 }
}

/* ---------- 3. CENA ZA JEDNOSTKE I LICZNIK SPRZEDAZY ---------- */

:where(.card__unit){
  display:block; margin-top:2px; line-height:1.3;
  font-size:.75rem; white-space:nowrap;
  color:var(--slate-2, var(--vsk-slate-2));
}
:where(.buybox__unit){
  font-size:.8125rem;
  color:var(--slate, var(--vsk-slate));
}
.buybox__sold{
  margin:6px 0 0; font-size:.8125rem; font-weight:600;
  color:var(--brand-ink, var(--vsk-brand-ink));
}

/* ---------- 4. POWIADOMIENIA DOWODU SPOLECZNEGO ---------- */

:where(.toasts){
  position:fixed; z-index:var(--z-toast, 90);
  left:16px; right:16px;
  bottom:calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 12px);
  display:flex; flex-direction:column; gap:9px;
  pointer-events:none;
}
@media (min-width:1024px){
  :where(.toasts){ left:auto; right:24px; bottom:24px; width:370px }
}

:where(.toast){
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:var(--r-md, 14px);
  background:var(--ink, var(--vsk-ink)); color:#fff;
  box-shadow:var(--sh-3, 0 12px 34px rgba(16,20,24,.14));
  pointer-events:auto;
  animation:vskToastIn 320ms cubic-bezier(.16,1,.3,1);
}

/* Dowod spoleczny - jasna wersja toastu, bo stoi na stronie dlugo
   i ciemny prostokat w rogu wygladalby jak blad systemu. */
.toast.proof{
  background:var(--card, var(--vsk-card));
  color:var(--ink, var(--vsk-ink));
  border:1px solid var(--line, var(--vsk-line));
}
.toast.is-out{ animation:vskToastOut 220ms cubic-bezier(.22,.61,.36,1) forwards }

/* Ten sam element nosi obie klasy: toast__ico i toast__ic. Regula motywu
   .toast__ic ma taka sama swoistosc, a wtyczka kolejkuje sie po motywie, wiec
   bez :where() to wtyczka narzucalaby rozmiar ikony - odwrotnie, niz obiecuje
   naglowek tego pliku. */
:where(.toast__ico){
  width:38px; height:38px; flex:none; overflow:hidden;
  border-radius:var(--r-sm, 10px);
  background:var(--brand-tint, var(--vsk-brand-tint));
  color:var(--brand-ink, var(--vsk-brand-ink));
  display:grid; place-items:center;
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:700; font-size:1rem;
}
/* Tu :where() obejmuje tylko klase, a img zostaje na zewnatrz. Konkurentem tej
   reguly nie jest motyw o tej samej nazwie klasy, tylko globalny reset obrazkow
   img{height:auto} o swoistosci 0,0,1 - przy calej regule w :where() swoistosc
   spada do zera i reset wygrywa, miniatura traci height:100% i wypada z kadru
   38x38 px. Zapis ponizej ma 0,0,1: remisuje z resetem i wygrywa kolejnoscia
   kolejkowania, a nadal przegrywa z .toast--social .toast__ic img motywu (0,2,1). */
:where(.toast__ico) img{ width:100%; height:100%; object-fit:cover; display:block }

.toast__body{ min-width:0; flex:1 }
.toast__body b{ display:block; font-size:.875rem; line-height:1.3 }
.toast__body span{ display:block; font-size:.75rem; opacity:.72; line-height:1.4 }

/* Pole dotyku 44 px - w wizualizacji przycisk mial 32 px i na telefonie
   trafialo sie w niego co drugi raz. */
.toast__x{
  margin-left:auto; flex:none;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:inherit; opacity:.6; font-size:1.25rem; line-height:1;
}
.toast__x:hover,
.toast__x:focus-visible{ opacity:1 }

@keyframes vskToastIn{
  from{ opacity:0; transform:translateY(14px) scale(.97) }
  to{ opacity:1; transform:none }
}
@keyframes vskToastOut{
  to{ opacity:0; transform:translateY(10px) scale(.97) }
}

/* ---------- 5. NEWSLETTER ---------- */

:where(.news){
  display:grid; gap:24px; align-items:center;
  padding:clamp(24px, 1.77vw + 17px, 40px);
  border-radius:var(--r-lg, 20px);
  background:var(--ink-surface, var(--vsk-ink-surface));
  color:#fff;
}
@media (min-width:900px){
  :where(.news){ grid-template-columns:1.1fr .9fr }
}
:where(.news h2){ color:#fff }
:where(.news p){ color:rgba(255,255,255,.72) }

.news__form{ display:flex; gap:9px; flex-wrap:wrap }
.news__form input[type=email]{
  flex:1; min-width:200px; height:48px;
  padding:0 16px; font-size:16px; outline:none;
  border:2px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm, 10px);
  background:rgba(255,255,255,.07); color:#fff;
}
.news__form input[type=email]:focus{ border-color:var(--brand, var(--vsk-brand)) }
.news__form input[type=email]::placeholder{ color:rgba(255,255,255,.45) }
.news__form button{ min-height:48px; min-width:130px }
/* Wyglad przycisku tylko na wypadek braku motywu - klasa .btn--primary
   z motywu ma wyzsza swoistosc i wygrywa. */
:where(.news__form button){
  padding:0 20px; border:0; cursor:pointer;
  border-radius:var(--r-sm, 10px);
  background:var(--brand, var(--vsk-brand)); color:#0B0F0B;
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.04em;
}

.news__form .consent{
  display:flex; gap:9px; align-items:flex-start;
  width:100%; margin-top:12px; cursor:pointer;
  font-size:.75rem; line-height:1.5; color:rgba(255,255,255,.68);
}
.news__form .consent input{
  flex:none; width:20px; height:20px; margin-top:1px;
  accent-color:var(--brand, var(--vsk-brand)); cursor:pointer;
}
.news__form .consent a{ color:var(--brand, var(--vsk-brand)); text-decoration:underline }

/* Komunikat po wyslaniu. Pusty element nie zajmuje miejsca, wiec formularz
   nie skacze, gdy odpowiedz jeszcze nie przyszla. */
.news__note{
  width:100%; margin:12px 0 0;
  font-size:.8125rem; font-weight:600; line-height:1.5;
  color:#B7F7BB;
}
.news__note:empty{ display:none }

/* Blad na ciemnym tle newslettera - --danger daje tam tylko 3,5:1,
   dlatego jasniejszy odcien czerwieni. */
.news.is-err .news__note{ color:#F2705F }
.news.is-err .news__form input[type=email]{
  border-color:#F2705F;
  background:rgba(242,112,95,.12);
}

/* Pulapka na roboty - poza ekranem, ale nie display:none, bo czesc botow
   pomija pola calkowicie ukryte. */
.vs-hp{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%);
  white-space:nowrap; margin:-1px; padding:0; border:0;
}

/* ---------- 6. RUCH ---------- */

@media (prefers-reduced-motion: reduce){
  .toast,
  .toast.is-out{ animation:none }
  :where(.ship-progress i){ transition:none }
}