/* ===========================================================
   Product grid 4-column alignment fix — 2026-06-29
   (separate file; delete it + its <link> to fully revert)

   Your custom CSS sets the catalog tiles to 4 columns
   (width: calc((100% - 4%) / 4.3)) at >=768px, but Luma 2.4.8
   still zeroes the left margin every 3rd tile (3-column logic),
   so the rows don't line up ("stacking"). This remaps the
   first-of-row margin reset to a 4-column grid.
   =========================================================== */
.page-products .products-grid .product-item {
    box-sizing: border-box;
}
@media (min-width: 768px), print {
    /* undo Luma's 3-column reset: these are NOT first-of-row in a 4-col grid */
    .page-products .products-grid .product-item:nth-child(3n + 1) {
        margin-left: 2%;
    }
    /* the real first tile of each 4-column row -> flush left */
    .page-products .products-grid .product-item:nth-child(4n + 1) {
        margin-left: 0;
    }
}