.mhg-grown-to-order-policy {
	background: #f4f8f2;
	border-left: 4px solid #47785b;
	border-radius: 4px;
	color: #24352b;
	font-size: 0.95em;
	line-height: 1.55;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
}

.mhg-product-grid-availability-badge {
	align-items: center;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.35;
	margin: 0.4rem 0;
	padding: 0.45rem 0.7rem;
}

.mhg-product-grid-availability-badge.mhg-availability-available {
	background: #356449;
}

.mhg-product-grid-availability-badge.mhg-availability-grown-to-order {
	background: #9a681b;
}

/*
 * UiCore's Advanced Product Grid renders custom product markup rather than
 * WooCommerce's normal loop hooks. The badge is injected next to the purchase
 * link, which receives the correct product during AJAX filters/load-more.
 */

.elementor-widget-uicore-advanced-product-grid article.product .mhg-product-grid-availability-badge {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	left: auto;
	letter-spacing: 0.01em;
	margin: 0;
	max-width: calc(100% - 20px);
	pointer-events: none;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 4;
}

/* Keep ready inventory first when Elementor filters or redraws the grid. */
.elementor-widget-uicore-advanced-product-grid .ui-e-adv-grid > .ui-e-item:has(.mhg-availability-available),
.elementor-widget-uicore-advanced-product-grid .ui-e-grid > .ui-e-item:has(.mhg-availability-available) {
	order: -1;
}

.mhg-grown-to-order-notice {
	color: #47785b;
	font-weight: 600;
}