/**
 * Single-product features (rendered by [product_features]).
 *
 * Mirrors the catalogue card's .nm-pc__features visual treatment but
 * uses its own classnames so editors can theme the per-product surface
 * independently if needed. Style A — compact, dense, dot/tick glyphs.
 *
 * Typography (since 2.16.1): Roboto 16px for labels and values.
 * Labels keep their division-accent colour and 600 weight; values are
 * pure black for maximum legibility on white product templates.
 * Roboto is imported here so the component owns the dependency rather
 * than relying on the theme to load it.
 *
 * Division theming follows the same pattern as .numat-product-tags:
 *   - matting    → forest green accent
 *   - farm-sheds → tussock accent
 *
 * @package NumatAGRI\ProductCatalogue
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap');

/* Reset list defaults so the <dl> behaves as a clean container. */
.numat-product-features {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Each row: label on the left, value on the right. Grid keeps labels
   aligned even when values wrap. */
.numat-product-feature {
	display: grid;
	grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid #e7e7e7;
	line-height: 1.45;
}

.numat-product-feature:last-child {
	border-bottom: 0;
}

.numat-product-feature__label {
	margin: 0;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
}

.numat-product-feature__value {
	margin: 0;
	font-family: 'Roboto', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
}

/* Rating-glyph row (Grip uses ●; Easy to clean uses ✓). Match the
   catalogue card's treatment: filled-only, no half-states. */
.numat-product-feature__value [aria-hidden="true"] {
	letter-spacing: 2px;
	font-size: 16px;
	line-height: 1;
}

/* Division accents — applied to label colour, subtle. */
.numat-product-features--matting .numat-product-feature__label {
	color: #013D1C;
}

.numat-product-features--farm-sheds .numat-product-feature__label {
	color: #5C4A1F;
}

/* Screen-reader-only utility. Same shape as WP's .screen-reader-text
   so it inherits any global SR helpers. */
.numat-product-features__sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Narrow viewport: stack label above value, no fixed left column. */
@media (max-width: 480px) {
	.numat-product-feature {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}