/*
 * bs-star-rating.css — BlackSpace sitewide star rendering
 *
 * Enqueued via 055-bs-star-rating-styles.php on every front-end page.
 *
 * Replaces WooCommerce's icon-font-based star rendering with inline SVG
 * via background-image. WC's default `star` font isn't always loaded
 * on this site (asset trimmers strip it on some templates), causing star
 * glyphs to render as boxes. This implementation depends on no fonts.
 *
 * Markup pattern (unchanged from WooCommerce):
 *   <div class="star-rating" role="img" aria-label="...">
 *     <span style="width: 80%">Rated 4.0 out of 5</span>
 *   </div>
 *
 * The outer div shows 5 outline stars in graphite — the "empty" track.
 * The inner span overlays 5 filled bronze stars at the percentage WC sets
 * via inline style. Standard WC fill mechanism, our paint job.
 *
 * Every property uses !important — needed to override WoodMart and
 * WooCommerce default star CSS.
 */

.star-rating {
  position: relative !important;
  display: inline-block !important;
  width: 5.4em !important;
  height: 1em !important;
  font-size: 1em !important;
  line-height: 1 !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  /* 5 outline stars in graphite — the "empty" track */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23474747' stroke-width='1.4' stroke-linejoin='round'><path d='M8 1.5l1.95 4.21 4.55.42-3.45 3.07 1 4.5L8 11.27l-4.05 2.43 1-4.5L1.5 6.13l4.55-.42L8 1.5z'/></svg>") !important;
  background-size: 1.08em 1em !important;
  background-repeat: repeat-x !important;
  color: transparent !important;
  text-shadow: none !important;
  font-family: inherit !important;
}

.star-rating::before,
.star-rating::after {
  display: none !important;
  content: none !important;
}

.star-rating > span {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-indent: 999rem !important;
  /* 5 filled stars in bronze — overlaid at WC's inline percentage width */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b0743e'><path d='M8 1.5l1.95 4.21 4.55.42-3.45 3.07 1 4.5L8 11.27l-4.05 2.43 1-4.5L1.5 6.13l4.55-.42L8 1.5z'/></svg>") !important;
  background-size: 1.08em 1em !important;
  background-repeat: repeat-x !important;
  color: transparent !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
}

.star-rating > span::before,
.star-rating > span::after {
  display: none !important;
  content: none !important;
}

/* Keep "Rated X.X" inner strong accessible to screen readers, hidden visually */
.star-rating .rating {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}