@layer components {
  .rating { display: grid; gap: 6px; min-width: 0; }
  .rating__stars { display: flex; flex-wrap: wrap; gap: 4px; }
  .rating__star {
    width: var(--tap); height: var(--tap);
    display: grid; place-items: center;
    border-radius: var(--r-s); color: var(--text-3); cursor: pointer;
    transition: color var(--t-fast), transform var(--t-fast) var(--spring);
  }
  .rating__star:active { transform: scale(.88); }
  .rating__star:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* Выбранная звезда и все левее неё */
  .rating__star:has(input:checked),
  .rating__star:has(~ .rating__star input:checked) { color: var(--c-orange); }
  .rating__star:has(input:checked) .ico,
  .rating__star:has(~ .rating__star input:checked) .ico { fill: currentColor; }

  @media (hover: hover) {
    .rating__stars:hover .rating__star { color: var(--c-orange); }
    .rating__star:hover ~ .rating__star { color: var(--text-3); }
  }
}