.reviStarsContainer {
    --star-color: #dedede;
    --star-background: #f4c318;
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
    vertical-align: middle;
    margin: 5px 0px 5px 0px;
    height: 25px;
    /* Asegura que el contenedor vacío tenga altura */
}

.reviStarsContainer--left {
    justify-content: flex-start;
}

.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(--secundary);
}

/*
 * Widget «Fotos de clientes» (8.4.0): alto reservado mientras carga para no desplazar la
 * pagina (CLS). Son los altos finales medidos con el tema classic de PrestaShop 8.2 y el
 * widget real de Widgets dev: 203 px con el contenedor de 1110 px, 183 px de 690 a 930 px,
 * 167 px a 450 px y 151 px a 345 px. Se libera cuando Widgets marca el contenedor como listo,
 * vacio o fallido, o cuando el JS de Revi no carga (.revi-widgets-unavailable); un widget sin
 * fotos no deja hueco.
 */
html:not(.revi-widgets-unavailable) [data-revi-widget-lazy][data-revi-type-hint="photos"]:not([data-revi-state="ready"]):not([data-revi-state="empty"]):not([data-revi-state="failed"]) {
    min-height: 203px;
}

@media (max-width: 1199px) {
    html:not(.revi-widgets-unavailable) [data-revi-widget-lazy][data-revi-type-hint="photos"]:not([data-revi-state="ready"]):not([data-revi-state="empty"]):not([data-revi-state="failed"]) {
        min-height: 183px;
    }
}

@media (max-width: 600px) {
    html:not(.revi-widgets-unavailable) [data-revi-widget-lazy][data-revi-type-hint="photos"]:not([data-revi-state="ready"]):not([data-revi-state="empty"]):not([data-revi-state="failed"]) {
        min-height: 167px;
    }
}

@media (max-width: 420px) {
    html:not(.revi-widgets-unavailable) [data-revi-widget-lazy][data-revi-type-hint="photos"]:not([data-revi-state="ready"]):not([data-revi-state="empty"]):not([data-revi-state="failed"]) {
        min-height: 151px;
    }
}

/*
 * Sello Revi (8.6.0) en el pie: linea propia a todo el ancho de la fila del tema (classic pinta
 * displayFooterBefore dentro de un .row flexible) y sello centrado, con un
 * ancho maximo para que no se estire. Widgets alinea el sello al inicio de su contenedor; aqui
 * se centra en ambos sentidos de escritura, sin tocar text-align (RTL). Sin reserva de alto: va
 * al final de la pagina y no desplaza contenido visible al cargar.
 */
.revi-seal-footer {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    padding: 0 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Widgets fija width:100% y margin:0 con !important en el contenedor: se centra por flex. */
.revi-seal-footer > [data-revi-widget-lazy] {
    max-width: 480px;
}

/*
 * Solo el contenedor del modelo (revi-widget-seal-N, a todo el ancho): centrar los niveles
 * superiores los encogeria a 0 px, porque Widgets les da container-type: inline-size.
 */
.revi-seal-footer [class^="revi-widget-seal-"] {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}