/* ==========================================================================
   Rating summary - Components/PdpRatingSummary (Views/Shared/Components/PdpRatingSummary)
   --------------------------------------------------------------------------
   The product page's rating block: the score, its star row, the basis line and a bar
   per star. One component, drawn wherever a product's rating is shown - the product
   page (mobile and desktop) and the variant sheet a product card opens - so the two
   cannot drift. That is why this sheet is linked on every page rather than compiled
   into the product page's bundle (it was body.page-product rules in product.less).

   The product page keeps its own surround in product.less: the desktop empty state
   beside this block and the two-column layout that pairs them.
   ========================================================================== */

/* THE BAND PALETTE - ONE SCALE, READ IN BOTH DIRECTIONS.
   Five stars is green and one star is orange, and the same five values colour the row's
   star, the row's bar and the summary star row - the colour means "this band", wherever
   it appears. */

/* The block's face and ink, stated on the block itself. On the product page it inherited them from
   the reviews section around it - the Latin-digit cut of the face (5, 100%) in the section's grey -
   and anywhere without that section (the variant sheet) it fell back to the Persian-digit face and
   read as another design. Set here, it is the same block wherever it is drawn; on the product page
   these are the values it already had. */
.pdp-rating__summary {
    font-family: yekanbakhen, yekanbakh, tahoma, sans-serif;
    color: #4A5F73;
}

.pdp-rating__score {
    /* the largest thing in the block without competing with the section's own title */
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #000000;
}

.pdp-rating__basis {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #767676;
}

/* THE SUMMARY STARS.
   The shared `.stars` component draws U+2B50 - a COLOUR emoji, which ignores the
   background-clip:text gradient the component relies on. The plain star character takes
   both the band colour and the fractional fill. */
/* inside the summary, so it outranks the shared .stars rule (theme-last), which is linked later
   and sets its own size and spacing */
.pdp-rating__summary .pdp-rating__stars {
    font-size: 22px;
    margin-top: 10px;
    --star-color: #E4E7EA;
    /* no reviews yet: no band, and the gradient still needs both its colours to draw the
       grey row at all */
    --star-background: #E4E7EA;
}

.pdp-rating__summary .pdp-rating__stars:before {
    content: '★★★★★';
    letter-spacing: 2px;
}

.pdp-rating__summary .pdp-rating__stars--band5 { --star-background: #17884A; }
.pdp-rating__summary .pdp-rating__stars--band4 { --star-background: #4CAF3F; }
.pdp-rating__summary .pdp-rating__stars--band3 { --star-background: #A4C639; }
.pdp-rating__summary .pdp-rating__stars--band2 { --star-background: #F0B323; }
.pdp-rating__summary .pdp-rating__stars--band1 { --star-background: #F07C1E; }

/* BEFORE THE FIRST REVIEW the score, its stars and the bars are the brand's, or the 5.0 default
   (ProductRatingFallbackService). They are drawn like any score - filled to it, in its band colour -
   and a short line above the basis says whose figures they are. */

.pdp-rating__source {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #4A5F73;
}

.pdp-rating__bars {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

/* the score block is `display: contents` on desktop, where the summary is one 340px column
   beside the empty state; it becomes a real box where the score sits beside the bars */
.pdp-rating__head {
    display: contents;
}

/* one grid, so every row's star, track and percentage line up in three columns regardless of
   how wide any single number happens to render */
.pdp-rating__row {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.pdp-rating__star {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
}

.pdp-rating__star .pdp-rating__star-mark {
    font-style: normal;
    /* slightly above the digit's size - a star's ink is spread over its box */
    font-size: 16px;
    line-height: 1;
}

.pdp-rating__star .pdp-rating__star-mark:before {
    content: "★";
}

.pdp-rating__track {
    display: block;
    height: 8px;
    border-radius: 4px;
    background-color: #EFEFEF;
    overflow: hidden;
}

.pdp-rating__fill {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.pdp-rating__row--band5 .pdp-rating__star-mark { color: #17884A; }
.pdp-rating__row--band5 .pdp-rating__fill { background-color: #17884A; }
.pdp-rating__row--band4 .pdp-rating__star-mark { color: #4CAF3F; }
.pdp-rating__row--band4 .pdp-rating__fill { background-color: #4CAF3F; }
.pdp-rating__row--band3 .pdp-rating__star-mark { color: #A4C639; }
.pdp-rating__row--band3 .pdp-rating__fill { background-color: #A4C639; }
.pdp-rating__row--band2 .pdp-rating__star-mark { color: #F0B323; }
.pdp-rating__row--band2 .pdp-rating__fill { background-color: #F0B323; }
.pdp-rating__row--band1 .pdp-rating__star-mark { color: #F07C1E; }
.pdp-rating__row--band1 .pdp-rating__fill { background-color: #F07C1E; }

.pdp-rating__percent {
    /* the figures a shopper actually compares, so they are weighted, not greyed */
    font-size: 13px;
    font-weight: 700;
    color: #23282D;
    text-align: left;
}

/* THE SCORE BESIDE THE DISTRIBUTION - on a phone, and always in the variant sheet (a narrow
   column even on desktop). Stacked, the score pushed the five bars most of a screen down. */
@media only screen and (max-width: 959.98px) {
    .pdp-rating__summary {
        display: flex;
        align-items: flex-start;
        gap: 20px;
    }

    .pdp-rating__head {
        display: block;
        /* wide enough for the basis line to wrap to three lines rather than five */
        flex: 0 0 38%;
        max-width: 38%;
    }

    .pdp-rating__bars {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0;
        padding-inline-start: 20px;
    }

    /* the rule between the two columns, as long as the distribution itself */
    .pdp-rating__bars::before {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        top: 2px;
        bottom: 9px;
        width: 1px;
        background-color: #E6E8EB;
    }

    .pdp-rating__row:first-child {
        margin-top: 2px;
    }
}

.tc-qv .pdp-rating__summary {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.tc-qv .pdp-rating__head {
    display: block;
    flex: 0 0 38%;
    max-width: 38%;
}

.tc-qv .pdp-rating__bars {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    padding-inline-start: 20px;
}

.tc-qv .pdp-rating__bars::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    bottom: 9px;
    width: 1px;
    background-color: #E6E8EB;
}

.tc-qv .pdp-rating__row:first-child {
    margin-top: 2px;
}

/* The product page's rating beside its title (ProductTemplate.Simple .km-rate-title): before the
   first review it is the brand's, and this word after it says so - in the chip's own small grey,
   so it qualifies the figure without becoming a second label. */
.km-rate-title--inherited {
    display: inline-flex;
    align-items: center;
}

.km-rate-title__source {
    margin-inline-start: 6px;
    font-size: 11px;
    font-weight: 400;
    color: #8a8f96;
    white-space: nowrap;
}