/* Star ratings, in eMAG's shape and this shop's palette.
 *
 * The amber is #f5a623, the same amber the homepage slider already uses for
 * its stars, so the two places a rating appears look like one shop rather
 * than two builds. The track is the grey the slider uses for the unfilled
 * half.
 *
 * Only styles for markup this theme prints: nothing here touches
 * .woocommerce-product-rating or .star-rating, so the parent theme's own
 * rating still looks like itself wherever it is left in place.
 */

.af-rating{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  line-height:1.2;
}

/* One row of grey stars with a second, amber row clipped over it. The width
 * comes in as --af-rating from PHP, already rounded to a half star, so a 4,5
 * lands exactly on the middle of the fifth glyph. */
.af-rating__stars{
  position:relative;
  color:#d2d2d7;
  font-size:15px;
  letter-spacing:1px;
  white-space:nowrap;
}

.af-rating__stars::before{
  content:"★★★★★";
  position:absolute;
  left:0;
  top:0;
  width:var(--af-rating,0%);
  overflow:hidden;
  color:#f5a623;
}

.af-rating__score{
  font-size:14px;
  font-weight:600;
  color:#1d1d1f;
}

/* 44px of height on the link, not 16px of text. This shop sells to
 * smallholders who are mostly on a phone and mostly not in their twenties,
 * and a link into the reviews is worth the extra row height on the card. The
 * target is grown with padding rather than with an overlay, so it cannot end
 * up sitting on top of the product title above it. */
.af-rating__count{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 2px;
  font-size:13px;
  color:#0b65c2;
  text-decoration:underline;
  text-underline-offset:2px;
}

.af-rating__count:hover,
.af-rating__count:focus{
  color:#1b5e20;
}

/* Kept in this file rather than borrowed from the theme, so the rating reads
 * correctly even if the stylesheet that defines .screen-reader-text is not
 * on the page. */
.af-rating__sr{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Cards are centre-aligned text in this theme, so the rating follows. */
.af-rating--card{
  justify-content:center;
  margin:0 0 2px;
}

.af-rating--single{
  gap:8px;
  margin:0 0 10px;
}

.af-rating--single .af-rating__stars{
  font-size:18px;
}

.af-rating--single .af-rating__score{
  font-size:16px;
}

.af-rating--single .af-rating__count{
  font-size:14px;
}