/* Cart drawer: a native <dialog> pinned to the right edge. */
.cart {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(440px, 100vw); height: 100%; max-height: none; max-width: none;
  padding: 24px; border: 0;
  background: #fff; color: var(--text);
  display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.cart[open] { display: flex; animation: cart-in 0.25s ease-out; }
.cart::backdrop { background: rgb(0 0 0 / 0.6); }
@keyframes cart-in { from { transform: translateX(40px); opacity: 0; } }
.cart-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cart-top h2 { font-size: 20px; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.cart-close { font: 700 12px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 8px 0; }
.cart-empty { color: var(--text); }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-lines li {
  display: grid; grid-template-columns: 72px 1fr auto; grid-template-rows: auto auto; gap: 4px 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.cart-lines img { grid-row: span 2; background: var(--well); }
.line-name { color: var(--ink); font: 700 13px/1.4 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; }
.line-price { text-align: right; color: var(--ink); font-family: var(--num); font-size: 14px; }
.line-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); justify-self: start; }
.line-qty button { width: 34px; height: 32px; font: 400 16px var(--num); color: var(--ink); background: none; border: 0; cursor: pointer; }
.line-qty button:disabled { opacity: 0.3; cursor: default; }
.line-qty output { min-width: 18px; text-align: center; color: var(--ink); font-family: var(--num); }
.line-remove { justify-self: end; font: 300 14px var(--sans); color: var(--text); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.ship { border: 0; padding: 0; margin: 20px 0 0; }
.ship legend { color: var(--ink); font: 700 12px var(--sans); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; }
.ship label { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; font-size: 15px; cursor: pointer; }
.ship input { accent-color: var(--ink); }
.ship b { font: 400 14px var(--num); }
.sums { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 20px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.sums dd { margin: 0; text-align: right; color: var(--ink); font-family: var(--num); }
.sums .total { color: var(--ink); font: 700 18px var(--sans); padding-top: 6px; }
.sums dd.total { font: 500 18px var(--num); }
.pay { min-height: 50px; }
.cart-msg { color: var(--ink); font-size: 0.95rem; margin-top: 12px; }
.cart-msg:empty { display: none; }
@media (max-width: 900px) {
  .cart { padding: 16px; }
}