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

.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: rgb(var(--color-foreground));
  --percent: calc(
    (
        var(--rating) / var(--rating-max) + var(--rating-decimal) * var(--font-size) /
          (var(--rating-max) * (var(--letter-spacing) + var(--font-size)))
      ) *
      100%
  );
  display: inline-block;
  margin: 0;
  font-family: Times;
  font-size: calc(var(--font-size) * 1rem);
  letter-spacing: calc(var(--letter-spacing) * 1rem);
  line-height: 1;
}

.rating-star::before {
  display: inline-block;
  width: 5rem;
  height: 1rem;
  background: linear-gradient(
    90deg,
    var(--color-rating-star) var(--percent),
    rgba(var(--color-foreground), 0.15) var(--percent)
  );
  content: '';
  mask: url("data:image/svg+xml,%3csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cpolygon id='star' points='10,1 4,19 18,7 2,7 16,19' fill='black'/%3e%3c/defs%3e%3cuse href='%23star' x='0'/%3e%3cuse href='%23star' x='20'/%3e%3cuse href='%23star' x='40'/%3e%3cuse href='%23star' x='60'/%3e%3cuse href='%23star' x='80'/%3e%3c/svg%3e");
  mask-size: contain;
}

.rating-text {
  display: none;
}

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

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

  .rating-text {
    display: block;
  }
}