/* ===== PRODUCT GRID FIX - Mobile 2 columns, Desktop 6 columns ===== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile default: 2 columns */
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

/* Tablet: 3 columns */
@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

/* Desktop: 4 columns */
@media (min-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-lg);
    }
}

/* Large Desktop: 6 columns */
@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-xl);
    }
}

/* Extra small mobile: single column */
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}