.saas-cart-drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 100vw; height: 100vh; background: var(--saas-white); z-index: var(--saas-z-drawer); transform: translateX(100%); transition: transform var(--saas-transition-slow); box-shadow: -10px 0 40px rgb(0 0 0 / 0.1); display: flex; flex-direction: column; }
.saas-cart-drawer.active { transform: translateX(0); }
.saas-cart-drawer__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: calc(var(--saas-z-drawer) - 1); opacity: 0; visibility: hidden; transition: all var(--saas-transition-base); }
.saas-cart-drawer__overlay.active { opacity: 1; visibility: visible; }
.saas-cart-drawer__header { padding: var(--saas-space-6); border-bottom: 1px solid var(--saas-gray-100); display: flex; justify-content: space-between; align-items: center; }
.saas-cart-drawer__title { font-size: 1.25rem; font-weight: 700; color: var(--saas-gray-900); margin: 0; display: flex; align-items: center; gap: var(--saas-space-3); }
.saas-cart-drawer__count { background: var(--saas-primary); color: var(--saas-white); font-size: 0.875rem; padding: var(--saas-space-1) var(--saas-space-3); border-radius: var(--saas-radius-full); font-weight: 600; }
.saas-cart-drawer__close { width: 40px; height: 40px; border-radius: var(--saas-radius-full); border: none; background: var(--saas-gray-100); color: var(--saas-gray-600); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--saas-transition-fast); }
.saas-cart-drawer__close:hover { background: var(--saas-gray-200); color: var(--saas-gray-900); }
.saas-cart-drawer__items { flex: 1; overflow-y: auto; padding: var(--saas-space-4); }
.saas-cart-drawer__empty { text-align: center; padding: var(--saas-space-16) var(--saas-space-8); }
.saas-cart-drawer__empty-icon { width: 80px; height: 80px; margin: 0 auto var(--saas-space-6); color: var(--saas-gray-300); }
.saas-cart-drawer__empty-title { font-size: 1.125rem; font-weight: 600; color: var(--saas-gray-700); margin: 0 0 var(--saas-space-2); }
.saas-cart-drawer__empty-text { color: var(--saas-gray-400); margin: 0 0 var(--saas-space-6); }
.saas-cart-item { display: flex; gap: var(--saas-space-4); padding: var(--saas-space-4); background: var(--saas-gray-50); border-radius: var(--saas-radius-lg); margin-bottom: var(--saas-space-3); transition: all var(--saas-transition-fast); }
.saas-cart-item:hover { background: var(--saas-gray-100); }
.saas-cart-item__image { width: 80px; height: 80px; border-radius: var(--saas-radius-md); overflow: hidden; flex-shrink: 0; background: var(--saas-white); }
.saas-cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.saas-cart-item__details { flex: 1; min-width: 0; }
.saas-cart-item__name { font-weight: 600; font-size: 0.9375rem; color: var(--saas-gray-800); margin: 0 0 var(--saas-space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saas-cart-item__meta { font-size: 0.8125rem; color: var(--saas-gray-500); margin: 0 0 var(--saas-space-3); }
.saas-cart-item__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--saas-space-3); }
.saas-cart-item__price { font-weight: 700; color: var(--saas-gray-900); font-size: 0.9375rem; }
.saas-cart-item__remove { width: 28px; height: 28px; border-radius: var(--saas-radius-sm); border: none; background: transparent; color: var(--saas-gray-400); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--saas-transition-fast); flex-shrink: 0; }
.saas-cart-item__remove:hover { background: var(--saas-error); color: var(--saas-white); }
.saas-cart-drawer__footer { padding: var(--saas-space-6); border-top: 1px solid var(--saas-gray-100); background: var(--saas-white); }
.saas-cart-drawer__subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--saas-space-4); }
.saas-cart-drawer__subtotal-label { font-weight: 600; color: var(--saas-gray-700); }
.saas-cart-drawer__subtotal-value { font-size: 1.25rem; font-weight: 800; color: var(--saas-gray-900); }
.saas-cart-drawer__buttons { display: flex; flex-direction: column; gap: var(--saas-space-3); }
.saas-cart-drawer__buttons .saas-btn { width: 100%; padding: var(--saas-space-4); font-size: 1rem; }
.saas-cart-drawer__note { text-align: center; font-size: 0.8125rem; color: var(--saas-gray-400); margin: var(--saas-space-3) 0 0; }
.saas-shipping-progress { padding: var(--saas-space-4) var(--saas-space-6); background: linear-gradient(to right, rgb(37 99 235 / 0.05), rgb(37 99 235 / 0.1)); border-bottom: 1px solid var(--saas-gray-100); }
.saas-shipping-progress__bar { height: 6px; background: var(--saas-gray-200); border-radius: var(--saas-radius-full); overflow: hidden; margin-bottom: var(--saas-space-2); }
.saas-shipping-progress__fill { height: 100%; background: linear-gradient(to right, var(--saas-primary), var(--saas-success)); border-radius: var(--saas-radius-full); transition: width var(--saas-transition-slow); position: relative; }
.saas-shipping-progress__fill::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.3)); animation: saas-shimmer 2s infinite; }
@keyframes saas-shimmer { 0% { transform: translateX(-20px); } 100% { transform: translateX(20px); } }
.saas-shipping-progress__text { font-size: 0.8125rem; color: var(--saas-gray-600); text-align: center; margin: 0; }
.saas-shipping-progress__text strong { color: var(--saas-primary); }
@keyframes saas-cart-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.saas-cart-syncing { animation: saas-cart-pulse 300ms ease; }
@media (max-width: 480px) { .saas-cart-drawer { width: 100%; } }