/* Star ratings and rating bars for the Kingdom of Pets homepage variants and the reviews page
   (markup from kop-reviews/reviews-lib.php). Uses the kit's tokens from kop-base.css. */
.kr-stars { position: relative; display: inline-block; width: 92px; height: 18px; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z' fill='%23dfe6ee'/%3E%3C/svg%3E") 0 0 / 18.4px 18px repeat-x; }
.kr-stars > span { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z' fill='%23f5b301'/%3E%3C/svg%3E") 0 0 / 18.4px 18px repeat-x; }
.kr-stars.lg { width: 130px; height: 26px; background-size: 26px 26px; }
.kr-stars.lg > span { background-size: 26px 26px; }
.kr-score { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.kr-big { margin: 0; font: 800 54px/1 var(--kop-sans); color: var(--kop-ink); letter-spacing: -1px; }
.kr-big span { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--kop-muted); }
.kr-total { margin: 6px 0 0; font: 600 15px/1.3 var(--kop-sans); color: var(--kop-muted); }
.kr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font: 600 14px/1.2 var(--kop-sans); color: var(--kop-text); }
.kr-bars li { display: grid; grid-template-columns: 54px 1fr 30px; gap: 10px; align-items: center; }
.kr-bar { height: 10px; border-radius: 99px; background: #dbe5ef; overflow: hidden; }
.kr-bar > span { display: block; height: 100%; border-radius: 99px; background: #f5b301; }
.kr-count { text-align: right; color: var(--kop-muted); }