/* The native dialog keeps focus and Escape behavior while the cart becomes a drawer. */
#cart-dialog {
  width: min(480px, 100%);
  max-width: 480px;
  height: 100dvh;
  max-height: 100dvh !important;
  margin: 0 0 0 auto;
  overflow: hidden;
  box-shadow: -18px 0 70px rgb(48 34 39 / .12);
}
#cart-dialog[open] { display: flex; flex-direction: column; }
#cart-dialog::backdrop { background: rgb(48 34 39 / .45); }
#cart-dialog .cart-heading {
  flex: none;
  padding: 24px 28px;
  border-bottom: 1px solid var(--surface);
}
#cart-dialog .cart-heading h2 {
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--wine);
}
#cart-dialog .close-button { background: transparent; }
#cart-dialog .close-button:hover { background: var(--ground); }
#cart-dialog .cart-items {
  flex: 1;
  min-height: 100px;
  padding: 0 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--surface) transparent;
}
#cart-dialog .cart-line {
  padding: 24px 0;
  border-bottom: 1px solid var(--surface);
  gap: 20px;
}
#cart-dialog .cart-line:last-child { border-bottom: 0; }
#cart-dialog .cart-line img {
  width: 96px;
  height: 116px;
  object-fit: cover;
  background: var(--ground);
}
#cart-dialog .cart-line h3 { margin-bottom: 6px; }
#cart-dialog .cart-line .quantity { border: 1px solid var(--surface); background: var(--paper); }
#cart-dialog .quantity button:hover { background: var(--ground); }
#cart-dialog .remove-item { display: block; margin-top: 10px; }
#cart-dialog .cart-summary {
  flex: none;
  margin-top: 0;
  padding: 22px 28px max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--surface);
  background: var(--ground);
}
#cart-dialog .grand-total { margin-top: 12px; color: var(--wine); }
#cart-dialog .cart-summary .button { margin-top: 18px; }
#cart-dialog .cart-summary .text-action { margin-top: 14px; }
#cart-dialog .cart-empty { padding: 56px 4px; }
@media (prefers-reduced-motion: no-preference) {
  #cart-dialog[open] { animation: lk-cart-enter .32s var(--ease); }
  #cart-dialog[open]::backdrop { animation: lk-cart-backdrop .25s ease; }
  @keyframes lk-cart-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes lk-cart-backdrop { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 480px) {
  #cart-dialog { max-width: 100%; }
  #cart-dialog .cart-heading { padding: 16px 20px; }
  #cart-dialog .cart-items { padding: 0 20px; }
  #cart-dialog .cart-summary { padding: 18px 20px max(20px, env(safe-area-inset-bottom)); }
}
@media (max-height: 600px) {
  #cart-dialog .cart-heading { padding-top: 12px; padding-bottom: 12px; }
  #cart-dialog .cart-summary { padding-top: 14px; padding-bottom: 14px; }
  #cart-dialog .cart-summary .small { margin-top: 6px; }
  #cart-dialog .cart-summary .button { margin-top: 12px; }
}