/* cart.css — Panzer IT: Warenkorb-Drawer
   Setzt auf den Tokens/Utilities aus base.css auf (keine Neudefinition von Variablen). */

.cart-drawer{
  position:fixed; inset:0; z-index:200;
  visibility:hidden; pointer-events:none;
}
.cart-drawer.open{ visibility:visible; pointer-events:auto; }

.cart-drawer__overlay{
  position:absolute; inset:0;
  background:rgba(20,22,25,.6);
  opacity:0; transition:opacity .35s var(--ease);
}
.cart-drawer.open .cart-drawer__overlay{ opacity:1; }

.cart-drawer__panel{
  position:absolute; inset:0 0 0 auto;
  width:min(92vw,400px); height:100vh; height:100dvh;
  background:var(--c-panel); border-left:1px solid var(--c-line);
  box-shadow:-16px 0 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s var(--ease);
  padding:var(--sp-4);
}
.cart-drawer.open .cart-drawer__panel{ transform:translateX(0); }

.cart-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-3); padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--c-line);
}
.cart-drawer__head h2{
  font-size:1.3rem;
}
.cart-drawer__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.2rem; height:2.2rem; border-radius:999px; border:1px solid var(--c-line);
  background:transparent; color:var(--c-text); cursor:pointer;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.cart-drawer__close:hover, .cart-drawer__close:focus-visible{
  border-color:var(--c-copper); transform:translateY(-2px);
}

.cart-items{
  list-style:none; flex:1; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.cart-line{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding-block:var(--sp-1); border-bottom:1px solid var(--c-line);
  font-size:.92rem; color:var(--c-text);
}
.cart-line span:first-child{ color:var(--c-text); }
.cart-line span:nth-child(2){ color:var(--c-muted); white-space:nowrap; }
.cart-line button{
  background:transparent; border:none; color:var(--c-muted); cursor:pointer;
  font-size:.9rem; line-height:1; padding:.3em;
  transition:color .2s var(--ease);
}
.cart-line button:hover, .cart-line button:focus-visible{ color:var(--c-copper); }

.cart-empty{
  color:var(--c-muted); text-align:center; padding-block:var(--sp-4);
}

.cart-drawer__foot{
  border-top:1px solid var(--c-line); padding-top:var(--sp-3);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.cart-drawer__total{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
}
.cart-drawer__total span:last-child{ color:var(--c-brass); }
.cart-drawer__cta{ width:100%; justify-content:center; }

/* prefers-reduced-motion wird zentral in base.css abgefangen
   (globales *{transition:none!important}), keine zusätzliche Regel hier nötig. */