/* ==============================================
   CART — Overlay, sidebar del carrito y toast
   ============================================== */

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(2px); }
.overlay.open { opacity: 1; pointer-events: all; }

.cart-sidebar { position: fixed; top: 0; right: -480px; width: 440px; height: 100vh; background: white; z-index: 201; transition: right 0.4s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; overflow: hidden; }
.cart-sidebar.open { right: 0; }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 2px solid var(--border); background: var(--black); color: white; }
.cart-head-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.08em; }
.cart-head-title span { color: var(--pink); }
.close-btn { background: rgba(255,255,255,0.1); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.close-btn:hover { background: var(--pink); }

.cart-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 250px; color: var(--mid); text-align: center; gap: 1rem; }
.cart-empty-icon { font-size: 3rem; opacity: 0.4; }
.cart-empty p { font-size: 0.85rem; font-weight: 700; }

.cart-item-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 0.8rem; padding: 1rem 0; border-bottom: 1px solid var(--border); align-items: start; }
.cart-item-thumb { width: 70px; aspect-ratio: 3/4; border-radius: 0.5rem; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.cart-item-name { font-size: 0.88rem; font-weight: 800; margin-bottom: 0.2rem; }
.cart-item-meta { font-size: 0.72rem; color: var(--mid); font-weight: 600; margin-bottom: 0.6rem; }
.qty-row { display: flex; align-items: center; gap: 0.5rem; }
.qty-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); background: white; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; font-weight: 800; transition: all 0.2s; }
.qty-btn:hover { border-color: var(--pink); color: var(--pink); }
.qty-val { font-size: 0.85rem; font-weight: 900; min-width: 20px; text-align: center; }
.cart-item-price { font-size: 0.95rem; font-weight: 900; }

.cart-foot { padding: 1.2rem 1.5rem; border-top: 2px solid var(--border); }
.cart-row { display: flex; justify-content: space-between; margin-bottom: 0.6rem; font-size: 0.85rem; }
.cart-row.total { font-weight: 900; font-size: 1.05rem; margin-bottom: 1rem; }
.cart-row span:first-child { color: var(--mid); font-weight: 700; }
.cart-checkout-btn { width: 100%; padding: 1rem; background: var(--pink); color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; transition: background 0.2s, transform 0.2s; }
.cart-checkout-btn:hover { background: #e0256f; transform: translateY(-1px); }
.cart-wa-btn { width: 100%; padding: 1rem; background: #25D366; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; gap: 0.6rem; transition: background 0.2s; }
.cart-wa-btn:hover { background: #1da557; }

/* Toast de notificaciones */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--black); color: white; padding: 0.75rem 1.5rem; border-radius: 2rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; z-index: 400; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex-shrink: 0; }