/*
 * Shared star-rating renderer (z8udzkpymt): bonza_star_rating_html() in
 * includes/star-rating.php. Two stacked copies of the five-star glyph: the base
 * is the empty colour, the fill copy is clipped inside its svg (clipPath in glyph units, from the product's own rating).
 *
 * Size and filled colour come from each caller's own rules, which target the
 * svg inside the wrapper (.bpp-feefo-row__stars, .bppm-subscribe__rating-stars,
 * .hb-hero__stars, .hh-hero__trust-stars), so nothing here changes a row's
 * geometry.
 */
.bonza-stars {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
}

.bonza-stars__base,
.bonza-stars__fill {
	display: inline-flex;
	align-items: center;
}

.bonza-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

/* Empty part of a star row. The PDP rules recolour every svg path in the row
   (a:2:2 specificity), so this needs !important to stay lighter than the fill. */
.bonza-stars .bonza-stars__base svg path {
	fill: #cbc2b6 !important; /* editor-friendly-ok: empty-star tone, no registered palette slug */
}