/* ★の表示（商品カード・商品詳細の上部サマリー）。
 *
 * 星そのものは Dawn の .rating-star（component-rating.css）を使う。
 * ここは ASTRA 用の色・大きさ・並びだけを持つ。
 *
 * ★component-rating.css より**後に**読み込むこと（inc/enqueue.php の並び順）。
 *   色（--color-rating-star）を上書きする側なので、先に読むと効かない。
 */

.astra-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 星の下端に文字のベースラインを合わせない（★は Times のグリフで下に沈む）。 */
  line-height: 1;
  white-space: nowrap;
}

/*
 * ★Dawn は `.product .rating-star` / `.card-wrapper .rating-star` で
 *   --font-size / --letter-spacing を**星の要素そのもの**に当てている。
 *   カスタムプロパティは「要素への直接指定」が「親からの継承」に勝つので、
 *   親（.astra-rating）に書いても商品詳細・カードの中では上書きできない。
 *   同じ要素に、より強い詳細度で当てる必要があるためクラスを2回書いている
 *   （(0,2,0) → (0,3,0)）。奇異に見えるが意図的。
 */
.astra-rating .rating-star.rating-star {
  --color-rating-star: #4EC3E1;
  --font-size: 1.4;
  --letter-spacing: 0.7;
}

/* 平均値の数字。等幅にして桁がぶれないようにする。 */
.astra-rating__value {
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
  font-weight: var(--astra-font-weight-regular);
  letter-spacing: 0.04em;
  color: rgb(var(--color-foreground));
}

.astra-rating__count {
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(var(--color-foreground), 0.55);
}

/* --- 商品カード ---------------------------------------------------------- */

.astra-rating--card {
  gap: 6px;
  margin-top: 6px;
}

.astra-rating--card .rating-star.rating-star {
  --font-size: 1.2;
  --letter-spacing: 0.6;
}

/* カードの中は本文と同じ 14px。以前は 12px / 11px まで落としていたが、
 * 商品名や価格を 14px 以上にしたので、ここだけ小さいと行がちぐはぐに見える。 */
.astra-rating--card .astra-rating__value {
  font-size: 14px;
}

.astra-rating--card .astra-rating__count {
  font-size: 14px;
}

/* --- 商品詳細の上部サマリー ---------------------------------------------- */

/* スペック行（Nicotine 3% | 2ml）と価格のあいだに置く。
 * 押すと下のレビューセクションへ飛ぶので、リンクだと分かる下線を hover で出す。 */
.astra-review-summary {
  display: inline-block;
  margin-top: 1.2rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.astra-review-summary:hover {
  border-bottom-color: rgba(var(--color-foreground), 0.4);
}

.astra-review-summary .astra-rating .rating-star.rating-star {
  --font-size: 1.6;
  --letter-spacing: 0.8;
}

.astra-review-summary .astra-rating__value {
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  .astra-review-summary .astra-rating .rating-star.rating-star {
    --font-size: 1.4;
    --letter-spacing: 0.7;
  }
}