.rating-stars{
  --rating-value:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#c9c2b4;
}
.rating-stars__button{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#c9c2b4;
  font:700 31px/1 var(--font-body);
  cursor:pointer;
  transition:color .15s ease,background .15s ease,transform .15s ease;
}
.rating-stars__button.is-filled,
.rating-stars__button.is-preview{
  color:var(--amber-500);
}
.rating-stars__button:hover{
  transform:translateY(-1px);
}
.rating-stars__button:focus-visible{
  outline:3px solid rgba(13,43,46,.24);
  outline-offset:2px;
  background:rgba(201,147,47,.12);
}
.rating-stars__button[aria-checked="true"]{
  background:rgba(201,147,47,.12);
}
.rating-stars--readonly{
  position:relative;
  gap:2px;
  font-size:18px;
  line-height:1;
  letter-spacing:1px;
}
.rating-stars__track{
  color:#c9c2b4;
  white-space:nowrap;
}
.rating-stars__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--rating-value) / 5 * 100%);
  overflow:hidden;
  color:var(--amber-500);
  white-space:nowrap;
}
.rating-field{
  min-width:0;
}
.rating-field__label{
  display:block;
  margin-bottom:7px;
  color:var(--petrol-900);
  font-size:13px;
  font-weight:700;
}
.rating-field__hint{
  display:block;
  min-height:19px;
  margin-top:5px;
  color:var(--ink-500);
  font-size:12px;
}
.rating-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:4px 0 18px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--sand-100);
  color:var(--ink-700);
  font-size:13px;
}
.rating-summary strong{
  color:var(--petrol-900);
  font-size:17px;
}
.rating-display{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.rating-display__value{
  color:var(--petrol-900);
  font-weight:800;
}
.rating-display__count{
  color:var(--ink-500);
  font-size:12px;
}
@media(max-width:520px){
  .rating-stars__button{width:39px;height:39px;font-size:29px}
}
