.pim-review-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:var(--pim-rb-star-gap,16px);
    width:100%;
    box-sizing:border-box;
    font-family:var(--pim-rb-ff, inherit);
    font-weight:var(--pim-rb-fw,400);
    font-size:var(--pim-rb-fs,16px);
    line-height:var(--pim-rb-lh,1.4);
    letter-spacing:var(--pim-rb-ls,0);
    text-transform:var(--pim-rb-tt,none);
    color:var(--pim-rb-clr,#fff);
}

.pim-review-bar__text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
    margin-top:var(--pim-rb-text-mar-top,0);
    margin-bottom:var(--pim-rb-text-mar-bot,0);
}

/* Desktop copy shows from tablet width up; mobile copy takes over below 768px. */
.pim-review-bar__text--mobile{ display:none; }

.pim-review-bar__rating{ font-weight:var(--pim-rb-fw,400); }

.pim-review-bar__count{ white-space:nowrap; }

/* ── Review-count visibility, per device (driven by data-show-count-*) ── */
.pim-review-bar[data-show-count="no"] .pim-review-bar__text--desktop .pim-review-bar__count{ display:none; }
.pim-review-bar[data-show-count-small="no"] .pim-review-bar__text--mobile .pim-review-bar__count{ display:none; }

/* ── Star visibility, per device (driven by data-show-stars-*) ── */
.pim-review-bar[data-show-stars="no"] .pim-review-bar__stars{ display:none; }

/* ── Stars ── */
.pim-review-bar__stars{
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
}

.pim-review-bar__star{
    position:relative;
    display:block;
    box-sizing:content-box;
    width:var(--pim-rb-star-size,23px);
    height:var(--pim-rb-star-size,23px);
    max-width:none;
    flex-shrink:0;
    /* Star icons fill their box edge-to-edge with no leading, while text
       sits a touch above the vertical center of its line-height box
       (line-height adds more visual space below the glyphs than above,
       since descenders eat into the bottom half-leading). This nudge
       brings the star's optical center in line with the text's, and
       scales with font-size via em so it holds up at any size. */
    margin-top:-0.07em;
}

.pim-review-bar__star-bg,
.pim-review-bar__star-fill{
    display:block;
    box-sizing:content-box;
    width:100%;
    height:100%;
    max-width:none;
    aspect-ratio:1/1;
}

.pim-review-bar__star-bg{ fill:var(--pim-rb-star-bg,rgba(255,255,255,.35)); }

.pim-review-bar__star-fill-wrap{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:var(--pim-rb-fill,0%);
    overflow:hidden;
}

.pim-review-bar__star-fill-wrap .pim-review-bar__star-fill{
    fill:var(--pim-rb-star-fill,#fff);
    width:var(--pim-rb-star-size,23px);
    height:var(--pim-rb-star-size,23px);
}

/* ── Tablet: switch to medium toggle, copy stays the same as desktop ── */
@media screen and (min-width:768px) and (max-width:1024px){
    .pim-review-bar[data-show-count-medium="no"] .pim-review-bar__text--desktop .pim-review-bar__count{ display:none; }
    .pim-review-bar[data-show-stars-medium="no"] .pim-review-bar__stars{ display:none; }
}

/* ── Mobile: swap to the shorter copy so the bar fits on one line ── */
@media screen and (max-width:767px){
    .pim-review-bar{ flex-wrap:wrap; justify-content:center; gap:8px var(--pim-rb-star-gap,16px); }
    .pim-review-bar__text--desktop{ display:none; }
    .pim-review-bar__text--mobile{ display:inline; }
    .pim-review-bar[data-show-stars-small="no"] .pim-review-bar__stars{ display:none; }
}