/* Composant étoiles (note produit/avis) — voir SPC_Reviews::stars_markup()
   dans includes/class-spc-reviews.php. Réutilisé à plusieurs endroits qui
   ne chargent pas forcément les mêmes feuilles de style par ailleurs (fiche
   produit individuelle, avis, carte boutique...) : ce fichier est donc
   volontairement autonome, sans dépendance à une autre feuille de style.

   Deux rangées de 5 icônes superposées : une grise en fond (le "contour"),
   une dorée par-dessus dont la largeur est limitée au pourcentage de la
   note (ex. 84% pour 4,2/5) et le débordement masqué — donne un
   remplissage proportionnel (étoiles à moitié pleines comprises) sans
   calcul par étoile. Doré plutôt que rouge de marque : c'est la couleur
   qu'un client s'attend à voir pour une note, peu importe le site. */
.spc-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 0;
}

.spc-stars__star {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
}

.spc-stars__star-track {
  display: block;
  color: #dce5ef;
}

.spc-stars__star-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623;
}

.spc-stars__icon {
  display: block;
  flex-shrink: 0;
}

.spc-stars--md .spc-stars__icon {
  width: 16px;
  height: 16px;
}

.spc-stars--sm .spc-stars__icon {
  width: 14px;
  height: 14px;
}