@layer components {

    .reviews__layout {
        display: grid;
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        gap: var(--s-7) clamp(40px, 7vw, 128px);
        align-items: start;
    }

    .reviews__summary {
        position: sticky;
        top: calc(var(--h-header-slim) + var(--s-5));
        display: grid;
        gap: var(--s-3);
    }

    .reviews__avg {
        font-size: var(--t-3xl);
        font-variant-numeric: lining-nums;
    }

    .reviews__based {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .reviews__dist {
        display: grid;
        gap: var(--s-2);
        margin-block: var(--s-3);
    }

    .reviews__bar {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 44px;
        align-items: center;
        gap: var(--s-3);
        font-size: var(--t-xs);
        color: var(--c-muted);
        font-variant-numeric: tabular-nums;
    }

    .reviews__bar-n {
        text-align: right;
    }

    .reviews__bar-meter {
        display: block;
        width: 100%;
        height: 4px;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--c-line);
        overflow: hidden;
        appearance: none;
    }

    .reviews__bar-meter::-webkit-progress-bar {
        background: var(--c-line);
    }

    .reviews__bar-meter::-webkit-progress-value {
        background: var(--c-ink);
    }

    .reviews__bar-meter::-moz-progress-bar {
        background: var(--c-ink);
    }

    .reviews__products {
        display: grid;
        margin-top: var(--s-3);
        border-top: 1px solid var(--c-line);
        font-size: var(--t-sm);
    }

    .reviews__product {
        display: flex;
        justify-content: space-between;
        gap: var(--s-3);
        padding-block: var(--s-2);
        border-bottom: 1px solid var(--c-line);
        color: var(--c-muted);
        font-variant-numeric: tabular-nums;
    }

    .reviews__product a {
        color: var(--c-ink);
    }

    .reviews__product a:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .reviews__tools {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
        padding-bottom: var(--s-3);
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .reviews__sort {
        display: flex;
        align-items: center;
        gap: var(--s-2);
    }

    .reviews__select {
        min-height: 40px;
        padding: 0 var(--s-6) 0 var(--s-3);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-1);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
        color: var(--c-ink);
        cursor: pointer;
        appearance: none;
    }

    .reviews--brand {
        padding-inline: var(--gutter);
    }

    @media (max-width: 899px) {
        .reviews__layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .reviews__summary {
            position: static;
        }
    }

    .reviews__showing {
        margin-bottom: var(--s-4);
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

}

@layer components {

    .review {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        gap: var(--s-3) var(--s-6);
        padding-block: var(--s-6);
        border-top: 1px solid var(--c-line-strong);
    }

    .review__who {
        display: grid;
        align-content: start;
        gap: 2px;
        font-size: var(--t-sm);
    }

    .review__name {
        font-weight: 500;
    }

    .review__verified {
        display: flex;
        align-items: center;
        gap: var(--s-1);
        font-size: var(--t-xs);
        color: var(--c-accent);
    }

    .review__verified .icon {
        font-size: 11px;
    }

    .review__skin {
        margin-top: var(--s-1);
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .review__skin:empty {
        display: none;
    }

    .review__body {
        display: grid;
        gap: var(--s-2);
    }

    .review__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-3);
    }

    .review__date {
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .review__title {
        font-family: var(--f-display);
        font-size: var(--t-lg);
        font-weight: var(--fw-display);
    }

    .review__text {
        max-width: 66ch;
    }

    .review__product {
        margin-top: var(--s-1);
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .review__product .link {
        color: var(--c-ink);
    }

    @media (max-width: 767px) {
        .review {
            grid-template-columns: minmax(0, 1fr);
        }

        .review__who {
            grid-template-columns: auto auto 1fr;
            align-items: center;
            gap: var(--s-3);
        }

        .review__skin {
            margin-top: 0;
        }
    }

}