@import url('components.css?v=1.0');

/**
 * CRESA — custom.css
 * Grid .productos-grid-tienda (home, tienda, producto): no mover a pages/tienda.css.
 * Estilos solo-tienda en overrides/custom → public/assets/css/pages/tienda.css
 * Componentes y tokens: components.css (import arriba).
 */

.productos-grid-tienda {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 1.5rem;
    overflow: visible;
}

@media (max-width: 1023px) and (min-width: 768px) {
    .productos-grid-tienda {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 767px) {
    .productos-grid-tienda {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .productos-grid-tienda {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}