.reviStarsContainer {
    --star-color: #dedede;
    --star-background: #f4c318;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    margin: 2px 0px 5px 0px;
    height: 20px;

    /* Asegura que el contenedor vacío tenga altura */
}

.reviStarsContainer .reviStars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 25px;
    font-family: Times;
    line-height: 1;
}

.reviStarsContainer .reviStars::before {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: -3px;
    background: -webkit-gradient(linear, left top, right top, from(var(--star-background)), to(var(--star-color)));
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reviStarsContainer .reviStarsBlock {
    font-size: 11px;
    font-family: roboto;
    margin-left: 6px;
    margin-top: 0px;
    color: var(--secondary, #58616b);
}

/* Widget photos (8.2.0, #6730): la franja cambia de alto con el ancho de su contenedor
   (@container de Widgets: 140/120/104/88 px de tesela). El envoltorio replica esos cortes y
   embed/widget.js aplica var(--revi-photos-reserve) como reserva solo mientras carga. */
.revi-photos-slot {
    display: block;
    container-type: inline-size;
}

.revi-photos-slot > div {
    --revi-photos-reserve: 202px;
}

@container (max-width: 999px) {
    .revi-photos-slot > div {
        --revi-photos-reserve: 182px;
    }
}

@container (max-width: 599px) {
    .revi-photos-slot > div {
        --revi-photos-reserve: 166px;
    }
}

@container (max-width: 359px) {
    .revi-photos-slot > div {
        --revi-photos-reserve: 150px;
    }
}