/**
 * WC Product Grid for Elementor — fallback/defense-in-depth styles.
 *
 * The actual grid layout (column counts per breakpoint) is written as an
 * inline <style> block scoped to each widget instance's own ID, directly in
 * class-product-grid-widget.php::render(). That's the source of truth — it
 * can't be lost to CSS-generation caching and doesn't depend on this file
 * being enqueued at all.
 *
 * This stylesheet just adds a generic fallback (assumes 4 columns) and,
 * importantly, constrains the product thumbnail <img> itself. Some themes
 * only load WooCommerce's own base styles (which normally cap image size)
 * on pages WooCommerce recognizes as shop-related — an Elementor page isn't
 * always one of those — so without this rule a raw, unstyled product image
 * can render at its native pixel size.
 */

.wcpge-product-grid ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcpge-product-grid ul.products li.product {
	width: 100%;
	margin: 0;
	float: none;
}

.wcpge-product-grid ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: cover;
}

/*
 * Some themes (e.g. Marino) fully replace WooCommerce's default loop
 * templates with their own Bootstrap-style markup — `.row > .vs-product`
 * instead of `ul.products > li.product` — so `ul.products` never exists on
 * those sites at all. This fallback covers that pattern too. As with the
 * rules above, the real source of truth is the inline <style> block each
 * widget instance prints (scoped to its own ID, with the correct per-
 * instance column count); this generic 4-column version is just a backstop.
 */
.wcpge-product-grid .row.gy-30 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.wcpge-product-grid .row.gy-30 > .vs-product {
	width: 100%;
	max-width: 100%;
	flex: none;
	margin: 0;
}

.wcpge-product-grid .row.gy-30 > .vs-product img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.wcpge-editor-placeholder {
	padding: 24px;
	text-align: center;
	border: 1px dashed #ccc;
	color: #666;
	font-size: 13px;
}