/* ═══════════════════════════════════════════════════════════════════════════
   OSTOIA · SKLEP — arkusz dokładany, nie zastępujący
   ═══════════════════════════════════════════════════════════════════════════

   Idzie PO `styl-wzor.css` i korzysta wyłącznie z jego zmiennych. Żadnej
   własnej palety, żadnego własnego kroju — sklep ma wyglądać jak reszta
   serwisu, a nie jak sklep przyklejony do serwisu.

   DWIE RZECZY, KTÓRYCH TU PILNUJEMY (obie już raz zepsuły ten projekt):

   1. ŻADNEGO `.ruch`. Ta klasa ukrywa sekcję do animacji i odsłania ją przez
      `IntersectionObserver`. Obserwator nie odpala się w karcie, która nie
      jest malowana — a sklep otwiera się właśnie tak: w nowej karcie z menu.
      Pusty koszyk za 1 690 zł to najdroższy możliwy błąd na tej stronie.

   2. `min-width: 0` na każdym dziecku siatki. Bez tego jedno długie słowo
      (np. „Prześwietlenie") rozpycha kolumnę poza ekran telefonu i cała
      strona dostaje poziomy pasek przewijania.
   ═══════════════════════════════════════════════════════════════════════════ */

.sklep-naglowek{
  padding: calc(var(--gorny-h) + clamp(2.5rem,1.4rem + 3.4vw,4.5rem)) 0 0;
}
.sklep-naglowek .nad{
  font-size: var(--t-etykieta); letter-spacing:.14em; text-transform:uppercase;
  color: var(--tekst-3); margin:0 0 .75rem;
}
.sklep-naglowek h1{ margin:0 0 .9rem }
.sklep-naglowek .lead{ max-width:var(--kregoslup) }

/* ── wstążka trybu testowego ─────────────────────────────────────────────────
   Celowo krzycząca. Gdy sklep stoi na kluczach `sk_test_`, NIKT nie może tego
   przeoczyć — ani Maciek, ani klient, który trafił tu z Google.             */
.tryb-prob{
  background: var(--rys); color:#2A1B00; font-weight:650;
  font-size: var(--t-maly); text-align:center; padding:.7rem var(--brzeg);
  position:relative; z-index:60;
}
.tryb-prob b{ font-weight:800 }

/* ── odmowa, gdy brakuje kluczy ─────────────────────────────────────────── */
.sklep-nieczynny{
  border:1px solid var(--linia-3); border-left:4px solid var(--alarm);
  border-radius: var(--promien); background: var(--jasny-0);
  padding: clamp(1.25rem,1rem + 1vw,1.9rem);
}
.sklep-nieczynny h2{ font-size:var(--t-h3); margin:0 0 .6rem }
.sklep-nieczynny ul{ margin:.6rem 0 0; padding-left:1.1rem }
.sklep-nieczynny code{
  font-family:var(--kroj-mono); font-size:var(--t-drobny);
  background:var(--jasny-4); padding:.1rem .35rem; border-radius:4px;
}

/* ── siatka poziomów ────────────────────────────────────────────────────── */
.poziomy-sklep{
  display:grid; gap:1rem; margin:2.5rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}
.poziomy-sklep > *{ min-width:0 }

.karta-poziom{
  position:relative; display:flex; flex-direction:column; min-width:0;
  background:var(--jasny-0); border:1px solid var(--linia-2);
  border-radius:var(--promien-kafel); padding:1.5rem 1.35rem 1.35rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.karta-poziom:hover{ border-color:var(--linia-4) }
.karta-poziom:has(input:checked){
  border-color: rgb(var(--zubr-rgb)); box-shadow:0 0 0 3px rgba(var(--zubr-rgb),.16);
}
/* Zapasowo dla przeglądarek bez `:has()` — klasę dokłada skrypt. */
.karta-poziom.wybrana{
  border-color: rgb(var(--zubr-rgb)); box-shadow:0 0 0 3px rgba(var(--zubr-rgb),.16);
}

.karta-poziom input[type=radio]{
  position:absolute; opacity:0; width:1px; height:1px;
}
.karta-poziom input[type=radio]:focus-visible + .karta-poziom__srodek{
  outline:2px solid rgb(var(--puchacz-rgb)); outline-offset:6px; border-radius:8px;
}
.karta-poziom label{ cursor:pointer; display:block; min-width:0 }

.karta-poziom__plakietka{
  position:absolute; top:-.65rem; left:1.3rem;
  background:var(--zubr); color:#06351C; font-size:var(--t-etykieta);
  font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:999px;
}
.karta-poziom__nazwa{ font-size:var(--t-h3); font-weight:700; margin:0 0 .2rem; line-height:1.15 }
.karta-poziom__sklad{ font-size:var(--t-drobny); color:var(--tekst-3); margin:0 0 .9rem }
.karta-poziom__cena{ font-size:1.95rem; font-weight:760; letter-spacing:-.02em; margin:0 }
.karta-poziom__cena span{ font-size:var(--t-maly); font-weight:500; color:var(--tekst-3) }
.karta-poziom__rynek{ font-size:var(--t-drobny); color:var(--tekst-3); margin:.3rem 0 1rem }
.karta-poziom__obietnica{
  font-size:var(--t-maly); font-style:italic; color:var(--tekst-2);
  border-left:2px solid var(--linia-3); padding-left:.75rem; margin:0 0 1rem;
}
.karta-poziom__miesiac{ list-style:none; margin:0; padding:0; font-size:var(--t-maly) }
.karta-poziom__miesiac li{
  padding-left:1.35rem; position:relative; margin-bottom:.45rem; color:var(--tekst-2);
}
.karta-poziom__miesiac li::before{
  content:""; position:absolute; left:.25rem; top:.52em;
  width:7px; height:7px; border-radius:50%; background:rgb(var(--zubr-rgb));
}
.karta-poziom__wariant{
  margin-top:1rem; padding-top:.85rem; border-top:1px dashed var(--linia-3);
  font-size:var(--t-maly);
}
.karta-poziom__wariant label{ display:flex; gap:.55rem; align-items:flex-start }
.karta-poziom__wariant input{ margin-top:.3em; flex:0 0 auto }

.karta-poziom__brak{
  margin-top:1rem; font-size:var(--t-maly); color:var(--alarm-tekst);
  background:rgba(255,107,120,.08); border-radius:var(--promien-m); padding:.6rem .75rem;
}

/* ── dodatki ────────────────────────────────────────────────────────────── */
.dodatki-sklep{ display:grid; gap:.85rem; margin-top:1.5rem }
.dodatki-sklep > *{ min-width:0 }
.karta-dodatek{
  display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; align-items:start;
  background:var(--jasny-0); border:1px solid var(--linia-2);
  border-radius:var(--promien); padding:1.1rem 1.2rem; min-width:0;
}
.karta-dodatek > *{ min-width:0 }
.karta-dodatek input[type=checkbox]{ margin-top:.25em; width:1.15rem; height:1.15rem; flex:0 0 auto }
.karta-dodatek__nazwa{ font-weight:650; margin:0 0 .25rem }
.karta-dodatek__opis{ font-size:var(--t-maly); color:var(--tekst-2); margin:0 }
.karta-dodatek__uwaga{ font-size:var(--t-drobny); color:var(--tekst-3); margin:.4rem 0 0 }
.karta-dodatek__cena{ font-weight:700; white-space:nowrap; text-align:right }
.karta-dodatek__cena small{ display:block; font-weight:500; color:var(--tekst-3); font-size:var(--t-drobny) }
.karta-dodatek__ile{
  margin-top:.55rem; display:flex; align-items:center; gap:.5rem; font-size:var(--t-maly);
}
.karta-dodatek__ile input{
  width:4.2rem; padding:.3rem .45rem; border:1px solid var(--linia-3);
  border-radius:var(--promien-m); font:inherit; font-size:var(--t-maly);
}

/* ── rok z góry ─────────────────────────────────────────────────────────── */
.rok-z-gory{
  margin-top:1.5rem; display:flex; gap:.85rem; align-items:flex-start;
  background:linear-gradient(135deg, rgba(var(--rys-rgb),.10), rgba(var(--zubr-rgb),.08));
  border:1px solid var(--linia-2); border-radius:var(--promien);
  padding:1.1rem 1.2rem; min-width:0;
}
.rok-z-gory > *{ min-width:0 }
.rok-z-gory input{ margin-top:.25em; width:1.15rem; height:1.15rem; flex:0 0 auto }
.rok-z-gory b{ display:block; margin-bottom:.2rem }
.rok-z-gory p{ margin:0; font-size:var(--t-maly); color:var(--tekst-2) }

/* ── podsumowanie ───────────────────────────────────────────────────────── */
.kasa{
  position:sticky; bottom:0; z-index:40; margin-top:2.5rem;
  background:var(--ciemny-2); color:var(--tekst-1c);
  border-radius:var(--promien-kafel) var(--promien-kafel) 0 0;
  padding:1.25rem clamp(1.1rem,.8rem + 1vw,1.75rem);
  box-shadow:0 -14px 40px rgba(var(--atrament),.22);
}
.kasa__rzad{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between; min-width:0;
}
.kasa__rzad > *{ min-width:0 }
.kasa__lista{ list-style:none; margin:0 0 .75rem; padding:0; font-size:var(--t-maly) }
.kasa__lista li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.3rem 0; border-bottom:1px solid var(--linia-c1); color:var(--tekst-2c);
}
.kasa__lista li:last-child{ border-bottom:0 }
.kasa__lista b{ color:var(--tekst-1c); font-weight:600 }
.kasa__suma{ font-size:1.6rem; font-weight:760; letter-spacing:-.02em }
.kasa__suma small{ display:block; font-size:var(--t-drobny); font-weight:500; color:var(--tekst-3c) }
.kasa__pusto{ color:var(--tekst-3c); font-size:var(--t-maly); margin:0 }
.kasa__vat{ font-size:var(--t-drobny); color:var(--tekst-3c); margin:.6rem 0 0 }

.kasa__metody{
  display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
  margin:.75rem 0 0; font-size:var(--t-drobny); color:var(--tekst-3c);
}
.kasa__metody span{
  border:1px solid var(--linia-c2); border-radius:5px; padding:.15rem .45rem;
  font-family:var(--kroj-mono); font-size:11px; letter-spacing:.03em;
}

/* ── pola kupującego ────────────────────────────────────────────────────── */
.pola-kupujacego{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:1.5rem }
.pola-kupujacego > *{ min-width:0 }
.pola-kupujacego label{ display:block; font-size:var(--t-maly); font-weight:600; margin-bottom:.3rem }
.pola-kupujacego input{
  width:100%; padding:.7rem .8rem; border:1px solid var(--linia-3);
  border-radius:var(--promien-m); font:inherit; background:var(--jasny-0);
}
.pola-kupujacego input:focus{
  outline:none; border-color:rgb(var(--puchacz-rgb));
  box-shadow:0 0 0 3px rgba(var(--puchacz-rgb),.16);
}
.pola-kupujacego .pelny{ grid-column:1/-1 }
.pole-blad{ color:var(--alarm-tekst); font-size:var(--t-drobny); margin:.3rem 0 0 }
.pulapka{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ── logowanie / konto ─────────────────────────────────────────────────── */
.konto-siatka{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.konto-siatka > *{ min-width:0 }
.konto-karta{
  background:var(--jasny-0); border:1px solid var(--linia-2);
  border-radius:var(--promien-kafel); padding:clamp(1.3rem,1rem + 1.2vw,2rem); min-width:0;
}
.konto-karta h2{ font-size:var(--t-h3); margin:0 0 .35rem }
.konto-karta > p{ font-size:var(--t-maly); color:var(--tekst-2); margin:0 0 1.25rem }
.dostawcy{ display:grid; gap:.6rem; margin-bottom:1.25rem }
.btn-dostawca{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.78rem 1rem; border:1px solid var(--linia-3); border-radius:var(--promien-m);
  background:var(--jasny-0); font:inherit; font-weight:600; font-size:var(--t-maly);
  color:var(--tekst-1); text-decoration:none; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.btn-dostawca:hover{ border-color:var(--linia-4); background:var(--jasny-2) }
.btn-dostawca svg{ width:18px; height:18px; flex:0 0 auto }
.btn-dostawca--apple{ background:var(--tekst-1); color:var(--jasny-0); border-color:var(--tekst-1) }
.btn-dostawca--apple:hover{ background:#000; border-color:#000 }
.rozdzielnik{
  display:flex; align-items:center; gap:.8rem; margin:1.25rem 0;
  font-size:var(--t-drobny); color:var(--tekst-3); text-transform:uppercase; letter-spacing:.1em;
}
.rozdzielnik::before,.rozdzielnik::after{ content:""; flex:1; height:1px; background:var(--linia-2) }

.komunikat{
  border-radius:var(--promien-m); padding:.85rem 1rem; font-size:var(--t-maly);
  margin:0 0 1.25rem;
}
.komunikat--blad{ background:rgba(255,107,120,.10); color:var(--alarm-tekst); border:1px solid rgba(255,107,120,.3) }
.komunikat--dobrze{ background:rgba(var(--zubr-rgb),.12); color:var(--zubr-tekst); border:1px solid rgba(var(--zubr-rgb),.35) }

/* ── strony wyniku ─────────────────────────────────────────────────────── */
.wynik{ text-align:center; max-width:var(--kregoslup); margin:0 auto }
.wynik__znak{
  width:76px; height:76px; margin:0 auto 1.5rem; border-radius:50%;
  display:grid; place-items:center; font-size:2rem;
}
.wynik__znak--dobrze{ background:rgba(var(--zubr-rgb),.14); color:var(--zubr-tekst) }
.wynik__znak--przerwane{ background:var(--jasny-4); color:var(--tekst-3) }
.wynik__kroki{ text-align:left; margin:2rem auto 0; max-width:34rem }
.wynik__kroki li{ margin-bottom:.8rem; color:var(--tekst-2) }

@media (max-width:620px){
  .karta-dodatek{ grid-template-columns:auto 1fr; }
  .karta-dodatek__cena{ grid-column:2; text-align:left; margin-top:.5rem }
  .kasa{ padding:1rem }
  .kasa__suma{ font-size:1.35rem }
}