.star-rating-display {
    /* display: inline-block; */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  
  .stars {
    font-size: 20px; /* 星星大小 */
    margin-right: 21px;
  
  }

  .star {
    position: relative;
    color: #D9D9D9; /* 默认颜色 */
  }

  .star::before {
    content: '★';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FFB139; /* 高亮颜色 */
    clip-path: polygon(var(--path, 0 0, 0 0));
  }
  
  .star.full {
    color: #FFB139; /* 高亮颜色 */
  }

.stars-content{
  color: rgba(var(--color-text), 1);
}


  /* .star.partial::after {
    content: '';
    display: inline-block;
    width: 2px;
    background-color: #ccc; /* 默认颜色 */
@media (max-width: 959px) {
  .stars {
    margin-right: 8px;
  }
}
/* ================= Apple 风格：评分行 =================
   原来星星 20px、数字用 body1（跟正文一样大），整行的重量跟商品标题接近，
   在标题下面显得吵。Apple 的做法是：评分是辅助信息，压小、压轻、收紧。

   颜色不动 —— score_color / count_color 是后台可配的行内样式，
   这里只管字号/字重/字距。 */

.star-rating .star-rating-display {
  align-items: center;
  gap: 0;
}

.star-rating .stars {
  font-size: 14px;
  margin-right: 8px;
  /* 星形字符本身几乎不带边距，挤在一起会糊成一团 */
  letter-spacing: 1px;
}

/* .stars-content 带着 body1 类（跟正文同级，(0,1,0)）——
   用 .star-rating 前缀提到 (0,2,0) 才压得过它，不用 !important。 */
.star-rating .stars-content {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* 评分数字比「(162 reviews)」重一档，靠字重区分层级而不是字号 */
.star-rating .stars-content > span:first-child {
  font-weight: 500;
}

@media (max-width: 959px) {
  .star-rating .stars {
    font-size: 13px;
    margin-right: 7px;
  }
  .star-rating .stars-content {
    font-size: 12px;
  }
}