/*
 * 商品卡片星等列（站台層基本樣式）
 *
 * markup 由 page-builder PageRenderService::applyCardRating() 塞進產品卡
 * （product002、product-list001、product-recommend001）：
 *   .ec-card-rating > 五顆 .ec-star--full|half|empty ＋ .ec-card-rating__count；無評論整列移除。
 *
 * ⚠️ 為什麼放站台層而非只靠範本 per-instance CSS：舊存檔區塊的 CSS 沒有這段，
 *    星星會只剩「(N)」；而編輯器不得在存檔時重灌範本 CSS（會洗掉設計師客製）。
 * ⚠️ specificity 刻意定在 0,2,0（.ec-card-rating .ec-star），⛔ 改用 :where() 降到 0,0,0／0,1,0：
 *    站台或匯入站常見的泛用 `span{…}`／`.xxx span{…}` 規則會把星形蓋掉。
 * ⚠️ 要覆寫它：specificity ≥ 0,2,0 且載入在後（頁面／畫布層 CSS、evomni-root.css 都在後）即可；
 *    低於 0,2,0 的寫法（例 `.ec-star--full{…}`＝0,1,0）蓋不過。
 *    範本 per-instance 規則（.template-wrapper.<實例> …＝0,4,0 起）不論順序都蓋得過。
 */

.ec-card-rating:empty {
    display: none;
}

.ec-card-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    color: var(--TextColorSecondary, #909399);
    font-size: var(--FontSizeHint, 12px);
    line-height: 1;
}

.ec-card-rating .ec-star {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--BorderColorPrimary, #dcdfe6);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-card-rating .ec-star--full {
    background: #f7ba2a;
}

.ec-card-rating .ec-star--half {
    background: linear-gradient(90deg, #f7ba2a 50%, var(--BorderColorPrimary, #dcdfe6) 50%);
}

.ec-card-rating .ec-star--empty {
    background: var(--BorderColorPrimary, #dcdfe6);
}

.ec-card-rating__count {
    margin-left: 4px;
}