/*
 * Model reviews (includes/theme/inc/model-reviews.php): the tile star row and the
 * product page's review list of the whole model.
 *
 * .card-rating(.is-empty) > .card-rating__stars > svg×5 + .card-rating__fill > svg×5
 *   + b.card-rating__avg + .card-rating__count       under the tile name
 * .model-reviews = the plugin's .amtc-product-reviews-grid (folded items: plugin's .amtc-hidden)
 */

/* Tile star row: always one row high, so the names and lists of a row stay aligned. */
.card-rating {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-4);
	width: 100%;
	height: 18px;
	font-family: var(--nd-font);
	font-size: var(--nd-fs-13);
	line-height: 1;
	color: var(--nd-c-muted);
	text-align: left;
}

.card-rating__stars {
	display: flex;
	position: relative;
	flex: none;
	color: var(--nd-c-star-empty);
}

.card-rating__stars svg {
	flex: none;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Filled layer over the grey row, cut to the average (width set inline). */
.card-rating__fill {
	display: flex;
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--nd-c-star);
}

.card-rating__avg {
	margin-left: var(--nd-sp-2);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
}

/* Review list: the plugin's display:flex on the controls beats [hidden] (set after the last batch). */
.model-reviews + .amtc-grid-controls[hidden] {
	display: none;
}

@media (max-width: 720px) {
	.card-rating {
		font-size: var(--nd-fs-12);
	}

	.card-rating__stars svg {
		width: 13px;
		height: 13px;
	}
}