/* ==========================================================
   DATA NEXT — GRID DE PRODUCTOS
   Solo controla la distribución de tarjetas.
   ========================================================== */

.productos-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(auto-fill, minmax(235px, 1fr)) !important;

    gap: 1.2rem !important;

    align-items: start !important;

    box-sizing: border-box !important;

    margin-bottom: 2rem !important;
}

@media (max-width: 900px) {
    .productos-grid {
        grid-template-columns:
            repeat(auto-fill, minmax(210px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .productos-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 380px) {
    .productos-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   MENSAJE SIN PRODUCTOS
   Texto adaptado al tema claro/oscuro.
   ========================================================== */

.sin-productos {
    text-align: center;
    padding: 2.5rem;
    background: var(--card);
    border-radius: 1.5rem;
    border: 2px dashed var(--border);
}

.sin-productos .emoji {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.sin-productos h3 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    color: var(--text);
}

.sin-productos p {
    margin: 0;
    opacity: 1;
    font-size: 0.9rem;
    color: #0b1a2e !important;
}

body.dark .sin-productos p {
    color: #ffffff !important;
}