.spavio-product-rating {
    --spavio-rating-gold: #b9955a;
    --spavio-rating-star-empty: #ddd7ce;
    --spavio-rating-text: #1f2328;
    --spavio-rating-muted: #6b6f76;

    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42em;
    width: fit-content;
    max-width: 100%;
    font: inherit;
    line-height: 1.25;
    color: var(--spavio-rating-text);
}

.spavio-product-rating-stars {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 1.05em;
    line-height: 1;
    letter-spacing: 0.075em;
    white-space: nowrap;
}

.spavio-product-rating-stars-base,
.spavio-product-rating-stars-fill {
    display: block;
}

.spavio-product-rating-stars-base {
    color: var(--spavio-rating-star-empty);
}

.spavio-product-rating-stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--spavio-rating-percent, 100%);
    overflow: hidden;
    color: var(--spavio-rating-gold);
    white-space: nowrap;
}

.spavio-product-rating-value {
    font-size: 0.96em;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--spavio-rating-text);
}

.spavio-product-rating-separator {
    color: #b4b7bb;
    font-size: 0.9em;
}

.spavio-product-rating-count {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--spavio-rating-muted);
}

@media (max-width: 480px) {
    .spavio-product-rating {
        gap: 0.35em;
    }

    .spavio-product-rating-stars {
        font-size: 1em;
    }

    .spavio-product-rating-count {
        font-size: 0.87em;
    }
}