/* ==========================================================================
   Star Ratings — CSS-only from Judge.me metafields
   ========================================================================== */

.product-card__stars {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

/* Filled stars using CSS background-clip trick */
.stars-visual {
  display: inline-block;
  position: relative;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Empty stars background */
.stars-visual::before {
  content: '★★★★★';
  color: rgba(255, 255, 255, 0.2);
}

/* Filled stars overlay clipped to rating width */
.stars-visual::after {
  content: '★★★★★';
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-primary); /* neon yellow */
  width: calc(var(--rating, 0) / 5 * 100%);
  overflow: hidden;
  white-space: nowrap;
}

.stars-count {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1;
}

/* Larger variant for product page summary */
.stars--large .stars-visual {
  font-size: 2rem;
  letter-spacing: 0.08em;
}

.stars--large .stars-count {
  font-size: 1.4rem;
}