/* ============================================================
   RATING BADGE (js/rating-badge.js): five stars filled to the average, the
   average as a light numeral, the count as a tracked label. Hairline style,
   no pill, no fill. Hidden until a rating exists. Used on every page where
   Text Maker shows: the hero and buy card of textmaker.html, the product row
   on index.html, the product cards on products.html and search.html.
   ============================================================ */
.rbadge {
  --rb-s: 13px;
  --rb-g: 3px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.rbadge[hidden] { display: none; }
.rb-stars { position: relative; display: inline-block; line-height: 0; }
.rb-stars svg { width: var(--rb-s); height: var(--rb-s); margin-right: var(--rb-g); vertical-align: top; overflow: visible; }
.rb-stars svg:last-child { margin-right: 0; }
.rb-base svg { fill: none; stroke: rgba(205, 216, 255, 0.5); stroke-width: 1.3; stroke-linejoin: round; }
/* the fill covers whole stars plus a fraction of the next one, exactly */
.rb-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  width: calc(var(--rb-whole, 0) * (var(--rb-s) + var(--rb-g)) + var(--rb-frac, 0) * var(--rb-s));
}
.rb-fill svg { fill: url(#rb-grad); stroke: url(#rb-grad); stroke-width: 1.3; stroke-linejoin: round; }
.rb-avg {
  font: 600 15px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 55%, #9fb2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.04em;
}
.rb-count {
  font: 600 11px/1.4 "Inter", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fb6ff;
  transition: color 0.15s ease;
}
a.rbadge:hover .rb-count { color: #ffffff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.rbadge:focus-visible { outline: 2px solid #cdd8ff; outline-offset: 4px; border-radius: 2px; }

/* where it sits */
/* the links get a thumb-sized hit area; the visible line stays where it was */
.tm-page .tm-hero .rbadge { margin: 6px 0 0; padding: 12px 0; }
.tm-page .tm-hero .rbadge + .tm-reassure { margin-top: 0; }
.tm-page .tm-price .rbadge { margin: -4px 0 4px; padding: 10px 0; }
.hl-site .prow .pmain .rbadge { margin: 8px 0 2px; }
.hl-site .product-card .sub .rbadge { display: flex; margin: 10px 0 0; }
.hl-site .product-card .sub .rbadge[hidden] { display: none; }
@media (max-width: 820px) {
  .rbadge { --rb-s: 12px; gap: 8px; }
  .tm-page .tm-hero .rbadge { margin-top: 2px; }
}
@media (forced-colors: active) {
  .rb-base svg { stroke: CanvasText; }
  .rb-fill svg { fill: CanvasText; stroke: CanvasText; }
  .rb-avg { background: none; color: CanvasText; }
}