* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #f8f9fa;
    color: #333;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    color: #2c3e50;
    font-size: 28px;
    font-weight: 700;
}

.logo .tagline {
    color: #7f8c8d;
    font-size: 14px;
}

.cart-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.cart-btn:hover {
    background: #2980b9;
}

#cartCount {
    background: #e74c3c;
    padding: 2px 8px;
    border-radius: 50%;
    margin-left: 8px;
}

/* Search Section */
.search-section {
    background: white;
    padding: 20px 0;
    border-bottom: 1px solid #ecf0f1;
}

.filters-form {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 200px;
    display: flex;
}

.search-box input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
}

.search-box button {
    padding: 10px 20px;
    background: #2c3e50;
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
}

.filter-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-group select {
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

/* Products Grid */
.products-section {
    padding: 40px 0;
}

.products-count {
    margin-bottom: 20px;
    color: #7f8c8d;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 30px rgba(0,0,0,0.15);
}

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.badge-oferta {
    background: #e74c3c;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.badge-agotado {
    background: #95a5a6;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.product-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.no-image {
    font-size: 48px;
    color: #bdc3c7;
}

.product-info {
    padding: 20px;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    min-height: 48px;
}

.product-brand {
    color: #3498db;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.product-sku {
    color: #7f8c8d;
    font-size: 12px;
    margin-bottom: 10px;
}

.product-prices {
    margin: 10px 0;
}

.price {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
}

.price-old {
    font-size: 18px;
    color: #95a5a6;
    text-decoration: line-through;
    margin-right: 10px;
}

.price-sale {
    font-size: 24px;
    font-weight: 700;
    color: #e74c3c;
}

.currency {
    font-size: 14px;
    color: #7f8c8d;
    margin-left: 5px;
}

.product-stock {
    font-size: 14px;
    margin: 10px 0;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
}

.in-stock {
    background: #d4edda;
    color: #155724;
}

.out-stock {
    background: #f8d7da;
    color: #721c24;
}

.product-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.qty-input {
    width: 60px;
    padding: 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    text-align: center;
}

.btn-add-cart {
    flex: 1;
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-add-cart:hover {
    background: #229954;
}

/* Cart Sidebar */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: white;
    box-shadow: -2px 0 20px rgba(0,0,0,0.1);
    transition: right 0.3s;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.active {
    right: 0;
}

.cart-header {
    padding: 20px;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    font-size: 20px;
}

.close-cart {
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: #7f8c8d;
}

.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-empty {
    text-align: center;
    color: #95a5a6;
    padding: 40px 0;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #ecf0f1;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.cart-item-price {
    color: #7f8c8d;
    font-size: 14px;
}

.cart-item-subtotal {
    font-weight: 600;
    color: #2c3e50;
    margin-top: 5px;
}

.btn-remove {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 18px;
}

.cart-footer {
    padding: 20px;
    border-top: 2px solid #ecf0f1;
    background: #f8f9fa;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.btn-checkout {
    width: 100%;
    padding: 15px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-checkout:hover {
    background: #2980b9;
}

/* Overlay */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

#overlay.active {
    display: block;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #7f8c8d;
}

.modal-close:hover {
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.btn-submit-order {
    width: 100%;
    padding: 15px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit-order:hover {
    background: #229954;
}

/* Notification */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #27ae60;
    color: white;
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 3000;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .filters-form {
        flex-direction: column;
    }
    
    .search-box {
        width: 100%;
    }
    
    .filter-group {
        width: 100%;
        flex-direction: column;
    }
    
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .modal-content {
        margin: 10% 20px;
    }
}


/* Estilos para el logo */
.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo a {
    display: inline-block;
}

.logo img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.logo .tagline {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}

/* Responsive para el logo */
@media (max-width: 768px) {
    .logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .logo img {
        height: 35px;
    }
    
    .logo .tagline {
        font-size: 12px;
    }
}

// assets/js/main.js - VERSIÓN CORREGIDA CON LOCALSTORAGE

// ============================================
// 1. INICIALIZAR CARRITO DESDE LOCALSTORAGE
// ============================================

let carrito = [];

// Cargar carrito guardado
function cargarCarrito() {
    const guardado = localStorage.getItem('carrito_bicufon');
    if (guardado) {
        try {
            carrito = JSON.parse(guardado);
        } catch (e) {
            carrito = [];
        }
    } else {
        carrito = [];
    }
    actualizarCarrito();
}

// Guardar carrito en localStorage
function guardarCarrito() {
    localStorage.setItem('carrito_bicufon', JSON.stringify(carrito));
}

// ============================================
// 2. AGREGAR PRODUCTO AL CARRITO
// ============================================

function agregarAlCarrito(productoId) {
    // Obtener cantidad
    const qtyInput = document.getElementById(`qty_${productoId}`);
    let cantidad = 1;
    
    if (qtyInput) {
        cantidad = parseInt(qtyInput.value) || 1;
    }
    
    if (cantidad < 1) {
        mostrarNotificacion('La cantidad debe ser al menos 1', 'error');
        return;
    }
    
    // Obtener datos del producto desde la tarjeta o elemento
    let nombre = '';
    let precio = 0;
    let imagen = '';
    let sku = '';
    
    // Buscar en diferentes lugares donde podría estar el producto
    const card = document.querySelector(`.product-card[data-product-id="${productoId}"]`);
    const detailCard = document.querySelector(`.product-detail`);
    
    if (card) {
        // Estamos en index.php
        const nameEl = card.querySelector('.product-name');
        const priceEl = card.querySelector('.price');
        const brandEl = card.querySelector('.product-brand');
        const skuEl = card.querySelector('.product-sku');
        
        nombre = nameEl ? nameEl.textContent.trim() : 'Producto';
        sku = skuEl ? skuEl.textContent.replace('SKU:', '').trim() : '';
        
        // Obtener precio del elemento de precio
        if (priceEl) {
            const priceText = priceEl.textContent.replace(/[^0-9.]/g, '');
            precio = parseFloat(priceText) || 0;
        } else {
            // Buscar en precio con margen
            const priceContainer = card.querySelector('.price-container');
            if (priceContainer) {
                const priceValue = priceContainer.querySelector('.price, .price-sale');
                if (priceValue) {
                    const priceText = priceValue.textContent.replace(/[^0-9.]/g, '');
                    precio = parseFloat(priceText) || 0;
                }
            }
        }
        
        // Imagen
        const imgEl = card.querySelector('.product-image img');
        imagen = imgEl ? imgEl.src : '';
        
    } else if (detailCard) {
        // Estamos en detalle.php
        const nameEl = document.querySelector('.product-detail-info h1');
        const priceEl = document.querySelector('.price');
        const skuEl = document.querySelector('.sku');
        const imgEl = document.querySelector('.product-detail-image img');
        
        nombre = nameEl ? nameEl.textContent.trim() : 'Producto';
        sku = skuEl ? skuEl.textContent.replace('SKU:', '').trim() : '';
        imagen = imgEl ? imgEl.src : '';
        
        // Obtener precio
        if (priceEl) {
            const priceText = priceEl.textContent.replace(/[^0-9.]/g, '');
            precio = parseFloat(priceText) || 0;
        } else {
            // Buscar en admin-prices
            const priceValue = document.querySelector('.admin-prices .price-value:last-child');
            if (priceValue) {
                const priceText = priceValue.textContent.replace(/[^0-9.]/g, '');
                precio = parseFloat(priceText) || 0;
            }
        }
    }
    
    // Si no se pudo obtener el precio, intentar con AJAX
    if (precio === 0) {
        obtenerPrecioProducto(productoId, function(precioObtenido) {
            if (precioObtenido > 0) {
                agregarAlCarritoConDatos(productoId, nombre, precioObtenido, cantidad, sku, imagen);
            } else {
                mostrarNotificacion('Error: No se pudo obtener el precio del producto', 'error');
            }
        });
        return;
    }
    
    agregarAlCarritoConDatos(productoId, nombre, precio, cantidad, sku, imagen);
}

// ============================================
// 3. AGREGAR CON DATOS COMPLETOS
// ============================================

function agregarAlCarritoConDatos(productoId, nombre, precio, cantidad, sku, imagen) {
    // Verificar si el producto ya está en el carrito
    const existingItem = carrito.find(item => item.id === productoId);
    
    if (existingItem) {
        existingItem.cantidad += cantidad;
    } else {
        carrito.push({
            id: productoId,
            nombre: nombre,
            precio: precio,
            cantidad: cantidad,
            sku: sku || 'N/A',
            imagen: imagen || ''
        });
    }
    
    guardarCarrito();
    actualizarCarrito();
    mostrarNotificacion(`✅ ${nombre} agregado al carrito`, 'success');
}

// ============================================
// 4. OBTENER PRECIO POR AJAX (FALLBACK)
// ============================================

function obtenerPrecioProducto(productoId, callback) {
    fetch(`get_product_price.php?id=${productoId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                callback(data.precio);
            } else {
                callback(0);
            }
        })
        .catch(() => callback(0));
}

// ============================================
// 5. ACTUALIZAR INTERFAZ DEL CARRITO
// ============================================

function actualizarCarrito() {
    const cartBody = document.getElementById('cartBody');
    const cartCount = document.getElementById('cartCount');
    const cartTotal = document.getElementById('cartTotal');
    
    // Actualizar contador
    const totalItems = carrito.reduce((sum, item) => sum + item.cantidad, 0);
    if (cartCount) cartCount.textContent = totalItems;
    
    if (carrito.length === 0) {
        if (cartBody) cartBody.innerHTML = '<div class="cart-empty">🛒 El carrito está vacío</div>';
        if (cartTotal) cartTotal.textContent = '$0.00';
        return;
    }
    
    let html = '';
    let total = 0;
    
    carrito.forEach((item, index) => {
        const subtotal = item.precio * item.cantidad;
        total += subtotal;
        
        html += `
            <div class="cart-item" data-index="${index}">
                <div class="cart-item-info">
                    <div class="cart-item-name">${escapeHtml(item.nombre)}</div>
                    <div class="cart-item-sku">📋 ${escapeHtml(item.sku)}</div>
                    <div class="cart-item-price">
                        $${item.precio.toFixed(2)} x ${item.cantidad} 
                        <strong>= $${subtotal.toFixed(2)}</strong>
                    </div>
                </div>
                <div class="cart-item-actions">
                    <button onclick="cambiarCantidad(${index}, -1)" class="btn-qty">−</button>
                    <span class="cart-qty">${item.cantidad}</span>
                    <button onclick="cambiarCantidad(${index}, 1)" class="btn-qty">+</button>
                    <button onclick="eliminarDelCarrito(${index})" class="btn-remove">✕</button>
                </div>
            </div>
        `;
    });
    
    if (cartBody) cartBody.innerHTML = html;
    if (cartTotal) cartTotal.textContent = `$${total.toFixed(2)} MXN`;
}

// ============================================
// 6. FUNCIONES DEL CARRITO
// ============================================

function cambiarCantidad(index, cambio) {
    if (carrito[index]) {
        carrito[index].cantidad += cambio;
        if (carrito[index].cantidad <= 0) {
            carrito.splice(index, 1);
        }
        guardarCarrito();
        actualizarCarrito();
    }
}

function eliminarDelCarrito(index) {
    if (carrito[index]) {
        const nombre = carrito[index].nombre;
        carrito.splice(index, 1);
        guardarCarrito();
        actualizarCarrito();
        mostrarNotificacion(`❌ ${nombre} eliminado del carrito`, 'info');
    }
}

function vaciarCarrito() {
    if (carrito.length === 0) return;
    if (confirm('¿Seguro que quieres vaciar el carrito?')) {
        carrito = [];
        guardarCarrito();
        actualizarCarrito();
        mostrarNotificacion('🛒 Carrito vaciado', 'info');
    }
}

// ============================================
// 7. TOGGLE CARRITO
// ============================================

function toggleCarrito() {
    const sidebar = document.getElementById('cartSidebar');
    const overlay = document.getElementById('overlay');
    
    if (sidebar) sidebar.classList.toggle('active');
    if (overlay) overlay.classList.toggle('active');
}

function cerrarCarrito() {
    const sidebar = document.getElementById('cartSidebar');
    const overlay = document.getElementById('overlay');
    
    if (sidebar) sidebar.classList.remove('active');
    if (overlay) overlay.classList.remove('active');
}

// ============================================
// 8. PROCESAR PEDIDO
// ============================================

function procesarPedido() {
    if (carrito.length === 0) {
        mostrarNotificacion('🛒 El carrito está vacío', 'warning');
        return;
    }
    
    const modal = document.getElementById('orderModal');
    if (modal) modal.style.display = 'block';
}

function cerrarModal() {
    const modal = document.getElementById('orderModal');
    if (modal) modal.style.display = 'none';
}

// ============================================
// 9. NOTIFICACIONES
// ============================================

function mostrarNotificacion(mensaje, tipo = 'success') {
    // Eliminar notificaciones anteriores
    const notificaciones = document.querySelectorAll('.notification');
    notificaciones.forEach(n => n.remove());
    
    const notificacion = document.createElement('div');
    notificacion.className = `notification notification-${tipo}`;
    notificacion.textContent = mensaje;
    document.body.appendChild(notificacion);
    
    // Mostrar notificación
    setTimeout(() => {
        notificacion.classList.add('show');
    }, 100);
    
    // Ocultar después de 3 segundos
    setTimeout(() => {
        notificacion.classList.remove('show');
        setTimeout(() => notificacion.remove(), 300);
    }, 3000);
}

// ============================================
// 10. FORMULARIO DE PEDIDO
// ============================================

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('orderForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Validar campos
            const nombre = document.getElementById('cliente_nombre');
            const email = document.getElementById('cliente_email');
            const telefono = document.getElementById('cliente_telefono');
            const direccion = document.getElementById('direccion_envio');
            
            if (!nombre.value.trim() || !email.value.trim() || !telefono.value.trim() || !direccion.value.trim()) {
                mostrarNotificacion('⚠️ Completa todos los campos obligatorios', 'warning');
                return;
            }
            
            const datos = {
                cliente: {
                    nombre: nombre.value.trim(),
                    email: email.value.trim(),
                    telefono: telefono.value.trim()
                },
                direccion_envio: direccion.value.trim(),
                notas: document.getElementById('notas_pedido')?.value || '',
                productos: carrito
            };
            
            // Enviar pedido
            fetch('pedidos/procesar_pedido.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(datos)
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    mostrarNotificacion(`✅ Pedido #${result.pedido_id} realizado con éxito`, 'success');
                    carrito = [];
                    guardarCarrito();
                    actualizarCarrito();
                    cerrarModal();
                    cerrarCarrito();
                    // Limpiar formulario
                    form.reset();
                } else {
                    mostrarNotificacion('❌ Error: ' + (result.mensaje || 'Error al procesar'), 'error');
                }
            })
            .catch(() => {
                mostrarNotificacion('❌ Error de conexión al servidor', 'error');
            });
        });
    }
});

// ============================================
// 11. UTILIDADES
// ============================================

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// ============================================
// 12. INICIALIZAR
// ============================================

// Cargar carrito al iniciar
document.addEventListener('DOMContentLoaded', function() {
    cargarCarrito();
    
    // Cerrar carrito al hacer clic en overlay
    const overlay = document.getElementById('overlay');
    if (overlay) {
        overlay.addEventListener('click', cerrarCarrito);
    }
    
    // Cerrar modal al hacer clic fuera
    const modal = document.getElementById('orderModal');
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === this) cerrarModal();
        });
    }
});

/* ===== NOTIFICACIONES ===== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    z-index: 9999;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    font-size: 14px;
}
.notification.show {
    transform: translateX(0);
}
.notification-success {
    background: linear-gradient(135deg, #28a745, #20c997);
}
.notification-error {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
}
.notification-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #333;
}
.notification-info {
    background: linear-gradient(135deg, #17a2b8, #0dcaf0);
}

/* ===== CARRITO ITEMS ===== */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.cart-item-info {
    flex: 1;
}
.cart-item-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.cart-item-sku {
    font-size: 11px;
    color: #999;
    margin: 2px 0;
}
.cart-item-price {
    font-size: 13px;
    color: #555;
}
.cart-item-price strong {
    color: #28a745;
}
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
}
.btn-qty {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-qty:hover {
    background: #e9ecef;
    border-color: #667eea;
}
.cart-qty {
    min-width: 25px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}
.btn-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: #dc3545;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-remove:hover {
    background: #fee;
    color: #c82333;
}

/* ===== CARRITO VACÍO ===== */
.cart-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 16px;
}
.cart-empty::before {
    content: '🛒';
    display: block;
    font-size: 48px;
    margin-bottom: 10px;
}