/*
 * Final rating on category and search product cards.
 *
 * Only layout and the score/count text live here. The star bar keeps Magento's
 * .rating-summary/.rating-result markup so the theme's own glyphs and percentage mask
 * still apply, including the 12px card-sized stars a late minified Codazon stylesheet
 * imposes on `.rating-summary .rating-result::before`. Every rule below is either
 * two-class or scoped under .productreviews-card-rating, so it outranks the theme's
 * single-class `.product-reviews-summary` defaults regardless of load order.
 */

.productreviews-visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.product-reviews-summary.productreviews-card-rating {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 6px;
    line-height: 1;
    margin: 4px 0 6px;
    max-width: 100%;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    /* Flex descendants otherwise tie with the desktop menu's .navioverlay(home)
       dimming layer (z-index: 2) and win the tie on DOM order, popping through it. */
    z-index: 1;
}

.product-reviews-summary.productreviews-card-rating:hover,
.product-reviews-summary.productreviews-card-rating:focus,
.product-reviews-summary.productreviews-card-rating:visited {
    color: inherit;
    text-decoration: none;
}

.productreviews-card-rating .rating-summary {
    display: block;
    left: 0;
    line-height: 1;
}

/* The blank theme pulls the star bar 5px left to bleed into a text column we do not have. */
.productreviews-card-rating .rating-result {
    margin-left: 0;
}

/*
 * Half-star geometry — same correction as product-reviews.css, repeated because the two
 * stylesheets load on different pages (listings vs. product/account).
 *
 * Magento sizes the orange fill layer as a percentage of the whole star strip. That is
 * only proportional to the rating while the glyphs sit edge to edge, but the theme
 * separates them with `letter-spacing`, which puts its gap *after* each glyph. So 4.5/5
 * fills 90% of a strip that measures 5 x (glyph + gap), landing 0.5 x gap past the fifth
 * glyph's midpoint — about 61% of that star instead of half.
 *
 * Nudging the glyphs right by half a gap centres each one in its own (glyph + gap) cell,
 * which puts every star's midpoint exactly on the matching half-star percentage. It has
 * to be a transform: `text-indent`/`padding` would widen the shrink-to-fit strip by the
 * same amount and cancel itself out. Both layers move together, so they stay aligned.
 *
 * `--productreviews-star-gap` mirrors the letter-spacing of the generated Codazon
 * category CSS; `body` only buys specificity over it, since it loads later.
 */
.rating-summary .rating-result {
    --productreviews-star-gap: 3px;
}

body .rating-summary .rating-result::before,
body .rating-summary .rating-result > span::before {
    transform: translateX(calc(var(--productreviews-star-gap) / 2));
}

.productreviews-card-score {
    color: #1a1a1a;
    font-size: 1.3rem;
    font-weight: 700;
}

.productreviews-card-count {
    color: #666;
    font-size: 1.2rem;
}

.productreviews-card-count-long {
    display: none;
}

/* List mode gives the card a wide text column; keep the rating on the left edge. */
.products.wrapper.list .product-reviews-summary.productreviews-card-rating {
    margin-left: 0;
    margin-right: auto;
}

/* Larger desktop rating on category/search results; mobile and homepage stay compact. */
@media (min-width: 768px) {
    body.catalog-category-view .productreviews-card-rating .rating-result,
    body.catalogsearch-result-index .productreviews-card-rating .rating-result,
    body.catalogsearch-advanced-result .productreviews-card-rating .rating-result {
        height: 16px;
    }

    body.catalog-category-view .productreviews-card-rating .rating-result::before,
    body.catalog-category-view .productreviews-card-rating .rating-result > span::before,
    body.catalogsearch-result-index .productreviews-card-rating .rating-result::before,
    body.catalogsearch-result-index .productreviews-card-rating .rating-result > span::before,
    body.catalogsearch-advanced-result .productreviews-card-rating .rating-result::before,
    body.catalogsearch-advanced-result .productreviews-card-rating .rating-result > span::before {
        font-size: 16px;
        height: 16px;
        line-height: 16px;
    }

    body.catalog-category-view .productreviews-card-score,
    body.catalogsearch-result-index .productreviews-card-score,
    body.catalogsearch-advanced-result .productreviews-card-score {
        font-size: 1.6rem;
    }

    /*
     * Optical centring of the stars against the text beside them.
     *
     * The boxes are already centred (the meta row is `align-items: center`); what is off
     * is the ink, because the star glyph sits high in its em box. The eye centres the
     * stars on the lowercase body of "(n recenzii)" - its x-height band - not on the
     * digits or the full ink extent, so that band is the target: judged against the
     * digits, earlier tunings looked level in measurement yet read as stars sitting high.
     *
     * Swept with dev/playwright/probe-star-ink-alignment.js: +0.5px puts the star ink
     * midpoint within 0.5px of the count's x-height midpoint at 1x, 1.25x and 2x device
     * scale (the glyph snaps to the device pixel grid, so nothing lands closer). Re-run
     * that probe rather than doing the arithmetic if the row layout changes; the offset
     * does not travel 1:1 with the rendered result.
     *
     * In px because this corrects a glyph metric at a fixed px size, so it must not
     * scale with the root font size. The star layers keep the horizontal half-gap
     * correction the rule above them explains.
     */
    body.catalog-category-view .productreviews-card-rating .rating-result::before,
    body.catalog-category-view .productreviews-card-rating .rating-result > span::before,
    body.catalogsearch-result-index .productreviews-card-rating .rating-result::before,
    body.catalogsearch-result-index .productreviews-card-rating .rating-result > span::before,
    body.catalogsearch-advanced-result .productreviews-card-rating .rating-result::before,
    body.catalogsearch-advanced-result .productreviews-card-rating .rating-result > span::before {
        transform: translate(calc(var(--productreviews-star-gap) / 2), 0.5px);
    }

    /*
     * The "(1)" count rides 0.5px high of the rest of the row, so it comes down to sit
     * level with the SKU digits and the score.
     *
     * A transform rather than `position: relative; top:` - the latter is rounded in
     * layout for this 12px text, which snaps its rendered centre to whole half-pixels
     * and jumps straight from +0.5px to -0.5px with nothing in between. A transform is
     * composited after layout and lands the 0.5px exactly. `inline-block` because a
     * transform does not apply to a non-replaced inline box.
     */
    body.catalog-category-view .productreviews-card-count,
    body.catalogsearch-result-index .productreviews-card-count,
    body.catalogsearch-advanced-result .productreviews-card-count {
        display: inline-block;
        transform: translateY(-0.5px);
    }

    /* Same order as the product page title: stars, score, "(n recenzii)", then the
       product code pushed to the right edge of the row. */
    body.catalog-category-view .productreviews-card-count-short,
    body.catalogsearch-result-index .productreviews-card-count-short,
    body.catalogsearch-advanced-result .productreviews-card-count-short {
        display: none;
    }

    body.catalog-category-view .productreviews-card-count-long,
    body.catalogsearch-result-index .productreviews-card-count-long,
    body.catalogsearch-advanced-result .productreviews-card-count-long {
        display: inline;
    }

    body.catalog-category-view .productreviews-card-meta > .sku,
    body.catalogsearch-result-index .productreviews-card-meta > .sku,
    body.catalogsearch-advanced-result .productreviews-card-meta > .sku {
        margin-left: auto;
        order: 1;
    }
}

/* Reserve a real row, including on unrated tiles, between the title and price. */
.cms-index-index .grid-style-10.highlighted .product-item .product-item-info,
.cms-index-index .grid-style-10.highlighted .product-item .product-item-details {
    height: auto;
}

.cms-index-index .grid-style-10.highlighted .product-item .product-item-info .product-item-details .product-item-name {
    height: auto;
    min-height: 7rem;
}

.cms-index-index .grid-style-10.highlighted .productreviews-home-rating-row {
    min-height: 20px;
}

.cms-index-index .grid-style-10.highlighted .productreviews-card-rating {
    gap: 5px;
    margin: 0;
    width: max-content;
}

.cms-index-index .grid-style-10.highlighted .productreviews-card-count {
    display: none;
}

/* Same optical drop as the desktop listing rule (see there): with only the score
   beside them, +0.5px puts the stars' visual mass level with its digits. */
body.cms-index-index .productreviews-card-rating .rating-result::before,
body.cms-index-index .productreviews-card-rating .rating-result > span::before {
    transform: translate(calc(var(--productreviews-star-gap) / 2), 0.5px);
}

.product-item-details .productreviews-card-meta {
    align-items: center;
    display: flex;
    gap: 12px;
    min-height: 20px;
    margin: 5px 0;
}

.productreviews-card-meta > .sku {
    flex: none;
}

.product-item .productreviews-card-meta .product-reviews-summary.productreviews-card-rating {
    flex: none;
    margin: 0;
    width: auto;
}

.productreviews-card-meta .productreviews-card-rating .rating-summary {
    flex: none;
    width: auto;
}

@media (max-width: 767px) {
    /* Match the theme's bottom-anchored mobile price area (110px + 52px).
       Reserve the metadata height in the title column so long names stay clear. */
    .product-list-container .list.products-list:not(.kgrid) .item.product-item .product-item-details {
        position: static;
        padding-top: 6px;
        padding-bottom: 24px;
    }

    .product-list-container .list.products-list:not(.kgrid) .product-item-details .productreviews-card-meta {
        bottom: 166px;
        left: 10px;
        right: 10px;
        justify-content: center;
        min-height: 16px;
        margin: 0;
        position: absolute;
    }

    /* The two-column mobile cards already omit the description and product code. */
    .productreviews-card-meta > .sku {
        display: none;
    }

    .products.wrapper.list .product-item .productreviews-card-meta .product-reviews-summary.productreviews-card-rating {
        gap: 4px;
        margin: 0;
    }
}