/* Module: Product Grid — configurable grid of Material products. Its own
   scoped grid rather than the shared sitewide .post-grid (design-system.css),
   since column count is a genuine per-instance Elementor control here (3 or
   4) — same reasoning as the Sustainable module's own --cols-3/--cols-4
   (modules/sustainable/sustainable.css). Cards themselves still reuse
   design-system.css's .post-card unchanged (template-parts/product-card.php). */
/* Standard section spacing — matches the Materials module (modules/materials/
   materials.css), the closest sibling card-grid module; was missing entirely
   here, so the section sat flush against whatever came before it. */
.product-grid-module {
	padding-top: var(--gap-l);
	padding-bottom: var(--gap-l);
}
.product-grid-module__heading { text-align: center; margin-bottom: 40px; }

.product-grid-module__grid {
	display: grid;
	gap: 32px;
}
.product-grid-module__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid-module__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1280px) {
	.product-grid-module__grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.product-grid-module__grid--cols-3,
	.product-grid-module__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
	.product-grid-module__grid--cols-3,
	.product-grid-module__grid--cols-4 { grid-template-columns: 1fr; }
}