.cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  color: #202724;
  border: 0;
  background: #f1f1ec;
  box-shadow: -24px 0 70px rgb(20 31 28 / .2);
}
.cart-drawer::backdrop { background: rgb(15 24 22 / .58); backdrop-filter: blur(3px); }
.cart-panel { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; }
.cart-panel > header { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px 26px 22px; border-bottom: 1px solid rgb(32 39 36 / .2); }
.cart-panel header p { margin: 0 0 8px; font: 9px/1 'Courier New', monospace; letter-spacing: .16em; }
.cart-panel h2 { margin: 0; font: 32px/.95 Georgia, serif; font-weight: normal; }
.cart-close, .cart-remove, .cart-quantity button { color: inherit; border: 0; background: transparent; cursor: pointer; }
.cart-close { padding: 5px 0; font: 9px/1 'Courier New', monospace; letter-spacing: .12em; text-transform: uppercase; }
.cart-status { min-height: 14px; margin: 0; padding: 10px 26px 0; color: #53635e; font: 10px/1.4 'Courier New', monospace; }
.cart-lines { overflow: auto; padding: 12px 26px; }
.cart-empty { display: grid; align-content: center; justify-items: start; min-height: 55vh; }
.cart-empty p { margin: 0 0 18px; font: 24px/1.15 Georgia, serif; }
.cart-empty a { color: inherit; font: 10px/1 'Courier New', monospace; letter-spacing: .1em; text-transform: uppercase; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cart-item { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgb(32 39 36 / .18); }
.cart-item > img { width: 92px; height: 104px; object-fit: contain; background: #e5e7df; }
.cart-item-body { min-width: 0; }
.cart-item h3 { margin: 3px 0 6px; font: 17px/1.15 Georgia, serif; font-weight: normal; }
.cart-item-body > p { margin: 0; color: #61716c; font: 9px/1.3 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.cart-item-controls { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 18px; }
.cart-item-controls > strong { justify-self: end; font: 11px/1 'Courier New', monospace; }
.cart-quantity { display: grid; grid-template-columns: 28px 28px 28px; align-items: center; min-height: 30px; border: 1px solid rgb(32 39 36 / .45); }
.cart-quantity button, .cart-quantity output { display: grid; place-items: center; height: 100%; font: 13px/1 'Courier New', monospace; }
.cart-remove { grid-column: 1 / -1; justify-self: start; padding: 0; color: #61716c; font: 9px/1 'Courier New', monospace; text-decoration: underline; text-underline-offset: 4px; }
.cart-panel > footer { padding: 22px 26px 26px; border-top: 1px solid rgb(32 39 36 / .2); background: #e8eae3; }
.cart-panel > footer > div { display: flex; justify-content: space-between; margin-bottom: 16px; font: 11px/1 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.cart-checkout { display: grid; place-items: center; min-height: 54px; color: #f1f1ec; background: #b23b2b; font: 10px/1 'Courier New', monospace; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.cart-checkout:hover { background: #202724; }
.cart-panel > footer > p { margin: 11px 0 0; color: #61716c; font: 9px/1.4 'Courier New', monospace; text-align: center; }
.cart-close:focus-visible, .cart-remove:focus-visible, .cart-quantity button:focus-visible, .cart-checkout:focus-visible, .cart-empty a:focus-visible { outline: 2px solid #b23b2b; outline-offset: 3px; }
.cart-close:active, .cart-quantity button:active, .cart-checkout:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) {
  .cart-drawer[open] { animation: cart-in .28s cubic-bezier(.16,1,.3,1); }
  @keyframes cart-in { from { transform: translateX(100%); } }
}
@media (prefers-reduced-transparency: reduce) { .cart-drawer::backdrop { backdrop-filter: none; } }
@media (max-width: 520px) {
  .cart-panel > header, .cart-lines, .cart-panel > footer { padding-left: 18px; padding-right: 18px; }
  .cart-status { padding-left: 18px; padding-right: 18px; }
}