/**
 * Bluerizon products loop — grid only.
 *
 * Card styling deliberately reuses the existing .bz-product rules from
 * bluerizon.css / theme.css, so a loop item and a hand-placed Product element
 * look identical. Nothing here restyles the card itself.
 */

.bz-products {
	display: grid;
	grid-template-columns: repeat(var(--bz-products-cols, 3), minmax(0, 1fr));
	gap: var(--bz-grid-gap, 24px);
	width: 100%;
}

.bz-products-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bz-products-item > .bz-product {
	flex: 1 1 auto;
}

.bz-product-cart {
	margin-top: 12px;
	align-self: stretch;
	text-align: center;
}

@media (max-width: 1023px) {
	.bz-products {
		grid-template-columns: repeat(var(--bz-products-cols-t, 2), minmax(0, 1fr));
	}
}

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

/* Editor-only placeholder. Never rendered for visitors — the element returns
   an empty string outside preview, exactly like the Product element. */
.bz-products--empty {
	display: block;
	padding: 24px;
	border: 1px dashed var(--bz-border, #ddd);
	color: var(--bz-text-secondary, #666);
	font-size: 13px;
	text-align: center;
}

.bz-products--empty strong {
	display: block;
	margin-bottom: 4px;
	color: var(--bz-text, #2a2a2a);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}