.product--no-media .rating-wrapper {
  text-align: center;
}

.rating-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.product .rating-wrapper {
  margin: 0.2rem 0 1rem;
}

.rating {
  display: inline-block;
  margin: 0;
}

.product .rating-star {
  --letter-spacing: 0.8;
  --font-size: 1.7;
}

.card-wrapper .rating-star {
  --letter-spacing: 0.7;
  --font-size: 1.4;
}

.rating-star {
  --color-rating-star: #f5a623;
  --color-rating-empty: rgba(var(--color-foreground), 0.18);
  --percent: calc(
    (
        var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--font-size) /
          (var(--rating-max) * (var(--letter-spacing) + var(--font-size)))
      ) * 100%
  );
  position: relative;
  letter-spacing: calc(var(--letter-spacing) * 1rem);
  font-size: calc(var(--font-size) * 1rem);
  line-height: 1;
  display: inline-block;
  font-family: Times, 'Times New Roman', serif;
  margin: 0;
  white-space: nowrap;
}

.rating-star::before {
  content: '★★★★★';
  color: var(--color-rating-empty);
}

.rating-star::after {
  content: '★★★★★';
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: var(--percent);
  color: var(--color-rating-star);
  white-space: nowrap;
  pointer-events: none;
}

.rating-text {
  display: none;
}

.rating-count {
  display: inline-block;
  margin: 0;
  color: rgba(var(--color-foreground), 0.75);
  font-size: 1.3rem;
}

@media (forced-colors: active) {
  .rating-star::after {
    display: none;
  }

  .rating-text {
    display: block;
  }
}