/*
 * [sr_rating_summary] — the .sr-review-meter block.
 *
 * Markup and look both match the block that sat in the old /shop/ hero as a raw
 * Elementor HTML widget, so the swap is not also a visual change. Every value
 * below was measured off the live page before the rebuild:
 *
 *   .sr-review-number   Cormorant Garamond 44px / 500 / #E6DECF / ls -0.012em
 *   .sr-review-stars    Inter 11px / #9C7E48 / ls 0.18em
 *   .sr-review-meta     Inter 11px / #847A66 / lh 1.45
 *   .sr-bar             85 x 4, #110E0B
 *   .sr-bar i           #BBB09A
 *   grid                two columns, score then bars
 *
 * One deliberate deviation: the score column is 112px, not the old 100px. The
 * count is read off the review pool now instead of typed in, and the pool holds
 * 50 rather than the "5" the old widget claimed, so the line needs the extra
 * 12px to sit on two tidy lines.
 *
 * Self-contained (no CSS variables from a page scope) because this block sits in
 * a hero, and heroes on this site do not all share one scope class.
 *
 * Enqueue from a page template with sr_child_asset( 'css', 'rating-summary' ).
 */

.sr-review-meter {
    display: grid;
    grid-template-columns: 112px minmax(0, 158px);
    gap: 0 18px;
    align-items: center;
}

.sr-review-meter * {
    box-sizing: border-box;
}

/* ---- score column ---- */

.sr-review-number {
    font-family: 'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
    font-size: 44px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.012em;
    color: #E6DECF;
}

.sr-review-stars {
    margin-top: 6px;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .18em;
    color: #9C7E48;
}

.sr-review-meta {
    margin-top: 8px;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    color: #847A66;
}

/* ---- histogram column ---- */

.sr-review-bars {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.sr-review-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
}

.sr-review-row > span,
.sr-review-row > em {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    color: #847A66;
}

.sr-review-row > em {
    text-align: right;
}

.sr-bar {
    height: 4px;
    background: #110E0B;
    position: relative;
    overflow: hidden;
}

.sr-bar i {
    display: block;
    height: 4px;
    background: #BBB09A;
    /* Grows on load. Decorative only. */
    transition: width 1.1s cubic-bezier(.22, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .sr-bar i {
        transition: none;
    }
}

@media (max-width: 520px) {
    .sr-review-meter {
        grid-template-columns: 1fr;
        gap: 18px 0;
        align-items: start;
    }
}