/* -------------------------------------------------------------------------
 * Rating count in the product tab bar.
 *
 * Its own file rather than a rule in master.css: that stylesheet is versioned
 * by the theme version, so an edit there does not reach a returning visitor
 * until the theme is released. This one is enqueued with a filemtime version
 * and ships the moment it changes.
 *
 * The count is nested inside the average, not placed beside it, so it is plain
 * inline text sharing the average's baseline. It deliberately carries no
 * vertical-align, line-height or margin: the row it lives in is a flex box with
 * align-items:center, and nudging the count by hand there is what produces the
 * off-baseline look this is avoiding.
 *
 * It stays at the muted body colour even while the tab is active, so the
 * average remains the number the eye lands on and the count reads as the
 * qualifier it is rather than a second score.
 * ---------------------------------------------------------------------- */

/*
 * The average and the count are one flex item in a nowrap row that the stars
 * already fill, so the item gets squeezed and "5 (1)" breaks onto two lines.
 * It is a two-token label; it should never wrap.
 */
.tab-bordered .nav-link .star-rating__text,
.nav-link .star-rating__text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tab-bordered .nav-link .star-rating__count,
.nav-link .star-rating__count {
    color: hsl(var(--gray-three));
    font-size: 0.875em;
    font-weight: 500;
}