/**
 * Star rating display (menu PDP masthead, properties, BBQ Styles cards).
 * Partial fills use inline width on .menu-product-rating__fill (set in Twig).
 */
.menu-product-rating {
  display: inline-block;
  max-width: 100%;
}

.menu-product-rating__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.menu-product-rating__star {
  --menu-product-rating-star-size: 1.125rem;
  position: relative;
  display: block;
  width: var(--menu-product-rating-star-size);
  height: var(--menu-product-rating-star-size);
  flex-shrink: 0;
}

.menu-product-rating__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.menu-product-rating__svg-bg path {
  fill: var(--color-gray-2);
  opacity: 0.4;
}

.menu-product-rating__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.menu-product-rating__fill .menu-product-rating__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--menu-product-rating-star-size);
  height: var(--menu-product-rating-star-size);
}

.menu-product-rating__fill path {
  fill: var(--color-accent);
}

.section-properties[data-arts-theme-text="dark"] .menu-product-rating--properties .menu-product-rating__svg-bg path {
  fill: rgba(38, 38, 38, 0.28);
}

/* Stars must be visible in the white properties band (no scroll-reveal hide). */
.section-properties .menu-product-rating--properties {
  opacity: 1;
  visibility: visible;
}

.menu-product-rating--with-count .menu-product-rating__display {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.section-properties .menu-product-rating--properties .menu-product-rating__count {
  color: var(--color-dark-1, #262626);
  font-size: inherit;
  line-height: 1.2;
  white-space: nowrap;
}

:is(#bbq-styles-menu, .bbq-styles-card-grid) .menu-product-rating__svg-bg path {
  fill: rgba(255, 255, 255, 0.42);
}