.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  max-width: 100vw;
  z-index: var(--z-drawer, 800);

  display: flex;
  flex-direction: column;
  background: var(--surface-card, #fff);
  box-shadow:
    -16px 0 32px rgba(15, 23, 42, 0.12),
    -4px 0 12px rgba(15, 23, 42, 0.06);


  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;


  transition:
    transform var(--duration-slow, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear var(--duration-slow, 320ms);

  will-change: transform;
}

.cart-drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--duration-slow, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}


.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5, 20px) var(--space-6, 24px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
  background: linear-gradient(180deg,
    var(--color-brand-50, #edfaf3) 0%,
    transparent 100%);
}

.cart-drawer__head h3 {
  margin: 0;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-brand-900, #0f4529);
  letter-spacing: var(--tracking-tight, -0.02em);
}

.cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full, 50%);
  color: var(--color-neutral-500, #6b6b62);
  font-size: 1.2rem;
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) ease,
    color var(--duration-fast, 150ms) ease,
    transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
}
.cart-drawer__close:hover {
  background: var(--color-neutral-100, #f2f2ee);
  color: var(--color-brand-700, #1a7344);
  transform: rotate(90deg);
}
.cart-drawer__close:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(31, 122, 77, 0.35));
}


.cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4, 16px) var(--space-6, 24px);
  -webkit-overflow-scrolling: touch;
}

.cart-drawer__body::-webkit-scrollbar { width: 8px; }
.cart-drawer__body::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300, #b4b4a8);
  border-radius: var(--radius-pill, 999px);
}
.cart-drawer__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-500, #6b6b62);
}


.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer, 800) - 1);
  background: rgba(10, 46, 26, 0.45);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-base, 220ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear var(--duration-base, 220ms);
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--duration-base, 220ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}



body.cart-drawer-open {
  overflow: hidden;
}


@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw;
  }
  .cart-drawer__head {
    padding: var(--space-4, 16px) var(--space-5, 20px);
  }
  .cart-drawer__body {
    padding: var(--space-4, 16px) var(--space-5, 20px);
  }
}


@media (prefers-reduced-motion: reduce) {
  .cart-drawer,
  .cart-overlay {
    transition-duration: 1ms !important;
  }
  .cart-drawer__close:hover { transform: none; }
}