/**
 * 星（SVG）の共通意匠。
 *
 * PDP だけでなく商品カードでも使うため、mymoods-pdp-reviews.css から切り出して
 * 全ページで読み込む。マークアップは inc/reviews.php の
 * mymoods_review_stars_html() / mymoods_review_card_rating_html() が出す。
 */

.mm-stars {
	display: inline-block;
	position: relative;
	line-height: 0;
	white-space: nowrap;
	vertical-align: middle;
}

.mm-stars__base,
.mm-stars__fill {
	display: block;
	line-height: 0;
}

.mm-stars__base {
	color: #d8d8d8;
}

/* 評価ぶんだけ金色を上に重ねる。幅の % で端数（4.3 等）も表現できる。 */
.mm-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: #f5b301;
}

.mm-stars__star {
	fill: currentColor;
	display: inline-block;
	vertical-align: top;
}

/* カード用の小さいサイズ（SVG の width/height 属性を CSS で上書きする）。 */
.mm-stars--sm .mm-stars__star {
	width: 13px;
	height: 13px;
}

/* =========================================================================
 * 商品カードの「星 + (件数)」
 * ====================================================================== */

.mm-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	min-height: 16px;
}

.mm-card-rating__count {
	font-size: 12px;
	line-height: 1;
	color: #777;
}