/* ==========================================
        RESPONSIVE - OSCARITO (ACTUALIZADO)
========================================== */

/* Tablets */
@media (max-width: 1024px) {
    .top-header { padding: 15px 25px; gap: 15px; }
    .logo h1 { font-size: 28px; }
    .search-box input { width: 200px; }
    
    .store-container {
        flex-direction: column;
    }
    .filters-sidebar {
        width: 100%;
        display: flex;
        gap: 20px;
        align-items: center;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .menu-toggle { display: block; } /* Aparece la hamburguesa */
    .desktop-only { display: none; } /* Ocultamos la palabra "Cuenta" y "Carrito" */
    
    .top-header {
        flex-wrap: wrap;
        padding: 12px 15px;
        gap: 12px;
    }
    .logo { order: 1; margin: 0 auto; }
    .menu-toggle { order: 0; }
    .header-icons { order: 2; gap: 15px; }
    
    .search-box {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin-top: 5px;
    }

    /* MENÚ DESPLEGABLE MÓVIL */
    .nav-list {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        width: 100%;
        background: #111;
    }
    .nav-menu.active .nav-list {
        display: flex; /* Se muestra al hacer clic en hamburguesa */
    }
    .nav-list li {
        width: 100%;
        border-bottom: 1px solid #333;
    }
    .nav-list li a {
        padding: 15px;
        text-align: center;
    }

    /* Ajustes generales */
    .banner-content h2 { font-size: 32px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .product-image { height: 200px; }
    .product-title { font-size: 16px; }
    .current-price { font-size: 18px; }
    
    /* Carrito lateral en móvil */
    .cart-sidebar {
        width: 85%;
        max-width: none;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; }
    .filters-sidebar { flex-direction: column; align-items: flex-start;}
    .banner-content h2 { font-size: 26px; }
    .footer-container { gap: 20px; padding: 20px; }
}