/* Estrela parcial no resumo das avaliações.

   O componente escreve "★★★★★" fixo, então nota 4,2 aparecia como
   cinco estrelas cheias — a referência mostra quatro cheias e um
   quinto pela metade. Em vez de mexer no bundle, o preenchimento é
   recortado: um gradiente que vira cor até 84% (4,2 de 5) e cinza
   depois, aplicado ao próprio texto.

   Mudou a nota? É só mudar a parada do gradiente: nota / 5 × 100. */

.lp-oke-avg .lp-stars,
.lp-rating .lp-stars {
  background-image: linear-gradient(90deg, #d21f1f 84%, #d9d9d9 84%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Safari antigo ignora background-clip: text e deixaria o texto
     invisível; a cor volta a valer no fallback. */
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .lp-oke-avg .lp-stars,
  .lp-rating .lp-stars {
    background-image: none;
    color: #d21f1f;
    -webkit-text-fill-color: #d21f1f;
  }
}

/* Nota para quem for mexer aqui: cheguei a colocar a linha
   "Korean Skincare Brand | Dr.Melaxin" abaixo do cabeçalho, porque
   ela aparece no texto da página de referência. A comparação de
   telas mostrou que lá ela NÃO é exibida no topo — o texto vem de
   um bloco oculto. Ficou de fora de propósito. */