/* =========================================================================
   PURE AMINO — PDP buyer reviews (native WC reviews, editorial skin)
   Section conventions match .specs / .coa-mini: 80/40 padding, hairline
   rules, mono numerals, square corners. Review text is user content, so it
   renders sentence-case body prose (brand uppercase stays on labels only).
   ========================================================================= */

.pdp-reviews { padding: 80px 40px; border-bottom: 1px solid var(--hairline); }

.rev-head {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    margin-bottom: 8px; align-items: flex-end;
}
.rev-head h2 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(40px, 5.5vw, 88px); line-height: .92;
    letter-spacing: -.03em; text-transform: uppercase;
    margin-top: 14px;
}
.rev-agg {
    display: flex; align-items: flex-end; gap: 16px;
    justify-content: flex-end; padding-bottom: 8px;
}
.rev-agg .avg {
    font-family: var(--font-mono); font-weight: 600;
    font-size: 46px; line-height: .9;
}
.rev-agg .meta, .rev-agg .agg-r .meta {
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-3); margin-top: 8px;
}

/* Layered star display: hairline base, ink fill clipped to rating width. */
.pa-stars {
    position: relative; display: inline-block;
    font-size: 15px; line-height: 1; letter-spacing: 3px;
}
.pa-stars .base { color: var(--hairline); }
.pa-stars .fill {
    position: absolute; left: 0; top: 0;
    overflow: hidden; white-space: nowrap; color: var(--ink);
}

/* Submission-received banner (revealed client-side off ?pa_review=received). */
.rev-thanks {
    border: 1px solid var(--nad-deep); color: var(--nad-deep);
    padding: 16px 22px; margin: 24px 0 0;
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 500;
}

/* Review list */
.rev-list { margin-top: 32px; }
.rev-item {
    border-top: 1px solid var(--hairline);
    padding: 26px 0;
    display: grid; grid-template-columns: 220px 1fr; gap: 28px;
    align-items: start;
}
.rev-item .who .n { font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.rev-item .who .dt {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-4); margin-top: 5px;
}
.rev-verified {
    display: inline-block; margin-top: 10px;
    border: 1px solid var(--hairline); padding: 4px 9px;
    font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 600; color: var(--nad-deep);
}
.rev-item .txt p {
    margin-top: 10px;
    font-size: 14px; line-height: 1.7; color: var(--ink-2);
    max-width: 68ch;
}
.rev-more {
    border-top: 1px solid var(--hairline); padding: 18px 0 0;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4);
}
.rev-empty {
    margin-top: 32px; border-top: 1px solid var(--hairline);
    padding: 28px 0 0;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-3);
}

/* Form card */
.rev-form-wrap {
    margin-top: 48px; max-width: 720px;
    border: 1px solid var(--hairline); background: var(--paper);
    padding: 30px 32px 32px;
}
.rev-form-wrap h3 {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 22px;
}
.rev-form .f-row { margin-bottom: 18px; }
.rev-form .f-label {
    display: block;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 500; color: var(--ink-3); margin-bottom: 9px;
}
.rev-form textarea {
    width: 100%; min-height: 140px; resize: vertical;
    border: 1px solid var(--hairline); border-radius: 0;
    background: var(--paper); color: var(--ink);
    padding: 13px 14px;
    font-family: var(--font-body); font-size: 16px; line-height: 1.6;
}
.rev-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rev-policy {
    font-size: 10px; letter-spacing: .06em; line-height: 1.8;
    color: var(--ink-3); margin: 4px 0 20px; max-width: 60ch;
}

/* Star input: DOM order 5→1 + row-reverse so :checked ~ label fills left. */
.pa-rev-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.pa-rev-stars input {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.pa-rev-stars label {
    font-size: 26px; line-height: 1; color: var(--hairline);
    cursor: pointer; padding: 0 2px; transition: color .12s ease;
}
.pa-rev-stars input:checked ~ label,
.pa-rev-stars label:hover,
.pa-rev-stars label:hover ~ label { color: var(--ink); }
.pa-rev-stars input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Gate notices (log in / not a purchaser) */
.rev-login {
    margin-top: 48px; max-width: 720px;
    border: 1px solid var(--hairline); padding: 22px 26px;
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 500; color: var(--ink-2);
}
.rev-login a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    .pdp-reviews { padding: 56px 20px; }
    .rev-head { grid-template-columns: 1fr; gap: 18px; }
    .rev-agg { justify-content: flex-start; padding-bottom: 0; }
    .rev-item { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
    .rev-form-wrap { padding: 22px 18px 24px; }
}