/* Części wspólne stron zakupów w języku wariantu B: koszyk.html i kasa.html (obie mają na body klasę .wk).
   Ładuje się po wspolne-b.css, a przed arkuszem strony (koszyk.css albo kasa.css), więc przy równej wadze
   selektora wygrywa strona. Tu nic nie wolno skopiować do arkusza strony: zmiana przycisku, wyboru dostawy
   albo wierszy kwot idzie tutaj i działa od razu w koszyku i w kasie.

   Części pliku:
   1. Strona, tytuł i przyciski
   2. Wybór dostawy w kasie (wiersze wyboru) i cechy pozycji z kolorem (koszyk i kasa)
   3. Karta podsumowania i wiersze kwot z wyceny serwera
   4. Telefon (do 900 px, ten sam próg co wariant B) */

[hidden]{display:none!important}
/* fokus z klawiatury jak w wariancie B; legal.css ma własny, złoty */
.wb :focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ===== 1. Strona, tytuł i przyciski ===== */
/* min-height: stopka stoi poniżej pierwszego ekranu od pierwszego obrazu (nagłówek ma do ok. 160 px), więc lista pozycji ani formularz nie przesuwają jej w widoczną część */
.wk .strona{padding-top:var(--s5);padding-bottom:64px;min-height:calc(100dvh - 100px)}
.wk h1{font:var(--w2) 28px/1.15 var(--fd);letter-spacing:-.015em;color:var(--tx)}
.wk .checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s5);margin-top:var(--s3);align-items:start}

/* przyciski: główny (granat pełny) i drugorzędny (obrys), jak w wariancie B */
.wk .primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:var(--s4);padding:0 var(--s5);border:0;border-radius:var(--r);background:var(--acc);color:#fff;font:var(--w2) var(--t2) var(--fb);text-decoration:none;transition:background .15s}
.wk .primary:hover{background:var(--acc2);color:#fff}
/* aria-disabled zamiast pointer-events: kliknięcie ma dojść do skryptu (app.js: klikPrzejscia), który
   je zapamiętuje i sam przechodzi do kasy po udanej wycenie, zamiast po prostu blokować kliknięcie. */
.wk .primary.disabled{opacity:.45}
.wk .secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--dotyk);padding:0 var(--s4);border:1.5px solid var(--obr);border-radius:var(--r);background:var(--srf);color:var(--acc);font:var(--w2) var(--t2) var(--fb);cursor:pointer}
.wk .secondary:hover{border-color:var(--acc)}
/* kod produktu: jedyne miejsce pisma o stałej szerokości, mały i szary */
.kl-kod{font:500 12px var(--fm);color:var(--tx2);white-space:nowrap}

/* ===== 2. Wybór dostawy w kasie: lista wierszy, w każdym zaznaczenie, nazwa i cena w jednej linii =====
   Wiersze w jednej ramce, oddzielone linią (plan koszyka, punkt 14), więc cztery sposoby dostawy dalej mieszczą się
   czytelnie na telefonie. Próg darmowej dostawy krótko przy nazwie („gratis od 500 zł”). */
.k-dostawa{margin:0;padding:0;border:0;min-width:0}
.k-dostawa legend{margin-bottom:var(--s2);padding:0;font:var(--w2) var(--t1) var(--fb);color:var(--tx2)}
.k-opcje{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.k-opcja{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:var(--s3);align-items:start;min-height:var(--dotyk);padding:11px var(--s3);cursor:pointer}
.k-opcja+.k-opcja{border-top:1px solid var(--line)}
.k-opcja:has(input:checked){background:var(--accbg)}
.k-opcja input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--acc)}
.k-on{font:var(--w2) var(--t2)/1.35 var(--fb);color:var(--tx)}
.k-on small{font:var(--w1) var(--t1)/1.35 var(--fb);color:var(--tx2);white-space:nowrap}
.k-oc{font:var(--w1) var(--t2)/1.35 var(--fb);font-variant-numeric:tabular-nums;color:var(--tx);white-space:nowrap}
.k-opcja:has(input:checked) .k-oc{font-weight:var(--w2)}
/* jedna dostawa (start: sama wysyłka kurierem): wiersz bez przycisku wyboru i bez zaznaczenia, bo nie ma z czego wybierać */
.k-jedna .k-opcja{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.k-jedna .k-opcja input{display:none}
.k-jedna .k-opcja:has(input:checked){background:none}
.k-jedna .k-opcja:has(input:checked) .k-oc{font-weight:var(--w1)}
/* cechy pozycji w koszyku i w kasie: kolor jako kropka z nazwą obok, razem, bez zawijania między nimi */
.wk .sw{display:inline-block;width:12px;height:12px;flex:none;box-shadow:0 0 0 1px rgba(20,24,27,.18)}
.kl-t,.kc{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ===== 3. Karta podsumowania i wiersze kwot ===== */
.wk .order-summary{position:sticky;top:calc(var(--topH) + var(--s4));padding:20px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r-karta)}
/* Pozycje, kwoty, koło dostawy i link dochodzą po odpowiedzi sklepu i pierwszej wycenie, w kilku krokach, i każdy krok przesuwał to, co pod nim.
   Do pierwszej wyceny (app.js stawia na <html> klasę wczytano) karta jest niewidoczna i zajmuje swoje miejsce; po 12 s pokazuje się sama, gdyby wycena nie wróciła.
   visibility, nie opacity: niewidoczna karta nie wchodzi też w kolejność Tab ani do drzewa dostępności (przyciski i linki w niej nie przyjmują fokusu). */
html:not(.wczytano) .wk .order-summary{visibility:hidden;animation:pokaz-podsumowanie 0s 12s forwards}
@keyframes pokaz-podsumowanie{to{visibility:visible}}
.wk .order-summary h2{margin-bottom:var(--s3);font:var(--w2) var(--t4)/1.2 var(--fd);color:var(--tx)}
/* kwoty z wyceny serwera; w trakcie nowej wyceny przygaszone */
#cartsummary{margin-top:var(--s4);transition:opacity .15s}
.licze #cartsummary{opacity:.5}
#cartsummary p{color:var(--tx2);font-size:var(--t2)}
.wk .sumrow{display:flex;justify-content:space-between;gap:var(--s4);padding:3px 0;font:var(--w1) var(--t2)/1.4 var(--fb);color:var(--tx)}
.wk .sumrow span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.wk .sumrow.total{margin-top:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line);font:var(--w2) var(--t4)/1.25 var(--fb)}
.wk .sumrow.k-drob{padding-top:0;font-size:var(--t1);color:var(--tx2);font-variant-numeric:tabular-nums}

/* ===== 4. Telefon ===== */
@media(max-width:900px){
 /* belka: powrót (do sklepu albo do koszyka) jako przycisk tekstowy, jak „Wróć” w wariancie B */
 .wk a.mbar-wroc{text-decoration:none}
 .wk h1{font-size:var(--t5)}
 .wk .checkout-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
 .wk .order-summary{position:static;padding:var(--s4)}
}
@media(prefers-reduced-motion:reduce){#cartsummary{transition:none}}