/* レビュー評価（星＋平均値＋件数）の共通表示。inc/reviews.php の nicobay_rating_html() が出す。

   トップの商品カード（ランキング / セット / 新入荷 / 大容量おすすめ）と
   ブランドページの機種見出しで使うため、ページ別ではなく全ページで読み込む。

   星は nicobay-collection.css の .nicobay-product__stars と同じ方式:
   5 つ分（1 個 20 + 間隔 2 = pitch 22、末尾の間隔なしで 108）を 1 枚の mask にし、
   塗りを linear-gradient で --rating の割合に切り替える。色も PDP と同じ #ffb400 / #e0e0e0。
   カードは 1 画面に何十枚も並ぶので、星 1 つずつ SVG を吐く PDP 方式（nicobay_stars_html）
   ではなく要素 1 つで済むこちらを使う。 */

.nb-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
}

.nb-rating__stars {
	--pct: calc(var(--rating, 0) / 5 * 100%);
	--nb-star-h: 1.3rem;
	--nb-stars-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cg%3E%3Cpath d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(22,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(44,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(66,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3Cpath transform='translate(88,0)' d='M10 15l-5.878 3.09 1.123-6.545L.49 6.91l6.564-.955L10 0l2.945 5.955 6.564.955-4.755 4.635 1.123 6.545z'/%3E%3C/g%3E%3C/svg%3E");
	display: inline-block;
	flex: none;
	width: calc(var(--nb-star-h) * 5.4);
	height: var(--nb-star-h);
	background: linear-gradient(90deg, #ffb400 var(--pct), #e0e0e0 var(--pct));
	-webkit-mask-image: var(--nb-stars-mask);
	mask-image: var(--nb-stars-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.nb-rating__value {
	font-size: 1.2rem;
	font-weight: 600;
	color: rgba(var(--color-foreground), .85);
}

.nb-rating__count {
	font-size: 1.1rem;
	color: rgba(var(--color-foreground), .6);
}

/* 商品カード内。タイトルと価格の間に置くので、上下の余白は
   .nicobay-product__rating（既存カードの星）と同じ 4px / 2px に合わせる。 */
.nb-rating--card {
	margin: 4px 0 2px;
}

/* ランキングカード。カード幅が狭くブランド行〜価格が詰まっているため、
   カード用より一段小さくして行の高さを増やさない。 */
.nb-rating--ranking {
	margin: 2px 0;
}

.nb-rating--ranking .nb-rating__stars {
	--nb-star-h: 1.2rem;
}

/* ブランドページの機種見出し（vendor-brand-featured__title-row）の横。
   見出しの隣に置くので、見出しのベースラインから浮かないよう中央で揃える。 */
.nb-rating--series {
	margin-left: 12px;
}

.nb-rating--series .nb-rating__stars {
	--nb-star-h: 1.6rem;
}

.nb-rating--series .nb-rating__value {
	font-size: 1.4rem;
}

.nb-rating--series .nb-rating__count {
	font-size: 1.3rem;
}

@media screen and (max-width: 749px) {
	.nb-rating--series {
		margin-left: 0;
		margin-top: 4px;
	}
}