/* ------------------------------------------------------------------ *
 * Availability badge — below the product title on the shop grid, the
 * single product page and the home "best sellers" cards.
 *
 * Colour is driven per-term by the inline --gfd-avail custom property,
 * set from each pa_availability term's availability_color meta (the
 * WooCommerce attribute "badge colour"). The SVG icon inherits it too.
 *
 * Loaded site-wide with a filemtime cache-buster so it renders
 * identically everywhere the badge appears. !important on the icon size
 * guards against the theme's global `svg { width:100% }` rules.
 * ------------------------------------------------------------------ */
.gfd-avail-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 4px;
}
.gfd-avail-badge {
	--gfd-avail: #d6447a;
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	width: auto !important;
	max-width: max-content;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .1px;
	padding: 3px 10px 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
	color: color-mix(in srgb, var(--gfd-avail) 82%, #1a1a1a);
	background: color-mix(in srgb, var(--gfd-avail) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--gfd-avail) 34%, transparent);
}
.gfd-avail-badge__ico {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--gfd-avail);
}
.gfd-avail-badge__ico svg {
	width: 13px !important;
	height: 13px !important;
	display: block;
}
/* Fallback for browsers without color-mix(): solid tint via the raw colour. */
@supports not (background: color-mix(in srgb, red, white)) {
	.gfd-avail-badge {
		color: #fff;
		background: var(--gfd-avail);
		border-color: var(--gfd-avail);
	}
	.gfd-avail-badge__ico { color: #fff; }
}
/* Larger, more prominent on the single product page. */
.gfd-avail-badges--single { margin: 8px 0 10px; }
.gfd-avail-badges--single .gfd-avail-badge {
	font-size: 13px;
	padding: 5px 13px 5px 10px;
}
.gfd-avail-badges--single .gfd-avail-badge__ico svg {
	width: 15px !important;
	height: 15px !important;
}