/* ==========================================================================
   PANEL BOCZNY KOSZYKA
   Nie ma go w makiecie — zaprojektowany w obowiązującym języku wizualnym:
   te same tokeny, ta sama typografia, ta sama logika odstępów.

   KONTROLA DOSTĘPNOŚCI: wszystkie reguły są zawężone identyfikatorem
   #mp-panel-koszyka. Nazwa bloku „mp-panel” jest zajęta w dwóch innych
   miejscach — zakładki na karcie produktu (section.mp-panel w produkt.css)
   i panel podsumowania w zamówieniu (.mp-panel, .mp-panel__tytul,
   __lista, __suma, __nota w zamowienie.css). Ten arkusz wczytuje się
   ostatni, więc niezawężona reguła „.mp-panel{position:fixed;inset:0}”
   robiła z zakładek produktu i z podsumowania zamówienia pełnoekranowe
   nakładki: treść przykrywała nagłówek, a kolejność czytania i focusu
   rozjeżdżała się z układem. Zawężenie nie zmienia wyglądu panelu.
   Przy zmianie ramy panelu zachowaj id="mp-panel-koszyka".
   ========================================================================== */

#mp-panel-koszyka{ position:fixed; inset:0; z-index:120; }
#mp-panel-koszyka[hidden]{ display:none !important; }

#mp-panel-koszyka .mp-panel__tlo{
  position:absolute; inset:0; background:rgba(36,29,21,.34);
  opacity:0; transition:opacity .26s ease;
}
#mp-panel-koszyka.jest-otwarty .mp-panel__tlo{ opacity:1; }

#mp-panel-koszyka .mp-panel__okno{
  position:absolute; inset-block:0; right:0;
  width:min(430px, 100%); background:var(--mp-cream);
  border-left:1px solid var(--mp-line);
  box-shadow:-30px 0 70px -40px rgba(44,35,25,.55);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.32,.72,.32,1);
}
#mp-panel-koszyka.jest-otwarty .mp-panel__okno{ transform:none; }

#mp-panel-koszyka.jest-zajety .mp-panel__ciało{ opacity:.5; pointer-events:none; }
#mp-panel-koszyka .mp-panel__ciało{ flex:1; overflow-y:auto; transition:opacity .18s ease; }

/* --- głowa --- */

#mp-panel-koszyka .mp-panel__glowa{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--mp-gut) 18px; border-bottom:1px solid var(--mp-line);
  background:var(--mp-warm);
}
#mp-panel-koszyka .mp-panel__tytul{
  margin:0; font:300 clamp(22px,2.6vw,28px)/1.15 var(--mp-serif); color:var(--mp-ink);
}
#mp-panel-koszyka .mp-panel__zamknij{
  min-width:var(--mp-tap); min-height:var(--mp-tap);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--mp-body-2);
}
#mp-panel-koszyka .mp-panel__zamknij:hover{ color:var(--mp-ink); }

/* --- pasek darmowej wysyłki --- */

#mp-panel-koszyka .mp-panel__wysylka{ padding:16px var(--mp-gut); border-bottom:1px solid var(--mp-line); }
#mp-panel-koszyka .mp-panel__wysylka-row{
  display:flex; justify-content:space-between; gap:14px; margin-bottom:9px;
  font:400 10.5px/1.4 var(--mp-sans); letter-spacing:.13em;
  text-transform:uppercase; color:var(--mp-muted);
}
#mp-panel-koszyka .mp-panel__tor{ height:2px; background:var(--mp-line-2); }
#mp-panel-koszyka .mp-panel__pasek{ height:2px; background:var(--mp-taupe); transition:width .3s ease; }

/* --- pozycje --- */

#mp-panel-koszyka .mp-panel__lista{ list-style:none; margin:0; padding:0; }
#mp-panel-koszyka .mp-panel__poz{
  display:grid; grid-template-columns:76px 1fr; gap:16px;
  padding:20px var(--mp-gut); border-bottom:1px solid var(--mp-line);
}
#mp-panel-koszyka .mp-panel__foto{
  display:block; background:var(--mp-white); border:1px solid #F1ECE5;
  aspect-ratio:5/7; overflow:hidden;
}
#mp-panel-koszyka .mp-panel__foto img{ width:100%; height:100%; object-fit:contain; padding:6%; display:block; }

#mp-panel-koszyka .mp-panel__tresc{ display:flex; flex-direction:column; gap:7px; min-width:0; }
#mp-panel-koszyka .mp-panel__nazwa{
  font:400 16px/1.3 var(--mp-serif); color:var(--mp-ink);
}
#mp-panel-koszyka .mp-panel__nazwa:hover{ color:var(--mp-bronze); }
#mp-panel-koszyka .mp-panel__wariant{
  margin:0; font:400 10.5px/1.5 var(--mp-sans); letter-spacing:.12em;
  text-transform:uppercase; color:var(--mp-muted);
}
#mp-panel-koszyka .mp-panel__dol{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:2px; }

#mp-panel-koszyka .mp-panel__ilosc{ display:flex; align-items:center; border:1px solid var(--mp-line-2); }
#mp-panel-koszyka .mp-panel__krok{
  min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center;
  font:300 15px/1 var(--mp-sans); color:var(--mp-ink-2);
}
#mp-panel-koszyka .mp-panel__krok:hover:not([disabled]){ background:var(--mp-band); }
#mp-panel-koszyka .mp-panel__krok[disabled]{ color:var(--mp-muted); cursor:default; }
#mp-panel-koszyka .mp-panel__liczba{
  min-width:30px; text-align:center; font:300 13px/1 var(--mp-sans);
  color:var(--mp-ink); --mp-cyfry:var(--mp-cyfry-kolumna);
}
#mp-panel-koszyka .mp-panel__cena{ font:300 13.5px/1 var(--mp-sans); color:var(--mp-ink); white-space:nowrap; }
#mp-panel-koszyka .mp-panel__cena del{ color:var(--mp-muted); margin-right:6px; }
#mp-panel-koszyka .mp-panel__cena ins{ text-decoration:none; }

#mp-panel-koszyka .mp-panel__usun{
  align-self:flex-start; min-height:32px; padding-block:6px;
  font:400 10.5px/1 var(--mp-sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mp-muted); border-bottom:1px solid transparent;
}
#mp-panel-koszyka .mp-panel__usun:hover{ color:var(--mp-ink); border-bottom-color:var(--mp-line-2); }

/* --- stopka --- */

#mp-panel-koszyka .mp-panel__stopka{
  padding:20px var(--mp-gut) 24px; border-top:1px solid var(--mp-line);
  background:var(--mp-warm); display:flex; flex-direction:column; gap:12px;
}
#mp-panel-koszyka .mp-panel__suma{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mp-muted);
}
#mp-panel-koszyka .mp-panel__suma strong{
  font:300 22px/1 var(--mp-serif); letter-spacing:0; text-transform:none; color:var(--mp-ink);
}
#mp-panel-koszyka .mp-panel__nota{ margin:0; font:300 12px/1.5 var(--mp-sans); color:var(--mp-muted); }
#mp-panel-koszyka .mp-panel__kasa{ width:100%; }
#mp-panel-koszyka .mp-panel__pelny{
  align-self:center; min-height:var(--mp-tap); display:inline-flex; align-items:center;
  font:400 10.5px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-body-2); border-bottom:1px solid var(--mp-line-2);
}
#mp-panel-koszyka .mp-panel__pelny:hover{ color:var(--mp-ink); }

/* --- pusty --- */

#mp-panel-koszyka .mp-panel__pusty{ padding:clamp(40px,8vw,72px) var(--mp-gut); text-align:center; }
#mp-panel-koszyka .mp-panel__pusty-tytul{
  margin:0 0 12px; font:300 clamp(21px,2.4vw,26px)/1.25 var(--mp-serif); color:var(--mp-ink);
}
#mp-panel-koszyka .mp-panel__pusty-tekst{
  margin:0 auto 26px; max-width:30ch;
  font:300 13.5px/1.8 var(--mp-sans); color:var(--mp-body-2); text-wrap:pretty;
}

body.mp-panel-otwarty{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
#mp-panel-koszyka .mp-panel__okno, #mp-panel-koszyka .mp-panel__tlo, #mp-panel-koszyka .mp-panel__pasek{ transition:none; }
}