/* ==========================================================================
   Green Plus Elementor — widget-driven layout extras
   Loaded AFTER styles.css. Adds responsive column overrides for the
   product grid (the source ships a fixed 4-col .product-grid; the widget lets
   editors pick 2/3/4 while keeping the source's responsive step-downs).
   ========================================================================== */

.product-grid.gpe-cols-2 { grid-template-columns: repeat(2, 1fr); }
.product-grid.gpe-cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.gpe-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.product-grid.gpe-cols-4 { grid-template-columns: repeat(3, 1fr); }
	.product-grid.gpe-cols-3 { grid-template-columns: repeat(2, 1fr); }
	.product-grid.gpe-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.product-grid.gpe-cols-4,
	.product-grid.gpe-cols-3,
	.product-grid.gpe-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.product-grid.gpe-cols-4,
	.product-grid.gpe-cols-3,
	.product-grid.gpe-cols-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* The Elementor editor wraps widgets in a centred column by default; the
   section widgets are full-bleed by design, so let them stretch. */
.gpe-bleed { width: 100%; }