/* ==========================================================================
   RACHUNEK ZAMOWIENIA
   ==========================================================================
   Lista pozycji, kwoty i adresy zamowienia. Ten sam komponent stoi na stronie
   podziekowania i w podgladzie zamowienia na koncie, wiec jego wyglad jedzie
   osobno - inaczej konto musialoby wozic caly arkusz kasy.

   Wpinany wszedzie tam, gdzie widac rachunek: koszyk, kasa, podziekowanie
   i konto (alpha_current_views w inc/assets.php).
   ========================================================================== */

/* --- pozycja rachunku (ta sama co w podsumowaniu kasy) --- */
.koszyk__poz--kasa{grid-template-columns:56px minmax(0,1fr) auto;padding-block:var(--s2);align-items:center}
.koszyk__poz--kasa .koszyk__foto{position:relative}
.koszyk__ile{
  position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 .3rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border-radius:999px;
  font-family:var(--font-display);font-size:.68rem;letter-spacing:0;
}
/* Ilosc jest na plakietce przy miniaturze - powtorzona zdaniem "Sztuk: 2"
   mowilaby to samo dwa razy. Zdanie zostaje dla czytnikow ekranu. */
.koszyk__wariant--ilosc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* --- kwoty --- */
.kasa__kwoty{display:flex;flex-direction:column;gap:var(--s2)}
.koszyk__suma--rabat{color:var(--sienna)}
.koszyk__suma--razem{flex-wrap:wrap}
.koszyk__suma--razem small,
.koszyk__suma--razem .includes_tax{
  width:100%;text-align:right;font-size:.72rem;color:var(--muted);font-weight:400;
}

/* ---------- rachunek (uzywany tez na koncie) ---------- */

.rachunek__tytul{
  font-family:var(--font-display);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;margin:0 0 var(--s2);
}
.rachunek .koszyk__lista{margin:0 0 var(--s3);padding:0;list-style:none}
.rachunek .koszyk__nazwa a{color:inherit}
.rachunek .koszyk__nazwa a:hover{text-decoration:underline;text-underline-offset:3px}
.rachunek__uwaga{
  margin:0 0 var(--s2);padding:var(--s2);background:var(--porcelain);
  font-size:.85rem;color:var(--muted);
}
.rachunek__uwaga p{margin:0}
.rachunek__notatka{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:.88rem}
.rachunek__notatka p{margin:0}
.rachunek__etykieta{
  font-family:var(--font-display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.3rem !important;
}
.rachunek__akcje{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0}
.rachunek__akcje .btn{flex:1 1 auto}


/* Nazwa produktu w rachunku prowadzi do karty produktu. Sam napis ma 21 px
   wysokosci, wiec dostaje niewidoczne pole dotyku 44 px - ta sama sztuczka
   co przy odnosnikach .link-u. */
.rachunek .koszyk__nazwa a{position:relative;display:inline-block}
.rachunek .koszyk__nazwa a::after{
  content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%;height:44px;
}

/* WooCommerce rysuje adres w ramce z cieniem po dwoch bokach
   (.woocommerce-customer-details address). U nas adres to zwykly akapit,
   a nie kartka przypieta do ekranu. */
.woocommerce .woocommerce-customer-details address,
.rachunek-adres address{border:0;padding:0;margin:0;border-radius:0}

/* Nazwa metody dostawy schodzi pod kwote. W jednej linii wiersz "Dostawa"
   robil sie dwa razy szerszy od pozostalych i lamal rytm kwot. */
.rachunek .koszyk__suma b{text-align:right}
.rachunek .shipped_via{
  display:block;font-family:var(--text);font-size:.78rem;font-weight:400;
  letter-spacing:0;color:var(--muted);margin-top:.15rem;
}
/* --- adresy zamowienia --- */
.rachunek-adresy{margin-top:var(--s5);display:grid;gap:var(--s4)}
@media(min-width:620px){
  .rachunek-adresy--dwa{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
}
.rachunek-adres address{font-style:normal;line-height:1.7}
.rachunek-adres p{margin:0;line-height:1.7}
.rachunek-adres__info{color:var(--muted);font-size:.85rem;margin-top:.4rem !important}
.rachunek-adres h2{
  font-family:var(--font-display);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;margin:0 0 var(--s3);
}