/* Keep Woo default .products UL; just add responsive columns helpers if theme doesn't handle it */
.products.nami-products-grid {
    display: grid;
    gap: 20px;
}

/* Desktop */
.products.nami-products-grid.columns-d-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.products.nami-products-grid.columns-d-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.products.nami-products-grid.columns-d-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.products.nami-products-grid.columns-d-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.products.nami-products-grid.columns-d-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.products.nami-products-grid.columns-d-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .products.nami-products-grid.columns-t-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .products.nami-products-grid.columns-t-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products.nami-products-grid.columns-t-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .products.nami-products-grid.columns-t-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .products.nami-products-grid.columns-t-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .products.nami-products-grid.columns-t-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .products.nami-products-grid.columns-m-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .products.nami-products-grid.columns-m-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products.nami-products-grid.columns-m-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Ensure default WooCommerce li.product looks fine in grid context */
.products.nami-products-grid li.product {
    margin: 0; /* grid handles spacing */
    list-style: none;
}