/* Scoped Cart Styles (consolidated & optimized) */
/* Overlay */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity 200ms ease; z-index:2000; }
.cart-overlay.visible { opacity:1; pointer-events:auto; }

/* Panel */
#cart-panel { position:fixed; top:0; right:0; width:500px; max-width:90vw; height:100%; background:#fff; box-shadow:-2px 0 16px rgba(0,0,0,0.12), -1px 0 4px rgba(0,0,0,0.06); transform:translate3d(100%,0,0); transition:transform 280ms cubic-bezier(.4,0,.2,1); z-index:2001; display:flex; flex-direction:column; border-radius:0 8px 8px 0; padding:0 16px; overflow-y:auto; will-change:transform; backface-visibility:hidden; -webkit-font-smoothing:antialiased; }
#cart-panel.open { transform:translate3d(0,0,0); }

/* Header */
#cart-panel header { padding:14px 4px; border-bottom:1px solid rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:linear-gradient(135deg,#ffffff 0%,#f9fafb 60%); backdrop-filter:blur(6px); z-index:5; }
#cart-panel header h2 { font-size:1.05rem; font-weight:600; margin:0; letter-spacing:.5px; }
#cart-panel .btn-close{background:none;border:none;font-size:1.45rem;color:#6c757d;cursor:pointer;padding:.25rem;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .25s ease;}
#cart-panel .btn-close:hover{background:#f3f4f6;color:#444;transform:scale(1.08)}
#cart-panel .btn-close:after{content:"×";font-size:1.25rem;line-height:1;pointer-events:none}

/* Items container */
#cart-panel .cart-items { flex:1; overflow-y:auto; padding:16px 8px 140px 8px; position:relative; scrollbar-width:thin; scrollbar-color:#c7cdd2 transparent; }
#cart-panel .cart-items::-webkit-scrollbar { width:10px; }
#cart-panel .cart-items::-webkit-scrollbar-track { background:transparent; }
#cart-panel .cart-items::-webkit-scrollbar-thumb { background:#d0d4d8; border-radius:20px; border:2px solid transparent; background-clip:content-box; }

/* Empty state */
#cart-panel .empty-cart{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center;height:100%;}
#cart-panel .empty-title{font-size:1.25rem;font-weight:600;color:#495057;margin-bottom:1rem}
#cart-panel .empty-text{font-size:.9rem;color:#6c757d;margin-bottom:2rem;line-height:1.5}
#cart-panel .empty-btn{background:#b6002c;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;transition:all .3s ease;text-decoration:none;display:inline-block;box-shadow:0 4px 14px -4px rgba(182,0,44,.5)}
#cart-panel .empty-btn:hover{background:#900021;transform:translateY(-2px);box-shadow:0 8px 24px -6px rgba(182,0,44,.55)}

/* Item card */
#cart-panel .cart-item { display:flex; align-items:flex-start; background:#ffffff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:14px 52px 14px 14px; margin:0 4px 14px; position:relative; box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.015); transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease; animation:cartItemEnter .35s cubic-bezier(.4,0,.2,1); }
#cart-panel .cart-item:hover { box-shadow:0 8px 24px -4px rgba(0,0,0,0.10), 0 4px 12px -2px rgba(0,0,0,0.06); transform:translateY(-2px); border-color:rgba(182,0,44,0.35); }
@keyframes cartItemEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
#cart-panel .cart-item img { width:80px; height:80px; object-fit:contain; border:1px solid #eee; border-radius:6px; margin-right:10px; background:#fff; }

#cart-panel .cart-item .details { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding-right:48px; min-width:0; }
#cart-panel .cart-item .details .name { font-size:14px; font-weight:500; margin-bottom:4px; line-height:1.3; color:#212529; word-wrap:break-word; overflow-wrap:break-word; }
#cart-panel .cart-item .details .controls { display:flex; align-items:center; margin-bottom:8px; background:#f1f3f5; border-radius:40px; padding:2px 6px; gap:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04); }
#cart-panel .cart-item .details .controls button { width:30px; height:30px; border-radius:50%; background:#fff; display:flex; justify-content:center; align-items:center; border:1px solid #d0d5d9; color:#444; font-size:.85rem; font-weight:600; transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; will-change:transform; cursor:pointer; }
#cart-panel .cart-item .details .controls button:hover { background:#ffffff; border-color:#b6002c; color:#b6002c; transform:translateY(-1px); }
#cart-panel .cart-item .details .controls button.decrease.active { border-color:#b6002c; color:#b6002c; }
#cart-panel .cart-item .details .controls button.decrease.active:hover { background-color:rgba(182,0,44,0.1); }
#cart-panel .cart-item .details .controls button.increase { border-color:#b6002c; color:#b6002c; }
#cart-panel .cart-item .details .controls button.increase:hover { background-color:rgba(182,0,44,0.08); }
#cart-panel .cart-item .details .controls .qty { min-width:30px; text-align:center; font-weight:500; font-size:.85rem; }
#cart-panel .cart-item .details .controls button.remove { margin-left:auto; border:none; background:transparent; font-size:16px; color:#c5c9cc; padding:0; transition:color .2s ease, transform .2s ease; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
#cart-panel .cart-item .details .controls button.remove:hover { color:#dc3545; transform:scale(1.15); }
#cart-panel .cart-item .details .stock { font-size:12px; color:#2a9d8f; margin:4px 0; }
#cart-panel .cart-item .details .unit-price { font-size:12px; color:#888; margin-bottom:8px; }
#cart-panel .cart-item .details .cart-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:1rem; flex-wrap:wrap; }
#cart-panel .cart-item .details .price { font-size:14px; font-weight:600; color:#000; white-space:nowrap; }
#cart-panel .cart-item>button.remove{position:absolute;top:8px;right:8px;background:transparent;border:1.5px solid #c8ccd0;padding:4px;color:#dc3545;transition:all .25s ease;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.02);z-index:2}
#cart-panel .cart-item>button.remove:hover{background:rgba(220,53,69,.1);border-color:#b6002c;transform:scale(1.1)}
#cart-panel .cart-item>button.remove img{width:16px;height:16px;pointer-events:none;filter:brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(7404%) hue-rotate(356deg) brightness(95%) contrast(118%)}

/* Footer & Totals */
#cart-panel footer { position:sticky; bottom:0; background:linear-gradient(180deg, rgba(255,255,255,0.85) 0%, #ffffff 60%); backdrop-filter:blur(10px); padding:12px 4px 18px 4px; border-top:1px solid rgba(0,0,0,0.06); box-shadow:0 -4px 12px -2px rgba(0,0,0,0.05); z-index:10; }
#cart-panel footer .progress-free-wrapper { margin:0 4px 12px; background:#f3f5f7; border:1px solid rgba(0,0,0,0.04); border-radius:10px; padding:10px 14px 14px; position:relative; overflow:hidden; }
#cart-panel footer .progress-free-wrapper:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(182,0,44,0.05), rgba(144,0,33,0.05)); pointer-events:none; }
#cart-panel footer .free-title { font-size:.7rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:#555; margin-bottom:6px; }
#cart-panel footer .free-bar { height:8px; background:#e3e7ea; border-radius:4px; overflow:hidden; position:relative; }
#cart-panel footer .free-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,#b6002c,#900021); border-radius:inherit; transition:width .5s cubic-bezier(.4,0,.2,1); box-shadow:0 0 0 1px rgba(255,255,255,0.25) inset; }
#cart-panel footer .free-msg { margin-top:8px; font-size:.75rem; font-weight:500; color:#333; display:flex; align-items:center; gap:6px; }
#cart-panel footer .free-msg .icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; background:#b6002c; color:#fff; font-size:.65rem; border-radius:50%; box-shadow:0 2px 4px rgba(182,0,44,.4); }
#cart-panel footer .totals-wrapper { background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:14px 16px 18px; margin:0 4px 14px; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
#cart-panel footer .total-row { display:flex; align-items:center; justify-content:space-between; font-size:.85rem; padding:4px 0; }
#cart-panel footer .total-row.final { font-size:1.05rem; font-weight:700; margin-top:6px; border-top:1px solid rgba(0,0,0,0.08); padding-top:10px; }
#cart-panel footer .total-row .label { color:#555; font-weight:500; }
#cart-panel footer .total-row .value { font-weight:600; letter-spacing:.4px; }
#cart-panel footer .checkout-btn { display:block; width:100%; padding:14px 18px; background:linear-gradient(135deg,#b6002c,#900021); color:#fff; text-align:center; border:none; border-radius:10px; cursor:pointer; font-size:1rem; font-weight:600; box-shadow:0 6px 16px -4px rgba(182,0,44,.45); transition:box-shadow .35s ease, transform .35s ease; position:relative; overflow:hidden; }
#cart-panel footer .checkout-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:left .55s ease}
#cart-panel footer .checkout-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px -6px rgba(182,0,44,.5); }
#cart-panel footer .checkout-btn:hover:before{left:100%}
#cart-panel footer .checkout-btn.loading{cursor:wait;opacity:.9}
#cart-panel footer .checkout-btn .checkout-btn-loading{display:none}
#cart-panel footer .checkout-btn.loading .checkout-btn-content{display:none}
#cart-panel footer .checkout-btn.loading .checkout-btn-loading{display:inline-flex;justify-content:center}

/* Loading overlay (checkout) */
.checkout-loading{position:fixed;inset:0;background:rgba(255,255,255,.9);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:3000}
.checkout-loading .spinner{width:60px;height:60px;border:5px solid rgba(182,0,44,.1);border-top-color:#b6002c;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}
.checkout-loading p{font-size:1.1rem;color:#333;font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pulse animation for quantity change */
.cart-qty-pulse { animation:cartQtyPulse .6s ease; }
@keyframes cartQtyPulse { 0%{ transform:scale(.9); background:rgba(182,0,44,.15);} 50%{ transform:scale(1.05); background:rgba(182,0,44,.10);} 100%{ transform:scale(1); background:transparent;} }

/* Responsive adjustments */
@media (max-width: 768px) {
	#cart-panel { width:100%; max-width:100%; border-radius:0; padding:0 14px; }
	#cart-panel .cart-item { padding:12px 44px 12px 12px; }
	#cart-panel .cart-item img { width:70px; height:70px; }
	#cart-panel footer { padding:12px 4px 18px; }
	#cart-panel .cart-items { padding:14px 4px 140px 4px; }
}
@media (max-width: 460px) {
	#cart-panel .cart-item { padding:12px 14px 12px 12px; }
	#cart-panel .cart-item img { width:60px; height:60px; }
	#cart-panel .cart-item .details { padding-right:16px; }
	#cart-panel .cart-item .details .cart-row { gap:6px; }
	#cart-panel .cart-item .details .price { white-space:normal; }
}